/* coffee2home · estilos
   Mezcla de Le Pain Quotidien (letras gigantes angostas, foco al hacer scroll, damero con bordes, manuscritas)
   y Krem & Kanel (espiral de entrada, ondas, paneles redondeados de colores, tarjetas apiladas). */

:root{
  --night:#17120e;
  --canvas:#f6eedf;
  --canvas-deep:#efe2cc;
  --ice:#cfe3ea;
  --peach:#f6d8c3;
  --caramel:#a9663a;
  --crema:#e2a764;
  --tostado:#6e4127;
  --espresso:#3a2116;
  --text-2:#6b4a36;
  --milk:#fbf6ee;
  --accent:#7a4fd0;
  --accent-hover:#6740b8;
  --accent-muted:rgba(122,79,208,.18);

  --f-big:'Anton','Impact','Arial Narrow',sans-serif;
  --f-round:'Fredoka','Trebuchet MS',sans-serif;
  --f-body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-script:'Yellowtail','Brush Script MT',cursive;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --ease-pop:cubic-bezier(.34,1.56,.64,1);

  --line:1.5px solid var(--espresso);
  --r:28px;
  --pad:clamp(16px,4vw,56px);
  --cover:70vh;
  --tshadow:0 1px 2px rgba(10,7,5,.95),0 3px 12px rgba(10,7,5,.78),0 10px 44px rgba(10,7,5,.8);
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--canvas);color:var(--espresso);font:400 17px/1.55 var(--f-body);-webkit-font-smoothing:antialiased}
.js body{animation:pagein .7s var(--ease) both}
@keyframes pagein{from{opacity:0}to{opacity:1}}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3,h4{margin:0;font-weight:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);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:-80px;z-index:200;background:var(--espresso);color:var(--canvas);padding:12px 18px;border-radius:12px;text-decoration:none;transition:top .3s var(--ease)}
.skip:focus{top:16px}
.defs{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- Fondo fijo: grano y manchas de latte que derivan ---------- */
.env{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--canvas)}
.env::after{content:"";position:absolute;inset:0;opacity:.07;mix-blend-mode:multiply;background-image: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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.env__blob{position:absolute;width:72vmax;height:72vmax;border-radius:50%;will-change:transform;animation:drift 84s var(--ease-io) infinite alternate}
.env__blob--a{left:-26vmax;top:-22vmax;background:radial-gradient(circle,rgba(226,167,100,.2),rgba(226,167,100,0) 62%);animation-delay:-14s}
.env__blob--b{right:-24vmax;bottom:-28vmax;background:radial-gradient(circle,rgba(207,227,234,.55),rgba(207,227,234,0) 62%);animation-duration:102s;animation-delay:-40s}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(16vmax,12vmax,0)}}

