/* Base compartida de las seis páginas: reseteo, tiempos de movimiento y entradas.
   Cada página define sus propios colores y tipografías en :root. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, video, svg, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;
  --t-open: 1200ms;
}

:focus-visible { outline: 3px solid var(--foco, currentColor); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--accent-ink); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salto { position: absolute; left: -9999px; top: 12px; z-index: 50; padding: 12px 16px; background: var(--ink); color: var(--bg); }
.salto:focus { left: 12px; }

/* Títulos en líneas que suben desde su propia máscara */
.lineas .l { display: block; overflow: clip; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.lineas .l > span { display: block; }

@media (prefers-reduced-motion: no-preference) {
  /* Entradas por sección: título, texto, imagen, detalles (el orden lo pone base.js) */
  .js [data-r] { opacity: 0; transform: translateY(24px); transition: opacity 450ms var(--ease-out), transform 700ms var(--ease-expo); transition-delay: calc(var(--i, 0) * 60ms); }
  .js .dentro [data-r] { opacity: 1; transform: none; }
  .js [data-fila] { opacity: 0; transform: translateY(16px); transition: opacity 450ms var(--ease-out), transform 600ms var(--ease-expo); transition-delay: calc(var(--i, 0) * 40ms); }
  .js .dentro [data-fila] { opacity: 1; transform: none; }
  .js [data-abre] { clip-path: inset(0 0 100% 0); transition: clip-path 800ms var(--ease-in-out); transition-delay: calc(var(--i, 0) * 80ms); }
  .js [data-abre] img, .js [data-abre] video { transform: scale(1.1); transition: transform 1200ms var(--ease-soft); }
  .js .dentro [data-abre] { clip-path: inset(0); }
  .js .dentro [data-abre] img, .js .dentro [data-abre] video { transform: none; }
  .js .lineas .l > span { transform: translateY(105%); transition: transform 900ms var(--ease-expo); transition-delay: calc(100ms + var(--i, 0) * 110ms); }
  .js .dentro .lineas .l > span, .js .lineas.dentro .l > span { transform: none; }
}