/* ============================================================
   NADA QUE CURAR — Sistema de diseño
   Estética: fanzine editorial de refugio. Papel cálido, tinta
   ciruela, acento accent, verde salvia. Serif con carácter
   (Fraunces) + sans humanista (Mulish).

   Los colores de marca están en variables: cuando llegue el logo
   de Polo, se ajustan acá en un solo lugar.
   ============================================================ */

:root {
  /* --- Paleta ---
     Marca: violeta (--plum). Resaltados: arcoíris (--rainbow, solo como
     borde/acento). Texto de links/eyebrows: violeta (--accent-text). */
  --paper: #FBFAF7;          /* blanco cálido suave (fondo) */
  --paper-deep: #F1EFE9;     /* gris cálido muy claro (paneles) */
  --ink: #2A2130;            /* tinta violácea casi negra (texto) */
  --ink-soft: #5C4E63;       /* texto secundario */
  --plum: #6C2EA0;           /* violeta encendido (marca / bandas) */
  --plum-deep: #52237B;      /* violeta más hondo (hovers oscuros) */
  --accent: #6C2EA0;         /* violeta (detalles sólidos, bordes, checkbox) */
  --accent-text: #6C2EA0;    /* violeta para links / eyebrows */
  /* Resaltado ARCOÍRIS: se usa como borde/acento, NO como fondo de texto
     (ningún color de texto es legible sobre todo el arcoíris). */
  --rainbow: linear-gradient(90deg, #E63B2E 0%, #F1811C 20%, #F4C518 40%, #3DA84B 58%, #2E74D6 78%, #7A3DBE 100%);
  /* El MISMO arcoíris, pero para rellenar texto sobre --paper.
     Por qué existe: muestreando el --rainbow de arriba punto por punto, el peor
     tramo da 1.57:1 contra el papel (el amarillo al 40%), y WCAG 1.4.3 pide 3:1
     para texto grande — ahí la palabra se parte al medio.
     Cada color es el MÁS VIVO que todavía llega a 3.5:1: se calculó subiendo la
     saturación al máximo y bajando la luminosidad sólo hasta ese umbral, hue por
     hue. El peor punto del recorrido completo da 3.50:1, contra el 3:1 exigido.
     Los 0.5 de margen no son cautela de más: el antialiasing del borde de una
     letra mezcla el color con el papel y se come parte del contraste real.
     El único que queda lejos del original es el amarillo, que se lee como oro:
     un amarillo saturado es intrínsecamente claro y sobre papel crudo no hay
     versión que pase. Los otros cinco están más vivos que el arcoíris original.
     El logo NO usa este token y está bien: un logotipo está exento del
     requisito de contraste. Un h1 no lo está. */
  --rainbow-text: linear-gradient(90deg, #FF3223 0%, #D1690B 20%, #A2820D 40%, #0D9B1F 60%, #2E83FA 80%, #A665EE 100%);
  --salvia: #4C7A62;         /* verde secundario (detalles/semántico) */
  --salvia-deep: #385947;
  --oro: #E0A13B;            /* dorado cálido, detalles */
  --rosa: #F0B8C4;           /* rosa suave (sobre violeta) */
  --linea: #E7E2D8;          /* bordes/hairlines sobre papel */
  --safebar-h: 40px;         /* alto de la barra de salida rápida */

  /* --- Tipografía --- */
  --display: "Poppins", "Mulish", sans-serif;   /* títulos + logo (redondeada) */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;  /* citas / lecturas */
  --sans: "Mulish", -apple-system, BlinkMacSystemFont, sans-serif;

  /* --- Medidas --- */
  --maxw: 1180px;
  /* Ancho de la columna de contenido. UNO para todo el sitio: si cada bloque
     elige el suyo, la columna queda con el borde derecho desparejo y se lee
     como un error de alineación. 900px es el ancho que ya usaba Recursos. */
  --measure: 900px;
  --gap: clamp(1rem, 3vw, 2rem);
  --radius: 14px;
  --radius-lg: 26px;

  /* --- Sombras --- */
  --shadow-sm: 0 2px 8px rgba(43, 31, 45, 0.06);
  --shadow: 0 14px 40px -18px rgba(43, 31, 45, 0.30);
  --shadow-lg: 0 30px 70px -30px rgba(43, 31, 45, 0.40);
}

/* ---------- Reset ligero ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background-color: var(--paper);
  /* textura papel: grano sutil con degradés radiales */
  background-image:
    radial-gradient(1200px 600px at 100% -10%, rgba(76, 122, 98, 0.09), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(108, 46, 160, 0.08), transparent 55%);
  line-height: 1.65;
  font-size: 1.06rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* Links dentro del texto corrido.
   El reset de arriba (color heredado, sin subrayado) es lo correcto para el nav,
   los botones y las tarjetas que son un enlace entero — pero deja los links de
   párrafo indistinguibles del texto que los rodea. Acá se los devuelve a la
   vista, con color Y subrayado: el color solo no alcanza (WCAG 1.4.1). */
.lead a,
.tldr a,
.stack p a, .stack li a, .stack dd a,
.lexeme dd a,
.faq__a a,
.help-note p a,
.card p a,
.reframe__col p a,
.tbl td a,
.section-head p a,
.sources li a {
  color: var(--accent-text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: text-decoration-thickness 0.14s ease;
}
.lead a:hover,
.tldr a:hover,
.stack p a:hover, .stack li a:hover, .stack dd a:hover,
.lexeme dd a:hover,
.faq__a a:hover,
.help-note p a:hover,
.card p a:hover,
.reframe__col p a:hover,
.tbl td a:hover,
.section-head p a:hover,
.sources li a:hover { text-decoration-thickness: 2.5px; }
button { font-family: inherit; cursor: pointer; }

/* ---------- Tipografía ---------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-optical-sizing: auto;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.35rem, 2.4vw, 1.8rem); }
.eyebrow {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-text);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 3px;
  border-radius: 2px;
  background: var(--rainbow);
  display: inline-block;
}
.lead { font-size: clamp(1.12rem, 1.7vw, 1.35rem); color: var(--ink-soft); }
em, .serif-italic { font-family: var(--serif); font-style: italic; }

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gap); }
/* Variante angosta para texto corrido. Va sobre .wrap y no sobre un div interno,
   para heredar el centrado (margin-inline: auto) y el padding. Si se pone el
   max-width en un hijo, la columna queda pegada a la izquierda y el borde
   derecho no coincide con el del resto de la página. */
.wrap--measure { max-width: var(--measure); }
/* Con la columna a 900px, el cuerpo del artículo sube de tamaño: a igual ancho,
   una tipografía más grande da menos caracteres por línea. Así la columna es más
   ancha SIN que el renglón se vuelva incómodo de seguir. El tamaño va acá y no
   en un style inline, para que todas las páginas queden iguales. */
.wrap--measure .stack { font-size: 1.2rem; }
/* Dentro de la medida, el encabezado ocupa todo el ancho de la columna: si
   conserva su propio límite queda un borde derecho distinto al del texto. */
.wrap--measure .section-head { max-width: none; }
.section { padding-block: clamp(2.4rem, 5vw, 4.25rem); }
.section--tight { padding-block: clamp(1.6rem, 3vw, 2.5rem); }
.center { text-align: center; }

/* ---------- Ritmo vertical del texto corrido ----------
   Regla: un título lleva MÁS aire arriba que abajo. El espacio de arriba lo
   separa de la sección anterior; el de abajo lo pega al texto que introduce.
   Antes estaba al revés (título 0.6rem arriba, párrafos 1rem entre sí), así que
   los títulos parecían pertenecer al párrafo anterior. Todos los márgenes van
   en una sola dirección (arriba) para que nunca se sumen dos. */
.stack > * + * { margin-top: 1rem; }
.stack > h2 { margin-top: 2.6rem; }
.stack > h3 { margin-top: 1.9rem; }
.stack > h2 + *, .stack > h3 + * { margin-top: 0.55rem; }
.stack > :first-child,
.stack > h2:first-child,
.stack > h3:first-child { margin-top: 0; }

/* Y el aire ARRIBA del propio .stack.
   Ojo con esto, que es la trampa de la regla de acá arriba: el primer h2 de un
   .stack tiene margin-top:0 a propósito. Si el .stack abre la sección, el
   padding de .section lo resuelve. Pero si viene DESPUÉS de otra cosa —el
   índice, un .tldr, una grilla de tarjetas, otro .stack— el hueco queda en
   CERO y el título se pega al borde del bloque anterior.
   Estuvo así en nueve páginas hasta el 2026-08-07. Las viejas lo tapaban con
   style="margin-top:2.8rem" (27 veces a mano); las generadas después no lo
   llevaban y el defecto quedó a la vista. El selector hermano lo resuelve para
   los dos casos y no se puede olvidar. */
* + .stack { margin-top: 2.8rem; }

/* ============================================================
   BARRA DE SALIDA RÁPIDA
   ============================================================ */
.safebar {
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--safebar-h);
  background: var(--plum);
  color: #F5EEE1;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
}
.safebar__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gap);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.safebar__text { opacity: 0.85; }
.safebar__text b { color: var(--rosa); font-weight: 800; }
.safe-exit {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  background: linear-gradient(#fff, #fff) padding-box, var(--rainbow) border-box;
  color: var(--ink);
  border: 2px solid transparent;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  transition: background 0.18s ease, transform 0.18s ease;
  white-space: nowrap;
}
.safe-exit:hover { transform: translateY(-1px); filter: brightness(0.96); }
.safe-exit kbd {
  font-family: var(--sans);
  background: rgba(0,0,0,0.16);
  border-radius: 4px;
  padding: 0 0.35em;
  font-size: 0.72rem;
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header {
  position: sticky;
  top: var(--safebar-h);
  z-index: 150;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  border-bottom: 1px solid var(--linea);
  isolation: isolate;
}
/* El blur va en un pseudo-elemento y NO en el header.
   `backdrop-filter` sobre el header lo convierte en bloque contenedor de sus
   descendientes `position: fixed`, y el cajón del menú móvil es uno: su
   `inset: 0 0 0 auto` se resolvía contra el header (61px de alto) en vez de
   contra la ventana. Resultado: el cajón medía 112px, los ítems se derramaban
   300px fuera de su propia caja y quedaban sobre el texto del hero sin fondo
   detrás. Se veía como si el menú fuera transparente.
   Medido en Chrome a 390px: 112px de alto antes, 780px después. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.nav {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0.75rem var(--gap);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand { display: flex; align-items: center; gap: 0; }
.brand__wordmark {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.65rem;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
/* "que" con relleno arcoíris */
.rainbow-text {
  background: linear-gradient(95deg, #E63B2E 0%, #F1811C 20%, #F4C518 40%, #3DA84B 58%, #2E74D6 78%, #7A3DBE 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 700;
}
/* símbolo Q: espacio de palabra a la izquierda, y "ue" pegado a la derecha */
.brand__q { height: 2.15rem; width: auto; display: block; margin: 0 -0.28em 0 0.16em; transform: translateY(0.05em); }
@media (max-width: 420px) {
  .brand__wordmark { font-size: 1.35rem; }
  .brand__q { height: 1.85rem; }
}
.brand__mark {
  width: 38px; height: 38px;
  flex: none;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, var(--accent), var(--plum) 82%);
  display: grid; place-items: center;
  color: #F5EEE1;
  box-shadow: var(--shadow-sm);
}
.brand__name {
  font-family: var(--serif);
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}
.brand__name small {
  display: block;
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--salvia-deep);
  font-weight: 800;
  margin-top: 2px;
}
.nav__links { display: flex; align-items: center; gap: 0.35rem; }
.nav__links a {
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink-soft);
  transition: color 0.16s ease, background 0.16s ease;
}
.nav__links a:hover { color: var(--ink); background: var(--paper-deep); }
.nav__links a[aria-current="page"] { color: var(--plum); background: var(--paper-deep); }
.nav__toggle {
  display: none;
  background: none; border: 1px solid var(--linea);
  border-radius: 10px; padding: 0.4rem 0.55rem;
  color: var(--ink);
}

/* ============================================================
   BOTONES
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 800;
  font-size: 0.98rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  border: 2px solid transparent;
  transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
  line-height: 1;
}
.btn:hover { transform: translateY(-2px); }
/* Primario: interior violeta sólido + borde ARCOÍRIS + texto blanco (legible) */
.btn--primary {
  background: linear-gradient(var(--plum), var(--plum)) padding-box, var(--rainbow) border-box;
  border: 3px solid transparent;
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { box-shadow: var(--shadow); filter: brightness(1.06); }
.btn--dark { background: var(--plum); color: #F5EEE1; }
.btn--dark:hover { background: var(--ink); }
.btn--ghost { border-color: var(--ink); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--sm { padding: 0.6rem 1.1rem; font-size: 0.88rem; }

.link-arrow {
  font-weight: 800;
  color: var(--accent-text);
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}
.link-arrow svg { transition: transform 0.18s ease; }
.link-arrow:hover svg { transform: translateX(4px); }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; padding-block: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 2.5vw, 2rem); }
.hero__grid {
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
/* La escala del h1 la manda «nada que exorcizar.» en un solo renglón: con esta
   fuente, ese texto necesita ~10,2 veces el tamaño de letra en ancho, así que el
   tamaño no puede elegirse libre. Sube con el viewport (8.4vw) en vez de quedarse
   plano en un mínimo, porque a 320px con 2.1rem el renglón desbordaba 56px.
   El techo bajó de 3.6rem a 3.3rem por el mismo motivo, del otro lado. */
.hero h1 { margin-top: 0.8rem; font-size: clamp(1.7rem, 8.4vw, 3.3rem); }
/* nowrap: el guion de «re-aprender» es una oportunidad de corte válida para el
   navegador, y a 390px partía el título en «Hay mucho para re-» / «aprender»,
   que se lee como una división de sílabas mal hecha. */
.hero h1 .accent { color: var(--accent-text); font-style: italic; white-space: nowrap; }
/* «que» con relleno arcoíris, en degradé suave. Va en «que» y no en otra palabra
   porque es la que lo lleva en el logo —la Q es el símbolo y «ue» va en
   degradé—, así el título repite el gesto de la marca en vez de inventar otro.

   Usa --rainbow-text y no --rainbow: ver el comentario del token en :root, pero
   el resumen es que el arcoíris tal cual tiene un tramo amarillo de 1.57:1
   contra el papel, y sobre una palabra corta ese tramo se come una letra entera.
   --rainbow-text es el mismo degradé con cada color llevado al punto más vivo
   que aún llega a 3.5:1.

   El color se declara antes y sólo se vuelve transparente si el navegador
   soporta background-clip: text. Sin ese resguardo, un navegador viejo deja la
   palabra invisible — y es una palabra del h1. */
.hero h1 .que { color: var(--ink); }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .hero h1 .que {
    background: var(--rainbow-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}
/* «nada que curar.» entra completo en un renglón, debajo de «No hay». El salto
   es explícito en el HTML y esta unidad no se parte, así que la palabra que rota
   nunca se separa del «que» ni se lleva el punto a otra línea.
   El espacio antes de ese salto tampoco es decorativo: un br no aporta
   separación en textContent, y sin él el h1 se leía «No haynada que curar». */
.hero h1 .titular { white-space: nowrap; }
/* La palabra que rota. No lleva ningún adorno propio: el acento del título es
   «que», y dos marcas en la misma oración compiten entre sí. */
.hero h1 .rota { display: inline-block; }
/* El cambio de palabra: sale hacia arriba, entra desde abajo. El texto se
   reemplaza en el punto ciego del 50%, cuando la opacidad es 0. */
.hero h1 .rota__palabra { display: inline-block; }
.hero h1 .rota__palabra.is-cambiando {
  animation: rota-cambio 0.52s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes rota-cambio {
  0%   { opacity: 1; transform: none; }
  44%  { opacity: 0; transform: translateY(-0.34em); }
  56%  { opacity: 0; transform: translateY(0.34em); }
  100% { opacity: 1; transform: none; }
}
.hero .lead { margin-top: 1.4rem; max-width: 34ch; }
.hero__cta { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.8rem; }

/* tarjeta ilustrativa del hero (placeholder editorial) */
.hero__card {
  position: relative;
  background: var(--plum);
  color: #F5EEE1;
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.hero__card::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(320px 220px at 92% 8%, rgba(120,170,138,0.50), transparent 62%),
    radial-gradient(300px 240px at -5% 105%, rgba(240,184,196,0.42), transparent 60%);
}
.hero__card > * { position: relative; }
.hero__quote { font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.35; font-weight: 500; }
.hero__quote span { color: var(--rosa); }
.hero__cite { margin-top: 1.4rem; font-size: 0.85rem; letter-spacing: 0.02em; opacity: 0.8; }
.hero__cite b { color: var(--oro); }

/* Rotador de afirmaciones del hero */
.hero__rotator {
  position: relative;
  min-height: clamp(7.5rem, 20vw, 9rem);
  display: grid;
}
.hero__affirm {
  grid-area: 1 / 1;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.9vw, 2.15rem);
  line-height: 1.28;
  font-weight: 500;
  align-self: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  pointer-events: none;
}
.hero__affirm.is-active { opacity: 1; transform: none; }
.hero__affirm span { color: var(--rosa); font-style: italic; }
.hero__dots { display: flex; gap: 0.4rem; margin-top: 1.6rem; }
.hero__dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(245,238,225,0.35); transition: background 0.3s ease, width 0.3s ease; }
.hero__dot.is-active { background: var(--rosa); width: 20px; border-radius: 999px; }

/* ---- Mazo de frases (cards apiladas, navegable) ---- */
.hero__deck { display: flex; flex-direction: column; gap: 1.1rem; }
.deck { position: relative; min-height: clamp(14rem, 27vw, 17rem); }
.qcard {
  position: absolute;
  inset: 0;
  background: var(--plum);
  color: #F5EEE1;
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  transform-origin: center bottom;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.5s ease;
  will-change: transform, opacity;
}
.qcard::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: var(--rainbow);
}
/* comilla decorativa grande, ocupa el espacio negativo */
.qcard::after {
  content: "\201D";
  position: absolute;
  right: 0.9rem;
  bottom: -2.2rem;
  font-family: var(--serif);
  font-size: 10rem;
  line-height: 1;
  color: rgba(240, 184, 196, 0.16);
  pointer-events: none;
  z-index: 0;
}
.qcard > * { position: relative; z-index: 1; }
.qcard__text {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.7vw, 2.15rem);
  line-height: 1.32;
  font-weight: 500;
}
.qcard__text span { color: var(--rosa); font-style: italic; }
.qcard__src {
  margin-top: 1.1rem;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  opacity: 0.85;
}
.qcard__src b { color: #fff; font-weight: 800; }
/* Los cinco fondos de la baraja. Vivían como style="background:#…" en el HTML de
   la home: cinco hex crudos que no eran tokens y que nadie podía encontrar
   buscando en el CSS. Son colores de esta baraja y de nada más, así que van acá
   como modificadores y no como variables de :root. */
.qcard--violeta { background: #6C2EA0; }
.qcard--verde   { background: #206E52; }
.qcard--tierra  { background: #B24A22; }
.qcard--azul    { background: #23528F; }
.qcard--vino    { background: #9C2F63; }

.deck__nav { display: flex; align-items: center; gap: 0.8rem; }
.deck__arrow {
  width: 40px; height: 40px; flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--linea);
  background: #fff;
  color: var(--plum);
  font-size: 1.5rem; line-height: 1;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
.deck__arrow:hover { background: var(--plum); color: #fff; border-color: var(--plum); transform: translateY(-1px); }
.deck__dots { display: flex; gap: 0.4rem; flex: 1; justify-content: center; }
.deck__dot {
  width: 8px; height: 8px; padding: 0;
  border: none; border-radius: 50%;
  background: var(--linea);
  cursor: pointer;
  transition: background 0.25s ease, width 0.25s ease;
}
.deck__dot.is-active { background: var(--plum); width: 22px; border-radius: 999px; }

/* ============================================================
   TARJETAS / SECCIONES GENÉRICAS
   ============================================================ */
.grid { display: grid; gap: 1.4rem; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: #FFFFFF;
  border: 1px solid var(--linea);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--accent); }
.card__num {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent-text);
}
/* El título de una tarjeta se ve igual sea h2 o h3: el nivel lo decide la
   jerarquía del documento, no el tamaño que queremos que tenga. */
.card h2, .card h3 { font-size: 1.3rem; }

/* Título de sección en páginas índice (el patrón eyebrow + título de Recursos).
   Etiqueta h2 por jerarquía, tamaño de h3 por jerarquía visual — mismo criterio
   que .stack h2. Esas secciones no usan .stack, así que el ritmo va acá. */
.titulo-seccion { font-size: clamp(1.35rem, 2.4vw, 1.8rem); margin-top: 0.6rem; }
.titulo-seccion + * { margin-top: 1rem; }
.card p { color: var(--ink-soft); font-size: 0.98rem; }
/* La flecha de una tarjeta se apoya abajo, para que en una fila de tarjetas de
   texto desigual todas las flechas queden a la misma altura. Estaba parchado con
   style="margin-top:auto" en 21 lugares: el defecto era del componente. */
.card .link-arrow { margin-top: auto; }
/* ---------- Índice del sitio ----------
   Cuatro grupos de enlaces a las páginas hoja. NO son tarjetas a propósito:
   después de las seis puertas de la home, cuatro tarjetas más se leen como más
   de lo mismo, y en un teléfono costaban 2.000px de scroll para decir lo que una
   lista dice en 800. La home vieja enlazaba 11 URLs de 29 y ninguno de los seis
   textos bíblicos: la autoridad no bajaba del inicio a las páginas que rankean. */
.indice { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.6rem, 4vw, 2.8rem); }
.indice__grupo h3 {
  font-size: 1.1rem;
  padding-bottom: 0.7rem;
  border-bottom: 2px solid var(--linea);
}
/* Lista de enlaces sueltos. Sin esto los <li> caen en el reset (`* { margin: 0 }`,
   sin viñeta) y quedan apilados sin ritmo. Los links llevan color Y subrayado:
   el color solo no cumple WCAG 1.4.1 y acá no hay texto corrido que los ubique. */
.lista-enlaces { list-style: none; display: grid; gap: 0.65rem; margin-top: 1rem; }
.lista-enlaces a {
  color: var(--accent-text);
  font-weight: 600;
  font-size: 0.97rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: text-decoration-thickness 0.14s ease;
}
.lista-enlaces a:hover { text-decoration-thickness: 2.5px; }
/* El enlace al hub cierra el grupo y pesa más que las hojas. */
.lista-enlaces__hub { margin-top: 0.3rem; }
.lista-enlaces__hub a { font-weight: 800; }
.card__ref { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--salvia-deep); }
.card__icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--plum) 11%, #fff);
  color: var(--plum);
  margin-bottom: 0.3rem;
  transition: background 0.2s ease, color 0.2s ease;
}
.card__icon svg { width: 30px; height: 30px; }
.card:hover .card__icon { background: var(--plum); color: #fff; }

/* Encabezado de una página de artículo, que NO usa .section-head sino el
   patrón suelto: <span class="eyebrow"> + <h1> + <p class="lead">, hijos
   directos del <article>. Sin estas dos reglas los tres quedan pegados, y
   hasta el 2026-08-07 se compensaba con style= en cada página: 29 h1 y 29
   leads parchados a mano. Va acotado con `article >` para no pisar a
   .section-head, que tiene su propio tamaño de h1. */
article > .eyebrow + h1 { margin-top: 0.6rem; font-size: clamp(2.2rem, 5vw, 3.4rem); }
article > h1 + .lead { margin-top: 1rem; }
/* Igual que .stack: si viene después de algo, necesita aire propio. */
* + .help-note { margin-top: 2.6rem; }

.section-head { max-width: 60ch; margin-bottom: clamp(1.6rem, 3vw, 2.6rem); }
/* Un encabezado centrado tiene que centrar también su propia caja: con sólo
   text-align quedaba el texto centrado dentro de una caja de 60ch pegada a la
   izquierda. La home lo tapaba con un margin-inline inline. */
.section-head.center { margin-inline: auto; }
.section-head h1,
.section-head h2 { margin-top: 0.6rem; }
/* El H1 de una página interna se ve como un H2: el tamaño lo manda la jerarquía
   visual, no la etiqueta. La etiqueta la manda el SEO (una página, un H1). */
.section-head h1 { font-size: clamp(2rem, 4vw, 3rem); }
.section-head p { margin-top: 0.8rem; }

/* Bloque "lo que te enseñaron / lo que dice" */
.reframe { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 1.4rem; }
.reframe__col { border-radius: var(--radius); padding: 1.5rem; border: 1px solid var(--linea); }
.reframe__col--old { background: var(--paper-deep); }
.reframe__col--new { background: #EAF0EC; border-color: #BFD3C7; }
.reframe__tag {
  font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em;
  display: inline-block; margin-bottom: 0.6rem;
}
.reframe__col--old .reframe__tag { color: var(--ink-soft); }
.reframe__col--new .reframe__tag { color: var(--salvia-deep); }
.reframe__col p { font-size: 1rem; }
.reframe__col--old p { color: var(--ink-soft); }

/* Cita destacada */
/* Cita destacada.
   El color, la barra y el ritmo vertical viven ACÁ, no en un style= de cada
   página. Hasta el 2026-08-06 este componente era sólo tipografía y cada
   página se lo parchaba a mano: había 31 blockquotes con CUATRO variantes
   distintas, y los 10 que no llevaban el parche salían negros, sin barra y
   pegados al párrafo de arriba. El reset `* { margin: 0 }` los dejaba en cero
   y dentro de .stack heredaban 1rem, contra los 3rem de los parchados.
   Si hace falta otra variante, se agrega un modificador acá. */
.pullquote {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.3;
  font-weight: 500;
  max-width: 24ch;
  margin-block: 3rem;
  padding-left: 1.4rem;
  border-left: 4px solid var(--plum);
  color: var(--plum);
}
/* Para una frase larga —una cita textual, no un remate de cuatro palabras—:
   a 24ch una oración de dos renglones se convierte en una columna altísima. */
.pullquote--ancho {
  max-width: none;
  font-size: clamp(1.15rem, 2vw, 1.3rem);
  margin-block: 1.8rem;
}
/* Para citar lo que decía el otro lado, sin regalarle el color de la marca. */
.pullquote--suave { border-left-color: var(--linea); color: var(--ink-soft); }
.pullquote--center { max-width: 20ch; margin-inline: auto; text-align: center; border-left: 0; padding-left: 0; }

/* El remate «Para quedarte con esto» va suelto dentro de .stack y necesita
   aire propio; adentro de .reframe es una celda de la grilla y no lleva
   ninguno. El selector hijo distingue los dos usos sin tocar el HTML. */
.stack > .reframe__col { margin-block: 1.8rem; }
.stack > .faq { margin-top: 1.2rem; }

/* ============================================================
   MIGAS DE PAN + FICHA DEL ARTÍCULO
   Las migas le dicen a Google (y al lector) dónde está parado.
   ============================================================ */
.crumbs {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-bottom: 1.4rem;
}
.crumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
}
.crumbs li { display: flex; align-items: center; gap: 0.5rem; }
.crumbs li + li::before {
  content: "›";
  color: var(--linea);
  font-weight: 700;
}
.crumbs a { color: var(--accent-text); font-weight: 600; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--ink-soft); }

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
  align-items: center;
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--linea);
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.article-meta__item { display: inline-flex; align-items: center; gap: 0.4rem; }
.article-meta a { color: var(--accent-text); font-weight: 600; }

/* ============================================================
   PIEZAS DE ARTÍCULO LARGO
   ============================================================ */

/* Dentro de un artículo el H2 se ve como un H3: la jerarquía visual no tiene
   por qué gritar. La etiqueta importa para el esquema de la página. */
/* El tamaño lo define acá; los márgenes viven en el bloque de ritmo vertical. */
.stack h2 { font-size: clamp(1.35rem, 2.4vw, 1.8rem); }
.stack h3 { font-size: clamp(1.1rem, 1.8vw, 1.28rem); color: var(--ink-soft); }

/* Respuesta corta arriba de todo. Para quien llegó de una búsqueda
   con una pregunta concreta y necesita la respuesta ya. */
.tldr {
  border: 1px solid var(--linea);
  border-left: 5px solid var(--plum);
  background: #fff;
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  margin-top: 1.8rem;
  box-shadow: var(--shadow-sm);
}
.tldr__tag {
  font-family: var(--sans);
  font-size: 0.72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--accent-text);
  display: block; margin-bottom: 0.6rem;
}
.tldr p { font-size: 1.08rem; margin: 0; }
.tldr p + p { margin-top: 0.7rem; }

