/* ============================================================
   Capa de calidez · rama alterna `sandbox/identidad-v2`

   Dirección, 2026-09-18: «no quiero una versión idéntica con otros
   colores, quiero un sitio que se sienta vivo y cálido».

   No reescribe la composición de CD2: se carga al final y cambia lo
   que hace que una página se sienta impresa en papel y no dibujada en
   una pantalla. Seis movimientos, ninguno toca la paleta aprobada:

     1. el fondo deja de ser un color plano: papel con luz y grano
     2. las líneas de 1 px se vuelven sombra — las cosas descansan
     3. las esquinas se redondean y las fotos dejan de ser recortes
     4. el coral pasa de acento diminuto a presencia constante
     5. el ritmo deja de ser uniforme: unas cosas pesan más que otras
     6. lo que se toca, responde

   Se retira borrando una línea del `<head>`.
   ============================================================ */

/* --- 1 · Papel con luz ------------------------------------- */
body {
  background-color: var(--tef-color-fondo);
  background-image:
    radial-gradient(1200px 700px at 6% -12%,
      color-mix(in srgb, var(--tef-color-apoyo) 95%, transparent), transparent 58%),
    radial-gradient(820px 520px at 97% 6%,
      color-mix(in srgb, var(--tef-color-acento) 42%, transparent), transparent 55%),
    radial-gradient(1000px 620px at 88% 72%,
      color-mix(in srgb, var(--tef-color-apoyo) 72%, transparent), transparent 58%),
    radial-gradient(1100px 700px at 8% 96%,
      color-mix(in srgb, var(--tef-color-acento) 26%, transparent), transparent 56%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* Grano de papel: se nota cuando falta, no cuando está. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .38;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23g)' opacity='.4'/></svg>");
}
body > * { position: relative; z-index: 1; }

/* --- 2 · La cabecera flota, no corta ----------------------- */
/* QA 2026-09-18 (Dirección: «el menú no abre correctamente»): la regla de
   arriba posiciona TODOS los hijos de <body> en el mismo plano (z-index 1)
   para levantarlos sobre el grano. Efecto colateral medido: el desplegable
   del menú móvil —`z-index: 10` DENTRO de la cabecera— quedaba encerrado en
   el plano de la cabecera y lo pintaban encima `.review-details` y `<main>`,
   que vienen después en el documento. El menú sí abría; quedaba debajo.
   La cabecera necesita un plano propio por encima de sus hermanos. */
.site-header {
  z-index: 20;
  background: color-mix(in srgb, var(--tef-color-fondo) 80%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 0;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--tef-color-texto) 7%, transparent);
}

/* QA 2026-09-18 (Dirección: «el verde y el color de las letras no son
   visibles»): la base F3 pinta el panel del menú abierto con
   `--tef-color-accion` porque entonces la cabecera era verde con texto crema.
   Al volverse la cabecera de papel, los enlaces heredaron el azul marino
   sobre ese verde: 2.10:1 medido, contra el mínimo 4.5:1. El panel es marco,
   no acción —y el marco en esta identidad es papel—, así que sigue a la
   cabecera en vez de contradecirla: 13.03:1 y el verde se reserva para lo
   que se toca. Opaco a propósito: el panel tapa lo que hay debajo. */
