/* ============================================================================
   LANDING · estilos compartidos.

   Los tokens son los MISMOS que los de la app y están copiados a propósito, no
   importados: la landing tiene que cargar sin depender de nada y sin un paso de
   compilación. Si algún token cambia en `apps/web/src/estilo.css`, hay que
   cambiarlo aquí. Es el único sitio del proyecto donde se acepta duplicar.

   Sin fuentes de terceros bloqueando el pintado. La única analítica es la de
   `consentimiento.js`, y solo después de que alguien diga que sí.
   ========================================================================== */
:root {
  --g0: #FAFAFB; --g1: #FFFFFF; --g2: #F1F2F5; --g3: #E8E9ED;
  --line: #E3E4E9; --line-2: #D3D5DC;
  /* --t2 no llegaba a AA en NINGUN fondo: 46 de los 81 textos de esta pagina
     incumplian, incluidos los tres enlaces legales del pie. Mismo valor que en
     la app, que es lo que pide el comentario de arriba. */
  --t0: #15161A; --t1: #53565F; --t2: #656974;

  /* ── EL VIOLETA IDENTIFICA. EL ESTADO INFORMA. ─────────────────────────
     Son dos trabajos distintos y por eso son dos colores distintos.

     `--marca` es Intervalo, el violeta de la identidad: aparece donde algo
     ES de Blokked —la firma, la accion principal, lo seleccionado— y en
     ningun sitio mas. `--now` sigue siendo el azul de «esto esta pasando
     ahora», que es un dato del dia y no de la marca.

     Antes hacian el mismo trabajo con un solo azul, y eso tenia un coste
     concreto: el boton de pagar y el bloque en curso se veian igual, asi que
     el color dejaba de significar nada.

     6,19:1 sobre blanco y 6,19:1 con blanco encima. */
  --marca: #533AFD; --marca-2: #3D22E0; --marca-bg: #F0EDFF; --marca-txt: #FFFFFF;
  /* El lila del dossier: el fondo sobre el que se posa el producto en la
     maqueta del héroe. Es un tinte de Intervalo, no un color nuevo, y no
     lleva texto encima: solo sostiene una imagen. */
  --marca-lila: #C7B9FA;
  --now: #2C56D9; --now-bg: #EAEFFD;
  --done: #1B7350;
  --late: #B02A1C;
  --ancho: 940px;

  /* ── VIOLETA, TINTA, LILA Y BLANCO · el giro del 9 de octubre de 2026 ──
     La web era clara entera, y lo era por el violeta: Intervalo sobre fondo
     oscuro da 2,1:1. El giro la llena de superficies oscuras y violetas SIN
     romper esa regla: el violeta nunca va como texto sobre oscuro. Va como
     superficie —con blanco encima, 6,19:1— y los acentos sobre tinta son lila
     (10:1). Ver «LAS CUATRO SUPERFICIES», más abajo. */
  --violeta: #533AFD; --violeta-2: #3D22E0; --lila: #C7B9FA;
  --tinta: #100E1A; --tinta-2: #17151F; --tinta-3: #211E2C; --tinta-linea: #2E2A42;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* La misma tipografía que la portada y que la app, servida desde aquí. Si las
   legales usaran la del sistema, pulsar «Privacidad» en el pie te llevaría a
   algo que parece otra web. */
@font-face {
  font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url('/fuentes/instrument-sans-v4-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url('/fuentes/instrument-sans-v4-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600;
  font-display: swap; src: url('/fuentes/jetbrains-mono-v24-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
body {
  margin: 0; background: var(--g1); color: var(--t0);
  font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               system-ui, sans-serif;
  font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
p { margin: 0; }
a { color: inherit; }
/* LA MISMA MONOESPACIADA QUE LA APLICACIÓN, y esto era un fallo con dos caras.
   Aquí se declaraba `@font-face` de JetBrains Mono, se servía el archivo y no
   la nombraba nadie: esta regla saltaba directa al monoespaciado del sistema.
   O sea que la portada descargaba 31 KB de una tipografía que no pintaba una
   letra, y las horas —11:47, 12:23, los números de capítulo— salían en la
   fuente que tuviera el ordenador de cada uno, distinta de la de la app.

   Las horas SON un código de marca en esta página. Tienen que verse iguales
   dentro y fuera del producto. */
.mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--marca); outline-offset: 3px; border-radius: 6px;
}

/* ── Cabecera ──────────────────────────────────────────────────────────── */
/*
   BLANCA, Y PEGADA ARRIBA EN TODAS LAS PÁGINAS. Fue violeta desde el giro del
   9 de octubre de 2026 hasta el día siguiente: debajo viene el héroe, que
   también lo es, y la barra y el héroe se leían como una sola mancha sin
   borde, con el logotipo obligado a ir entero en blanco. Blanca, la barra se
   separa del héroe sin necesitar una raya y el logotipo lleva sus dos
   colores, el juego C01 del manual (`marca/LEEME.md`).

   La filete de abajo es para cuando pasa por encima un tramo blanco: sin ella,
   la barra y el precio se fundían al desplazar.

   La usan también las tres páginas legales, así que el cambio llega a todas y
   eso es lo correcto: una sola identidad.
*/
.nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: #FFFFFF; color: var(--tinta); box-shadow: 0 1px 0 #E2DFEE;
  /* EL LOGOTIPO PEGADO A LA IZQUIERDA Y EL BOTÓN PEGADO A LA DERECHA, con un
     margen fijo y nada más.

     Antes había DOS límites de ancho a la vez: un relleno calculado y un
     `max-width` en el envoltorio de dentro. Uno encima del otro dejaban el
     contenido apelotonado en el centro de la pantalla, con la marca a media
     distancia del borde y el botón de entrar pegado a ella. Una barra de
     navegación se lee por sus extremos, no por su centro. */
  padding: 13px clamp(16px, 3.5vw, 40px);
}
/*
   NO ES `inline-flex`, Y ESO IMPORTA. Lo era, con `gap: 10px` para separar el
   icono del nombre. Al pasar al logotipo, la `<span>` que abre el intervalo
   entre las dos K se convirtió en un elemento flexible y se llevó un hueco de
   diez píxeles A CADA LADO: en la barra ponía «BLO K KED».
*/
.marca {
  /* FLEX PARA CENTRAR EL LOGOTIPO EN VERTICAL. Era `inline-block` con
     `min-height: 44px` —el area minima que hay que poder tocar con el dedo— y
     el SVG, que es `display: block`, se quedaba pegado arriba de esa caja. En
     movil se notaba: el logotipo tocaba el borde de la barra.

     `line-height` no servia: a un hijo de bloque no lo centra.

     Y sin `gap`. Cuando `.marca` era `inline-flex` con hueco, el `<span>` que
     abria la doble K se convirtio en un elemento flexible y en la barra ponia
     «BLO K KED». Ahora dentro solo hay un SVG, pero el hueco sigue sin pintar
     nada y por eso no vuelve. */
  display: flex; align-items: center;
  min-height: 44px;
  text-decoration: none;
  /* SOBRE BLANCO, EL JUEGO C01 DEL MANUAL: negro con la barra corta y las dos
     K en Intervalo (`marca/LEEME.md`). Sobre la barra violeta iba entero en
     blanco, el C03, porque la doble K en lila daba 2,7:1 y se apagaba. */
  color: #000000; --marca: var(--violeta);
}
/* El botón de la barra es violeta con el blanco dentro, 6,19:1: es lo único
   de color que hay arriba, y es la única acción. */
.entrar {
  font-size: 14.5px; font-weight: 700; letter-spacing: -.01em;
  color: #FFFFFF; background: var(--violeta); text-decoration: none;
  border-radius: 10px; padding: 0 20px; min-height: 42px;
  display: inline-flex; align-items: center;
  transition: background .16s, transform .14s;
}
.entrar:hover { background: var(--violeta-2); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .entrar { transition: none; } }
.nav-der { display: inline-flex; align-items: center; gap: 22px; }

/* ── LO QUE YA NO ESTÁ AQUÍ ───────────────────────────────────────────────
   Aquí vivían los estilos de la portada: el héroe, la línea del día, las
   secciones, el ciclo, la comparación y el precio. Los usaba la portada
   ANTERIOR, y cuando se reescribió pasaron a estar en su propio `<style>`,
   dentro de `index.html`. Estos se quedaron aquí sin que nadie los borrara.

   NO ERAN INOFENSIVOS. `.sec > h2` llevaba `text-align: center`, y los
   títulos de la portada nueva salían centrados: la regla nueva fija el tamaño
   y el peso pero no la alineación, así que la vieja seguía mandando en lo que
   no se pisaba. Una hoja que ya no se usa no da error; cambia cosas.

   Lo que queda en este archivo es lo COMPARTIDO de verdad: los tokens, las
   fuentes, la cabecera, el pie y las tres páginas legales. */


/* ── Páginas legales ───────────────────────────────────────────────────── */
.legal { max-width: 68ch; margin: 0 auto; padding: 34px 22px 60px; }
.legal h1 { font-size: 28px; font-weight: 700; letter-spacing: -.03em; margin: 0 0 6px; }
.legal .actualizado { font-size: 13px; color: var(--t2); margin-bottom: 30px; }
.legal h2 {
  font-size: 17px; font-weight: 700; letter-spacing: -.02em; margin: 30px 0 8px;
}
.legal p, .legal li { font-size: 15px; color: var(--t1); line-height: 1.6; }
.legal p { margin: 0 0 12px; }
.legal ul { margin: 0 0 12px; padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.legal strong { color: var(--t0); }
.legal table { border-collapse: collapse; width: 100%; font-size: 14px; margin: 12px 0 18px; }
.legal th, .legal td {
  text-align: left; padding: 9px 11px; border-bottom: 1px solid var(--line);
  vertical-align: top; color: var(--t1);
}
.legal th { color: var(--t0); font-weight: 600; }
/* LA TABLA DE LOS DATOS, APILADA EN EL MÓVIL. Medido: con tres columnas su
   ancho mínimo era de 348 px —«criptográfico» y «Consentimiento» no se
   parten— y a 360 px la columna «Base legal» se salía 10 px; a 320, 65. Como
   la página no se desplaza en horizontal, lo que se salía no se podía leer.
   Aquí cada fila pasa a ser una ficha: el dato de titular, el para qué debajo
   y la base legal con su etiqueta. La cabecera se queda para el lector de
   pantalla. */
@media (max-width: 520px) {
  .legal table.datos thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .legal table.datos, .legal .datos tbody, .legal .datos tr, .legal .datos td { display: block; }
  .legal .datos tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .legal .datos td { border: 0; padding: 2px 0; }
  .legal .datos td:first-child { color: var(--t0); font-weight: 600; }
  .legal .datos td:nth-child(3) { margin-top: 4px; font-size: 13px; color: var(--t2); }
  .legal .datos td:nth-child(3)::before { content: 'Base legal: '; }
}

/* ── EL LOGOTIPO ──────────────────────────────────────────────────────────

   Los trazados van EN LÍNEA en el HTML, copiados del maestro
   `marca/negro-KK-violeta.svg`. Aquí solo se le da tamaño y color.

   SE PINTA CON `currentColor` y las dos K quedan fijas en Intervalo, así que
   un solo logotipo vale sobre claro y sobre oscuro. La alternativa era elegir
   entre el maestro blanco y el negro en cada sitio, y equivocarse en uno.

   ⚠ NO BAJA DE 100 px DE ANCHO. Por debajo de ahí el dossier manda usar el
   símbolo: «ninguna de las cuatro firmas completas es adecuada a 24 px».

   Aquí hubo un rato una reconstrucción: el nombre escrito con la tipografía y
   un `letter-spacing` para abrir la doble K. Se parecía. No era.
   ────────────────────────────────────────────────────────────────────────── */
/* LA PROPORCION VA ESCRITA, y no sobra. Con solo `height: auto`, un SVG
   dentro de un contenedor flexible resuelve su alto a CERO: el logotipo
   desaparecia de la barra sin dejar hueco ni error. Se veia bien mientras
   `.marca` fue `inline-block`, y se rompio al pasarla a flex para centrarlo.

   5613 x 804 son las medidas del `viewBox` del maestro. EL MAESTRO CAMBIO:
   ahora el logotipo lleva el simbolo delante del nombre, asi que la caja es
   mas ancha y el nombre solo ocupa el 84 % de ella. Los anchos suben un 20 %
   para que la palabra siga midiendo lo mismo que antes; si se dejan como
   estaban, el nombre encoge y parece que se ha hecho pequeño el logotipo. */
.logotipo { display: block; height: auto; aspect-ratio: 5613 / 804; }
.marca .logotipo { width: 158px; }
/* EN UN TELÉFONO, EL LOGOTIPO ENTERO, con el símbolo y el nombre. Con las
   guías, el blog, «Entrar» y «Empezar» no cabía y se recortaba al símbolo:
   la barra lo encogía hasta 38 px a 320, y el manual dice que por debajo de
   100 se usa el símbolo. El dueño lo quiso entero en el móvil y sin el blog
   en la barra (19 de octubre de 2026): con solo «Entrar» y «Empezar» al
   lado, cabe. No encoge (`flex: none`), y entre 320 y 354 px baja con la
   pantalla, de 158 a 120 px, sin pasar nunca de los 100 del manual. */
.marca { flex: none; }
@media (max-width: 353px) { .marca .logotipo { width: max(120px, calc(100vw - 196px)); } }
/* La tinta del logotipo es del maestro y NO es la del texto: `#201D30` frente
   a `#15161A`. El gris de la interfaz y la tinta de la marca son dos cosas. */

/* Sobre la tinta del pie, el juego C02: blanco con las K en Intervalo. */
.pie-marca {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  color: #FFFFFF; --marca: var(--violeta);
}
.pie-marca .logotipo { width: 125px; }

/* ═══════════════════════════════════════════════════════════════════════════
   EL ARMAZÓN COMÚN · barra, botones y pie.

   Estaba dentro del `<style>` de la portada, y ahí solo servía a la portada.
   Las guías, el blog y la plantilla tienen que enseñar LA MISMA barra y EL
   MISMO pie: no algo parecido, lo mismo. Dos copias del mismo diseño se
   separan en un mes, y entonces una de las dos deja de ser la marca.

   Lo que sigue en el `<style>` de la portada es lo suyo: el héroe, el precio,
   las preguntas y la firma.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Estilos compartidos con el precio, las preguntas y el pie. */
:root {
  --e1: 8px; --e2: 14px; --e3: 22px; --e4: 32px; --e5: 46px; --e6: 64px;
  /* El alto de una sección. Se bajó un 20 % respecto a la versión anterior:
     había pantallas enteras con dos frases dentro. */
  --sec-y: clamp(38px, 4.6vw, 56px);
  /* La medida de lectura: ~60 caracteres a 17 px son unos 570 px, que es
     donde el ojo salta de línea sin perderse. */
  --medida: 60ch;
  --r1: 8px; --r2: 12px; --r3: 16px; --r4: 26px;
}

body { overflow-x: hidden; font-size: 17px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
img, svg { max-width: 100%; }
.dentro { max-width: var(--ancho); margin: 0 auto; }

/* Saltar al contenido. Invisible hasta que se tabula, que es cuando sirve. */
.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--marca); color: var(--marca-txt); padding: 12px 18px;
  border-radius: 0 0 var(--r2) 0; font-size: 14px; font-weight: 700;
  text-decoration: none;
}
.saltar:focus { left: 0; }

/* ── 2 · CABECERA ──────────────────────────────────────────────────────────
   De borde a borde: el envoltorio NO se queda dentro del ancho de lectura.
   Una barra de navegación se lee por sus extremos, no por su centro.

   CUATRO ENLACES Y DOS ACCIONES, y ni uno más: inicio, el blog, el precio y
   las preguntas. Por debajo de 900 px no queda ninguno: el logotipo, entero,
   y «Entrar» y «Empezar». Las guías tuvieron un desplegable aquí, y el blog
   se quedaba en el móvil; el dueño quitó las dos cosas el 19 de octubre de
   2026: están en el pie.
   ────────────────────────────────────────────────────────────────────────── */
.nav .dentro { display: flex; align-items: center; justify-content: space-between;
               gap: var(--e2); max-width: none; margin: 0; width: 100%; }
.nav-links { display: flex; align-items: center; gap: 26px; justify-content: center; }
@media (min-width: 900px) {
  /* Tres columnas: el logotipo empuja desde la izquierda, las acciones desde
     la derecha y el nav se queda clavado en el medio de la barra. */
  .nav .dentro { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; }
  .nav-der { justify-self: end; }
}
/* EN EL MÓVIL, NI UN ENLACE: el sitio es del logotipo entero. Lo que había
   —inicio, el precio, las preguntas y, hasta el 19 de octubre de 2026, el
   blog— está en el pie. Con el `.nav` delante para ganarle a `.nav-links`
   por especificidad, sin depender del orden de la hoja. */
@media (max-width: 899px) { .nav .nav-links { display: none; } }

/* #55536A sobre el blanco: 7,4:1, el mismo gris que el texto secundario de un
   tramo blanco. Al pasar por encima se pone en tinta y se subraya en violeta. */
.nav-links a {
  font-size: 15px; font-weight: 600; color: #55536A; text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center;
  border-bottom: 2px solid transparent;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--tinta); border-bottom-color: var(--violeta); }
.nav-der { display: inline-flex; align-items: center; gap: var(--e3); }
/* Por debajo de 380 px se aprieta el aire, y «Entrar» y «Empezar» caben con
   el logotipo entero hasta en 320. */
@media (max-width: 379px) {
  .nav-der { gap: 14px; }
  .entrar { padding: 0 14px; }
}
/* «Entrar» es el enlace y «Empezar» es el botón: la acción que vale dinero no
   puede parecer lo mismo que la que sirve para volver a casa. */
.nav-entrar {
  font-size: 15px; font-weight: 600; color: var(--tinta); text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center;
}
.nav-entrar:hover { color: var(--violeta); text-decoration: underline; text-underline-offset: 3px; }

.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); }
/* EL BOTÓN LO PINTA SU SUPERFICIE. Sobre violeta o tinta es BLANCO con tinta
   —lo más luminoso de la pantalla, y el único—; sobre blanco o lila es
   violeta con blanco. Lo deciden `--cta-fondo` y `--cta-txt`, que declara
   cada superficie (ver «LAS CUATRO SUPERFICIES»). */