/* Índice de la página. Va en las páginas largas (más de ~1.500 palabras):
   en un teléfono, 3.000 palabras sin puntos de apoyo se leen como un muro.
   Los <h2> del artículo llevan id y este índice los enlaza. */
.toc {
  margin-top: 1.8rem;
  padding: 1.2rem 1.4rem;
  background: var(--paper-deep);
  border: 1px solid var(--linea);
  border-radius: var(--radius);
}
.toc__tag {
  font-family: var(--sans);
  font-size: 0.72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-soft);
  display: block; margin-bottom: 0.7rem;
}
/* Línea opcional antes de la lista, para aclarar qué se está salteando. */
.toc > p { font-size: 0.95rem; color: var(--ink-soft); margin: 0 0 0.8rem; }
.toc ol {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0.35rem 1.4rem;
  counter-reset: toc;
}
.toc li { counter-increment: toc; font-size: 0.97rem; }
.toc li::before {
  content: counter(toc) ".";
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  margin-right: 0.4rem;
}
/* Los links del índice llevan color y subrayado como los de prosa:
   el color solo no cumple WCAG 1.4.1. */
.toc a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.toc a:hover { color: var(--plum-deep); }
/* Que el título no quede tapado al saltar. Dos correcciones del 2026-08-07:
   1. El selector va sobre cualquier h2 con id de <main>, no sólo sobre los de
      .stack: los de /recursos/ son hijos directos de la .section (clase
      .titulo-seccion) y con el selector viejo el salto no les daba ningún aire.
   2. El valor descontaba SÓLO la barra de salida (40px) y no el header pegajoso,
      que llega a 102px: el título aterrizaba a 56px, debajo del header, en todos
      los índices .toc del sitio. Los 90px son los que ya usaba .glosario dt, que
      es el único salto del sitio que caía bien. Medido en Chrome a 390px. */
