/* ==========================================================================
   Dorado · Tenders de pollo
   Paleta sacada de los propios vídeos: fondo tostado, crema de harina,
   rosa de pollo crudo y dorado de fritura.
   ========================================================================== */

:root{
  --bg:#1e150d;
  --bg-2:#181009;
  --ink:#f3eadb;
  --ink-2:rgba(243,234,219,.74);
  --ink-3:rgba(243,234,219,.58);
  --line:rgba(243,234,219,.13);
  --line-strong:rgba(243,234,219,.42);
  --gold:#e9a23b;
  --gold-2:#f5bd5e;
  --gold-deep:#b8691c;
  --on-gold:#1e150d;
  --stage-rgb:239 167 156;

  --f-display:'Bricolage Grotesque','Arial Narrow','Roboto Condensed',sans-serif;
  --f-body:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'DM Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);

  --gutter:clamp(20px,5vw,80px);
  --navh:76px;
  --tshadow:0 1px 2px rgba(14,9,4,.95),0 3px 12px rgba(14,9,4,.78),0 10px 44px rgba(14,9,4,.8);

  /* Texturas: la tipografía pasa por las mismas etapas que el pollo */
  --n-flour:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .6 0 0 0 0 .49 0 0 0 0 .36 0 0 0 7 -4.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --n-flour2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='3' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .52 0 0 0 0 .41 0 0 0 0 .29 0 0 0 7.5 -4.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --n-crisp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .44 0 0 0 0 .21 0 0 0 0 .05 0 0 0 8 -4.8'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --n-crumb:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.25' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .88 0 0 0 0 .6 0 0 0 9 -6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --n-marble:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .04' numOctaves='3' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .93 0 0 0 2.6 -1.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --n-caustic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='turbulence' baseFrequency='.018 .055' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -5 1.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --n-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip}
body{margin:0;font:400 17px/1.55 var(--f-body);background:transparent;overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
p,h1,h2,h3,dl,dd,ul,ol{margin:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
main:focus{outline:none}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:12px;z-index:200;padding:12px 18px;border-radius:999px;background:var(--gold);color:var(--on-gold);font-weight:600;text-decoration:none;transform:translateY(-180%);transition:transform .4s var(--ease-out)}
.skip:focus{transform:none}
.wrap{width:min(1240px,calc(100% - 2 * var(--gutter)));margin-inline:auto}

/* ---------- un solo ambiente detrás de todo ---------- */
.env{position:fixed;inset:-20%;z-index:-1;pointer-events:none;background:radial-gradient(38% 34% at 26% 30%,rgba(233,162,59,.10),transparent 70%),radial-gradient(36% 30% at 78% 74%,rgba(239,167,156,.06),transparent 70%);animation:envDrift 80s var(--ease-io) -20s infinite alternate}
@keyframes envDrift{from{transform:translate3d(-4%,-3%,0) rotate(0deg)}to{transform:translate3d(4%,3%,0) rotate(8deg)}}
.grain{position:fixed;inset:-8%;z-index:60;pointer-events:none;opacity:.04;background-image:var(--n-grain);background-size:200px 200px;animation:grain 1s steps(5) infinite}
@keyframes grain{0%{transform:translate3d(0,0,0)}20%{transform:translate3d(-3%,2%,0)}40%{transform:translate3d(2%,-3%,0)}60%{transform:translate3d(-2%,-2%,0)}80%{transform:translate3d(3%,3%,0)}100%{transform:translate3d(0,0,0)}}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ---------- texturas de la tipografía (la firma de la web) ---------- */
.fill-raw .c,.tex.fill-raw{background-image:var(--n-marble),linear-gradient(176deg,#f9cdc3 0%,#efa79c 48%,#de8a81 100%);background-size:2.4em 2.4em,100% 100%}
.fill-flour .c,.tex.fill-flour{background-image:var(--n-flour),linear-gradient(180deg,#fbf6ee 0%,#efe6d8 60%,#dccfbb 100%);background-size:.9em .9em,100% 100%}
.fill-flour2 .c{background-image:var(--n-flour2),var(--n-flour),linear-gradient(180deg,#fffaf2 0%,#eee3d1 55%,#d6c5ac 100%);background-size:1.1em 1.1em,.8em .8em,100% 100%}
.fill-water .c{background-image:var(--n-caustic),linear-gradient(180deg,#eaf7f8 0%,#a9d4db 36%,#5e9caf 60%,#9fcdd6 82%,#d7eef1 100%);background-size:1.6em 1.6em,100% 100%}
.fill-fried .c,.tex.fill-fried{background-image:var(--n-crisp),var(--n-crumb),linear-gradient(172deg,#fbc96d 0%,#eca43f 40%,#c97a24 76%,#a65b17 100%);background-size:.8em .8em,.55em .55em,100% 100%}
:is(.fill-raw,.fill-flour,.fill-flour2,.fill-water,.fill-fried) .c,.tex{-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none}

/* ---------- texto partido en letras (lo anima el scroll) ---------- */
.split{display:inline}
.split .w{display:inline-block;white-space:nowrap}
.split .c{display:inline-block;--kc:clamp(0,(var(--k,1) - var(--th,0)) * 2.4,1);opacity:var(--kc);transform:translate3d(calc((1 - var(--kc)) * var(--jx,0em)),calc((1 - var(--kc)) * var(--jy,0em)),0) rotate(calc((1 - var(--kc)) * var(--jr,0deg))) scale(calc(1 + (1 - var(--kc)) * var(--js,0)))}
[data-fx=punch] .split .c,[data-fx=settle] .split .c{opacity:1;transform:none}
[data-fx=punch] .split .w{--kw:clamp(0,(var(--k,1) - var(--th,0)) * 3,1);--kz:clamp(0,(var(--k,1) - var(--th,0) - .16) * 2.4,1);opacity:var(--kw);transform:scale(calc(.55 + .69 * var(--kw) - .24 * var(--kz)));transform-origin:30% 75%}
[data-fx=settle] .split .w{--kw:clamp(0,(var(--k,1) - var(--th,0)) * 2.6,1);opacity:var(--kw);transform:translate3d(0,calc((1 - var(--kw)) * .3em),0)}
.band .sub{--ks:clamp(0,(var(--k,1) - .42) * 2.2,1);opacity:var(--ks);transform:translate3d(0,calc((1 - var(--ks)) * 14px),0)}
.band .sub2{--kb:clamp(0,(var(--k,1) - .68) * 3.4,1);opacity:var(--kb);transform:translate3d(0,calc((1 - var(--kb)) * 14px),0)}

/* ---------- carga ---------- */
.loader{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--bg);transition:opacity .9s var(--ease-out),visibility 0s .9s}
.loaded .loader{opacity:0;visibility:hidden}
html:not(.js) .loader{display:none}
.loader__in{display:grid;justify-items:center;gap:18px;transition:transform 1s var(--ease-out)}
.loaded .loader__in{transform:translateY(-24px)}
.loader__mark{font:800 clamp(64px,12vw,128px)/.9 var(--f-display);font-stretch:75%;text-transform:uppercase;padding:.04em .02em 0}
.loader__bar{width:180px;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.loader__bar i{display:block;height:100%;background:var(--gold);transform-origin:0 50%;transform:scaleX(var(--p,0));transition:transform .3s var(--ease-out)}
.loader__txt{font:500 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- navegación ---------- */
.nav{position:fixed;left:0;right:0;top:0;z-index:40;height:var(--navh);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 var(--gutter);border-bottom:1px solid transparent;transition:background-color .5s,border-color .5s}
.nav.solid{background:rgba(24,16,9,.78);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;text-shadow:var(--tshadow)}
.brand__mark{width:30px;height:30px;fill:var(--gold);filter:drop-shadow(0 2px 6px rgba(14,9,4,.6))}
.brand__mark circle{fill:var(--gold-deep)}
.brand__name{font:800 27px/1 var(--f-display);font-stretch:75%;text-transform:uppercase;letter-spacing:.01em}
.nav__links{display:flex;gap:30px}
.nav__links a{position:relative;padding:10px 0;font:500 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ink-2);text-shadow:var(--tshadow);transition:color .3s}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .5s var(--ease-out)}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:0 50%}

/* ---------- botones ---------- */
.btn{--h:54px;display:inline-flex;align-items:center;justify-content:center;gap:.55em;height:var(--h);padding:0 28px;border-radius:999px;border:1px solid transparent;font:600 15px/1 var(--f-body);letter-spacing:.01em;text-decoration:none;white-space:nowrap;cursor:pointer;text-shadow:none;transition:transform .5s var(--ease-out),background-color .3s,border-color .3s,color .3s,box-shadow .6s var(--ease-out)}
.btn--gold{background:var(--gold);color:var(--on-gold);box-shadow:0 14px 40px -16px rgba(233,162,59,.7)}
.btn--gold:hover{background:var(--gold-2);transform:translateY(-2px);box-shadow:0 18px 50px -14px rgba(233,162,59,.85)}
.btn--ghost{color:var(--ink);border-color:var(--line-strong);background:rgba(30,21,13,.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn--ghost:hover{background:rgba(243,234,219,.1);transform:translateY(-2px)}
.btn--sm{--h:42px;padding:0 20px;font-size:14px}
.btn__arrow{display:inline-block;transition:transform .5s var(--ease-out)}
.btn:hover .btn__arrow{transform:translateX(4px)}
@media (pointer:coarse){.btn{min-height:44px}}

/* ==========================================================================
   EL RECORRIDO
   ========================================================================== */
.journey{--range:840;position:relative;height:calc((var(--range) + 100) * 1vh)}
@supports (height:1svh){.journey{height:calc((var(--range) + 100) * 1svh)}}
.anchor-top{position:absolute;top:0;left:0}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate}
.frame{position:absolute;top:0;left:56%;height:100%;aspect-ratio:2/3;transform:translateX(-50%);background:var(--bg) url("../frames/sd/0001.webp") center/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%)}
/* al cargar, el vídeo pasa de desenfocado a nítido */
.frame canvas{width:100%;height:100%;opacity:0;filter:blur(14px);transform:scale(1.05);transition:opacity .6s,filter 1.6s var(--ease-out),transform 2s var(--ease-out)}
.frame.ready canvas{opacity:1}
.loaded .frame.ready canvas{filter:none;transform:none}
/* luz ambiente: el fotograma actual, diminuto, ampliado y desenfocado detrás del vídeo */
/* (barato: el canvas mide 48 px y el desenfoque se hace dentro del canvas, sin filtros CSS) */
.amb{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.4s;pointer-events:none}
.loaded .amb{opacity:.5}
/* mientras se ve el vídeo, el grano y el fondo animado descansan */
.in-journey .grain{display:none}
.in-journey .env{animation-play-state:paused}
.scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 120% 95% at 56% 45%,rgba(20,13,7,0) 50%,rgba(20,13,7,.34) 100%)}

.band{position:absolute;inset:0;z-index:2;pointer-events:none;text-shadow:var(--tshadow)}
.js .band{opacity:0}
.band::before{content:"";position:absolute;inset:0;pointer-events:none}
.band__in{position:absolute}
.band.live .settle__cta{pointer-events:auto}

/* portada */
.band--hero::before{background:radial-gradient(ellipse 75% 65% at 50% 52%,rgba(18,12,6,.74) 0%,rgba(18,12,6,.52) 55%,rgba(18,12,6,.28) 100%)}
.band--hero .band__in{left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,1100px);display:grid;justify-items:center;gap:24px;text-align:center}
.eyebrow{font:500 12px/1.3 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.hero__title{font:800 clamp(58px,min(10vw,17vh),178px)/.86 var(--f-display);font-stretch:75%;text-transform:uppercase;letter-spacing:-.012em}
.hero__title .split{display:block}
.hero__title .l1,.hero__title .l2{display:block}
.hero__lede{max-width:34ch;font-size:clamp(16px,1.3vw,19px);color:var(--ink)}

/* etapas */
.band--step::before{background:linear-gradient(90deg,rgba(18,12,6,.66) 0%,rgba(18,12,6,.42) 28%,rgba(18,12,6,0) 52%)}
.band--step .band__in{left:var(--gutter);top:50%;transform:translateY(-50%);width:min(46vw,560px)}
.step__meta{display:flex;align-items:baseline;gap:10px;margin-bottom:18px;font:500 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.step__n{font-size:13px;color:rgb(var(--stage-rgb))}
.step__of{color:var(--ink-3)}
.step__k{margin-left:8px;padding-left:12px;border-left:1px solid var(--line-strong)}
.step__t{font:800 clamp(64px,min(11vw,18vh),200px)/.84 var(--f-display);font-stretch:75%;text-transform:uppercase;letter-spacing:-.012em;margin-left:-.04em;padding-top:.04em}
.step__d{max-width:30ch;margin-top:22px;font-size:clamp(16px,1.25vw,19px);line-height:1.5;color:var(--ink)}

/* final del recorrido */
.band--settle::before{background:radial-gradient(ellipse 60% 46% at 56% 26%,rgba(18,12,6,.55) 0%,rgba(18,12,6,.3) 55%,rgba(18,12,6,0) 80%)}
.band--settle .band__in{left:56%;top:max(calc(var(--navh) + 4vh),11vh);transform:translateX(-50%);width:min(92vw,900px);display:grid;justify-items:center;gap:18px;text-align:center}
.settle__t{font:800 clamp(80px,min(15vw,25vh),280px)/.82 var(--f-display);font-stretch:75%;text-transform:uppercase;letter-spacing:-.015em;padding-top:.04em}
.settle__d{font-size:clamp(17px,1.4vw,21px);color:var(--ink)}
.settle__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:8px}

/* panel lateral: etapas, temperatura, capas */
.hud{position:absolute;z-index:3;right:var(--gutter);top:50%;transform:translateY(-50%);width:clamp(170px,15vw,220px);isolation:isolate;font:500 11.5px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);text-shadow:0 1px 3px rgba(14,9,4,.9)}
.js .hud{opacity:0}
.hud.off{visibility:hidden}
.hud__stage{display:none}
.rail{list-style:none;margin:0 0 34px;padding:0;display:grid;gap:16px}
.rail li{display:grid;grid-template-columns:30px 1fr;align-items:baseline;row-gap:8px;transition:color .4s}
.rail__n{color:var(--ink-3);transition:color .4s}
.rail__bar{grid-column:1/-1;height:1px;background:var(--line);overflow:hidden}
.rail__bar i{display:block;height:100%;background:rgb(var(--c));transform-origin:0 50%;transform:scaleX(var(--f,0))}
.rail li.on{color:var(--ink)}
.rail li.on .rail__n{color:rgb(var(--c))}
.readout{display:grid;gap:10px;padding-top:22px;border-top:1px solid var(--line)}
.readout__temp{display:flex;align-items:flex-end;gap:14px;margin-bottom:6px}
.readout__tv{display:grid;gap:8px}
.thermo{width:15px;height:58px;flex:none;overflow:visible}
.thermo__tube{fill:rgba(243,234,219,.04);stroke:var(--line-strong);stroke-width:1}
.thermo__fill{fill:rgb(var(--stage-rgb));transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(calc(.08 + .92 * var(--t,0)))}
.thermo__bulb{fill:rgb(var(--stage-rgb))}
.readout__big{font:800 46px/.9 var(--f-display);font-stretch:75%;letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums;color:rgb(var(--stage-rgb))}
.readout__row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.readout__k{color:var(--ink-3)}

.cue{position:absolute;z-index:3;left:50%;bottom:calc(26px + env(safe-area-inset-bottom));transform:translateX(-50%);display:grid;justify-items:center;gap:12px;font:500 11px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);text-shadow:var(--tshadow);white-space:nowrap}
.js .cue{opacity:0}
.cue i{width:1px;height:46px;background:linear-gradient(var(--ink),rgba(243,234,219,0));transform-origin:50% 0;animation:cue 2.4s var(--ease-io) -.6s infinite}
@keyframes cue{0%{transform:scaleY(0);opacity:1}55%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}

/* sin JavaScript: la portada se ve igual, sin animación */
html:not(.js) .journey{height:auto}
html:not(.js) .stage{position:relative;height:auto;min-height:100vh;padding:140px var(--gutter) 80px;display:grid;gap:80px}
html:not(.js) .band{position:relative;inset:auto}
html:not(.js) .band__in{position:relative;inset:auto;transform:none;left:auto;top:auto;width:auto}
html:not(.js) .hud,html:not(.js) .cue{display:none}

/* pantallas en vertical (móvil, tablet de pie): el vídeo ocupa toda la pantalla */
@media (max-aspect-ratio:1/1){
  :root{--navh:64px}
  .frame{left:0;width:100%;transform:none;aspect-ratio:auto;-webkit-mask-image:none;mask-image:none}
  .amb,.thermo{display:none}
  .scrim{background:radial-gradient(ellipse 120% 95% at 50% 45%,rgba(20,13,7,0) 46%,rgba(20,13,7,.45) 100%)}
  .band--step::before{background:linear-gradient(180deg,rgba(18,12,6,.86) 0%,rgba(18,12,6,.62) 26%,rgba(18,12,6,0) 56%)}
  .band--step .band__in{left:20px;right:20px;top:calc(var(--navh) + 10px);transform:none;width:auto}
  .step__meta{margin-bottom:12px}
  .step__t{font-size:clamp(60px,20vw,150px)}
  .step__d{margin-top:14px;font-size:16px;max-width:32ch}
  .hero__title{font-size:clamp(50px,15.5vw,124px)}
  .band--settle::before{background:radial-gradient(ellipse 90% 46% at 50% 24%,rgba(18,12,6,.6) 0%,rgba(18,12,6,.32) 55%,rgba(18,12,6,0) 82%)}
  .band--settle .band__in{left:50%;top:calc(var(--navh) + 5vh)}
  .settle__t{font-size:clamp(76px,25vw,170px)}
  .hud{left:16px;right:16px;top:auto;bottom:calc(14px + env(safe-area-inset-bottom));transform:none;width:auto;display:grid;grid-template-columns:1fr auto;align-items:end;gap:12px 16px}
  .hud::before{content:"";position:absolute;z-index:-1;left:-16px;right:-16px;bottom:calc(-14px - env(safe-area-inset-bottom));height:180px;background:linear-gradient(0deg,rgba(18,12,6,.82),rgba(18,12,6,0));pointer-events:none}
  .hud__stage{display:block;font-size:12px;color:var(--ink)}
  .rail{grid-column:1/-1;grid-row:2;grid-template-columns:repeat(5,1fr);gap:6px;margin:0}
  .rail li{grid-template-columns:1fr;row-gap:0}
  .rail__n,.rail__t{display:none}
  .readout{grid-column:2;grid-row:1;display:flex;align-items:baseline;gap:14px;padding:0;border:0}
  .readout__temp{display:block;margin:0}
  .readout__temp .readout__k,.readout__row:last-child{display:none}
  .readout__big{font-size:26px}
  .cue{bottom:calc(30px + env(safe-area-inset-bottom))}
}
@media (max-height:560px) and (min-aspect-ratio:1/1){.hud,.cue{display:none}}
@media (max-width:860px){.nav__links{display:none}}

/* ==========================================================================
   SECCIONES
   ========================================================================== */
.kicker{display:flex;align-items:center;gap:12px;margin-bottom:22px;font:500 12px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.kicker::before{content:"";width:22px;height:1px;background:var(--gold)}
.h2{font:800 clamp(46px,7.4vw,118px)/.88 var(--f-display);font-stretch:75%;text-transform:uppercase;letter-spacing:-.01em;padding-top:.05em}
.h2__soft{color:var(--ink-3)}

/* entradas al hacer scroll */
.js .rv{opacity:0;transform:translate3d(0,28px,0);transition:opacity .9s var(--ease-out),transform 1.1s var(--ease-out);transition-delay:calc(var(--d,0) * 90ms)}
.js .rv.in{opacity:1;transform:none}
.js .rv.done{transition-delay:0s!important}

/* la receta */
.recipe{position:relative;padding:clamp(120px,15vw,220px) 0 clamp(100px,12vw,180px);background:var(--bg)}
.recipe::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:22vh;background:linear-gradient(180deg,rgba(30,21,13,0),var(--bg));pointer-events:none}
.recipe__head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:end;gap:24px 60px}
.recipe__head .kicker{grid-column:1/-1;margin-bottom:0}
.recipe__lede{max-width:36ch;padding-bottom:10px;font-size:18px;color:var(--ink-2)}
.wave{width:100%;height:auto;margin:56px 0 0;overflow:visible}
.wave path{fill:none;stroke:var(--gold);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:.9}
.stats{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.stats li{padding:30px 28px 8px 0;border-top:1px solid var(--line)}
.stats li+li{padding-left:28px;border-left:1px solid var(--line)}
.stat__v{display:flex;align-items:flex-start;gap:8px;margin-bottom:18px}
.num{display:inline-block;font:800 clamp(80px,9.5vw,150px)/.82 var(--f-display);font-stretch:75%;font-variant-numeric:tabular-nums;letter-spacing:-.01em;padding-top:.05em}
.num--glow{position:relative;isolation:isolate;color:var(--gold-2)}
.num--glow::after{content:"";position:absolute;inset:-30% -25%;z-index:-1;background:radial-gradient(closest-side,rgba(233,162,59,.32),rgba(233,162,59,0));opacity:.45;animation:glow 5s var(--ease-io) -1.5s infinite alternate}
@keyframes glow{to{opacity:1}}
.unit{margin-top:.6em;font:500 15px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.stat__d{max-width:24ch;color:var(--ink-2)}
/* tira con los 5 pasos */
.steps{list-style:none;margin:clamp(70px,9vw,130px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.4vw,20px);align-items:start}
.steps li:nth-child(even){margin-top:clamp(24px,4vw,64px)}
.steps figure{position:relative;margin:0;aspect-ratio:2/3;border-radius:18px;overflow:hidden;background:#140d07;box-shadow:inset 0 0 0 1px var(--line)}
.steps img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.steps li:hover img{transform:scale(1.06)}
.steps figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,13,7,0) 52%,rgba(20,13,7,.78));pointer-events:none}
.steps figcaption{position:absolute;z-index:1;left:14px;right:14px;bottom:14px;display:flex;align-items:baseline;gap:10px;font:800 clamp(20px,1.9vw,30px)/1 var(--f-display);font-stretch:75%;text-transform:uppercase;text-shadow:var(--tshadow)}
.steps figcaption span{font:500 11px/1 var(--f-mono);letter-spacing:.14em;color:var(--ink-2)}
@media (max-width:760px){
  .steps{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:64%;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--gutter));padding:0 var(--gutter) 10px;scrollbar-width:none}
  .steps::-webkit-scrollbar{display:none}
  .steps li{scroll-snap-align:start}
  .steps li:nth-child(even){margin-top:0}
}

/* la carta */
.menu{position:relative;padding:clamp(100px,12vw,180px) 0 0;background:var(--bg-2)}
.menu__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 40px;margin-bottom:48px}
.menu__note{max-width:30ch;color:var(--ink-2)}
.menu__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.item{position:relative;display:grid;grid-template-columns:70px minmax(0,1fr) minmax(0,auto) 110px;align-items:baseline;gap:12px 28px;padding:30px 8px;border-bottom:1px solid var(--line)}
.item::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(233,162,59,.09),rgba(233,162,59,0) 70%);opacity:0;transition:opacity .5s var(--ease-out);pointer-events:none}
.item:hover::before{opacity:1}
.item__thumb{display:none}
.item__n{font:500 13px/1 var(--f-mono);letter-spacing:.1em;color:var(--ink-3)}
.item__t{font:800 clamp(34px,4.8vw,70px)/.95 var(--f-display);font-stretch:75%;text-transform:uppercase;letter-spacing:-.005em;padding-top:.04em;transition:transform .7s var(--ease-out)}
.item:hover .item__t{transform:translateX(12px)}
.item__d{font-size:16px;color:var(--ink-2)}
.item__p{font:500 18px/1 var(--f-mono);text-align:right;font-variant-numeric:tabular-nums}
.marquee{margin-top:clamp(80px,10vw,140px);padding:26px 0;border-block:1px solid var(--line);overflow:hidden}
.marquee__track{display:flex;width:max-content;animation:marquee 60s linear infinite}
.marquee:not(.vis) .marquee__track{animation-play-state:paused}
.marquee__group{display:flex;flex:none}
.marquee__group span{display:flex;align-items:center;gap:clamp(28px,3vw,48px);padding-right:clamp(28px,3vw,48px);font:800 clamp(30px,3.6vw,54px)/1 var(--f-display);font-stretch:75%;text-transform:uppercase;white-space:nowrap}
.marquee__group span::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--gold-deep)}
.marquee__group span:nth-child(even){color:transparent;-webkit-text-stroke:1px var(--ink-3)}
@keyframes marquee{to{transform:translate3d(-50%,0,0)}}
.float-img{position:fixed;left:0;top:0;z-index:30;width:clamp(260px,24vw,380px);aspect-ratio:4/5;pointer-events:none;will-change:transform}
/* la foto se revela con una máscara que se abre desde el centro */
.float-img__in{width:100%;height:100%;border-radius:24px;overflow:hidden;clip-path:inset(50% 0 50% 0 round 24px);transform:scale(1.08);box-shadow:0 30px 80px -24px rgba(0,0,0,.7);transition:clip-path .7s var(--ease-out),transform 1s var(--ease-out)}
.float-img.on .float-img__in{clip-path:inset(0 0 0 0 round 24px);transform:none}
.float-img img{width:100%;height:100%;object-fit:cover}
@media (hover:none),(max-width:760px){
  .float-img{display:none}
  .item{grid-template-columns:76px minmax(0,1fr) auto;grid-template-areas:"img t p" "img d d";align-items:center;gap:4px 16px;padding:18px 0}
  .item__thumb{display:block;grid-area:img;width:76px;height:95px;border-radius:16px;object-fit:cover}
  .item__n{display:none}
  .item__t{grid-area:t;font-size:clamp(28px,8vw,44px)}
  .item__d{grid-area:d;font-size:14px}
  .item__p{grid-area:p;font-size:15px}
  .item:hover .item__t{transform:none}
}

