/* ════════════════════════════════════════════════════════════════════════════
   EL BLOG — sistema visual

   NO SE INVENTA NADA. Los colores, las dos tipografías y el botón salen de
   `web/styles.css`, que es lo que ya sirve el dominio. Un blog que no se parece
   a su portada se lee como algo pegado de otro sitio.

   LAS TRES REGLAS DE IDENTIDAD, sacadas de medir la hoja de la web:

   1. TITULARES en `--sans` (Plus Jakarta Sans) a peso 800, `-0.025em`.
      NO en Jost. La web lo declara en `h1, h2, h3` y lo cumple en las 57
      apariciones de titular. Jost es la letra de la INTERFAZ —etiquetas,
      botones, cifras—, nunca la de un titular.
   2. ETIQUETAS en `--ui` (Jost) a peso 500, 11 px, `0.18em`, en mayúsculas.
      Es el patrón de `.eyebrow` de la web, y aquí lo usan el sello de sección,
      el índice y la meta del artículo.
   3. BOTÓN: `.btn` y `.btn--solid` copiados tal cual, con su relleno que sube
      desde abajo al pasar por encima. El marcado necesita el `<span>` dentro,
      porque el relleno va en un `::before` con `z-index: -1`.

   Y LO QUE NO EXISTE EN LA WEB NO ENTRA AQUI: no hay monoespaciada en ninguna
   parte de `web/styles.css`, así que este blog tampoco tiene. Tampoco hay
   dorado. Se probaron los dos y se quitaron.

   ── LO QUE MANDA EN LA MAQUETA, con el dato delante ──────────────────────

   · Se lee entre el 20 % y el 28 % de las palabras, y el patrón dominante es
     saltar de titular a titular sin tocar los párrafos (NN/g). O sea que los
     SUBTITULOS son el contenido principal para la mayoría.
   · Poner subtítulos frente a texto plano subió el tiempo leído un 20 % en la
     prueba del NZZ: de 51 s a más de 60.
   · Los gráficos de datos suben la profundidad de scroll un 19 %.
   · Los primeros 150 palabras deciden el 70 % de que alguien siga bajando. De
     ahí la caja `.clave` arriba del todo, que además es lo que un buscador
     puede extraer y citar.

   ── LA REGLA DE LA ANIMACION, que es de dinero ───────────────────────────

   El INP es el Core Web Vital que más se falla (43 % de los sitios), y lo que
   lo rompe es animar desde JavaScript, porque ocupa el hilo principal justo
   cuando alguien toca la pantalla. Aquí NO hay una sola animación en JS: todo
   va con `animation-timeline`, que corre en el compositor. Una migración
   medida de JS a CSS bajó el INP 120 ms con la misma animación en pantalla.

   Y NADA arranca en `opacity: 0`. Las revelaciones van de 0,3 a 1: si el
   navegador no soporta la línea de tiempo, o si alguien pide menos
   movimiento, el texto ya está ahí.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  /* Los mismos de `web/styles.css`. Si allí cambian, aquí también. */
  --bg: #05070a;
  --bg-2: #090d12;
  --bg-3: #0d1218;
  --accent: #4fcfde;
  --accent-soft: rgba(79, 207, 222, 0.13);
  --accent-line: rgba(79, 207, 222, 0.34);
  --on-accent: #032027;
  --text: #f1f6f7;
  --muted: #97a3ab;
  --muted-dim: #65717a;
  --line: rgba(255, 255, 255, 0.075);
  --line-strong: rgba(255, 255, 255, 0.15);

  --ui: 'Jost', system-ui, sans-serif;
  --sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  --gutter: clamp(20px, 5vw, 80px);
  --medida: 65ch;   /* el ancho de línea, y no se toca sin medirlo */
}

/* Los grises suben en pantalla pequeña por la misma razón medida que en la
   portada: `--muted-dim` se queda en 4,03:1 sobre el fondo, por debajo del
   mínimo legible. */
@media (max-width: 780px) {
  :root { --muted: #b9c3c9; --muted-dim: #8b959d; }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { background: var(--bg); -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* La web va a 16 px con interlínea 1,55, que es lo correcto para una landing
   que se escanea. Un artículo de mil palabras se LEE, y esa es la única
   diferencia deliberada de este sistema: 19 px y 1,72. La letra es la misma. */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 19px;
  line-height: 1.72;
  overflow-x: hidden;
}

::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* ── titulares ────────────────────────────────────────────────────────────────
   Copiado de `web/styles.css`: `--sans` a 800 con `-0.025em`. Lo único que se
   abre es la interlínea, y con motivo: la web usa 0,98 en titulares de una
   línea, y aquí un `h2` es una frase entera que parte en dos o tres. */
h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.04;
  text-wrap: balance;
}