main h2[id] { scroll-margin-top: calc(var(--safebar-h) + 90px); }

/* Árbol de decisión: una pregunta arriba y dos salidas abajo.
   Se arma con HTML y no con un SVG a propósito. Un SVG con viewBox fijo
   escalado a 340px de ancho dibuja el texto a menos de 8px reales: ilegible
   justo en el teléfono, que es donde más se lee esto. En HTML el texto
   reflowea, respeta el tamaño de letra que el visitante configuró y reusa
   .reframe, que ya colapsa a una columna en mobile. */
.arbol { margin-block: 1.8rem; }
.arbol__pregunta {
  margin: 0;
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  color: var(--plum);
  background: var(--paper);
  border: 2px solid var(--plum);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
}
/* El conector entre la pregunta y las dos salidas. */
.arbol__pregunta::after {
  content: "";
  display: block;
  width: 2px; height: 1.2rem;
  background: var(--linea);
  margin: 1.1rem auto -1.2rem;
}
.arbol .reframe { margin-top: 1.2rem; }
/* Variante de alerta: mismo panel que --old pero con el borde de la marca y el
   texto a plena tinta. La rama mala no puede verse como la menos importante. */
.reframe__col--alerta { background: var(--paper-deep); border-color: var(--plum); }
.reframe__col--alerta .reframe__tag { color: var(--plum); }
.reframe__col--alerta p { color: var(--ink); }