.cta {
  display: inline-flex; align-items: center; gap: 10px; justify-content: center;
  height: 58px; padding: 0 28px; border-radius: 14px;
  background: var(--cta-fondo, var(--violeta)); color: var(--cta-txt, #FFFFFF);
  font-size: 17px; font-weight: 700; letter-spacing: -.015em; text-decoration: none;
  transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s, background .16s;
}
.cta:hover { background: var(--cta-hover, var(--violeta-2)); transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(0,0,0,.55); }
.cta:active { transform: translateY(0); }
.cta svg { transition: transform .16s cubic-bezier(.2,.8,.2,1); flex: 0 0 auto; }
.cta:hover svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .cta, .cta svg, .cta:hover { transition: none; transform: none; } }
.cta-2 {
  font-size: 16px; font-weight: 600; color: var(--txt, var(--t0)); text-decoration: underline;
  text-decoration-color: var(--subraya, var(--violeta)); text-decoration-thickness: 2px;
  text-underline-offset: 5px; min-height: 44px; display: inline-flex; align-items: center;
}
.cta-2:hover { text-decoration-color: currentColor; }
.letra-pequena { font-size: 13.5px; color: var(--t2); line-height: 1.55; margin-top: var(--e2); }
.letra-pequena b { color: var(--t1); font-weight: 600; }
/* El importe y su moneda no se separan nunca. En móvil, «(2,41» se quedaba en
   una línea y «€)» en la siguiente: un precio partido en dos se lee como un
   error de la página, que en la sección del dinero es lo último que quieres. */
