/* ===== NURVA COOKIES — Design tokens (portados desde el mockup Main.dc.html) ===== */
:root{
  --cobalt:#1E3AFF;
  --cobalt-2:#3F5CFF;
  --black:#0A0A0C;
  --cemento:#FFFFFF;
  --cemento-2:#E3DFD2;
  --choc:#3A2318;
  --caramel:#C98A46;
  --caramel-l:#E7B577;
  --berry:#D23E6E;
  --red:#C81E3A;
  --green:#4CA36B;
  --amber:#C98A46;
  /* Tornasol / holográfico: base plateada con reflejos de color (ref. letras de foil) */
  --holo:linear-gradient(115deg,#c3c8d2 0%,#f4f6fa 9%,#9fe6ff 17%,#c9b8ff 25%,#ffb3e2 33%,#fff1b0 41%,#b9f5d0 49%,#e9edf3 57%,#aab0bd 65%,#8fd8ff 73%,#e0c4ff 81%,#fff7d6 89%,#c3c8d2 100%);
}
*{box-sizing:border-box;}
html{overflow-x:hidden;scroll-behavior:smooth;}
body{margin:0;background:var(--cemento);font-family:'Work Sans',sans-serif;color:var(--black);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
h1,h2,h3,.disp{font-family:'Archivo',sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:-0.015em;margin:0;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
[id]{scroll-margin-top:84px;}

/* texto tornasol (plateado + reflejos de color, se mueve lento) */
.holo-text{background:var(--holo);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:holo-shift 7s linear infinite;filter:drop-shadow(0 1px 0 rgba(255,255,255,.35)) drop-shadow(0 0 14px rgba(255,255,255,.18));}
@keyframes holo-shift{0%{background-position:0% 50%;}100%{background-position:260% 50%;}}
@media (prefers-reduced-motion:reduce){.holo-text{animation:none;}}

/* custom cursor (solo desktop) */
@media (pointer:fine){ body.has-cursor{cursor:none;} }
#cur{position:fixed;top:0;left:0;width:26px;height:26px;border:2px solid var(--cobalt);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width 0.18s ease,height 0.18s ease,background 0.18s ease;}
#cur.hot{width:54px;height:54px;background:rgba(30,58,255,0.14);}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 30px;border-radius:6px;font-family:'Archivo',sans-serif;font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:0.02em;border:2.5px solid var(--black);cursor:pointer;box-shadow:5px 5px 0 var(--black);transition:transform 0.15s ease,box-shadow 0.15s ease;}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--black);}
.btn-primary{background:var(--cobalt);color:#fff;}
.btn-white{background:#fff;color:var(--black);}
.btn-onblue{background:#fff;color:var(--cobalt);}

/* NAV */
.nav{position:sticky;top:0;z-index:50;background:var(--cobalt);border-bottom:3px solid var(--black);}
.nav-inner{max-width:1240px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 32px;}
.nav-inner .nav-logo{height:44px;width:auto;filter:brightness(0) invert(1);display:block;}
.nav-brand{flex-shrink:0;}
.nav-tagline{font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(15px,2vw,20px);color:#fff;text-align:center;flex:1;white-space:nowrap;}
.nav-burger{flex-shrink:0;width:48px;height:44px;border-radius:8px;border:2.5px solid var(--black);background:#fff;box-shadow:3px 3px 0 var(--black);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;padding:0;}
.nav-burger span{display:block;width:22px;height:3px;border-radius:2px;background:var(--cobalt);transition:transform .2s ease,opacity .2s ease;}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
.site-menu{position:absolute;left:0;right:0;top:100%;background:var(--cobalt);border-bottom:3px solid var(--black);padding:8px 32px 22px;display:flex;flex-direction:column;}
.site-menu[hidden]{display:none;}
.site-menu-link{display:flex;justify-content:space-between;align-items:center;max-width:1176px;width:100%;margin:0 auto;padding:16px 0;border:0;border-bottom:2px solid rgba(255,255,255,.22);background:none;color:#fff;cursor:pointer;text-align:left;font-family:'Archivo',sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(22px,4vw,34px);letter-spacing:-.01em;}
.site-menu-link i{font-style:normal;font-size:.8em;}
.site-menu-link:hover{color:#dfe4ff;}
@media (max-width:680px){
  .nav-inner{padding:10px 16px;}
  .nav-inner .nav-logo{height:30px;}
  .nav-tagline{letter-spacing:.02em;}
  .nav-burger{width:42px;height:38px;}
  .site-menu{padding:4px 16px 18px;}
}
@media (max-width:340px){.nav-tagline{display:none;}}

/* HERO */
.hero{position:relative;background:var(--cemento);width:100%;aspect-ratio:1920/818;max-height:100vh;min-height:360px;overflow:hidden;}
.hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.05) 1px,transparent 1px);background-size:3px 3px;opacity:0.5;pointer-events:none;z-index:2;}
.hero-video-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;background:transparent;}
/* iOS (modo ahorro de batería / autoplay bloqueado) dibuja un botón ▶ encima
   del video: lo ocultamos y queda el poster hasta que el video pueda correr. */
.hero-video-bg::-webkit-media-controls,
.hero-video-bg::-webkit-media-controls-panel,
.hero-video-bg::-webkit-media-controls-play-button,
.hero-video-bg::-webkit-media-controls-start-playback-button,
.hero-video-bg::-webkit-media-controls-overlay-play-button{display:none!important;-webkit-appearance:none;opacity:0!important;}
.stamp{display:inline-flex;align-items:center;border:2.5px solid var(--black);border-radius:8px;padding:8px 16px;font-family:'Archivo',sans-serif;font-weight:800;font-size:13px;text-transform:uppercase;box-shadow:4px 4px 0 var(--black);background:#fff;}
.hero-cta-solo{position:absolute;left:28px;bottom:26px;z-index:5;padding:16px 34px;font-size:16px;font-weight:800;letter-spacing:.02em;}
/* Celular: el video se ve COMPLETO (sin recortar el texto quemado) a su
   proporción real, y el botón va debajo, corto y centrado, sobre fondo blanco. */
@media (max-width:820px){
  .hero{aspect-ratio:auto;height:auto;min-height:0;max-height:none;overflow:hidden;display:flex;flex-direction:column;align-items:center;}
  .hero-video-bg{position:relative;inset:auto;display:block;width:100%;height:auto;aspect-ratio:1920/818;object-fit:cover;}
  .hero::before{display:none;}
  .hero-cta-solo{position:relative;left:auto;bottom:auto;align-self:center;margin:18px auto 8px;padding:13px 30px;font-size:14px;background:var(--cobalt);color:#fff;}
}


/* STOCK CARD (letras tornasol) */
.stock-wrap{padding:40px 32px 4px;display:flex;justify-content:center;background:var(--cemento);}
.stock-card{background:var(--cobalt);border-radius:16px;border:3px solid var(--black);box-shadow:8px 8px 0 var(--black);padding:34px 60px;text-align:center;max-width:100%;}
.stock-label,.stock-date{display:block;line-height:1;}
.stock-label{font-size:64px;}
.stock-date{font-size:38px;margin-top:6px;}
@media (max-width:680px){
  .stock-wrap{padding:26px 20px 4px;}
  .stock-card{padding:18px 22px 20px;border-radius:12px;box-shadow:6px 6px 0 var(--black);}
  .stock-label{font-size:36px;}
  .stock-date{font-size:clamp(15px,5vw,20px);margin-top:4px;}
}

/* eyebrow / títulos de sección */
.vitrina-eyebrow{color:var(--cobalt);font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px;}
.sec-title{font-size:clamp(28px,4.4vw,42px);line-height:1.05;}

/* FLAVOR ROWS */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in-view{opacity:1;transform:translateY(0);}
.flavor-row{padding:60px 32px;}
.flavor-card{max-width:1240px;margin:0 auto;border-radius:24px;padding:36px 44px;position:relative;overflow:visible;background:var(--cemento);}
.flavor-fill{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:360px;border-radius:24px;opacity:0;transition:opacity .6s ease;z-index:0;}
/* El color del sabor aparece solo cuando la galleta está en pantalla (y con hover en desktop) */
.flavor-card.is-active .flavor-fill,.flavor-card:hover .flavor-fill{opacity:1;}
.flavor-grid{display:grid;grid-template-columns:0.92fr 1.08fr;gap:64px;align-items:center;position:relative;z-index:1;}
@media (min-width:681px){
  .flavor-grid.cols-a{grid-template-columns:0.92fr 1.08fr;}
  .flavor-grid.cols-b{grid-template-columns:1.08fr 0.92fr;}
  .flavor-grid.cols-b .flavor-visual{order:2;}
  .flavor-grid.cols-b .flavor-text{order:1;}
  .flavor-grid.cols-a .flavor-text{justify-self:end;max-width:460px;width:100%;}
}
.flavor-visual{position:relative;display:flex;align-items:center;justify-content:center;height:340px;}
.flavor-visual-media{transition:transform .4s ease;}
.flavor-card:hover .flavor-visual-media{transform:scale(1.04);}
@media (min-width:900px){
  .flavor-visual.side-left{justify-content:flex-start;margin-left:-36px;}
  .flavor-visual.side-right{justify-content:flex-end;margin-right:-36px;}
}
@media (min-width:1300px){
  .flavor-visual.side-left{margin-left:-64px;}
  .flavor-visual.side-right{margin-right:-64px;}
}
@keyframes floatCookie{0%,100%{transform:translateY(0) rotate(-1.5deg) scale(1);}50%{transform:translateY(-18px) rotate(1.5deg) scale(1.02);}}
.float-cookie{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 26px 26px rgba(0,0,0,.3));animation:floatCookie 4.2s ease-in-out infinite;}
.flavor-title{font-size:36px;}
.flavor-title{color:var(--black);transition:color .35s ease;}
.flavor-desc{color:rgba(10,10,12,.65);transition:color .35s ease;}
.flavor-card.dark.is-active .flavor-title,.flavor-card.dark:hover .flavor-title{color:#fff;}
.flavor-card.dark.is-active .flavor-desc,.flavor-card.dark:hover .flavor-desc{color:rgba(255,255,255,.82);}
.chip{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:5px 10px;border-radius:5px;border:1.5px solid var(--black);color:var(--black);display:inline-block;}
.chip.on{background:var(--black);color:#fff;border-color:var(--black);}
.chip.limited{background:var(--choc);color:#fff;border-color:var(--choc);}
.flavor-chip-top{display:none;}
.flavor-cta{padding:13px 26px;font-size:13px;}
/* Azul con fondo blanco por defecto; cuando el fondo de la tarjeta pasa a
   ser el color de la galleta (activa o hover), el botón se invierte a
   blanco para seguir leyéndose bien contra cualquier acento. */
.flavor-card.is-active .flavor-cta,.flavor-card:hover .flavor-cta{background:#fff;color:var(--black);}
/* Celular: 1) chip  2) galleta  3) texto — igual en todas las filas */
@media (max-width:680px){
  .flavor-row{padding:18px 16px;}
  .flavor-card{padding:22px 20px 26px;}
  .flavor-fill{top:0;bottom:0;height:auto;transform:none;}
  .flavor-chip-top{display:block;position:relative;z-index:1;text-align:center;}
  .flavor-text .chip{display:none;}
  .flavor-grid{grid-template-columns:1fr;gap:18px;}
  .flavor-visual{order:0;height:220px!important;margin-left:0!important;margin-right:0!important;}
  .flavor-text{order:1;}
  .flavor-visual-media{width:200px!important;height:200px!important;}
  .float-cookie{width:100%!important;height:100%!important;}
  .flavor-title{font-size:28px;}
}

/* =====================================================================
   DROPS — bloque disruptivo (fondo azul noche, wordmark, cinta blanca)
   Estados controlados por data-state: loading | before | open | soldout
   ===================================================================== */
.dx{position:relative;background:#0A0E2A;background:radial-gradient(120% 80% at 50% 45%,#12207A 0%,#0C1550 45%,#0A0E2A 100%);color:#fff;overflow:hidden;margin-top:40px;isolation:isolate;}
.dx::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.075) 1px,transparent 1.5px);background-size:14px 14px;}
.dx::after{content:"";position:absolute;z-index:-1;pointer-events:none;width:900px;height:900px;left:50%;top:48%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(30,58,255,.42),transparent 62%);}
.glow{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;}

/* cinta diagonal (blanca, abajo) */
.dx-tape{position:relative;z-index:3;overflow:hidden;white-space:nowrap;margin:0 -60px;background:#fff;color:var(--black);border-block:3px solid var(--cobalt);transform:rotate(1.8deg);margin-bottom:38px;}
.dx-tape-track{display:inline-flex;align-items:center;gap:28px;padding:12px 0;font-family:'Archivo',sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(16px,2.2vw,26px);letter-spacing:.01em;animation:dxTape 26s linear infinite reverse;}
.dx-tape-track i{font-style:normal;opacity:.7;}
@keyframes dxTape{to{transform:translateX(-50%);}}

.dx-inner{max-width:1240px;margin:0 auto;padding:72px 32px 64px;text-align:center;}

/* título: NURVA (logo, chico) / DROPS (texto, grande) — el bloque completo
   es ANCHO a propósito (el logo solo ocupa una franja angosta adentro),
   así el conjunto lee como un banner horizontal y no como una columna
   cuadrada; el sticker "DROP: nombre" hereda ese mismo ancho. */
.dx-brand{position:relative;width:min(100%,780px);margin:0 auto 64px;}
.dx-word{position:relative;width:42%;margin:0 auto;}
.dx-word img{display:block;width:100%;height:auto;}
.dx-word-shadow{position:absolute;inset:0;transform:translate(clamp(4px,.7vw,9px),clamp(4px,.7vw,9px));}
.dx-word-main{position:relative;}
.dx-word-sub{margin-top:clamp(6px,1vw,12px);font-size:clamp(48px,9vw,120px);line-height:.88;letter-spacing:.08em;padding-left:.08em;color:#fff;text-shadow:clamp(4px,.8vw,9px) clamp(4px,.8vw,9px) 0 var(--cobalt);}
.dx-sticker{display:inline-block;position:relative;z-index:2;margin-top:clamp(14px,2vw,24px);transform:rotate(-5deg);background:#fff;color:var(--black);border:3px solid var(--black);box-shadow:8px 8px 0 var(--cobalt);border-radius:10px;padding:.16em .6em .2em;font-family:'Archivo',sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(18px,3.2vw,34px);line-height:1.15;letter-spacing:-.005em;max-width:100%;white-space:normal;}
.dx-sticker .holo-text{filter:drop-shadow(0 1px 0 rgba(0,0,0,.3));}
/* "DROP 002" en negro + nombre del drop en azul, separados por una barra */
.dx-sticker-num{color:var(--black);}
.dx-sticker-name{color:var(--cobalt);}
.dx-sticker-name::before{content:"/";color:var(--black);opacity:.35;margin:0 .35em;}
/* historia del drop: por qué se llama así (vacía = no se muestra) */
.dx-story{max-width:560px;margin:clamp(22px,3vw,34px) auto 0;font-size:clamp(15px,1.6vw,17px);line-height:1.6;color:rgba(255,255,255,.82);white-space:pre-line;}
.dx-story:empty{display:none;}

/* cajas reales */
.dx-boxes{display:grid;grid-template-columns:1fr 1.14fr;gap:clamp(8px,3vw,44px);align-items:center;max-width:1140px;margin:0 auto 48px;}
.dx-box{position:relative;margin:0;}
.dx-box img{display:block;width:100%;height:auto;filter:drop-shadow(0 34px 38px rgba(0,0,0,.65)) drop-shadow(0 0 70px rgba(30,58,255,.28));transition:transform .4s cubic-bezier(.2,.8,.2,1);}
.dx-box-4 img{transform:rotate(-5deg);}
.dx-box-6 img{transform:rotate(3deg);}
@media (hover:hover){.dx-box:hover img{transform:rotate(0) scale(1.04);}}
.dx-tag{position:absolute;top:0;display:flex;flex-direction:column;align-items:center;justify-content:center;width:clamp(76px,11vw,132px);aspect-ratio:1;border-radius:50%;background:var(--cobalt);color:#fff;border:3px solid #fff;box-shadow:5px 5px 0 #fff;font-family:'Archivo',sans-serif;text-transform:uppercase;line-height:1;z-index:2;}
.dx-box-4 .dx-tag{left:2%;transform:rotate(-10deg);}
.dx-box-6 .dx-tag{right:2%;transform:rotate(9deg);}
.dx-tag b{font-weight:900;font-size:clamp(24px,3.4vw,44px);}
.dx-tag span{font-weight:800;font-size:clamp(11px,1.3vw,15px);margin-top:4px;letter-spacing:.02em;}

/* mensaje de la oferta (editable desde Firestore; admite saltos de línea) */
.dx-msg{font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(19px,2.9vw,36px);line-height:1.25;letter-spacing:-.005em;max-width:960px;margin:0 auto 22px;}
.dx-msg strong{font-weight:900;color:#fff;background:var(--cobalt);padding:0 .22em;-webkit-box-decoration-break:clone;box-decoration-break:clone;}
.dx-howto{font-size:clamp(15px,1.7vw,18px);line-height:1.55;color:rgba(255,255,255,.85);max-width:640px;margin:0 auto 36px;}
.dx-howto b{color:#fff;}

/* estados */
.dx-state{display:none;}
.dx[data-state="loading"] .dx-before,.dx[data-state="before"] .dx-before,.dx[data-state="open"] .dx-open,.dx[data-state="soldout"] .dx-soldout,.dx[data-state="soon"] .dx-soon{display:block;}
.dx-soon{text-align:center;}
.dx-soon-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:18px 0 14px;}
.dx-soon-daily{display:inline-block;color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px;}
.dx-kicker{font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:13px;color:rgba(255,255,255,.6);}
.dx-count{display:flex;justify-content:center;gap:clamp(8px,1.8vw,20px);margin:16px 0 22px;}
.dx-count div{min-width:clamp(68px,11.5vw,138px);background:#fff;color:var(--black);border:3px solid #fff;border-radius:10px;box-shadow:6px 6px 0 var(--cobalt);padding:12px 6px 10px;}
.dx-count b{display:block;font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(34px,6.6vw,88px);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.dx-count span{display:block;margin-top:6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(10,10,12,.55);}
.dx-when{font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(13px,1.6vw,17px);color:rgba(255,255,255,.78);}
.dx-live{display:inline-flex;align-items:center;gap:9px;font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:14px;color:#4CF08A;margin-bottom:10px;}
.pulse-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#4CF08A;box-shadow:0 0 0 0 rgba(76,240,138,.6);animation:pulseDot 1.6s ease-out infinite;}
@keyframes pulseDot{70%{box-shadow:0 0 0 12px rgba(76,240,138,0);}100%{box-shadow:0 0 0 0 rgba(76,240,138,0);}}
.dx-meter{display:flex;justify-content:center;align-items:baseline;gap:12px;margin-bottom:14px;}
.dx-meter .disp{font-size:clamp(56px,9vw,112px);line-height:.9;}
.dx-meter-of{font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(14px,1.8vw,20px);color:rgba(255,255,255,.7);}
.dx-bar{max-width:620px;height:16px;margin:0 auto 32px;background:rgba(255,255,255,.1);border:2.5px solid #fff;border-radius:5px;overflow:hidden;}
.dx-bar div{height:100%;width:0;background:repeating-linear-gradient(-45deg,#fff 0 12px,#dfe4ff 12px 24px);transition:width 1.2s cubic-bezier(.2,.8,.2,1);}
.dx-cta{font-size:clamp(15px,1.8vw,19px);padding:18px 38px;box-shadow:6px 6px 0 var(--cobalt);border-color:#fff;}
.dx-cta:hover{box-shadow:2px 2px 0 var(--cobalt);}
.dx-cta-pre{margin-top:26px;}
.dx-out{font-size:clamp(64px,13vw,170px);line-height:.9;color:#0A0E2A;-webkit-text-stroke:3px #fff;text-shadow:7px 7px 0 var(--cobalt);transform:rotate(-3deg);}
.dx-out-sub{font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(14px,1.8vw,19px);color:rgba(255,255,255,.75);margin:22px 0 0;}
.dx-promo{position:absolute;bottom:4%;left:50%;transform:translateX(-50%) rotate(-3deg);background:#4CF08A;color:var(--black);border:3px solid var(--black);box-shadow:4px 4px 0 var(--black);border-radius:8px;padding:6px 14px;font-family:'Archivo',sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(13px,1.6vw,18px);white-space:nowrap;z-index:2;}

@media (max-width:680px){
  .dx-inner{padding:52px 16px 44px;}
  .dx-brand{width:100%;margin-bottom:32px;}
  .dx-word{width:34%;}
  .dx-sticker{box-shadow:5px 5px 0 var(--cobalt);border-width:2.5px;}
  .dx-boxes{grid-template-columns:1fr;gap:18px;max-width:440px;}
  .dx-box-6 img{transform:rotate(2deg);}
  .dx-msg{font-size:18px;}
  .dx-tape{margin:0 -40px 26px;}
  .dx-count div{min-width:0;flex:1;padding:10px 2px 8px;box-shadow:4px 4px 0 var(--cobalt);}
  .dx-count span{font-size:10px;letter-spacing:.06em;}
  .dx-cta{padding:15px 28px;}
}
@media (prefers-reduced-motion:reduce){.dx-tape-track,.pulse-dot{animation:none;}}

/* COMO FUNCIONA — tres tarjetas azules */
.cf{max-width:1240px;margin:0 auto;padding:120px 32px;}
.cf-faq{text-align:center;margin-top:40px;}
.how-drops-btn{display:inline-flex;align-items:center;gap:9px;background:#fff;border:2.5px solid var(--black);border-radius:999px;color:var(--black);padding:13px 24px;font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:13px;cursor:pointer;box-shadow:4px 4px 0 var(--black);transition:transform .15s ease,box-shadow .15s ease;}
.how-drops-btn::before{content:"?";display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:50%;background:var(--cobalt);color:#fff;font-size:11px;flex-shrink:0;}
.how-drops-btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--black);}
.cf-title{max-width:640px;margin-bottom:56px;}
.cf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;}
.card{background:#fff;border-radius:14px;border:2.5px solid var(--black);box-shadow:7px 7px 0 var(--black);padding:32px;transition:transform .3s ease,box-shadow .3s ease;}
.card:hover{transform:translate(-4px,-4px);box-shadow:11px 11px 0 var(--black);}
.card-blue{background:var(--cobalt);color:#fff;}
.card-blue h3{font-size:22px;margin-bottom:10px;color:#fff;}
.card-blue p{font-size:15px;line-height:1.6;margin:0;color:rgba(255,255,255,.9);}
.cf-num{font-size:46px;margin-bottom:16px;display:inline-block;}
@media (max-width:860px){.cf-grid{grid-template-columns:1fr;}}
@media (max-width:680px){.cf{padding:64px 20px;} .cf-title{margin-bottom:32px;} .card{padding:26px 22px;} .card-blue h3{font-size:21px;} .card-blue p{font-size:16px;}}

/* APP INSTALL */
.app-sec{background:var(--cobalt);padding:120px 32px;position:relative;overflow:hidden;}
.app-grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;align-items:center;position:relative;}
.app-phone{width:240px;height:480px;border-radius:30px;background:#060814;border:8px solid var(--black);box-shadow:10px 10px 0 rgba(0,0,0,.25);padding:14px;position:relative;margin:0 auto;}
.app-phone-screen{background:var(--cemento);border-radius:18px;height:100%;padding:18px 14px;display:flex;flex-direction:column;gap:12px;overflow:hidden;}
.app-phone-screen--video{padding:0;height:calc(100% - 18px);background:#F2EFE8;}
.app-phone-video{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;}
.app-phone-video::-webkit-media-controls,.app-phone-video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none;}
@keyframes floatY{0%,100%{transform:translateY(0) rotate(-4deg);}50%{transform:translateY(-16px) rotate(4deg);}}
.app-phone-wrap{animation:floatY 6s ease-in-out infinite;}
.app-title{color:#fff;margin-bottom:20px;}
.app-lead{color:rgba(255,255,255,.78);font-size:16px;line-height:1.7;max-width:520px;margin:0 0 28px;}
.app-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:36px;}
.app-points div{display:flex;gap:12px;align-items:flex-start;color:rgba(255,255,255,.85);font-size:15px;line-height:1.5;}
.app-dot{width:8px;height:8px;border-radius:50%;background:#fff;margin-top:7px;flex-shrink:0;}
@media (max-width:860px){.app-grid{grid-template-columns:1fr;gap:40px;}}
/* celular: el teléfono con aire alrededor (sin tocar los bordes del bloque azul) */
@media (max-width:680px){.app-sec{padding:72px 24px 64px;} .app-phone-wrap{padding:28px 0 20px;} .app-phone{width:210px;height:420px;} .app-points{grid-template-columns:1fr;gap:12px;margin-bottom:28px;}}

/* FOOTER — fondo blanco, logo tornasol */
.footer{background:#fff;padding:64px 32px 36px;border-top:3px solid var(--black);}
.footer-inner{max-width:1240px;margin:0 auto;}
.footer-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(10,10,12,.12);}
.footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:14px;}
.footer-brand img{width:120px;height:120px;object-fit:contain;}
.footer-tagline{font-size:clamp(24px,4vw,34px);color:var(--cobalt);letter-spacing:.005em;}
.footer-cols{display:flex;gap:64px;flex-wrap:wrap;}
.footer-col-title{color:rgba(10,10,12,.45);font-size:12px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px;font-weight:700;}
.footer-links{display:flex;flex-direction:column;align-items:flex-start;gap:10px;}
.footer-links a,.footer-links span,.footer-link-btn{color:rgba(10,10,12,.8);font-size:14px;}
.footer-links a:hover,.footer-link-btn:hover{color:var(--cobalt);}
.footer-link-btn{background:none;border:0;padding:0;font-family:inherit;cursor:pointer;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;flex-wrap:wrap;gap:12px;color:rgba(10,10,12,.5);font-size:12px;}
@media (max-width:680px){.footer{padding:48px 20px 28px;} .footer-top{gap:32px;} .footer-cols{gap:40px;}}

/* GALLERY MODAL */
.gal-overlay{position:fixed;inset:0;height:100vh;height:100dvh;background:#fff;z-index:100;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;display:none;}
.gal-overlay.open{display:block;}
.gal-nav{position:sticky;top:0;z-index:20;background:#fff;border-bottom:3px solid var(--black);}
.gal-nav-inner{max-width:1240px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 32px;position:relative;min-height:70px;}
.gal-nav-logo{height:42px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
.gal-close{width:38px;height:38px;border-radius:50%;background:#fff;border:2px solid var(--black);cursor:pointer;font-size:16px;color:var(--black);}
.gal-hero-panel{position:relative;padding:100px 32px 120px;overflow:hidden;}
.gal-hero-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.3fr .7fr;gap:56px;align-items:center;position:relative;z-index:2;}
.gal-media-card{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:16/9;box-shadow:0 34px 70px rgba(0,0,0,.28);background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;}
.gal-below{max-width:820px;margin:-40px auto 0;background:#fff;border-radius:20px;position:relative;z-index:2;padding:36px 40px 40px;}
@media (max-width:860px){.gal-hero-grid{grid-template-columns:1fr;}}
@media (max-width:680px){.gal-hero-panel{padding:48px 20px 60px;} .gal-below{padding:24px 20px 28px;} .gal-nav-inner{padding:12px 16px;min-height:62px;} .gal-nav-logo{height:32px;}}

/* Bloqueo de scroll del fondo cuando hay un modal abierto (necesario en iOS) */
body.scroll-locked{position:fixed;left:0;right:0;width:100%;overflow:hidden;}

/* DIÁLOGOS (Cómo funcionan los drops · Contacto) */
.nv-dialog{width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 40px);border:3px solid var(--black);border-radius:16px;box-shadow:8px 8px 0 var(--black);padding:30px 28px 28px;background:#fff;color:var(--black);overflow:auto;overscroll-behavior:contain;}
.nv-dialog::backdrop{background:rgba(10,14,42,.72);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
.nv-dialog-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;background:#fff;border:2px solid var(--black);cursor:pointer;font-size:15px;color:var(--black);}
.nv-dialog-title{font-size:clamp(24px,5vw,30px);line-height:1.05;margin:0 44px 16px 0;color:var(--cobalt);}
.nv-dialog-lead{font-size:16px;line-height:1.6;margin:0 0 16px;color:rgba(10,10,12,.8);}
.nv-dialog-list{margin:0 0 24px;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;}
.nv-dialog-list li{font-size:15px;line-height:1.55;padding-left:22px;position:relative;color:rgba(10,10,12,.78);}
.nv-dialog-list li::before{content:"✦";position:absolute;left:0;top:0;color:var(--cobalt);}
.nv-dialog-list b{color:var(--black);}
.nv-dialog-cta{width:100%;}
.nv-form{display:flex;flex-direction:column;gap:12px;}
.nv-form label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:rgba(10,10,12,.65);}
.nv-form input,.nv-form textarea{width:100%;padding:12px;border:2px solid rgba(10,10,12,.2);border-radius:10px;font-size:16px;font-family:inherit;background:#fff;color:var(--black);text-transform:none;letter-spacing:0;font-weight:400;resize:vertical;}
.nv-form input:focus,.nv-form textarea:focus{outline:none;border-color:var(--cobalt);}
.nv-form .nv-dialog-cta{margin-top:6px;}
.nv-form-error{margin:0;color:var(--red);font-size:13px;font-weight:600;}
.nv-form-ok{text-align:center;padding:10px 0 4px;}
.nv-form-ok .disp{font-size:26px;color:var(--cobalt);margin-bottom:8px;}
.nv-form-ok p{margin:0 0 20px;color:rgba(10,10,12,.7);}

/* ESTRELLAS tornasol — promedio de valoraciones (solo lectura, en la
   galería de cada galleta). Dos filas de "★★★★★" superpuestas: la de
   atrás gris, la de adelante tornasol y recortada al % de la nota. */
.stars{position:relative;display:inline-block;font-size:22px;line-height:1;letter-spacing:3px;}
.stars::before{content:"★★★★★";color:rgba(10,10,12,.18);}
.stars-fill{position:absolute;inset:0;overflow:hidden;white-space:nowrap;}
.stars-fill::before{content:"★★★★★";}
.stars-fill.holo-text{filter:none;}
.gal-rating{display:flex;align-items:center;gap:10px;margin:2px 0 18px;color:#fff;}
.gal-rating .stars::before{color:rgba(255,255,255,.28);}
.gal-rating-count{font-size:12px;color:rgba(255,255,255,.65);}
.gal-rating-empty{font-size:13px;color:rgba(255,255,255,.6);}

/* Página /valorar/ */
.rate-wrap{max-width:560px;margin:0 auto;padding:32px 20px 64px;}
.rate-head{text-align:center;margin-bottom:28px;}
.rate-head .disp{font-size:clamp(26px,6vw,34px);color:var(--cobalt);margin-bottom:8px;}
.rate-head p{color:rgba(10,10,12,.65);font-size:15px;margin:0;}
.rate-card{background:#fff;border:2.5px solid var(--black);border-radius:16px;box-shadow:6px 6px 0 var(--black);padding:22px;margin-bottom:16px;}
.rate-card-name{font-family:'Archivo',sans-serif;font-weight:900;text-transform:uppercase;font-size:18px;margin-bottom:14px;}
.rate-stars{display:flex;gap:8px;}
.rate-star{background:none;border:0;padding:0;cursor:pointer;font-size:38px;line-height:1;color:rgba(10,10,12,.18);}
.rate-star.on{color:transparent;background:var(--holo);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;animation:holo-shift 7s linear infinite;}
.rate-submit{width:100%;margin-top:8px;}
.rate-status{text-align:center;padding:60px 20px;}
.rate-status .disp{font-size:24px;color:var(--cobalt);margin-bottom:10px;}
.rate-status p{color:rgba(10,10,12,.65);}

/* Stock del día por sabor (landing) */
.flavor-stock{display:inline-flex;align-items:baseline;gap:6px;margin:-4px 0 16px;padding:6px 12px;border:2px solid var(--black);border-radius:999px;font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.02em;}
.flavor-stock:empty{display:none;}
.flavor-stock b{font-size:17px;font-weight:900;}
.flavor-stock span{font-weight:700;opacity:.65;text-transform:none;}
.flavor-stock.is-ultimas{background:#FFE14D;color:#0A0A0C;}
.flavor-stock.is-agotada{background:var(--red);border-color:var(--red);color:#fff;}
.flavor-stock.is-pronto{opacity:.7;font-size:12px;}
.flavor-card.is-agotada .float-cookie{filter:grayscale(.85) brightness(.75);}
.sin-hornear{max-width:1240px;margin:28px auto 0;padding:22px 26px;border:2.5px solid var(--black);border-radius:14px;display:flex;flex-direction:column;gap:6px;text-align:center;}
.sin-hornear[hidden]{display:none;}
.sin-hornear b{font-family:'Archivo',sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(22px,3vw,32px);}
.sin-hornear span{font-size:15px;opacity:.8;}