/* ── etiquetas ────────────────────────────────────────────────────────────────
   El patrón `.eyebrow` de la web, con su misma medida. Todo lo que en este
   blog es una etiqueta pasa por aquí y no se redefine por su cuenta. */
.eyebrow {
  font-family: var(--ui);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── el botón, copiado tal cual de la web ────────────────────────────────────
   Incluido el `::before` que sube desde abajo. El marcado tiene que llevar el
   texto dentro de un `<span>`: el relleno va en un pseudoelemento con
   `z-index: -1` y sin el span el texto queda por debajo.

   Y va con `.cierre .btn` para GANARLE a `.cuerpo a`. Esa es la razón por la
   que el botón salió vacío la primera vez: `.cuerpo a` puntúa (0,1,1) y una
   clase suelta puntúa (0,1,0), así que el color del enlace pisaba al del
   botón y quedaba cián sobre cián. Un botón invisible no da ningún error. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ui);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 15px 26px;
  border: 1px solid var(--accent-line);
  background: transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  transition: color 0.35s ease, border-color 0.35s ease;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: -1;
}
.btn span { position: relative; z-index: 1; }
.btn__arrow { font-size: 13px; font-style: normal; transition: transform 0.35s ease; }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* Las dos variantes de la web. La especificidad va con `.cierre` delante por
   lo dicho arriba. */
.cierre .btn { color: var(--accent); text-decoration: none; }
.cierre .btn:hover { color: var(--on-accent); border-color: var(--accent); }
.cierre .btn:hover::before { transform: scaleY(1); }
.cierre .btn--solid {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.cierre .btn--solid::before { background: var(--text); }
.cierre .btn--solid:hover { color: var(--bg); }

/* ── la barra de progreso ─────────────────────────────────────────────────────
   Cero JavaScript. `animation-timeline: scroll()` la mueve en el compositor.
   Sin soporte simplemente no se ve, que es la degradación correcta. */
.progreso {
  position: fixed; inset: 0 auto auto 0; height: 2px; width: 100%;
  transform-origin: 0 50%; transform: scaleX(0);
  background: var(--accent);
  z-index: 50; pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .progreso { animation: crecer linear both; animation-timeline: scroll(root block); }
}
@keyframes crecer { to { transform: scaleX(1); } }

/* ── cabecera del sitio ──────────────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 40;
  background: rgba(5, 7, 10, .88); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.top__in {
  max-width: 1180px; margin: 0 auto; padding: 12px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.top__marca { display: flex; align-items: center; gap: 10px; text-decoration: none; }
/* La marca es el ISOTIPO, nunca el nombre escrito. Norma general del proyecto:
   un nombre en letras se LEE y compite con el titular; un símbolo se reconoce. */
.top__marca img { height: 22px; width: auto; display: block; }
.top__vuelta {
  font-family: var(--ui); font-weight: 500; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; transition: color .2s;
}
.top__vuelta:hover { color: var(--text); }

/* ── rejilla del artículo ────────────────────────────────────────────────── */
.env { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }

.art {
  display: grid; gap: 0 56px;
  grid-template-columns: 1fr;
  padding-bottom: 80px;
}
@media (min-width: 1100px) {
  .art { grid-template-columns: 220px minmax(0, var(--medida)); justify-content: center; }
}

/* ── índice lateral ──────────────────────────────────────────────────────── */
.indice { display: none; }
@media (min-width: 1100px) {
  .indice {
    display: block; position: sticky; top: 92px; align-self: start;
    max-height: calc(100vh - 120px); overflow-y: auto;
    border-left: 1px solid var(--line); padding-left: 18px;
  }
}
.indice__t {
  font-family: var(--ui); font-weight: 500; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted-dim); margin-bottom: 12px;
}
.indice ol { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.indice a {
  display: block; font-size: 14px; line-height: 1.35; color: var(--muted);
  text-decoration: none; padding: 6px 0; transition: color .15s;
}
.indice a:hover { color: var(--text); }
.indice a[aria-current="true"] { color: var(--accent); }

/* ── cabecera del artículo ───────────────────────────────────────────────── */
.cab { padding: clamp(40px, 6vw, 68px) 0 0; max-width: var(--medida); }
.cab__meta {
  font-family: var(--ui); font-weight: 500; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-dim);
  display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 22px;
}
.cab__meta .punto { color: var(--accent); }
h1 { font-size: clamp(31px, 4.6vw, 50px); }
.cab__lede { margin-top: 20px; font-size: 21px; line-height: 1.55; color: var(--muted); }