.mobile-menu[open] .site-nav {
  background: var(--tef-color-fondo);
  border-bottom: 0;
  border-radius: 0 0 1.1rem 1.1rem;
  box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--tef-color-texto) 55%, transparent);
}
.mobile-menu[open] .site-nav a { color: var(--tef-color-texto); }
.site-nav a {
  border-radius: 999px;
  padding: .5rem .9rem;
  transition: background .18s ease, color .18s ease;
}
.site-nav a:hover {
  background: color-mix(in srgb, var(--tef-color-apoyo) 85%, transparent);
  text-decoration: none;
}
.site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: .3em; }
.site-nav .urgent-link { background: var(--tef-color-acento); color: var(--tef-color-texto); }
.home-help { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); background: var(--tef-color-apoyo); border-radius: 1.5rem; padding: clamp(1.5rem, 4vw, 3rem); margin-block: 1rem 3rem; }
.home-help h2 { margin-block: .5rem 1rem; max-width: 18ch; }
.home-help p { max-width: 55ch; }
.home-help-options { display: grid; gap: .75rem; align-content: center; }
.home-help-options p { margin: 0; padding: 1rem; background: var(--tef-color-fondo); border-radius: 1rem; }
.home-help a { font-weight: 700; }
.home-help-options a[href^="tel:"], .safety-callout a[href^="tel:"],
.urgent-boundary a[href^="tel:"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  max-width: 100%;
  padding-inline: .35rem;
  vertical-align: middle;
}
.home-reading-paths a[href="#ayuda-inmediata"] { padding-inline: .9rem; background: var(--tef-color-acento); border-radius: 999px; color: var(--tef-color-texto); }
@media (max-width: 48rem) { .home-help { grid-template-columns: 1fr; } }
.preview-bar {
  background: color-mix(in srgb, var(--tef-color-acento) 40%, var(--tef-color-fondo));
}
.review-details {
  border-bottom: 0;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--tef-color-texto) 6%, transparent);
}

/* --- 3 · La portada: una fotografía sobre la mesa ---------- */
.entry-spread { padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem); }
.entry-copy h1 { line-height: 1.02; }
.entry-intro { font-size: clamp(1.06rem, 1.3vw, 1.2rem); max-width: 40ch; }

/* `overflow: hidden` se conserva: quitarlo dejaba la foto en blanco —medido—,
   asi que el radio y la sombra van en el contenedor, no en la imagen. */
.cover-art {
  border-radius: 1.6rem;
  box-shadow: 0 30px 64px -34px color-mix(in srgb, var(--tef-color-texto) 60%, transparent),
              0 2px 6px -3px color-mix(in srgb, var(--tef-color-texto) 22%, transparent);
}