/* ---------- Entrada: la espiral que se vuelve tarjeta (Krem & Kanel) ---------- */
.intro{position:fixed;inset:0;z-index:90;pointer-events:none;background:#f1dfc0;overflow:hidden;clip-path:inset(0 0 0 0 round 0px);transition:clip-path 1s var(--ease-io) .28s,opacity .5s var(--ease)}
.no-js .intro{display:none}
.intro.go{clip-path:inset(var(--it,40vh) var(--ir,30vw) var(--ib,10vh) var(--il,30vw) round 28px)}
.intro.out{opacity:0}
.intro__swirl{position:absolute;left:var(--icx,50%);top:var(--icy,50%);width:180vmax;height:180vmax;margin:-90vmax 0 0 -90vmax;animation:introSpin 1.7s var(--ease-io) both}
@keyframes introSpin{from{transform:rotate(30deg) scale(1.2)}to{transform:rotate(-200deg) scale(.42)}}

/* ---------- Navegación en cajas (Le Pain) ---------- */
.nav{position:fixed;top:14px;left:var(--pad);right:var(--pad);z-index:60}
.nav__row{display:flex;margin:0;padding:0;list-style:none;background:var(--canvas);border:var(--line);box-shadow:0 10px 30px -18px rgba(58,33,22,.45)}
.nav__item{display:flex;border-left:var(--line)}
.nav__item:first-child{border-left:0}
.nav__item>a,.nav__item>button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 18px;font:600 14.5px/1 var(--f-body);color:var(--espresso);text-decoration:none;background:transparent;border:0;cursor:pointer;white-space:nowrap;transition:background-color .35s var(--ease),color .35s var(--ease)}
.nav__item>a:hover,.nav__item>button:hover{background:var(--canvas-deep)}
.nav__brand{flex:1}
.nav__brand>a{width:100%;gap:10px}
.nav__cup{width:22px;height:29px;transition:transform .5s var(--ease-pop)}
.nav__brand>a:hover .nav__cup{transform:rotate(-8deg) translateY(-2px)}
.wordmark{font:700 22px/1 var(--f-round);letter-spacing:-.01em}
.wordmark b,.foot__fit b{color:var(--accent);font-weight:700}
.nav__cta>a{background:var(--accent);color:#fff}
.nav__cta>a:hover{background:var(--accent-hover)}
.ico{width:20px;height:20px;flex:none}
.nav__toggle{display:none}
.burger{position:relative;width:20px;height:2px;background:currentColor;transition:background-color .3s}
.burger::before,.burger::after{content:"";position:absolute;left:0;width:20px;height:2px;background:currentColor;transition:transform .4s var(--ease)}
.burger::before{top:-6px}.burger::after{top:6px}
.nav.open .burger{background:transparent}
.nav.open .burger::before{transform:translateY(6px) rotate(45deg)}
.nav.open .burger::after{transform:translateY(-6px) rotate(-45deg)}
.nav__drawer{position:absolute;top:calc(100% - 1.5px);left:0;right:0;display:flex;flex-direction:column;background:var(--canvas);border:var(--line);visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .35s var(--ease),transform .45s var(--ease),visibility 0s linear .45s}
.nav.open .nav__drawer{visibility:visible;opacity:1;transform:none;transition:opacity .35s var(--ease),transform .45s var(--ease),visibility 0s}
.nav__drawer a{padding:16px 20px;border-top:1px solid rgba(58,33,22,.18);font:600 17px/1.2 var(--f-body);text-decoration:none}
.nav__drawer a:first-child{border-top:0}
@media (min-width:1101px){.nav__drawer{display:none}}
@media (max-width:1100px){
  .nav__item--wide{display:none}
  .nav__toggle{display:flex}
  .nav__brand>a{justify-content:flex-start;padding-left:16px}
}
@media (max-width:420px){.wordmark{font-size:19px}.nav__item>a,.nav__item>button{padding:0 14px}}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;border:1.5px solid transparent;font:600 16px/1 var(--f-body);text-decoration:none;cursor:pointer;white-space:nowrap;background:transparent;transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease)}
.btn--accent{position:relative;background:var(--accent);color:#fff;box-shadow:0 12px 26px -14px rgba(122,79,208,.9)}
.btn--accent:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 16px 30px -14px rgba(122,79,208,.95)}
.btn--line{border-color:var(--espresso);color:var(--espresso)}
.btn--line:hover{background:var(--espresso);color:var(--canvas)}
.btn--light{border-color:rgba(246,238,223,.75);color:var(--milk);text-shadow:none;background:rgba(12,8,6,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn--light:hover{background:var(--milk);color:var(--espresso)}
.btn--wide{width:100%}
.linkbtn{background:none;border:0;padding:12px 4px;cursor:pointer;font:600 15px/1 var(--f-body);text-decoration:underline;text-underline-offset:4px;color:var(--text-2)}
.linkbtn:hover{color:var(--espresso)}
@media (pointer:coarse){.btn{min-height:52px}.nav__item>a,.nav__item>button{min-height:50px}}

/* ---------- Tipos compartidos ---------- */
.kicker{font:400 clamp(28px,3vw,42px)/1 var(--f-script);color:var(--caramel);margin:0 0 .12em;transform:rotate(-4deg);display:inline-block}
.label{font:600 13px/1 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--text-2);margin:0 0 18px}
.title{font:700 clamp(52px,8vw,124px)/.92 var(--f-round);letter-spacing:-.02em;color:var(--espresso);margin:0}
.tag{display:inline-block;margin:18px 0 0;padding:7px 14px;border:var(--line);border-radius:999px;font:600 12px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase}
.sec-head{text-align:center;max-width:900px;margin:0 auto clamp(40px,7vh,72px)}

/* Letras que entran una por una (Krem & Kanel) */
.split .w{display:inline-block;white-space:nowrap}
.split .c{display:inline-block}
.pop-title .w{padding-bottom:.08em;margin-bottom:-.08em}
.js .pop-title .c{opacity:0;transform:translateY(.55em) rotate(12deg) scale(.8);transition:opacity .5s var(--ease),transform .9s var(--ease-pop);transition-delay:calc(var(--ci,0)*38ms)}
.js .pop-title.in .c{opacity:1;transform:none}
.js .pop-title.settled .c{transition-delay:0s}

/* Entradas al aparecer */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform 1.1s var(--ease);transition-delay:calc(var(--d,0)*1ms)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.settled{transition-delay:0s!important}

/* Pausa de animaciones fuera de pantalla y con la pestaña oculta */
[data-live]:not(.live) *,[data-live]:not(.live) *::before,[data-live]:not(.live) *::after{animation-play-state:paused!important}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ---------- Olas (Krem & Kanel) ---------- */
.wave{position:absolute;left:0;width:100%;height:80px;color:var(--canvas);pointer-events:none;overflow:hidden;z-index:1}
.wave svg{width:200%;max-width:none;height:100%;animation:waveDrift 46s linear infinite}
.wave--top{top:-79px}
.wave--bottom{bottom:-79px}
.wave--bottom svg{animation-direction:reverse}
.wave--brown{color:var(--tostado)}
.wave--espresso{color:var(--espresso)}
@keyframes waveDrift{to{transform:translateX(-50%)}}

/* =========================================================
   PORTADA: la ventana que se abre
   ========================================================= */
.hero{position:relative;height:calc(620vh + var(--cover));background:var(--canvas)}
.hero__stage{position:sticky;top:0;height:100vh;overflow:hidden;--g:0}
.hero__wave{position:absolute;left:-2%;width:104%;max-width:none;bottom:0;height:22vh;color:var(--tostado);opacity:calc(1 - var(--g));transform:translateY(calc(var(--g) * 22vh))}
.hero__window{position:absolute;inset:0;background:var(--night);clip-path:inset(46vh calc((100vw - min(48vw,720px))/2) calc(54vh - min(48vh,520px)) calc((100vw - min(48vw,720px))/2) round 28px);will-change:clip-path}
.hero__media{position:absolute;inset:0;transform-origin:0 0;will-change:transform;background:var(--night)}
.hero__poster{position:absolute;inset:0;background:var(--night) center/cover no-repeat}
.hero__poster--end{opacity:0;background-image:none}
.video-failed .hero__poster--end{background-image:url('hero-ending.jpg');opacity:var(--endo,0)}
.hero__video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:0;transform:translateZ(0);transition:opacity .7s var(--ease)}
.video-ready .hero__video{opacity:1}
.video-failed .hero__video{display:none}
.hero__seq{display:none;position:absolute;inset:0;width:100%;height:100%;max-width:none;opacity:0;transition:opacity .5s var(--ease)}
.seq-ready .hero__seq{opacity:1}
.hero__edge{display:none;position:absolute;left:0;right:0;height:18%;pointer-events:none;opacity:var(--g)}
.hero__edge--t{top:-1px;background:linear-gradient(to bottom,var(--night),rgba(23,18,14,0))}
.hero__edge--b{bottom:-1px;background:linear-gradient(to top,var(--night),rgba(23,18,14,0))}
.hero__scrim{position:absolute;inset:0;pointer-events:none;opacity:var(--g);background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(12,9,7,0) 38%,rgba(12,9,7,.6) 100%)}

.band{position:absolute;inset:0;pointer-events:none}
.band a,.band button{pointer-events:none}
.band.is-on a,.band.is-on button,.band--open a,.band--open button{pointer-events:auto}
/* computadora: título, frase, video y botón en una sola columna centrada */
.band--open{opacity:var(--o1,1);display:flex;flex-direction:column;align-items:center;padding:calc(9vh + 20px) var(--pad) 5.5vh}
.band--open.is-off a,.band--open.is-off button{pointer-events:none}
/* aviso para celular: invita a deslizar; tocarlo también arranca el video */
.swipe-hint{display:none;align-items:center;gap:8px;min-height:40px;margin:0 0 12px;padding:0 16px;border:0;border-radius:999px;background:var(--canvas);color:var(--espresso);box-shadow:0 8px 22px -12px rgba(58,33,22,.55);font:600 12.5px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.swipe-hint svg{width:18px;height:18px;animation:cueBob 2.6s var(--ease-io) infinite;animation-delay:-.4s}

.hero__head{position:relative;text-align:center;transform:translateY(var(--y1,0px))}
.hero__title{font:700 min(11.5vh,9.5vw)/.9 var(--f-round);letter-spacing:-.025em;color:var(--espresso)}
.hero__title .w{padding:0 .02em}
.js .hero__title .w{opacity:0;transform:scale(.55) translateY(.15em)}
.js.ready .hero__title .w{animation:pop .95s var(--ease-pop) both;animation-delay:calc(var(--i,0)*110ms)}
@keyframes pop{0%{opacity:0;transform:scale(.55) translateY(.15em)}55%{opacity:1}100%{opacity:1;transform:none}}
.js .hero__fade{opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease) .35s,transform 1s var(--ease) .35s}
.js .hero__fade.kicker{transform:translateY(16px) rotate(-4deg);transition-delay:.05s}
.js.ready .hero__fade{opacity:1;transform:none}
.js.ready .hero__fade.kicker{transform:rotate(-4deg)}
.hero__lede{position:relative;max-width:34ch;margin:14px 0 0;text-align:center;text-wrap:balance;font:600 clamp(19px,1.7vw,26px)/1.35 var(--f-round);letter-spacing:-.005em;color:var(--text-2)}
.hero__ctas{position:relative;margin-top:auto;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:24px}
.cue{display:inline-flex;align-items:center;gap:12px;font:600 13px/1 var(--f-body);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--espresso)}
.cue__ring{display:grid;place-items:center;width:54px;height:54px;border:var(--line);border-radius:50%;transition:background-color .35s var(--ease),color .35s var(--ease)}
.cue__ring svg{width:22px;height:22px;animation:cueBob 2.6s var(--ease-io) infinite;animation-delay:-.8s}
.cue:hover .cue__ring{background:var(--espresso);color:var(--canvas)}
/* el botón queda sobre la ola café: "Baja" en crema para que se lea */
.hero__ctas .cue{color:var(--canvas)}
.hero__ctas .cue__ring{border-color:currentColor}
.hero__ctas .cue:hover .cue__ring{background:var(--canvas);color:var(--tostado)}
@keyframes cueBob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(4px)}}