/* ── la caja de arriba ────────────────────────────────────────────────────────
   Los primeros 150 palabras deciden el 70 % del scroll, así que la respuesta
   va aquí y no en la conclusión. Y es el bloque que un buscador extrae. */
.clave {
  margin: 34px 0 0; padding: 20px 22px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: 3px;
}
.clave__t {
  font-family: var(--ui); font-weight: 500; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px;
}
.clave p { font-size: 17.5px; line-height: 1.6; }
.clave p + p { margin-top: 10px; }

/* ── cuerpo ──────────────────────────────────────────────────────────────── */
.cuerpo { max-width: var(--medida); padding-top: 12px; }
.cuerpo > * + * { margin-top: 22px; }

.cuerpo h2 { font-size: clamp(25px, 3.1vw, 33px); margin-top: 60px; scroll-margin-top: 96px; }
.cuerpo h3 {
  font-size: clamp(20px, 2.2vw, 24px); letter-spacing: -0.02em; line-height: 1.15;
  margin-top: 40px; scroll-margin-top: 96px;
}
.cuerpo p { font-size: 19px; }
.cuerpo strong { font-weight: 700; color: #fff; }
.cuerpo a { color: var(--accent); text-decoration-color: var(--accent-line); text-underline-offset: 3px; }
.cuerpo a:hover { color: #7fe0ec; }
.cuerpo ul, .cuerpo ol { padding-left: 24px; display: flex; flex-direction: column; gap: 9px; }
.cuerpo li::marker { color: var(--accent); }
.cuerpo hr { border: 0; border-top: 1px solid var(--line); margin: 46px 0; }
.cuerpo em { color: var(--muted); font-style: italic; }

/* Sin monoespaciada: no existe en la web. Un trozo de código se distingue por
   la caja y por el ancho fijo de las cifras de Jost, que es lo que la propia
   web usa para cualquier número que tenga que alinearse. */
.cuerpo code {
  font-family: var(--ui); font-weight: 500; font-size: .92em;
  font-variant-numeric: tabular-nums;
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: 3px; padding: 1px 6px;
}

/* ── cita ────────────────────────────────────────────────────────────────── */
.cuerpo blockquote {
  border-left: 2px solid var(--accent); padding: 4px 0 4px 22px;
  font-size: 21px; line-height: 1.5; color: var(--text);
}
.cuerpo blockquote em { color: var(--text); }

/* ── tabla ────────────────────────────────────────────────────────────────────
   La web no tiene ninguna, así que esto no se puede copiar de ningún sitio:
   se construye SOLO con los tokens y con el patrón de etiqueta de la casa en
   las cabeceras. Con scroll propio, para que el cuerpo de la página no se
   mueva de lado nunca. */
.tabla { overflow-x: auto; border: 1px solid var(--line); border-radius: 3px; background: var(--bg-2); }
.tabla table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 16px; }
.tabla th, .tabla td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tabla th {
  font-family: var(--ui); font-weight: 500; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted-dim); background: var(--bg-3);
  border-bottom-color: var(--line-strong);
}
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr { transition: background .15s; }
.tabla tbody tr:hover { background: rgba(79, 207, 222, .045); }
.tabla td { font-variant-numeric: tabular-nums; }

/* ── la cifra grande ──────────────────────────────────────────────────────────
   El número cuenta al entrar en pantalla, con `@property` y la línea de tiempo
   de la vista. Sin JavaScript y sin tocar el hilo principal.

   El número FINAL está en el HTML: si no hay soporte, se ve la cifra quieta y
   correcta. Nunca un cero. */
@property --cuenta { syntax: '<integer>'; initial-value: 0; inherits: false; }

