/* Gespok v3 · se carga después de estilo.css.
   Lo que cambia (según la investigación de octubre 2026):
   - Fondo blanco en vez de crema; gris frío para las secciones alternas.
   - Un solo momento con movimiento propio: la boleta que se imprime al bajar. El resto casi quieto.
   - Nada de etiquetas sobre los títulos, rebotes ni la misma entrada en cada sección.
   - Letra de máquina solo para números (boleta, precios). */

:root{--crema:#FFFFFF; --vainilla:#F2F1EF; --linea:#E4E0DD; --noche:#17110F}
body{background:#fff}
.top{background:var(--noche)}
.ease-out{transition-timing-function:cubic-bezier(.16,1,.3,1)}

/* portada con los pasos a la izquierda y la impresora fija a la derecha */
.v3-portada{--fm:"JetBrains Mono",ui-monospace,Consolas,monospace; background:var(--noche); color:#E4D6DA}
.v3-par{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.82fr); gap:clamp(32px,5vw,80px); align-items:start}
.v3-intro{min-height:calc(100vh - 66px); display:flex; flex-direction:column; justify-content:center; padding:40px 0 60px}
.v3-intro h1{font-size:clamp(2.5rem,5vw,4.3rem); font-weight:800; letter-spacing:-.04em; line-height:.96; color:#fff; max-width:11em}
.v3-intro .lead{margin-top:26px; max-width:31em; font-size:clamp(1.06rem,1.4vw,1.2rem); line-height:1.6; color:#CDBCC2}
.v3-intro .btn{background:#E8567A; border-color:#E8567A; color:var(--noche); border-radius:10px}
.v3-intro .btn:hover{background:#F0738F; border-color:#F0738F}
.v3-intro .lnk{color:#fff}
.v3-dato{margin-top:28px; font-size:.95rem; color:#A8969C}
.v3-paso{min-height:88vh; padding:12vh 0; display:flex; flex-direction:column; justify-content:center; opacity:.72; transition:opacity .6s cubic-bezier(.16,1,.3,1)}
.v3-paso.activo{opacity:1}
.v3-paso h2{font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.02; letter-spacing:-.035em; color:#fff; max-width:14em}
.v3-paso > p{margin-top:18px; max-width:32em; color:#CDBCC2; font-size:1.06rem}
.v3-paso figure,.v3-dos figure{margin:0}
.v3-paso .ventana{margin-top:30px; background:#000; border-radius:14px; box-shadow:0 30px 60px -30px #000}
.v3-paso .anot-t{color:#FF8FA8}
.v3-paso .pie-cap{color:#8E7E84; margin-top:10px; font-size:.88rem}
.v3-fijos{list-style:none; margin:28px 0 0; padding:0; max-width:26em; font-family:var(--fm); font-size:.95rem}
.v3-fijos li{display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px dashed #4A3A40; color:#E4D6DA}
/* la impresora queda fija mientras pasan los pasos */
.v3-imp{position:sticky; top:96px; padding:40px 0 60px}
.v3-imp .boleta{transform:none; animation:none}
.v3-bol .li{max-height:0; opacity:0; overflow:hidden; transition:max-height .8s cubic-bezier(.16,1,.3,1), opacity .5s}
.v3-bol .li.v{max-height:160px; opacity:1}
.v3-bol .v3-suma{font-weight:700; padding:2px 0 6px}
.v3-imp .sello{animation:none; opacity:0; transform:rotate(-12deg) scale(1.5); transition:opacity .25s, transform .45s cubic-bezier(.16,1,.3,1)}
.v3-imp.listo .sello{opacity:1; transform:rotate(-12deg) scale(1)}
.v3-imp .luz{animation:none; opacity:.35}
.v3-imp.imprimiendo .luz{opacity:1}
.v3-tira{display:none}

/* contraste «a ojo» y lo que sale además de la receta */
.problemas{background:#fff}
.v3-mas{padding:var(--sec) 0; background:var(--vainilla)}
.v3-mas h2{font-size:clamp(2rem,4.2vw,3.2rem); max-width:16em; margin-bottom:clamp(32px,4vw,56px)}
.v3-dos{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,64px); align-items:start}
.v3-dos h3{font-size:1.5rem; margin:26px 0 10px}
.v3-dos p{color:var(--tinta-2); max-width:32em}
.v3-dos .ventana{border-radius:14px}

/* sin rebotes: el sello del resto de la página entra suave */
.sello{animation-timing-function:cubic-bezier(.16,1,.3,1)}

@media(max-width:900px){
  .v3-par{grid-template-columns:1fr; gap:0}
  .v3-intro{min-height:auto; padding:48px 0 24px}
  .v3-paso{min-height:auto; padding:56px 0; opacity:1}
  .v3-imp{position:static; padding:12px 0 72px}
  .v3-imp .li{max-height:none; opacity:1}
  .v3-imp .sello{opacity:1; transform:rotate(-12deg)}
  .v3-tira{display:flex; position:sticky; bottom:12px; z-index:5; justify-content:space-between; align-items:center; gap:12px; margin:0 -4px; padding:12px 16px; background:#FBF8F3; color:var(--noche); border-radius:10px; box-shadow:0 14px 30px -10px rgba(0,0,0,.6); font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.9rem}
  .v3-tira b{font-size:1.1rem}
  .v3-dos{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .v3-paso{opacity:1; transition:none}
  .v3-bol .li{max-height:none; opacity:1; transition:none}
  .v3-imp .sello{opacity:1; transform:rotate(-12deg); transition:none}
}
p,li{text-wrap:pretty}
.cap-p{max-width:70ch}
.v3-paso .pie-cap{color:#C9B9BE}
.pasteleros .wrap > p{max-width:36em}
.cap-p{max-width:64ch}