/* Ficha de la palabra original (hebreo / griego) */
.lexeme {
  background: var(--paper-deep);
  border: 1px solid var(--linea);
  border-radius: var(--radius);
  padding: 1.3rem 1.4rem;
  margin-block: 1.6rem;
}
.lexeme__word {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-style: normal;
  font-weight: 600;
  color: var(--plum);
  display: block;
  line-height: 1.2;
}
.lexeme__gloss {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin-top: 0.3rem;
  display: block;
}
.lexeme dl { margin: 1rem 0 0; display: grid; gap: 0.6rem; }
.lexeme dt {
  font-family: var(--sans);
  font-size: 0.72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-soft);
}
.lexeme dd { margin: 0.15rem 0 0; font-size: 1rem; }

/* Tabla comparativa de traducciones */
.table-wrap { overflow-x: auto; margin-block: 1.6rem; }
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  min-width: 480px;
}
.tbl th, .tbl td {
  text-align: left;
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--linea);
  vertical-align: top;
}
.tbl thead th {
  font-family: var(--sans);
  font-size: 0.72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--linea);
}
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl caption {
  caption-side: bottom;
  text-align: left;
  font-size: 0.83rem;
  color: var(--ink-soft);
  padding-top: 0.8rem;
}

/* ============================================================
   INVITACIÓN A HABLAR, EN MEDIO DEL TEXTO
   En páginas largas, quien está leyendo suele necesitar esto a mitad de camino
   y no al final. Va como <aside>: es contenido tangencial, no parte del
   argumento, y así lo entienden tanto los lectores de pantalla como Google.
   El texto se escribe SIEMPRE en relación a lo que se acaba de leer — uno
   genérico repetido en ocho páginas se vuelve invisible.
   ============================================================ */
.cta-inline {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-block: 2.8rem;
  padding: 1.4rem 1.5rem;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
/* Barra arcoíris arriba: acento de marca, nunca como fondo de texto. Distingue
   este bloque del .tldr, que lleva borde violeta a la izquierda. */
.cta-inline::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--rainbow);
}
.cta-inline p {
  margin: 0;
  font-size: 1rem;
  max-width: 48ch;
  color: var(--ink);
}
.cta-inline strong { font-weight: 800; }
.cta-inline .btn { flex: none; }

