/* ===== Fuentes (autoalojadas, sin peticiones a terceros) ===== */
@font-face{font-family:"Anton";src:url(fonts/anton-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url(fonts/barlow-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url(fonts/barlow-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url(fonts/barlow-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --bg:#0d0b0a; --ember:#ff5a1f; --amber:#ff8c1a; --kraft:#c9a574; --cream:#f3e9d8; --hot:#d62818;--wa:#25d366;--wa-hi:#4ee889;
  --display:"Anton","Bebas Neue",Impact,"Arial Narrow",sans-serif;
  --text:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--cream)}
body{font-family:var(--text);font-size:1rem;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.loading{overflow:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* ===== Loader ===== */
.loader{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-content:center;justify-items:center;gap:1rem;font-family:var(--display);letter-spacing:.2em;transition:opacity .7s ease,visibility .7s}
.loader i{display:block;width:140px;height:2px;background:linear-gradient(90deg,transparent,var(--ember),transparent);animation:load 1.2s ease-in-out infinite}
.loader.done{opacity:0;visibility:hidden}
@keyframes load{0%,100%{transform:scaleX(.2);opacity:.4}50%{transform:scaleX(1);opacity:1}}

/* ===== Navegación mínima ===== */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:1.1rem clamp(1rem,3vw,2.5rem);pointer-events:none}
.nav>*{pointer-events:auto}
.brand{font-family:var(--display);letter-spacing:.16em;font-size:1rem;text-decoration:none;text-shadow:0 2px 16px rgba(0,0,0,.6)}
.nav-mid{position:absolute;left:50%;transform:translateX(-50%);font-size:.72rem;font-weight:600;letter-spacing:.22em;opacity:.75;text-shadow:0 2px 16px rgba(0,0,0,.6)}
@media (max-width:640px){.nav-mid{display:none}}

/* ===== Botones ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--display);letter-spacing:.14em;font-size:1.2rem;padding:1rem 2.2rem;background:var(--wa);color:#04260f;text-decoration:none;border-radius:2px;transition:background .25s,transform .25s}
.btn svg{width:1.35em;height:1.35em;fill:currentColor;margin-right:.7rem;flex:none}
.btn:hover{background:var(--wa-hi);transform:translateY(-2px)}

/* WhatsApp fijo, abajo a la derecha, con los colores de la marca */
.fab{position:fixed;right:clamp(1rem,2.4vw,2rem);bottom:clamp(1rem,2.4vw,2rem);z-index:60;display:inline-flex;align-items:center;gap:.65rem;height:3.7rem;min-width:3.7rem;padding:0 1.3rem 0 1.1rem;background:var(--wa);color:#04260f;border-radius:999px;text-decoration:none;font-family:var(--display);letter-spacing:.14em;font-size:1rem;box-shadow:0 10px 34px rgba(37,211,102,.45);transition:background .25s,transform .25s}
.fab svg{width:1.8rem;height:1.8rem;fill:currentColor;flex:none}
.fab::before{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--wa);pointer-events:none;animation:ping 2.6s ease-out infinite}
.fab:hover{background:var(--wa-hi);transform:translateY(-2px)}
@keyframes ping{0%{transform:scale(1);opacity:.75}100%{transform:scale(1.3,1.7);opacity:0}}
@media (max-width:640px){.fab{padding:0;width:3.7rem;justify-content:center}.fab span{display:none}}

.ribbon{position:fixed;left:0;bottom:1rem;z-index:50;background:var(--cream);color:#0d0b0a;font-weight:700;font-size:.68rem;line-height:1;letter-spacing:.22em;padding:.5rem .9rem .5rem 1rem;border-radius:0 2px 2px 0}

/* Puntos de escena */
.dots{position:fixed;right:clamp(1rem,2.4vw,2rem);top:50%;transform:translateY(-50%);z-index:55;display:flex;flex-direction:column;gap:1rem}
.dot{position:relative;width:10px;height:10px;padding:0;border-radius:50%;border:1.5px solid rgba(243,233,216,.75);background:transparent;cursor:pointer;transition:background .3s,border-color .3s,transform .3s}
.dot::after{content:"";position:absolute;inset:-10px}
.dot.on{background:var(--ember);border-color:var(--ember);transform:scale(1.4)}

/* ===== Escena ===== */
#story{position:relative;height:520vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--bg);isolation:isolate}
.stage>*{position:absolute}

.bg-sunset{inset:0;z-index:0;overflow:hidden}
.bg-sunset .sky{will-change:filter,transform}
.bg-sunset img{position:absolute;left:-3%;top:-8%;width:106%;height:116%;object-fit:cover;will-change:transform}
.bg-sunset .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,11,10,.3) 0%,rgba(13,11,10,0) 28%,rgba(13,11,10,0) 62%,rgba(13,11,10,.45) 100%)}
.bg-sunset .dim{position:absolute;inset:0;background:var(--bg);opacity:.08}
.glow{inset:0;z-index:0;pointer-events:none;background:radial-gradient(95% 75% at 50% 50%,transparent 55%,rgba(0,0,0,.55) 100%)}

/* Título: una línea, centrado arriba. La bolsa lo tapa solo por abajo */
.giant{inset:0;z-index:1;display:flex;align-items:flex-start;justify-content:center;gap:.22em;padding-top:clamp(4.2rem,11vh,8rem);font-family:var(--display);font-weight:400;font-size:clamp(3.2rem,15vw,17rem);line-height:.95;letter-spacing:.005em;white-space:nowrap;color:var(--cream);text-shadow:0 6px 50px rgba(0,0,0,.5);pointer-events:none;user-select:none}
@media (max-aspect-ratio:1/1){.giant{flex-direction:column;justify-content:flex-start;align-items:center;gap:0;font-size:25vw;line-height:.88;padding-top:5.4rem}}

#gl{inset:0;width:100%;height:100%;display:block;z-index:2;pointer-events:none}
.flash{inset:0;z-index:3;opacity:0;visibility:hidden;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(50% 50% at 50% 50%,rgba(214,40,24,.8),rgba(214,40,24,0) 70%)}
.fallback{display:none}

/* ===== Textos ===== */
.copy{inset:0;z-index:4;display:flex;pointer-events:none;opacity:0;visibility:hidden;padding:clamp(5rem,12vh,8rem) clamp(1.25rem,6vw,6rem) clamp(2rem,8vh,5rem)}
.copy .inner{max-width:40rem}
.copy h2{font-family:var(--display);font-weight:400;line-height:.94;letter-spacing:.01em;font-size:clamp(2.4rem,6.2vw,6.4rem);text-transform:uppercase;text-shadow:0 4px 30px rgba(0,0,0,.55)}
.kicker{font-family:var(--display);letter-spacing:.2em;color:var(--amber);font-size:clamp(.8rem,1.3vw,1.1rem);margin-bottom:1rem;text-shadow:0 2px 20px rgba(0,0,0,.7)}
.sub{font-size:clamp(1rem,1.5vw,1.3rem);font-weight:600;letter-spacing:.02em;opacity:.92;margin-top:1.2rem;text-shadow:0 2px 20px rgba(0,0,0,.7)}

/* Escena 0 */
.c-hero{align-items:flex-end;justify-content:center;text-align:center;padding-bottom:clamp(1rem,3vh,2.2rem)}
.c-hero .inner{max-width:none}
.c-hero .kicker{font-size:clamp(.95rem,1.8vw,1.45rem);margin-bottom:.9rem}
.cue{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.mouse{display:block;position:relative;width:24px;height:38px;border:2px solid rgba(243,233,216,.9);border-radius:14px}
.mouse i{position:absolute;left:50%;top:7px;width:3px;height:8px;margin-left:-1.5px;border-radius:2px;background:var(--ember);animation:wheel 1.6s ease-in-out infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{opacity:0}}
.cue-text{font-weight:700;font-size:.78rem;letter-spacing:.3em;text-shadow:0 2px 14px rgba(0,0,0,.8)}
.chev{display:block;width:12px;height:12px;border-right:2px solid var(--amber);border-bottom:2px solid var(--amber);transform:rotate(45deg);animation:chev 1.6s ease-in-out infinite}
@keyframes chev{0%,100%{opacity:.25;transform:translateY(0) rotate(45deg)}50%{opacity:1;transform:translateY(6px) rotate(45deg)}}
@media (hover:none){.mouse{display:none}}

/* Escenas 1 y 3: texto a la izquierda */
.c-premium,.c-sabores{align-items:center;justify-content:flex-start}
.c-premium .inner,.c-sabores .inner{max-width:min(40rem,42vw)}
.pills{pointer-events:auto;display:flex;gap:.8rem;margin-top:1.8rem;flex-wrap:wrap}
.pill{cursor:pointer;font-family:var(--display);letter-spacing:.16em;font-size:1rem;padding:.7rem 1.3rem;border:1px solid rgba(243,233,216,.45);background:rgba(13,11,10,.45);color:rgba(243,233,216,.75);transition:background .35s,color .35s,border-color .35s}
.pill.on{background:var(--ember);border-color:var(--ember);color:#0d0b0a}
.pill.hot.on{background:var(--hot);border-color:var(--hot);color:var(--cream)}

/* Escena 4 */
.c-origen{align-items:center;justify-content:center;text-align:center}
.c-origen .inner{max-width:62rem}
.c-origen h2,.c-origen .sub,.c-origen .kicker{text-shadow:0 2px 36px rgba(0,0,0,.75)}

/* Escena 5 */
.c-cta{flex-direction:column;align-items:center;justify-content:space-between;text-align:center;padding-top:clamp(4.5rem,10vh,6rem)}
.c-cta h2{font-size:clamp(2.2rem,5.4vw,5.2rem)}
.c-cta .bottom{pointer-events:auto}

/* ===== Beneficios: columna derecha ===== */
.benefits{inset:0;z-index:4;pointer-events:none}
.benefit{position:absolute;display:flex;align-items:center;gap:1rem;padding:1rem 1.35rem;background:rgba(13,11,10,.78);border:1px solid rgba(255,140,26,.55);border-radius:2px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-family:var(--display);letter-spacing:.06em;line-height:1.05;font-size:clamp(1rem,1.9vw,1.7rem);opacity:0;visibility:hidden}
.benefit svg{width:clamp(2rem,3.4vw,3rem);height:auto;color:var(--ember);flex:none}
.b1,.b2,.b3{right:clamp(3.2rem,7vw,7rem);min-width:min(24vw,22rem)}
.b1{top:24%}
.b2{top:42%}
.b3{top:60%}

@media (max-aspect-ratio:1/1){
  .copy{padding-top:5.2rem}
  .c-premium,.c-sabores{align-items:flex-start;justify-content:center;text-align:center}
  .c-premium .inner,.c-sabores .inner{max-width:none}
  .c-premium h2{font-size:clamp(2.2rem,10vw,3.6rem)}
  .c-sabores h2{font-size:clamp(2.4rem,11vw,4rem)}
  .pills{justify-content:center}
  .benefit{padding:.65rem .9rem;min-width:0}
  .b1{left:5vw;right:5vw;top:auto;bottom:28%}
  .b2{left:5vw;right:5vw;top:auto;bottom:18%}
  .b3{left:5vw;right:5vw;top:auto;bottom:8%}
  .dots{gap:.8rem}
  .dot{width:8px;height:8px}
  .c-hero .kicker{font-size:.95rem}
}

/* ===== Pie ===== */
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem 2rem;padding:3rem clamp(1.25rem,6vw,6rem) 6rem;font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,233,216,.8);border-top:1px solid rgba(243,233,216,.12)}
.demo-note{width:100%;text-transform:none;letter-spacing:.04em;opacity:.65;font-weight:400}

/* ===== Modo estático: sin WebGL o con "reducir movimiento" ===== */
.static #story{height:auto}
.static .stage{position:relative;height:auto;overflow:visible;padding:7rem clamp(1.25rem,6vw,6rem) 4rem;display:flex;flex-direction:column;align-items:center;gap:4rem}
.static .stage>*{position:relative}
.static #gl,.static .flash,.static .glow,.static .dots{display:none}
.static .bg-sunset{position:absolute;inset:0;opacity:.3}
.static .giant{inset:auto;padding:0;display:flex;justify-content:center;gap:.25em;flex-wrap:wrap;font-size:clamp(4rem,18vw,12rem)}
.static .fallback{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap}
.static .fallback img{width:min(42vw,300px);height:auto}
.static .copy{inset:auto;opacity:1;visibility:visible;padding:0;justify-content:center;text-align:center}
.static .copy .inner{max-width:48rem}
.static .benefits{inset:auto;display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
.static .benefit{position:relative;inset:auto;opacity:1;visibility:visible;min-width:0}
.static .c-cta{flex-direction:column;gap:2rem}
.static .c-cta .bottom{pointer-events:auto}
.static .cue{display:none}
.static .pill.on{background:transparent;color:inherit;border-color:rgba(243,233,216,.35)}
.static .pill{color:var(--cream)}

@media (prefers-reduced-motion:reduce){.cue i,.mouse i,.chev,.loader i,.fab::before{animation:none}}

.pill:hover{border-color:var(--cream);color:var(--cream)}.pill:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
.pills-hint{margin-top:.9rem;font-size:.85rem;letter-spacing:.12em;color:var(--amber);opacity:.9}