.cifra {
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.cifra__n {
  font-family: var(--sans); font-weight: 800; font-size: clamp(44px, 8vw, 76px);
  line-height: .95; letter-spacing: -0.04em; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.cifra__pie { font-size: 17px; color: var(--muted); max-width: 34ch; line-height: 1.45; }

@supports (animation-timeline: view()) and (counter-reset: x var(--cuenta)) {
  @media (prefers-reduced-motion: no-preference) {
    .cifra__n[data-hasta] { color: transparent; position: relative; }
    .cifra__n[data-hasta]::after {
      content: counter(cuenta); counter-reset: cuenta var(--cuenta);
      position: absolute; inset: 0; color: var(--accent);
    }
    .cifra__n[data-hasta] {
      animation: contar linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 32%;
    }
  }
}
@keyframes contar { from { --cuenta: 0; } to { --cuenta: var(--hasta); } }

/* ── la caja de regla ────────────────────────────────────────────────────── */
.regla {
  border: 1px solid var(--line-strong); border-radius: 3px;
  padding: 18px 20px; background: var(--bg-2);
  display: flex; flex-direction: column; gap: 8px;
}
.regla__t {
  font-family: var(--ui); font-weight: 500; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-dim);
}
.regla p { font-size: 18px; }

/* ── figura de vídeo ──────────────────────────────────────────────────────────
   EL POSTER ES EL LCP. SIEMPRE.

   El vídeo con reproducción automática es la causa número uno de fallos de
   LCP: el atributo `autoplay` obliga al navegador a bajar datos de vídeo
   compitiendo con el CSS y las fuentes. Aquí no hay `autoplay` en el HTML.
   El póster se pinta, y el vídeo lo enciende un `IntersectionObserver` sólo
   cuando la figura se acerca a la pantalla.

   Y nunca va en la cabecera: si el vídeo es el elemento más grande de la
   primera pantalla, Google mide ESO como tu LCP. */
figure.video { margin: 0; }
figure.video .marco {
  position: relative; border: 1px solid var(--line); border-radius: 3px;
  overflow: hidden; background: var(--bg-3); aspect-ratio: 16 / 9;
}
figure.video video, figure.video img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
figure.video video { position: absolute; inset: 0; opacity: 0; transition: opacity .4s; }
figure.video video.puesto { opacity: 1; }
figure.video figcaption {
  margin-top: 10px; font-size: 15px; color: var(--muted-dim); line-height: 1.45;
}

/* ── revelado al entrar ──────────────────────────────────────────────────────
   De 0,3 a 1, NUNCA de 0. Si no hay soporte o se pide menos movimiento, el
   contenido está visible y quieto, que es como tiene que estar. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cuerpo > h2, .cuerpo > .tabla, .cuerpo > .cifra,
    .cuerpo > .regla, .cuerpo > figure, .cuerpo > blockquote {
      animation: entrar linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 62%;
    }
  }
}
@keyframes entrar {
  from { opacity: .3; transform: translateY(10px); }
  to   { opacity: 1;  transform: none; }
}

/* ── pie del artículo ────────────────────────────────────────────────────── */
.cierre {
  margin-top: 64px; padding: 28px 26px; border: 1px solid var(--accent-line);
  border-radius: 3px; background: var(--accent-soft);
  display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
}
.cierre h2 { font-size: clamp(23px, 2.7vw, 28px); margin: 0; }
.cierre p { font-size: 17.5px; color: var(--muted); }

.siguiente { margin-top: 48px; display: flex; flex-direction: column; gap: 12px; }
.siguiente__t {
  font-family: var(--ui); font-weight: 500; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-dim);
}
.siguiente a {
  color: var(--text); text-decoration: none; font-size: 18px; line-height: 1.35;
  border-top: 1px solid var(--line); padding-top: 12px; transition: color .2s;
}
.siguiente a:hover { color: var(--accent); }

/* ── índice del blog ─────────────────────────────────────────────────────── */
.lista { padding: clamp(40px, 6vw, 72px) 0 90px; }
.lista__h1 { max-width: 16ch; }
.lista__lede { margin-top: 18px; font-size: 20px; color: var(--muted); max-width: 52ch; }
.fichas { margin-top: 46px; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.ficha {
  background: var(--bg); padding: 26px var(--gutter); text-decoration: none; display: block;
  transition: background .18s;
}
.ficha:hover { background: var(--bg-2); }
.ficha__meta {
  font-family: var(--ui); font-weight: 500; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-dim);
  display: flex; gap: 16px; flex-wrap: wrap;
}
.ficha__meta .cl { color: var(--accent); }
.ficha h2 {
  font-size: clamp(21px, 2.6vw, 27px); color: var(--text); margin-top: 10px;
  max-width: 24ch;
}
.ficha p { margin-top: 9px; font-size: 16.5px; color: var(--muted); max-width: 60ch; }

footer.pie {
  border-top: 1px solid var(--line); padding: 34px 0 60px;
  font-size: 14px; color: var(--muted-dim);
}
footer.pie a { color: var(--muted); }