@media (max-width: 560px) {
  .cta-inline { padding: 1.2rem 1.15rem; }
  .cta-inline .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   GLOSARIO
   Lista de definiciones. Va en <dl>, que es la etiqueta que
   corresponde: un lector de pantalla anuncia "término / definición".
   ============================================================ */
/* Dos columnas: los términos forman un riel vertical que se puede recorrer con
   la mirada, y cada definición arranca a la misma altura que su término. El
   agrupamiento lo resuelve la grilla, no el espaciado — antes dependía de que
   hubiera más aire entre entradas que dentro de una, y eso siempre es frágil. */
.glosario {
  display: grid;
  grid-template-columns: minmax(9.5rem, 13rem) 1fr;
  column-gap: 2.2rem;
  row-gap: 1.9rem;
  margin-top: 1.8rem;
}
/* La línea divisoria cruza las dos columnas porque va en los dos elementos. */
.glosario dt,
.glosario dd {
  margin: 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linea);
}
.glosario dt {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.06rem;
  line-height: 1.3;
  color: var(--ink);
  scroll-margin-top: calc(var(--safebar-h) + 90px);
}
.glosario dd {
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--ink-soft);
}
/* La primera entrada de cada bloque no lleva línea: ya la separa el h2. */
.glosario > dt:first-of-type,
.glosario > dt:first-of-type + dd { border-top: none; padding-top: 0; }
/* La forma original —hebreo, griego, la sigla— baja a su propio renglón dentro
   de la columna del término: no compite con él y no fuerza el ancho. */
.glosario .orig {
  display: block;
  font-family: var(--serif);
  font-style: normal;
  font-weight: 500;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--plum);
  margin-top: 0.25rem;
}
/* "Se dice también", "dónde se desarrolla" */
.glosario .nota {
  display: block;
  font-size: 0.92em;
  color: var(--ink-soft);
  opacity: 0.85;
  margin-top: 0.45rem;
}

/* En pantallas angostas no entran dos columnas: el término pasa arriba de su
   definición, pegado a ella, y la línea divisoria queda sólo sobre el término. */
@media (max-width: 700px) {
  .glosario {
    grid-template-columns: 1fr;
    row-gap: 0;
  }
  .glosario dt {
    font-size: 1.1rem;
    margin-top: 1.9rem;
    padding-top: 1.3rem;
  }
  .glosario dd {
    border-top: none;
    padding-top: 0.4rem;
  }
  .glosario > dt:first-of-type { margin-top: 0; }
}

/* Índice de saltos al principio del glosario */
.indice-glosario {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin: 1.6rem 0 0; padding: 0; list-style: none;
}
.indice-glosario a {
  display: inline-block;
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent-text);
  background: #fff;
  text-decoration: none;
  transition: border-color 0.16s ease;
}
.indice-glosario a:hover { border-color: var(--plum); }

/* Fuentes al pie del artículo */
.sources { margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--linea); }
.sources h2 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); }
.sources ul { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.8rem; }
.sources li { font-size: 0.95rem; color: var(--ink-soft); padding-left: 1.1rem; position: relative; }
.sources li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--plum);
}
.sources a { color: var(--accent-text); font-weight: 600; }

/* Navegación entre los textos garrote (enlazado interno del cluster) */
.siblings { margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--linea); }
.siblings h2 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); }
.siblings ul {
  list-style: none; padding: 0; margin: 1.1rem 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.7rem;
}
.siblings a {
  display: block;
  border: 1px solid var(--linea);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  background: #fff;
  text-decoration: none;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.siblings a:hover { border-color: var(--plum); transform: translateY(-2px); }
.siblings b { display: block; font-family: var(--display); font-weight: 600; color: var(--ink); }
.siblings span { font-size: 0.87rem; color: var(--ink-soft); }

@media (max-width: 640px) {
  .lexeme, .tldr { padding: 1.1rem 1.15rem; }
}

/* ============================================================
   FRANJA / BANDA DE COLOR
   ============================================================ */
.band { background: var(--plum); color: #F5EEE1; }
.band--salvia { background: var(--salvia-deep); }
.band h2 { color: #fff; }
.band .lead { color: rgba(245,238,225,0.82); }
.band .eyebrow { color: var(--rosa); }
/* Sobre la banda el texto es claro. Sin esta línea, el color --plum que
   .pullquote trae por defecto queda violeta sobre violeta y el bloque
   desaparece: pasó el 2026-08-06 en la home, quiénes somos, recursos y
   re-aprender, las cuatro a la vez y sin ningún error. Si a un componente se
   le fija un color, hay que mirarlo también acá adentro. */
.band .pullquote { color: #F5EEE1; border-left-color: rgba(245,238,225,0.45); }
/* Dentro de la banda la cita es el título del bloque: entra pegada al eyebrow y
   los 3rem que .pullquote trae por defecto la despegan de más. El remate va
   debajo, a ancho de lectura y centrado. Eran tres style= inline en la home. */
.band .pullquote { margin-block: 1.1rem; }
.band .pullquote + .lead { margin: 1.4rem auto 0; max-width: 52ch; }

/* ============================================================
   FAQ (acordeón)
   ============================================================ */
.faq { max-width: 760px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--linea); }
.faq__q {
  width: 100%; text-align: left; background: none; border: none;
  padding: 1.25rem 0; display: flex; justify-content: space-between; gap: 1rem;
  align-items: center; font-family: var(--serif); font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: var(--ink); font-weight: 560;
}
.faq__q .icon { flex: none; color: var(--accent-text); transition: transform 0.25s ease; font-size: 1.4rem; }
.faq__item[open] .faq__q .icon { transform: rotate(45deg); }
.faq__a { padding: 0 0 1.4rem; color: var(--ink-soft); max-width: 62ch; }
.faq__item summary::-webkit-details-marker { display: none; }

/* ============================================================
   COMUNIDAD / HABLEMOS
   ============================================================ */
.join {
  background: #FFFFFF;
  border: 1px solid var(--linea);
  border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 4vw, 3rem);
  box-shadow: var(--shadow);
}
/* La bajada del bloque va a ancho de lectura; el resto (chips, formulario) usa
   todo el ancho del panel. Estaba como max-width inline en un div sin clase. */
.join__intro { max-width: 52ch; }
.join__intro h2 { margin-top: 0.6rem; }
.join__intro .lead { margin-top: 0.8rem; }
.join__msg { margin-top: 0.8rem; font-weight: 700; }
.join__channels { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.5rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.5em;
  border: 1.5px solid var(--linea); border-radius: 999px;
  padding: 0.6rem 1.1rem; font-weight: 700; font-size: 0.92rem;
  background: var(--paper); transition: border-color 0.16s, transform 0.16s;
}
.chip:hover { border-color: var(--salvia); transform: translateY(-2px); }
.newsletter { display: flex; gap: 0.6rem; margin-top: 1.4rem; flex-wrap: wrap; }
.newsletter input {
  flex: 1 1 220px; padding: 0.85rem 1.1rem; border-radius: 999px;
  border: 1.5px solid var(--linea); background: var(--paper);
  font-family: inherit; font-size: 1rem; color: var(--ink);
}
.newsletter input:focus { outline: 2px solid var(--salvia); outline-offset: 1px; }

/* Campos del formulario de contacto.

   Estaba escrito con el mismo style= inline copiado en los cuatro campos, y por
   eso ninguno tenía :focus: un inline no puede declarar un estado. Quien navega
   con teclado no veía dónde estaba parado (WCAG 2.4.7). Al pasarlo a clase, el
   foco se resuelve para todos de una vez, igual que en .newsletter input.

   El <select> comparte la caja con los <input> pero conserva su flecha nativa:
   en un teléfono es más clara que cualquiera que dibujemos, y avisa que el campo
   se despliega en vez de escribirse. */
.campo {
  width: 100%; padding: 0.85rem 1.1rem; border-radius: 12px;
  border: 1.5px solid var(--linea); background: var(--paper);
  font-family: inherit; font-size: 1rem; color: var(--ink);
}
.campo:focus { outline: 2px solid var(--salvia); outline-offset: 1px; }
/* Un select con su opción vacía elegida tiene que verse vacío, como el
   placeholder de los input de al lado: si no, parece un campo ya contestado. */
select.campo:has(option[value=""]:checked) { color: var(--ink-soft); }
textarea.campo { resize: vertical; }
/* Código de país + número, como una sola pregunta. La primera columna se mide en
   ch, no en píxeles: si alguien tiene el cuerpo de letra más grande, la columna
   crece con él en vez de recortar el código. El padding lateral del select baja,
   porque a este ancho el que trae .campo se come el espacio del contenido. */
.campo-duo { display: grid; grid-template-columns: minmax(0, 14ch) minmax(0, 1fr); gap: 0.6rem; }
.campo-duo select.campo { padding-inline: 0.7rem 0.4rem; }
.campo-nota { font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.55rem; }

/* Opciones tipo checkbox del formulario */
.checks { display: grid; gap: 0.55rem; margin-top: 0.4rem; }
.check {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.75rem 1rem; border: 1.5px solid var(--linea);
  border-radius: 12px; background: var(--paper); cursor: pointer;
  font-size: 0.96rem; transition: border-color 0.16s ease, background 0.16s ease;
}
.check:hover { border-color: var(--accent); background: #FFFFFF; }
.check input { accent-color: var(--plum); width: 1.1rem; height: 1.1rem; flex: none; }
.field-label { font-weight: 800; font-size: 0.9rem; color: var(--ink-soft); margin: 0.4rem 0 0.1rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--ink);
  color: rgba(245,238,225,0.75);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
.site-footer h4 { color: #F5EEE1; font-size: 1.05rem; margin-bottom: 0.9rem; font-family: var(--sans); font-weight: 800; letter-spacing: 0.02em; }
.site-footer a { color: rgba(245,238,225,0.75); }
.site-footer a:hover { color: var(--rosa); }
.footer__links { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.95rem; }
.footer__brand p { max-width: 34ch; font-size: 0.95rem; margin-top: 0.8rem; }
/* Perfil público del proyecto. El rel="me" acompaña al sameAs del JSON-LD: es
   lo que le permite a un buscador —y a un modelo— confirmar que la cuenta y el
   sitio son la misma entidad. Importa acá porque «nada que curar» es el lema
   del movimiento y hay homónimos en otros países. Lleva subrayado: el color
   solo no cumple WCAG 1.4.1. */
.footer__social a { text-decoration: underline; text-underline-offset: 2px; }
/* SIN USO desde el 2026-08-05. Lo generaba un bloque de main.js que inyectaba
   íconos de redes desde un CONFIG; se quitó porque duplicaba el link de
   Instagram del footer y apuntaba a otro usuario. Se conserva por si algún día
   se vuelve a los íconos: en ese caso el markup va escrito en el HTML, no
   inyectado por JS, para que lo lea un crawler sin ejecutar JavaScript. */
.footer__socials { display: flex; gap: 0.6rem; margin-top: 1.1rem; }
.footer__socials a {
  width: 40px; height: 40px;
  border-radius: 11px;
  border: 1px solid rgba(245, 238, 225, 0.2);
  display: grid; place-items: center;
  color: rgba(245, 238, 225, 0.8);
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}
.footer__socials a:hover { color: #fff; border-color: var(--rosa); background: rgba(255, 255, 255, 0.06); transform: translateY(-2px); }
.footer__socials svg { width: 20px; height: 20px; }

/* ============================================================
   EQUIPO + MAPA
   ============================================================ */
/* La pista mínima acompaña al tamaño del avatar: si el avatar es más grande que
   el minmax, se sale de su celda. Ver .member__avatar más abajo. */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 1.3rem; margin-top: 1.6rem; }
.map-embed {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: 2rem auto 0;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--linea);
  box-shadow: var(--shadow);
  background: var(--paper-deep);
}
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.team-map__cap { font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); }

/* ============================================================
   FOTOS EN UNA HISTORIA
   Agregado el 2026-08-05 con la primera historia publicada. Es la
   primera vez que el sitio muestra una foto dentro del cuerpo de una
   página, así que antes de esto no había ningún estilo de figure.

   Dos piezas: la firma con retrato chico junto a la bajada, y la foto
   grande que remata el final.

   El width/height van SIEMPRE en el HTML, no acá: sin ellos el navegador
   no sabe cuánto espacio reservar y el texto salta cuando carga la
   imagen (CLS). Las fotos van self-hosteadas en assets/img/: la CSP es
   img-src 'self' data:, así que una imagen de un CDN estaría bloqueada.
   ============================================================ */
/* Foto cuadrada dentro del .tldr, a la izquierda y del alto de todo el texto.
   El alto lo da el stretch del flex y el ancho lo deriva el aspect-ratio: así
   la foto siempre mide lo mismo que el bloque de texto, sin números a mano.
   En mobile pasa a columna: un cuadrado del alto del texto dejaría la columna
   de texto en unos 100px y sería ilegible. */
/* Foto cuadrada a la izquierda, texto a la derecha. La foto se mantiene CHICA
   a propósito: el ancho lo fija el flex-basis y el alto lo deriva el
   aspect-ratio, así que nunca crece con el largo del texto ni lo empuja abajo.
   Se probó al revés —foto del alto del texto, con align-self: stretch— y no
   sirve: flexbox resuelve el ancho ANTES del alto, así que un ancho que
   dependa del alto es circular. En ese intento la foto se quedó con los 720px
   de su atributo width y dejó la columna de texto en 41px de ancho.
   Por eso acá el ancho es siempre la dimensión que manda. */
.tldr--con-foto { display: flex; align-items: flex-start; gap: 1.2rem; }
.tldr__foto {
  position: relative;
  flex: 0 0 clamp(120px, 28%, 240px);
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
}
/* La imagen va absoluta para que su ancho intrínseco no participe del layout:
   si queda en flujo, vuelve a imponer su width y aplasta el texto. */
.tldr__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tldr__texto { flex: 1 1 auto; min-width: 0; }
/* Apila sólo en pantallas muy angostas, donde 104px de foto dejarían la
   columna de texto en ~190px y se leería como un fideo. */
@media (max-width: 430px) {
  .tldr--con-foto { flex-direction: column; gap: 1rem; }
  .tldr__foto { flex-basis: auto; width: 100%; }
}

/* La foto grande necesita más aire que un párrafo, y el ritmo de .stack
   le daría 1rem. Se corrige acá y no con un style inline. */
.retrato { margin: 0; }
.stack > .retrato { margin-top: 2.4rem; }
.retrato img { width: 100%; height: auto; border-radius: var(--radius); }

/* Marco 16:9 para una foto que NO es 16:9. La foto entra completa (contain) y
   los costados que sobran se rellenan con la misma imagen ampliada y
   desenfocada, en vez de con una banda de color. Así se ve la foto entera sin
   que el recuadro quede con dos vacíos a los lados.
   El filter y el transform van sobre el <img> del fondo, que no tiene
   descendientes: sobre un contenedor con position:fixed adentro romperían el
   bloque contenedor (ver la nota del .site-header en CLAUDE.md). */
.retrato__marco {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--paper-deep);
}
.retrato__marco img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border-radius: 0;                    /* lo redondea el marco, no la imagen */
}
.retrato__fondo {
  object-fit: cover;
  filter: blur(26px) saturate(1.15);
  transform: scale(1.18);              /* tapa el borde blando del blur */
}
.retrato__frente { object-fit: contain; }