/* Franjas sobre el video: grande a la izquierda, pequeño a la derecha */
.band--split{display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:13vh var(--pad) 8vh;opacity:0}
.band__l,.band__r{position:relative;isolation:isolate}
.band__l{justify-self:start;width:min(22vw,340px)}
.band__r{justify-self:end;width:min(22vw,320px)}
.band__l::before,.band__r::before{content:"";position:absolute;inset:-45% -55%;z-index:-1;pointer-events:none;opacity:calc(.25 + .75 * var(--k,1));background:radial-gradient(ellipse 58% 52% at 50% 50%,rgba(8,6,5,.68) 0%,rgba(8,6,5,.44) 46%,rgba(8,6,5,0) 76%)}
.band__big{font:400 clamp(44px,min(8.6vh,5.8vw),108px)/1.02 var(--f-big);text-transform:uppercase;letter-spacing:.005em;color:var(--milk);text-shadow:var(--tshadow);margin:0}
.band__big .w{padding-bottom:.06em;margin-bottom:-.06em}
.band__small{font-size:clamp(15px,1.2vw,19px);line-height:1.5;color:#f1e8dc;text-shadow:0 1px 3px rgba(5,5,10,.85);margin:0;padding:14px 18px;border-radius:16px;background:rgba(12,8,6,.6);border:1px solid rgba(246,238,223,.14);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.band__btns{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:22px}
.band__btns .btn{text-shadow:none}

[data-fx=drift] .w{--kc:clamp(0,(var(--k,0) - var(--th,0)) * 2.8,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc)) * -.5em))}
[data-fx=weave] .c{--kc:clamp(0,(var(--k,0) - var(--th,0)) * 2.6,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc)) * var(--jy,0em)))}
[data-fx=rise] .w{--kc:clamp(0,(var(--k,0) - var(--th,0)) * 3,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc)) * .6em))}
.band--split .band__small{--ks:clamp(0,(var(--k,0) - .3) * 2.2,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks)) * 12px))}
[data-fx=rise] .band__small{--ks:clamp(0,(var(--k,0) - .66) * 4,1)}
[data-fx=rise] .band__btns{--kb:clamp(0,(var(--k,0) - .78) * 5,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb)) * 14px))}

@media (max-height:560px){.cue{display:none}}
/* pantallas más cuadradas: el vaso ocupa más ancho, el texto se angosta */
@media (max-aspect-ratio:3/2){
  .band__big{font-size:clamp(40px,4.8vw,96px)}
  .band__l{width:min(19vw,300px)}
  .band__r{width:min(20vw,290px)}
}

/* ---------- Pantallas verticales (teléfonos y tabletas paradas): la misma ventana, apilada ---------- */
@media (max-aspect-ratio:4/5){
  /* con el dedo el recorrido se siente más largo que con la rueda: el video dura menos scroll
     (recorrido = alto - 100vh = 300vh, contra 520vh en computadora). Además, en celular el video
     avanza solo después del primer deslizamiento (ver Auto en app.js). */
  :root{--cover:30vh;--hero:400vh;--mr:120vh}
  .hero{height:calc(var(--hero) + var(--cover))}
  /* Manifiesto en celular: el mismo diseño de la computadora (frases fijas al centro, enfoque línea por línea),
     pero con recorrido corto. --mr es cuánto hay que deslizar para pasar todas las frases: menos = más rápido. */
  section.mani{height:calc(100vh + var(--mr))}
  .swipe-hint{display:inline-flex}
  .hero__stage{height:100vh;height:100lvh}
  .hero__window{clip-path:inset(40vh var(--pad) 16vh var(--pad) round 24px)}
  .hero__wave{height:15vh}
  .band--open{display:flex;flex-direction:column;align-items:center;padding:calc(64px + 2.5vh) var(--pad) 18px;padding:calc(64px + 2.5vh) var(--pad) calc(100lvh - 100svh + 18px)}
  .hero__head{position:relative;top:auto;left:auto;right:auto}
  .hero__title{font-size:min(17vw,8.4vh)}
  .band--open .hero__lede{position:relative;top:auto;left:auto;width:auto;max-width:30ch;margin:12px auto 0;text-align:center;font-size:17px;line-height:1.35}
  .hero__ctas{position:relative;top:auto;right:auto;margin-top:auto;flex-direction:column;align-items:center}
  .cue{display:none}
  .band--split{display:flex;flex-direction:column;justify-content:space-between;align-items:stretch;padding:calc(64px + 3.5vh) var(--pad) 22px;padding:calc(64px + 3.5vh) var(--pad) calc(100lvh - 100svh + 22px)}
  .hero__edge{display:block}
  .hero__video{display:none}
  .hero__seq{display:block}
  .video-failed .hero__seq{display:none}
  /* sobre el fondo oscuro no hacen falta desenfoques ni sombras pesadas: el celular trabaja menos */
  .band__big{text-shadow:0 2px 14px rgba(5,5,10,.6)}
  .band__small,.btn--light{-webkit-backdrop-filter:none;backdrop-filter:none}
  .band__small{background:rgba(12,8,6,.72)}
  .band--split::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:calc(.3 + .7 * var(--k,1));background:linear-gradient(to bottom,rgba(8,6,5,.55) 0%,rgba(8,6,5,0) 30%,rgba(8,6,5,0) 72%,rgba(8,6,5,.4) 100%)}
  .band__l,.band__r{width:auto;justify-self:auto}
  .band__l::before,.band__r::before{display:none}
  .band__r{align-self:flex-end;max-width:min(100%,440px)}
  .band__btns{gap:10px}
  .band__btns .btn{padding:0 16px;min-height:48px;font-size:15px}
  .band__big{font-size:clamp(40px,12.5vw,76px)}
  .band__small{font-size:15px}
  .band__btns{flex-direction:row;flex-wrap:wrap;align-items:center;margin-top:14px}
}

