/* =====================================================================
   LANDING URBANA (negro) — maqueta aprobada el 2-oct-2026, ahora es la landing
   La cargan index.html y checkout/. Se carga DESPUÉS de styles.css y pisa
   lo necesario: fondo negro, bordes/sombras duras en blanco y azul,
   grano de cemento y textos claros.
   ===================================================================== */
:root{
  --cemento:#08080A;
  --ink:#F4F4F2;           /* texto principal sobre negro */
  --line:#F4F4F2;          /* bordes duros */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body{background:var(--cemento);color:var(--ink);}
/* grano de cemento sobre toda la página */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;background-image:var(--grain);mix-blend-mode:screen;opacity:.55;}
/* Puntero: SIEMPRE se ve la flecha/mano del sistema (antes se ocultaba y
   sobre los pop-ups —que el navegador dibuja por encima de todo— no había
   puntero visible). El círculo queda solo como halo, y se esconde con un
   pop-up o visor abierto. */
@media (pointer:fine){ body.has-cursor{cursor:auto;} body.has-cursor a,body.has-cursor button,body.has-cursor [role="button"],body.has-cursor label{cursor:pointer;} }
#cur{border-color:rgba(255,255,255,.55);width:34px;height:34px;}
#cur.hot{width:48px;height:48px;background:rgba(63,92,255,.18);border-color:var(--cobalt-2);}
body:has(dialog[open]) #cur,body:has(.gal-overlay.open) #cur{display:none;}