/* La ficha de la portada se separa de la foto y descansa sobre ella. */
.cover-caption {
  position: relative;
  margin: -3.4rem 1.6rem 0;
  padding: 1.6rem 1.8rem 1.4rem;
  border-radius: 1.3rem;
  background: color-mix(in srgb, #fff 76%, var(--tef-color-fondo));
  box-shadow: 0 22px 46px -28px color-mix(in srgb, var(--tef-color-texto) 52%, transparent),
              0 1px 3px -1px color-mix(in srgb, var(--tef-color-texto) 18%, transparent);
  border-bottom: 0 !important;
}

/* --- 4 · Las situaciones: tarjetas, no columnas ------------ */
.situation-grid { gap: clamp(1.4rem, 2.4vw, 2.2rem); }
.situation-story > a {
  /* columna, para que la accion quede al pie aunque el titular ocupe tres lineas */
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 1.4rem;
  background: color-mix(in srgb, #fff 72%, var(--tef-color-fondo));
  box-shadow: 0 2px 4px -2px color-mix(in srgb, var(--tef-color-texto) 16%, transparent),
              0 20px 44px -30px color-mix(in srgb, var(--tef-color-texto) 46%, transparent);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}
.situation-story > a:hover {
  transform: translateY(-4px);
  box-shadow: 0 3px 6px -2px color-mix(in srgb, var(--tef-color-texto) 18%, transparent),
              0 30px 58px -30px color-mix(in srgb, var(--tef-color-texto) 55%, transparent);
}
.situation-story img { border-radius: 0; }
.story-caption {
  border-bottom: 0 !important;
  padding: 1.35rem 1.5rem .4rem;
}
.situation-story .story-detail { padding: 0 1.5rem; flex: 1 1 auto; }
.story-action { padding: .2rem 1.5rem 1.4rem; margin-top: auto; }

/* --- 5 · El coral deja de ser un detalle ------------------- */
.eyebrow, .story-kicker, .section-heading > .eyebrow {
  color: var(--tef-color-accion);
}
.story-kicker::before {
  content: "";
  display: inline-block;
  width: .5rem;
  height: .5rem;
  border-radius: 999px;
  background: var(--tef-color-acento);
  margin-right: .55rem;
  vertical-align: .08em;
}
.section-heading h2::after {
  content: "";
  display: block;
  width: 3.2rem;
  height: .34rem;
  border-radius: 999px;
  background: var(--tef-color-acento);
  margin-top: 1.1rem;
}
.story-action, .text-link { color: var(--tef-color-accion); font-weight: 600; }
.text-link { transition: gap .18s ease; }
.text-link:hover { gap: 1.7rem; }

/* --- 6 · La invitación: una nota, no un margen ------------- */
.invitation-note {
  border-left: 0;
  padding: 1.7rem 1.9rem;
  border-radius: 1.3rem;
  background: color-mix(in srgb, var(--tef-color-apoyo) 72%, transparent);
}
.invitation-note p { font-family: var(--tef-fuente-titulo); font-style: italic; line-height: 1.38; }

.series-invitation { padding-block: clamp(2rem, 4vw, 3.4rem); }
.reader-trust {
  padding: clamp(1.8rem, 3vw, 2.6rem) clamp(1.8rem, 3vw, 2.4rem);
  border-radius: 1.4rem;
  background: color-mix(in srgb, #fff 60%, var(--tef-color-fondo));
  box-shadow: 0 18px 44px -32px color-mix(in srgb, var(--tef-color-texto) 46%, transparent);
  margin-block: clamp(2rem, 4vw, 3.5rem) 0;
}

/* --- 7 · Dentro del artículo ------------------------------- */
.scene-split img, .comparison img, .article-photo img, .time-map img, figure img {
  border-radius: 1.3rem;
  box-shadow: 0 22px 48px -30px color-mix(in srgb, var(--tef-color-texto) 55%, transparent);
}
.chapter-label > span {
  border: 0;
  background: color-mix(in srgb, var(--tef-color-apoyo) 85%, transparent);
  color: var(--tef-color-accion);
}
.chapter-takeaway { font-style: italic; line-height: 1.2; }
.scene-split blockquote {
  border-left: 0;
  padding: 1.5rem 1.7rem;
  border-radius: 1.2rem;
  background: color-mix(in srgb, var(--tef-color-apoyo) 66%, transparent);
  font-style: italic;
}
.time-center strong { color: var(--tef-color-accion); }
.draft-label {
  border-radius: 999px;
  background: color-mix(in srgb, var(--tef-color-acento) 52%, var(--tef-color-fondo));
}
details.full-article, .local-note, .moment {
  border: 0 !important;
  border-radius: 1.2rem;
  background: color-mix(in srgb, #fff 68%, var(--tef-color-fondo));
  box-shadow: 0 18px 40px -30px color-mix(in srgb, var(--tef-color-texto) 44%, transparent);
}

/* --- 8 · Botones que invitan ------------------------------ */
.button-link {
  border-radius: 999px;
  box-shadow: 0 12px 26px -16px color-mix(in srgb, var(--tef-color-accion) 90%, transparent);
  transition: transform .18s ease, box-shadow .18s ease;
}
.button-link:hover {
  transform: translateY(-2px);
  text-decoration: none;
  box-shadow: 0 18px 32px -16px color-mix(in srgb, var(--tef-color-accion) 95%, transparent);
}

/* --- 9 · El pie cierra en tono, no en corte --------------- */
.site-footer {
  margin-top: clamp(3rem, 6vw, 5rem);
  border-radius: clamp(1.4rem, 3vw, 2.2rem) clamp(1.4rem, 3vw, 2.2rem) 0 0;
}

/* --- 10 · Nada salta -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .button-link:hover, .situation-story > a:hover { transform: none; }
  body::before { display: none; }
}

@media (max-width: 52rem) {
  .cover-caption { margin: -2.2rem 1rem 0; padding: 1.3rem 1.3rem 1.1rem; }
  .situation-story > a { display: flex; }
  .situation-story img { aspect-ratio: 16/10; }
}

/* ============================================================
   Tramo «toda la familia» · 2026-09-18
   Páginas estándar compuestas, puertas de vínculos, umbral,
   tarjeta única y la línea de cierre. Ver relevo para CD2 §2.3.
   ============================================================ */

/* --- Página estándar: cabecera + dos columnas; el tercio vacío desaparece */
/* page-shell already owns the outer gutter; do not subtract a second one. */
.page-composed { width: 100%; min-width: 0; margin-inline: auto; }
.page-head { max-width: 60ch; padding-block: clamp(1rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2.5rem); }
.page-head h1 { font-size: clamp(2.3rem, 4vw, 3.7rem); line-height: 1.04; letter-spacing: -.035em; margin: .4rem 0 1rem; }
.page-columns { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(16rem, .8fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.page-columns > * { min-width: 0; overflow-wrap: anywhere; }
.page-main { max-width: 62ch; }
.page-main > p:first-child { font-size: 1.08em; }
.page-aside { position: sticky; top: 6.5rem; }
.aside-card {
  padding: 1.5rem 1.6rem;
  border-radius: 1.3rem;
  background: color-mix(in srgb, #fff 62%, var(--tef-color-fondo));
  box-shadow: 0 18px 44px -32px color-mix(in srgb, var(--tef-color-texto) 46%, transparent);
}
.aside-card p { margin: .4rem 0 1rem; }
.aside-voz { background: color-mix(in srgb, var(--tef-color-apoyo) 62%, transparent); }

/* --- Puertas de «toda la familia» */
.puertas { display: grid; gap: 1.2rem; }
.puertas--compactas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vinculos-section .puertas--compactas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.page-main .puertas { grid-template-columns: 1fr; margin-top: 1.5rem; }
.puerta {
  display: flex; flex-direction: column; gap: .35rem;
  padding: 1.35rem 1.5rem 1.3rem;
  border-radius: 1.3rem;
  color: var(--tef-color-texto); text-decoration: none;
  background: color-mix(in srgb, #fff 72%, var(--tef-color-fondo));
  box-shadow: 0 2px 4px -2px color-mix(in srgb, var(--tef-color-texto) 16%, transparent),
              0 20px 44px -30px color-mix(in srgb, var(--tef-color-texto) 46%, transparent);
  transition: transform .22s ease, box-shadow .22s ease;
}
a.puerta:hover { transform: translateY(-3px); text-decoration: none; }
.puerta :is(h2, h3) { margin: .1rem 0 .3rem; font-size: 1.35rem; line-height: 1.2; }
.puerta-frase { margin: 0; font-size: .98rem; line-height: 1.5; }
.puerta .story-action { margin-top: auto; padding-top: .8rem; }
.puerta-piezas { margin: .6rem 0 0; padding-left: 1.1rem; }
.puerta-piezas li { margin-bottom: .35rem; }
.puerta-nota { margin: .7rem 0 0; font-size: .93rem; font-style: italic; opacity: .78; }
.puerta-puente { margin: .55rem 0 0; font-size: .94rem; line-height: 1.5; }
.puerta-puente a { color: var(--tef-color-accion); text-decoration-thickness: .08em; text-underline-offset: .18em; }
/* el estado se ve, no sólo se lee */
.puerta-en_preparacion { background: color-mix(in srgb, var(--tef-color-apoyo) 48%, var(--tef-color-fondo)); box-shadow: none; border: 1px dashed color-mix(in srgb, var(--tef-color-accion) 45%, transparent); }
.puerta-empezando .story-kicker::before { background: var(--tef-color-accion); }
.vinculos-section { padding-block: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.grandparent-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(1.4rem, 3vw, 2.6rem);
  margin-block: clamp(2rem, 4vw, 3.5rem);
  border-radius: 1.5rem;
  background: color-mix(in srgb, var(--tef-color-apoyo) 64%, #fff);
}
.grandparent-feature-art { display: block; overflow: hidden; border-radius: 1.1rem; }
.grandparent-feature-art picture, .grandparent-feature-art img { display: block; width: 100%; }
.grandparent-feature-art img { height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.grandparent-feature-copy h2 { font-family: var(--tef-fuente-titulo); font-size: clamp(1.9rem, 3vw, 3rem); line-height: 1.12; }
.grandparent-feature-copy p:not(.eyebrow) { max-width: 34ch; }
.grandparent-feature-copy .button-link { margin-block: 1rem; }
.grandparent-feature-copy .text-link { display: inline-flex; }
@media (max-width: 48rem) {
  .grandparent-feature { grid-template-columns: 1fr; }
  .grandparent-feature-copy p:not(.eyebrow) { max-width: none; }
}
.vinculos-intro { max-width: 60ch; margin: -.8rem 0 1.6rem; font-size: 1.08rem; }

/* --- Umbral: la invitación que cierra la entrada.
   QA F4 (2026-09-23, orden directa de Dirección): iba ANTES del antetítulo y del
   titular y competía con ellos; ahora sigue a la entradilla, que es donde se lee
   como invitación y no como otro titular. Tamaño contenido a propósito. */
.umbral { margin: 1.2rem 0 1.4rem; max-width: 42ch; }
.umbral p { margin: 0; font-family: var(--tef-fuente-titulo); font-style: italic; font-size: clamp(1.05rem, 1.35vw, 1.2rem); line-height: 1.4; color: var(--tef-color-accion); }
.umbral p strong { font-weight: 700; }

/* --- Tarjeta única de texto (Recursos y serie) */
.situation-grid--texto { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 2rem; }
.situation-grid--texto .story-caption { padding: 1.5rem 1.6rem .6rem; }
.story-summary { margin: 0 0 .8rem; font-size: .98rem; line-height: 1.5; }
.situation-grid--texto .situation-story > a { padding-bottom: .6rem; }

/* --- La línea de cierre: el criterio de éxito, dicho */
.cierre-suficiente {
  margin: 2.6rem 0 1.8rem;
  padding: 1.3rem 1.6rem;
  border-radius: 1.2rem;
  background: color-mix(in srgb, var(--tef-color-apoyo) 66%, transparent);
  font-family: var(--tef-fuente-titulo); font-style: italic; font-size: 1.2rem; line-height: 1.4;
}

@media (max-width: 52rem) {
  /* A bare 1fr keeps the automatic min-content width at enlarged text sizes. */
  .page-columns { grid-template-columns: minmax(0, 1fr); }
  .page-aside { position: static; }
  .puertas--compactas, .vinculos-section .puertas--compactas, .situation-grid--texto { grid-template-columns: 1fr; }
}

/* --- Correcciones tras la primera captura del tramo «toda la familia» --- */
/* Las tarjetas de la home: el <a> ya no fuerza 100 % de alto (desbordaba y el
   desplegable «De qué trata» chocaba con el crédito de las ilustraciones). */
.situation-story { display: flex; flex-direction: column; }
.situation-story > a { flex: 1 1 auto; height: auto; }
.situation-story .story-detail { margin-top: .6rem; }
.art-credit { margin-top: 1.6rem; }
/* /vinculos/: las cuatro puertas a todo el ancho, y el cierre en medida de lectura. */
.puertas--completas { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: .5rem; }
.page-cierre { max-width: 62ch; margin-top: clamp(2rem, 4vw, 3rem); }
/* Citas en páginas estándar (la voz del dueño en Sobre TEF): trato suave, no barra. */
.page-main blockquote {
  margin: 1.4rem 0; padding: 1.4rem 1.6rem; border-left: 0; border-radius: 1.2rem;
  background: color-mix(in srgb, var(--tef-color-apoyo) 62%, transparent);
  font-family: var(--tef-fuente-titulo); font-style: italic; font-size: 1.15rem; line-height: 1.45;
}
.page-main blockquote p { margin: 0; font-weight: 400; }
@media (max-width: 52rem) { .puertas--completas { grid-template-columns: 1fr; } }

/* --- El aside es estrecho: las puertas compactas ahí van en una sola columna --- */
.page-aside .puertas--compactas { grid-template-columns: 1fr; gap: .8rem; }
.page-aside .puerta { padding: 1rem 1.15rem .95rem; gap: .25rem; }
.page-aside .puerta :is(h2, h3) { font-size: 1.12rem; }
.page-aside .puerta-frase { display: none; }      /* el aside orienta; la frase vive en /vinculos/ */
.page-aside .puerta .story-action { padding-top: .35rem; min-height: 0; }
.page-composed .story-action { padding-inline: 0; gap: .5rem; }
.page-aside .aside-card { padding-inline: clamp(.75rem, 4vw, 1.6rem); }

/* --- 11 · El pie de un sitio publicado --------------------- *
   QA 2026-09-20 (Dirección: «el footer hay que reemplazarlo por el que ya va a
   quedar… y todo lo demás que lleva un sitio hecho y derecho»). El pie anterior
   eran dos frases sobre el preview. Éste es el que se queda: marca, tres grupos
   de enlaces, el aviso de cuidado y la línea legal. Sobre fondo marino, así que
   el wordmark va en crema y todo el texto hereda el crema del token.            */
.footer-inner {
  display: grid;
  gap: clamp(1.6rem, 3vw, 2.4rem);
  padding-block: clamp(1rem, 2vw, 2rem);
}
.footer-marca img {
  display: block;
  width: min(13rem, 46vw);
  height: auto;
}
.footer-marca { display: grid; gap: 1.5rem; align-content: start; }
.footer-lema {
  margin: 0;
  font-family: var(--tef-fuente-titulo);
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  max-width: 24ch;
  opacity: .92;
}
.footer-nav {
  display: grid;
  /* At 200% text size, 11rem can exceed the whole 320px viewport. Cap the
     minimum at the available width so each group wraps instead of overflowing. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 1.6rem 2rem;
}
.footer-grupo h2 {
  margin: 0 0 .7rem;
  font-family: var(--tef-fuente-cuerpo, inherit);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .62;
}
.footer-grupo ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .1rem; }
.footer-grupo a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.footer-grupo a:hover { border-bottom-color: var(--tef-color-acento); }
.footer-cuidado {
  border-top: 1px solid color-mix(in srgb, var(--tef-color-fondo) 18%, transparent);
  padding-top: 1.3rem;
  max-width: 62ch;
  font-size: .95rem;
  line-height: 1.6;
  opacity: .9;
}
.footer-legal { font-size: .88rem; opacity: .72; max-width: 62ch; }
/* Lo único del pie que desaparece en el build público. */
.footer-preview {
  font-size: .82rem;
  opacity: .6;
  font-style: italic;
}
@media (min-width: 60rem) {
  .footer-inner { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); }
  .footer-marca { grid-row: span 1; }
  .footer-cuidado, .footer-legal, .footer-preview { grid-column: 1 / -1; }
  .footer-legal, .footer-preview { margin-top: -.6rem; }
}
.aside-lista { margin: 0 0 .9rem; padding: 0; list-style: none; display: grid; gap: .2rem; }
.aside-lista a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* Portada: una colección no tiene la misma silueta que una lectura individual.
   Dirección 20-09: frontera clara entre series y artículos, sobre todo en móvil.
   Selectores locales: no alteran tarjetas de Recursos, serie ni páginas interiores. */
.home-reading-paths { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; margin-top: 1.5rem; }
.home-reading-paths a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-underline-offset: .25em; }
.home-collections { padding-block: 1rem clamp(2.8rem, 6vw, 5rem); }
.collection-heading { margin-bottom: 1.5rem; }
.collection-heading h2,
.experience-home .situation-section h2 { font-size: clamp(2.3rem, 5vw, 3.4rem); margin: .25rem 0 .6rem; }
.collection-heading > p:last-child { margin-block: 0; max-width: 42ch; }
.series-collection {
  display: grid; grid-template-columns: minmax(8rem, .3fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: .4rem 1.8rem 1.8rem .4rem; border-left: .55rem solid var(--tef-color-acento);
  background: var(--tef-color-texto); color: var(--tef-color-fondo);
}
.collection-count { display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--tef-color-apoyo); padding-right: 1.5rem; }
.collection-count strong { font: 500 clamp(3rem, 6vw, 5.5rem)/1 var(--tef-fuente-titulo); color: var(--tef-color-acento); }
.collection-count span { margin-top: .65rem; font-size: 1rem; line-height: 1.45; }
.collection-copy { min-width: 0; }
.collection-copy h3 { color: var(--tef-color-fondo); font-size: clamp(1.65rem, 3.5vw, 2.6rem); line-height: 1.15; margin: 0 0 1rem; max-width: 24ch; }
.collection-copy p { color: var(--tef-color-fondo); max-width: 53ch; }
.collection-link {
  display: inline-flex; align-items: center; gap: .8rem; min-height: 48px;
  margin-top: .6rem; padding: .65rem 1.1rem; border-radius: .5rem;
  background: var(--tef-color-fondo); color: var(--tef-color-texto); font-weight: 600;
  text-decoration: none;
}
.collection-link:hover { text-decoration: underline; text-underline-offset: .2em; }
.collection-link:focus-visible { outline: 3px solid var(--tef-color-acento); outline-offset: 5px; }
.experience-home .situation-section { border-top: 2px solid var(--tef-color-texto); padding-top: clamp(2rem, 5vw, 3.5rem); }
.experience-home .situation-section .section-heading h2::after { content: none; }
.section-intro { max-width: 46ch; margin-block: .5rem 0; }
.article-type { font-size: .875rem; font-weight: 700; margin: 0 0 .7rem; padding-bottom: .6rem; border-bottom: 1px solid var(--tef-color-apoyo); }
.experience-home .situation-story > a { align-items: stretch; }
.experience-home .situation-story picture { width: 100%; }
.home-collections, #conversaciones { scroll-margin-top: 1.5rem; }
@media (max-width: 48rem) {
  .series-collection { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .collection-count { flex-direction: row; justify-content: flex-start; align-items: center; gap: 1rem; border-right: 0; border-bottom: 1px solid var(--tef-color-apoyo); padding: 0 0 1.2rem; }
  .collection-count span { margin-top: 0; }
  .collection-count span br { display: none; }
  .collection-link { display: flex; justify-content: space-between; }
  .experience-home .situation-section { padding-bottom: 3rem; }
}

/* ── QA F4 · 2026-09-23 · por orden directa de Dirección ─────────────────
   1. El ciclo «Contenido siguiente → Notificación → Volver a mirar» es una
      descripción, no un control: sin borde de botón y con flechas que lo leen
      como bucle. La flecha es decorativa (texto alternativo vacío).
   2. La sección 01 de los artículos 02–04 ya no repite la ilustración de la
      cabecera: una columna de lectura en vez de dos.
   3. Los enlaces del recuadro «Quién habla» no se pegan entre sí. */
.loop-strip { gap: .5rem .6rem; align-items: center; }
.loop-strip span {
  border: 0;
  padding: 0;
  border-radius: 0;
  font-weight: 600;
}
.loop-strip span + span::before {
  content: "→" / "";
  margin-inline-end: .6rem;
  font-weight: 400;
  color: var(--tef-color-accion);
}
.scene-split--sin-imagen { grid-template-columns: minmax(0, 42rem); }
.aside-acciones { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin: 1rem 0 0; }
/* T3 · fecha, estado y fuentes de cada pieza (adenda 01 al paquete creativo). */
.piece-status { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin: .75rem 0 0; font-size: .95rem; line-height: 1.5; }
.piece-status > * { max-width: 100%; }
.piece-status a { font-weight: 600; }
/* Emergency links must remain readable on the coral safety-callout background. */
.safety-callout a { color: var(--tef-color-texto); }