/* ---------- Portada fija: teléfonos acostados y movimiento reducido ---------- */
@media (orientation:landscape) and (pointer:coarse) and (max-height:560px),(prefers-reduced-motion:reduce){
  .hero{height:auto;padding:calc(92px + 3vh) var(--pad) 12vh}
  .hero__stage{position:relative;height:auto;overflow:visible;display:flex;flex-direction:column;align-items:center}
  .hero__wave{height:16vh;opacity:1;transform:none;bottom:-12vh}
  .band--split{display:none}
  .band--open{display:contents}
  .hero__head{position:static;transform:none;order:1}
  .hero__title{font-size:min(19vw,128px)}
  .hero__window{position:relative;order:2;inset:auto;width:100%;max-width:560px;aspect-ratio:4/5;clip-path:none!important;border-radius:24px;overflow:hidden;margin:5vh 0 4vh;box-shadow:0 30px 60px -30px rgba(58,33,22,.6);z-index:1}
  .hero__media{transform:none!important}
  .hero__poster{background-image:url('hero-ending.jpg')!important;background-position:50% 62%}
  .hero__poster--end,.hero__video,.hero__seq,.hero__scrim{display:none!important}
  .hero__lede{position:static;order:3;width:auto;max-width:34ch;text-align:center;font-size:17px}
  .hero__ctas{position:static;order:4;align-items:center;margin-top:24px;z-index:1}
  .cue{display:none}
  section.mani{margin-top:0}
  .swipe-hint{display:none!important}
}
@media (orientation:landscape) and (pointer:coarse) and (max-height:560px){
  .hero__window{aspect-ratio:16/10;max-width:620px}
  .hero__title{font-size:min(17vh,96px)}
}

/* =========================================================
   MANIFIESTO (mecánica de Le Pain)
   ========================================================= */
.mani{position:relative;z-index:2;height:350vh;margin-top:calc(-1 * var(--cover));background:var(--canvas)}
.mani__sticky{position:sticky;top:0;height:100vh;overflow:hidden}
.mani__col{position:absolute;left:0;right:0;top:0;text-align:center;will-change:transform}
.mani__line{position:relative;margin:0;font:400 min(15vh,13vw)/.98 var(--f-big);text-transform:uppercase;letter-spacing:.005em}
.mani__line .sharp{display:block;color:var(--espresso);opacity:var(--s,1)}
.mani__line .soft{position:absolute;left:0;right:0;top:0;color:#b9a48e;filter:blur(7px);opacity:calc((1 - var(--s,1)) * .9)}
.mani__cup{position:absolute;left:50%;bottom:-2vh;height:min(52vh,92vw);aspect-ratio:268/264;transform:translateX(-50%);transform-origin:50% 100%;will-change:transform}
.mani__cup svg{width:100%;height:100%}
.rays path{fill:none;stroke:var(--espresso);stroke-width:7;stroke-linecap:round;animation:rays 4.2s var(--ease-io) infinite;animation-delay:-1.4s}
.rays path:last-child{animation-delay:-3.5s}
@keyframes rays{0%,100%{opacity:.35}50%{opacity:1}}
.cube{transform-box:fill-box;transform-origin:50% 50%;animation:cube 5.4s var(--ease-io) infinite}
.cube--a{animation-delay:-1.2s}.cube--b{animation-delay:-3.1s}.cube--c{animation-delay:-4.4s}
@keyframes cube{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-4px) rotate(6deg)}}
.drops circle{animation:drop 4.8s var(--ease-io) infinite}
.drops circle:nth-child(2){animation-delay:-2s}.drops circle:nth-child(3){animation-delay:-3.4s}
@keyframes drop{0%,100%{opacity:.25}50%{opacity:.9}}

/* =========================================================
   MENÚ: carrusel de cafés (como Ciao Energy, a nuestra manera)
   Cada foto trae un fondo liso de su color; la sección toma ese color
   y el halo de cada foto se funde con él, así el vaso flota sin recorte.
   ========================================================= */
