/* ==========================================================================
   VI Informe de Comunicación Clara · 2026
   Reportaje interactivo · ¿Carpetas ciudadanas o mochila ciudadana?

   Cuatro bloques, en este orden:
     1 · BASE          reset, tipografía, color
     2 · REPORTAJE     retícula 60/100, capítulos, golpes, marcador
     3 · BORRADORES    cajas de las interacciones pendientes
     4 · COMUNIDAD     módulo agéntico · ZONA PROTEGIDA, copiado literal
   ========================================================================== */


/* ==========================================================================
   1 · BASE
   ========================================================================== */

@font-face { font-family: Pv sans; src: url('../fonts/PV-Sans-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: Pv sans; src: url('../fonts/PV-Sans-Normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Pv sans; src: url('../fonts/PV-Sans-BookOblique.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: Pv sans; src: url('../fonts/PV-Sans-Neutral.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: Pv sans; src: url('../fonts/PV-Sans-NeutralOblique.woff2') format('woff2');
  font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: Pv sans; src: url('../fonts/PV-Sans-Medium.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap; }

:root {
  /* Paleta heredada de la landing */
  --negro-digital: #111;
  --blanco-digital: #fafafa;
  --ultramar: #001e4e;
  --celeste: #57afff;
  --menta: #57afff;
  --azul: #196aff;
  --naranja: #196aff;
  --amarillo: #57afff;
  --gris-medio: #fafafab3;
  --gris-oscuro-accesible: #111111b3;

  /* Del reportaje */
  --papel: #fafafa;
  --tinta: #111;
  --noche: #111111;
  --linea-suave: #11111124;
  --linea-noche: #fafafa29;

  /* Retícula */
  --gotera: 24px;            /* aire lateral mínimo */
  --alto-cabecera: 61px;     /* lo mide el JS al cargar y al redimensionar */
  --col-texto: 50%;          /* ancho de la columna de lectura */
  --col-texto-max: 600px;

  /* Escala tipográfica · tamaños fijos, tres cortes (ver el bloque de cortes
     más abajo). Nada escala con vw: cada tamaño es el que es. */
  --cuerpo:   22px;   /* párrafo del reportaje */
  --suelta:   30px;   /* párrafo de una línea */
  --entrada:  36px;   /* párrafo destacado */
  --marta:    46px;   /* la voz de Marta, en cursiva */
  --golpe:    68px;   /* la sentencia del capítulo */
  --titular:  92px;   /* portada */
  --sub:      26px;   /* subtítulo de portada */
  --rotulo:   26px;   /* titulares de tarjeta */
  --nota:     16px;   /* notas al pie */
  --cifra:   160px;   /* cifras de las bandas */
  --buscador: 54px;   /* las dos palabras, dentro del buscador */
  --bocadillo: 56px;  /* la pregunta de Marta, dentro del bocadillo */
  --resultado: 40px;  /* lo que la web devolvió, en su ficha */

  /* Aire, también fijo */
  --aire-cap:      150px;
  --aire-marcador:  72px;
  --aire-lee:       40px;   /* entre dos bloques de lectura */
  --aire-banda:     56px;   /* entre lectura y banda de ancho completo */
  --aire-golpe:     72px;
  --aire-borrador:  84px;
  --pad-borrador:   52px;

  /* Movimiento */
  --curva: cubic-bezier(.22, .61, .36, 1);
  --vaiven: cubic-bezier(.65, 0, .35, 1);   /* arranca y frena: mano que se mueve */
  --rebote: cubic-bezier(.34, 1.56, .64, 1);
}

/* Corte 2 · tableta */
@media screen and (max-width: 1000px) {
  :root {
    --cuerpo: 20px; --suelta: 26px; --entrada: 30px; --marta: 38px;
    --golpe: 50px;  --titular: 62px; --sub: 22px; --rotulo: 23px;
    --nota: 15px;   --cifra: 110px; --buscador: 38px; --bocadillo: 42px; --resultado: 32px;
    --aire-cap: 100px; --aire-marcador: 56px; --aire-lee: 34px; --aire-banda: 44px;
    --aire-golpe: 56px; --aire-borrador: 60px; --pad-borrador: 36px;
  }
}

/* Corte 3 · móvil */
@media screen and (max-width: 760px) {
  :root {
    --cuerpo: 18px; --suelta: 22px; --entrada: 25px; --marta: 29px;
    --golpe: 34px;  --titular: 40px; --sub: 19px; --rotulo: 21px;
    --nota: 15px;   --cifra: 70px; --buscador: 26px; --bocadillo: 28px; --resultado: 24px;
    --aire-cap: 70px; --aire-marcador: 40px; --aire-lee: 28px; --aire-banda: 34px;
    --aire-golpe: 44px; --aire-borrador: 44px; --pad-borrador: 26px;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (scripting: none) and (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html.sin-animaciones { scroll-behavior: auto; }

body {
  margin: 0;
  background-color: var(--papel);
  color: var(--tinta);
  font-family: Pv sans, Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  hanging-punctuation: first last;   /* las comillas vuelan fuera del margen */
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.saltar {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ultramar); color: var(--blanco-digital);
  border-radius: 0 0 8px 8px; padding: 10px 18px; text-decoration: none;
  transition: top .2s;
}
.saltar:focus { top: 0; }


/* ==========================================================================
   2 · REPORTAJE
   ========================================================================== */

/* ---------- Cabecera fina, siempre visible ------------------------------- */
.cabecera {
  position: fixed; inset: 0 0 auto; z-index: 90;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 12px var(--gotera);
  background: #fafafaf2;
  border-bottom: 1px solid var(--linea-suave);
  backdrop-filter: blur(8px);
  transition: background-color .4s, border-color .4s, color .4s;
}
.cabecera-logo { display: block; }
.cabecera-logo img { width: 132px; }
.cabecera-titulo {
  text-align: center; font-size: .9rem; font-weight: 500; letter-spacing: .01em;
}
.cabecera-metodo {
  justify-self: end;
  background: none; border: 1px solid currentColor; border-radius: 48px;
  padding: 7px 16px; font-size: .82rem; cursor: pointer;
  transition: background-color .3s, color .3s;
}
.cabecera-metodo:hover { background: var(--ultramar); color: var(--blanco-digital); border-color: var(--ultramar); }

/* Sobre bandas oscuras, la cabecera se invierte */
.cabecera.en-noche {
  background: #111111f2; color: var(--blanco-digital); border-bottom-color: var(--linea-noche);
}
.cabecera.en-noche .cabecera-logo img { filter: invert(1) brightness(2); }
.cabecera.en-noche .cabecera-metodo:hover { background: var(--blanco-digital); color: var(--noche); border-color: var(--blanco-digital); }

/* ---------- Las dos anchuras del reportaje ------------------------------- */
/* .lee  → columna de lectura, 60 % centrado
   .ancho → banda de interacción o de cifras, 100 %                          */

.lee {
  width: var(--col-texto);
  max-width: var(--col-texto-max);
  margin-inline: auto;
  padding-inline: var(--gotera);
}
.ancho {
  width: 100%;
  margin-inline: auto;
  margin-block: var(--aire-banda);
  padding-inline: var(--gotera);
}
/* Los márgenes verticales colapsan con los del texto contiguo, así que el
   hueco real es siempre --aire-banda, no la suma. */
.ancho:first-child { margin-top: 0; }
.ancho:last-child { margin-bottom: 0; }
.ancho > .lee { padding-inline: 0; }

/* ---------- Capítulo ------------------------------------------------------ */
.cap {
  position: relative;
  padding-block: 0 var(--aire-cap);
}
.cap.noche {
  background-color: var(--noche);
  color: var(--blanco-digital);
}
.cap.noche a { color: var(--celeste); }

/* Marcador de recorrido: numeración y una línea pequeña.
   Va pegado al borde superior del capítulo y se queda justo debajo de la
   cabecera, cuya altura real mide el JS en --alto-cabecera. */
.marcador {
  position: sticky; top: var(--alto-cabecera); z-index: 40;
  display: flex; align-items: center; gap: 12px;
  width: 100%; margin: 0 0 var(--aire-cap);
  padding: 26px var(--gotera) 24px;
  font-size: .78rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gris-oscuro-accesible);
  pointer-events: none;
}
.cap.noche .marcador { color: var(--celeste); }
.marcador .num { font-variant-numeric: tabular-nums; }
.marcador .filete { flex: 1; height: 1px; background: currentColor; opacity: .4; }

/* ---------- Texto del reportaje ------------------------------------------ */
/* Dos bloques de lectura seguidos son dos momentos del relato: se separan */
.lee + .lee { margin-top: var(--aire-lee); }
.lee > * { margin-block: 0 1.1em; }
.lee > *:last-child { margin-bottom: 0; }

/* La medida manda: con la columna al 50 % caben unos 68 caracteres a este
   tamaño. Si se toca el ancho, hay que revisar este cuerpo, no al revés.
   Va en :where() para no pesar en especificidad: así las variantes que vienen
   después (.entrada, .suelta, .dice-marta, .golpe, .nota-pie) ganan solas. */
.lee :where(p) {
  font-size: var(--cuerpo);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -.003em;
  text-wrap: pretty;
}
.lee > :where(p) { margin-bottom: 1em; }

/* Párrafo destacado: cierra una idea o abre un capítulo */
.lee p.entrada {
  font-size: var(--entrada);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.015em;
  text-wrap: balance;
  margin-block: 1.1em .6em;
}

/* Título de bloque: abre un tramo dentro del capítulo. No es un titular de
   sección —los capítulos no llevan— pero sí marca dónde empieza algo. */
.lee p.titulo-bloque {
  font-size: var(--entrada);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-wrap: balance;
  margin-block: .2em .9em;
}

/* Párrafo de una sola línea. El aire va delante: abre un tramo nuevo, así que
   respira antes y se pega a lo que viene detrás. */
.lee p.suelta {
  font-size: var(--suelta);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
  margin-block: 2.2em .6em;
}
.lee em { font-style: italic; }
.lee strong { font-weight: 600; }

/* La voz de Marta: cursiva, grande y con mucho aire alrededor */
.dice-marta {
  font-size: var(--marta);
  font-style: italic; font-weight: 400; line-height: 1.18;
  letter-spacing: -.02em;
  text-wrap: balance;
  margin-block: 1.1em;
}

/* Golpe: sentencia en mayúsculas, una por capítulo */
/* Remate: cierra un tramo. Sale de la columna, como el golpe, pero sin
   mayúsculas: no es una sentencia, es un suspiro. */
.remate {
  width: min(88vw, 1100px);
  margin-inline: calc(50% - min(44vw, 550px));
  margin-block: var(--aire-golpe);
  text-align: center;
  font-size: var(--marta); font-weight: 500; line-height: 1.1;
  letter-spacing: -.02em; text-wrap: balance;
}

/* Golpe: una sentencia por capítulo. Sale de la columna de lectura para que
   pese más que el texto que la rodea. */
.golpe {
  width: min(88vw, 1100px);
  margin-inline: calc(50% - min(44vw, 550px));
  font-size: var(--golpe);
  font-weight: 600; line-height: 1; letter-spacing: -.025em;
  text-wrap: balance;
  margin-block: var(--aire-golpe);
}
.centrado { text-align: center; }

/* Cifra grande dentro de una banda */
.cifra {
  font-size: var(--cifra);
  font-weight: 600; line-height: .9; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.cifra-pie {
  font-size: var(--cuerpo);
  color: var(--gris-oscuro-accesible);
  max-width: 34em;
}
.cap.noche .cifra-pie { color: #fafafacc; }

/* Nota al pie de una banda o de un módulo */
.nota-pie {
  font-size: var(--nota); line-height: 1.5;
  color: var(--gris-oscuro-accesible);
  max-width: 60em; margin-block: 32px 0;
}
.cap.noche .nota-pie { color: #fafafacc; }

/* ---------- Portada -------------------------------------------------------
   La foto va de fondo, en su propia capa. Por defecto está a opacidad 0: así
   nunca se ve aparecer a medio cargar. El zoom y el fundido los arranca el JS
   cuando la imagen ya está decodificada.                                     */
.portada-foto {
  position: absolute; inset: 0; z-index: 0;
  opacity: 0;
  background-image: url('../images/portada.jpg?v=1791185494');
  background-position: 56% 50%;
  background-size: cover;
  scale: 1.12;
  will-change: opacity, scale;
}
.portada.cargada .portada-foto {
  opacity: 1; scale: 1;
  transition: opacity 1.4s var(--curva), scale 2.8s var(--curva);
}
/* Vela la foto para que el título se lea, sin apagarla del todo */
.portada-velo {
  position: absolute; inset: 0; z-index: 1;
  background-image:
    radial-gradient(70% 55% at 50% 48%, #001e4ee6 0%, #001e4ea6 55%, #001e4e59 100%),
    linear-gradient(180deg, #001e4ecc 0%, #001e4e40 30%, #001e4e40 70%, #001e4ee6 100%);
}
/* El contenido, por encima de la foto. La flecha de bajar se excluye: es
   absoluta y este selector le ganaba en especificidad. */
.portada > *:not(.portada-foto):not(.portada-velo):not(.portada-baja) { position: relative; z-index: 2; }
.portada-baja { z-index: 2; }

.portada {
  position: relative;
  min-height: 100svh;
  display: flex; flex-flow: column; justify-content: center; align-items: center;
  text-align: center;
  padding: 120px var(--gotera) 80px;
  background-color: var(--ultramar);
  color: var(--blanco-digital);
  overflow: hidden;
}
.portada-antetit {
  font-size: .85rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--celeste); margin: 0 0 28px;
}
.portada-titulo {
  font-size: var(--titular);
  font-weight: 600; line-height: 1; letter-spacing: -.02em;
  text-wrap: balance; margin: 0; max-width: 16em;
}
.portada-sub {
  font-size: var(--sub);
  font-weight: 400; line-height: 1.3; text-wrap: balance;
  margin: 28px 0 0; max-width: 24em; color: #fafafa;
}
.portada-botones { margin: 40px 0 0; }
.portada .boton {
  background: var(--blanco-digital); color: var(--ultramar); border-color: var(--blanco-digital);
  font-size: calc(var(--sub) * .72); padding: 15px 30px;
}
.portada .boton:hover { background: var(--celeste); border-color: var(--celeste); color: var(--ultramar); }

.portada-baja {
  position: absolute; bottom: 36px; left: 50%; translate: -50% 0;
  display: flex; flex-flow: column-reverse; align-items: center; gap: 12px;
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: #fafafa;
  text-decoration: none;
  transition: color .3s;
}
.portada-baja:hover { color: #fafafa; }
.portada-baja .flecha {
  width: 1px; height: 42px; background: currentColor;
  animation: bajar 2.4s var(--curva) infinite;
}
@keyframes bajar {
  0%, 100% { transform: scaleY(.3); transform-origin: top; opacity: .3; }
  50%      { transform: scaleY(1);  transform-origin: top; opacity: 1; }
}

/* ---------- Módulo lateral plegable · Lo que miramos ---------------------- */
.metodo {
  border-block: 1px solid var(--linea-suave);
  background: #fafafa;
}
.metodo-boton {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: var(--col-texto); max-width: var(--col-texto-max);
  margin-inline: auto; padding: 28px var(--gotera);
  background: none; border: 0; cursor: pointer; text-align: left;
  font-size: var(--cuerpo); font-weight: 500; line-height: 1.35;
}
.metodo-boton .signo { font-size: 1.4em; line-height: 1; transition: rotate .3s var(--curva); }
.metodo-boton[aria-expanded="true"] .signo { rotate: 45deg; }
.metodo-cuerpo { padding-bottom: 40px; }
.metodo-cuerpo[hidden] { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 0 1.4em; padding: 0; list-style: none; }
.chips li {
  border: 1px solid var(--ultramar); border-radius: 48px;
  padding: 6px 15px; font-size: .92rem; font-weight: 500; color: var(--ultramar);
}
.salidas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* ---------- Botones ------------------------------------------------------- */
.boton {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ultramar); color: var(--blanco-digital);
  border: 1px solid var(--ultramar); border-radius: 48px;
  padding: 13px 26px; font-size: 1rem; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background-color .3s, color .3s;
}
.boton:hover { background: #001e4e; border-color: #001e4e; }
.boton.linea { background: none; color: var(--ultramar); }
.boton.linea:hover { background: var(--ultramar); color: var(--blanco-digital); }
.cap.noche .boton.linea { color: var(--blanco-digital); border-color: var(--blanco-digital); }
.cap.noche .boton.linea:hover { background: var(--blanco-digital); color: var(--noche); }

/* ---------- Tarjetas de lectura (03 · lo que funciona) -------------------- */
.tarjetas {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin: 0; padding: 0; list-style: none;
}
.tarjeta {
  border: 1px solid var(--linea-suave); border-radius: 20px;
  padding: 28px; background: #fafafa;
}
.tarjeta h3 { margin: 0 0 14px; font-size: var(--rotulo); font-weight: 600; letter-spacing: -.01em; }
.tarjeta p { margin: 0; font-size: calc(var(--cuerpo) - 3px); line-height: 1.55; }

/* ---------- CTA final ----------------------------------------------------- */
.cta-doble { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.cta-caja {
  border: 1px solid var(--linea-suave); border-radius: 20px;
  padding: 36px; background: #fafafa;
  display: flex; flex-flow: column; gap: 16px; align-items: flex-start;
}
.cta-caja h3 { margin: 0; font-size: calc(var(--rotulo) + 4px); font-weight: 600; letter-spacing: -.015em; }
.cta-caja p { margin: 0; font-size: calc(var(--cuerpo) - 3px); line-height: 1.55; }

.pie {
  border-top: 1px solid var(--linea-suave);
  padding: 48px var(--gotera);
  display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between;
  font-size: .95rem;
}
.pie-enlaces { display: flex; flex-wrap: wrap; gap: 20px; }

/* ---------- Responsive ---------------------------------------------------- */
/* El 50 % se mantiene en cualquier escritorio. Solo por debajo de 1000 px la
   columna se ensancha, porque a esa anchura la medida se quedaría en 45
   caracteres y el texto empezaría a picarse. */
@media screen and (max-width: 1000px) { :root { --col-texto: 68%; } }
@media screen and (max-width: 760px) {
  :root { --col-texto: 100%; --gotera: 20px; }
  .golpe, .remate { width: auto; margin-inline: 0; }
  .tarjetas, .cta-doble { grid-template-columns: 1fr; }
  .cabecera { grid-template-columns: auto 1fr; }
  .cabecera-titulo { display: none; }
  .marcador { top: 50px; }
}
@media screen and (max-width: 760px) {
  .portada-foto { background-image: url('../images/portada-mob.jpg?v=1791185494'); background-position: 72% 50%; }
}

@media screen and (max-width: 480px) {
  .cabecera-logo img { width: 104px; }
  .cabecera-metodo { padding: 6px 12px; font-size: .76rem; }
}

/* ---------- Piezas que asoman (reveal al scroll) -------------------------- */
.asomar { opacity: 0; translate: 0 22px; }
.asomar.asoma { opacity: 1; translate: 0 0; transition: opacity .7s var(--curva), translate .7s var(--curva); }

@media (scripting: none) and (prefers-reduced-motion: reduce) {
  .asomar { opacity: 1; translate: 0 0; }
  .portada-baja .flecha { animation: none; }
  .portada.cargada .portada-foto { transition: opacity .4s; scale: 1; }
}
html.sin-animaciones .asomar { opacity: 1; translate: 0 0; }
html.sin-animaciones .portada-baja .flecha { animation: none; }
html.sin-animaciones .portada.cargada .portada-foto { transition: opacity .4s; scale: 1; }


/* ---------- Retrato de Marta · el hilo del reportaje ----------------------
   Sin pie: quién es lo cuenta el propio relato unas líneas más abajo.       */
.retrato {
  margin: 0 0 var(--aire-lee);
  display: flex; justify-content: center;
}
.retrato img {
  width: 260px; height: 260px;
  border-radius: 50%; object-fit: cover;
  background-color: var(--ultramar);
}

/* ---------- El buscador de la web oficial --------------------------------- */
/* No es un campo de verdad: es la imagen de lo que Marta escribió. */
.buscador {
  display: flex; align-items: center; gap: 20px;
  width: min(100%, 900px); margin-inline: auto;
  background: #fafafa;
  border: 1px solid var(--linea-suave);
  border-radius: 80px;
  box-shadow: 0 18px 50px #1111110f;
  padding: 20px 22px 20px 40px;
  position: relative; z-index: 2;
}
.buscador-lupa { flex: none; width: calc(var(--buscador) * .62); color: var(--gris-oscuro-accesible); }
.buscador-campo {
  display: flex; align-items: center; gap: 3px;
  flex: 1; min-width: 0;
  height: calc(var(--buscador) * 1.15);
}
.buscador-texto {
  font-size: var(--buscador); font-weight: 500; letter-spacing: -.02em; line-height: 1.1;
  white-space: nowrap;
  margin-top: -6px;   /* corrige la altura de la x de PV Sans contra el cursor */
}
.buscador-cursor {
  width: 2px; height: calc(var(--buscador) * .92);
  background: var(--ultramar); flex: none;
  animation: parpadeo 1.1s steps(1) infinite;
}
.buscador.escrito .buscador-cursor { animation: none; opacity: 0; }
@keyframes parpadeo { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.buscador-boton {
  flex: none;
  background: var(--ultramar); color: var(--blanco-digital);
  border-radius: 80px;
  padding: calc(var(--buscador) * .34) calc(var(--buscador) * .72);
  font-size: calc(var(--buscador) * .46); font-weight: 600; white-space: nowrap;
  transition: transform .18s var(--curva), background-color .18s;
}
.buscador.pulsa .buscador-boton { background: #001e4e; transform: scale(.94); }

/* El ratón de mentira: aparece, se acerca al botón y pulsa */
.raton {
  position: absolute; z-index: 3;
  width: 30px; opacity: 0;
  translate: -4px -2px;
  transition: left .95s var(--curva), top .95s var(--curva), opacity .4s, scale .18s var(--curva);
  filter: drop-shadow(0 4px 10px #11111133);
  pointer-events: none;
}
.raton.entra { opacity: 1; }
.buscador.pulsa .raton { scale: .82; }

@media (scripting: none) and (prefers-reduced-motion: reduce) {
  .buscador-cursor { animation: none; opacity: 0; }
  .raton { display: none; }
  .buscador.pulsa .buscador-boton { transform: none; }
}
html.sin-animaciones .buscador-cursor { animation: none; opacity: 0; }
html.sin-animaciones .raton { display: none; }
html.sin-animaciones .buscador.pulsa .buscador-boton { transform: none; }

/* ---------- Bocadillo · las preguntas clave de Marta ----------------------
   Mismo objeto que en la landing original: fondo ultramar, texto blanco y la
   cola arriba a la derecha, saliendo del texto que lo precede.               */
.bocadillo {
  color: var(--blanco-digital);
  background-color: var(--ultramar);
  border-radius: 32px;
  width: min(100%, 860px);
  margin-inline: auto;
  padding: 56px 48px;
  position: relative;
}
.bocadillo:before {
  content: "";
  border-bottom: 26px solid var(--ultramar);
  border-left: 38px solid #0000;
  width: 0; height: 0;
  position: absolute; top: -25px; right: 72px;
}
.bocadillo p {
  text-wrap: balance; margin: 0;
  font-size: var(--bocadillo); font-weight: 600; line-height: 1.06; letter-spacing: -.02em;
}
/* Sobre banda oscura, el bocadillo se invierte */
.cap.noche .bocadillo { background-color: var(--blanco-digital); color: var(--celeste); }
.cap.noche .bocadillo:before { border-bottom-color: var(--blanco-digital); }

@media screen and (max-width: 1000px) { .retrato img { width: 200px; height: 200px; } }

@media screen and (max-width: 760px) {
  .retrato img { width: 160px; height: 160px; }
  .buscador { padding: 18px 24px; gap: 14px; border-radius: 40px; }
  .bocadillo { padding: 34px 26px; border-radius: 24px; }
  .bocadillo:before { right: 40px; }
}

/* ---------- 01 · La mochila ----------------------------------------------
   Una pista alta con una escena pegada dentro. El avance del scroll por la
   pista es la única interacción: con él van saliendo las etiquetas, una a
   una, hasta cubrir la pregunta de Marta.                                   */

/* Sin aire por arriba: la escena arranca pegada al texto que la trae */
.mochila { margin-block: 0 var(--aire-banda); }
.mochila-pista { height: 340vh; position: relative; }
/* La escena se ancla bajo la cabecera y su contenido se centra un poco por
   encima de la mitad, para que la pregunta caiga cerca del texto anterior */
.mochila-escena {
  position: sticky; top: var(--alto-cabecera);
  height: calc(100svh - var(--alto-cabecera));
  display: flex; align-items: center; justify-content: center;
  padding: var(--gotera) var(--gotera) 14vh;
  overflow: hidden;
}

/* La pregunta, en el centro. Es el mismo bocadillo del resto del reportaje y
   entra igual que las etiquetas que vendrán detrás, solo que primero. */
.mochila-pregunta {
  position: relative; z-index: 2;
  width: min(100%, 640px); margin: 0;
  opacity: 0;
  translate: 0 36px;
  transition: opacity .6s var(--curva), translate .6s var(--curva),
              scale .8s var(--curva);
}
.mochila.planteada .mochila-pregunta { opacity: 1; translate: 0 0; }
/* Se va justo cuando cae la carpeta encima: la tapa y la sustituye */
.mochila.rematada .mochila-pregunta { opacity: 0; scale: .96; }

/* Las etiquetas: lenguaje administrativo real, no decoración */
/* --cerco va de 1 a 0,5 con el avance: las etiquetas se van metiendo hacia el
   centro, como si las estuvieran archivando en el carpetón. */
.mochila-etiquetas {
  position: absolute; inset: 0; z-index: 3;
  margin: 0; padding: 0; list-style: none;
  pointer-events: none;
  --cerco: 1;
}
.etiqueta {
  position: absolute;
  /* --dx y --dy son la distancia al centro; el cerco la encoge */
  left: calc(50% + var(--dx) * var(--cerco));
  top: calc(50% + var(--dy) * var(--cerco));
  translate: -50% -50%;
  rotate: var(--giro, 0deg);
  padding: 11px 20px;
  border-radius: 48px;
  font-size: var(--nota);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  scale: .82;
  transition: opacity .45s var(--curva), scale .45s var(--rebote);
}
.etiqueta.puesta { opacity: 1; scale: 1; }

/* Cuatro familias. No se nombran: se reconocen */
.etiqueta[data-familia="organismos"]     { background: #196aff26; color: var(--ultramar); }
.etiqueta[data-familia="sedes"]          { background: #57afff40; color: #001e4e; }
.etiqueta[data-familia="identificacion"] { background: #001e4e1f; color: #001e4e; }
.etiqueta[data-familia="documentos"]     { background: #1111111a; color: #111111; }

/* El golpe: una carpeta que cae encima del bocadillo y lo tapa.
   Cuerpo redondeado y una pestaña arriba a la izquierda, del mismo verde. */
.mochila-golpe {
  position: absolute; z-index: 4;
  left: 50%; top: 50%; translate: -50% -50%;
  /* Más estrecha que el bocadillo y bastante más alta: tiene que taparlo */
  width: min(100%, 600px);
  background-color: var(--menta);
  color: var(--negro-digital);
  border-radius: 4px 32px 32px 32px;
  padding: 104px 52px 96px;
  box-shadow: 0 26px 60px #001e4e26;
  opacity: 0; scale: .94;
  transition: opacity .5s var(--curva), scale .5s var(--rebote);
  pointer-events: none;
}
/* La pestaña de la carpeta */
.mochila-golpe:before {
  content: "";
  position: absolute; left: 0; top: -26px;
  width: 42%; height: 32px;
  background-color: var(--menta);
  border-radius: 16px 16px 0 0;
}
.mochila.rematada .mochila-golpe { opacity: 1; scale: 1; }
.mochila-golpe p {
  margin: 0;
  font-size: var(--golpe); font-weight: 600; line-height: 1;
  letter-spacing: -.03em;
}

@media screen and (max-width: 760px) {
  .mochila-golpe { padding: 56px 26px 50px; border-radius: 4px 20px 20px 20px; }
  .mochila-golpe:before { top: -20px; height: 22px; border-radius: 10px 10px 0 0; }
}

@media screen and (max-width: 760px) {
  .mochila-pista { height: 280vh; }
  .etiqueta { padding: 9px 15px; font-size: 14px; }
}

@media (scripting: none) and (prefers-reduced-motion: reduce) {
  .etiqueta, .mochila-golpe, .mochila-pregunta { transition: none; }
  .ruta li { opacity: 1; translate: 0 0; transition: none; }
  .raton-ruta { display: none; }
  .comunidad .agente-celda:nth-child(3) .agente-foto { scale: 1; transition: none; }
}
html.sin-animaciones .etiqueta, html.sin-animaciones .mochila-golpe, html.sin-animaciones .mochila-pregunta { transition: none; }
html.sin-animaciones .ruta li { opacity: 1; translate: 0 0; transition: none; }
html.sin-animaciones .raton-ruta { display: none; }
html.sin-animaciones .comunidad .agente-celda:nth-child(3) .agente-foto { scale: 1; transition: none; }

/* Lo que la web devolvió: no es un bloque aparte, es la misma pieza. La ficha
   nace por detrás del buscador (de ahí el margen negativo y el padding alto) y
   baja hasta su sitio cuando la búsqueda termina.
   No hace falta recortar nada: mientras está cerrada, la tapa el propio
   buscador, que va por encima. */
.buscador-resultado {
  width: min(100%, 900px);
  margin: -90px auto 0;
  display: grid;
  position: relative; z-index: 0;
  opacity: 0;
  translate: 0 -70px;
  transition: translate .7s var(--curva), opacity .45s var(--curva);
}
.buscador-resultado.abierto { opacity: 1; translate: 0 0; }
.buscador-resultado-caja {
  margin: 0;
  background: #fafafa;
  border: 1px solid var(--linea-suave);
  border-radius: 52px;
  box-shadow: 0 18px 50px #1111110f;
  padding: 120px 40px 30px;
  font-size: var(--resultado); font-weight: 500; line-height: 1.25;
  letter-spacing: -.01em;
  text-align: center;
}
/* El número crece: cifras de ancho fijo para que no baile la línea.
   No asoma hasta que la frase está escrita; el hueco ya está reservado. */
.cuenta { font-variant-numeric: tabular-nums; }
.tras-escribir { visibility: hidden; }
.tras-escribir.a-la-vista { visibility: visible; }

@media screen and (max-width: 760px) {
  .buscador-resultado { margin-top: -62px; }
  .buscador-resultado-caja { padding: 80px 24px 24px; border-radius: 34px; }
}

/* ---------- 02 · La red · tiempos 1, 2 y 3 --------------------------------
   Una sola escena pegada dentro de una pista alta. El lienzo guarda los 1.300
   puntos, que nacen con el contador y ya no se van: la red se dibuja sobre
   ellos y sigue ahí mientras Marta salta por delante. Por eso el lienzo es
   único y no tres.                                                          */

.red { margin-block: var(--aire-banda); }
.red-pista { height: 420vh; position: relative; }
.red-escena {
  position: sticky; top: var(--alto-cabecera);
  height: calc(100svh - var(--alto-cabecera));
  display: flex; align-items: center; justify-content: center;
  padding: var(--gotera);
  overflow: hidden;
}
.red-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Abajo, los puntos no se cortan contra el texto que viene después: se
   disuelven. El velo va por encima del lienzo y por debajo de los tiempos, que
   llevan z-index 1, así que no toca ni la cifra ni el recorrido.
   Arriba no hay velo a propósito: tapaba las líneas que se van por el borde
   superior y la red parecía abierta solo por abajo. */
.red-escena:after {
  content: "";
  position: absolute; left: 0; right: 0;
  bottom: 0; height: 26%;
  background: linear-gradient(to top, #001e4e, #001e4e00);
  pointer-events: none;
}

/* Los tres tiempos ocupan el mismo sitio y se turnan */
.red-tiempo {
  position: absolute; z-index: 1;
  width: min(100%, 1280px);
  display: flex; flex-flow: column; align-items: center; justify-content: center;
  gap: 28px; text-align: center;
  opacity: 0; translate: 0 18px;
  transition: opacity .5s var(--curva), translate .5s var(--curva);
  pointer-events: none;
}
.red-tiempo.en-turno { opacity: 1; translate: 0 0; pointer-events: auto; }

.red-cifra {
  margin: 0;
  font-size: var(--cifra); font-weight: 300; line-height: .9;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.red-cifra .signo { font-size: .62em; vertical-align: .18em; }
.red-texto {
  margin: 0; max-width: 22em;
  font-size: var(--suelta); font-weight: 400; line-height: 1.3;
  color: #fafafa;
}
.red-giro {
  margin: 0; max-width: 34em;
  font-size: var(--cuerpo); line-height: 1.5; color: #fafafab3;
  opacity: 0; transition: opacity .6s var(--curva);
}
.red-tiempo.con-giro .red-giro { opacity: 1; }
.red-rotulo {
  margin: 0 0 20px;
  font-size: var(--nota); font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--celeste);
}

/* El recorrido: cinco carpetas en fila, unidas por flechas, y debajo el
   texto de la que esté elegida. La forma es la misma del carpetón del 01. */
/* El marco existe para que el ratón de mentira tenga dónde moverse */
.ruta-marco { position: relative; width: 100%; }

.ruta {
  display: flex; align-items: flex-start; justify-content: center;
  flex-wrap: nowrap; gap: 20px;
  width: 100%; margin: 0; padding: 0; list-style: none;
}
/* Las carpetas no salen a la vez: van cayendo una tras otra, en el orden del
   recorrido. El desfase lo pone el CSS, que para cinco no hace falta JS. */
.ruta li {
  display: flex; align-items: flex-start; gap: 20px; flex: 0 1 auto; min-width: 0;
  opacity: 0; translate: 0 18px;
  transition: opacity .5s var(--curva), translate .5s var(--curva);
}
.red-tiempo.en-turno .ruta li { opacity: 1; translate: 0 0; }
.ruta li:nth-child(1) { transition-delay: .1s; }
.ruta li:nth-child(2) { transition-delay: .28s; }
.ruta li:nth-child(3) { transition-delay: .46s; }
.ruta li:nth-child(4) { transition-delay: .64s; }
.ruta li:nth-child(5) { transition-delay: .82s; }
.ruta li:not(:first-child):before {
  content: "→";
  color: #fafafa6b; font-size: 1.6rem; line-height: 1; flex: none;
  margin-top: 46px;
}
.salto {
  cursor: pointer;
  background: none; border: 0; padding: 0;
  width: 156px; min-width: 0;
  display: flex; flex-flow: column; align-items: center; gap: 10px;
  color: var(--blanco-digital);
}
/* La carpeta: cuerpo redondeado y pestaña arriba a la izquierda */
/* Las que no están abiertas son blanco al 90 %: se apoyan un poco en el fondo
   de la banda, lo justo para que la abierta destaque. */
.salto-carpeta {
  position: relative;
  width: 100%; height: 96px;
  background: #fafafae6;
  border-radius: 2px 14px 14px 14px;
  transition: background-color .3s, translate .3s var(--curva);
}
.salto-carpeta:before {
  content: "";
  position: absolute; left: 0; top: -13px;
  width: 44%; height: 15px;
  background: inherit;
  border-radius: 7px 7px 0 0;
}
.salto:hover .salto-carpeta { background: #fafafa; translate: 0 -5px; }
.salto[aria-pressed="true"] .salto-carpeta { background: var(--celeste); }
.salto:focus-visible { outline: 2px solid var(--celeste); outline-offset: 4px; }

.salto-nombre {
  display: block; font-size: var(--nota); font-weight: 600; line-height: 1.15;
  text-align: center;
}
.salto-que {
  display: block; font-size: calc(var(--nota) - 2px); line-height: 1.3;
  color: #fafafab3; text-align: center;
}
.salto[aria-pressed="true"] .salto-que { color: var(--celeste); }

/* El ratón de mentira que enseña que las carpetas se pueden pulsar */
.raton-ruta {
  position: absolute; z-index: 5; top: 0; left: 0;
  width: 30px; opacity: 0;
  translate: -4px -2px;
  /* Mismo ratón que el del buscador del 01. La curva sí cambia: aquí no llega
     a un sitio, lo atraviesa, así que arranca y frena por igual. */
  transition: left 2.3s var(--vaiven), top .5s var(--vaiven), opacity .5s;
  filter: drop-shadow(0 4px 10px #11111166);
  pointer-events: none;
}
.raton-ruta.entra { opacity: 1; }
.raton-ruta.pulsa { scale: .82; }

/* La invitación a pulsar, que se retira en cuanto alguien lo hace */
.ruta-pista {
  margin: 0; color: #fafafab3;
  font-size: calc(var(--nota) - 1px);
  transition: opacity .4s;
}
.ruta-pista.usada { opacity: 0; }

/* El texto del salto elegido, centrado debajo de la fila */
.ruta-detalle {
  width: min(100%, 820px); min-height: 120px;
  display: flex; flex-flow: column; align-items: center; gap: 10px;
  text-align: center;
}
.ruta-titulo {
  margin: 0; color: var(--celeste);
  font-size: var(--nota); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.ruta-texto {
  margin: 0; text-wrap: balance;
  font-size: calc(var(--cuerpo) - 1px); font-weight: 500; line-height: 1.4;
}

@media screen and (max-width: 900px) {
  .red-pista { height: 380vh; }
  /* Recorrido en vertical y tarjetas en acordeón, debajo de cada paso */
  .ruta { flex-flow: column; align-items: stretch; gap: 8px; max-width: 420px; margin-inline: auto; }
  .ruta li { flex-flow: column; align-items: stretch; gap: 8px; }
  .ruta li:not(:first-child):before { content: "↓"; text-align: center; }
  .salto { width: 100%; }
  .salto-carpeta { height: 64px; }
  .ruta-detalle { min-height: 0; }
  .ruta li:not(:first-child):before { font-size: 1.2rem; margin-top: 0; align-self: center; }
}

/* ---------- 02 · Tiempo 4 · las cinco puertas -----------------------------
   Cinco puertas iguales, sin ayuda ninguna, igual que en la sede. Detrás de
   cada una hay un requisito real, no una broma: la frustración tiene que salir
   de que nadie lo explique, no de que el juego esté trucado.               */

/* El bloque se recoge con el truco de 0fr: así la pregunta que viene detrás
   sube a ocupar su sitio en vez de saltar de golpe. */
.puertas {
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows .8s var(--curva);
}
.puertas-interior {
  overflow: hidden;
  display: flex; flex-flow: column; align-items: center; gap: 30px;
  text-align: center;
}
.puertas-encargo {
  margin: 0; max-width: 24em;
  font-size: var(--suelta); font-weight: 400; line-height: 1.3;
  color: #fafafa;
}
.puertas-encargo strong { color: var(--blanco-digital); font-weight: 600; }

/* Las cinco reparten el ancho: en una fila mientras quepan, y si no, se
   parten solas. Todas del mismo tamaño, siempre. */
.puertas-fila {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 16px;
  width: 100%; margin: 0; padding: 0; list-style: none;
}
.puertas-fila li { flex: 1 1 126px; min-width: 0; max-width: 190px; display: flex; }

/* La puerta: un hueco vertical con su tirador. Todas iguales, como en la web */
.puerta-boton {
  cursor: pointer;
  width: 100%;
  background: #fafafa14;
  border: 1px solid #fafafa2e;
  border-radius: 12px 12px 3px 3px;
  padding: 26px 16px 24px;
  display: flex; flex-flow: column; align-items: center; justify-content: flex-end;
  gap: 16px;
  min-height: 210px;
  color: var(--blanco-digital);
  position: relative;
  transition: background-color .3s, border-color .3s, translate .3s var(--curva),
              opacity .5s var(--curva);
}
.puerta-boton:hover { background: #fafafa21; border-color: var(--celeste); translate: 0 -4px; }
.puerta-boton:focus-visible { outline: 2px solid var(--celeste); outline-offset: 3px; }

/* El tirador */
.puerta-tirador {
  position: absolute; right: 16px; top: 50%;
  width: 9px; height: 9px; border-radius: 50%;
  background: #fafafa5c;
}
.puerta-nombre {
  font-size: var(--nota); font-weight: 600; line-height: 1.25;
  text-wrap: balance;
}

/* La que ya se ha probado queda marcada */
.puerta-boton[data-probada="si"] { background: #fafafa0a; border-style: dashed; }
.puerta-boton[data-probada="si"] .puerta-nombre { color: #fafafab3; }
.puerta-marca {
  font-size: calc(var(--nota) - 3px); letter-spacing: .1em; text-transform: uppercase;
  color: var(--celeste);
}

/* Lo que hay detrás de la puerta elegida */
.puertas-respuesta:empty { display: none; }
.puertas-respuesta {
  width: min(100%, 680px);
  background: #fafafa0f;
  border: 1px solid #fafafa21;
  border-radius: 22px;
  padding: 28px 32px;
  display: flex; flex-flow: column; align-items: center; gap: 16px;
}
.puertas-cual {
  margin: 0; color: var(--celeste);
  font-size: calc(var(--nota) - 1px); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.puertas-pregunta {
  margin: 0; text-wrap: balance;
  font-size: calc(var(--cuerpo) + 2px); font-weight: 500; line-height: 1.35;
}
.puertas-volver {
  cursor: pointer; background: none;
  border: 1px solid var(--celeste); border-radius: 48px;
  padding: 10px 22px; font-size: var(--nota); color: var(--celeste);
  transition: background-color .3s, color .3s;
}
.puertas-volver:hover { background: var(--celeste); color: #001e4e; }

.puertas-nose {
  cursor: pointer; background: none; border: 0;
  padding: 0; font-size: var(--nota); color: #fafafab3;
  text-decoration: underline; text-underline-offset: 4px;
  transition: color .3s;
}
.puertas-nose:hover { color: var(--blanco-digital); }
.puertas-rendirse { margin: 0; }

/* Al rendirse, las cinco se van hacia el centro y se apagan. Cuando han
   terminado de irse, el bloque entero se recoge: si no, queda un hueco
   enorme delante de la pregunta. */
.puertas.fundidas .puerta-boton {
  opacity: 0; pointer-events: none;
  translate: calc((2 - var(--sitio)) * 60px) 0;
}
.puertas.fundidas .puertas-encargo { opacity: 0; transition: opacity .5s var(--curva); }
.puertas.fundidas .puertas-rendirse,
.puertas.fundidas .puertas-respuesta { display: none; }
.puertas.recogidas { grid-template-rows: 0fr; }

/* La salida honesta: discreta, pero ahí */
.salida-honesta {
  border-top: 1px solid var(--linea-suave);
  margin-top: var(--aire-lee);
  padding-top: 20px;
}
.cap.noche .salida-honesta { border-top-color: var(--linea-noche); }
.salida-honesta summary {
  cursor: pointer; list-style: none;
  font-size: var(--cuerpo); font-weight: 500;
  padding: 6px 0;
}
.salida-honesta summary::-webkit-details-marker { display: none; }
.salida-honesta summary:before { content: "+ "; color: var(--celeste); }
.salida-honesta[open] summary:before { content: "– "; }
.salida-cuerpo { padding-top: 12px; }
.salida-cuerpo p { margin: 0 0 .9em; font-size: calc(var(--cuerpo) - 3px); line-height: 1.5; }
.salida-remate { font-weight: 500; }

@media screen and (max-width: 760px) {
  .puertas-fila li { flex-basis: calc(50% - 8px); max-width: none; }
  .puerta-boton { min-height: 140px; padding: 18px 12px 16px; }
  .puertas-respuesta { padding: 22px 20px; border-radius: 18px; }
}

/* ==========================================================================
   3 · BORRADORES · cajas de las interacciones pendientes
   Se retiran a medida que cada interacción se construye.
   ========================================================================== */

.borrador {
  position: relative;
  border: 1px dashed #11111180;
  border-radius: 24px;
  background: repeating-linear-gradient(135deg, #11111105 0 12px, transparent 12px 24px);
  padding: var(--pad-borrador);
}
.cap.noche .borrador { border-color: #fafafa4d; background: repeating-linear-gradient(135deg, #fafafa08 0 12px, transparent 12px 24px); }

.borrador-etiqueta {
  position: absolute; top: -12px; left: 28px;
  background: var(--naranja); color: #fafafa;
  border-radius: 48px; padding: 4px 14px;
  font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.borrador h3 {
  margin: 8px 0 20px;
  font-size: calc(var(--rotulo) + 2px); font-weight: 600; line-height: 1.15;
}
.borrador-ficha { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; }
.borrador-ficha dt {
  font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gris-oscuro-accesible); padding-top: 4px;
}
.cap.noche .borrador-ficha dt { color: #fafafab3; }
.borrador-ficha dd { margin: 0; font-size: 1.02rem; line-height: 1.5; }
.borrador-datos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.borrador-datos li {
  border: 1px solid currentColor; border-radius: 6px;
  padding: 3px 10px; font-size: .88rem; opacity: .8;
}
@media screen and (max-width: 640px) {
  .borrador-ficha { grid-template-columns: 1fr; gap: 4px 0; }
  .borrador-ficha dd { margin-bottom: 14px; }
}




/* ==========================================================================
   4 · COMUNIDAD AGÉNTICA · ZONA PROTEGIDA
   Copiado literal de build/css/style.css (bloques 5199-5788 y 6001-6056).
   Único cambio: el selector de banda oscura .cap.noche pasa a .cap.noche,
   que es como se llama aquí. La lógica y las medidas no se tocan.
   Ver README-IA.md, apartado 7, antes de modificar nada de esto.
   ========================================================================== */

/* ---------- Qué dice la IA · comunidad agéntica -------------------------- */
.comunidad {
  grid-column-gap: 24px;
  grid-row-gap: 40px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}
.agente-celda { display: flex; }

/* La tarjeta entera es el enlace al popup. Sin padding: el borde va en una
   capa propia que coincide exactamente con el ancho y el final del botón. */
.agente {
  color: var(--negro-digital);
  text-align: center;
  cursor: pointer;
  background-color: #0000;
  border: none;
  flex-flow: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  padding: 0;
  font-family: Pv sans, Arial, sans-serif;
  display: flex;
  position: relative;
}
.agente:before {
  content: "";
  z-index: 0;
  pointer-events: none;
  border: 1px solid #0000;
  border-radius: 24px;
  transition: background-color .45s var(--curva), border-color .45s var(--curva);
  position: absolute;
  /* Baja 84 px: el bocadillo asoma por encima y pisa el borde */
  inset: 84px 0 0;
}
.agente > * { z-index: 1; position: relative; }

/* Foto, nombre, edad y situación, con un poco de aire a los lados */
.agente-ficha {
  flex-flow: column;
  align-items: center;
  width: 100%;
  padding-left: 14px;
  padding-right: 14px;
  display: flex;
}
.agente:hover:before { border-color: var(--gris-claro); }
.agente:hover .agente-hablar {
  color: var(--blanco-digital);
  background-color: var(--ultramar);
}
.agente:focus-visible {
  outline: 2px solid var(--ultramar);
  outline-offset: 3px;
}

/* La foto: un círculo con la inicial. Son perfiles sintéticos, así que no
   ponemos rostros; el retrato real iría justo aquí. */
.agente-foto {
  color: var(--blanco-digital);
  aspect-ratio: 1;
  background-color: var(--ultramar);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 132px;
  margin-bottom: 14px;
  margin-top: 0;
  font-family: Pv sans, Arial, sans-serif;
  font-size: 2.6rem;
  font-weight: 500;
  display: flex;
}
.agente-foto.celeste { color: var(--ultramar); background-color: var(--celeste); }
.agente-foto.negro { background-color: var(--negro-digital); }
.agente-nombre {
  text-align: center;
  font-family: Pv sans, Arial, sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.1;
}
.agente-edad {
  color: var(--gris-oscuro-accesible);
  font-family: Pv sans, Arial, sans-serif;
  font-size: .95rem;
}
.agente-situacion {
  color: var(--negro-digital);
  text-align: center;
  text-wrap: balance;
  margin-bottom: 18px;
  font-family: Pv sans, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.3;
}

/* Los tres bocadillos ocupan el mismo sitio y se van turnando */
.agente-dice {
  width: 100%;
  min-height: 170px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  position: relative;
}
.agente-burbuja {
  color: var(--negro-digital);
  opacity: 0;
  background-color: var(--gris-claro);
  border-radius: 20px;
  /* Se sale 6 px por cada lado: gana aire sin estrechar el texto */
  width: auto;
  margin: 0 -6px;
  padding: 20px 22px;
  font-family: Pv sans, Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.3;
  transition: opacity .5s ease, transform .5s ease;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translateY(10px);
}

/* La cola apunta hacia abajo, centrada bajo el bocadillo y sobre la foto */
.agente-burbuja:after {
  content: "";
  border-top: 14px solid var(--gris-claro);
  border-left: 10px solid #0000;
  border-right: 10px solid #0000;
  width: 0;
  height: 0;
  margin-left: -10px;
  position: absolute;
  bottom: -13px;
  left: 50%;
}
.agente-burbuja.activa {
  opacity: 1;
  transform: none;
}

/* Sin movimiento: los tres a la vez, apilados */
.comunidad.sin-turno .agente-dice {
  grid-row-gap: 14px;
  flex-flow: column;
  min-height: 0;
  display: flex;
}
.comunidad.sin-turno .agente-burbuja { position: static; }
.comunidad.sin-turno .agente-burbuja {
  position: static;
  transform: none;
}

@media screen and (max-width: 991px) {
.comunidad { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.agente-foto { max-width: 104px; }
}

@media screen and (max-width: 767px) {
.comunidad { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-column-gap: 16px; }
.agente-foto { max-width: 84px; margin-bottom: 10px; }
.agente:before { inset: 68px 0 0; }
.agente-nombre { font-size: 1.2rem; }
.agente-dice { min-height: 190px; }
.agente-burbuja { padding: 16px 18px; font-size: .98rem; }
}

/* ---------- Habla con… · ventana de conversación ------------------------ */

/* El pie de la tarjeta, con aspecto de botón. El pulsable es la tarjeta.
   En reposo va en contorno; al pasar por la tarjeta, se rellena. */
.agente-hablar {
  color: var(--ultramar);
  background-color: var(--blanco-digital);
  border: 1px solid var(--ultramar);
  border-radius: 48px;
  width: 100%;
  margin-top: auto;
  padding: 14px 18px;
  font-family: Pv sans, Arial, sans-serif;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.15;
  transition: background-color .3s, color .3s;
  display: block;
}

@media screen and (max-width: 767px) {
.agente-hablar { padding: 12px 12px; font-size: .88rem; }
.agente-ficha { padding-left: 8px; padding-right: 8px; }
}
.respuesta-texto {
  margin: 0;
  font-family: Pv sans, Arial, sans-serif;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  font-weight: 400;
  line-height: 1.45;
}
.respuesta-retos {
  grid-row-gap: 14px;
  flex-flow: column;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}
.respuesta-retos li {
  border-left: 3px solid var(--ultramar);
  padding-left: 18px;
  font-family: Pv sans, Arial, sans-serif;
  font-size: 1.1rem;
  line-height: 1.4;
}
.respuesta-redes {
  grid-row-gap: 16px;
  flex-flow: column;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}
.mensaje-red {
  background-color: var(--gris-claro);
  border-radius: 16px;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  display: flex;
}
.icono-red {
  background-color: var(--ultramar);
  border-radius: 50%;
  flex: none;
  width: 34px;
  height: 34px;
  padding: 8px;
}
.mensaje-cuerpo { flex-flow: column; gap: 4px; display: flex; }
.mensaje-red-nombre {
  color: var(--gris-oscuro-accesible);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-family: Pv sans, Arial, sans-serif;
  font-size: .8rem;
  font-weight: 500;
}
.mensaje-texto {
  font-family: Pv sans, Arial, sans-serif;
  font-size: 1.1rem;
  line-height: 1.4;
}

/* Los enlaces internos (#…) se desplazan con suavidad, salvo si se ha pedido
   reducir el movimiento */
@media (prefers-reduced-motion: no-preference), (scripting: enabled) {
  html:not(.sin-animaciones) { scroll-behavior: smooth; }
}

/* Los enlaces de la portada aterrizan en el titular, no bajo la barra anclada */
#t-necesidad, #t-ia { scroll-margin-top: 140px; }

/* ---------- Ventana de conversación con un perfil ------------------------ */
.visualmente-oculto {
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  position: absolute;
  overflow: hidden;
}
body.con-charla { overflow: hidden; }
.charla-modal {
  z-index: 950;
  justify-content: center;
  align-items: center;
  padding: 24px;
  display: flex;
  position: fixed;
  inset: 0;
}
.charla-modal[hidden] { display: none !important; }
.charla-fondo {
  background-color: #001e4ee6;
  position: absolute;
  inset: 0;
}
.charla-caja {
  z-index: 1;
  background-color: var(--blanco-digital);
  border-radius: 24px;
  width: 100%;
  max-width: 1100px;
  height: min(88vh, 760px);
  display: flex;
  position: relative;
  overflow: hidden;
}
.charla-cerrar {
  z-index: 2;
  color: var(--negro-digital);
  cursor: pointer;
  background: none;
  border: none;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 2rem;
  line-height: 1;
  position: absolute;
  top: 12px;
  right: 16px;
}
.charla-cerrar:focus-visible {
  outline: 2px solid var(--ultramar);
  outline-offset: 2px;
  border-radius: 6px;
}

/* A un lado, quién responde */
.charla-perfil {
  color: var(--blanco-digital);
  background-color: var(--ultramar);
  flex-flow: column;
  flex: none;
  gap: 6px;
  width: 320px;
  padding: 44px 32px 32px;
  display: flex;
}
.charla-foto {
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 50% 30%;
  background-color: var(--celeste);
  border-radius: 50%;
  width: 96px;
  margin-bottom: 18px;
  display: block;
}
.charla-nombre {
  font-family: Pv sans, Arial, sans-serif;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.1;
}
.charla-edad {
  color: var(--celeste);
  font-family: Pv sans, Arial, sans-serif;
  font-size: 1rem;
}
.charla-situacion {
  margin-top: 8px;
  font-family: Pv sans, Arial, sans-serif;
  font-size: 1.1rem;
  line-height: 1.35;
}
.charla-reto {
  color: var(--celeste);
  border: 1px solid #fafafa3d;
  border-radius: 48px;
  align-self: flex-start;
  margin-top: 14px;
  padding: 6px 14px;
  font-family: Pv sans, Arial, sans-serif;
  font-size: .85rem;
}
.charla-fin {
  text-align: center;
  border-top: 1px solid var(--linea-suave);
  flex-flow: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-top: 4px;
  padding: 22px 4px 4px;
  display: flex;
}
.charla-fin-nota {
  color: var(--gris-medio);
  max-width: 34em;
  margin: 0;
  font-family: Pv sans, Arial, sans-serif;
  font-size: .9rem;
  line-height: 1.45;
}
.charla-fin-cta {
  color: var(--ultramar);
  text-wrap: balance;
  max-width: 26em;
  margin: 0;
  font-family: Pv sans, Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.3;
}
.charla-fin-enlace {
  color: var(--blanco-digital);
  background-color: var(--ultramar);
  border-radius: 48px;
  padding: 13px 28px;
  font-family: Pv sans, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .3s;
}
.charla-fin-enlace:hover { background-color: #001e4e; }
.charla-fin-enlace:focus-visible {
  outline: 2px solid var(--ultramar);
  outline-offset: 3px;
}
.charla-aviso {
  color: #fafafacc;
  border-top: 1px solid #fafafa33;
  margin: auto 0 0;
  padding-top: 18px;
  font-family: Pv sans, Arial, sans-serif;
  font-size: .85rem;
  line-height: 1.4;
}

/* Y al otro, la conversación */
.charla-cuerpo {
  flex-flow: column;
  flex: 1;
  min-width: 0;
  display: flex;
}
.charla-pestanas {
  border-bottom: 1px solid var(--linea-suave);
  flex-flow: wrap;
  flex: none;
  gap: 6px;
  padding: 20px 56px 0 28px;
  display: flex;
}
.charla-pestana {
  color: var(--gris-oscuro-accesible);
  cursor: pointer;
  background: none;
  border: none;
  border-bottom: 3px solid #0000;
  padding: 10px 14px 14px;
  font-family: Pv sans, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  transition: color .3s, border-color .3s;
}
.charla-pestana:hover { color: var(--negro-digital); }
.charla-pestana[aria-selected="true"] {
  color: var(--negro-digital);
  border-bottom-color: var(--ultramar);
  font-weight: 600;
}
.charla-pestana:focus-visible {
  outline: 2px solid var(--ultramar);
  outline-offset: -4px;
  border-radius: 6px;
}
.charla-panel {
  flex: 1;
  padding: 28px;
  overflow-y: auto;
}

/* El hilo */
.charla-hilo {
  grid-row-gap: 14px;
  flex-flow: column;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  display: flex;
}
.charla-mensaje {
  max-width: 78%;
  padding: 16px 20px;
  font-family: Pv sans, Arial, sans-serif;
  font-size: 1.1rem;
  line-height: 1.4;
}
.charla-mensaje.ella {
  color: var(--negro-digital);
  background-color: var(--gris-claro);
  border-radius: 4px 20px 20px 20px;
  align-self: flex-start;
}
.charla-mensaje.yo {
  color: var(--blanco-digital);
  background-color: var(--ultramar);
  border-radius: 20px 4px 20px 20px;
  align-self: flex-end;
}
.charla-sugerencias {
  flex-flow: wrap;
  gap: 8px;
  display: flex;
}
.charla-sugerencia {
  color: var(--ultramar);
  cursor: pointer;
  background: none;
  border: 1px solid var(--ultramar);
  border-radius: 48px;
  padding: 9px 16px;
  font-family: Pv sans, Arial, sans-serif;
  font-size: .95rem;
  transition: background-color .3s, color .3s;
}
.charla-sugerencia:hover {
  color: var(--blanco-digital);
  background-color: var(--ultramar);
}
.charla-sugerencia:focus-visible {
  outline: 2px solid var(--ultramar);
  outline-offset: 2px;
}

@media screen and (max-width: 860px) {
.charla-modal { padding: 0; }
.charla-caja {
    border-radius: 0;
    flex-flow: column;
    height: 100%;
    max-height: none;
  }
.charla-perfil {
    flex-flow: row;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 20px 56px 20px 20px;
  }
.charla-foto { width: 60px; margin-bottom: 0; }
.charla-nombre { font-size: 1.3rem; }
.charla-situacion, .charla-aviso, .charla-reto { display: none; }
.charla-pestanas { padding: 14px 20px 0; }
.charla-panel { padding: 20px; }
.charla-mensaje { max-width: 88%; }
}

/* Los tres puntos mientras el perfil "escribe" */
.charla-mensaje.escribiendo {
  align-items: center;
  gap: 6px;
  padding: 20px;
  display: flex;
}
.charla-mensaje.escribiendo span {
  background-color: var(--gris-oscuro-accesible);
  border-radius: 50%;
  width: 8px;
  height: 8px;
  animation: 1.2s ease-in-out infinite puntos;
  display: block;
}
.charla-mensaje.escribiendo span:nth-child(2) { animation-delay: .18s; }
.charla-mensaje.escribiendo span:nth-child(3) { animation-delay: .36s; }

@keyframes puntos {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-4px); }
}

@media (scripting: none) and (prefers-reduced-motion: reduce) {
.charla-mensaje.escribiendo span { animation: none; opacity: .5; }
}
html.sin-animaciones .charla-mensaje.escribiendo span { animation: none; opacity: .5; }

/* ==========================================================================
   Animaciones. Todo con transiciones y fotogramas de CSS: el JS solo pone y
   quita clases, y reparte los retardos de las cascadas.
   ========================================================================== */
:root {
  --curva: cubic-bezier(.22, .61, .36, 1);
  --rebote: cubic-bezier(.34, 1.56, .64, 1);
}


/* ---------- Ajustes de la banda oscura ------------------------------------ */
.cap.noche {
  color: var(--blanco-digital);
  background-color: #001e4e;
  background-image: radial-gradient(120% 90% at 78% 12%, #196aff40 0%, #196aff00 58%);
}

.cap.noche .h2,
.cap.noche .p,
.cap.noche .agente-nombre,
.cap.noche .agente-situacion { color: var(--blanco-digital); }

.cap.noche .nota-pie { color: #fafafacc; }

.cap.noche .antetit.seccion-num {
  color: var(--celeste);
  background-color: #001e4ef2;
}

/* La caja que recoge cada tarjeta: apenas se distingue del fondo y, al pasar
   por encima, se oscurece. Sin borde: basta el cambio de color. */
.cap.noche .agente:before {
  background-color: #fafafa0a;
  border-color: #0000;
}

.cap.noche .agente:hover:before {
  background-color: #111111;
  border-color: #0000;
}

/* Los bocadillos: gris muy oscuro, texto blanco y la cola a juego */
.cap.noche .agente-burbuja {
  color: var(--blanco-digital);
  background-color: #001e4e;
}

.cap.noche .agente-burbuja:after { border-top-color: #001e4e; }

.cap.noche .agente-edad { color: var(--celeste); }

.cap.noche .agente-foto { background-color: #001e4e; }

/* El pie de la tarjeta: contorno claro que se rellena al pasar por encima */
.cap.noche .agente-hablar {
  color: var(--blanco-digital);
  background-color: #0000;
  border-color: var(--celeste);
}

.cap.noche .agente:hover .agente-hablar {
  color: #001e4e;
  background-color: var(--celeste);
}

.cap.noche .agente:focus-visible { outline-color: var(--celeste); }


/* ---------- Animaciones del módulo ---------------------------------------- */
@keyframes asomar { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes asomar-rebote { from { opacity: 0; transform: translateY(16px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes fundir { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-entra { from { opacity: 0; transform: translateY(28px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes perfil-entra { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
.charla-mensaje.asoma { animation: .4s var(--rebote) asomar-rebote; }
.charla-mensaje.yo.asoma { transform-origin: 100% 100%; }
.charla-mensaje.ella.asoma { transform-origin: 0 100%; }
.charla-sugerencias.asoma .charla-sugerencia { animation: .35s var(--curva) both asomar; }
.charla-panel .respuesta-texto.asoma, .charla-panel .respuesta-retos li.asoma, .charla-panel .mensaje-red.asoma { animation: .4s var(--curva) both asomar; }
.charla-modal.asoma .charla-fondo { animation: .3s var(--curva) fundir; }
.charla-modal.asoma .charla-caja { animation: .45s var(--curva) modal-entra; }
.charla-modal.asoma .charla-perfil > * { animation: .4s var(--curva) both perfil-entra; }

@media (scripting: none) and (prefers-reduced-motion: reduce) {
  .charla-mensaje, .charla-sugerencia, .charla-caja, .charla-perfil > * { animation: none !important; }
}
html.sin-animaciones .charla-mensaje, html.sin-animaciones .charla-sugerencia, html.sin-animaciones .charla-caja, html.sin-animaciones .charla-perfil > * { animation: none !important; }

/* ---------- Composición del módulo en el reportaje ------------------------
   Los cinco perfiles, en cinco columnas. Marta va en la del medio —por eso
   es la tercera del array, para que el orden del DOM y el visual coincidan—
   y lo único que crece es su retrato, que sube hacia su bocadillo.          */

@media screen and (min-width: 992px) {
  .comunidad .agente-celda:nth-child(3) .agente-foto {
    max-width: 150px;
    margin-top: -30px;
  }
  /* Su caja negra empieza más arriba y sobresale un poco por abajo: es más
     alta que las otras cuatro sin sacar la tarjeta de la fila. */
  .comunidad .agente-celda:nth-child(3) .agente:before { inset: 96px 0 -22px; }

  /* Y su bocadillo sube con ella: si se quedara abajo, el retrato, que ya ha
     subido 30 px, se le echaría encima. */
  .comunidad .agente-celda:nth-child(3) .agente-burbuja {
    bottom: 34px;
    padding: 24px 26px;
    font-size: 1.12rem;
  }
}

/* El retrato de Marta entra con un zoom cuando se llega a la zona */
.comunidad .agente-celda:nth-child(3) .agente-foto {
  scale: .8;
  transition: scale 1s var(--curva);
}
.comunidad.a-la-vista .agente-celda:nth-child(3) .agente-foto { scale: 1; }

/* Marta va destacada de serie: lo que a las otras cuatro les pasa al pasar el
   ratón, ella lo tiene puesto. */
.cap.noche .comunidad .agente-celda:nth-child(3) .agente:before {
  background-color: #111111;
  border-color: #0000;
}
.cap.noche .comunidad .agente-celda:nth-child(3) .agente-hablar {
  color: #001e4e;
  background-color: var(--celeste);
}

/* El módulo, más alto: los bocadillos tienen más sitio y el borde de la
   tarjeta baja con ellos para mantener el mismo solape de 104 px. */
.comunidad .agente-dice { min-height: 226px; }
.comunidad .agente:before { inset: 140px 0 0; }