/* Retrato chico en la tarjeta de una historia. Va CHICO y al lado del dato de
   la persona, no como imagen de cabecera: una historia anónima no tiene foto, y
   si el hueco fuera un bloque grande su tarjeta se leería como incompleta al
   lado de las que sí tienen. Así, la tarjeta sin foto sigue estando entera.
   Para una historia anónima, este mismo hueco acepta un círculo de color con la
   inicial, igual que .member__avatar en quienes-somos. */
.card__persona { display: flex; align-items: center; gap: 0.7rem; }
.card__foto {
  width: 52px; height: 52px; flex: 0 0 52px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.card__foto img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   MODAL (<dialog>) — agregado el 2026-08-05
   Primero del sitio. Se usa para el texto largo de "cómo funciona
   contar tu historia", que no tiene que dominar la página pero
   tampoco puede desaparecer.

   No se cierra con Escape a propósito: acá Escape es la salida
   rápida. Ver la nota en main.js y en CLAUDE.md.
   ============================================================ */
.modal {
  border: 1px solid var(--linea);
  border-radius: var(--radius-lg);
  background: var(--paper);
  color: var(--ink);
  padding: 0;
  width: min(46rem, calc(100vw - 2rem));
  max-height: min(84vh, 46rem);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  /* IMPRESCINDIBLE: el navegador centra los <dialog> con margin:auto, y el
     reset de la línea 56 (* { margin: 0 }) lo pisa. Sin esto el modal aparece
     pegado arriba a la izquierda. Pasó. */
  margin: auto;
}
.modal::backdrop { background: rgba(28, 22, 34, 0.55); }
/* El flex va sobre [open] y no sobre .modal: un display: flex suelto pelearía
   con el display: none que el navegador le pone al dialog cerrado. */
.modal[open] { display: flex; flex-direction: column; }
.modal__cuerpo { padding: 1.7rem 1.8rem 1.9rem; overflow-y: auto; min-height: 0; }
.modal__cerrar {
  position: sticky; top: 0;
  margin-left: auto;
  display: block;
  background: var(--paper); border: 1px solid var(--linea);
  border-radius: 50%;
  width: 34px; height: 34px;
  font-size: 1.1rem; line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
}
.modal__cerrar:hover { color: var(--ink); border-color: var(--ink-soft); }
.modal h2 { font-family: var(--display); font-size: 1.35rem; margin: 0 0 0.4rem; }
.modal h3 {
  font-family: var(--sans); font-size: 0.78rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--plum);
  margin: 1.7rem 0 0.6rem;
}
.modal p, .modal li { font-size: 0.97rem; }
.modal ul { margin: 0; padding-left: 1.1rem; }
.modal li + li { margin-top: 0.6rem; }
@media (max-width: 560px) {
  .modal__cuerpo { padding: 1.2rem 1.2rem 1.5rem; }
}

