/* Base · fondo, tipografía, transiciones de pantalla y entradas escalonadas (DISENO §8.2, §9)
   Viene del prototipo (app/prototipo/index.html); la referencia de diseño es app/DISENO.md. */
html{background:var(--bg)}
body{font:400 17px/1.47 var(--fs);letter-spacing:-.012em;background:transparent;color:var(--fg);min-height:100svh}
button{color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:8px}

/* ---------- Fondos (shaders del motor) ---------- */
.fondo{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:0;transition:opacity 1.2s var(--ease);pointer-events:none}
.fondo.on{opacity:1}
.fondo-oscuro-css{position:fixed;inset:0;z-index:0;background:#000;opacity:0;transition:opacity .9s var(--ease);pointer-events:none}
.fondo-oscuro-css.on{opacity:1}
::view-transition-old(root){animation:vt-sale .28s var(--ease-io) both}
::view-transition-new(root){animation:vt-entra .7s var(--ease) both}
@keyframes vt-sale{to{opacity:0;transform:translateY(-10px);filter:blur(6px)}}
@keyframes vt-entra{from{opacity:0;transform:translateY(14px);filter:blur(8px)}}

/* Entradas propias (no usar data-rv/data-split en vistas dinámicas: DISENO §9.6) */
.ent{opacity:0;transform:translate3d(0,16px,0);filter:blur(8px);transition:opacity .9s var(--ease) calc(var(--i,0)*60ms + 80ms),transform .9s var(--ease) calc(var(--i,0)*60ms + 80ms),filter .9s var(--ease) calc(var(--i,0)*60ms + 80ms)}
.ent.dentro{opacity:1;transform:none;filter:none}
.pw{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .12em .1em;margin:0 -.12em -.1em}
.pw>span{display:inline-block;transform:translate3d(0,112%,0);transition:transform 1.05s var(--ease) calc(var(--i,0)*70ms + 120ms)}
.dentro .pw>span,.pw.dentro>span{transform:none}

/* ---------- Tipografía ---------- */
.eb{font:600 12px/1.3 var(--fs);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.display{font:600 clamp(44px,7.2vw,96px)/1.0 var(--fs);letter-spacing:-.045em;text-wrap:balance}
.titulo{font:600 clamp(32px,3.8vw,48px)/1.06 var(--fs);letter-spacing:-.035em;text-wrap:balance}
.serif{font-family:var(--fserif);font-style:italic;font-weight:400;letter-spacing:-.01em;font-size:1.05em}
.ti,.ti .pw>span{background:var(--ti);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.ti .pw>span{animation:cepillado 9s var(--ease-io) infinite alternate}
@keyframes cepillado{to{background-position:100% 0}}
.bajada{font-size:clamp(17px,1.5vw,21px);line-height:1.45;color:var(--fg-2);max-width:34em;text-wrap:pretty}
.saltar{position:fixed;left:16px;top:-80px;z-index:200;padding:12px 18px;border-radius:999px;background:var(--fg);color:var(--bg);font:600 14px/1 var(--fs);transition:top .3s var(--ease)}
.saltar:focus{top:calc(var(--sat) + 12px)}
#app{position:relative;z-index:1;min-height:100svh}
.pantalla{position:relative;min-height:100svh}
@media (prefers-reduced-motion:reduce){
  .ent,.pw>span{transition:opacity .15s linear!important;transform:none!important;filter:none!important}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.15s}
  *{scroll-behavior:auto!important}
}