/* botones: borde blanco + sombra azul dura */
.btn{border-color:var(--line);box-shadow:5px 5px 0 var(--cobalt);}
.btn:hover{box-shadow:2px 2px 0 var(--cobalt);}
.btn-white{background:#fff;color:#000;}

/* NAV negra con línea azul */
.nav{background:#000;border-bottom:3px solid var(--cobalt);}
.site-menu{background:#000;border-bottom:3px solid var(--cobalt);}
.site-menu-link{border-bottom-color:rgba(255,255,255,.14);}
.site-menu-link:hover{color:var(--cobalt-2);}
.nav-burger{background:var(--cobalt);border-color:#fff;box-shadow:3px 3px 0 #fff;}
.nav-burger span{background:#fff;}

/* HERO */
.hero{background:#000;}
@media (max-width:820px){ .hero-cta-solo{background:var(--cobalt);color:#fff;} }

/* FRASE CON RITMO (bajo el hero) — palabra por palabra, tipo historia */
.kx{background:#000;border-block:1px solid rgba(255,255,255,.08);padding:clamp(26px,4vw,44px) 20px;text-align:center;overflow:hidden;}
.kx-line{margin:0;font-family:'Montserrat',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.5em;padding-left:.5em;color:#fff;font-size:clamp(14px,2.2vw,26px);line-height:1.7;min-height:1.7em;display:grid;place-items:center;}
.kx-in{display:block;}
.kx-w{display:inline-block;opacity:0;animation:kxIn .5s cubic-bezier(.2,.9,.2,1.2) forwards;}
@keyframes kxIn{0%{opacity:0;transform:translateY(.5em) scale(1.35);filter:blur(6px);}60%{opacity:1;filter:blur(0);}100%{opacity:1;transform:none;filter:none;}}
@media (prefers-reduced-motion:reduce){.kx-w{animation:none;opacity:1;}}

/* FRANJA DE CAMPAÑA — copia la plantilla de las historias:
   PREMIUM COOKIES [ 8 OCT ] STOCK LIMITADO / NURVA / [ PRONTO ] */
.cmp{display:flex;flex-direction:column;align-items:center;gap:clamp(12px,2vw,20px);padding:clamp(44px,6vw,80px) 20px clamp(30px,4vw,48px);background:#000;}
.cmp-bar{display:flex;align-items:center;justify-content:center;gap:clamp(12px,2.4vw,26px);font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase;color:#fff;}
.cmp-tag{font-size:clamp(12px,1.5vw,17px);line-height:1.05;text-align:center;max-width:7.5em;}
.cmp-date{border:2px solid #fff;padding:.12em .55em;font-size:clamp(26px,4.4vw,52px);font-weight:900;line-height:1.05;letter-spacing:-.01em;white-space:nowrap;}
.cmp-logo{width:min(560px,82vw);height:auto;filter:drop-shadow(0 0 26px rgba(30,58,255,.45));}
.cmp-seal{border:2px solid #fff;padding:.3em 2.4em;font-family:'Archivo',sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(15px,2vw,22px);color:#fff;}
.cmp-seal-btn{cursor:pointer;transition:background .15s ease,color .15s ease;}
.cmp-seal-btn:hover{background:#fff;color:#000;}
.cmp-stock{margin-top:6px;font-family:'Montserrat',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.3em;font-size:11px;color:rgba(255,255,255,.5);}

/* SABORES: tarjeta negra con marco de neón azul (en vez del color de cada
   sabor, que se veía "tienda de galletas"). Al activarse se enciende el neón. */
.flavor-card{background:transparent;}
.flavor-fill{background:#05060F!important;border:2px solid rgba(63,92,255,.35);transition:opacity .6s ease,box-shadow .6s ease,border-color .6s ease;opacity:1;}
.flavor-card.is-active .flavor-fill,.flavor-card:hover .flavor-fill{border-color:var(--cobalt-2);box-shadow:0 0 0 1px var(--cobalt),0 0 22px rgba(30,58,255,.65),0 0 70px rgba(30,58,255,.35),inset 0 0 50px rgba(30,58,255,.18);}
.flavor-visual::before{content:"";position:absolute;width:62%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(30,58,255,.45),transparent 65%);filter:blur(10px);opacity:.5;transition:opacity .6s ease;}
.flavor-card.is-active .flavor-visual::before,.flavor-card:hover .flavor-visual::before{opacity:1;}
.flavor-title,.flavor-card.is-active .flavor-title,.flavor-card:hover .flavor-title{color:#fff;}
.flavor-desc,.flavor-card.is-active .flavor-desc,.flavor-card:hover .flavor-desc{color:rgba(244,244,242,.7);}
.chip{border-color:#fff;color:#fff;}
.chip.on{background:#fff;color:#000;border-color:#fff;}
.chip.limited{background:var(--cobalt);border-color:var(--cobalt);}
.flavor-cta{border-color:#fff;}
.flavor-card.is-active .flavor-cta,.flavor-card:hover .flavor-cta{background:var(--cobalt);color:#fff;border-color:#fff;box-shadow:5px 5px 0 #fff;}
.float-cookie{filter:drop-shadow(0 26px 30px rgba(0,0,0,.8));}

/* frases de la campaña entre galleta y galleta */
.phrase-break{position:relative;font-family:'Montserrat',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.42em;text-align:center;color:#fff;font-size:clamp(12px,1.5vw,16px);padding:10px 24px 18px;line-height:1.8;}
/* Aparición al llegar con el scroll: las palabras suben una tras otra (de
   borrosas y más grandes a nítidas) y después se dibuja una línea de neón
   desde el centro. Se repite cada vez que la frase entra en pantalla. */
.pb-w{display:inline-block;opacity:0;transform:translateY(.7em) scale(1.25);filter:blur(6px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.9,.2,1.15),filter .6s ease;transition-delay:calc(var(--k) * .12s);}
.phrase-break.in .pb-w{opacity:.9;transform:none;filter:none;}
.pb-linea{display:block;width:min(220px,40%);height:2px;margin:10px auto 0;border-radius:2px;background:linear-gradient(90deg,transparent,var(--cobalt-2),#C3CEFF,var(--cobalt-2),transparent);box-shadow:0 0 12px rgba(63,92,255,.8);transform:scaleX(0);opacity:0;transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .4s ease;transition-delay:calc(var(--n) * .12s + .2s);}
.phrase-break.in .pb-linea{transform:scaleX(1);opacity:1;}
.phrase-break:not(.in) .pb-w,.phrase-break:not(.in) .pb-linea{transition-delay:0s;}
@media (prefers-reduced-motion:reduce){.pb-w{opacity:.9;transform:none;filter:none;transition:none;}.pb-linea{transform:none;opacity:1;transition:none;}}

/* DROPS: de azul noche a negro puro, con la grilla de puntos */
.dx{background:#000;background:radial-gradient(120% 80% at 50% 45%,#0B0F2E 0%,#050508 55%,#000 100%);}
.dx::after{background:radial-gradient(circle,rgba(30,58,255,.32),transparent 62%);}
.dx-tape{border-block-color:#000;}
.dx-out{color:#000;}

/* CÓMO FUNCIONA */
.vitrina-eyebrow{color:var(--cobalt-2);}
.cf .sec-title{color:#fff;}
.card{border-color:#fff;box-shadow:7px 7px 0 #fff;}
.card:hover{box-shadow:11px 11px 0 #fff;}
.card-blue{background:var(--cobalt);}
.how-drops-btn{background:#000;color:#fff;border-color:#fff;box-shadow:4px 4px 0 var(--cobalt);}
.how-drops-btn:hover{box-shadow:2px 2px 0 var(--cobalt);}

/* APP: negro con resplandor azul en vez de bloque azul */
.app-sec{background:#000;border-block:3px solid var(--cobalt);}
.app-sec .glow{background:var(--cobalt)!important;opacity:.35!important;}
.app-phone{border-color:#1a1a1f;box-shadow:10px 10px 0 var(--cobalt);}
.app-dot{background:var(--cobalt-2);}

/* FOOTER */
.footer{background:#000;border-top:3px solid #fff;}
.footer-top{border-bottom-color:rgba(255,255,255,.12);}
/* "Muerde lo que viene" del footer — letrero de NEÓN que se enciende palabra
   por palabra (y crece un poco): un destello lento recorre la frase (≈4 s) y cada letra, al
   pasar, brilla en blanco y queda unos instantes como tubo de neón (borde
   encendido, interior oscuro) antes de volver al azul. Ciclo de 8 s con
   pausa. campana.js separa la frase en <span class="nw" style="--i:n">. */
.footer-tagline{color:var(--cobalt);filter:drop-shadow(0 0 12px rgba(30,58,255,.35));}
.footer-tagline .nw{display:inline-block;margin:0 .1em;transform-origin:50% 60%;animation:neonPalabra 5.6s ease-in-out infinite;animation-delay:calc(.7s + var(--i) * .6s);will-change:transform,color,text-shadow;}
@keyframes neonPalabra{
  0%,16%,100%{color:var(--cobalt);text-shadow:none;transform:scale(1);}
  5%{color:#FFFFFF;text-shadow:0 0 6px #fff,0 0 16px #9FB0FF,0 0 30px #3F5CFF,0 0 52px #1E3AFF;transform:scale(1.12);}
}
@media (prefers-reduced-motion:reduce){.footer-tagline .nw{animation:none;}.footer-tagline{color:var(--cobalt-2);}}
.footer-col-title{color:rgba(255,255,255,.45);}
.footer-links a,.footer-links span,.footer-link-btn{color:rgba(255,255,255,.8);}
.footer-links a:hover,.footer-link-btn:hover{color:var(--cobalt-2);}
.footer-bottom{color:rgba(255,255,255,.45);}

/* GALERÍA ("La quiero") en negro: sin el color del sabor de fondo, foto con
   marco de neón y el bloque "Cómo servirla" oscuro (antes era beige con
   texto ilegible). Los colores que main.js pone en línea se pisan con !important. */
.gal-overlay,.gal-nav{background:#000;}
.gal-nav{border-bottom:2px solid var(--cobalt);}
.gal-nav-logo{filter:brightness(0) invert(1);}
.gal-close,.nv-dialog-close{background:#000;color:#fff;border-color:#fff;}
.gal-hero-panel{background:radial-gradient(80% 90% at 30% 50%,#0D1446 0%,#05060F 55%,#000 100%)!important;border-bottom:1px solid rgba(255,255,255,.08);}
.gal-media-card{background:#05060F;border:2px solid var(--cobalt-2);box-shadow:0 0 0 1px var(--cobalt),0 0 30px rgba(30,58,255,.55),0 30px 60px rgba(0,0,0,.7);}
.gal-below{background:#0B0B10;color:var(--ink);border:2px solid #fff;box-shadow:6px 6px 0 var(--cobalt);}
#galServe > div{background:#15151C!important;border:1.5px solid rgba(255,255,255,.16)!important;}
#galServe > div div{color:var(--cobalt-2)!important;}
#galServe p{color:rgba(255,255,255,.8)!important;}
.gal-below [style*="color:rgba(10,10,12"]{color:rgba(255,255,255,.55)!important;}
.gal-below .chip.on{background:#fff;color:#000;}
.gal-rating-empty{color:rgba(255,255,255,.55);}
.nv-dialog{background:#0E0E12;color:var(--ink);border-color:#fff;box-shadow:8px 8px 0 var(--cobalt);}
.nv-dialog::backdrop{background:rgba(0,0,0,.8);}
.nv-dialog-title{color:#fff;}
.nv-dialog-lead,.nv-dialog-list li{color:rgba(255,255,255,.75);}
.nv-dialog-list b{color:#fff;}
.nv-dialog-list li::before{color:var(--cobalt-2);}
.nv-form label{color:rgba(255,255,255,.6);}
.nv-form input,.nv-form textarea{background:#000;color:#fff;border-color:rgba(255,255,255,.2);}
.nv-form-ok .disp{color:#fff;}
.nv-form-ok p{color:rgba(255,255,255,.7);}
.stars::before{color:rgba(255,255,255,.2);}

/* LA TRIBU — galería editorial de la campaña (fotos 3:4 con su frase).
   Desktop: 3 columnas, la del medio escalonada · Tablet: 2 · Celular:
   carrusel deslizable con puntos. Al tocar: visor a pantalla completa. */
.tribu{padding:clamp(64px,8vw,120px) 0 clamp(80px,10vw,150px);background:#000;overflow:hidden;position:relative;}
.tribu::before{content:"";position:absolute;inset:auto -10% 0 -10%;height:60%;background:radial-gradient(60% 70% at 50% 100%,rgba(30,58,255,.22),transparent 70%);pointer-events:none;}
.tribu-head{max-width:1240px;margin:0 auto 40px;padding:0 32px;position:relative;}
.tribu-head .sec-title{color:#fff;}
.tribu-sub{margin:10px 0 0;font-family:'Montserrat',sans-serif;font-weight:600;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.5);}
.tribu-grid{position:relative;max-width:1240px;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);}
.tribu-item{position:relative;display:block;padding:0;border:2px solid rgba(255,255,255,.14);border-radius:12px;overflow:hidden;background:#0A0A0C;cursor:zoom-in;aspect-ratio:3 / 4;
  box-shadow:0 30px 60px rgba(0,0,0,.6);opacity:0;transform:translateY(40px);transition:opacity .8s ease var(--d,0s),transform .8s cubic-bezier(.2,.8,.2,1) var(--d,0s),border-color .3s ease,box-shadow .3s ease;}
.tribu-item.in{opacity:1;transform:none;}
.tribu-item img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .4s ease;filter:saturate(1.02);}
.tribu-item::after{content:"";position:absolute;inset:auto 0 0 0;height:30%;background:linear-gradient(transparent,rgba(0,0,0,.55));pointer-events:none;}
.tribu-num{position:absolute;left:14px;bottom:12px;z-index:1;font-family:'Montserrat',sans-serif;font-weight:700;font-size:11px;letter-spacing:.25em;color:#fff;}
.tribu-item:hover,.tribu-item:focus-visible{border-color:var(--cobalt-2);box-shadow:0 0 0 1px var(--cobalt),0 0 40px rgba(30,58,255,.55),0 30px 60px rgba(0,0,0,.6);outline:none;}
.tribu-item:hover img{transform:scale(1.05);filter:saturate(1.12) contrast(1.04);}
/* escalonado tipo revista: la columna del medio baja */
@media (min-width:1025px){ .tribu-item:nth-child(3n+2).in{transform:translateY(70px);} .tribu-item:nth-child(3n+2){margin-bottom:-70px;} }
.tribu-dots{display:none;}
@media (max-width:1024px) and (min-width:641px){
  .tribu-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .tribu-item:nth-child(2n).in{transform:translateY(50px);}
}
@media (max-width:640px){
  .tribu-head{padding:0 20px;margin-bottom:24px;}
  .tribu-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:20px;padding:4px 20px 10px;scrollbar-width:none;}
  .tribu-grid::-webkit-scrollbar{display:none;}
  .tribu-item{flex:0 0 84vw;scroll-snap-align:start;opacity:1;transform:none;}
  .tribu-dots{display:flex;justify-content:center;gap:7px;margin-top:14px;}
  .tribu-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.25);transition:background .3s,width .3s;}
  .tribu-dots i.on{width:22px;border-radius:4px;background:var(--cobalt-2);}
}
@media (prefers-reduced-motion:reduce){.tribu-item{opacity:1;transform:none;transition:none;}}
/* Visor */
.tribu-lightbox{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0;border:0;border-radius:0;background:rgba(0,0,0,.94);box-shadow:none;display:none;align-items:center;justify-content:center;}
.tribu-lightbox[open]{display:flex;}
.tribu-lightbox::backdrop{background:rgba(0,0,0,.9);}
.tl-figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:min(92vw,720px);}
.tl-figure img{max-height:84dvh;max-width:100%;width:auto;border-radius:10px;box-shadow:0 0 0 1px var(--cobalt),0 0 60px rgba(30,58,255,.4);}
.tl-figure figcaption{font-family:'Montserrat',sans-serif;font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75);text-align:center;}
.tl-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:2px solid #fff;background:rgba(0,0,0,.5);color:#fff;font-size:30px;line-height:1;cursor:pointer;z-index:2;}
.tl-nav:hover{background:var(--cobalt);}
.tl-prev{left:clamp(8px,3vw,40px);} .tl-next{right:clamp(8px,3vw,40px);}
.tribu-lightbox .nv-dialog-close{position:absolute;top:16px;right:16px;z-index:3;}
@media (max-width:640px){.tl-nav{width:42px;height:42px;font-size:24px;top:auto;bottom:18px;transform:none;} .tl-prev{left:calc(50% - 54px);} .tl-next{right:calc(50% - 54px);} .tl-figure img{max-height:76dvh;}}

/* POP-UP DEL DROP — tarjeta formato historia */
.cmp-pop{padding:0;width:min(400px,calc(100vw - 32px));background:#000;border:2px solid #fff;box-shadow:0 0 0 1px var(--cobalt),0 0 40px rgba(30,58,255,.55);overflow:hidden;}
.cmp-pop .nv-dialog-close{z-index:3;}
/* ✕ de pop-ups y visor: grande, con contraste y fácil de tocar */
.nv-dialog-close,.gal-close{width:44px;height:44px;font-size:18px;font-weight:800;background:var(--cobalt)!important;color:#fff!important;border:2px solid #fff!important;box-shadow:0 0 0 3px rgba(0,0,0,.35),0 0 18px rgba(30,58,255,.6);cursor:pointer;}
.nv-dialog-close:hover,.gal-close:hover{background:#fff!important;color:#000!important;}
.cmp-pop-media img{display:block;width:100%;height:auto;max-height:52dvh;object-fit:cover;object-position:top;}
.cmp-pop-body{position:relative;margin-top:-70px;padding:60px 20px 22px;display:flex;flex-direction:column;align-items:center;gap:12px;background:linear-gradient(transparent,#000 60px);}
.cmp-pop .cmp-date{font-size:30px;}
.cmp-pop .cmp-tag{font-size:12px;}
.cmp-pop .cmp-logo{width:86%;}
.cmp-pop-cta{width:100%;margin-top:4px;}
.cmp-pop[open]{animation:popIn .45s cubic-bezier(.2,.9,.2,1.15);}
@keyframes popIn{from{opacity:0;transform:scale(.9) rotate(-1.5deg);}to{opacity:1;transform:none;}}

/* REPRODUCTOR "NURVA Radio" — barra chica fija abajo a la derecha */
body.has-radio{padding-bottom:76px;}
.radio{position:fixed;right:16px;bottom:16px;z-index:80;display:flex;align-items:center;gap:12px;padding:8px 10px 8px 8px;background:rgba(6,6,10,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:2px solid #fff;border-radius:8px;box-shadow:5px 5px 0 var(--cobalt);color:#fff;font-family:'Archivo',sans-serif;}
.radio[hidden]{display:none;}
.radio-play{width:40px;height:40px;flex-shrink:0;border-radius:6px;border:0;background:var(--cobalt);color:#fff;font-size:14px;font-weight:900;cursor:pointer;}
.radio-info{display:flex;flex-direction:column;line-height:1.15;min-width:0;}
.radio-next{width:30px;height:30px;flex-shrink:0;border-radius:6px;border:1.5px solid rgba(255,255,255,.35);background:transparent;color:#fff;font-size:12px;cursor:pointer;margin-left:-6px;}
.radio-next:hover{background:var(--cobalt);border-color:var(--cobalt);}
.radio--mini .radio-next{display:none;}
.radio-label{font-family:'Montserrat',sans-serif;font-weight:700;font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--cobalt-2);}
.radio-track{font-weight:800;font-size:13px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;}
.radio-eq{display:flex;align-items:flex-end;gap:2px;height:18px;}
.radio-eq i{display:block;width:3px;height:4px;background:var(--cobalt-2);border-radius:1px;}
.radio.is-playing .radio-eq i{animation:eq .9s ease-in-out infinite;}
.radio.is-playing .radio-eq i:nth-child(2){animation-delay:-.3s;}
.radio.is-playing .radio-eq i:nth-child(3){animation-delay:-.6s;}
.radio.is-playing .radio-eq i:nth-child(4){animation-delay:-.15s;}
.radio.is-playing .radio-eq i:nth-child(5){animation-delay:-.45s;}
@keyframes eq{0%,100%{height:4px;}50%{height:18px;}}
.radio-vol{width:80px;accent-color:var(--cobalt);}
.radio-close{background:none;border:0;color:rgba(255,255,255,.55);font-size:13px;cursor:pointer;padding:4px;}
.radio-close:hover{color:#fff;}
@media (max-width:680px){
  .radio{left:12px;right:12px;bottom:12px;}
  .radio-info{flex:1;}
  .radio-vol{display:none;}
}

/* FOOTER — logo holográfico grande sobre negro */
/* FOOTER CENTRADO: logo + frase al medio como cierre de la página; links
   en una fila debajo. El logo da un giro 3D de 360° (como moneda) al
   comienzo de cada ciclo, justo antes de que la luz recorra la frase. */
.footer-top{flex-direction:column;align-items:center;gap:36px;text-align:center;}
.footer-brand{align-items:center;gap:18px;}
.footer-brand img.footer-holo{width:150px;height:150px;filter:drop-shadow(0 0 30px rgba(159,230,255,.3));animation:giroLogo 5.6s cubic-bezier(.55,.05,.3,1) infinite;transform-style:preserve-3d;}
@keyframes giroLogo{0%{transform:perspective(600px) rotateY(0);}20%,100%{transform:perspective(600px) rotateY(360deg);}}
.footer-cols{justify-content:center;gap:56px;}
.footer-cols > div{display:flex;flex-direction:column;align-items:center;}
.footer-links{align-items:center;}
.footer-bottom{justify-content:center;text-align:center;flex-direction:column;gap:6px;}
@media (prefers-reduced-motion:reduce){.footer-brand img.footer-holo{animation:none;}}
@media (max-width:680px){.footer-tagline{font-size:clamp(18px,5.6vw,26px);} .footer-tagline .nw{margin:0 .06em;} .footer-brand img.footer-holo{width:120px;height:120px;}}

/* CELULAR — ficha "La quiero" con aire a los lados */
@media (max-width:680px){
  .gal-below{margin:-28px 12px 24px;box-shadow:4px 4px 0 var(--cobalt);}
  .gal-hero-panel{padding-bottom:56px;}
  #galServe > div{grid-template-columns:84px 1fr!important;gap:12px!important;padding:12px!important;}
  #galServe > div img{height:72px!important;}
  .cmp-pop .cmp-date{font-size:26px;}
}

/* Reproductor esperando el primer toque (el navegador bloqueó retomar solo) */
.radio.is-waiting .radio-play{animation:radioPulse 1.2s ease-in-out infinite;}
@keyframes radioPulse{0%,100%{box-shadow:0 0 0 0 rgba(63,92,255,.8);}50%{box-shadow:0 0 0 8px rgba(63,92,255,0);}}
/* Versión mini en el checkout: solo play + ecualizador, arriba del carrito fijo */
.radio--mini{left:auto;right:16px;bottom:90px;padding:6px;gap:8px;}
.radio--mini .radio-info,.radio--mini .radio-vol,.radio--mini .radio-close{display:none;}
.radio--mini .radio-eq{padding-right:4px;}
body.has-radio[data-radio="mini"]{padding-bottom:150px;}
@media (max-width:680px){ .radio--mini{left:auto;right:12px;bottom:84px;} }

/* Reproductor apagado: queda solo un botón redondo "♪" para volver a abrirlo */
.radio-open{display:none;}
.radio.radio--off{padding:0;gap:0;border-radius:50%;box-shadow:3px 3px 0 var(--cobalt);left:auto;}
.radio.radio--off > *{display:none;}
.radio.radio--off .radio-open{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border:0;border-radius:50%;background:#000;color:#fff;font-size:20px;cursor:pointer;}
.radio.radio--off .radio-open:hover{background:var(--cobalt);}
body.has-radio:has(.radio--off){padding-bottom:0;}

/* Aviso de sonido en el pop-up: solo mientras la música espera el primer toque */
.cmp-pop-sound{display:none;margin:2px 0 0;font-family:'Montserrat',sans-serif;font-weight:600;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.7);animation:soundBlink 1.6s ease-in-out infinite;}
body.radio-esperando .cmp-pop-sound{display:block;}
@keyframes soundBlink{50%{opacity:.35;}}


/* CELULAR — hero CUADRADO: video propio 1:1 (hero-v2-mobile-sq.mp4, recortado
   al centro; el logo final va completo sobre negro). El !important pisa el
   aspect-ratio que main.js pone en línea según el video. */
@media (max-width:820px){
  .hero{aspect-ratio:auto!important;background:#08070B;}
  .hero-video-bg{aspect-ratio:1 / 1!important;object-fit:cover;object-position:center;}
}

/* Stock del día (negro) */
.flavor-stock{border-color:#fff;color:#fff;}
.flavor-stock:not(.is-ultimas):not(.is-agotada){background:rgba(30,58,255,.18);border-color:var(--cobalt-2);}
.sin-hornear{border-color:var(--cobalt-2);background:rgba(30,58,255,.1);color:#fff;box-shadow:0 0 30px rgba(30,58,255,.25);margin-left:16px;margin-right:16px;}
@media (min-width:1272px){.sin-hornear{margin-left:auto;margin-right:auto;}}

/* FOTOS REALES de las galletas (Cookies Display): foto completa 4:5 en un
   marco de neón, flota suave; se enciende cuando la galleta está en pantalla. */
.flavor-visual--foto{height:auto!important;display:flex;align-items:center;justify-content:center;margin:0!important;}
.flavor-visual--foto::before{display:none;}
.flavor-foto{margin:0;width:min(420px,100%);aspect-ratio:4/5;border-radius:18px;overflow:hidden;border:2px solid rgba(255,255,255,.18);
  box-shadow:0 30px 60px rgba(0,0,0,.65);transition:border-color .5s ease,box-shadow .5s ease,transform .6s cubic-bezier(.2,.8,.2,1);animation:fotoFlota 6s ease-in-out infinite;}
.flavor-foto img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1);}
.flavor-card.is-active .flavor-foto,.flavor-card:hover .flavor-foto{border-color:var(--cobalt-2);box-shadow:0 0 0 1px var(--cobalt),0 0 40px rgba(30,58,255,.55),0 30px 60px rgba(0,0,0,.65);}
.flavor-card:hover .flavor-foto img{transform:scale(1.05);}
@keyframes fotoFlota{0%,100%{transform:translateY(0) rotate(-1deg);}50%{transform:translateY(-10px) rotate(1deg);}}
.flavor-grid.cols-b .flavor-foto{animation-delay:-3s;}
@media (max-width:680px){ .flavor-foto{width:78vw;max-width:340px;} }
@media (prefers-reduced-motion:reduce){ .flavor-foto{animation:none;} }
.flavor-card:has(.flavor-foto) .flavor-fill{top:0;bottom:0;height:auto;transform:none;}
@media (max-width:680px){ .flavor-card:has(.flavor-foto) .flavor-chip-top{margin-bottom:12px;} }

/* RECORTES REALES (fondo transparente): flotan con resplandor azul detrás,
   sin la rotación 3D (son fotos de lado). Se encienden al estar en pantalla. */
.flavor-visual--real{height:460px!important;display:flex;align-items:center;justify-content:center;margin:0!important;}
.flavor-visual--real::before{width:70%!important;}
.flavor-real{width:min(440px,100%);aspect-ratio:1;transition:transform .5s cubic-bezier(.2,.8,.2,1);}
.flavor-real .float-cookie{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 34px 34px rgba(0,0,0,.7)) drop-shadow(0 0 0 transparent);transition:filter .5s ease;}
.flavor-card.is-active .flavor-real .float-cookie,.flavor-card:hover .flavor-real .float-cookie{filter:drop-shadow(0 34px 34px rgba(0,0,0,.7)) drop-shadow(0 0 28px rgba(63,92,255,.45));}
.flavor-card:hover .flavor-real{transform:scale(1.05);}
.flavor-card:has(.flavor-real) .flavor-fill{top:0;bottom:0;height:auto;transform:none;}
@media (max-width:680px){ .flavor-visual--real{height:auto!important;} .flavor-real{width:70vw;max-width:300px;} }

/* FICHA "LA QUIERO" CON MOVIMIENTO */
.gal-media-card{perspective:900px;--rx:0deg;--ry:0deg;--gx:50%;--gy:50%;background-size:cover;background-position:center;overflow:hidden;}
.gal-media-card.con-ambiente::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 55%,transparent 30%,rgba(0,0,0,.55));pointer-events:none;}
.gm-halo{position:absolute;left:var(--gx);top:var(--gy);width:70%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(63,92,255,.55),rgba(30,58,255,.15) 45%,transparent 70%);filter:blur(10px);z-index:0;transition:left .3s ease,top .3s ease;pointer-events:none;}
.gal-media-card.con-ambiente .gm-halo{opacity:.5;}
.gm-tilt{position:relative;z-index:1;width:100%;height:100%;display:flex;align-items:center;justify-content:center;transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .25s ease-out;}
.gm-flota{position:relative;width:78%;max-width:520px;aspect-ratio:1;animation:gmFlota 5s ease-in-out infinite;}
.gm-cookie{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 28px 30px rgba(0,0,0,.6));}
/* brillo que cruza la galleta (recortado con la silueta de la galleta) */
.gm-brillo{position:absolute;inset:0;pointer-events:none;-webkit-mask:var(--mask) center/contain no-repeat;mask:var(--mask) center/contain no-repeat;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.38) 48%,rgba(255,255,255,.05) 56%,transparent 62%);background-size:300% 100%;background-position:140% 0;animation:gmBrillo 4.5s ease-in-out infinite 1.2s;mix-blend-mode:screen;}
@keyframes gmFlota{0%,100%{transform:translateY(0) rotate(-2deg);}50%{transform:translateY(-14px) rotate(2deg);}}
@keyframes gmBrillo{0%{background-position:140% 0;}40%,100%{background-position:-40% 0;}}
@keyframes gmEntra{0%{opacity:0;transform:scale(.7) translateY(40px) rotate(-8deg);}60%{opacity:1;transform:scale(1.06) translateY(-6px) rotate(2deg);}100%{transform:none;}}
@keyframes gmSalto{0%,100%{transform:translateY(0) scale(1);}40%{transform:translateY(-26px) scale(1.06) rotate(4deg);}70%{transform:translateY(4px) scale(.98);}}
.gal-overlay.anim .gm-tilt{animation:gmEntra .8s cubic-bezier(.2,.9,.2,1.1) both;}
.gm-flota.salto{animation:gmSalto .6s cubic-bezier(.2,.9,.3,1.2), gmFlota 5s ease-in-out infinite .6s;}
/* textos escalonados al abrir */
@keyframes gmTexto{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
.gal-overlay.anim #galText > *{animation:gmTexto .6s cubic-bezier(.2,.8,.2,1) both;}
.gal-overlay.anim #galText > *:nth-child(1){animation-delay:.25s;}
.gal-overlay.anim #galText > *:nth-child(2){animation-delay:.35s;}
.gal-overlay.anim #galText > *:nth-child(3){animation-delay:.45s;}
.gal-overlay.anim #galText > *:nth-child(4){animation-delay:.55s;}
.gal-overlay.anim .gal-below{animation:gmTexto .7s cubic-bezier(.2,.8,.2,1) .6s both;}
@media (prefers-reduced-motion:reduce){.gm-flota,.gm-brillo,.gal-overlay.anim .gm-tilt,.gal-overlay.anim #galText > *,.gal-overlay.anim .gal-below{animation:none!important;}}
.gal-media-card:has(.gm-tilt){aspect-ratio:4/3;}
.gm-flota{width:auto;height:84%;max-width:none;}
@media (max-width:860px){ .gal-media-card:has(.gm-tilt){aspect-ratio:1/1;} }

/* ASÍ LA VIVE LA TRIBU — fotos de clientes (5-oct-2026) */
.tribu-clientes{padding:70px 16px 40px;max-width:1200px;margin:0 auto;}
.tribu-clientes .tribu-sub a{color:#fff;text-decoration:underline;}
.tc-grid{max-width:1240px;margin:0 auto;padding:0 16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px);}
.tc-item{position:relative;margin:0;border:2px solid rgba(255,255,255,.14);border-radius:12px;overflow:hidden;background:#0A0A0C;aspect-ratio:3 / 4;transition:border-color .3s,box-shadow .3s;}
.tc-item img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1);}
.tc-item::after{content:"";position:absolute;inset:auto 0 0 0;height:34%;background:linear-gradient(transparent,rgba(0,0,0,.7));pointer-events:none;}
.tc-item:hover{border-color:var(--cobalt-2);box-shadow:0 0 0 1px var(--cobalt),0 0 40px rgba(30,58,255,.55);}
.tc-item:hover img{transform:scale(1.05);}
.tc-item figcaption{position:absolute;left:14px;right:14px;bottom:12px;z-index:1;display:flex;gap:8px;align-items:center;flex-wrap:wrap;color:#fff;font-family:'Montserrat','Archivo',sans-serif;font-weight:700;font-size:11px;letter-spacing:.22em;text-transform:uppercase;}
.tc-drop{background:var(--holo);background-size:260% 100%;color:#0A0A0C;border-radius:6px;padding:2px 8px;font-family:'Archivo',sans-serif;font-size:10px;letter-spacing:.06em;}
@media (min-width:1025px){.tc-item:nth-child(3n+2){transform:translateY(46px);margin-bottom:46px;}}
@media (max-width:760px){.tc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}.tc-item figcaption{font-size:10px;letter-spacing:.14em;left:10px;bottom:9px;}}

/* LEMA DE LA BARRA SUPERIOR — mismo neón del footer (cada palabra se enciende y crece),
   pero el color va rotando: blanco → tornasol → azul. campana.js separa las palabras y
   cambia data-tema cada ~8 s (reinicia la animación). */
.nav-tagline{--g:1.38;font-size:clamp(16px,2.3vw,25px);filter:drop-shadow(0 0 10px rgba(30,58,255,.25));}
.nav-tagline .nw{display:inline-block;margin:0 .1em;transform-origin:50% 60%;animation-duration:5.6s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-fill-mode:backwards;animation-delay:calc(.5s + var(--i) * .5s);will-change:transform,text-shadow;}
.nav-tagline[data-tema="blanco"] .nw{animation-name:ntBlanco;}
.nav-tagline[data-tema="tornasol"] .nw{animation-name:ntTornasol;color:transparent;background:linear-gradient(100deg,#9FE6FF,#C9A8FF,#FFB4E6,#FFE6A8,#A8FFD6,#9FE6FF) 0 0/300% 100%;-webkit-background-clip:text;background-clip:text;}
.nav-tagline[data-tema="azul"] .nw{animation-name:ntAzul;color:#4F6BFF;}
@keyframes ntBlanco{
  0%,18%,100%{color:#fff;text-shadow:none;transform:scale(1);}
  6%{color:#fff;text-shadow:0 0 6px #fff,0 0 16px #9FB0FF,0 0 32px #3F5CFF,0 0 54px #1E3AFF;transform:scale(var(--g,1.14));}
}
@keyframes ntTornasol{
  0%,18%,100%{background-position:0 0;filter:none;transform:scale(1);}
  6%{background-position:100% 0;filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 14px #9FE6FF) drop-shadow(0 0 26px #C9A8FF);transform:scale(var(--g,1.14));}
}
@keyframes ntAzul{
  0%,18%,100%{color:#4F6BFF;text-shadow:none;transform:scale(1);}
  6%{color:#fff;text-shadow:0 0 6px #fff,0 0 16px #9FB0FF,0 0 32px #3F5CFF,0 0 54px #1E3AFF;transform:scale(var(--g,1.14));}
}
@media (prefers-reduced-motion:reduce){.nav-tagline .nw{animation:none!important;}}
@media (max-width:680px){.nav-tagline{font-size:15px;--g:1.16;}}