:root{

  --bg:          #96002F;
  --bg-2:        #A80038;
  --surface:     rgba(255,255,255,.10);
  --surface-2:   rgba(255,255,255,.16);
  --line:        rgba(255,255,255,.22);
  --line-strong: rgba(255,255,255,.38);

  --text:        #FFFFFF;
  --text-2:      rgba(255,255,255,.86);
  --muted:       rgba(255,255,255,.62);

  --accent:      #FFFFFF;
  --accent-2:    #FFFFFF;
  --accent-deep: #FFE3EC;
  --on-accent:   #96002F;
  --glow:        rgba(255,255,255,.42);
  --glow-soft:   rgba(255,255,255,.13);

  --vidrio:       linear-gradient(165deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
  --vidrio-fuerte:linear-gradient(165deg,rgba(255,255,255,.22),rgba(255,255,255,.07));
  --campo-bg:     rgba(255,255,255,.10);

  --tracking-h: -.045em;
  --radius: 22px;
  --radius-sm: 14px;
  --radius-pill: 100px;

  --sh-depth: 0 8px 30px rgba(120,0,40,.45);
  --sh-lit:   0 0 24px rgba(255,255,255,.35);
  --sh-hover: 0 0 22px rgba(255,255,255,.8), 0 0 56px rgba(255,255,255,.35);
  --sh-suave: 0 2px 12px rgba(120,0,40,.4);
  --sombra-panel: 0 40px 90px -58px rgba(90,0,30,.9);

  --grano-op: .028;
  --vineta: radial-gradient(110% 92% at 50% 44%, transparent 58%, rgba(120,0,40,.42) 100%);

  --filigrana:     url('../img/filigrana.svg');
  --filigrana-tam: 620px;

  --filigrana-op:  .055;

  --pil-bg:  #FFFFFF;
  --pil-txt: #16161A;
}

.bg-static{
  background:
    radial-gradient(58% 46% at 50% 42%, #E92C71, transparent 72%),
    radial-gradient(70% 60% at 50% 100%, #9E0038, transparent 76%),
    var(--bg);
}

.header__logo--claim{ display:flex; align-items:center; gap:.8rem }
.header__logo--claim em{
  font-style:normal; font-weight:400;
  font-size:.62rem; line-height:1.35; letter-spacing:.02em;
  color:var(--text-2); max-width:16ch;
}
@media (max-width:900px){ .header__logo--claim em{ display:none } }

.hero--marca{
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-start;
  padding-top:calc(var(--header-h) + clamp(2rem,7vh,5rem));
  padding-bottom:0;
  overflow:hidden;
}
.hero--marca .hero__inner{ position:relative; z-index:2; max-width:46rem }
.hero--marca .hero__lead{ max-width:34ch; color:var(--text-2) }
.hero--marca .eyebrow{ color:rgba(255,255,255,.72) }
.hero--marca .eyebrow::before{ background:#fff }

.hero--marca .eyebrow--linea{
  display:block; line-height:1.55;
  font-size:.82rem; letter-spacing:.2em;
}
.hero--marca .eyebrow--linea::before{
  display:inline-block; vertical-align:middle;
  margin-right:.75rem;
}

.hero--marca .eyebrow--sabores{ display:inline-block; vertical-align:middle }
.hero--marca .eyebrow--sabores{

  font-weight:600;

  background:linear-gradient(100deg,
    #FF5C8A  0%,
    #FF8A3D 34%,
    #F2D14B 64%,
    #39C08A 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .hero--marca .eyebrow--sabores{ color:rgba(255,255,255,.9) }
}

.hero--marca .eyebrow--linea::before{
  background:linear-gradient(90deg,#FF5C8A,transparent);
  width:40px;
}

.hero__cartel{ margin-top:auto; position:relative; z-index:1 }
.hero__cartel .titulo-outline{

  font-size:19vw;

  margin-bottom:0;
}

.mascota--viaje{
  --mascota-w:29%; --mascota-max:430px;
}

.seccion--club{ position:relative; overflow:hidden }
.club__grid{ position:relative; z-index:2; max-width:52rem }

.h2{ max-width:11.2em }
.seccion--club .h2{ max-width:9.25em }

.seccion--noche{
  position:relative;
  padding-block:clamp(6rem,13vw,10.5rem);
}
.seccion--noche::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(9,4,10,0)   0%,
    rgba(9,4,10,.52) 12%,
    rgba(9,4,10,.66) 40%,
    rgba(9,4,10,.64) 80%,
    rgba(9,4,10,.30) 94%,
    rgba(9,4,10,0)  100%);
}

.seccion--noche > *{ position:relative; z-index:1 }

.noche__grid{
  position:relative;
  display:grid; grid-template-columns:.9fr 1.1fr;
  gap:clamp(2rem,5vw,4rem); align-items:center;
}
.noche__grid > div{ grid-column:2 }
@media (max-width:900px){
  .noche__grid{ grid-template-columns:1fr }
  .noche__grid > div{ grid-column:1 }
}

.seccion--noche .lectura{ text-shadow:0 2px 18px rgba(0,0,0,.85) }

.seccion--noche .logos{ opacity:.78; filter:none }
.seccion--noche .logos span,
.seccion--noche .noche__pie{ text-shadow:0 2px 14px rgba(0,0,0,.9) }
.seccion--noche .lectura{ color:#fff }
.seccion--noche .lectura .lw{ color:#fff }
.mascota--noche{
  position:relative; align-self:end;
  --mascota-w:100%; --mascota-max:none;
  right:auto; bottom:auto;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.6));
}
@media (max-width:860px){ .mascota--noche{ max-width:280px; margin-inline:auto } }

.noche__pie{
  margin-top:clamp(3rem,7vw,5rem); margin-bottom:1rem;
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.45);
}

.h2{ font-weight:600 }

.sabor{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.82rem; color:var(--text-2);
  padding:.42rem .9rem; border-radius:100px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.08);
}
.sabor i{
  width:9px; height:9px; border-radius:50%; flex:none;
  background:var(--s); box-shadow:0 0 10px var(--s);
}

.ficha{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(.8rem,2vw,1.4rem);
}
@media (max-width:760px){ .ficha{ grid-template-columns:repeat(2,1fr) } }
.ficha__dato{
  padding:clamp(1.1rem,2.4vw,1.7rem);
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--vidrio); text-align:center;
}
.ficha__dato b{
  display:block; font-size:clamp(2rem,5vw,3.4rem); font-weight:600;
  letter-spacing:-.05em; line-height:1;
}
.ficha__dato span{
  display:block; margin-top:.5rem;
  font-size:.78rem; color:var(--muted); letter-spacing:.04em;
}

.gondola{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:.7rem; margin-top:clamp(1.6rem,3vw,2.4rem);
}

.gondola__item{
  display:flex; align-items:center; gap:.8rem;
  padding:1rem 1.3rem; border-radius:var(--radius-sm);
  border:1px solid var(--line);
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(14px) saturate(1.15);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  font-size:.95rem; color:var(--text-2);
}
.gondola__item b{ font-weight:500; color:var(--text) }

.gondola__item span{ font-size:.85rem; color:var(--text-2); margin-left:auto }

.cintillo{
  display:flex; height:5px; border-radius:100px; overflow:hidden;
  margin-top:clamp(1.8rem,4vw,2.6rem);
  box-shadow:0 0 22px rgba(255,255,255,.22);
}
.cintillo i{ flex:1 }

@media (max-width:760px){

  .mascota--viaje{ --mascota-w:44%; --mascota-max:210px }
  .hero__cartel .titulo-outline{ font-size:23vw }
  .hero--marca .hero__lead{ max-width:26ch }
  .sabor{ font-size:.75rem; padding:.34rem .7rem }
}

.reflejo{
  --rf-1: var(--text);
  --rf-3: var(--text);
  --rf-luz: 6.5s;
}
#club     .reflejo{ --rf-2:#FF5C8A }
#sabores  .reflejo{ --rf-2:#39C08A }
#donde    .reflejo{ --rf-2:#F2D14B }
#preguntas .reflejo{ --rf-2:#FF8A3D }
#contacto .reflejo{ --rf-2:#F0417A }

.cortina--afiche .cortina__marca{
  gap:0;
  font-size:19vw; line-height:.82; font-weight:700;
  letter-spacing:-.045em; text-transform:uppercase;

  overflow:hidden;
}
.cortina--afiche .lc{ font-weight:inherit }

.lc--1{ color:#FF5C8A }
.lc--2{ color:#39C08A }
.lc--3{ color:#F0417A }
.lc--4{ color:#FF8A3D }
.lc--5{ color:#F2D14B }
.lc--6{ color:#FF5C8A }

.cortina--afiche .cortina__barra i{ background:#fff }

.seccion--club .pildora{
  position:relative; overflow:hidden; isolation:isolate;
  --pil-bg:rgba(255,255,255,.12);
  --pil-txt:#fff;
  border:1px solid rgba(255,255,255,.30);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 18px 44px -32px rgba(0,0,0,.8);
  transition:width .35s var(--ease-mat), box-shadow .35s var(--ease-mat),
             transform .35s var(--ease-mat), border-color .35s var(--ease-mat);
}
.seccion--club .pildora::before{
  content:''; position:absolute; inset:0; z-index:-1;

  background:linear-gradient(90deg,
    var(--p,#fff) 0%,
    var(--p,#fff) 13%,
    color-mix(in srgb, var(--p,#fff) 52%, transparent) 42%,
    transparent 86%);
  opacity:.8;
  transform:translateX(-14%);
  transition:transform .5s var(--ease-mat), opacity .5s var(--ease-mat);
}

@supports not (background:color-mix(in srgb, red 50%, transparent)){
  .seccion--club .pildora::before{
    background:linear-gradient(90deg, var(--p,#fff) 0%, transparent 74%);
  }
}

.seccion--club .pildora::after{
  content:''; position:absolute; right:clamp(1.2rem,2.6vw,2rem); top:50%;
  width:10px; height:10px; margin-top:-5px; border-radius:50%;
  background:var(--p,#fff); box-shadow:0 0 14px var(--p,#fff);
  transition:transform .4s var(--ease-mat);
}
@media (hover:hover){
  .seccion--club .pildora:hover{
    border-color:var(--p,#fff);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.4),
               0 30px 60px -34px rgba(0,0,0,.85),
               0 0 34px -8px var(--p,#fff);
  }
  .seccion--club .pildora:hover::before{ transform:translateX(0); opacity:.9 }
  .seccion--club .pildora:hover::after{ transform:scale(1.35) }
}
.seccion--club .pildora.is-activa{ border-color:var(--p,#fff) }
.seccion--club .pildora.is-activa::before{ transform:translateX(0); opacity:.9 }

.tarjeta-gira{
  --gira-fondo:rgba(74,0,26,.62);

  --gira-tinta:#48001A;
}

@media (max-width:860px){
  .gondola__item,
  .seccion--club .pildora{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}

.latas-movil{
  position:fixed; inset:0; z-index:0;
  pointer-events:none;
  display:grid; place-items:center;

  animation:lmFlota 8s ease-in-out infinite alternate;
}
@keyframes lmFlota{
  from{ transform:translate3d(0,0,0) }
  to  { transform:translate3d(0,-10px,0) }
}
.lm__lata{
  grid-area:1/1;
  position:relative;
  width:40vw; max-width:224px;
}
.lm__lata img{ display:block; width:100%; height:auto }

.lm__lata::before{
  content:'';
  position:absolute; z-index:-1;
  left:-95%; right:-95%; top:-26%; bottom:-26%;
  background:radial-gradient(50% 42% at 50% 50%, var(--s), transparent 68%);
  opacity:.40;
}

@media (max-width:860px){
  .hero--marca{ position:relative }
  .hero--marca::before{
    content:'';
    position:absolute; inset:0 0 auto 0; height:62%;
    background:linear-gradient(180deg,rgba(120,0,38,.62),rgba(120,0,38,0));
    pointer-events:none; z-index:0;
  }
  .hero--marca .hero__inner{ position:relative; z-index:1 }
}

@media (prefers-reduced-motion: reduce){
  .latas-movil{ animation:none }
}

#donde .cinta--chica .cinta__pista{ color:var(--text-2) }
#donde .cinta{ border-color:var(--line) }