.nw { white-space: nowrap; }

/* EL PIE ES UNO SOLO, el de cuatro columnas, en todas las páginas públicas.
   Las legales tenían otro, de una línea centrada y con enlaces de 21 px de
   alto; se fue cuando pasaron a llevar este. */
/* EN TINTA, en todas las páginas: es donde termina el día. */
.pie {
  background: var(--tinta); padding: 56px clamp(18px, 4vw, 56px) 28px;
  font-size: 14px; color: #A8A3BE;
}
/* En el teléfono, de dos en dos: en una sola columna, los cuatro grupos
   hacían un pie de 900 px de alto. */
.pie-dentro {
  max-width: 1080px; margin: 0 auto;
  display: grid; gap: var(--e4) var(--e3); grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pie-dentro > .pie-marca { grid-column: 1 / -1; }
/* CINCO COLUMNAS DESDE QUE EL MÉTODO Y LAS GUÍAS VAN APARTE. Entre 700 y
   1000 px no caben en una fila sin partir «Plantilla para imprimir» en tres
   líneas, así que el logotipo sube a una fila suya y los cuatro grupos se
   reparten la de abajo. */
@media (min-width: 700px) { .pie-dentro { grid-template-columns: repeat(4, 1fr); gap: var(--e4); } }
@media (min-width: 1000px) { .pie-dentro { grid-template-columns: 1.3fr repeat(4, 1fr); } .pie-dentro > .pie-marca { grid-column: auto; } }
.pie h2 {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12.5px; font-weight: 500; letter-spacing: .02em;
  color: #FFFFFF; margin: 0 0 var(--e2);
}
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
/* El blog debajo de las guías, con su propio título: es otra cosa, pero dos
   columnas de un enlace cada una dejaban el pie cojo. */
.pie .pie-otro { margin-top: var(--e4); }
.pie li a, .pie-fin nav a { display: inline-flex; align-items: center; min-height: 32px; }
.pie a { color: #B9B4CC; text-decoration: none; }
.pie a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.pie a:focus-visible { outline-color: var(--lila); }
.pie-marca { display: flex; flex-direction: column; justify-content: flex-start; gap: var(--e2); align-items: flex-start; color: #FFFFFF; --marca: var(--violeta); }
.pie-marca .logotipo { width: 139px; }
.pie-marca p { font-size: 13.5px; color: #A8A3BE; line-height: 1.55; max-width: 32ch; }
.pie-fin {
  max-width: 1080px; margin: var(--e4) auto 0; padding-top: var(--e3);
  border-top: 1px solid var(--tinta-linea);
  display: flex; flex-wrap: wrap; gap: 8px var(--e3); justify-content: space-between;
  font-size: 13px;
}
/* El enlace de la analítica lo añade `consentimiento.js` a este `nav`, y solo
   si hay algo que cambiar de opinión sobre. */
.pie-fin nav { display: flex; flex-wrap: wrap; gap: 8px var(--e3); }

/* ═══════════════════════════════════════════════════════════════════════════
   LAS CUATRO SUPERFICIES · violeta, tinta, lila y blanco.

   Cada tramo de una página declara sus tintas y todo lo que lleva dentro las
   lee: un componente no sabe sobre qué color está, y por eso no puede
   equivocarse de contraste. MEDIDO: el texto secundario da 5,27:1 sobre
   violeta, 9,1 sobre tinta, 7,0 sobre lila y 7,4 sobre blanco.

     violeta  lo que es de Blokked: los héroes y los cierres.
     tinta    donde se trabaja: el método de la portada y el pie.
     lila     lo que se lee con calma, alternando con el blanco.
     blanco   el resto, y la lectura larga.

   Las páginas que no lo dicen con una clase `s-…` lo heredan de sus piezas
   —un héroe es violeta, una sección alterna es lila—. Va dentro de `:where()`
   para pesar cero: así una clase `s-…` puesta a mano manda siempre.
   ═══════════════════════════════════════════════════════════════════════════ */
.s-blanco, :where(.presentacion .seccion-producto, .presentacion.t-articulo, .legal) {
  --fondo: #FFFFFF; --txt: var(--tinta); --txt-2: #55536A; --linea: #E2DFEE;
  --punto: var(--violeta); --acento: var(--violeta); --subraya: var(--violeta);
  --cta-fondo: var(--violeta); --cta-txt: #FFFFFF; --cta-hover: var(--violeta-2);
}
.s-lila, :where(.presentacion .seccion-producto.alterna) {
  --fondo: var(--lila); --txt: var(--tinta); --txt-2: #34304F; --linea: rgba(16,14,26,.22);
  --punto: var(--tinta); --acento: var(--violeta-2); --subraya: var(--violeta-2);
  --cta-fondo: var(--violeta); --cta-txt: #FFFFFF; --cta-hover: var(--violeta-2);
}
.s-tinta {
  --fondo: var(--tinta); --txt: #F4F2FB; --txt-2: #B9B4CC; --linea: var(--tinta-linea);
  --punto: var(--lila); --acento: var(--lila); --subraya: var(--lila);
  --cta-fondo: #FFFFFF; --cta-txt: var(--tinta); --cta-hover: #ECE8FF;
}
.s-violeta, :where(.presentacion .portada-hero, .presentacion .final, .presentacion:not(.t-articulo) .migas, .presentacion > .hoja-caja) {
  --fondo: var(--violeta); --txt: #FFFFFF; --txt-2: #ECE8FF; --linea: rgba(255,255,255,.26);
  --punto: #FFFFFF; --acento: #FFFFFF; --subraya: var(--lila);
  --cta-fondo: #FFFFFF; --cta-txt: var(--tinta); --cta-hover: #ECE8FF;
}
.tramo, :where(.presentacion .portada-hero, .presentacion .seccion-producto, .presentacion .final, .presentacion.t-articulo) {
  background: var(--fondo); color: var(--txt);
}