/* El link que abre el modal: se lee como link de prosa, no como botón. */
.link-modal {
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--plum);
  text-decoration: underline; text-underline-offset: 0.18em;
  cursor: pointer;
}
/* Dentro de una .band el fondo ES --plum, así que un link --plum queda con
   contraste 1.00: invisible. Pasó. Mismo criterio que .band h2 más arriba. */
.band .link-modal { color: #F5EEE1; }
.band .link-modal:hover { color: #fff; }
.retrato figcaption {
  font-family: var(--sans);
  font-size: 0.88rem; color: var(--ink-soft);
  margin-top: 0.7rem;
}

.member { text-align: center; margin: 0; }
.member__avatar {
  /* 74px → 112px → 136px el 2026-08-06: a 74px las caras no se distinguían.
     Si se vuelve a tocar, subir también el minmax de .team-grid: si el avatar
     queda más grande que la pista, se sale de su celda. */
  width: 136px; height: 136px;
  border-radius: 50%;
  margin: 0 auto 0.6rem;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 600; font-size: 3rem;
  color: #fff;
  box-shadow: var(--shadow-sm);
  overflow: hidden;               /* para cuando reemplacen por foto (<img>) */
}
.member__avatar img { width: 100%; height: 100%; object-fit: cover; }
.member figcaption { display: flex; flex-direction: column; gap: 0.1rem; }
.member__name { font-weight: 800; }
.member__city { font-size: 0.85rem; color: var(--ink-soft); }
/* La formación profesional de quien la tenga. Va visible porque el JSON-LD
   sólo puede declarar lo que la página muestra: marcado sin respaldo visible
   no suma nada y puede jugar en contra. */
.member__rol { font-size: 0.82rem; font-weight: 700; color: var(--accent-text); line-height: 1.25; }
/* El Instagram de quien quiera compartirlo. Va como ícono y no como @usuario:
   el usuario no aporta nada que el ícono no diga, y a 165px de celda un nombre
   largo obligaba a partir la palabra.
   Como no hay texto, el nombre accesible viaja en el aria-label del <a> y el
   <svg> va aria-hidden: sin eso un lector de pantalla anuncia "enlace" y nada más.
   Los 40px son el área táctil (WCAG 2.5.8 pide 24 como mínimo), no el ícono.
   Nunca rel="me" acá: ese atributo declara que la cuenta es del sitio, y éstas
   son personales. El sameAs del JSON-LD reclama sólo @nadaquecurar.argentina. */
.member__link {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  margin: 0.4rem auto 0;
  border-radius: 50%;
  border: 1px solid var(--linea);
  color: var(--accent-text);
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.member__link svg { width: 19px; height: 19px; }
.member__link:hover, .member__link:focus-visible { color: var(--paper); background: var(--plum); border-color: var(--plum); }
.footer__bottom {
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(245,238,225,0.15);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  font-size: 0.82rem; opacity: 0.7;
}

/* Aviso de contención */
.help-note {
  background: color-mix(in srgb, var(--accent) 12%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--linea));
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  display: flex; gap: 1rem; align-items: flex-start;
  font-size: 0.96rem;
}
.help-note .icon { flex: none; color: var(--plum); }

/* ============================================================
   ANIMACIONES (revelado al cargar)
   ============================================================ */
@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
.reveal { opacity: 0; animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
.reveal.d1 { animation-delay: 0.08s; }
.reveal.d2 { animation-delay: 0.18s; }
.reveal.d3 { animation-delay: 0.30s; }
.reveal.d4 { animation-delay: 0.42s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; opacity: 1; }
  html { scroll-behavior: auto; }
  /* La rotación de la palabra no arranca: eso lo decide el JS, que consulta la
     misma media query. Esto cubre el caso de que la clase llegue igual. */
  .hero h1 .rota__palabra.is-cambiando { animation: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .grid--3 { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
/* A partir de 901px el hero pasa a dos columnas (1fr 0.92fr), así que la columna
   del título se reduce a poco más de la mitad del ancho justo cuando la fuente ya
   venía en su máximo. Sin esta línea «nada que exorcizar.» desbordaba la columna
   entre 901 y 1180px. El 4.35vw es lo que hace que crezca a la par de la columna. */
@media (min-width: 901px) {
  .hero h1 { font-size: clamp(2.4rem, 4.35vw, 3.3rem); }
}
@media (max-width: 720px) {
  .nav__links {
    position: fixed; inset: 0 0 0 auto; width: min(78vw, 320px);
    flex-direction: column; align-items: stretch; gap: 0.2rem;
    background: var(--paper); padding: 5rem 1.2rem 2rem;
    box-shadow: var(--shadow-lg);
    /* El cajón entra con un fundido y un desplazamiento vertical corto, en vez
       de venir deslizándose desde fuera de la pantalla. Con translateX(100%) la
       página se podía arrastrar de costado en mobile: el cajón es
       `position: fixed`, así que no lo recorta ni el <body> ni el <html> (y
       ponerle overflow al <html> rompe la safebar y el header, que son sticky).
       Sobre el eje Y no hay desborde posible. `visibility` lo saca además del
       tabulador y del lector de pantalla mientras está cerrado; el delay espera
       a que termine el fundido. */
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.28s cubic-bezier(0.2,0.7,0.2,1),
                opacity 0.24s ease,
                visibility 0s linear 0.28s;
  }
  .nav__links.open {
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: transform 0.28s cubic-bezier(0.2,0.7,0.2,1),
                opacity 0.2s ease,
                visibility 0s linear 0s;
  }
  .nav__links a { font-size: 1.1rem; padding: 0.8rem 1rem; }
  /* El botón tiene que quedar ARRIBA del cajón: es lo único con lo que se puede
     cerrar el menú. Sin esto el cajón le pinta encima (es `fixed`, el botón es
     estático) y quien abre el menú queda sin salida más que navegando a otra
     página. No se resuelve con Escape a propósito: dos Escape son la salida
     rápida, y quien necesita huir no puede tener que apretar tres veces. */
  .nav__toggle { display: inline-flex; position: relative; z-index: 1; }
  .reframe, .grid--3, .grid--2, .join__channels, .indice { grid-template-columns: 1fr; }
  .grid--3, .grid--2 { display: grid; grid-template-columns: 1fr; }
  /* El índice a una columna: en dos, los títulos largos se parten en tres
     líneas y deja de leerse como una lista. */
  .toc ol { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .safebar__text { display: none; }
  .safebar__inner { justify-content: flex-end; }
}

/* ============================================================
   BARRAS DE DATOS
   Gráfico de barras en HTML, no en SVG, por la misma razón que el .arbol:
   el texto reflowea, respeta el tamaño de letra del sistema y no queda
   ilegible en un teléfono. La cifra vive en el HTML —no la dibuja el CSS—
   así que se lee sin JS, sin animación y con lector de pantalla.
   ============================================================ */
.barras { display: grid; gap: 0.55rem; margin-block: 1.6rem; }
.barras__fila {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.4rem 0.8rem;
  font-size: 0.98rem;
}
.barras__et { color: var(--ink); }
.barras__num {
  font-family: var(--sans);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--accent-text);
}
/* El riel ocupa las dos columnas, debajo de la etiqueta y la cifra. */
.barras__riel {
  grid-column: 1 / -1;
  height: 10px;
  border-radius: 999px;
  background: var(--paper-deep);
  border: 1px solid var(--linea);
  overflow: hidden;
}
.barras__riel::before {
  content: "";
  display: block;
  height: 100%;
  width: var(--pct, 0%);
  border-radius: 999px;
  background: var(--plum);
  transition: width 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* El porcentaje viaja como --pct en el HTML porque es un DATO, no un estilo:
   es la única forma de que la barra exista sin JS. Sin script la barra se dibuja
   directamente en su ancho real. El JS agrega .js-barras en <html>, y recién ahí
   arrancan en cero para poder animarse. Nunca se ve una barra falsa. */
.js-barras .barras__fila:not(.is-on) .barras__riel::before { width: 0; }
/* La fila que queremos que pese más que las otras.
   El énfasis va SÓLO en el número: si además se engorda el riel, las barras
   dejan de ser comparables entre sí y el gráfico miente por diseño. */
.barras__fila--fuerte .barras__num { font-size: 1.12rem; }
/* Una fila que es el contrapunto y no un dato más (ej.: "no fue afectado"). */
.barras__fila--tenue .barras__num { color: var(--ink-soft); }
.barras__fila--tenue.is-on .barras__riel::before { background: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) {
  .barras__riel::before { transition: none; }
}

/* ============================================================
   VIDEO PROPIO
   Auto-hospedado en MP4, nunca embebido de YouTube: la CSP del sitio es
   default-src 'self' sin frame-src, así que un iframe queda bloqueado —y
   además le entregaría a Google la IP de cada visitante, que es justo lo
   que el footer promete que no pasa. media-src cae en 'self', así que un
   <video> propio sí entra.
   preload="none" no es opcional: sin eso el navegador se baja los 45 MB
   aunque nadie toque play.
   ============================================================ */
/* ============================================================
   FIGURA AL COSTADO DEL TEXTO
   Una imagen flotada a la izquierda o a la derecha, para dar ritmo a una
   lectura larga.

   Tiene un efecto medido que no es obvio: A LA ALTURA DE LA IMAGEN, LA COLUMNA
   DE TEXTO SE ANGOSTA. Con --measure en 900px la prosa corre a 836px, que son
   95 caracteres por línea —el rango cómodo es 45-75—. Con una figura de 300px
   al costado, el texto que la rodea corre a ~500px, o sea ~57 caracteres. Por
   eso la figura no es decoración: es el único lugar de la página donde el
   ancho de lectura queda bien.

   REGLAS DE USO
   · La imagen tiene que ser DOCUMENTAL, no decorativa: un manuscrito, un
     facsímil, el lugar geográfico del que habla el texto. Una foto de archivo
     de alguien pensativo se lee como relleno, y este sitio compite por
     precisión. Ver CLAUDE.md §5.
   · Alojada acá. La CSP es default-src 'self': una imagen remota queda
     bloqueada por el propio sitio, y además le entregaría la IP de cada
     visitante a un tercero.
   · width y height SIEMPRE en el HTML, o la página salta al cargar (CLS).
   · loading="lazy", porque van en mitad del artículo.
   ============================================================ */
.figura {
  margin-block: 1.6rem;
  /* El ancho es el que angosta la columna: menos de 240px no alcanza para que
     el texto de al lado quede en rango, y más de 340px deja la prosa apretada. */
  width: min(300px, 38%);
}
.figura img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius);
  border: 1px solid var(--linea);
  background: var(--paper-deep);
}
.figura figcaption {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 0.6rem;
  line-height: 1.45;
}
/* El pie lleva la fuente y la licencia. No es opcional en imágenes documentales:
   una imagen sin procedencia vale lo mismo que una cita sin fuente. */
.figura figcaption a { color: var(--accent-text); text-decoration: underline; }
/* La procedencia va en su propia línea y más apagada: es dato de archivo, no
   parte de lo que la imagen cuenta. Pero va, siempre. */
.figura__fuente { display: block; margin-top: 0.35rem; font-size: 0.78rem; opacity: 0.8; }
.figura--der { float: right; margin-left: 1.8rem; }
.figura--izq { float: left;  margin-right: 1.8rem; }
/* Que un h2 posterior no se meta al lado de la imagen: un título flotando
   junto a una foto se lee como epígrafe de la foto, no como sección nueva. */
.stack h2, .stack h3 { clear: both; }
/* Y que NINGÚN bloque con caja propia se cruce con una figura flotada.
   Sin esto, un float atraviesa el panel que venga después: la caja mantiene su
   ancho completo por debajo de la imagen y sólo sus renglones esquivan, así que
   la figura queda dibujada ADENTRO del panel y el pie se derrama sobre el borde.
   Pasó el 2026-08-08 en 1-corintios-6 con el .lexeme, y se veía como si la foto
   fuera parte de la ficha de la palabra griega.
   Va por componente y no con un `* { clear: both }`, porque eso cancelaría el
   float también para los párrafos, que es justo lo que queremos.
   Y va SIN prefijar con .stack: la primera versión decía `.stack .pullquote` y
   no alcanzaba a los blockquotes que están fuera del .stack —hay varios—, así
   que uno seguía cruzándose 17px con la figura. Sin floats en la página, un
   `clear` no hace nada, así que aplicarlo global no tiene costo. */
.lexeme,
.reframe,
.reframe__col,
.table-wrap,
.tldr,
.arbol,
.faq,
.cta-inline,
.barras,
.proporcion,
.linea-tiempo,
.pullquote,
.sources { clear: both; }

@media (max-width: 640px) {
  /* A 390px la columna mide 358px: una figura de 300px al costado dejaría el
     texto en 40px. Pasan a ancho completo y dejan de flotar. */
  .figura, .figura--der, .figura--izq {
    float: none;
    width: 100%;
    margin-inline: 0;
    margin-block: 1.8rem;
  }
}

/* ============================================================
   CAMPO DE PROPORCIÓN
   Un punto por cada 100 versículos, para que una proporción que en palabras no
   se siente se vea de un vistazo.

   Es HTML y no una imagen por lo mismo que .arbol y .linea-tiempo: escala con
   el ancho, respeta el tamaño de letra del sistema y las cifras quedan como
   texto, legibles para Google y para un lector de pantalla.

   El campo va aria-hidden: son 311 puntos decorativos y un lector de pantalla
   los anunciaría uno por uno. El dato va escrito en el pie, que sí se lee.
   ============================================================ */
.proporcion { margin-block: 1.8rem; }
.proporcion__campo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10px, 1fr));
  gap: 5px;
}
.proporcion__campo i {
  display: block;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--linea);
}
/* El punto que contiene los seis versículos. El halo es lo que lo hace
   encontrable: sin él, a este tamaño, se pierde entre los otros 310. */