/* preguntas */
.faq{padding:clamp(110px,13vw,190px) 0;background:var(--bg)}
.faq__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(48px,7vw,130px);align-items:start}
.faq__side{position:sticky;top:calc(var(--navh) + 40px)}
.faq__more{margin-top:24px;color:var(--ink-2)}
.faq__more a{color:var(--ink);text-underline-offset:3px}
.badge{width:150px;height:150px;margin-top:44px;overflow:visible}
.badge text{font:500 12px/1 var(--f-mono);letter-spacing:.2em;fill:var(--ink-3)}
.badge__spin{transform-origin:100px 100px;animation:spin 40s linear infinite}
.faq:not(.vis) .badge__spin{animation-play-state:paused}
.badge__mark{fill:var(--gold)}
@keyframes spin{to{transform:rotate(360deg)}}
.faq__list{border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa h3{font:inherit}
.qa__q{display:flex;width:100%;align-items:center;justify-content:space-between;gap:20px;padding:26px 0;border:0;background:none;color:var(--ink);text-align:left;cursor:pointer;font:600 clamp(19px,1.7vw,24px)/1.25 var(--f-body)}
.qa__icon{position:relative;flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--line-strong);transition:transform .5s var(--ease-out),background-color .3s,border-color .3s}
.qa__icon::before,.qa__icon::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.qa__icon::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .5s var(--ease-out)}
.qa__q:hover .qa__icon{border-color:var(--ink-2);background:rgba(243,234,219,.06)}
.qa.open .qa__icon{transform:rotate(180deg);border-color:var(--gold)}
.qa.open .qa__icon::after{transform:translate(-50%,-50%) rotate(0deg)}
.qa__a{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .55s var(--ease-out),visibility 0s .55s}
.qa.open .qa__a{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .55s var(--ease-out),visibility 0s}
.qa__a>div{overflow:hidden}
.qa__a p{max-width:52ch;padding:0 50px 26px 0;color:var(--ink-2);opacity:0;transform:translate3d(0,-6px,0);transition:opacity .4s,transform .5s var(--ease-out)}
.qa.open .qa__a p{opacity:1;transform:none}