.menu{--menu-bg:#cbe3eb;--ink:#3a2116;--stage:clamp(500px,68vh,760px);--info:170px;--area:calc(var(--stage) - var(--info));--gap:clamp(250px,30vw,470px);position:relative;z-index:3;margin:80px 0;padding:6vh var(--pad) 8vh;background:var(--menu-bg);color:var(--ink);overflow-x:hidden;overflow-x:clip;transition:background-color .9s var(--ease),color .9s var(--ease)}
.wave--menu{color:var(--menu-bg);transition:color .9s var(--ease)}
.menu .kicker,.menu .title{color:var(--ink);transition:color .9s var(--ease)}
.menu .tag{border-color:currentColor}
.menu__head{text-align:center;margin:0 auto 1vh}
.menu__head .title{font-size:clamp(44px,5.2vw,78px)}
.menu__head .tag{margin-top:12px}

.menu__stage{position:relative;height:var(--stage);max-width:1400px;margin:0 auto;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.menu__count{position:absolute;left:0;top:2%;margin:0;font:600 13px/1 var(--f-body);letter-spacing:.2em}
.menu__count b{font:700 22px/1 var(--f-round);letter-spacing:0}
.coffees{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.coffee{position:absolute;inset:0;pointer-events:none}
/* la foto es más alta que el área: así el vaso (que ocupa el centro de la foto) llena el espacio */
.coffee__cup{position:absolute;left:50%;top:calc(var(--area) * -.31);height:calc(var(--area) * 1.45);aspect-ratio:825/1024;margin:0;pointer-events:none;
  transform:translateX(-50%) translateX(calc(var(--p,0) * var(--gap))) translateY(calc(var(--ap,0) * 6%)) scale(calc(1 - var(--ap,0) * .44)) rotate(var(--r,0deg));
  opacity:var(--o,1);transition:transform 1s var(--ease),opacity .7s var(--ease);will-change:transform}
.coffee.is-side .coffee__cup{pointer-events:auto;cursor:pointer;opacity:.82}
/* en los vecinos el halo de color se desvanece despacio, para que se lea como luz y no como un óvalo de fondo */
.coffee.is-side .coffee__cup img{-webkit-mask-image:radial-gradient(ellipse 44% 48% at 50% 56%,#000 42%,rgba(0,0,0,.6) 66%,transparent 92%);mask-image:radial-gradient(ellipse 44% 48% at 50% 56%,#000 42%,rgba(0,0,0,.6) 66%,transparent 92%)}
.coffee__float{width:100%;height:100%}
.coffee.is-active .coffee__float{animation:cupFloat 5.6s var(--ease-io) infinite;animation-delay:-1.4s}
@keyframes cupFloat{0%,100%{transform:translateY(-1.1%) rotate(-.7deg)}50%{transform:translateY(1.1%) rotate(.7deg)}}
.coffee__cup img{display:block;width:100%;height:100%;max-width:none;object-fit:contain;-webkit-user-drag:none;
  -webkit-mask-image:radial-gradient(ellipse 42% 47% at 50% 56%,#000 68%,transparent 100%);mask-image:radial-gradient(ellipse 42% 47% at 50% 56%,#000 68%,transparent 100%)}
.coffee__info{position:absolute;left:50%;bottom:0;width:min(100%,680px);height:var(--info);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;text-align:center;pointer-events:none}
.coffee__info>*{opacity:0;transform:translateY(16px);transition:opacity .45s var(--ease),transform .6s var(--ease)}
.coffee.is-active .coffee__info>*{opacity:1;transform:none;transition-delay:.22s}
.coffee.is-active .coffee__desc{transition-delay:.32s}
.coffee.is-active .coffee__price{transition-delay:.42s}
.coffee__name{font:400 clamp(40px,5vw,80px)/1 var(--f-big);text-transform:uppercase;letter-spacing:.01em;margin:0}
.coffee__desc{font-size:18px;line-height:1.45;max-width:40ch;margin:10px 0 8px}
.coffee__price{font:700 30px/1 var(--f-round);margin:0}

.menu__arrow{position:absolute;top:calc(var(--area) / 2);z-index:20;display:grid;place-items:center;width:56px;height:56px;margin-top:-28px;border:1.5px solid currentColor;border-radius:50%;background:transparent;color:inherit;cursor:pointer;transition:background-color .35s var(--ease),color .35s var(--ease),transform .5s var(--ease-pop)}
.menu__arrow svg{width:24px;height:24px}
.menu__arrow--prev{left:calc(50% - var(--gap) * .56 - 28px)}
.menu__arrow--next{left:calc(50% + var(--gap) * .56 - 28px)}
.menu__arrow:hover{background:var(--ink);color:var(--menu-bg)}
.menu__arrow:active{transform:scale(.92)}

.menu__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:10px}
.btn--ink{border-color:currentColor;color:inherit}
.btn--ink:hover{background:var(--ink);color:var(--menu-bg)}
.menu__tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:22px auto 0}
.menu__tab{min-height:44px;padding:0 18px;border:1.5px solid currentColor;border-radius:999px;background:transparent;color:inherit;font:600 14px/1 var(--f-body);cursor:pointer;transition:background-color .35s var(--ease),color .35s var(--ease)}
.menu__tab[aria-pressed=true]{background:var(--ink);color:var(--milk)}
.menu__extras{max-width:980px;margin:clamp(36px,6vh,64px) auto 0;padding-top:22px;border-top:1.5px solid currentColor;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:10px 28px}
.menu__extras-title{font:700 22px/1 var(--f-round);margin:0}
.menu__extras ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 24px;font-size:15.5px}
.menu__extras b{font-weight:600;white-space:nowrap}

/* sin JavaScript: los cuatro cafés en fila, sin carrusel */
.no-js .menu__stage{height:auto;display:block}
.no-js .coffees{position:static;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
.no-js .coffee{position:static;pointer-events:auto}
.no-js .coffee__cup{position:static;transform:none;height:auto;width:100%}
.no-js .coffee__info{position:static;transform:none;height:auto;width:auto}
.no-js .coffee__info>*{opacity:1;transform:none}
.no-js .menu__arrow,.no-js .menu__count,.no-js .menu__actions{display:none}

@media (max-width:720px){
  .menu{--stage:clamp(430px,64vh,580px);--info:165px;--gap:62vw}
  .menu__count{top:0}
  .coffee__name{font-size:clamp(34px,10vw,48px)}
  .coffee__desc{font-size:16px}
}
@media (pointer:coarse) and (max-width:900px){.menu__arrow{display:none}}
@keyframes spin{to{transform:rotate(360deg)}}

/* =========================================================
   SÍRVELO TÚ (momento interactivo)
   ========================================================= */
.pour{position:relative;padding:14vh var(--pad);background:var(--canvas-deep);--pv:0;--sv:0;--sl:0}
.pour__wrap{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:center}
.pour__art{display:grid;place-items:center}
.pour__svg{width:min(100%,460px);height:auto;max-height:78vh;overflow:visible}
.pour__stream{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(var(--sl));opacity:var(--sv)}
.pour__coffee{transform:translateY(calc((1 - var(--pv)) * 84px))}
.pour__swirl{stroke-dasharray:1 1;stroke-dashoffset:calc(1 - var(--pv));opacity:min(.85,calc(var(--pv) * 6))}
.pour__swirl--b{stroke-dashoffset:calc(1 - clamp(0,(var(--pv) - .3) * 1.45,1))}
.pour__lede{font-size:18px;color:var(--text-2);max-width:38ch;margin:18px 0 28px}
.hold{display:inline-flex;align-items:center;gap:14px;min-height:64px;padding:8px 28px 8px 10px;border:0;border-radius:999px;background:var(--espresso);color:var(--canvas);font:600 17px/1 var(--f-body);cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation;transition:transform .5s var(--ease),background-color .35s var(--ease)}
.hold:hover{background:#4b2c1d}
.hold.is-holding{transform:scale(.97)}
.hold__ring{position:relative;width:48px;height:48px;border-radius:50%;background:rgba(246,238,223,.1)}
.hold__ring::after{content:"";position:absolute;inset:-6px;border-radius:50%;box-shadow:0 0 0 2px rgba(226,167,100,.55),0 0 22px rgba(226,167,100,.45);opacity:0;animation:glow 4s var(--ease-io) infinite;animation-delay:-1s}
.pour.done .hold__ring::after,.pour.touched .hold__ring::after{animation:none;opacity:0}
@keyframes glow{0%,100%{opacity:0}50%{opacity:1}}
.hold__ring svg{width:48px;height:48px;transform:rotate(-90deg)}
.hold__track{fill:none;stroke:rgba(246,238,223,.22);stroke-width:4}
.hold__fill{fill:none;stroke:var(--crema);stroke-width:4;stroke-linecap:round;stroke-dasharray:126;stroke-dashoffset:calc(126 * (1 - var(--pv)))}
.pour__chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:28px 0 0;padding:0}
.pour__chips li{padding:10px 18px;border-radius:999px;border:var(--line);font:600 15px/1 var(--f-body);opacity:.32;transform:scale(.94);transition:opacity .6s var(--ease),transform .7s var(--ease-pop),background-color .6s var(--ease),color .6s var(--ease)}
.pour.done .pour__chips li{opacity:1;transform:none;background:var(--espresso);color:var(--canvas)}
.pour.done .pour__chips li:nth-child(2){transition-delay:.15s}
.pour.done .pour__chips li:nth-child(3){transition-delay:.3s}
.pour__done{opacity:0;transform:translateY(12px);visibility:hidden;transition:opacity .7s var(--ease) .45s,transform .8s var(--ease) .45s,visibility 0s linear 1.2s}
.pour.done .pour__done{opacity:1;transform:none;visibility:visible;transition:opacity .7s var(--ease) .45s,transform .8s var(--ease) .45s,visibility 0s}
.pour__msg{font:700 clamp(22px,2.2vw,30px)/1.2 var(--f-round);margin:26px 0 16px}
.pour__actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px}

/* =========================================================
   PALABRAS CON VIDEO (Le Pain)
   ========================================================= */
.words{position:relative;padding:16vh var(--pad) 3vh;display:flex;flex-direction:column;align-items:center}
.words__box{position:relative;width:min(100%,1200px)}
.words__canvas{width:100%;height:auto}
.words__loop{position:absolute;overflow:visible;pointer-events:none}
.words__loop path{fill:none;stroke:var(--crema);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1 1;stroke-dashoffset:var(--lp,1);opacity:calc((1 - var(--lp,1)) * 25)}
.words .btn{margin-top:clamp(28px,5vh,56px)}

/* =========================================================
   CÓMO PEDIR: el damero (Le Pain)
   ========================================================= */
.steps{position:relative;padding:7vh var(--pad) 14vh}
.grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;border:var(--line)}
.cell{min-height:min(48vh,440px);display:flex;flex-direction:column;justify-content:center;border-top:var(--line)}
.cell:nth-child(-n+2){border-top:0}
.cell:nth-child(odd){border-right:var(--line)}
.cell--txt{align-items:center;text-align:center;padding:clamp(28px,5vw,64px);background:var(--canvas)}
.cell--txt p:not(.kicker){max-width:36ch;color:var(--text-2);margin:16px 0 26px}
.cell__title{font:400 clamp(44px,5.2vw,76px)/.95 var(--f-big);text-transform:uppercase;letter-spacing:.005em}
.cell--art{align-items:center;padding:clamp(20px,3vw,40px);overflow:hidden}
.cell--ice{background:var(--ice)}
.cell--peach{background:var(--peach)}
.cell--latte{background:var(--canvas-deep)}
.art{width:min(100%,420px);height:auto;overflow:visible}
.art__bob{transform-box:fill-box;transform-origin:50% 100%;animation:bob 4.6s var(--ease-io) infinite;animation-delay:-1.5s}
.art__bob--slow{animation-duration:5.8s;animation-delay:-3s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-7px) rotate(1.5deg)}}
.art__check{stroke-dasharray:1 1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset 1s var(--ease) .6s,opacity .2s linear .6s}
.cell.in .art__check{stroke-dashoffset:0;opacity:1}
.bub{opacity:0;transform:translateY(10px);transform-box:fill-box;transition:opacity .6s var(--ease),transform .7s var(--ease-pop)}
.cell.in .bub{opacity:1;transform:none}
.cell.in .bub--2{transition-delay:.5s}.cell.in .bub--3{transition-delay:1s}.cell.in .bub--4{transition-delay:1.5s}
.dot{animation:typing 1.4s var(--ease-io) infinite}
.dot--2{animation-delay:-1.2s}.dot--3{animation-delay:-1s}
@keyframes typing{0%,60%,100%{opacity:.25}30%{opacity:1}}
.art__door{transform-box:fill-box;transform-origin:0 50%;transition:transform 1.2s var(--ease) .5s}
.cell.in .art__door{transform:scaleX(.74) skewY(-5deg)}
.js .cell.reveal{transform:none}

/* =========================================================
   HORARIO: tarjetas apiladas (Krem & Kanel)
   ========================================================= */
.hours{position:relative;padding:12vh var(--pad) 16vh}
.hours__wrap{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,80px);align-items:start}
.hours__side{position:sticky;top:110px}
.hours__zone{font-size:18px;color:var(--text-2);max-width:34ch;margin:24px 0 26px}
.hours__stack{list-style:none;margin:0;padding:0 0 4vh}
.day{position:sticky;top:calc(96px + var(--i) * 26px);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 24px;padding:clamp(26px,3.6vw,46px) clamp(24px,3.4vw,44px);margin-bottom:6vh;border-radius:var(--r);box-shadow:0 -14px 30px -24px rgba(58,33,22,.55)}
.day:last-child{margin-bottom:0}
.day--ice{background:var(--ice)}
.day--peach{background:var(--peach)}
.day__name{font:700 clamp(52px,7vw,110px)/.9 var(--f-round);letter-spacing:-.02em}
.day__time{font:600 clamp(15px,1.5vw,20px)/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase}
.zz{display:inline-flex;gap:2px;margin-left:6px;vertical-align:top}
.zz i{font-style:normal;font-weight:700;display:inline-block;animation:zz 3.6s var(--ease-io) infinite}
.zz i:last-child{animation-delay:-1.8s;font-size:.8em}
@keyframes zz{0%,100%{opacity:.2;transform:translateY(2px)}50%{opacity:1;transform:translateY(-5px)}}