.proporcion__campo i.es-el {
  background: var(--plum);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--plum) 22%, transparent);
}
.proporcion figcaption {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-top: 1.1rem;
  line-height: 1.5;
}
.proporcion figcaption strong { color: var(--ink); }

/* ============================================================
   LÍNEA DE TIEMPO
   Se hace con HTML y no con una imagen ni un SVG, por lo mismo que .arbol: un
   SVG con viewBox fijo escalado al ancho de un teléfono dibuja el texto a menos
   de 8px reales e ignora el tamaño de letra que la persona configuró. En HTML
   reflowea. Y a diferencia de una imagen, Google y los LLM leen las fechas.
   ============================================================ */
.linea-tiempo { margin-block: 1.8rem; list-style: none; padding: 0; }
.linea-tiempo li {
  position: relative;
  padding: 0 0 1.4rem 2.2rem;
  border-left: 2px solid var(--linea);
  margin: 0;
}
.linea-tiempo li:last-child { border-left-color: transparent; padding-bottom: 0; }
/* El punto sobre la línea. Va en el borde, no centrado en el texto: la fecha es
   el ancla visual y tiene que alinear con ella. */
.linea-tiempo li::before {
  content: "";
  position: absolute;
  left: -7px; top: 0.35em;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid var(--plum);
}
/* El hito que importa —la primera vez que la palabra entra en una Biblia— se
   marca con el arcoíris en el punto, no con un fondo de color: ver la regla del
   arcoíris en :root. */
.linea-tiempo li.es-hito::before { border-color: transparent; background: var(--rainbow); }
.linea-tiempo__anio {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--plum);
  line-height: 1.2;
}
.linea-tiempo__que { display: block; margin-top: 0.3rem; color: var(--ink); }
.linea-tiempo li.es-hito .linea-tiempo__anio { font-size: 1.35rem; }

.video { margin-block: 2rem; }
.video video {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius);
  background: var(--ink);
  border: 1px solid var(--linea);
}
.video figcaption {
  font-size: 0.9rem; color: var(--ink-soft);
  margin-top: 0.7rem; line-height: 1.5;
}

/* ============================================================
   UTILIDADES — reemplazan estilos inline para poder eliminar
   'unsafe-inline' del CSP. Prefijo .u- para distinguirlas.
   ============================================================ */

/* --- Colores --- */
.u-color-light { color: #F5EEE1; }
.u-color-plum { color: var(--plum); }

/* --- Márgenes superiores --- */
.u-mt-auto { margin-top: auto; }
.u-mt-xs { margin-top: 0.6rem; }
.u-mt-sm { margin-top: 0.8rem; }
.u-mt { margin-top: 1rem; }
.u-mt-md { margin-top: 1.2rem; }
.u-mt-lg { margin-top: 1.4rem; }
.u-mt-1-6 { margin-top: 1.6rem; }
.u-mt-xl { margin-top: 2rem; }
.u-mt-2xl { margin-top: 2.5rem; }
.u-mt-3xl { margin-top: 2.6rem; }

/* --- Tamaños de fuente --- */
.u-fs-sm { font-size: 0.95rem; }
.u-fs-md { font-size: 1.05rem; }
.u-fs-lg { font-size: 1.1rem; }
.u-fs-xl { font-size: 1.15rem; }

/* --- Layout --- */
.u-text-center { text-align: center; }
.u-flex-actions {
  margin-top: 2.5rem;
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

/* --- Estilos específicos de miembros del equipo --- */
.member__avatar {
  background: var(--paper-deep);
  border-radius: 50%;
  overflow: hidden;
  aspect-ratio: 1;
}
.member__avatar--gas { background: #23528F; }
.member__avatar--polo { background: #9C2F63; }
.member__avatar--tomi { background: #B24A22; }
.member__avatar--nico { background: #6C2EA0; }
.member__avatar--emi { background: #206E52; }