/* pedir */
.order{position:relative;overflow:hidden;padding:clamp(110px,13vw,190px) 0;background:var(--bg-2)}
.order__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(48px,7vw,120px);align-items:center}
.fry{display:grid;justify-items:center;gap:22px;text-align:center}
.fry__dial{position:relative;width:min(100%,460px);aspect-ratio:1}
.fry__pan{position:absolute;inset:14px;border-radius:50%;overflow:hidden;background:#140d07;box-shadow:inset 0 0 0 1px var(--line),0 50px 120px -40px rgba(233,162,59,.35)}
.fry__pan canvas{width:100%;height:100%}
.fry__pan::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(14,9,4,0) 55%,rgba(14,9,4,.6) 100%);pointer-events:none}
.fry__ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.fry__ring circle{fill:none;stroke-width:1.2}
.fry__track{stroke:var(--line)}
.fry__prog{stroke:var(--gold);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.fry__temp{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);display:flex;align-items:flex-start;gap:4px;font:800 clamp(40px,4.6vw,64px)/1 var(--f-display);font-stretch:75%;font-variant-numeric:tabular-nums;text-shadow:var(--tshadow)}
.fry__temp small{margin-top:.45em;font:500 14px/1 var(--f-mono);color:var(--ink-2)}
.fry__btn{position:relative;isolation:isolate;overflow:hidden;height:62px;padding:0 34px;border-radius:999px;border:1px solid var(--line-strong);background:rgba(243,234,219,.05);color:var(--ink);font:600 16px/1 var(--f-body);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .45s var(--ease-out),background-color .4s,color .4s,border-color .4s}
.fry__btn::before{content:"";position:absolute;left:0;right:0;bottom:0;z-index:-1;height:3px;background:linear-gradient(90deg,var(--gold-deep),var(--gold));transform-origin:0 50%;transform:scaleX(var(--p,0))}
.fry__btn:hover{border-color:var(--ink-2)}
.fry__btn.holding{transform:scale(.97)}
.is-fried .fry__btn{background:var(--gold);color:var(--on-gold);border-color:transparent}
.fry__help{max-width:34ch;font-size:14px;color:var(--ink-3)}
.order__lede{max-width:36ch;margin-top:22px;font-size:18px;color:var(--ink-2)}
.order__btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:36px 0 40px}
.obtn{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:66px;padding:0 22px;border-radius:18px;border:1px solid var(--line-strong);background:rgba(243,234,219,.03);text-decoration:none;font:600 17px/1.1 var(--f-body);transition:transform .5s var(--ease-out),background-color .35s,border-color .35s,box-shadow .7s var(--ease-out)}
.obtn:hover{transform:translateY(-3px);background:rgba(243,234,219,.07);border-color:var(--ink-2)}
.obtn--gold{background:var(--gold);color:var(--on-gold);border-color:transparent}
.obtn--gold:hover{background:var(--gold-2);border-color:transparent}
.is-fried .obtn{box-shadow:0 0 0 1px rgba(233,162,59,.65),0 20px 50px -20px rgba(233,162,59,.75);transition-delay:calc(var(--d,0) * 110ms)}
.is-fried.settled .obtn{transition-delay:0s}
.local{display:grid;border-top:1px solid var(--line)}
.local div{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line)}
.local dt{font:500 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.local dd{color:var(--ink)}
.local a{text-underline-offset:3px}

/* pie */
.foot{overflow:hidden;padding:clamp(80px,10vw,140px) 0 calc(28px + env(safe-area-inset-bottom));background:var(--bg)}
.foot__mark{margin:0 0 clamp(30px,4vw,60px);padding-top:.06em;font:800 clamp(96px,26vw,460px)/.8 var(--f-display);font-stretch:75%;text-transform:uppercase;letter-spacing:-.02em;text-align:center}
.foot__row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:16px 30px;padding-top:24px;border-top:1px solid var(--line);font:500 12px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.foot__links{display:flex;flex-wrap:wrap;gap:24px}
.foot__links a{text-decoration:none;color:var(--ink-2);transition:color .3s}
.foot__links a:hover{color:var(--ink)}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));z-index:90;max-width:calc(100% - 32px);padding:14px 20px;border-radius:14px;border:1px solid var(--line-strong);background:rgba(24,16,9,.94);font:500 14px/1.3 var(--f-body);opacity:0;transform:translate3d(-50%,20px,0);pointer-events:none;transition:opacity .4s var(--ease-out),transform .5s var(--ease-out)}
.toast.show{opacity:1;transform:translate3d(-50%,0,0)}

