/*==================================================
PATA Y ALETA
LUXURY EVOLUTION v1.0
NO MODIFICA EL BRANDING
==================================================*/

:root{

--lux-container:1400px;

--lux-space-xs:16px;
--lux-space-sm:32px;
--lux-space-md:64px;
--lux-space-lg:100px;
--lux-space-xl:140px;

--lux-radius:28px;

--lux-glass:
rgba(255,255,255,.045);

--lux-border:
rgba(255,255,255,.08);

--lux-shadow:
0 20px 60px rgba(0,0,0,.22);

--lux-transition:
.35s cubic-bezier(.22,.61,.36,1);

}

/*=========================================
GLOBAL RHYTHM SYSTEM
=========================================*/

section{

position:relative;

}

.hero,
.categories,
.luxury-section,
.mascotas-section,
footer{

position:relative;

z-index:2;

}

.hero{

margin-top:60px;

}

.categories{

padding-top:var(--lux-space-xl);

padding-bottom:var(--lux-space-xl);

}

.luxury-section{

padding-top:var(--lux-space-xl);

padding-bottom:var(--lux-space-xl);

}

.mascotas-section{

padding-top:var(--lux-space-xl);

padding-bottom:var(--lux-space-xl);

}

footer{

padding-top:120px;

}

/*==================================================
LUXURY CARD SYSTEM v1
==================================================*/

.card{

position:relative;

overflow:hidden;

border-radius:32px;

border:1px solid rgba(255,255,255,.08);

background:rgba(255,255,255,.04);

backdrop-filter:blur(12px);

transition:
transform .45s cubic-bezier(.22,.61,.36,1),
box-shadow .45s,
border-color .45s;

box-shadow:
0 18px 40px rgba(0,0,0,.18);

}

.card::before{

content:"";

position:absolute;

left:0;
right:0;
top:0;

height:2px;

background:linear-gradient(
90deg,
transparent,
rgba(0,213,255,.55),
transparent
);

opacity:0;

transition:.45s;

}

.card:hover{

transform:
translateY(-8px);

border-color:
rgba(0,213,255,.22);

box-shadow:
0 28px 70px rgba(0,0,0,.28);

}

.card:hover::before{

opacity:1;

}

/*==================================================
IMAGES PREMIUM
==================================================*/

.card img{

transition:
transform .7s ease;

}

.card:hover img{

transform:scale(1.04);

}

/*==================================================
LUXURY BUTTON SYSTEM
==================================================*/

.btn-primary,
.btn-secondary,
.primary-btn,
.secondary-btn{

position:relative;

overflow:hidden;

transition:
all .35s cubic-bezier(.22,.61,.36,1);

}

.btn-primary:hover,
.primary-btn:hover{

transform:translateY(-3px);

box-shadow:
0 16px 35px rgba(0,213,255,.25);

}

.btn-secondary:hover,
.secondary-btn:hover{

transform:translateY(-3px);

background:rgba(255,255,255,.12);

border-color:rgba(255,255,255,.20);

}

/*==================================================
SECTION EXPERIENCE
==================================================*/

section h2{

letter-spacing:-1px;

font-weight:700;

line-height:1.1;

margin-bottom:28px;

}

section p{

line-height:1.8;

}

/*==================================================
LIVE RIBBON FIX
==================================================*/

.live-ribbon{

display:flex !important;

align-items:center !important;

overflow:hidden !important;

position:relative;

z-index:50;

}

.live-label{

display:flex !important;

align-items:center;

justify-content:center;

flex:0 0 150px;

}

.live-ribbon-track{

display:flex;

align-items:center;

flex:1;

overflow:hidden;

}

.live-ribbon-content{

display:flex;

align-items:center;

white-space:nowrap;

width:max-content;

}