/* Generado a partir de la vista previa; todo va dentro de .pnh--guaguas para no chocar con el CSS del sitio. */
/* Layout: una guagua que nace mientras bajas (masa → forma → horno → glaseado), luego la mesa, el remojo y el pedido. */
/* Base compartida: aísla el hero de los estilos del tema y del CSS adicional. */
.wp-site-blocks > .pnh{margin-block:0}
/* El CSS adicional pone overflow-x:hidden en html y body, y eso rompe position:sticky
   (las escenas se van con el scroll y quedan pantallas vacías). "clip" también evita el
   scroll horizontal pero no rompe sticky. Solo aplica en la página donde está el hero. */
html:has(.pnh),html:has(.pnh) body{overflow-x:visible !important;overflow-x:clip !important}
.pnh{position:relative;isolation:isolate}
.pnh--dentro{width:100vw;max-width:none !important;margin-inline:calc(50% - 50vw) !important}
.pnh h1,.pnh h2{color:inherit;letter-spacing:normal}
.pnh a.cta,.pnh a.cta:hover,.pnh a.cta:visited{color:#370617;text-decoration:none}
.pnh-admin-badge{position:fixed;left:12px;bottom:12px;z-index:9999;font:500 12px/1.3 system-ui,sans-serif;letter-spacing:.04em;background:rgba(22,3,2,.88);color:#ebe9d0;border:1px solid rgba(251,86,7,.7);padding:8px 12px;border-radius:999px;pointer-events:none}
.pnh--guaguas{
  --wine:#2a0504;
  --night:#160302;
  --ember:#fb5607;       /* naranja de marca */
  --cream:#ebe9d0;
  --steel:#5b5f63;       /* mesón de acero del video de amasado */
  --dough:#f3e6c8;
  --crust:#c8702a;
  --gingham:#d7263d;     /* mantel de la foto de Pani Nostri */
  --i-blue:#35b6e8; --i-yellow:#ffd23f; --i-teal:#2ec4b6; --i-orange:#ff8c42; --i-navy:#3d348b; --i-pink:#ff6fa3;
  --muted:rgba(235,233,208,.66);
  --display:'Gloock','Prata',Georgia,serif;
  --body:'Jost','Futura','Century Gothic',system-ui,sans-serif;
  --gold:#dc9136;        /* dorado vibrante del pan recién horneado */
  /* Medidas compartidas de la guagua, la vela del horno y el horno. */
  --gh:min(84svh,760px);                          /* alto de la guagua */
  --gw:calc(var(--gh) * .5357);                   /* ancho de la guagua */
  --gx:calc(100% - max(4vw,16px) - var(--gw));    /* borde izquierdo de la guagua */
  --ch:24svh; --cw:calc(var(--ch) * .4);          /* vela pequeña, junto a la guagua */
  /* Horno de barro al fondo, a la izquierda de la guagua (su boca queda a la vista). */
  --ow:calc(var(--gh) * .78); --oh:calc(var(--ow) * .75);
  --ox:calc(var(--gx) - var(--ow) * .62); --oy:calc(50% + var(--gh) / 2 - 6svh - var(--oh));
  color-scheme:dark;
}
.pnh--guaguas *{box-sizing:border-box}
.pnh--guaguas{background:var(--night);color:var(--cream);font-family:var(--body);font-size:16px;line-height:1.6;overflow-x:clip}
.pnh--guaguas h1,.pnh--guaguas h2{font-family:var(--display);font-weight:400;margin:0;line-height:1.02;text-wrap:balance}
.pnh--guaguas p{margin:0}
.pnh--guaguas .eyebrow{font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--ember);font-weight:500}
.pnh--guaguas section{position:relative}
.pnh--guaguas .stage{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden}
/* 100lvh: el escenario mide lo que la pantalla con la barra del navegador escondida, así nunca
   queda una franja vacía abajo (pasaba con 100svh), y no cambia de alto al hacer scroll
   (con 100dvh temblaba en el iPhone). --barra es lo que tapa la barra cuando está visible:
   los textos y botones de abajo suben esa distancia para no quedar debajo de ella. */
.pnh--guaguas{--barra:calc(100lvh - 100svh)}
/* Transiciones: cada escena empieza encima de los últimos 200svh de la anterior.
   La anterior se queda quieta mientras la nueva aparece (--in de 0 a 1): un fundido
   limpio, sin pantallas vacías entre escenas. */
.pnh--guaguas .intro ~ section{margin-top:-200svh}
.pnh--guaguas .intro ~ section > .stage{opacity:var(--in,1)}
/* ---------- 0 · APERTURA ---------- */
.pnh--guaguas .intro{height:270svh;--p:0}
.pnh--guaguas .intro .stage{display:grid;place-items:center;background:radial-gradient(110% 80% at 50% 25%,#4a0f06 0%,var(--wine) 50%,var(--night) 100%)}
.pnh--guaguas .intro .copy{display:grid;justify-items:center;gap:18px;text-align:center;padding-inline:16px;
  opacity:calc(1 - var(--p) * 1.2);transform:translateY(calc(var(--p) * -50px)) scale(calc(1 - var(--p) * .07))}
.pnh--guaguas .logo{width:clamp(120px,18vw,168px);height:auto;filter:drop-shadow(0 18px 40px rgba(0,0,0,.55))}
.pnh--guaguas .intro h1{font-size:clamp(52px,10vw,120px);letter-spacing:-.01em}
.pnh--guaguas .intro p{color:var(--muted);font-size:18px;max-width:40rem}
.pnh--guaguas .confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.5}
.pnh--guaguas .intro .stage::after{content:"";position:absolute;inset:0;background:#070100;pointer-events:none;
  opacity:calc(clamp(0,(var(--p) - .5) * 3,1) * .94)}   /* al irse el título, se apaga la luz */
.pnh--guaguas .cue{position:absolute;bottom:calc(22px + env(safe-area-inset-bottom,0px) + var(--barra,0px));left:50%;transform:translateX(-50%);font-size:12px;font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:rgba(235,233,208,.9);text-shadow:0 0 14px rgba(255,190,110,.35);display:grid;justify-items:center;gap:8px;opacity:calc(1 - var(--p) * 4)}
.pnh--guaguas .cue i{width:1.5px;height:44px;background:linear-gradient(var(--cream),transparent);box-shadow:0 0 8px rgba(255,190,110,.45);animation:pnh-drip 1.8s ease-in-out infinite}
@keyframes pnh-drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* ---------- 0b · LA VELA ---------- */
/* ---------- La vela que enciende el horno (escena 03) ---------- */
.pnh--guaguas .candela{position:absolute;aspect-ratio:120/300;z-index:3}
.pnh--guaguas .candela svg{position:relative;display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 14px 30px rgba(0,0,0,.5))}
.pnh--guaguas .candela .halo{position:absolute;left:50%;top:13%;width:640%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(255,206,120,.42) 0,rgba(255,150,50,.16) 30%,rgba(255,120,30,0) 62%);animation:pnh-halo 3.2s ease-in-out infinite}
.pnh--guaguas .llama-on{transform-box:fill-box;transform-origin:50% 100%}
.pnh--guaguas .llama{transform-box:fill-box;transform-origin:50% 92%;animation:pnh-llama 1.9s ease-in-out infinite}
@keyframes pnh-llama{0%,100%{transform:scale(1,1) skewX(0)}22%{transform:scale(.95,1.06) skewX(2.5deg)}48%{transform:scale(1.04,.96) skewX(-2deg)}74%{transform:scale(.98,1.04) skewX(1deg)}}
@keyframes pnh-halo{0%,100%{opacity:1}40%{opacity:.86}70%{opacity:.95}}
/* ---------- 1 · NACE UNA GUAGUA ---------- */
.pnh--guaguas .build{height:1060svh;--p:0;--shape:0;--bake:0;--ice:0;--dive:0;--arc:0;--fire:0;--fuego:0;--glow:0;--horno:0}
.pnh--guaguas .bg{position:absolute;inset:0}
.pnh--guaguas .bg.steel{background:radial-gradient(90% 70% at 60% 45%,#6d7175,#3b3e41 70%,#26282a)}
.pnh--guaguas .bg.steel::after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 2px,transparent 2px 7px)}
.pnh--guaguas .bg.oven{background:radial-gradient(70% 60% at 62% 55%,#ffb35a 0%,#ff6a1a 30%,#7a1d06 62%,#240502 100%);opacity:calc(clamp(0,var(--bake) * 2.2,1) - clamp(0,(var(--ice) - .05) * 3,1))}
.pnh--guaguas .bg.velvet{background:radial-gradient(60% 55% at 62% 50%,#4a1208 0%,var(--wine) 45%,var(--night) 100%);opacity:clamp(0,(var(--ice) - .02) * 3,1)}
/* Escena 03: la vela entra por la esquina, cruza hacia el fondo y enciende el horno.
   Se posiciona por la llama (left/top = punto de la llama) y se achica al alejarse. */
.pnh--guaguas .build .candela{left:calc((1 - var(--dive)) * -8svh + var(--dive) * (var(--ox) + var(--ow) * .43));
  top:calc((1 - var(--dive)) * (100% + 6svh) + var(--dive) * (var(--oy) + var(--oh) * .74) - var(--arc) * 16svh);
  height:calc(var(--ch) * (1 - var(--dive) * .6));translate:-50% -13%;z-index:1;
  /* al acercarse a la boca se inclina hacia ella, como quien enciende con una vela; gira sobre la llama */
  transform-origin:50% 13%;rotate:calc(var(--inclina,0) * 44deg);
  opacity:calc(clamp(0,var(--dive) * 30,1) - clamp(0,(var(--fire) - .3) * 2.5,1))}
.pnh--guaguas .build .halo{opacity:.9;scale:.7}
.pnh--guaguas .build .llama-on{rotate:calc(var(--inclina,0) * -30deg)}   /* la llama sigue apuntando casi hacia arriba */
.pnh--guaguas .bg.frio{background:radial-gradient(70% 60% at 55% 58%,rgba(80,120,180,.42),rgba(22,38,66,.4) 65%,rgba(10,18,34,.35));opacity:calc(var(--horno) * (1 - var(--fire)))}
.pnh--guaguas .horno{position:absolute;left:var(--ox);top:var(--oy);width:var(--ow);height:var(--oh);opacity:var(--horno)}
.pnh--guaguas .horno svg{position:relative;display:block;width:100%;height:100%;overflow:visible;
  filter:brightness(calc(.42 + var(--fire) * .58)) saturate(calc(.35 + var(--fire) * .65)) blur(calc(.4px + (1 - var(--fire)) * .6px))}
.pnh--guaguas .horno .boca{opacity:var(--fire)}
.pnh--guaguas .horno .brillo{position:absolute;left:50%;top:75%;width:190%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(255,176,70,.5) 0,rgba(255,110,20,.2) 30%,rgba(255,90,10,0) 62%);opacity:var(--fuego)}
.pnh--guaguas .lengua{transform-box:fill-box;transform-origin:50% 100%;animation:pnh-lengua var(--d,1.3s) ease-in-out var(--t,0s) infinite}
@keyframes pnh-lengua{0%,100%{transform:scale(1,1)}30%{transform:scale(.92,1.18)}60%{transform:scale(1.06,.86)}}
/* Chispas que salen de la boca del horno. */
.pnh--guaguas #pnh-embers{position:absolute;left:25%;width:50%;bottom:20%;height:150%;pointer-events:none;opacity:var(--fuego);
  -webkit-mask-image:radial-gradient(50% 60% at 50% 90%,#000 30%,transparent);mask-image:radial-gradient(50% 60% at 50% 90%,#000 30%,transparent)}
.pnh--guaguas #pnh-flour{position:absolute;inset:0;width:100%;height:100%;opacity:calc(1 - var(--shape))}
.pnh--guaguas .guagua{position:absolute;right:max(4vw,16px);top:50%;height:var(--gh);aspect-ratio:300/560;max-width:60vw;translate:0 -50%;
  transform:rotate(calc(var(--done, 0) * -6deg)) scale(calc(1 + var(--done, 0) * .04));
  filter:drop-shadow(0 0 calc(var(--glow) * 60px) rgba(255,176,64,.6)) saturate(calc(1 + var(--glow) * .2))}
.pnh--guaguas .guagua .body{transform-box:fill-box;transform-origin:50% 100%;
  transform:scale(calc(.95 + var(--shape) * .05),calc(.54 + var(--shape) * .46))}
.pnh--guaguas .guagua .head{transform-box:fill-box;transform-origin:50% 100%;
  transform:translateY(calc((1 - var(--shape)) * 120px)) scale(clamp(0,calc(var(--shape) * 1.4 - .3),1))}
.pnh--guaguas .dough-fill{fill:color-mix(in oklab,var(--gold) calc(var(--bake) * 100%),var(--dough))}
.pnh--guaguas .dough-edge{fill:color-mix(in oklab,#a5510f calc(var(--bake) * 100%),#dccaa2)}
.pnh--guaguas .gloss{opacity:calc(var(--bake) * .8)}
.pnh--guaguas .pores{opacity:calc(var(--bake) * .5)}
.pnh--guaguas .crease{opacity:clamp(0,calc(var(--shape) * 2 - 1),1)}
.pnh--guaguas .ice{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.pnh--guaguas .ice-dot{transform-box:fill-box;transform-origin:center;scale:0}
.pnh--guaguas .shadow{opacity:.45}
.pnh--guaguas .captions{position:absolute;left:max(6vw,16px);top:50%;translate:0 -50%;width:min(40rem,48vw);display:grid}
.pnh--guaguas .cap{grid-area:1/1;display:grid;gap:14px;align-content:center;opacity:var(--a,0);transform:translateY(calc((1 - var(--a,0)) * 26px))}
/* Número de paso: cifra en la tipografía de los títulos, un filete fino y el nombre en versalitas, todo en blanco cálido. */
.pnh--guaguas .cap .num{display:flex;align-items:center;font-family:var(--body);font-size:12px;font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,250,240,.9);text-shadow:0 0 14px rgba(255,236,200,.25)}
.pnh--guaguas .cap .num b{display:flex;align-items:center;font-family:var(--display);font-size:24px;font-weight:400;letter-spacing:.02em;color:#fffaf0}
.pnh--guaguas .cap .num b::after{content:"";width:40px;height:1px;margin:0 16px 0 14px;background:linear-gradient(90deg,rgba(255,250,240,.75),rgba(255,250,240,.12))}
.pnh--guaguas .cap h2{font-size:clamp(46px,7.2vw,104px);letter-spacing:-.015em}
.pnh--guaguas .cap p{color:var(--muted);font-size:18px;max-width:28rem}
/* Escena 5: la primera frase se desvanece hacia arriba y emerge la segunda desde abajo, en el mismo lugar. */
.pnh--guaguas .relevo{display:grid}
.pnh--guaguas .relevo h2{grid-area:1/1}
.pnh--guaguas .relevo .uno{opacity:calc(1 - var(--r1,0));transform:translateY(calc(var(--r1,0) * -22px));filter:blur(calc(var(--r1,0) * 6px))}
.pnh--guaguas .relevo .dos{opacity:var(--r2,0);transform:translateY(calc((1 - var(--r2,0)) * 26px));filter:blur(calc((1 - var(--r2,0)) * 6px))}
/* "Al horno, hasta quedar dorada": el título se dora con el horno, de crema a oro encendido. */
.pnh--guaguas .cap h2.dorada{
  background:linear-gradient(100deg,var(--cream) 0%,var(--cream) 30%,#ffe7a0 42%,#ffb627 52%,#ff7a1a 60%,#ffc23d 70%,#ffd66b 85%,#ffc85a 100%);
  background-size:320% 100%;background-position:calc(var(--bake) * 100%) 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 calc(var(--fire) * 10px + var(--bake) * 18px) rgba(255,140,30,.55))}
.pnh--guaguas .meter{font-variant-numeric:tabular-nums;font-family:var(--display);font-size:clamp(28px,3.4vw,40px);color:color-mix(in oklab,#ffc23d calc(var(--bake) * 100%),var(--cream))}
.pnh--guaguas .meter small{font-family:var(--body);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-left:8px}
.pnh--guaguas .rail{position:absolute;left:max(6vw,16px);bottom:calc(28px + env(safe-area-inset-bottom,0px) + var(--barra,0px));display:flex;gap:18px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:rgba(235,233,208,.4)}
.pnh--guaguas .rail span[aria-current="true"]{color:var(--cream)}
.pnh--guaguas .rail span::before{content:"";display:inline-block;width:22px;height:1px;background:currentColor;vertical-align:middle;margin-right:8px}
/* ---------- 2 · LA MESA ---------- */
.pnh--guaguas .table{height:390svh;--p:0;--copia:0}
.pnh--guaguas .table .stage{background:#f6f1e7}
.pnh--guaguas .cloth{position:absolute;inset:-20%;
  background:
   repeating-linear-gradient(0deg,rgba(215,38,61,.55) 0 34px,transparent 34px 68px),
   repeating-linear-gradient(90deg,rgba(215,38,61,.55) 0 34px,transparent 34px 68px),#fbf7ef;
  transform:rotate(-8deg) translateX(calc((1 - clamp(0,var(--p) * 4,1)) * 30%));clip-path:polygon(38% 0,100% 0,100% 100%,62% 100%)}
.pnh--guaguas .spread{position:absolute;inset:0}
.pnh--guaguas .mug{position:absolute;left:8%;top:12%;width:min(30vw,300px);max-width:40%;transform:translateY(calc((1 - clamp(0,var(--p) * 4 - .6,1)) * -60vh)) rotate(-6deg)}
.pnh--guaguas .plate{position:absolute;left:57%;top:50%;width:min(58vw,560px);max-width:92%;translate:-50% -50%;transform:rotate(calc(-14deg + var(--p) * 10deg)) scale(clamp(.85,calc(.85 + var(--p) * .6),1))}
/* Guaguas del plato: la del centro reemplaza a la que baja del horno; las de los lados llegan después, de dos en dos. */
.pnh--guaguas .pg{--l:var(--l0,0);transform-box:fill-box;transform-origin:50% 100%;opacity:var(--l);scale:calc(.86 + var(--l) * .14);translate:0 calc((1 - var(--l)) * -18px)}
.pnh--guaguas .pg.k1{--l:var(--l1,0)}
.pnh--guaguas .pg.pc{--l:var(--posa,0);scale:1;translate:none}
/* La guagua lista baja del sitio donde terminó la receta al centro del plato, achicándose poco a poco. */
.pnh--guaguas .table .guagua.viaje{--shape:1;--bake:1;--ice:1;--done:1;--b:var(--baja,0);
  --sx:calc(100% - max(4vw,16px) - var(--gw) / 2);--sy:50%;--sh:var(--gh);
  --pw:min(58vw,560px);--ex:calc(57% - var(--pw) * .0123);--ey:calc(50% - var(--pw) * .0655);--eh:calc(var(--pw) * .4167);
  --glow:calc(.25 * (1 - var(--b)));
  right:auto;max-width:none;translate:-50% -50%;
  left:calc(var(--sx) + (var(--ex) - var(--sx)) * var(--b));
  top:calc(var(--sy) + (var(--ey) - var(--sy)) * var(--b));
  height:calc(var(--sh) + (var(--eh) - var(--sh)) * var(--b));
  transform:rotate(calc(-6deg - var(--b) * 4.6deg)) scale(calc(1.04 - var(--b) * .04));
  opacity:calc(1 - var(--posa,0))}
.pnh--guaguas .table .guagua.viaje .shadow{opacity:calc(.45 * (1 - var(--b)))}
.pnh--guaguas .table .copy{position:absolute;left:max(6vw,16px);bottom:calc(8svh + env(safe-area-inset-bottom,0px) + var(--barra,0px));max-width:min(30rem,calc(100% - 32px));
  background:var(--wine);color:var(--cream);padding:24px 26px;display:grid;gap:10px;
  opacity:var(--copia);transform:translateY(calc((1 - var(--copia)) * 30px))}
.pnh--guaguas .table .copy h2{font-size:clamp(32px,4.4vw,54px)}
.pnh--guaguas .table .copy p{color:var(--muted)}
/* ---------- 3 · EL REMOJO (1,6 pantallas) ---------- */
.pnh--guaguas .dip{height:360svh;--p:0}
.pnh--guaguas .dip .stage{background:radial-gradient(80% 70% at 50% 60%,#3b0a05,var(--night) 75%);display:grid;place-items:center;padding-top:76px}   /* el texto nunca queda bajo la cabecera del sitio */
/* La taza se apoya sobre lo que se ve (sube lo que tapa la barra del navegador) y la guagua se moja según dónde
   quede la superficie: --taza es el ancho de la taza y --dw el de la guagua (su alto es 2,5 veces el ancho).
   Baja hasta hundir un 38 % de su alto en la colada. En teléfonos (--sube:1) luego sube hasta que su base roza la
   superficie; en computadoras se queda dentro, para que no asome por arriba mientras aparece el cierre, y flota
   suave arriba y abajo (--ola, ±5 % de su ancho) hasta que el cierre la cubre. */
.pnh--guaguas .cup{position:absolute;left:68%;bottom:calc(-4% + var(--barra,0px));width:var(--taza);translate:-50% 0}
.pnh--guaguas .dunk{position:absolute;left:68%;top:0;width:var(--dw);translate:-50% 0;
  transform:translateY(calc(var(--dw) * -1 + clamp(0,var(--p) * 1.6,1) * (104vh - var(--barra,0px) - var(--taza) * .426 - var(--dw) * .55) - clamp(0,var(--p) * 2.4 - 1.5,1) * var(--dw) * .95 * var(--sube,0) - clamp(0,var(--p) * 5 - 3,1) * var(--ola,0) * var(--dw) * .05 * (1 - var(--sube,0)))) rotate(calc(8deg - var(--p) * 8deg));
  transform:translateY(calc(var(--dw) * -1 + clamp(0,var(--p) * 1.6,1) * (104lvh - var(--barra,0px) - var(--taza) * .426 - var(--dw) * .55) - clamp(0,var(--p) * 2.4 - 1.5,1) * var(--dw) * .95 * var(--sube,0) - clamp(0,var(--p) * 5 - 3,1) * var(--ola,0) * var(--dw) * .05 * (1 - var(--sube,0)))) rotate(calc(8deg - var(--p) * 8deg))}
@property --ola{syntax:'<number>';inherits:false;initial-value:0}
.pnh--guaguas .dip.flota .dunk{animation:pnh-ola 3.2s ease-in-out infinite}   /* solo corre mientras la colada está en pantalla */
@keyframes pnh-ola{0%,100%{--ola:-1}50%{--ola:1}}
.pnh--guaguas .ripple{transform-box:fill-box;transform-origin:center;opacity:clamp(0,calc(1 - max(var(--p) * 2.6 - 1.6, 1.6 - var(--p) * 2.6) * 2),1);scale:calc(.6 + var(--p) * .6)}
.pnh--guaguas .dip .copy{position:relative;z-index:3;justify-self:start;margin-left:max(6vw,16px);max-width:min(46rem,calc(62vw - var(--taza) / 2 - 24px));display:grid;gap:12px;padding-inline:16px;
  opacity:clamp(0,calc(var(--p) * 5 - .3),1)}
.pnh--guaguas .dip h2{font-size:clamp(40px,5vw,72px)}   /* el título cabe en tres líneas al lado de la taza */
/* Botón de pedido sobre el frente de la taza (el mismo del cierre); llega después del texto. --taza es el ancho de la taza. */
.pnh--guaguas .dip{--taza:min(52vw,560px);--dw:min(22vw,200px)}
.pnh--guaguas .dip .cta{position:absolute;z-index:4;left:68%;translate:-50% 0;margin:0;white-space:nowrap;overflow:hidden;
  bottom:calc(var(--taza) * .07 + var(--barra,0px));opacity:clamp(0,calc(var(--p) * 5 - .8),1);
  /* aura: brillo naranja pegado al botón y un halo morado como la colada */
  box-shadow:0 0 18px rgba(251,86,7,.5),0 0 46px 6px rgba(176,69,122,.55);
  animation:pnh-latido 2.6s ease-in-out infinite}
/* Latido sutil: dos pulsos cortos y una pausa. */
@keyframes pnh-latido{0%,42%,100%{scale:1}10%{scale:1.045}20%{scale:1}30%{scale:1.03}}
/* Brillo que cruza el botón de borde a borde. */
.pnh--guaguas .dip .cta::after{content:"";position:absolute;inset:-20% auto -20% 0;width:38%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,244,214,.6),rgba(255,255,255,0));
  translate:-130% 0;skew:-18deg;animation:pnh-brillo 2.6s ease-in-out infinite}
@keyframes pnh-brillo{0%,45%{translate:-130% 0}75%,100%{translate:300% 0}}
.pnh--guaguas .dip p{color:var(--muted);font-size:18px}
/* ---------- 5 · PEDIDO ---------- */
.pnh--guaguas .order{height:260svh;--p:0}
.pnh--guaguas .order .stage{display:grid;place-items:center;padding-top:76px;background:radial-gradient(90% 70% at 50% 40%,#3a0d05,var(--night) 70%)}   /* centrado bajo la cabecera del sitio */
.pnh--guaguas .order .wrap{max-width:52rem;margin-inline:auto;padding-inline:16px;display:grid;gap:16px;justify-items:center;text-align:center}
.pnh--guaguas .order h2{font-size:clamp(38px,6vw,72px)}
.pnh--guaguas .order .lead{color:var(--muted);font-size:18px}
/* Igual que la escena final de tiempo ordinario: el texto aparece línea a línea,
   los pasos se encienden uno tras otro y el botón se ilumina. */
.pnh--guaguas .order .line{--i:0;opacity:clamp(0,calc(var(--p) * 5 - var(--i) * .6 - .2),1);transform:translateY(calc((1 - clamp(0,calc(var(--p) * 5 - var(--i) * .6 - .2),1)) * 24px))}
.pnh--guaguas .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;margin-top:10px}
.pnh--guaguas .step{--s:0;border:1px solid rgba(235,233,208,.14);padding:18px 12px;display:grid;gap:6px;justify-items:center;
  background:color-mix(in oklab,var(--ember) calc(clamp(0,var(--p) * 3.4 - var(--s) * .5 - .6,1) * 18%),transparent);
  border-color:color-mix(in oklab,var(--ember) calc(clamp(0,var(--p) * 3.4 - var(--s) * .5 - .6,1) * 100%),rgba(235,233,208,.14))}
.pnh--guaguas .step b{font-family:var(--display);font-weight:400;font-size:22px}
.pnh--guaguas .step small{color:var(--muted);font-size:13px;line-height:1.35}
.pnh--guaguas .step svg{width:34px;height:34px}
.pnh--guaguas .cta{display:inline-flex;align-items:center;gap:12px;margin-top:14px;padding:18px 34px;background:var(--ember);color:#370617;text-decoration:none;text-transform:uppercase;letter-spacing:.2em;font-size:13px;font-weight:600;box-shadow:0 0 calc(var(--p) * 40px) rgba(251,86,7,.55)}
.pnh--guaguas .cta:hover{background:#ff6a1a}
.pnh--guaguas .cta:focus-visible{outline:2px solid var(--cream);outline-offset:4px}
/* Teléfonos y tablets en vertical (iPad, iPad Pro) usan la composición apilada: guagua arriba, texto abajo. */
@media (max-width:720px), (orientation:portrait) and (max-width:1100px){
.pnh--guaguas{--gh:52svh;--gx:calc(50% - var(--gw) / 2);--ch:15svh;
  --ow:52vw;--ox:calc(13% - var(--ow) * .5);--oy:calc(12svh + var(--gh) - 8svh - var(--oh))}
.pnh--guaguas .guagua{right:50%;translate:50% 0;top:12svh;max-width:70vw}
.pnh--guaguas .captions{left:16px;right:16px;width:auto;top:auto;bottom:calc(8svh + env(safe-area-inset-bottom,0px) + var(--barra,0px));translate:0}
.pnh--guaguas .cap{background:rgba(22,3,2,.72);padding:16px 18px}
.pnh--guaguas .cap h2{font-size:clamp(38px,11vw,56px)}
.pnh--guaguas .cap p{font-size:15px}
.pnh--guaguas .rail{display:none}
.pnh--guaguas .mug{width:36vw;top:8%}
.pnh--guaguas .plate{width:92vw;left:50%;top:46%}
.pnh--guaguas .table .guagua.viaje{--sx:50%;--sy:calc(12svh + var(--gh) / 2);--pw:92vw;--ex:calc(50% - var(--pw) * .0123);--ey:calc(46% - var(--pw) * .0655)}
.pnh--guaguas .table .copy{bottom:calc(4svh + env(safe-area-inset-bottom,0px) + var(--barra,0px))}
.pnh--guaguas .dunk,.pnh--guaguas .cup{left:50%}
.pnh--guaguas .dip{--taza:84vw;--dw:36vw;--sube:1}
.pnh--guaguas .dip .cta{left:50%;bottom:calc(var(--taza) * .09 + env(safe-area-inset-bottom,0px) + var(--barra,0px))}
.pnh--guaguas .dip .stage{padding-top:0}
.pnh--guaguas .dip .copy{justify-self:center;margin-left:0;max-width:34rem;align-self:start;margin-top:max(14svh,110px);text-align:center;justify-items:center}
.pnh--guaguas .dip .copy{background:rgba(22,3,2,.72);padding:16px 18px;margin-inline:16px}   /* como los textos de la receta: se lee aunque la guagua pase detrás */
.pnh--guaguas .steps{grid-template-columns:1fr}

}
@media (prefers-reduced-motion:reduce){
.pnh--guaguas .intro,.pnh--guaguas .build,.pnh--guaguas .table,.pnh--guaguas .dip,.pnh--guaguas .order{height:auto}
.pnh--guaguas .intro ~ section{margin-top:0}
.pnh--guaguas .intro ~ section > .stage{opacity:1}
.pnh--guaguas .llama,.pnh--guaguas .halo,.pnh--guaguas .lengua{animation:none}
.pnh--guaguas .build .candela,.pnh--guaguas .horno,.pnh--guaguas .bg.frio{display:none}
.pnh--guaguas .order,.pnh--guaguas .dip{--p:1}
.pnh--guaguas .dip .cta,.pnh--guaguas .dip .cta::after,.pnh--guaguas .dip .dunk{animation:none}
.pnh--guaguas .stage{position:relative;height:auto;min-height:100svh}
.pnh--guaguas .cue i{animation:none}
.pnh--guaguas .captions{position:relative;left:auto;top:auto;translate:none;width:auto;padding:110px 16px 40px;gap:40px}
.pnh--guaguas .cap{grid-area:auto;opacity:1;transform:none}
.pnh--guaguas .relevo{gap:24px}
.pnh--guaguas .relevo h2{grid-area:auto;opacity:1;transform:none;filter:none}
.pnh--guaguas .guagua{position:relative;right:auto;top:auto;translate:none;display:block;margin:0 auto 60px;height:70svh}
.pnh--guaguas .rail{display:none}
.pnh--guaguas .table .guagua.viaje{display:none}
.pnh--guaguas .pg{opacity:1;scale:1;translate:none}

}

/* ---------- cursor: una lucecita de vela que acompaña al puntero ---------- */
.pnh-cursor{position:fixed;left:0;top:0;width:180px;height:180px;margin:-90px 0 0 -90px;border-radius:50%;pointer-events:none;z-index:9990;
  background:radial-gradient(circle,rgba(255,214,150,.13) 0,rgba(255,170,80,.05) 30%,rgba(255,140,40,0) 62%);mix-blend-mode:screen;
  opacity:0;transition:opacity .4s ease;will-change:translate;animation:pnh-titila 3s ease-in-out infinite}
.pnh-cursor.on{opacity:1}
.pnh-cursor::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:rgba(255,238,200,.85);box-shadow:0 0 6px 2px rgba(255,190,90,.35)}
/* Estela sutil: unas chispitas que siguen al puntero y se apagan. */
.pnh-estela{position:fixed;left:0;top:0;width:var(--t,6px);height:var(--t,6px);margin:calc(var(--t,6px) / -2) 0 0 calc(var(--t,6px) / -2);border-radius:50%;pointer-events:none;z-index:9989;
  background:#ffd89a;box-shadow:0 0 8px 2px rgba(255,170,70,.55);mix-blend-mode:screen;opacity:0;transition:opacity .4s ease}
.pnh-estela.on{opacity:var(--o,.4)}
@keyframes pnh-titila{0%,100%{scale:1}30%{scale:.94}55%{scale:1.05}80%{scale:.98}}

/* Deja sitio al header fijo del sitio arriba y a "Desliza" abajo, para que no se encime con el texto. */
.pnh--guaguas .intro .stage{padding-top:72px;padding-bottom:calc(88px + var(--barra,0px))}
/* En pantallas bajas (laptops con la barra del navegador) el logo se achica un poco para que todo quepa. */
@media (max-height:760px){.pnh--guaguas .logo{width:clamp(96px,15svh,168px)}}

/* "Omitir y abrir la tienda": discreto y siempre a mano, para que nadie se sienta obligado a ver toda la historia.
   Fijo en la esquina; guaguas.js lo muestra (.ver) mientras el hero llena la pantalla y lo oculta en el pedido. */
.pnh--guaguas a.omitir,.pnh--guaguas a.omitir:hover,.pnh--guaguas a.omitir:visited{color:rgba(235,233,208,.82);text-decoration:none}
.pnh--guaguas .omitir{position:fixed;z-index:20;right:max(4vw,16px);bottom:calc(24px + env(safe-area-inset-bottom,0px) + var(--barra,0px));
  font:500 12px/1 var(--body);letter-spacing:.06em;padding:9px 14px;border-radius:999px;
  background:rgba(22,3,2,.55);border:1px solid rgba(235,233,208,.22);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s ease,visibility 0s .4s,border-color .2s ease}
.pnh--guaguas .omitir.ver{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .4s ease,visibility 0s,border-color .2s ease}
.pnh--guaguas .omitir:hover{border-color:rgba(235,233,208,.5);color:var(--cream)}
.pnh--guaguas .omitir:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
/* Teléfonos en vertical: arriba a la derecha, justo debajo de la cabecera, donde no tapa los textos de abajo. */
@media (max-width:720px) and (orientation:portrait){
.pnh--guaguas .omitir{bottom:auto;top:calc(var(--cabecera,76px) + 8px);right:12px;padding:8px 12px;font-size:11.5px}
}
@media (orientation:landscape) and (max-height:500px){
.pnh--guaguas .omitir{bottom:calc(8px + env(safe-area-inset-bottom,0px));padding:7px 12px}
}
@media (prefers-reduced-motion:reduce){.pnh--guaguas .omitir{transition:none}}

/* Mientras está la edición Guaguas, se oculta el hero anterior del inicio (bloque Portada .hero-pan). */
body:has(.pnh--guaguas) .hero-pan{display:none !important}

/* Tablets en vertical: los tres pasos del pedido caben en una fila. */
@media (orientation:portrait) and (min-width:721px) and (max-width:1100px){
.pnh--guaguas .steps{grid-template-columns:repeat(3,minmax(0,1fr))}
.pnh--guaguas .cap h2{font-size:clamp(46px,7vw,72px)}
.pnh--guaguas .captions{left:6vw;right:6vw}
.pnh--guaguas .plate{width:74vw;top:48%}
.pnh--guaguas .table .guagua.viaje{--pw:74vw;--ey:calc(48% - var(--pw) * .0655)}
.pnh--guaguas .mug{width:26vw;top:6%;left:5%}
.pnh--guaguas .dip{--taza:64vw;--dw:24vw}
}

/* Teléfonos en vertical. --cabecera es el alto de la barra del sitio (logo, carrito, menú),
   que queda fija encima del hero: nada importante debe quedar debajo de ella. */
@media (max-width:720px) and (orientation:portrait){
.pnh--guaguas{--cabecera:76px}
.pnh--guaguas .steps{gap:8px;margin-top:4px}
/* Pedido: debajo de la cabecera y con los pasos en fila (icono a la izquierda), para que el botón quepa entero. */
.pnh--guaguas .order .stage{padding:calc(var(--cabecera) + 2svh) 0 calc(3svh + env(safe-area-inset-bottom,0px) + var(--barra,0px));box-sizing:border-box}
.pnh--guaguas .order .wrap{gap:12px;padding-inline:20px}
.pnh--guaguas .order h2{font-size:clamp(32px,9vw,44px)}
.pnh--guaguas .order .lead{font-size:15px}
.pnh--guaguas .step{grid-template-columns:34px 1fr;column-gap:14px;row-gap:0;justify-items:start;align-items:center;text-align:left;padding:12px 16px}
.pnh--guaguas .step svg{grid-row:span 2;width:30px;height:30px}
.pnh--guaguas .step b{font-size:20px;line-height:1.1}
.pnh--guaguas .cta{margin-top:8px;padding:16px 28px}
}

/* Teléfonos en horizontal: poca altura, así que todo se compacta para que nada quede cortado. */
@media (orientation:landscape) and (max-height:500px){
.pnh--guaguas .logo{width:64px}
.pnh--guaguas .intro .stage{padding-top:56px;padding-bottom:40px}
.pnh--guaguas .intro h1{font-size:clamp(34px,7vw,52px)}
.pnh--guaguas .intro p{font-size:14px}
.pnh--guaguas .cue{bottom:8px}
.pnh--guaguas .captions{top:calc(50% + 18px)}
.pnh--guaguas .cap{gap:8px}
.pnh--guaguas .cap h2{font-size:clamp(28px,4.8vw,42px)}
.pnh--guaguas .cap p{font-size:14px}
.pnh--guaguas .rail{display:none}
.pnh--guaguas .table .copy{max-width:34%;padding:14px 16px;bottom:12px}
.pnh--guaguas .plate{width:min(80svh,56vw);left:64%}
.pnh--guaguas .table .guagua.viaje{--pw:min(80svh,56vw);--ex:calc(64% - var(--pw) * .0123)}
.pnh--guaguas .mug{width:min(18vw,32svh);top:4%;left:4%}
.pnh--guaguas .dip .copy{max-width:46%}
.pnh--guaguas .dip .stage{padding-top:44px}
.pnh--guaguas .dip{--taza:min(34vw,300px);--dw:min(12vw,110px)}
.pnh--guaguas .dip .cta{bottom:10px}
.pnh--guaguas .table .copy h2{font-size:clamp(22px,3.4vw,30px)}
.pnh--guaguas .table .copy p{font-size:13px}
.pnh--guaguas .dip h2{font-size:clamp(28px,4.8vw,42px)}
.pnh--guaguas .dip p{font-size:14px}
.pnh--guaguas .order .stage{padding-top:44px;padding-bottom:8px}
.pnh--guaguas .steps{margin-top:2px;gap:8px}
.pnh--guaguas .step small{font-size:11px}
.pnh--guaguas .order h2{font-size:clamp(26px,4.4vw,38px)}
.pnh--guaguas .order .lead{font-size:14px}
.pnh--guaguas .step{padding:8px 10px;gap:2px}
.pnh--guaguas .step svg{width:24px;height:24px}
.pnh--guaguas .step b{font-size:17px}
.pnh--guaguas .cta{padding:12px 26px;margin-top:6px}
}