/* ---------- tamaños intermedios y móvil ---------- */
@media (max-width:980px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats li:nth-child(3){padding-left:0;border-left:0}
  .faq__grid,.order__grid{grid-template-columns:1fr}
  .faq__side{position:relative;top:auto}
  .badge{display:none}
  .order__info{order:-1}
}
@media (max-width:640px){
  .recipe__head{grid-template-columns:1fr}
  .stats li{padding:24px 14px 6px 0}
  .stats li+li{padding-left:14px}
  .stats li:nth-child(3){padding-left:0}
  .num{font-size:clamp(64px,22vw,96px)}
  .order__btns{grid-template-columns:1fr}
  .local div{grid-template-columns:1fr;gap:6px}
  .qa__a p{padding-right:0}
}

/* ---------- tipografía: cortes de línea equilibrados ---------- */
.h2,.hero__title,.step__t,.settle__t,.item__t,.qa__q{text-wrap:balance}
p,dd{text-wrap:pretty}

/* ---------- Lenis (scroll suave) y Motion (animaciones) ---------- */
html.has-lenis{scroll-behavior:auto}
.js.has-motion .rv{transition:none}
/* titulares: cada palabra sube desde detrás de una máscara (con margen para tildes y colas) */
.mw{display:inline-block;overflow:hidden;vertical-align:top;padding:.14em .04em .06em;margin:-.14em -.04em -.06em}
.h2.masked .mi{display:inline-block}
.has-motion .h2.masked .mi{transform:translateY(110%)}
/* los botones los mueve Motion (efecto imán): sin transición de transform en CSS */
@media (hover:hover) and (pointer:fine){
  .has-motion .btn,.has-motion .obtn{transition-property:background-color,border-color,color,box-shadow}
  .has-motion .btn:hover,.has-motion .obtn:hover{transform:none}
}
/* cursor propio: un punto que crece sobre lo que se puede pulsar */
.cursor{position:fixed;left:0;top:0;z-index:95;width:0;height:0;pointer-events:none;opacity:0;mix-blend-mode:difference;transition:opacity .3s}
.cursor.on{opacity:1}
.cursor i{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;background:#f3eadb;transition:transform .45s var(--ease-out)}
.cursor.big i{transform:scale(3.4)}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ---------- movimiento reducido ----------
   main.js pone la clase .rm cuando el visitante pide menos movimiento.
   El vídeo sigue moviéndose con el scroll; se quitan los demás efectos. */
html.rm{scroll-behavior:auto}
.rm *,.rm *::before,.rm *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
.rm .split .c,.rm .split .w,.rm .band .sub,.rm .band .sub2{transform:none!important}
.js.rm .rv{opacity:1!important;transform:none!important}
.rm .grain,.rm .cursor{display:none}
.rm .h2.masked .mi{transform:none!important}