/* =========================================================
   FRASE CON ESPIRAL (Krem & Kanel)
   ========================================================= */
.say{position:relative;background:var(--tostado);color:var(--peach);margin:80px 0}
.say__in{position:relative;overflow:hidden;padding:clamp(80px,16vh,170px) var(--pad);display:grid;place-items:center}
.say__swirl{position:absolute;left:50%;top:50%;width:max(130vw,130vh);height:max(130vw,130vh);max-width:none;margin:calc(max(130vw,130vh) / -2) 0 0 calc(max(130vw,130vh) / -2);color:#7a4a2d;animation:spin 90s linear infinite reverse}
.say__text{position:relative;max-width:16ch;text-align:center;font:700 clamp(40px,6.4vw,104px)/1.04 var(--f-round);letter-spacing:-.02em;margin:0}
.mini{display:inline-grid;place-items:center;width:1.05em;height:.9em;border-radius:.2em;vertical-align:-.1em;margin:0 .06em}
.mini--ice{background:var(--ice)}
.mini--peach{background:var(--peach);transform:rotate(4deg)}
.mini--ice{transform:rotate(-4deg)}
.mini svg{height:.74em;width:auto}

/* =========================================================
   PREGUNTAS
   ========================================================= */
.faq{position:relative;padding:12vh var(--pad)}
.faq__wrap{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,80px);align-items:start}
.faq__side{position:sticky;top:110px}
.faq__side .title{font-size:clamp(46px,6vw,92px)}
.faq__cup{width:110px;height:auto;margin-top:30px}
.q{border-top:var(--line)}
.q:last-child{border-bottom:var(--line)}
.q__btn{display:flex;width:100%;justify-content:space-between;align-items:center;gap:20px;padding:26px 4px;background:none;border:0;cursor:pointer;text-align:left;font:600 clamp(19px,1.8vw,24px)/1.25 var(--f-round);color:var(--espresso)}
.q__icon{position:relative;flex:none;width:36px;height:36px;border:var(--line);border-radius:50%;transition:transform .6s var(--ease),background-color .35s var(--ease)}
.q__icon::before,.q__icon::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin:-1px 0 0 -7px;background:currentColor;border-radius:2px}
.q__icon::after{transform:rotate(90deg)}
.q__btn[aria-expanded=true] .q__icon{transform:rotate(135deg);background:var(--peach)}
.q__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.q__a>div{overflow:hidden}
.q__a p{margin:0;padding:0 56px 26px 4px;color:var(--text-2);font-size:17px;opacity:0;transform:translateY(-6px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.q.open .q__a{grid-template-rows:1fr}
.q.open .q__a p{opacity:1;transform:none;transition-delay:.12s}

/* =========================================================
   ARMA TU PEDIDO
   ========================================================= */
.order{position:relative;padding:8vh var(--pad) 22vh}
.order__panel{max-width:1240px;margin:0 auto;background:var(--ice);border-radius:calc(var(--r) + 8px);padding:clamp(28px,5vw,72px)}
.order__head{text-align:center;max-width:760px;margin:0 auto clamp(30px,5vh,52px)}
.order__lede{font-size:18px;color:var(--text-2);margin:18px auto 0;max-width:42ch}
.order__form{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.group{border:0;margin:0 0 26px;padding:0;min-width:0}
.group legend{padding:0;margin:0 0 12px;font:600 13px/1 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--text-2)}
.pills{display:flex;flex-wrap:wrap;gap:10px}
.pill{position:relative;cursor:pointer}
.pill input{position:absolute;opacity:0;width:1px;height:1px}
.pill span{display:inline-flex;align-items:center;min-height:46px;padding:0 18px;border-radius:999px;border:var(--line);background:rgba(251,246,238,.6);font:600 15px/1 var(--f-body);transition:background-color .3s var(--ease),color .3s var(--ease),transform .45s var(--ease-pop)}
.pill:hover span{background:var(--milk)}
.pill input:checked+span{background:var(--espresso);color:var(--canvas);transform:scale(1.03)}
.pill input:focus-visible+span{outline:3px solid var(--accent);outline-offset:3px}
.order__row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:6px}
.qty{display:flex;align-items:center;gap:6px}
.qty__label{font:600 13px/1 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--text-2);margin-right:10px}
.qty__btn{width:46px;height:46px;border-radius:50%;border:var(--line);background:rgba(251,246,238,.6);font:600 22px/1 var(--f-body);cursor:pointer;transition:background-color .3s var(--ease),transform .4s var(--ease-pop)}
.qty__btn:hover{background:var(--milk)}
.qty__btn:active{transform:scale(.92)}
.qty__val{min-width:38px;text-align:center;font:700 26px/1 var(--f-round)}
.ticket{position:relative;background:var(--milk);border-radius:20px;padding:26px 24px 22px;box-shadow:0 26px 50px -34px rgba(58,33,22,.7)}
.ticket::before{content:"";position:absolute;left:18px;right:18px;top:-9px;height:18px;background:radial-gradient(circle at 9px 0,transparent 8px,var(--milk) 8.5px) 0 0/18px 18px repeat-x}
.ticket__title{font:700 28px/1 var(--f-round);margin:0 0 14px}
.ticket__list{list-style:none;margin:0;padding:0}
.ticket__list li{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:12px 0;border-top:1px dashed rgba(58,33,22,.3);font-size:15px;animation:tin .5s var(--ease) both}
@keyframes tin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.ticket__list b{font-weight:600}
.ticket__list small{display:block;color:var(--text-2);font-size:13.5px}
.ticket__rm{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid rgba(58,33,22,.35);background:none;cursor:pointer;font-size:18px;line-height:1;transition:background-color .3s var(--ease)}
.ticket__rm:hover{background:var(--peach)}
.ticket__empty{font-size:14.5px;color:var(--text-2);margin:0;padding:12px 0;border-top:1px dashed rgba(58,33,22,.3)}
.ticket.has-items .ticket__empty{display:none}
.ticket__total{display:flex;justify-content:space-between;align-items:baseline;margin:6px 0 18px;padding-top:14px;border-top:var(--line);font-weight:600}
.ticket__total b{font:700 26px/1 var(--f-round)}
.field{display:block;margin:0 0 16px}
.field span{display:block;font:600 13px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);margin-bottom:8px}
.field input{width:100%;min-height:48px;padding:0 16px;border-radius:14px;border:var(--line);background:#fff;font:400 16px/1 var(--f-body);color:var(--espresso)}
.field input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.ticket__send::after{content:"";position:absolute;inset:-4px;border-radius:inherit;box-shadow:0 0 0 2px rgba(122,79,208,.4),0 0 26px rgba(122,79,208,.45);opacity:0;animation:glow 4.4s var(--ease-io) infinite;animation-delay:-2s;pointer-events:none}
.ticket__note{font-size:13.5px;color:var(--text-2);text-align:center;margin:12px 0 0}
.ticket__ok{font:600 15px/1.4 var(--f-body);color:var(--accent);text-align:center;margin:10px 0 0;min-height:1.4em}

/* =========================================================
   PIE (Krem & Kanel con fotos tipo polaroid de Le Pain)
   ========================================================= */
.foot{position:relative;background:var(--espresso);color:var(--canvas);margin-top:80px}
.foot__in{max-width:1400px;margin:0 auto;padding:clamp(40px,8vh,90px) var(--pad) 30px}
.foot__mark{margin:0;line-height:.86;white-space:nowrap;text-align:center}
.foot__fit{display:inline-block;font:700 120px/.86 var(--f-round);letter-spacing:-.03em;padding-right:.04em}
.foot__fit b{color:#a586e6}
.foot__pics{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.4vw,34px);margin:clamp(30px,6vh,64px) auto clamp(36px,6vh,64px);max-width:1180px}
.polaroid{margin:0;padding:10px 10px 34px;background:var(--milk);border-radius:6px;transform:rotate(var(--r));box-shadow:0 22px 40px -22px rgba(0,0,0,.75);transition:transform .7s var(--ease-pop)}
.polaroid:hover{transform:rotate(0) translateY(-6px) scale(1.02)}
.polaroid img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:3px}
.foot__row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px 28px;padding-top:24px;border-top:1px solid rgba(246,238,223,.22);font-size:15px}
.foot__nav{display:flex;flex-wrap:wrap;gap:6px 22px}
.foot__nav a,.foot__wa{text-decoration:none;opacity:.9;transition:opacity .3s var(--ease)}
.foot__nav a:hover,.foot__wa:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
.foot__wa{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.foot__copy{margin:0;opacity:.75}

/* =========================================================
   Pantallas medianas y teléfonos
   ========================================================= */
@media (max-width:1100px){
  .hero__lede{font-size:18px}
}
@media (max-width:900px){
  .pour__wrap{grid-template-columns:1fr;text-align:center}
  .pour__txt{display:flex;flex-direction:column;align-items:center}
  .pour__chips,.pour__actions{justify-content:center}
  .pour__svg{width:min(70%,300px)}
  .grid{grid-template-columns:1fr}
  .cell{border-right:0!important;border-top:var(--line)!important;min-height:auto}
  .cell:first-child{border-top:0!important}
  .cell--art{padding:30px 20px}
  .cell:nth-child(3){order:4}
  .cell:nth-child(4){order:3}
  .cell:nth-child(5){order:5}
  .cell:nth-child(6){order:6}
  .hours__wrap,.faq__wrap{grid-template-columns:1fr}
  .hours__side,.faq__side{position:relative;top:auto}
  .day{margin-bottom:6vh;top:calc(84px + var(--i) * 18px)}
  .faq__cup{display:none}
  .order__form{grid-template-columns:1fr}
  .foot__pics{grid-template-columns:1fr 1fr 1fr;gap:10px}
  .polaroid{padding:6px 6px 18px}
}
@media (max-width:560px){
  body{font-size:16px}
  .foot__row{flex-direction:column;align-items:flex-start}
  .q__a p{padding-right:4px}
  .mani__line{font-size:min(13vh,15vw)}
}

/* =========================================================
   Movimiento reducido: todo en su estado final
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  .intro{display:none}
  .js .reveal,.js .pop-title .c,.js .hero__fade,.js .hero__title .w,.bub{opacity:1!important;transform:none!important}
  .js .hero__fade.kicker{transform:rotate(-4deg)!important}
  .art__check{stroke-dashoffset:0;opacity:1}
  .cell .art__door{transform:scaleX(.74) skewY(-5deg)}
  .mani{height:auto;margin-top:0;padding:14vh 0 0}
  .mani__sticky{position:relative;height:auto;overflow:visible}
  .mani__col{position:relative;transform:none!important}
  .mani__line .soft{display:none}
  .mani__line .sharp{opacity:1!important}
  .mani__cup{position:relative;left:auto;bottom:auto;margin:6vh auto 0;transform:none!important}
  .words__loop path{stroke-dashoffset:0!important}
  .day{position:relative;top:auto;margin-bottom:18px}
}

/* =========================================================
   MANIFIESTO EN CELULAR, ligado al scroll por el navegador (CSS scroll-driven animations).
   El movimiento de las frases y el enfoque corren en el compositor, no en JavaScript: siguen al dedo
   sin pasos intermedios. Navegadores sin soporte usan el respaldo en JavaScript (ver Mani en app.js).
   ========================================================= */
@keyframes maniCol{from{transform:translate3d(0,var(--y0),0)}to{transform:translate3d(0,var(--y1),0)}}
@keyframes maniCup{from{transform:translateX(-50%) scale(.96)}to{transform:translateX(-50%) scale(1.02)}}
@keyframes maniSharp{0%{opacity:0}33.8%{opacity:1}66.2%{opacity:1}100%{opacity:0}}
@keyframes maniSharpFirst{0%{opacity:1}32.4%{opacity:1}100%{opacity:0}}
@keyframes maniSharpLast{0%{opacity:0}67.6%{opacity:1}100%{opacity:1}}
@keyframes maniSoft{0%{opacity:.9}33.8%{opacity:0}66.2%{opacity:0}100%{opacity:.9}}
@keyframes maniSoftFirst{0%{opacity:0}32.4%{opacity:0}100%{opacity:.9}}
@keyframes maniSoftLast{0%{opacity:.9}67.6%{opacity:0}100%{opacity:0}}
@media (max-aspect-ratio:4/5) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: scroll()){
    .mani{--LH:calc(.98 * min(15vh, 13vw))}
    .mani__col{--y0:calc(24vh - var(--LH) / 2);--y1:calc(var(--y0) - 7 * var(--LH));
      animation:maniCol linear both;animation-timeline:scroll(root);animation-range:var(--hero) calc(var(--hero) + var(--mr))}
    .mani__cup{animation:maniCup linear both;animation-timeline:scroll(root);animation-range:var(--hero) calc(var(--hero) + var(--mr))}
    .mani__line:nth-child(1){--i:0}.mani__line:nth-child(2){--i:1}.mani__line:nth-child(3){--i:2}.mani__line:nth-child(4){--i:3}
    .mani__line:nth-child(5){--i:4}.mani__line:nth-child(6){--i:5}.mani__line:nth-child(7){--i:6}.mani__line:nth-child(8){--i:7}
    .mani__line .sharp{will-change:opacity;animation:maniSharp linear both;animation-timeline:scroll(root);
      animation-range:calc(var(--hero) + var(--mr) * (var(--i) / 7 - .2429)) calc(var(--hero) + var(--mr) * (var(--i) / 7 + .2429))}
    .mani__line .soft{will-change:opacity;animation:maniSoft linear both;animation-timeline:scroll(root);
      animation-range:calc(var(--hero) + var(--mr) * (var(--i) / 7 - .2429)) calc(var(--hero) + var(--mr) * (var(--i) / 7 + .2429))}
    .mani__line:first-child .sharp{animation-name:maniSharpFirst;animation-range:var(--hero) calc(var(--hero) + var(--mr) * .2429)}
    .mani__line:first-child .soft{animation-name:maniSoftFirst;animation-range:var(--hero) calc(var(--hero) + var(--mr) * .2429)}
    .mani__line:last-child .sharp{animation-name:maniSharpLast;animation-range:calc(var(--hero) + var(--mr) * .7571) calc(var(--hero) + var(--mr))}
    .mani__line:last-child .soft{animation-name:maniSoftLast;animation-range:calc(var(--hero) + var(--mr) * .7571) calc(var(--hero) + var(--mr))}
  }
}
@media (max-aspect-ratio:4/5) and (max-width:560px){
  @supports (animation-timeline: scroll()){ .mani{--LH:calc(.98 * min(13vh, 15vw))} }
}