/* ==========================================================================
   Valia. Base
   Reset, escala tipográfica, primitivas de layout y tokens de movimiento.
   Cada página define su propia paleta; aquí solo va lo que no cambia.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  /* Sin esto el navegador espera 300 ms por si es un doble toque. */
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(255,255,255,.09);
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,blockquote,ol,ul{margin:0}
/* Cualquier lista que se dibuje su propio marcador con ::before debe perder
   el nativo. Antes esto solo cubría ol[class]/ul[class] y se coló la viñeta
   doble dos veces, así que ahora se apunta a los contenedores. */
ol[class],ul[class]{list-style:none;padding:0}
:where(.pick,.vcol,.steps,.rejects) :is(ol,ul){list-style:none;padding:0}

:root{
  /* Escala tipográfica: razón 1.25, fluida entre 380px y 1280px */
  --t--1: clamp(.78rem, .76rem + .1vw, .84rem);
  --t-0 : clamp(1rem, .97rem + .14vw, 1.075rem);
  --t-1 : clamp(1.16rem, 1.1rem + .28vw, 1.35rem);
  --t-2 : clamp(1.38rem, 1.24rem + .6vw, 1.85rem);
  --t-3 : clamp(1.68rem, 1.4rem + 1.2vw, 2.6rem);
  --t-4 : clamp(2.1rem, 1.55rem + 2.3vw, 3.7rem);
  --t-5 : clamp(2.7rem, 1.5rem + 5vw, 5.6rem);

  /* Ritmo vertical: múltiplos de 4 */
  --s-1:.25rem; --s-2:.5rem;  --s-3:.75rem; --s-4:1rem;
  --s-5:1.5rem; --s-6:2rem;   --s-7:3rem;   --s-8:4rem;
  --s-9:6rem;   --s-10:8rem;

  --pad: clamp(1.25rem, 5vw, 4rem);
  --measure: 64ch;

  /* Curvas: las nativas de CSS son demasiado flojas */
  --ease-out: cubic-bezier(.23,1,.32,1);
  --ease-in-out: cubic-bezier(.77,0,.175,1);
  --dur-fast: 140ms;
  --dur: 200ms;
  --dur-slow: 320ms;

  --radius: 3px;
}

body{
  font-size:var(--t-0);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* --- Layout ------------------------------------------------------------ */
.wrap{
  width:100%;max-width:1240px;margin-inline:auto;
  /* max() con el safe-area: en iPhone apaisado el contenido no se mete
     debajo de la muesca ni del indicador de inicio. */
  padding-left:max(var(--pad), env(safe-area-inset-left));
  padding-right:max(var(--pad), env(safe-area-inset-right));
}

/* Cualquier destino de ancla se detiene por debajo de la barra pegajosa,
   y lo mismo vale para el elemento que recibe el foco con el teclado. */
:where([id]){scroll-margin-top:calc(var(--sticky-h,0px) + var(--s-5))}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
.wrap--narrow{max-width:860px}
.stack > * + *{margin-top:var(--flow,var(--s-4))}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* --- Tipografía -------------------------------------------------------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:var(--t--1);
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1.4;
}
.measure{max-width:var(--measure)}
h1,h2,h3{text-wrap:balance;line-height:1.06}
p{text-wrap:pretty}

/* --- Accesibilidad ----------------------------------------------------- */
:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid currentColor;
  outline-offset:3px;
  border-radius:2px;
}
.skip{
  position:absolute;left:var(--s-4);top:var(--s-4);z-index:100;
  transform:translateY(-200%);
  padding:.6rem 1rem;border-radius:var(--radius);
  transition:transform var(--dur) var(--ease-out);
}
.skip:focus{transform:translateY(0)}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* --- Media ------------------------------------------------------------- */
.frame{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  background:var(--frame-bg,transparent);
}
.frame img{width:100%;height:100%;object-fit:cover}
.frame--contain img{object-fit:contain}

/* --- Entrada en escena -------------------------------------------------
   El contenido se renderiza visible. .reveal solo AÑADE un desplazamiento
   corto cuando JS confirma que hay soporte, así una página sin JS o con un
   observer que no dispara nunca queda en blanco.                         */
.js .reveal{opacity:0;transform:translateY(10px)}
.js .reveal.is-in{
  opacity:1;transform:none;
  transition:opacity 420ms var(--ease-out),transform 420ms var(--ease-out);
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .js .reveal{opacity:1;transform:none}
}