/* ==========================================================================
   Reportaje «El carpetón ciudadano» · capa sobre style.css (borrador-ccruz)
   Solo lo que necesita el contenido nuevo: la ficha del informe en portada,
   los desplegables dentro de los capítulos y las cuatro preguntas.
   ========================================================================== */

/* ---------- Portada: titular + entradilla + ficha del informe ------------ */
.portada-titulo { max-width: 12em; }
.portada-sub { max-width: 30em; }
.portada-informe {
  margin: 44px auto 0;
  padding: 22px 28px 26px;
  max-width: 420px;
  border: 1px solid #fafafa38;
  border-radius: 16px;
  background: #001e4e8c;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.portada-informe .portada-antetit { margin: 0 0 10px; }
.portada-informe-titulo { margin: 0; font-size: calc(var(--sub) * .92); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
.portada-informe-sub { margin: 8px 0 18px; font-size: calc(var(--sub) * .62); line-height: 1.35; color: #fafafa; }
.portada-informe .boton { font-size: calc(var(--sub) * .62); padding: 11px 24px; }

/* ---------- Desplegables dentro de los capítulos ------------------------ */
.cap .desplegable { margin-block: var(--aire-lee, 48px); }
.cap.noche .desplegable { background: #fafafa0a; border-color: #fafafa24; }
.cap.noche .metodo-boton { color: var(--blanco-digital); }
.cap.noche .chips li { border-color: #fafafa4d; color: var(--blanco-digital); }
.desplegable .metodo-cuerpo[hidden] { display: none; }

/* ---------- Las cuatro preguntas abiertas ------------------------------- */
.preguntas-abiertas {
  list-style: none;
  margin: 0; padding: 0;
  counter-reset: pregunta;
}
.preguntas-abiertas li {
  counter-increment: pregunta;
  position: relative;
  padding: 26px 0 26px 72px;
  border-top: 1px solid var(--linea-suave);
}
.preguntas-abiertas li:last-child { border-bottom: 1px solid var(--linea-suave); }
.preguntas-abiertas li::before {
  content: counter(pregunta, decimal-leading-zero);
  position: absolute; left: 0; top: 22px;
  font-size: 34px; font-weight: 300; line-height: 1;
  color: var(--azul);
  font-variant-numeric: tabular-nums;
}
.preguntas-abiertas p { margin: 0; }
.preguntas-abiertas .pregunta { font-weight: 600; line-height: 1.3; }
.preguntas-abiertas .pregunta + p { margin-top: 10px; }

@media (max-width: 767px) {
  .portada-informe { padding: 18px 20px 22px; }
  .preguntas-abiertas li { padding-left: 52px; }
  .preguntas-abiertas li::before { font-size: 26px; top: 24px; }
}

/* ---------- Red: en el tiempo 2 la frase acompaña al 73 % --------------- */
.red-tiempo[data-tiempo="2"] .red-giro { opacity: 1; margin-top: 18px; }

/* La flecha de «Leer el reportaje» no pisa la ficha del informe */
.portada { padding-bottom: 130px; }

/* ---------- Cabecera siempre blanca, también sobre las bandas oscuras ----- */
.cabecera.en-noche {
  background: #fafafaf2;
  color: var(--negro-digital);
  border-bottom-color: var(--linea-suave);
}
.cabecera.en-noche .cabecera-logo img { filter: none; }
.cabecera.en-noche .cabecera-metodo:hover { background: var(--ultramar); color: var(--blanco-digital); border-color: var(--ultramar); }

/* ---------- Portada con la foto y el azul de borrador-maria --------------
   Esa foto ya es un duotono azul: sin velo, como allí. */
.portada { background-color: #196aff; }
.portada-velo { display: none; }

/* ---------- Portada: titular y entradilla centrados; ficha más pequeña ---- */
.portada { padding-top: calc(var(--alto-cabecera) + 60px); padding-bottom: 120px; }
.portada-informe {
  margin-top: 36px;
  max-width: 300px;
  padding: 14px 20px 16px;
  border-radius: 12px;
}
.portada-informe .portada-antetit { margin: 0 0 6px; font-size: .72rem; }
.portada-informe-titulo { font-size: calc(var(--sub) * .68); }
.portada-informe-sub { margin: 4px 0 12px; font-size: calc(var(--sub) * .52); }
.portada-informe .boton { font-size: calc(var(--sub) * .54); padding: 8px 18px; }

/* ==========================================================================
   Ajustes 29/09 (tarde)
   ========================================================================== */

/* ---------- Portada: titular y entradilla al 100 % y en el centro -------- */
.portada-titulo, .portada-sub { color: #fafafa; opacity: 1; }
.portada { padding-top: var(--alto-cabecera); padding-bottom: 0; }
/* La ficha sale del flujo: así el titular y la entradilla quedan en el
   centro exacto de la pantalla, y la ficha va más abajo */
/* style.css pone position: relative a todo lo que hay en la portada con
   .portada > :not(…):not(…):not(…), que pesa más: de ahí el !important */
.portada > .portada-informe.portada-informe {
  position: absolute !important; left: 50%; bottom: 128px; z-index: 2;
  translate: -50% 0;
  margin: 0;
  width: min(400px, calc(100vw - 32px)); max-width: none; box-sizing: border-box;
  padding: 12px 18px 14px;
  background: none;
  border: 1px solid #fafafa;
  border-radius: 12px;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.portada-informe .portada-antetit { margin: 0 0 4px; font-size: .68rem; color: #fafafa; }
.portada-informe-titulo { font-size: calc(var(--sub) * .6); color: #fafafa; }
.portada-informe-sub { margin: 3px 0 10px; font-size: calc(var(--sub) * .48); color: #fafafa; }
.portada-informe .boton { font-size: calc(var(--sub) * .5); padding: 7px 16px; margin-top: 12px; }
/* En pantallas bajas no cabe flotando bajo la entradilla: va detrás de ella,
   en el flujo, y la flecha de «Leer el reportaje» queda por debajo */
@media (max-height: 820px) {
  .portada { padding-bottom: 110px; }
  .portada > .portada-informe.portada-informe:not(.fija) {
    position: relative !important; left: auto; bottom: auto; translate: none;
    margin: 32px auto 0;
  }
}

/* ---------- 02: el arranque en claro, con el desplegable en gris claro --- */
.cap-02-entrada { padding-bottom: 0; }
.cap-02-entrada .desplegable { background: #1111110f; border-color: #11111124; margin-bottom: 0; }
.cap-02-noche { padding-top: 0; }
.cap-02-noche .marcador { margin-bottom: var(--aire-lee, 48px); }

/* La X del desplegable, más grande y más visible */
.metodo-boton .signo {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  width: 44px; height: 44px;
  border: 1px solid currentColor; border-radius: 50%;
  font-size: 2.4rem; font-weight: 400; line-height: 1; padding-bottom: 3px; box-sizing: border-box;
}

/* Botón de descarga dentro del desplegable, en blanco */
.boton.boton-blanco { background: #fafafa; color: var(--ultramar); border-color: #fafafa; }
.boton.boton-blanco:hover { background: var(--celeste); border-color: var(--celeste); color: var(--ultramar); }

/* ---------- La ficha del informe viaja a la esquina ----------------------
   Al empezar a bajar, la misma ficha de la portada se va, con una animación,
   abajo a la derecha y se queda ahí fija durante todo el reportaje. El
   recorrido lo anima reportaje.js (FLIP); aquí solo están los dos estados. */
.portada > .portada-informe.portada-informe {
  transition: transform .7s cubic-bezier(.2,.7,.2,1), background-color .5s ease, border-color .5s ease, box-shadow .5s ease;
}
.portada > .portada-informe.portada-informe.fija {
  position: fixed !important;
  left: auto; right: 24px; bottom: 24px; z-index: 900;
  translate: none;
  background: var(--ultramar);
  border-color: #fafafa38;
  box-shadow: 0 12px 40px #001e4e40;
}
@media (max-width: 760px) {
  .portada > .portada-informe.portada-informe.fija { right: 16px; bottom: 16px; }
}

/* ---------- Sin interletraje en «Leer el reportaje» ni en los marcadores -- */
.portada-baja, .marcador { letter-spacing: normal; }

/* ---------- Marcadores: la flecha ↘ de borrador-maria en lugar del número */
.flecha-ladillo {
  flex: none;
  width: 16px; height: 16px;
  background: currentColor;
  -webkit-mask: no-repeat center / contain url('../images/iconos/pv-arrow-down-right.svg');
          mask: no-repeat center / contain url('../images/iconos/pv-arrow-down-right.svg');
}

/* ---------- «Leer el reportaje»: línea corta que acaba en flecha ---------
   Línea y punta son un solo trazo, así no queda hueco entre ellas. */
.portada-baja .flecha {
  width: 16px; height: 26px;
  background: currentColor;
  transform: none;
  -webkit-mask: no-repeat center / contain url('../images/iconos/pv-arrow-down-long.svg');
          mask: no-repeat center / contain url('../images/iconos/pv-arrow-down-long.svg');
  animation: bajar-flecha 2.2s var(--curva) infinite;
}
.portada-baja .flecha::before, .portada-baja .flecha::after { content: none; }
@keyframes bajar-flecha {
  0%, 100% { transform: translateY(0);   opacity: .55; }
  50%      { transform: translateY(6px); opacity: 1; }
}
@media (scripting: none) and (prefers-reduced-motion: reduce) { .portada-baja .flecha { animation: none; } }
html.sin-animaciones .portada-baja .flecha { animation: none; }

/* ---------- 02: el primer párrafo, más cerca del marcador ---------------- */
.cap-02-entrada .marcador { margin-bottom: 24px; }

/* ==========================================================================
   Iconos: todos del catálogo PV (soluciones.losdelvolcan.com/iconos-pv.html)
   ========================================================================== */

/* Desplegables: flecha angle-down dentro del círculo; gira al abrir */
.metodo-boton .signo.signo-pv { font-size: 0; }
.metodo-boton .signo.signo-pv::before {
  content: '';
  width: 18px; height: 18px;
  background: currentColor;
  -webkit-mask: no-repeat center / contain url('../images/iconos/pv-angle-down.svg');
          mask: no-repeat center / contain url('../images/iconos/pv-angle-down.svg');
}
.metodo-boton .signo.signo-pv { rotate: 0deg; transition: rotate .3s var(--curva); padding-bottom: 0; }
.metodo-boton[aria-expanded="true"] .signo.signo-pv { rotate: 180deg; }

/* Buscador: lupa rellena del catálogo */
.buscador-lupa path { fill: currentColor; }

/* Recorrido de Marta: flechas entre pasos */
.ruta li:not(:first-child):before {
  content: '';
  width: 16px; height: 16px;
  background: #fafafa6b;
  -webkit-mask: no-repeat center / contain url('../images/iconos/pv-arrow-right.svg');
          mask: no-repeat center / contain url('../images/iconos/pv-arrow-right.svg');
}
@media (max-width: 900px) {
  .ruta li:not(:first-child):before {
    content: ''; margin-inline: auto;
    -webkit-mask-image: url('../images/iconos/pv-arrow-down.svg');
            mask-image: url('../images/iconos/pv-arrow-down.svg');
  }
}

/* Comunidad agéntica: cerrar la conversación y «Hablamos» */
.charla-cerrar .icono-pv-cerrar { display: block; width: 18px; height: 18px; margin: auto; }
.icono-pv-flecha { display: inline-block; width: .9em; height: .9em; vertical-align: -.1em; margin-left: .15em; }

/* 02: «El análisis dibuja…», en claro, con aire antes de la banda oscura */
.cap-02-entrada .desplegable + .lee { margin-top: var(--aire-lee, 48px); }
.cap-02-entrada { padding-bottom: 72px; }

/* ---------- Desplegables al ancho de la columna de lectura, no a sangre --- */
.cap .desplegable {
  box-sizing: border-box;
  width: min(var(--col-texto-max), var(--col-texto), calc(100% - 2 * var(--gotera)));
  margin-inline: auto;
  border: 1px solid var(--linea-suave);
  border-radius: 16px;
  overflow: hidden;
}
.cap .desplegable .metodo-boton { box-sizing: border-box; width: 100%; max-width: none; padding: 22px 24px; }
.cap .desplegable .metodo-cuerpo { box-sizing: border-box; width: 100%; max-width: none; padding: 0 24px 28px; }
.cap-02-entrada .desplegable { border-color: #11111124; }

/* ---------- 02: «Un trámite puede…», pegado al recorrido de Marta ---------
   La escena del recorrido ocupa la pantalla entera y centra su contenido,
   así que por debajo queda un hueco vacío: se recupera subiendo el texto. */
.red { margin-bottom: 0; }
.lee.tras-red { margin-top: -80px; position: relative; z-index: 1; }
@media (max-width: 760px) { .lee.tras-red { margin-top: -40px; } }

/* ---------- Ficha fija: botón para cerrarla (icono xmark del catálogo PV) --- */
.portada-informe-cerrar {
  display: none;
  position: absolute; top: 8px; right: 8px;
  width: 32px; height: 32px; padding: 0;
  background: none; border: 0; border-radius: 50%; cursor: pointer;
  color: #fafafa;
}
.portada-informe-cerrar::before {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 14px; height: 14px;
  background: currentColor;
  -webkit-mask: no-repeat center / contain url('../images/iconos/pv-xmark.svg');
          mask: no-repeat center / contain url('../images/iconos/pv-xmark.svg');
}
.portada-informe-cerrar:hover { background: #fafafa1f; }
.portada-informe-cerrar:focus-visible { outline: 2px solid var(--celeste); outline-offset: 2px; }
.portada > .portada-informe.portada-informe.fija .portada-informe-cerrar { display: block; }
.portada > .portada-informe.portada-informe.fija { padding-right: 40px; padding-left: 40px; }
/* Cerrada: se va con un fundido y ya no vuelve a la esquina en esta visita */
.portada > .portada-informe.portada-informe.fija.cerrada {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s ease, visibility 0s linear .3s;
}

/* ---------- Pie: el de prodigiosovolcan.com/pv/calles-viejo-madrid ------
   Mismas medidas que allí, sin la línea de ciudades. Clases con prefijo
   pie-pv- para no chocar con style.css. */
.pie-pv { position: relative; padding: 56px 32px; background: #fafafa; border-top: 1px solid #111; color: #111; }
.pie-pv-caja { max-width: 1440px; margin: 0 auto; }
.pie-pv-img { display: inline-block; margin-bottom: auto; }
.pie-pv-img.pie-pv-marca { margin-bottom: 20px; }
.pie-pv-img:focus-visible, .pie-pv-a:focus-visible { outline: 2px solid #111111b3; outline-offset: 2px; border-radius: 5px; }
.pie-pv-logo { display: block; width: 180px; }
.pie-pv-sello { display: block; width: 100px; }
.pie-pv-bcorp { display: flex; justify-content: space-between; }
.pie-pv-txt { width: 100%; padding-right: 16px; }
.pie-pv-fila-1 { display: flex; flex-flow: column; align-items: flex-start; gap: 16px; }
.pie-pv-enlaces { padding-top: 8px; }
.pie-pv-fila-2 { display: flex; align-items: flex-start; gap: 20px; margin: 20px auto 40px 0; }
.pie-pv-telf { display: flex; gap: 20px; }
.pie-pv-p { display: flex; gap: 8px; margin: 0; font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: normal; text-transform: none; color: #111; }
.pie-pv-a { color: #111; text-decoration: underline; transition: opacity .2s; }
.pie-pv-a:hover { opacity: .6; }
/* Sin aire lateral solo cuando sobra sitio a los lados de la caja de 1440 px */
@media (min-width: 1504px) { .pie-pv { padding-left: 0; padding-right: 0; } }
@media (max-width: 991px) {
  .pie-pv { padding-left: 20px; padding-right: 20px; }
  .pie-pv-fila-1 { display: block; }
}
@media (max-width: 767px) {
  .pie-pv { padding-bottom: 20px; }
  .pie-pv-txt { padding-right: 0; }
  .pie-pv-bcorp { flex-flow: wrap-reverse; justify-content: flex-end; margin-top: -65px; }
  .pie-pv-sello { margin-bottom: 20px; }
  .pie-pv-p { gap: 10px; }
  .pie-pv-fila-2 { padding-top: 10px; }
}
@media (max-width: 479px) {
  .pie-pv { padding: 0 10px; padding-top: 56px; }
  .pie-pv-sello { width: 80px; }
  .pie-pv-p { flex-flow: column; align-items: flex-start; gap: 5px; line-height: 24px; }
  .pie-pv-fila-2 { flex-flow: column; gap: 5px; padding-top: 0; }
}

/* ---------- Recorrido de Marta: la pista, justo bajo el rótulo ----------- */
/* La columna usa gap: 28px; la pista se pega al rótulo */
.red-tiempo[data-tiempo="3"] .red-rotulo { margin-bottom: 0; }
.red-tiempo[data-tiempo="3"] .ruta-pista { margin: -20px 0 0; display: inline-flex; align-items: center; gap: 8px; }
.icono-pulsa {
  flex: none; width: 14px; height: 16px; background: currentColor;
  -webkit-mask: url('../images/iconos/pv-hand-pointer.svg') center / contain no-repeat;
  mask: url('../images/iconos/pv-hand-pointer.svg') center / contain no-repeat;
}

/* Sin interletraje en los rótulos en mayúsculas que se han pedido */
.red-rotulo, .ruta-titulo, .portada-antetit { letter-spacing: normal; }
/* Titulares del recorrido («El punto de partida»…): en minúscula y en blanco */
.ruta-titulo { text-transform: none; color: var(--blanco-digital); }

/* ---------- Jerarquía: fuera el nivel «subtítulo y texto de la red» -------
   Entradilla de portada, textos de la red y del recorrido pasan a la misma
   medida que la entradilla del reportaje (.lee p.entrada). */
.portada-sub, .red-texto, .red-giro {
  font-size: var(--entrada);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.015em;
}

/* ---------- Jerarquía: la sentencia (68 px) pasa a la de las citas (56 px) -
   --golpe sigue a --bocadillo también en tableta y móvil (42 / 28 px), y
   toma su interlineado y su interletraje. */
:root { --golpe: var(--bocadillo); }
.golpe, .mochila-golpe p { line-height: 1.06; letter-spacing: -.02em; }

/* ---------- Titulares de las dos cajas finales: 22 px en negrita --------- */
.cta-caja h3 { font-size: var(--cuerpo); font-weight: 700; line-height: 1.3; letter-spacing: normal; }

/* «¿Quieres seguir explorando?»: al nivel de 36 px de la entradilla */
#t-cta { font-size: var(--entrada); line-height: 1.25; letter-spacing: -.015em; }

/* Textos del recorrido de Marta: como el cuerpo del reportaje (22 px) */
.ruta-texto { font-size: var(--cuerpo); font-weight: 400; line-height: 1.6; letter-spacing: -.003em; max-width: 34em; }

/* Todos los capítulos: menos aire entre el ladillo y la primera frase,
   igual que en la apertura del 02 */
#cap-01 > .marcador,
#cap-03 > .marcador,
#cap-04 > .marcador,
#cap-05 > .marcador,
#cap-06 > .marcador { margin-bottom: 24px; }

/* Títulos de las tres tarjetas del 03: mismo nivel que los de las cajas
   finales (22 px en negrita) */
.tarjeta .tarjeta-titulo { margin: 0 0 10px; font-size: var(--cuerpo); font-weight: 700; line-height: 1.3; letter-spacing: normal; }
/* La entradilla del 03 trae margen propio: se iguala con los demás */
#cap-03 > .marcador + .lee > .entrada:first-child { margin-top: 24px; }

/* ---------- Mismo aire al final de todos los capítulos ------------------
   El hueco hasta el siguiente ladillo lo marca solo el padding del
   capítulo: el último bloque no suma su margen propio. */
.cap > :last-child,
.cap > :last-child > :last-child { margin-bottom: 0; }

/* El bocadillo final («Volvamos al principio.») igual que el del 01 */
.ancho > .bocadillo { width: min(100%, 640px); }

/* Sentencias del capítulo: 50 px en escritorio. Los bocadillos vuelven a
   los 56 px de borrador-ccruz (misma altura que allí). En tableta y móvil
   siguen los valores de style.css (42 / 28 px). */
@media screen and (min-width: 1001px) { :root { --golpe: 50px; } }

/* ---------- Etiquetas de la mochila: colores de borrador-ccruz ------------
   Sólidos, sin transparencia. Son los de la referencia, fuera de la paleta
   general por decisión expresa. */
.etiqueta[data-familia="organismos"]     { background: #dde6f6; color: var(--ultramar); }
.etiqueta[data-familia="sedes"]          { background: #d7ecf5; color: #0a4a63; }
.etiqueta[data-familia="identificacion"] { background: #e8e2f3; color: #3f2d6b; }
.etiqueta[data-familia="documentos"]     { background: #e5ebdd; color: #3a4a2a; }

/* ---------- Sobre el informe: recursos de borrador-maria -----------------
   Las cuatro carpetas, el 44 % destacado y los círculos de las cuatro
   dimensiones. Se animan cada vez que se abre el desplegable: al pasar de
   hidden a visible, las animaciones CSS vuelven a empezar solas. */
.metodo-carpetas {
  position: relative;
  list-style: none;
  margin: 28px 0 36px; padding: 0;
  width: 100%;
  aspect-ratio: 672 / 266;
}
.metodo-carpetas li {
  position: absolute;
  left: calc(var(--x) / 672 * 100%);
  top: calc(var(--y) / 266 * 100%);
  width: calc(202 / 672 * 100%);
  height: calc(172 / 266 * 100%);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-size: clamp(14px, 2.4vw, 18px); line-height: 1.25; font-weight: 500;
  color: var(--negro-digital);
}
.metodo-carpetas svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.metodo-carpetas path { fill: var(--celeste); stroke: var(--ultramar); stroke-width: 1; }
.metodo-carpetas span { position: relative; top: 4%; }

.metodo-dato { margin: 8px 0 32px; }
.metodo-cuerpo .metodo-cifra {
  margin: 0 0 8px;
  font-size: var(--cifra); font-weight: 300; line-height: 1; letter-spacing: -.035em;
  color: var(--negro-digital);
}

.metodo-dimensiones {
  position: relative;
  width: min(420px, 100%);
  aspect-ratio: 1;
  margin: 24px auto 36px;
}
.metodo-dimensiones span {
  position: absolute; left: 50%; bottom: 0;
  aspect-ratio: 1;
  translate: -50% 0;
  border: 1px solid var(--negro-digital);
  border-radius: 50%;
}
.metodo-dimensiones em {
  position: absolute; left: 0; right: 0;
  font-size: clamp(13px, 2.2vw, 16px); line-height: 1.25; font-style: normal; font-weight: 500;
  text-align: center;
}
.metodo-dimensiones .d4 { width: 100%; }
.metodo-dimensiones .d3 { width: calc(470 / 582 * 100%); }
.metodo-dimensiones .d2 { width: calc(330 / 582 * 100%); }
.metodo-dimensiones .d1 { width: calc(180 / 582 * 100%); }
.metodo-dimensiones .d4 em { top: 7.5%; }
.metodo-dimensiones .d3 em { top: 10.5%; }
.metodo-dimensiones .d2 em { top: 23%; }
.metodo-dimensiones .d1 em { top: 50%; translate: 0 -50%; }

@keyframes metodo-sube { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes metodo-crece { from { opacity: 0; scale: .85; } to { opacity: 1; scale: 1; } }
.metodo-cuerpo:not([hidden]) .metodo-carpetas li { animation: metodo-sube .6s cubic-bezier(.3,1.3,.5,1) both; }
.metodo-cuerpo:not([hidden]) .metodo-carpetas li:nth-child(2) { animation-delay: .2s; }
.metodo-cuerpo:not([hidden]) .metodo-carpetas li:nth-child(3) { animation-delay: .4s; }
.metodo-cuerpo:not([hidden]) .metodo-carpetas li:nth-child(4) { animation-delay: .6s; }
.metodo-cuerpo:not([hidden]) .metodo-cifra { animation: metodo-sube .7s var(--curva) .5s both; }
.metodo-dimensiones span { transform-origin: 50% 100%; }
.metodo-cuerpo:not([hidden]) .metodo-dimensiones span { animation: metodo-crece .7s cubic-bezier(.2,.7,.2,1) both; }
.metodo-cuerpo:not([hidden]) .metodo-dimensiones .d1 { animation-delay: .7s; }
.metodo-cuerpo:not([hidden]) .metodo-dimensiones .d2 { animation-delay: .9s; }
.metodo-cuerpo:not([hidden]) .metodo-dimensiones .d3 { animation-delay: 1.1s; }
.metodo-cuerpo:not([hidden]) .metodo-dimensiones .d4 { animation-delay: 1.3s; }
@media (scripting: none) and (prefers-reduced-motion: reduce) {
  .metodo-cuerpo .metodo-carpetas li, .metodo-cuerpo .metodo-cifra, .metodo-cuerpo .metodo-dimensiones span { animation: none !important; }
}
html.sin-animaciones .metodo-cuerpo .metodo-carpetas li, html.sin-animaciones .metodo-cuerpo .metodo-cifra, html.sin-animaciones .metodo-cuerpo .metodo-dimensiones span { animation: none !important; }

/* ---------- 02 · El carpetón ciudadano, todo en blanco -------------------
   La banda de la red (1.300 carpetas, 73 %, recorrido de Marta) deja de ser
   oscura: fondo blanco, texto negro y los puntos siguen en celeste. La
   versión oscura está en anteriores/index-antes-carpeton-blanco.html. */
.cap-02-blanco { background: var(--blanco-digital); color: var(--negro-digital); }
.cap-02-blanco .red-escena:after { background: linear-gradient(to top, var(--blanco-digital), #fafafa00); }
.cap-02-blanco .red-texto,
.cap-02-blanco .red-giro { color: var(--negro-digital); }
.cap-02-blanco .red-rotulo { color: var(--azul); }
.cap-02-blanco .ruta li:not(:first-child):before { color: #1111116b; }
.cap-02-blanco .salto { color: var(--negro-digital); }
.cap-02-blanco .salto-carpeta { background: #11111114; }
.cap-02-blanco .salto:hover .salto-carpeta { background: #11111124; }
.cap-02-blanco .salto[aria-pressed="true"] .salto-carpeta { background: var(--celeste); }
.cap-02-blanco .salto:focus-visible { outline-color: var(--azul); }
.cap-02-blanco .salto-que,
.cap-02-blanco .ruta-pista { color: #111111b3; }
.cap-02-blanco .salto[aria-pressed="true"] .salto-que { color: var(--azul); }
.cap-02-blanco .ruta-titulo { color: var(--negro-digital); }

/* ---------- Recorrido de Marta: carpetas sólidas, sin filo ---------------
   Con fondo translúcido, la pestaña (que monta 2 px sobre el cuerpo) sumaba
   su transparencia y dejaba una línea. Ahora son colores sólidos. */
.cap-02-blanco .salto-carpeta { background: var(--celeste); }
.cap-02-blanco .salto:hover .salto-carpeta { background: var(--celeste); }
.cap-02-blanco .salto[aria-pressed="true"] .salto-carpeta { background: var(--azul); }
.red-tiempo[data-tiempo="3"] .ruta-pista { margin-bottom: 16px; }
.cap-02-blanco .ruta-titulo { color: var(--azul); }

/* ---------- Fondos azules: ultramar sólido, sin degradado --------------- */
.cap.noche { background-color: var(--ultramar); background-image: none; }

/* «¿Qué es una comunidad agéntica?»: relleno ultramar y trazo blanco */
.cap.noche .desplegable { background: var(--ultramar); border: 1px solid var(--blanco-digital); }

/* ---------- Cuatro preguntas: número en círculo ultramar ---------------- */
.preguntas-abiertas li { padding-left: 76px; }
.preguntas-abiertas li::before {
  top: 22px;
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ultramar); color: var(--blanco-digital);
  font-size: 18px; font-weight: 500; /* PV Sans Neutral */
  letter-spacing: normal;
}
@media (max-width: 767px) {
  .preguntas-abiertas li { padding-left: 60px; }
  .preguntas-abiertas li::before { width: 40px; height: 40px; font-size: 16px; top: 24px; }
}

/* ---------- Botón «Subir arriba» ---------------------------------------- */
.subir {
  position: fixed; right: 24px; bottom: 24px; z-index: 899;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--ultramar); border-radius: 48px;
  background: var(--blanco-digital); color: var(--ultramar);
  font: inherit; font-size: 14px; font-weight: 500; line-height: 1.2;
  cursor: pointer;
  opacity: 0; visibility: hidden; translate: 0 8px;
  transition: opacity .3s, visibility .3s, translate .3s var(--curva), bottom .3s var(--curva), background-color .2s, color .2s;
}
.subir.visible { opacity: 1; visibility: visible; translate: 0 0; }
.subir:hover { background: var(--ultramar); color: var(--blanco-digital); }
.subir:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }
.icono-subir {
  flex: none; width: 11px; height: 14px; background: currentColor;
  -webkit-mask: url('../images/iconos/pv-arrow-up.svg') center / contain no-repeat;
  mask: url('../images/iconos/pv-arrow-up.svg') center / contain no-repeat;
}
@media (max-width: 767px) { .subir { right: 16px; } }
/* «Subir arriba»: solo un círculo con la flecha (el texto queda en aria-label) */
.subir { width: 48px; height: 48px; padding: 0; justify-content: center; border-radius: 50%; }
.icono-subir { width: 13px; height: 17px; }

/* Sobre el informe: carpetas más pequeñas, en fila y separadas; círculos
   de las dimensiones más pequeños */
.metodo-carpetas {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
  aspect-ratio: auto;
  max-width: 480px;
  margin: 20px 0 32px;
}
.metodo-carpetas li {
  position: relative; left: auto; top: auto;
  width: auto; height: auto;
  aspect-ratio: 202 / 172;
  font-size: 14px;
}
.metodo-dimensiones { width: min(300px, 100%); }
.metodo-dimensiones em { font-size: 13px; }
@media (max-width: 479px) {
  .metodo-carpetas { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 260px; }
}

/* ---------- 02 · La banda de la red vuelve a ultramar ---------------------
   (Las reglas .cap-02-blanco de arriba ya no se aplican: la sección vuelve a
   ser .cap.noche.) Se mantienen los arreglos posteriores: carpetas sólidas,
   sin filo entre pestaña y cuerpo. */
.cap-02-noche .salto-carpeta,
.cap-02-noche .salto:hover .salto-carpeta { background: var(--blanco-digital); }
.cap-02-noche .salto[aria-pressed="true"] .salto-carpeta { background: var(--celeste); }
.cap-02-noche .ruta-titulo { color: var(--celeste); }
.cap-02-noche .red-escena:after { background: linear-gradient(to top, var(--ultramar), #001e4e00); }

/* ---------- 05 · HOY / MAÑANA, simplificado ------------------------------
   Una necesidad, un conmutador y una misma zona. HOY: las etiquetas de la
   mochila, con sus colores. MAÑANA: HOY se difumina y se encienden en
   secuencia los cuatro verbos. */
.hm {
  width: min(100%, 860px); margin-inline: auto;
  padding: 44px 40px 48px;
  border: 1px solid var(--linea-suave); border-radius: 20px;
  background: var(--blanco-digital);
  text-align: center;
}
.hm-pregunta { margin: 0 0 6px; font-size: var(--nota); color: #111111b3; }
.hm-necesidad { margin: 0 0 24px; font-size: var(--entrada); font-weight: 500; line-height: 1.25; letter-spacing: -.015em; }
.hm-conmutador {
  display: inline-flex; padding: 4px; gap: 4px;
  border: 1px solid var(--ultramar); border-radius: 48px;
  margin-bottom: 36px;
}
.hm-conmutador button {
  font: inherit; font-size: 15px; font-weight: 500;
  padding: 9px 26px; border: 0; border-radius: 48px; cursor: pointer;
  background: none; color: var(--ultramar);
  transition: background-color .25s, color .25s;
}
.hm-conmutador button[aria-pressed="true"] { background: var(--ultramar); color: var(--blanco-digital); }
.hm-conmutador button:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

.hm-zona { display: grid; align-items: center; min-height: 260px; }
.hm-hoy, .hm-manana { grid-area: 1 / 1; list-style: none; margin: 0; padding: 0; }
.hm-hoy {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  transition: opacity .5s var(--curva), filter .5s var(--curva);
}
.hm-hoy li { padding: 9px 16px; border-radius: 48px; font-size: 15px; font-weight: 500; line-height: 1.2; }
.hm-hoy li:nth-child(3n)   { rotate: -2deg; }
.hm-hoy li:nth-child(3n+1) { rotate: 1.5deg; }
.hm-hoy li[data-familia="organismos"]     { background: #dde6f6; color: var(--ultramar); }
.hm-hoy li[data-familia="sedes"]          { background: #d7ecf5; color: #0a4a63; }
.hm-hoy li[data-familia="identificacion"] { background: #e8e2f3; color: #3f2d6b; }
.hm-hoy li[data-familia="documentos"]     { background: #e5ebdd; color: #3a4a2a; }

.hm-manana {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 10px;
  position: relative; z-index: 1;
  visibility: hidden;
}
.hm-manana li {
  font-size: var(--cuerpo); font-weight: 600; line-height: 1.2;
  padding: 14px 26px; border-radius: 48px;
  background: var(--ultramar); color: var(--blanco-digital);
  opacity: 0; scale: .9;
  transition: opacity .45s var(--curva), scale .45s var(--rebote);
}
.hm-manana li + li { margin-left: 34px; position: relative; }
.hm-manana li + li::before {
  content: ""; position: absolute; left: -30px; top: 50%; translate: 0 -50%;
  width: 20px; height: 16px; background: var(--ultramar);
  -webkit-mask: url('../images/iconos/pv-arrow-right.svg') center / contain no-repeat;
  mask: url('../images/iconos/pv-arrow-right.svg') center / contain no-repeat;
}
.hm[data-modo="manana"] .hm-hoy { opacity: .14; filter: blur(2px); }
.hm[data-modo="manana"] .hm-manana { visibility: visible; }
.hm[data-modo="manana"] .hm-manana li { opacity: 1; scale: 1; }
.hm[data-modo="manana"] .hm-manana li:nth-child(2) { transition-delay: .35s; }
.hm[data-modo="manana"] .hm-manana li:nth-child(3) { transition-delay: .7s; }
.hm[data-modo="manana"] .hm-manana li:nth-child(4) { transition-delay: 1.05s; }

@media (max-width: 760px) {
  .hm { padding: 32px 18px 36px; }
  .hm-hoy li { font-size: 13px; padding: 7px 12px; }
  .hm-manana { flex-direction: column; gap: 30px; }
  .hm-manana li + li { margin-left: 0; }
  .hm-manana li + li::before { left: 50%; top: -24px; translate: -50% 0; rotate: 90deg; }
}
@media (scripting: none) and (prefers-reduced-motion: reduce) {
  .hm-hoy, .hm-manana li { transition: none; }
}
html.sin-animaciones .hm-hoy, html.sin-animaciones .hm-manana li { transition: none; }

/* Cabecera: «Descargar el informe» es un enlace con aspecto de botón */
a.cabecera-metodo { text-decoration: none; }

/* Ficha del informe en portada: sin trazo blanco */
.portada > .portada-informe.portada-informe { border: 0; }
/* «Descargar el informe» de la cabecera: ultramar sólido */
a.cabecera-metodo { background: var(--ultramar); color: var(--blanco-digital); border-color: var(--ultramar); }
a.cabecera-metodo:hover { background: var(--azul); color: var(--blanco-digital); border-color: var(--azul); }

/* ---------- Sobre el informe: vuelven las etiquetas ----------------------
   (Las reglas .metodo-carpetas y .metodo-dimensiones de arriba ya no tienen
   HTML.) Carpetas: ultramar, icono y texto en blanco. Dimensiones: blanco
   con trazo gris. */
.chips-carpetas li {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ultramar); border-color: var(--ultramar); color: var(--blanco-digital);
}
.icono-carpeta {
  flex: none; width: 15px; height: 13px; background: currentColor;
  -webkit-mask: url('../images/iconos/pv-folder.svg') center / contain no-repeat;
  mask: url('../images/iconos/pv-folder.svg') center / contain no-repeat;
}
.chips-dimensiones li { background: var(--blanco-digital); border-color: #11111140; color: var(--negro-digital); }

/* ---------- 02 · Un solo ladillo para el capítulo entero -----------------
   Vive en .cap-02-grupo, que abarca la parte blanca y la banda ultramar, así
   que se queda fijo todo el capítulo. Sobre la banda pasa a celeste. */
.cap-02-grupo > .marcador { margin-bottom: 24px; transition: color .35s var(--curva); }
.cap-02-grupo > .marcador.sobre-noche { color: var(--celeste); }
.cap-02-noche { padding-top: 69px; }  /* el hueco que ocupaba el ladillo repetido */

/* 73 %: «A julio de 2025…» y «La integración técnica avanza…» en cuerpo de
   texto (22 px) */
.red-tiempo[data-tiempo="2"] .red-texto,
.red-tiempo[data-tiempo="2"] .red-giro {
  font-size: var(--cuerpo); font-weight: 400; line-height: 1.6; letter-spacing: -.003em;
  max-width: 34em;
}
.red-tiempo[data-tiempo="2"] .red-giro { margin-top: 0; }


/* Tarjetas del 03: icono en círculo azul sobre el título, como en
   borrador-maria (mismos iconos del catálogo PV) */
.tarjeta-icono {
  display: block; width: 44px; height: 44px; margin-bottom: 16px;
  border-radius: 50%; background: var(--azul);
  position: relative;
}
.tarjeta-icono::before {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 18px; height: 18px; background: var(--blanco-digital);
  -webkit-mask: var(--icono) center / contain no-repeat;
  mask: var(--icono) center / contain no-repeat;
}
.tarjeta-icono.icono-mobile-screen-button { --icono: url('../images/iconos/pv-mobile-screen-button.svg'); }
.tarjeta-icono.icono-calendar-check       { --icono: url('../images/iconos/pv-calendar-check.svg'); }
.tarjeta-icono.icono-list-ol              { --icono: url('../images/iconos/pv-list-ol.svg'); }

/* ---------- HOY / MAÑANA, comparados lado a lado ------------------------
   Sustituye al conmutador: de un vistazo, a la izquierda cómo es hoy (la
   maraña de la mochila) y a la derecha cómo debería ser mañana (cuatro
   verbos en secuencia). En móvil, uno debajo del otro. */
.hm { width: min(100%, 1100px); padding: 40px 32px 32px; }
.hm-necesidad { margin-bottom: 32px; }
.hm-comparar {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px;
  text-align: left;
}
.hm-col { border-radius: 16px; padding: 28px 28px 32px; }
.hm-col-hoy { border: 1px solid var(--linea-suave); }
.hm-col-manana { background: var(--ultramar); color: var(--blanco-digital); display: flex; flex-direction: column; }
.hm-titulo { margin: 0 0 20px; font-size: var(--cuerpo); font-weight: 700; line-height: 1.3; }

.hm-comparar .hm-hoy {
  display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px;
  opacity: 1; filter: none; transition: none;
}
.hm-comparar .hm-hoy li { font-size: 14px; padding: 8px 14px; }

.hm-comparar .hm-manana {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px;
  visibility: visible;
}
.hm-comparar .hm-manana li {
  margin: 0; position: relative;
  background: var(--blanco-digital); color: var(--ultramar);
  min-width: 190px; text-align: center;
}
.hm-comparar .hm-manana li + li::before {
  left: 50%; top: -24px; translate: -50% 0; rotate: 90deg;
  background: var(--blanco-digital);
}
.hm.asoma .hm-manana li { opacity: 1; scale: 1; }
.hm.asoma .hm-manana li:nth-child(1) { transition-delay: .4s; }
.hm.asoma .hm-manana li:nth-child(2) { transition-delay: .75s; }
.hm.asoma .hm-manana li:nth-child(3) { transition-delay: 1.1s; }
.hm.asoma .hm-manana li:nth-child(4) { transition-delay: 1.45s; }
@media (scripting: none) and (prefers-reduced-motion: reduce) { .hm-comparar .hm-manana li { opacity: 1; scale: 1; } }
html.sin-animaciones .hm-comparar .hm-manana li { opacity: 1; scale: 1; }

@media (max-width: 760px) {
  .hm { padding: 28px 16px 16px; }
  .hm-comparar { grid-template-columns: 1fr; }
  .hm-col { padding: 22px 18px 26px; }
}

/* 73 %: el signo al mismo tamaño que la cifra, con un espacio; la frase de
   giro sin transparencia */
.red-tiempo[data-tiempo="2"] .red-cifra .signo { font-size: 1em; vertical-align: baseline; margin-left: .18em; }
.cap.noche .red-giro { color: var(--blanco-digital); }

/* «El recorrido de Marta»: misma jerarquía que el título de los desplegables
   (22 px, PV Sans Neutral), en minúscula y blanco sobre la banda */
.red-rotulo {
  font-size: var(--cuerpo); font-weight: 500; line-height: 1.35;
  letter-spacing: normal; text-transform: none;
}
.cap.noche .red-rotulo { color: var(--blanco-digital); }

/* La mano de «Pulsa cualquiera», dentro de un círculo con trazo blanco y
   sin relleno */
.icono-pulsa {
  position: relative;
  width: 32px; height: 32px;
  border: 1px solid var(--blanco-digital); border-radius: 50%;
  background: none;
  -webkit-mask: none; mask: none;
}
.icono-pulsa::before {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 12px; height: 14px; background: var(--blanco-digital);
  -webkit-mask: url('../images/iconos/pv-hand-pointer.svg') center / contain no-repeat;
  mask: url('../images/iconos/pv-hand-pointer.svg') center / contain no-repeat;
}
.red-tiempo[data-tiempo="3"] .ruta-pista { gap: 10px; }

/* «Pulsa cualquiera» se queda aunque ya se haya pulsado */
.ruta-pista.usada { opacity: 1; }

/* HOY / MAÑANA con dos necesidades: se elige arriba */
.hm-necesidades { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 6px 0 32px; }
.hm-necesidades button {
  font: inherit; font-size: var(--cuerpo); font-weight: 500; line-height: 1.2;
  padding: 12px 24px; border-radius: 48px; cursor: pointer;
  border: 1px solid var(--ultramar); background: var(--blanco-digital); color: var(--ultramar);
  transition: background-color .25s, color .25s;
}
.hm-necesidades button[aria-pressed="true"] { background: var(--ultramar); color: var(--blanco-digital); }
.hm-necesidades button:hover { background: var(--azul); border-color: var(--azul); color: var(--blanco-digital); }
.hm-necesidades button:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }
.hm-hoy[hidden] { display: none; }
.hm.asoma .hm-manana.reinicio li { opacity: 0; scale: .9; transition: none; }

/* Comunidad agéntica: la tarjeta de Marta (y el hover de las demás) en azul,
   no en negro */
.cap.noche .comunidad .agente-celda:nth-child(3) .agente:before,
.cap.noche .agente:hover:before { background-color: var(--azul); }

/* ---------- Ladillos fijos con «camita» -----------------------------------
   Fondo del color de la sección: el contenido pasa por debajo al hacer
   scroll. Blanco sobre blanco; ultramar sobre las bandas oscuras. */
.marcador { background: var(--blanco-digital); transition: color .35s var(--curva), background-color .35s var(--curva); }
.cap.noche .marcador,
.cap-02-grupo > .marcador.sobre-noche { background: var(--ultramar); }
.cap-02-grupo > .marcador { transition: color .35s var(--curva), background-color .35s var(--curva); }

/* Comunidad agéntica: la tarjeta de Marta (y el hover) en un ultramar más
   claro, mezcla de ultramar (80 %) y azul (20 %) */
.cap.noche .comunidad .agente-celda:nth-child(3) .agente:before,
.cap.noche .agente:hover:before {
  background-color: #052d6f;
  background-color: color-mix(in srgb, var(--ultramar) 80%, var(--azul));
}

/* ---------- Escena final «Volvamos al principio» ------------------------- */
.vuelta { margin-top: calc(var(--aire-cap) + 40px); }   /* aire tras la cuarta pregunta */
.vuelta-pista { position: relative; height: 300vh; }
.vuelta-escena {
  position: sticky; top: var(--alto-cabecera);
  height: calc(100svh - var(--alto-cabecera));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 36px;
  padding: 72px var(--gotera) 24px;   /* arriba, el ladillo fijo */
  text-align: center;
}
.vuelta-escena .titulo-bloque { margin: 0; }
.vuelta-escena .bocadillo { width: min(100%, 640px); margin: 0; }
.vuelta-texto { margin: 0; max-width: 30em; font-size: var(--cuerpo); line-height: 1.6; }
.vuelta-paso { opacity: 0; translate: 0 28px; transition: opacity .6s var(--curva), translate .6s var(--curva); }
.vuelta-paso.sale { opacity: 1; translate: 0 0; }
.vuelta.quieta .vuelta-pista { height: auto; }
.vuelta.quieta .vuelta-escena { position: static; height: auto; }
.vuelta.quieta .vuelta-paso { opacity: 1; translate: none; }
.vuelta-escena .titulo-bloque { font-size: var(--entrada); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }

/* ---------- HOY / MAÑANA: fichas que caen (Tetris) ---------------------- */
.hm-pregunta-titulo { margin: 0 0 4px; font-size: var(--entrada); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }
.hm .hm-necesidad { margin: 0 0 22px; font-size: var(--cuerpo); font-weight: 400; color: #111111b3; }
.hm .hm-conmutador { margin-bottom: 24px; }
.hm-escenario {
  position: relative; overflow: hidden;
  height: 380px;
  border: 1px solid var(--negro-digital);
  background: var(--blanco-digital);
  transition: height .4s var(--curva);
}
.hm-fichas { list-style: none; margin: 0; padding: 0; }
/* Sin JS: fichas en fila, con su texto */
.hm-ficha {
  display: inline-block; margin: 6px;
  padding: 12px 22px; border-radius: 48px;
  background: var(--celeste); color: var(--ultramar);
  font-size: 15px; font-weight: 500; line-height: 20px; white-space: nowrap;
  text-align: center;
}
.hm-ficha .hm-v { display: none; }
/* Con JS: piezas sueltas en el escenario */
.hm-vivo .hm-ficha {
  position: absolute; left: 0; top: 0; margin: 0;
  transform-origin: 50% 50%;
  transition: transform .75s cubic-bezier(.45, 0, .55, 1.25), opacity .4s, width .5s var(--curva);
  pointer-events: auto;
}
.hm-vivo .hm-ficha .hm-t { color: transparent; transition: color .25s; }
.hm-vivo .hm-ficha:hover .hm-t { color: var(--ultramar); }
.hm-vivo[data-modo="manana"] .hm-ficha { transition: transform .8s var(--curva), opacity .5s .35s, width .5s var(--curva); }
.hm-vivo .hm-ficha.sobra { opacity: 0; pointer-events: none; }
.hm-vivo .hm-ficha.reunida { background: var(--ultramar); color: var(--blanco-digital); }
.hm-vivo .hm-ficha.reunida .hm-t { display: none; }
.hm-vivo .hm-ficha.reunida .hm-v { display: inline; }
@media (max-width: 760px) {
  .hm-ficha { padding: 9px 16px; font-size: 13px; line-height: 18px; }
}

/* Los dos bocadillos «He tenido un hijo…»: más aire arriba y abajo */
.bocadillo { padding-top: 76px; padding-bottom: 76px; }
@media (max-width: 760px) { .bocadillo { padding-top: 46px; padding-bottom: 46px; } }

/* «¿Quieres seguir explorando?»: fondo gris claro y cajas sin esquinas
   redondeadas */
#cta { background: #1111110d; }

/* Comunidad agéntica: la tarjeta de Marta termina a la misma altura que las
   demás (antes bajaba 22 px por debajo del botón) */
.comunidad .agente-celda:nth-child(3) .agente:before { bottom: 0; }

/* HOY: la ficha que se señala pasa por delante del resto */
.hm-vivo .hm-ficha:hover { z-index: 5; }

/* ---------- Ladillo pegado a la cabecera, sin rendija ---------------------
   La cabecera mide decimales (60,67 px) y el ladillo se anclaba en 61 px:
   quedaba una línea de un tercio de píxel por la que asomaba el contenido.
   Ahora el ladillo entra 1 px por debajo de la cabecera (que va encima) y la
   cabecera es opaca. */
.marcador { top: calc(var(--alto-cabecera) - 1px); }
.cabecera { background: var(--blanco-digital); }

/* Escena final: el título solo, centrado; luego bocadillo + texto en su
   lugar. Los dos ocupan la misma celda. */
.vuelta-pista { height: 240vh; }
.vuelta-escena { display: grid; place-items: center; gap: 0; }
.vuelta-titulo, .vuelta-grupo { grid-area: 1 / 1; }
.vuelta-grupo { display: flex; flex-direction: column; align-items: center; gap: 32px; width: 100%; }
.vuelta.quieta .vuelta-titulo { display: none; }

/* «¿Quieres seguir explorando?»: aire entre el borde de la caja gris y el
   titular */
#cta { padding-top: 110px; }

/* ---------- HOY / MAÑANA, segunda vuelta ---------------------------------
   Texto siempre visible, letra que ajusta el JS (--hm-letra) para llenar el
   escenario, caída más lenta, flechas en MAÑANA y el marco negro cambiado
   por una cama gris. */
.hm { border: 0; padding-left: 0; padding-right: 0; }
.hm-escenario {
  height: 460px;
  border: 0; border-radius: 16px;
  background: #1111110d;
}
@media (max-width: 760px) { .hm-escenario { height: 520px; } }
.hm-vivo .hm-ficha {
  font-size: var(--hm-letra, 16px); line-height: 1.25;
  padding: .7em 1.3em;
  transition: transform 1.15s cubic-bezier(.42, 0, .58, 1.06), opacity .5s, width .5s var(--curva);
}
.hm-vivo .hm-ficha .hm-t { color: var(--ultramar); }
.hm-vivo .hm-flecha {
  position: absolute; left: 0; top: 0;
  width: 20px; height: 16px; background: var(--ultramar);
  -webkit-mask: url('../images/iconos/pv-arrow-right.svg') center / contain no-repeat;
  mask: url('../images/iconos/pv-arrow-right.svg') center / contain no-repeat;
  opacity: 0; transition: opacity .4s;
}
.hm-flecha { display: none; }
.hm-vivo .hm-flecha { display: block; }
.hm-vivo .en-manana .hm-flecha { opacity: 1; transition-delay: .7s; }

/* ---------- Ratones: exactamente los de borrador-ccruz ---------------- */
.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 #0003);
  pointer-events: none;
}
.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 #0006);
  pointer-events: none;
}

/* «¿Qué necesitas resolver?» entero sobre una cama gris; el escenario de las
   fichas, dentro, con un trazo fino */
.hm { background: #1111110d; border-radius: 20px; padding: 44px 32px 32px; }
.hm-escenario { background: none; border: 1px solid #11111129; }
@media (max-width: 760px) { .hm { padding: 28px 14px 14px; } }

/* HOY / MAÑANA con contexto: el lema de cada modo, la petición y los pasos
   numerados de MAÑANA */
.hm-lema {
  margin: 0 auto 20px; max-width: 32em;
  font-size: var(--cuerpo); font-weight: 500; line-height: 1.35; color: var(--ultramar);
}
.hm-peticion, .hm-paso { display: none; }
.hm-vivo .hm-peticion {
  display: block; position: absolute; left: 0; right: 0; top: 13%;
  margin: 0 auto; width: fit-content; max-width: calc(100% - 32px);
  padding: 14px 24px; border-radius: 20px 20px 20px 4px;
  background: var(--blanco-digital); color: var(--negro-digital);
  font-size: var(--cuerpo); font-weight: 500; line-height: 1.3;
  opacity: 0; translate: 0 10px; transition: opacity .4s, translate .4s var(--curva);
  pointer-events: none;
}
.hm-vivo .hm-paso {
  display: flex; align-items: center; justify-content: center;
  position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--ultramar); color: var(--ultramar);
  font-size: 14px; font-weight: 500; line-height: 1;
  opacity: 0; transition: opacity .4s;
}
.hm-vivo .en-manana .hm-peticion { opacity: 1; translate: 0 0; transition-delay: .5s; }
.hm-vivo .en-manana .hm-paso { opacity: 1; }

/* ==========================================================================
   ¿Qué necesitas resolver? · dos recorridos (sustituye a las versiones
   anteriores .hm, que ya no tienen HTML)
   ========================================================================== */
.rec {
  width: min(100%, 1100px); margin-inline: auto;
  padding: 44px 40px 40px;
  background: #1111110d; border-radius: 20px;
  text-align: center;
}
.rec-pregunta { margin: 0 0 18px; font-size: var(--entrada); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }

.rec-necesidades { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 18px; }
.rec-necesidades button {
  font: inherit; font-size: var(--cuerpo); font-weight: 500; line-height: 1.2;
  padding: 12px 24px; border-radius: 48px; cursor: pointer;
  border: 1px solid var(--ultramar); background: var(--blanco-digital); color: var(--ultramar);
  transition: background-color .25s, color .25s, border-color .25s;
}
.rec-necesidades button[aria-pressed="true"] { background: var(--ultramar); color: var(--blanco-digital); }
.rec-necesidades button:hover { border-color: var(--azul); }
.rec-conmutador {
  display: inline-flex; padding: 4px; gap: 4px; margin-bottom: 24px;
  border: 1px solid #11111140; border-radius: 48px; background: var(--blanco-digital);
}
.rec-conmutador button {
  font: inherit; font-size: 15px; font-weight: 500;
  padding: 9px 26px; border: 0; border-radius: 48px; cursor: pointer;
  background: none; color: var(--ultramar); transition: background-color .25s, color .25s;
}
.rec-conmutador button[aria-pressed="true"] { background: var(--azul); color: var(--blanco-digital); }
.rec button:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }

.rec-escena {
  display: grid; min-height: 460px;
  padding: 32px 36px;
  background: var(--blanco-digital); border: 1px solid #11111129; border-radius: 16px;
  text-align: left; overflow: hidden;
}
.rec-hoy, .rec-manana { grid-area: 1 / 1; transition: opacity .5s var(--curva), filter .5s var(--curva), visibility 0s; }

/* --- HOY: la necesidad arriba y el árbol colgando de ella ---------------- */
.rec-foco { margin: 0; }
.rec-foco-hoy {
  display: inline-block; position: relative; z-index: 1;
  padding: 10px 20px; border-radius: 48px;
  background: var(--ultramar); color: var(--blanco-digital);
  font-size: 16px; font-weight: 500; line-height: 1.2;
}
.rec-arbol { position: relative; margin: 0 0 0 26px; padding: 6px 0 0 34px; }
.rec-arbol[hidden] { display: none; }
.rec-arbol::before {           /* el tronco */
  content: ""; position: absolute; left: 0; top: 0; bottom: 26px;
  width: 1px; background: #11111166; transform-origin: top;
}
.rec-nivel {
  position: relative;
  display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 12px 0;
}
.rec-nivel::before {           /* la rama hacia cada nivel */
  content: ""; position: absolute; left: -34px; top: 27px;
  width: 28px; height: 1px; background: #11111166;
}
.rec-nivel-t { margin: 0; padding-top: 8px; font-size: 15px; font-weight: 600; color: var(--ultramar); }
.rec-nivel ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rec-nivel li {
  padding: 8px 14px; border-radius: 48px;
  background: var(--celeste); color: var(--ultramar);
  font-size: 15px; font-weight: 500; line-height: 1.2;
}

/* --- MAÑANA: la necesidad delante; el sistema detrás, en cinco pasos ----- */
.rec-manana {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 44px;
  text-align: center;
}
.rec-foco-manana {
  max-width: 18em; padding: 26px 38px; border-radius: 28px 28px 28px 6px;
  background: var(--ultramar); color: var(--blanco-digital);
  font-size: var(--entrada); font-weight: 600; line-height: 1.15; letter-spacing: -.015em;
  box-shadow: 0 18px 40px #001e4e33;
}
.rec-funciones {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  margin: 0; padding: 16px 22px; list-style: none;
  background: #1111110a; border-radius: 48px;
}
.rec-funciones li {
  position: relative;
  padding: 10px 20px; border-radius: 48px;
  border: 1px solid var(--celeste); color: var(--ultramar);
  font-size: 16px; font-weight: 500; line-height: 1.2;
}
.rec-funciones li + li { margin-left: 34px; }
.rec-funciones li + li::before {
  content: ""; position: absolute; left: -27px; top: 50%; translate: 0 -50%;
  width: 18px; height: 14px; background: #11111166;
  -webkit-mask: url('../images/iconos/pv-arrow-right.svg') center / contain no-repeat;
  mask: url('../images/iconos/pv-arrow-right.svg') center / contain no-repeat;
}

/* --- Cambio de modo ------------------------------------------------------ */
.rec[data-modo="hoy"] .rec-manana { opacity: 0; visibility: hidden; transition-delay: 0s, 0s, .5s; }
.rec[data-modo="manana"] .rec-hoy { opacity: .12; filter: blur(2px); pointer-events: none; }

/* --- Animaciones: el árbol brota; las funciones se encienden ------------ */
@keyframes rec-tronco { from { transform: scaleY(0); } to { transform: none; } }
@keyframes rec-brota { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes rec-delante { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes rec-enciende {
  from { background: transparent; color: var(--ultramar); border-color: var(--celeste); }
  to   { background: var(--ultramar); color: var(--blanco-digital); border-color: var(--ultramar); }
}
.rec-nivel:nth-child(1) { --i: 0; } .rec-nivel:nth-child(2) { --i: 1; }
.rec-nivel:nth-child(3) { --i: 2; } .rec-nivel:nth-child(4) { --i: 3; }
.rec-nivel li:nth-child(1) { --j: 0; } .rec-nivel li:nth-child(2) { --j: 1; }
.rec-nivel li:nth-child(3) { --j: 2; } .rec-nivel li:nth-child(4) { --j: 3; }
.rec-nivel li:nth-child(5) { --j: 4; } .rec-nivel li:nth-child(6) { --j: 5; }
.rec-funciones li:nth-child(1) { --k: 0; } .rec-funciones li:nth-child(2) { --k: 1; }
.rec-funciones li:nth-child(3) { --k: 2; } .rec-funciones li:nth-child(4) { --k: 3; }
.rec-funciones li:nth-child(5) { --k: 4; }

.rec-anima[data-modo="hoy"] .rec-arbol::before { animation: rec-tronco 1.6s var(--curva) both; }
.rec-anima[data-modo="hoy"] .rec-nivel { animation: rec-brota .5s var(--curva) both; animation-delay: calc(var(--i) * .4s + .15s); }
.rec-anima[data-modo="hoy"] .rec-nivel li { animation: rec-brota .4s var(--curva) both; animation-delay: calc(var(--i) * .4s + .35s + var(--j) * .08s); }
.rec-anima[data-modo="manana"] .rec-foco-manana { animation: rec-delante .6s var(--rebote) both; }
.rec-anima[data-modo="manana"] .rec-funciones li { animation: rec-enciende .45s var(--curva) both; animation-delay: calc(.7s + var(--k) * .35s); }
.rec[data-modo="manana"]:not(.rec-anima) .rec-funciones li { background: var(--ultramar); color: var(--blanco-digital); border-color: var(--ultramar); }

@media (max-width: 760px) {
  .rec { padding: 28px 14px 14px; }
  .rec-escena { padding: 22px 16px; min-height: 0; }
  .rec-arbol { margin-left: 18px; padding-left: 24px; }
  .rec-nivel { grid-template-columns: 1fr; gap: 8px; }
  .rec-nivel::before { left: -24px; top: 21px; width: 18px; }
  .rec-nivel-t { padding-top: 0; }
  .rec-nivel li, .rec-funciones li { font-size: 14px; }
  .rec-foco-manana { padding: 20px 24px; }
  .rec-funciones { flex-direction: column; border-radius: 24px; padding: 18px; }
  .rec-funciones li + li { margin-left: 0; margin-top: 30px; }
  .rec-funciones li + li::before { left: 50%; top: -22px; translate: -50% 0; rotate: 90deg; }
}
@media (scripting: none) and (prefers-reduced-motion: reduce) {
  .rec-hoy, .rec-manana { transition: none; }
}
html.sin-animaciones .rec-hoy, html.sin-animaciones .rec-manana { transition: none; }

/* ---------- ¿Qué necesitas resolver? · la nube ---------------------------
   (Sustituye a las reglas de árbol .rec-arbol / .rec-nivel de arriba, que
   ya no tienen HTML.) La necesidad en el centro, igual en HOY y en MAÑANA. */
.rec-escena { display: block; position: relative; height: 540px; padding: 0; }
.rec-centro {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 3;
  margin: 0; max-width: calc(100% - 32px); width: max-content;
  padding: 26px 38px; border-radius: 28px 28px 28px 6px;
  background: var(--ultramar); color: var(--blanco-digital);
  font-size: var(--entrada); font-weight: 600; line-height: 1.15; letter-spacing: -.015em;
  text-align: center;
  box-shadow: 0 18px 40px #001e4e33;
}
.rec-hilos { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.rec-hilos path { fill: none; stroke: #11111129; stroke-width: 1; }
.rec-nube { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; z-index: 1; }
.rec-nube li { position: absolute; line-height: 1.2; white-space: nowrap; }
.rec-nube li span {
  display: inline-block;
  padding: .55em 1em; border-radius: 48px;
  background: var(--celeste); color: var(--ultramar); font-weight: 500;
}
/* Sin JS: la nube se ve como una lista suelta */
.rec:not(.rec-vivo) .rec-nube { position: static; display: flex; flex-wrap: wrap; gap: 8px; padding: 16px; }
.rec:not(.rec-vivo) .rec-nube li { position: static; }
.rec:not(.rec-vivo) .rec-centro { position: static; translate: none; margin: 16px auto; }

.rec-hoy-capa, .rec-nube, .rec-hilos { transition: opacity .5s var(--curva), filter .5s var(--curva); }
.rec[data-modo="manana"] .rec-nube,
.rec[data-modo="manana"] .rec-hilos { opacity: .14; filter: blur(2px); }

/* Salida desde el centro, hilos que se dibujan y vaivén continuo */
@keyframes rec-sale { from { translate: var(--dx) var(--dy); scale: .2; opacity: 0; } to { translate: 0 0; scale: 1; opacity: 1; } }
@keyframes rec-hilo { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes rec-vaiven { from { translate: 0 -3px; } to { translate: 0 3px; } }
.rec-vivo:not(.rec-anima) .rec-nube li,
.rec-vivo:not(.rec-anima) .rec-hilos { opacity: 0; }
.rec-anima[data-modo="hoy"] .rec-nube li { animation: rec-sale .9s var(--rebote) both; animation-delay: var(--retraso); }
.rec-hilos path { stroke-dasharray: 1; }
.rec-anima[data-modo="hoy"] .rec-hilos path { animation: rec-hilo 1.8s var(--curva) .4s both; }
.rec-vivo .rec-nube li span { animation: rec-vaiven var(--vaiven, 3s) ease-in-out infinite alternate; }

/* MAÑANA: las cinco funciones, debajo de la necesidad */
.rec-escena .rec-funciones {
  position: absolute; left: 50%; translate: -50% 0; z-index: 2;
  width: max-content; max-width: calc(100% - 24px);
  opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s;
}
.rec[data-modo="manana"] .rec-escena .rec-funciones { opacity: 1; visibility: visible; transition: opacity .4s .2s, visibility 0s; }
.rec:not(.rec-vivo) .rec-escena .rec-funciones { position: static; translate: none; margin: 16px auto; }

@media (max-width: 760px) {
  .rec-escena { height: 760px; }
  .rec-centro { padding: 20px 26px; }
}
@media (scripting: none) and (prefers-reduced-motion: reduce) {
  .rec-vivo .rec-nube li span { animation: none; }
}
html.sin-animaciones .rec-vivo .rec-nube li span { animation: none; }
@media (max-width: 760px) {
  .rec-escena { height: 860px; }
  .rec-escena .rec-funciones { padding: 14px; }
  .rec-escena .rec-funciones li { padding: 8px 18px; }
  .rec-escena .rec-funciones li + li { margin-top: 24px; }
  .rec-escena .rec-funciones li + li::before { top: -19px; }
}

/* Boceto: la frase sola, en texto, en el centro (igual en HOY y MAÑANA);
   alrededor, las etiquetas en corona, del mismo tamaño y sin hilos */
.rec-centro {
  padding: 0; border-radius: 0; background: none; box-shadow: none;
  color: var(--negro-digital);
  font-size: var(--golpe); font-weight: 600; line-height: 1.05; letter-spacing: -.02em;
}
.rec-hilos { display: none; }

/* Más sencillo: las etiquetas sin relleno, solo con un trazo fino */
.rec-nube li span {
  background: var(--blanco-digital); color: var(--ultramar);
  border: 1px solid var(--celeste);
  font-weight: 400;
}

/* MAÑANA: la nube de HOY desaparece del todo y las funciones van sin la
   banda de fondo */
.rec[data-modo="manana"] .rec-nube,
.rec[data-modo="manana"] .rec-hilos { opacity: 0; filter: none; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
.rec-escena .rec-funciones { background: none; }

/* «¿Qué cambia cuando preguntamos a una IA?»: relleno gris claro, como el de
   «Sobre el informe y la metodología» */
.cap .desplegable.desplegable-gris { background: #1111110f; border-color: #11111124; }

/* ---------- «He tenido un hijo» · hoy y mañana, lado a lado ------------- */
.cmp { padding: 44px 40px 48px; }
.cmp-necesidad { margin: 0 0 32px; font-size: var(--golpe); font-weight: 600; line-height: 1.05; letter-spacing: -.02em; }
.cmp-lados { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; }
.cmp-lado { background: var(--blanco-digital); border: 1px solid #11111129; border-radius: 16px; padding: 22px 24px 28px; }
.cmp-titulo { margin: 0 0 12px; font-size: var(--cuerpo); font-weight: 500; color: #111111b3; }
.cmp-nube { position: relative; height: 380px; margin: 0; padding: 0; list-style: none; }
.cmp-nube li { position: absolute; line-height: 1.2; white-space: nowrap; }
.cmp-nube li span {
  display: inline-block; padding: .55em 1em; border-radius: 48px;
  background: var(--blanco-digital); border: 1px solid var(--celeste); color: var(--ultramar);
  font-size: 15px; font-weight: 400;
}
.cmp:not(.cmp-vivo) .cmp-nube { position: static; height: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.cmp:not(.cmp-vivo) .cmp-nube li { position: static; }

.cmp-funciones {
  height: 380px; margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
}
.cmp-funciones li {
  width: min(100%, 220px); padding: 12px 20px; border-radius: 48px; text-align: center;
  background: var(--ultramar); color: var(--blanco-digital);
  font-size: 16px; font-weight: 500; line-height: 1.2;
}

/* Animación: el racimo sale del centro y no para quieto; las funciones van
   apareciendo en orden y luego se quedan quietas */
@keyframes cmp-sale { from { translate: var(--dx) var(--dy); scale: .2; opacity: 0; } to { translate: 0 0; scale: 1; opacity: 1; } }
@keyframes cmp-vaiven { from { translate: 0 -3px; } to { translate: 0 3px; } }
@keyframes cmp-fila { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cmp-vivo:not(.cmp-anima) .cmp-nube li,
.cmp-vivo:not(.cmp-anima) .cmp-funciones li { opacity: 0; }
.cmp-anima .cmp-nube li { animation: cmp-sale .9s var(--rebote) both; animation-delay: var(--retraso); }
.cmp-vivo .cmp-nube li span { animation: cmp-vaiven var(--vaiven, 3s) ease-in-out infinite alternate; }
.cmp-anima .cmp-funciones li { animation: cmp-fila .5s var(--curva) both; }
.cmp-anima .cmp-funciones li:nth-child(1) { animation-delay: 1.3s; }
.cmp-anima .cmp-funciones li:nth-child(2) { animation-delay: 1.55s; }
.cmp-anima .cmp-funciones li:nth-child(3) { animation-delay: 1.8s; }
.cmp-anima .cmp-funciones li:nth-child(4) { animation-delay: 2.05s; }
.cmp-anima .cmp-funciones li:nth-child(5) { animation-delay: 2.3s; }

@media (max-width: 760px) {
  .cmp { padding: 28px 14px 14px; }
  .cmp-lados { grid-template-columns: 1fr; gap: 14px; }
  .cmp-nube { height: 420px; }
  .cmp-nube li span { font-size: 13px; }
  .cmp-funciones { height: auto; padding: 8px 0; }
}
@media (scripting: none) and (prefers-reduced-motion: reduce) {
  .cmp-vivo .cmp-nube li span { animation: none; }
}
html.sin-animaciones .cmp-vivo .cmp-nube li span { animation: none; }
@media (max-width: 760px) {
  .cmp-nube { height: 620px; }
  .cmp-nube li span { font-size: 12.5px; }
}

/* ---------- Tres necesidades ---------------------------------------------- */
.cmp-necesidades { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 22px; }
.cmp-necesidades button {
  font: inherit; font-size: 16px; font-weight: 500; line-height: 1.2;
  padding: 10px 20px; border-radius: 48px; cursor: pointer;
  border: 1px solid var(--ultramar); background: var(--blanco-digital); color: var(--ultramar);
  transition: background-color .25s, color .25s;
}
.cmp-necesidades button[aria-pressed="true"] { background: var(--ultramar); color: var(--blanco-digital); }
.cmp-necesidades button:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }
/* La necesidad, más pequeña */
.cmp-necesidad { margin: 0 0 26px; font-size: var(--entrada); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }
/* «Hoy» y «Mañana»: cuerpo de texto en negrita, a la izquierda */
.cmp-titulo { margin: 0 0 14px; text-align: left; font-size: var(--cuerpo); font-weight: 700; color: var(--negro-digital); }
.cmp-nube { height: auto; min-height: 360px; }
.cmp-nube[hidden] { display: none; }
.cmp-nube li span { font-size: 14px; }
/* Sin vaivén: las etiquetas se quedan quietas cuando llegan */
.cmp-vivo .cmp-nube li span { animation: none; }

/* MAÑANA: la pestaña con lo que pide la persona y las cinco funciones */
.cmp-pestana {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  margin: 0 0 22px; padding: 12px 18px;
  border-radius: 12px 12px 12px 3px; background: var(--ultramar); color: var(--blanco-digital);
  text-align: left;
}
.cmp-pestana-t { font-size: 13px; font-weight: 400; opacity: .8; }
.cmp-pestana-n { font-size: var(--cuerpo); font-weight: 600; line-height: 1.25; }
.cmp-pasos { position: relative; margin: 0; padding: 0 0 0 28px; list-style: none; text-align: left; }
.cmp-pasos[hidden] { display: none; }
.cmp-pasos::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: #11111129; }
.cmp-pasos li { position: relative; display: grid; gap: 2px; padding: 0 0 16px; }
.cmp-pasos li:last-child { padding-bottom: 0; }
.cmp-pasos li::before {
  content: ""; position: absolute; left: -26px; top: 5px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--blanco-digital); border: 2px solid var(--ultramar);
}
.cmp-pasos strong { font-size: 17px; font-weight: 600; color: var(--ultramar); line-height: 1.25; }
.cmp-pasos span { font-size: 15px; line-height: 1.45; color: #111111cc; }
.cmp-vivo:not(.cmp-anima) .cmp-pasos li { opacity: 0; }
.cmp-anima .cmp-pasos li { animation: cmp-fila .5s var(--curva) both; }
.cmp-anima .cmp-pasos li:nth-child(1) { animation-delay: 1.1s; }
.cmp-anima .cmp-pasos li:nth-child(2) { animation-delay: 1.35s; }
.cmp-anima .cmp-pasos li:nth-child(3) { animation-delay: 1.6s; }
.cmp-anima .cmp-pasos li:nth-child(4) { animation-delay: 1.85s; }
.cmp-anima .cmp-pasos li:nth-child(5) { animation-delay: 2.1s; }
.cmp-anima .cmp-pasos li:nth-child(n)::before { animation: none; }
@media (max-width: 760px) {
  .cmp-nube { min-height: 0; }
  .cmp-nube li span { font-size: 12.5px; }
}

/* ---------- Hoy y mañana · caída tipo Tetris con hilos -------------------- */
.cmp-cabecera { margin: 0 0 18px; font-size: var(--entrada); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }
.cmp-nube { height: 440px; min-height: 0; }
.cmp-vivo .cmp-nube li {
  left: 0; top: 0; transform-origin: 50% 50%; z-index: 1;
  transition: transform 1.1s cubic-bezier(.42, 0, .58, 1.06), opacity .35s;
}
.cmp-anima .cmp-nube li { animation: none; }
.cmp-nube li span { font-size: var(--cmp-letra, 16px); }
.cmp-hilos { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0; transition: opacity .8s; pointer-events: none; }
.cmp-hilos.visibles { opacity: 1; }
.cmp-hilos line { stroke: #11111133; stroke-width: 1; }
@media (max-width: 760px) { .cmp-nube { height: 480px; } }
.cmp-hilos line { stroke: #001e4e40; }

/* ---------- Cajas: un solo criterio en toda la web ------------------------
   Ninguna caja clara lleva trazo; se separan del fondo por el relleno. Sobre
   blanco, relleno gris claro; sobre gris, relleno blanco. (La de la comunidad
   agéntica, sobre la banda ultramar, mantiene su trazo blanco, pedido aparte.)
   Todas con las esquinas redondeadas. */
.cap .desplegable { border: 0; }
.cap.noche .desplegable { border: 1px solid var(--blanco-digital); }
.cap .desplegable, .cap .desplegable.desplegable-gris,
.cap-02-entrada .desplegable { background: #1111110d; }
.cap.noche .desplegable { background: var(--ultramar); }
.tarjeta { border: 0; background: #1111110d; }
.cmp-lado { border: 0; }
.cta-caja { border: 0; border-radius: 20px; }

/* HOY: las piezas salen del borde de la propia caja, sin transparencia */
.cmp-vivo .cmp-nube { overflow: hidden; }
.cmp-vivo .cmp-nube li { transition: transform 1.1s cubic-bezier(.42, 0, .58, 1.06); }
.cmp-vivo:not(.cmp-anima) .cmp-nube li { opacity: 1; }

/* MAÑANA: las funciones en negro y la línea termina en el círculo de
   «Acompañar» (un tramo por paso, de círculo a círculo) */
.cmp-pasos strong { color: var(--negro-digital); }
.cmp-pasos li::before { border-color: var(--negro-digital); }
.cmp-pasos::before { display: none; }
.cmp-pasos li:not(:last-child)::after {
  content: ""; position: absolute; left: -19px; top: 12px; height: 100%;
  width: 1px; background: #11111140;
}
.cmp-pasos li::before { z-index: 1; }
.cmp-pasos li::after { z-index: 0; }

/* ---------- Botones: un solo tamaño en toda la web ------------------------
   Mismo alto (44 px), misma letra (PV Sans, 16 px) y mismo peso (600) para
   todos los botones de píldora: cabecera, portada, descargas, CTA, «Qué
   dice…», las tres necesidades y el enlace final de la conversación. */
a.cabecera-metodo,
.boton, .portada .boton, .portada-informe .boton, .salidas .boton, .cta-caja .boton,
.agente-hablar, .cap.noche .agente-hablar,
.cmp-necesidades button,
.charla-fin-enlace {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; min-height: 44px; height: 44px;
  padding: 0 24px;
  font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.2;
  letter-spacing: normal; white-space: nowrap;
}
@media (max-width: 760px) {
  /* En móvil, los textos largos pueden partirse sin romper el alto mínimo */
  .boton, .cmp-necesidades button { height: auto; white-space: normal; text-align: center; padding-block: 10px; }
}
/* El recorte lo hace la caja blanca entera, no el montón */
.cmp-vivo .cmp-nube { overflow: visible; }
.cmp-vivo .cmp-hoy { position: relative; overflow: hidden; }
.cmp-hoy .cmp-titulo { position: relative; z-index: 0; }
/* Línea centrada en los círculos: el círculo mide 11 px en total (border-box),
   su centro queda a 20,5 px; la línea de 1 px va de -21 a -20 */
.cmp-pasos li:not(:last-child)::after { left: -21px; top: 10.5px; }

/* Mochila del 01: las etiquetas con el mismo estilo que en «Hoy»: relleno
   blanco, trazo celeste y texto ultramar */
.etiqueta[data-familia] {
  background: var(--blanco-digital); color: var(--ultramar);
  border: 1px solid var(--celeste); font-weight: 400;
}

/* Portada: «Descargar informe» en ultramar al pasar el ratón */
.portada .boton:hover, .portada-informe .boton:hover { background: var(--ultramar); border-color: var(--ultramar); color: var(--blanco-digital); }

/* Recorrido de Marta: las flechas entre carpetas en blanco digital */
.cap.noche .ruta li:not(:first-child):before { color: var(--blanco-digital); }

/* Escena final: «Esta vez no aparecen carpetas…» alineado como el cuerpo
   de texto del reportaje (columna de lectura, a la izquierda) */
.vuelta-texto {
  width: min(var(--col-texto-max), var(--col-texto), calc(100% - 2 * var(--gotera)));
  max-width: none; text-align: left; align-self: center;
}

/* Comunidad agéntica: los bocadillos, en el mismo ultramar claro de la
   tarjeta destacada. Iban en el ultramar de la banda: no se veían y, al pasar
   el ratón, su franja asomaba sobre la tarjeta. Ahora bocadillo y tarjeta
   comparten color y se funden sin línea. */
.cap.noche .agente-burbuja {
  background-color: #052d6f;
  background-color: color-mix(in srgb, var(--ultramar) 80%, var(--azul));
}
.cap.noche .agente-burbuja:after {
  border-top-color: #052d6f;
  border-top-color: color-mix(in srgb, var(--ultramar) 80%, var(--azul));
}
/* Mismo ancho exacto que la columna de lectura (.lee: 50 % de la ventana,
   máx. 600 px, menos su aire lateral) */
.vuelta-texto { width: calc(min(var(--col-texto-max), 50vw) - 2 * var(--gotera)); }
@media screen and (max-width: 1000px) { .vuelta-texto { width: calc(min(var(--col-texto-max), 68vw) - 2 * var(--gotera)); } }
@media screen and (max-width: 760px) { .vuelta-texto { width: calc(100vw - 2 * var(--gotera)); } }

/* ==========================================================================
   Accesibilidad (WCAG 2.2 AA)
   ========================================================================== */
/* Ladillos: ahora son <h2> (encabezado de cada capítulo). Se neutraliza el
   estilo de encabezado del navegador; se quita la caja alta y se sube a
   14 px, el mínimo para textos pequeños. */
h2.marcador { font-size: 14px; font-weight: 500; line-height: 1.4; text-transform: none; }

/* Portada: sin caja alta y sin textos por debajo de 14 px */
.portada-informe .portada-antetit, .portada-antetit { font-size: 14px; text-transform: none; }
.portada-baja { font-size: 14px; text-transform: none; }

/* Portada: una veladura ultramar del 15 % sobre la foto y el azul. El blanco
   sobre #196AFF daba 4,42:1 (no llega a 4,5:1 en texto pequeño); con la
   veladura pasa de 5,5:1. */
.portada-foto::after { content: ""; position: absolute; inset: 0; background: #001e4e26; pointer-events: none; }
.portada { background-color: #155fe4; }

/* Nada se mueve solo más de 5 segundos: la flecha de «Leer» rebota tres
   veces y el cursor del buscador parpadea cinco */
.portada-baja .flecha { animation-iteration-count: 3; }
.buscador-cursor { animation-iteration-count: 5; }

/* Enlaces del pie: área de pulsación de al menos 24 px de alto */
.pie-pv-a { display: inline-flex; align-items: center; min-height: 24px; }

/* Reflujo (zoom 400 % ≈ 320 px): los botones pueden partirse en dos líneas
   y nunca empujan la página hacia los lados */
@media (max-width: 760px) {
  a.cabecera-metodo,
  .boton, .portada .boton, .portada-informe .boton, .salidas .boton, .cta-caja .boton,
  .agente-hablar, .cap.noche .agente-hablar, .cmp-necesidades button, .charla-fin-enlace {
    height: auto; min-height: 44px; max-width: 100%;
    white-space: normal; text-align: center; padding-block: 10px;
  }
}
@media (max-width: 400px) {
  a.cabecera-metodo { padding-inline: 14px; font-size: 15px; line-height: 1.15; }
  .cabecera-logo img, .cabecera .logo img { max-width: 120px; }
}
/* La portada deja siempre sitio a la cabecera real (que crece si su botón
   se parte en dos líneas) */
.portada { padding-top: calc(var(--alto-cabecera) + 24px); }

/* ---------- Comunidad agéntica: bocadillo encajado sobre su tarjeta -------
   El bocadillo tenía 6 px de más a cada lado y pisaba 86 px la tarjeta. Ahora
   tiene su mismo ancho y termina justo donde empieza la tarjeta: los dos
   forman una sola columna (bocadillo arriba, ficha abajo), todas con el mismo
   alto de bocadillo. */
.comunidad .agente-burbuja {
  margin: 0; left: 0; right: 0;
  bottom: 86px;                         /* 226 px de zona - 140 px del arranque de la tarjeta */
  min-height: 150px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; text-align: center;
  border-radius: 24px 24px 0 0;
}
.comunidad .agente-burbuja:after { display: none; }
.comunidad .agente:before { border-radius: 0 0 24px 24px; }
/* Las fichas sin pasar el ratón, con el mismo ultramar claro que su
   bocadillo muy rebajado, para que la columna se lea entera */
.cap.noche .comunidad .agente:before { background-color: #fafafa0a; }

@media screen and (min-width: 992px) {
  /* Marta: su tarjeta arranca 44 px más arriba (96 px), su bocadillo también */
  .comunidad .agente-celda:nth-child(3) .agente-burbuja { bottom: 130px; }
}
/* Marta: bocadillo blanco con texto ultramar, para que no se confunda con el
   fondo de su ficha */
.cap.noche .comunidad .agente-celda:nth-child(3) .agente-burbuja { background-color: var(--blanco-digital); color: var(--ultramar); }

/* Comunidad agéntica: todos los bocadillos del mismo color; la tarjeta de
   Marta, un punto más clara, para que su bocadillo se distinga de ella */
.cap.noche .comunidad .agente-celda:nth-child(3) .agente-burbuja {
  background-color: #052d6f;
  background-color: color-mix(in srgb, var(--ultramar) 80%, var(--azul));
  color: var(--blanco-digital);
}
.cap.noche .comunidad .agente-celda:nth-child(3) .agente:before {
  background-color: #0a3c90;
  background-color: color-mix(in srgb, var(--ultramar) 62%, var(--azul));
}
/* Más aire entre el módulo de agentes y el texto que lo rodea */
.comunidad { margin-block: 72px 96px; }

/* Ladillos fijos de nuevo en mayúsculas (sin interletraje añadido) */
h2.marcador { text-transform: uppercase; }

/* Textos de 50 px (sentencias y «El carpetón ciudadano»): interletraje menos
   apretado */
.golpe, .mochila-golpe p { letter-spacing: -.005em; }
/* Los bocadillos (el de Marta, sobre todo) sobresalen por encima de la caja
   del módulo: se compensa para que quede aire de verdad tras «Creamos una
   comunidad agéntica…» */
.comunidad { margin-top: 172px; }

/* Comunidad agéntica: cada agente, una columna de un solo color (frase y
   ficha iguales). Los cuatro, en ultramar claro; Marta, en otro azul. Al
   pasar el ratón, la columna entera toma el azul de Marta. */
.cap.noche .comunidad .agente:before,
.cap.noche .comunidad .agente-burbuja {
  background-color: #052d6f;
  background-color: color-mix(in srgb, var(--ultramar) 80%, var(--azul));
}
.cap.noche .comunidad .agente-celda:nth-child(3) .agente:before,
.cap.noche .comunidad .agente-celda:nth-child(3) .agente-burbuja,
.cap.noche .comunidad .agente:hover:before,
.cap.noche .comunidad .agente:hover .agente-burbuja {
  background-color: #0a3c90;
  background-color: color-mix(in srgb, var(--ultramar) 62%, var(--azul));
}
.cap.noche .comunidad .agente-burbuja { transition: background-color .45s var(--curva), opacity .5s ease, transform .5s ease; }

/* Comunidad agéntica: menos aire entre la frase y el retrato (de 110 px a
   24 px). El bocadillo baja al fondo de su zona y la tarjeta arranca justo
   debajo, así la columna sigue siendo una sola pieza. */
.comunidad .agente-burbuja { bottom: 0; }
.comunidad .agente:before { top: 226px; }          /* alto de la zona de la frase */
@media screen and (min-width: 992px) {
  /* Marta: su retrato sube 30 px, así que su frase se queda 15 px más arriba */
  .comunidad .agente-celda:nth-child(3) .agente-burbuja { bottom: 15px; }
  .comunidad .agente-celda:nth-child(3) .agente:before { top: 211px; }
}
/* Los bocadillos ya no sobresalen por arriba: se ajusta el aire superior para
   que el hueco tras el texto siga siendo de unos 100 px */
.comunidad { margin-top: 40px; }

/* Conversación con un agente: el velo de fondo, en negro translúcido, para
   que no se funda con la columna ultramar del perfil. En móvil el perfil va
   arriba, en ultramar, justo donde está la X: la X pasa a blanco. */
.charla-fondo { background-color: #111111d9; }
@media screen and (max-width: 860px) {
  .charla-cerrar { color: var(--blanco-digital); top: 28px; right: 12px; width: 44px; height: 44px; }
  .charla-cerrar:focus-visible { outline-color: var(--blanco-digital); }
}

/* Recorrido de Marta en móvil: cada paso, una fila compacta (carpeta pequeña
   a la izquierda y el texto al lado). Apiladas a todo el ancho, las cinco
   carpetas no cabían en la escena anclada y se montaban sobre el texto
   siguiente. */
@media screen and (max-width: 900px) {
  .ruta { width: 100%; max-width: 360px; gap: 4px; }
  .ruta li { gap: 4px; }
  .ruta li:not(:first-child):before { align-self: flex-start; width: 16px; height: 16px; margin-inline: 20px 0; }
  .salto {
    display: grid; grid-template-columns: 56px 1fr; column-gap: 14px; row-gap: 2px;
    align-items: center; width: 100%; text-align: left;
  }
  .salto-carpeta { grid-row: 1 / span 2; width: 56px; height: 44px; }
  .salto:hover .salto-carpeta { translate: none; }
  .salto-nombre, .salto-que { text-align: left; }
  .salto-nombre { align-self: end; }
  .salto-que { align-self: start; }
  .ruta-detalle { gap: 6px; }
}
/* Agentes en móvil: «Qué dice …» en una sola línea en todas las tarjetas */
@media (max-width: 760px) {
  .comunidad .agente-hablar { padding-inline: 10px; font-size: 15px; white-space: nowrap; }
}
/* «El carpetón ciudadano» en móvil: con margen a los lados, no de borde a borde */
@media screen and (max-width: 760px) {
  .mochila-golpe { width: calc(100% - 2 * var(--gotera)); max-width: 600px; }
}
/* Tableta: las dos cajas del CTA no se salen por la derecha (el botón largo
   no partía la línea y ensanchaba la columna) */
.cta-doble > * { min-width: 0; }
@media (max-width: 1000px) {
  .cta-caja .boton { height: auto; min-height: 44px; max-width: 100%; white-space: normal; text-align: center; padding-block: 10px; }
}

/* Portada: entradilla algo más pequeña (30 px en escritorio, antes 36) */
.portada-sub { font-size: 30px; line-height: 1.3; }
@media screen and (max-width: 1000px) { .portada-sub { font-size: 26px; } }
@media screen and (max-width: 760px)  { .portada-sub { font-size: 22px; } }
/* Portada: titular y entradilla un poco más arriba (el hueco de abajo sube
   el bloque centrado) */
.portada { padding-bottom: 14vh; }
@media screen and (max-width: 760px) { .portada { padding-bottom: 10vh; } }

/* ---------- Red y recorrido de Marta en móvil ----------------------------
   · Los textos de la escena (1.300, 73 %, recorrido) con la gotera a los
     lados: «carpetas ciudadanas se han creado…» iba pegado al borde.
   · Carpetas más pequeñas pero con la proporción de escritorio (156 × 96):
     48 × 30, con radios y pestaña a escala. A 56 × 44 se veían muy redondas
     y la pestaña pisaba la flecha.
   · Todo más compacto para que la escena quepa en un móvil de 667 px: si no,
     «Pulsa cualquiera» quedaba bajo la barra y el texto del paso se montaba
     sobre el párrafo siguiente. */
@media screen and (max-width: 900px) {
  .red-tiempo { padding-inline: var(--gotera); box-sizing: border-box; gap: 18px; }
  .red-tiempo[data-tiempo="3"] { gap: 14px; }
  .ruta { gap: 0; }
  .ruta li { gap: 0; }
  .ruta li:not(:first-child):before { width: 12px; height: 12px; margin: 2px 0 6px 18px; }
  /* La escena empieza bajo la barra del ladillo, no detrás de ella */
  .red-escena { padding-top: 92px; }
  .red-tiempo[data-tiempo="3"] .ruta-pista { margin: 0 0 6px; }
  .salto { grid-template-columns: 48px 1fr; column-gap: 12px; }
  .salto-carpeta { width: 48px; height: 30px; border-radius: 1px 4px 4px 4px; }
  .salto-carpeta:before { top: -4px; height: 5px; border-radius: 2px 2px 0 0; }
  .ruta-detalle { gap: 6px; }
  .ruta-texto { font-size: 17px; line-height: 1.4; }
  .lee.tras-red { margin-top: 0; }
}

/* ---------- Ladillos que viajan (como en borrador-maria) -----------------
   Con .ladillos-viajan (lo pone ladillosViajan() en reportaje.js): el
   capítulo arranca con su titular grande; la barra del ladillo no se ve ni
   ocupa sitio hasta que el titular pasa bajo la cabecera. Entonces aparece
   fija arriba a la izquierda y el texto viaja hasta ella. */
.ladillos-viajan .marcador {
  font-size: 20px; font-weight: 600; line-height: 24px; letter-spacing: -.005em; text-transform: none;
  padding-top: 20px; padding-bottom: 20px;
  color: var(--negro-digital);
}
.ladillos-viajan .cap.noche .marcador,
.ladillos-viajan .cap-02-grupo > .marcador.sobre-noche { color: var(--celeste); }
.ladillos-viajan .marcador .filete { display: none; }
.ladillos-viajan .marcador .marcador-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transform-origin: left center; }
/* Escondida hasta que se activa: sin fondo, sin texto, sin flecha */
.ladillos-viajan .marcador:not(.activo) { background: transparent; box-shadow: none; }
.ladillos-viajan .marcador .marcador-txt { opacity: 0; }
.ladillos-viajan .marcador .flecha-ladillo { opacity: 0; transition: opacity .35s ease; }
.ladillos-viajan .marcador.activo { box-shadow: 0 3px 6px #11111112; }
.ladillos-viajan .marcador.activo .marcador-txt { opacity: 1; }
.ladillos-viajan .marcador.activo .flecha-ladillo { opacity: 1; transition-delay: .45s; }
.ladillos-viajan .marcador.viaja .marcador-txt { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
/* El titular grande del capítulo */
.cap-titular {
  box-sizing: border-box;
  width: min(var(--col-texto-max), var(--col-texto), 100%);
  margin: 80px auto 40px; padding-inline: var(--gotera);
  font-size: 54px; font-weight: 600; line-height: 1.04; letter-spacing: -.01em;
  color: var(--negro-digital);
  transition: opacity .3s ease;
}
.cap.noche .cap-titular { color: var(--blanco-digital); }
.cap-titular.se-va { opacity: 0; transition: none; }
@media (max-width: 760px) {
  .ladillos-viajan .marcador { font-size: 17px; line-height: 21px; }
  .cap-titular { font-size: clamp(34px, 9vw, 44px); margin: 56px auto 28px; }
}
@media (scripting: none) and (prefers-reduced-motion: reduce) {
  .ladillos-viajan .marcador .flecha-ladillo, .cap-titular { transition: none; }
}
html.sin-animaciones .ladillos-viajan .marcador .flecha-ladillo, html.sin-animaciones .cap-titular { transition: none; }
/* Flecha del ladillo, un poco más grande (16 → 19 px; 17 px en móvil) */
.ladillos-viajan .marcador .flecha-ladillo { width: 19px; height: 19px; flex: none; }
@media (max-width: 760px) { .ladillos-viajan .marcador .flecha-ladillo { width: 17px; height: 17px; } }

/* ======== Apertura en dos pasos (traída de la versión publicada como informe-3) ======== */

/* «Leer» está centrado con translate: su entrada conserva el -50 % */
@keyframes portada-entra-baja {
  from { opacity: 0; translate: -50% 14px; }
  to   { opacity: 1; translate: -50% 0; }
}

@media (scripting: enabled) {
  html:not(.sin-animaciones) .portada.cargada .portada-baja { animation-name: portada-entra-baja; }
}

/* ---------- Apertura en dos pasos ----------------------------------------
   La portada mide la pantalla más un tramo corto de scroll; dentro, la
   escena se queda fija. --p (0 → 1) lo pone apertura() en reportaje.js. */
.portada.portada-pasos {
  display: block; position: relative;
  height: calc(100svh + 45vh); min-height: 0;
  padding: 0; text-align: left;
}

.portada-pasos .portada-escena {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
}

/* La foto: se desplaza y se acerca un poco al avanzar (la chica pasa del
   centro a la derecha) */
.portada-pasos .portada-foto {
  inset: -4%;
  background-position: calc(48% + 26% * var(--p, 0)) calc(30% + 30% * var(--p, 0));
  transform: scale(calc(1 + .06 * var(--p, 0)));
}

/* El bloque de texto, a la izquierda */
.portada-pasos .portada-texto {
  position: absolute; z-index: 2;
  left: clamp(24px, 6.5vw, 110px); right: clamp(24px, 6.5vw, 110px);
  top: calc(var(--alto-cabecera) + 5vh);
  transform: translateY(calc(var(--sube, 0px) * (1 - var(--p, 0))));
  will-change: transform;
}

.portada-pasos .portada-titulo {
  margin: 0; max-width: 9em; text-align: left;
  font-size: clamp(64px, 10.5vw, 168px); font-weight: 500; line-height: .92; letter-spacing: -.035em;
  color: var(--blanco-digital);
}

.portada-pasos .portada-sub,
.portada-pasos .portada-informe {
  opacity: 0; translate: 0 18px;
  transition: opacity .6s var(--curva), translate .6s var(--curva);
}

.portada-pasos.abierta .portada-sub,
.portada-pasos.abierta .portada-informe { opacity: 1; translate: 0 0; }

.portada-pasos.abierta .portada-informe { transition-delay: .12s; }

.portada-pasos .portada-sub {
  margin: 48px 0 0; max-width: 28em; text-align: left;
  font-size: 22px; line-height: 1.4; font-weight: 500; color: var(--blanco-digital);
}

.portada-pasos .portada-informe { margin: 40px 0 0; text-align: left; align-items: flex-start; display: flex; flex-flow: column; gap: 4px; }

.portada-pasos .portada-informe .boton { margin-top: 20px; }

.portada-pasos .portada-antetit, .portada-pasos .portada-informe-titulo { margin: 0; color: var(--blanco-digital); font-size: 15px; text-align: left; }

/* «Leer»: solo en el primer paso */
.portada-pasos .portada-baja { opacity: calc(1 - var(--p, 0) * 2.5); }

/* Sin las animaciones de entrada escalonadas anteriores (las sustituye el
   scroll); el titular sí entra suave al cargar */
.portada-pasos.cargada :is(.portada-sub, .portada-antetit, .portada-informe-titulo, .portada-informe .boton) { animation: none; }

@media (scripting: enabled) {
  /* (sin la entradilla: esta regla, más específica, la mostraba un instante al
     cargar y luego se desvanecía) */
  html:not(.sin-animaciones) .portada-pasos:not(.cargada) :is(.portada-antetit, .portada-informe-titulo, .portada-informe .boton) { opacity: 1; }
  html:not(.sin-animaciones) .portada-pasos:not(.abierta) :is(.portada-sub, .portada-informe) { opacity: 0; }
}

@media (max-width: 760px) {
  .portada.portada-pasos { height: calc(100svh + 40vh); }
  .portada-pasos .portada-foto { background-position: calc(60% + 20% * var(--p, 0)) center; }
  .portada-pasos .portada-titulo { font-size: clamp(48px, 15vw, 72px); }
  .portada-pasos .portada-sub { margin-top: 28px; font-size: 18px; }
  .portada-pasos .portada-informe { margin-top: 24px; }
}

@media (scripting: none) and (prefers-reduced-motion: reduce) {
  .portada-pasos .portada-sub, .portada-pasos .portada-informe { opacity: 1; translate: none; transition: none; }
}
html.sin-animaciones .portada-pasos .portada-sub, html.sin-animaciones .portada-pasos .portada-informe { opacity: 1; translate: none; transition: none; }

.portada-pasos.cargada .portada-baja { animation: none; }

/* La portada recortaba su contenido (overflow: hidden) y eso anulaba el
   sticky de la escena: se recorta la escena, no la portada */
.portada.portada-pasos { overflow: visible; background: none; }

/* La ficha del informe, sin caja: texto suelto bajo la entradilla */
.portada-pasos .portada-informe {
  max-width: none; padding: 0; border: 0; border-radius: 0;
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* (una regla antigua, «.portada > *:not(…)», le ponía position: relative a
   la escena; esta la supera para que funcione el sticky) */
.portada.portada-pasos > .portada-escena:not(#_) { position: sticky; top: 0; z-index: 1; }

/* Apertura: más tiempo para leer (la escena se queda fija bastante más
   después de que aparezca el texto) y la foto, sin desplazarse, pasa de
   alejada a más cerca */
.portada.portada-pasos { height: calc(100svh + 120vh); }

.portada-pasos .portada-foto {
  inset: 0;
  background-position: 56% 45%;
  transform: scale(calc(1 + .14 * var(--p, 0)));
  transform-origin: 62% 45%;
}

@media (max-width: 760px) {
  .portada.portada-pasos { height: calc(100svh + 100vh); }
  .portada-pasos .portada-foto { background-position: 66% center; transform-origin: 60% 50%; }
}

/* Apertura: más aire entre el titular y la entradilla */
.portada-pasos .portada-sub { margin-top: 88px; }

@media (max-width: 760px) { .portada-pasos .portada-sub { margin-top: 48px; } }

/* Apertura: el titular arriba y la entradilla con la descarga abajo de la
   pantalla (separados del titular, sin salirse nunca por debajo) */
.portada-pasos .portada-texto { bottom: 9vh; display: flex; flex-direction: column; }

.portada-pasos .portada-sub { margin-top: auto; padding-top: 40px; }

@media (max-width: 760px) {
  .portada-pasos .portada-texto { bottom: 6vh; }
  .portada-pasos .portada-sub { padding-top: 32px; }
}

/* Apertura más suave: acercamiento de la foto más leve y entrada del texto
   más lenta y corta de recorrido */
.portada-pasos .portada-foto { transform: scale(calc(1 + .07 * var(--p, 0))); }

.portada-pasos .portada-sub,
.portada-pasos .portada-informe {
  translate: 0 10px;
  transition: opacity 1.1s var(--curva), translate 1.1s var(--curva);
}

.portada-pasos.abierta .portada-informe { transition-delay: .2s; }
/* Portada: la foto en color, sin el filtro azul, con una capa negra
   translúcida encima para que el texto blanco se lea */
.portada { background-color: #3a3a3a; }
.portada-foto::after { background: #11111185; }

/* Entradilla nueva, más larga: a 24 px (19 px en móvil) */
.portada-pasos .portada-sub { font-size: 24px; line-height: 1.4; max-width: 34em; }
@media (max-width: 760px) { .portada-pasos .portada-sub { font-size: 19px; } }

/* Apertura: vuelve la foto en blanco y negro multiplicada por el azul, con
   la veladura ultramar del 15 % (en lugar de la capa negra) */
.portada { background-color: #155fe4; }
.portada-foto::after { background: #001e4e26; }

/* CTA: titular «De la reflexión a la transformación» con su entradilla */
#cta .cta-intro { margin-top: 20px; }


/* ==========================================================================
   Estilo del informe 3 (5 de octubre): descarga, botones, redondeados,
   buscador, mochila con círculos, carpetón, desplegables, red, tarjetas,
   perfiles agénticos, cuatro preguntas, cierre con foto y CTA
   ========================================================================== */
:root { --trazo-caja: #a8a8a8; }

/* ---------- Descarga: icono en el HTML (svg.icono-descarga) ------------- */
a[href$=".pdf"].boton::after, a[href$=".pdf"].cabecera-metodo::after { content: none; }
.cabecera-metodo, .boton { gap: 10px; }
.icono-descarga { flex: none; width: 13px; height: 15px; display: block; }

/* ---------- Botones: un solo hover, misma letra, alto y relleno -------- */
.boton:hover, a.boton:hover,
.portada .boton:hover, .portada-informe .boton:hover, .salidas .boton:hover,
.cta-caja .boton:hover, .cierre-claro .boton:hover,
a.cabecera-metodo:hover, .cabecera.en-noche a.cabecera-metodo:hover,
.cmp-necesidades button:hover, .cmp-necesidades button[aria-pressed="true"]:hover,
.hm-necesidades button:hover,
.charla-fin-enlace:hover, .charla-sugerencia:hover,
.subir:hover {
  background-color: var(--celeste); border-color: var(--celeste); color: var(--ultramar);
}
/* El borde cambia de color a la vez que el fondo: si no, durante el fundido
   se veía un filo celeste alrededor del ultramar */
.boton, a.cabecera-metodo, .cmp-necesidades button, .hm-necesidades button,
.agente-hablar, .charla-fin-enlace, .charla-sugerencia, .subir {
  transition: background-color .3s, color .3s, border-color .3s;
}
.subir { transition: opacity .3s, visibility .3s, translate .3s var(--curva), bottom .3s var(--curva), background-color .3s, color .3s, border-color .3s; }

/* Todos los botones iguales: misma letra (16 px, 600), mismo alto (44 px) y
   mismo relleno. En móvil, 16 px a los lados en todos (cabecera incluida);
   los textos largos pueden partirse en dos líneas para no salirse. */
a.cabecera-metodo, .boton, .portada .boton, .portada-informe .boton, .salidas .boton, .cta-caja .boton,
.agente-hablar, .cmp-necesidades button, .charla-fin-enlace {
  font-size: 16px; font-weight: 600; line-height: 1.2; letter-spacing: normal;
}
@media (max-width: 760px) {
  a.cabecera-metodo, .boton, .portada .boton, .portada-informe .boton, .salidas .boton, .cta-caja .boton,
  .cmp-necesidades button, .charla-fin-enlace,
  .comunidad .agente-hablar, .cap-04-claro .comunidad .agente-hablar {
    font-size: 16px; padding: 10px 16px; min-height: 44px;
  }
  .cap-04-claro .comunidad .agente-hablar { margin: auto 8px 8px; }
}

/* ---------- Un solo redondeado (6 px) para las cajas destacadas --------- */
.tarjeta, .cta-caja, .rec.cmp, .cmp-lado,
.buscador, .buscador-resultado-caja { border-radius: 6px; }
.charla-caja { border-radius: 6px; }
@media screen and (max-width: 860px) { .charla-caja { border-radius: 0; } }

/* ---------- 01 · Buscador «Renovar DNI» --------------------------------- */
.buscador, .buscador-resultado-caja { box-shadow: 0 8px 24px #1111110a; }
.buscador-lupa { color: var(--negro-digital); }
.buscador-boton {
  display: inline-flex; align-items: center; height: 44px; padding: 0 24px;
  font-size: 16px; font-weight: 600; border-radius: 48px;
  background: var(--celeste); color: var(--ultramar);
}
.buscador.pulsa .buscador-boton { background: var(--celeste); transform: scale(.94); }
.buscador-resultado-caja {
  text-align: left;
  padding-left: calc(40px + var(--buscador) * .62 + 20px);
}
@media screen and (max-width: 760px) {
  .buscador-resultado-caja { padding-left: calc(24px + var(--buscador) * .62 + 14px); }
}

/* ---------- Desplegables: caja con trazo gris (blanco sobre ultramar), 6 px,
   del ancho de la columna de texto; botón de abrir/cerrar en celeste ---- */
.cap .desplegable, .cap .desplegable.desplegable-gris,
.cap-02-entrada .desplegable, .cap.noche .desplegable {
  position: relative; box-sizing: border-box;
  width: calc(min(var(--col-texto-max), var(--col-texto), calc(100% - 2 * var(--gotera))) - 2 * var(--gotera));
  padding-inline: 0; overflow: visible;
  background: transparent; border: 1px solid var(--trazo-caja); border-radius: 6px;
}
.cap .desplegable::before, .cap .desplegable::after { content: none; }
.cap .desplegable .metodo-boton, #metodo .metodo-boton {
  position: static; padding: 22px 24px; background: transparent; border-radius: 6px;
  font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em;
}
@media (max-width: 760px) { .cap .desplegable .metodo-boton { font-size: 19px; } }
.cap .desplegable .metodo-cuerpo { padding: 0 24px 28px; }
.cap .desplegable .metodo-boton[aria-expanded="true"] { background: transparent; }
.cap.noche .desplegable { border-color: var(--blanco-digital); color: var(--blanco-digital); }
.cap.noche .desplegable .metodo-boton { color: var(--blanco-digital); background: transparent; }
.cap.noche .desplegable .metodo-cuerpo, .cap.noche .desplegable .metodo-cuerpo * { color: var(--blanco-digital); }
.desplegable:has(.metodo-boton[aria-expanded="true"]) { cursor: pointer; }
.cap .desplegable .metodo-boton .signo {
  background: var(--celeste); border-color: var(--celeste); color: var(--ultramar);
}

/* ---------- 02 · «Pulsa cualquiera»: circulito celeste, mano en ultramar - */
.icono-pulsa, .cap.noche .icono-pulsa { background: var(--celeste); border-color: var(--celeste); }
.icono-pulsa::before, .cap.noche .icono-pulsa::before { background: var(--ultramar); }

/* ---------- 02 · Recorrido de Marta: carpetas con esquinas de 5 px y
   pestaña en diagonal; la abierta, celeste; las demás, blancas con trazo
   celeste (dibujadas a su tamaño real, 156 × 96; 48 × 30 en móvil) ----- */
.cap .salto .salto-carpeta, .cap .salto:hover .salto-carpeta,
.cap.cap-02-noche .salto .salto-carpeta, .cap.cap-02-noche .salto:hover .salto-carpeta {
  border-radius: 0; background-color: transparent;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 156 96'%3E%3Cpath d='M5.75 0.75L36.5 0.75Q39 0.75 41.22 1.89L50.08 6.46Q52.3 7.6 54.8 7.6L150.25 7.6Q155.25 7.6 155.25 12.6L155.25 90.25Q155.25 95.25 150.25 95.25L5.75 95.25Q0.75 95.25 0.75 90.25L0.75 5.75Q0.75 0.75 5.75 0.75Z' fill='%23fafafa'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.cap .salto[aria-pressed="true"] .salto-carpeta,
.cap.cap-02-noche .salto[aria-pressed="true"] .salto-carpeta,
.cap.cap-02-noche .salto[aria-pressed="true"]:hover .salto-carpeta {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 156 96'%3E%3Cpath d='M5.0 0.0L36.5 0.0Q39 0 41.23 1.14L50.07 5.66Q52.3 6.8 54.8 6.8L151.0 6.8Q156 6.8 156.0 11.8L156.0 91.0Q156 96 151.0 96.0L5.0 96.0Q0 96 0.0 91.0L0.0 5.0Q0 0 5.0 0.0Z' fill='%2357afff'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.cap .salto .salto-carpeta:before { display: none; }
@media screen and (max-width: 900px) {
  .cap .salto .salto-carpeta, .cap .salto:hover .salto-carpeta,
  .cap.cap-02-noche .salto .salto-carpeta, .cap.cap-02-noche .salto:hover .salto-carpeta { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 30'%3E%3Cpath d='M5.75 0.75L9.8 0.75Q12 0.75 14.0 1.68L14.0 1.68Q16 2.6 18.2 2.6L42.25 2.6Q47.25 2.6 47.25 7.6L47.25 24.25Q47.25 29.25 42.25 29.25L5.75 29.25Q0.75 29.25 0.75 24.25L0.75 5.75Q0.75 0.75 5.75 0.75Z' fill='%23fafafa'/%3E%3C/svg%3E"); }
  .cap .salto[aria-pressed="true"] .salto-carpeta,
  .cap.cap-02-noche .salto[aria-pressed="true"] .salto-carpeta,
  .cap.cap-02-noche .salto[aria-pressed="true"]:hover .salto-carpeta { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 30'%3E%3Cpath d='M5.0 0.0L9.74 0.0Q12 0 14.0 1.05L14.0 1.05Q16 2.1 18.26 2.1L43.0 2.1Q48 2.1 48.0 7.1L48.0 25.0Q48 30 43.0 30.0L5.0 30.0Q0 30 0.0 25.0L0.0 5.0Q0 0 5.0 0.0Z' fill='%2357afff'/%3E%3C/svg%3E"); }
}

/* ---------- 03 · App estatal, Madrid, idCAT Mòbil: trazo gris, sin relleno */
.tarjeta { background: transparent; border: 1px solid var(--trazo-caja); }
.tarjeta-icono { background: var(--celeste); }
.tarjeta-icono::before { background: var(--ultramar); }

/* ---------- 04 · Perfiles agénticos (como en el informe 3): primero la
   ficha (foto, nombre, edad y situación), debajo las frases, todas arriba,
   y al final «Qué dice …»; columna rellena con una veladura blanca ------ */
.cap.noche .comunidad .agente-celda:nth-child(n) .agente { transition: translate .3s var(--curva); }
.cap.noche .comunidad .agente-celda:nth-child(n) .agente:before,
.cap.noche .comunidad .agente-celda:nth-child(n) .agente-burbuja,
.cap.noche .comunidad .agente-celda:nth-child(n) .agente-foto {
  transition: background-color .3s var(--curva), box-shadow .3s var(--curva), filter .3s var(--curva);
}
.cap.noche .comunidad .agente-celda:nth-child(n) .agente:is(:hover, :focus-visible) { translate: 0 -4px; }
.cap.noche .comunidad .agente-celda:nth-child(n) .agente:is(:hover, :focus-visible):before,
.cap.noche .comunidad .agente-celda:nth-child(n) .agente:is(:hover, :focus-visible) .agente-burbuja {
  background-color: #fafafa1f;
}
.cap.noche .comunidad .agente-celda:nth-child(n) .agente:is(:hover, :focus-visible) .agente-hablar {
  color: var(--ultramar); background-color: var(--blanco-digital); border-color: var(--blanco-digital);
}
.cap.noche .comunidad .agente-celda:nth-child(n) .agente:is(:hover, :focus-visible) .agente-foto { filter: brightness(1.08); }
@media (scripting: none) and (prefers-reduced-motion: reduce) {
  .cap.noche .comunidad .agente-celda:nth-child(n) .agente:is(:hover, :focus-visible) { translate: none; }
}
html.sin-animaciones .cap.noche .comunidad .agente-celda:nth-child(n) .agente:is(:hover, :focus-visible) { translate: none; }
.comunidad .agente-celda:nth-child(n) .agente-burbuja {
  top: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
}
@media screen and (min-width: 992px) {
  .comunidad .agente-celda:nth-child(3) .agente-burbuja { padding: 20px 22px; font-size: 1.05rem; }
  .comunidad .agente-celda:nth-child(3) .agente:before { top: 226px; }
  .comunidad .agente-celda:nth-child(3) .agente-foto { max-width: 132px; margin-top: 0; }
}
/* Las cajas ahora empiezan arriba del todo: más aire con el texto de encima */
.comunidad { margin-top: 72px; }
/* Menos alto en la zona de las frases: la caja empieza más cerca del texto */
.comunidad .agente-dice { min-height: 168px; height: 168px; }
.comunidad .agente-celda:nth-child(n) .agente:before { top: 168px; }
/* Comunidad agéntica: tarjetas como en el informe 1, sin trazo blanco.
   Cada columna rellena (frase y ficha del mismo color); Marta, un azul más
   claro, que es también el que toman las demás al pasar el ratón.
   :nth-child(n) para ganar a todas las reglas anteriores. */
.cap.noche .comunidad .agente-celda:nth-child(n) .agente:before,
.cap.noche .comunidad .agente-celda:nth-child(n) .agente-burbuja {
  background-color: #052d6f;
  background-color: color-mix(in srgb, var(--ultramar) 80%, var(--azul));
  border: 0;
}
.cap.noche .comunidad .agente-celda:nth-child(n) .agente:before { border-radius: 0 0 24px 24px; }
.cap.noche .comunidad .agente-celda:nth-child(n) .agente-burbuja { border-radius: 24px 24px 0 0; color: var(--blanco-digital); }
.cap.noche .comunidad .agente-celda:nth-child(3) .agente:before,
.cap.noche .comunidad .agente-celda:nth-child(3) .agente-burbuja,
.cap.noche .comunidad .agente-celda:nth-child(n) .agente:is(:hover, :focus-visible):before,
.cap.noche .comunidad .agente-celda:nth-child(n) .agente:is(:hover, :focus-visible) .agente-burbuja {
  background-color: #0a3c90;
  background-color: color-mix(in srgb, var(--ultramar) 62%, var(--azul));
}
.cap.noche .comunidad .agente-celda:nth-child(n) .agente-nombre,
.cap.noche .comunidad .agente-celda:nth-child(n) .agente-situacion { color: var(--blanco-digital); }
.cap.noche .comunidad .agente-celda:nth-child(n) .agente-edad { color: var(--celeste); }
.cap.noche .comunidad .agente-celda:nth-child(n) .agente-hablar {
  color: var(--blanco-digital); background-color: transparent; border-color: var(--celeste);
}
.cap.noche .comunidad .agente-celda:nth-child(3) .agente-hablar,
.cap.noche .comunidad .agente-celda:nth-child(n) .agente:is(:hover, :focus-visible) .agente-hablar {
  color: var(--ultramar); background-color: var(--celeste); border-color: var(--celeste);
}
/* Sin el salto ni el brillo de la foto que se probó al pasar el ratón */
.cap.noche .comunidad .agente-celda:nth-child(n) .agente:is(:hover, :focus-visible) { translate: none; }
.cap.noche .comunidad .agente-celda:nth-child(n) .agente:is(:hover, :focus-visible) .agente-foto { filter: none; }
/* …y sin trazo tampoco al pasar el ratón (las reglas de Marta con :hover lo
   volvían a poner) */
.cap.noche .comunidad .agente-celda:nth-child(n) .agente:is(:hover, :focus-visible):before,
.cap.noche .comunidad .agente-celda:nth-child(n) .agente:is(:hover, :focus-visible) .agente-burbuja { border: 0; }
/* Comunidad agéntica: primero la ficha (foto, nombre, edad y situación),
   debajo las frases que van cambiando y al final «Qué dice …». La columna
   entera es una sola tarjeta: el fondo lo pone el :before y las frases van
   sin caja propia. */
.comunidad .agente-ficha { order: 1; padding-top: 28px; }
.comunidad .agente-dice { order: 2; margin: 12px 0 8px; }
.comunidad .agente-hablar { order: 3; margin-top: auto; }
.comunidad .agente-celda:nth-child(n) .agente:before { top: 0; border-radius: 24px; }
.cap.noche .comunidad .agente-celda:nth-child(n) .agente-burbuja,
.cap.noche .comunidad .agente-celda:nth-child(3) .agente-burbuja,
.cap.noche .comunidad .agente-celda:nth-child(n) .agente:is(:hover, :focus-visible) .agente-burbuja {
  background-color: transparent; border-radius: 0;
}
@media screen and (min-width: 992px) {
  .comunidad .agente-celda:nth-child(3) .agente:before { top: 0; }
}
.cap-04-noche .comunidad .agente-celda:nth-child(n) .agente:before,
.cap-04-noche .comunidad .agente-celda:nth-child(n) .agente:hover:before {
  top: 0; border: 0; border-radius: 24px;
  background-color: #052d6f; background-color: color-mix(in srgb, var(--ultramar) 80%, var(--azul));
}
.cap-04-noche .comunidad .agente-celda:nth-child(3) .agente:before,
.cap-04-noche .comunidad .agente-celda:nth-child(n) .agente:is(:hover, :focus-visible):before {
  background-color: #0a3c90; background-color: color-mix(in srgb, var(--ultramar) 62%, var(--azul));
}
.cap-04-noche .comunidad .agente-celda:nth-child(n) .agente-burbuja,
.cap-04-noche .comunidad .agente-celda:nth-child(n) .agente:is(:hover, :focus-visible) .agente-burbuja {
  background: transparent; border: 0; border-radius: 0; color: var(--blanco-digital);
}
.cap-04-noche .comunidad .agente-celda:nth-child(n) :is(.agente-nombre, .agente-situacion) { color: var(--blanco-digital); }
.cap-04-noche .comunidad .agente-celda:nth-child(n) .agente-edad { color: var(--celeste); }
.cap-04-noche .comunidad .agente-celda:nth-child(n) .agente-hablar {
  color: var(--blanco-digital); background-color: transparent; border-color: var(--celeste);
  align-self: stretch; width: auto; margin: auto 16px 16px;
}
.cap-04-noche .comunidad .agente-celda:nth-child(3) .agente-hablar,
.cap-04-noche .comunidad .agente-celda:nth-child(n) .agente:is(:hover, :focus-visible) .agente-hablar {
  color: var(--ultramar); background-color: var(--celeste); border-color: var(--celeste);
}
.cap-04-noche .comunidad .agente-celda:nth-child(n) .agente:is(:hover, :focus-visible) { translate: none; }
.cap-04-noche .comunidad .agente:focus-visible { outline: 2px solid var(--celeste); outline-offset: 4px; }
@media (max-width: 760px) { .cap-04-noche .comunidad .agente-celda:nth-child(n) .agente-hablar { margin: auto 8px 8px; } }
.cap.noche.cap-04-noche .comunidad .agente-celda:nth-child(n) .agente:before,
.cap.noche.cap-04-noche .comunidad .agente-celda:nth-child(n) .agente:hover:before,
.cap.noche.cap-04-noche .comunidad .agente-celda:nth-child(n) .agente:is(:hover, :focus-visible):before {
  border-radius: 6px;
}
.cap.noche.cap-04-noche .comunidad .agente-celda:nth-child(n) .agente:before,
.cap.noche.cap-04-noche .comunidad .agente-celda:nth-child(n) .agente:hover:before { background-color: #fafafa14; }
.cap.noche.cap-04-noche .comunidad .agente-celda:nth-child(3) .agente:before,
.cap.noche.cap-04-noche .comunidad .agente-celda:nth-child(n) .agente:is(:hover, :focus-visible):before { background-color: #fafafa26; }

/* Las frases de cada perfil, todas arriba (no centradas en su zona) */
.comunidad .agente-celda:nth-child(n) .agente-burbuja { align-items: flex-start; padding-top: 4px; }
.comunidad .agente-celda:nth-child(n) .agente-burbuja { padding-top: 20px; }
/* Móvil: «Qué dice …» en una línea dentro de las tarjetas estrechas */
@media (max-width: 760px) {
  .cap-04-noche .comunidad .agente-celda:nth-child(n) .agente-hablar { padding-inline: 8px; margin: auto 8px 10px; white-space: nowrap; font-size: 15px; }
}

/* ---------- 06 · Cuatro preguntas: numeral enorme en PV Sans White a la
   izquierda, la pregunta al lado; una línea fina entre pregunta y pregunta */
@font-face { font-family: Pv sans; src: url('../fonts/PV-Sans-White.woff2') format('woff2');
  font-weight: 100; font-style: normal; font-display: swap; }
.preguntas-abiertas li::before { font-variant-numeric: proportional-nums; font-feature-settings: "pnum" 1, "tnum" 0; }
.pila .preguntas-abiertas li,
.pila .preguntas-abiertas li:last-child {
  position: relative; display: grid; grid-template-columns: 124px 1fr; column-gap: 40px; row-gap: 0;
  align-items: start; align-content: start; min-height: 0; box-sizing: border-box;
  padding: 40px 0; margin: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  border-top: 1px solid #11111133;
}
.pila .preguntas-abiertas li:last-child { border-bottom: 1px solid #11111133; }
.pila .preguntas-abiertas li::before {
  position: static; grid-column: 1; grid-row: 1 / span 3; align-self: start;
  display: block; width: auto; height: auto; background: none; border-radius: 0;
  font-size: 104px; font-weight: 100; line-height: .74; letter-spacing: -.05em;
  color: var(--negro-digital);
}
.pila .preguntas-abiertas li > p { grid-column: 2; }
.pila .preguntas-abiertas .pregunta { font-size: 18px; font-weight: 500; line-height: 1.45; padding-top: 0; }
.pila .preguntas-abiertas .pregunta + p { font-size: 16px; line-height: 1.5; margin-top: 10px; }
.preguntas-abiertas, .preguntas-abiertas p, .pila .preguntas-abiertas .pregunta + p { color: var(--negro-digital); }
@media (max-width: 760px) {
  .pila .preguntas-abiertas li,
  .pila .preguntas-abiertas li:last-child { grid-template-columns: 1fr; row-gap: 14px; padding: 28px 0; }
  .pila .preguntas-abiertas li::before { grid-row: auto; font-size: 72px; }
  .pila .preguntas-abiertas li > p { grid-column: 1; }
}

/* ---------- Cierre con foto: la frase y la descarga sobre la chica
   caminando, con una capa negra translúcida; texto blanco y botón blanco - */
.cierre-foto {
  display: flex; align-items: center; justify-content: center;
  min-height: min(86vh, 760px); box-sizing: border-box;
  margin-top: var(--aire-cap, 96px);
  padding: 96px 0;
  background:
    linear-gradient(#1111118c, #1111118c),
    #e7e5e4 url('../images/cierre.jpg') right center / cover no-repeat;
}
#cap-06 { padding-bottom: 0; }
.cierre-foto .lee { width: min(var(--col-texto-max), var(--col-texto), calc(100% - 2 * var(--gotera))); margin-block: 0; }
.cierre-foto .golpe { color: var(--blanco-digital); }
.cierre-foto .boton { background: var(--blanco-digital); color: var(--ultramar); border-color: var(--blanco-digital); }
.cierre-foto .boton:hover { background: var(--celeste); color: var(--ultramar); border-color: var(--celeste); }
.cierre-foto .boton:focus-visible { outline: 2px solid var(--blanco-digital); outline-offset: 3px; }
@media (max-width: 760px) {
  .cierre-foto {
    display: block; min-height: 0; padding: 72px 0;
    background:
      linear-gradient(#1111118c, #1111118c),
      #e7e5e4 url('../images/cierre.jpg') 72% center / cover no-repeat;
  }
}

/* ---------- CTA: sin fondo gris; las dos cajas con trazo gris ----------- */
#cta { background: var(--blanco-digital); }
.cta-caja {
  background: var(--blanco-digital); border: 1px solid var(--trazo-caja); border-radius: 6px;
  min-height: 340px; box-sizing: border-box; justify-content: flex-start; padding: 44px 40px 40px;
}
.cta-caja h3 { margin-bottom: 40px; }
.cta-caja p { margin-top: auto; }
@media (max-width: 760px) { .cta-caja { min-height: 280px; padding: 32px 24px; } .cta-caja h3 { margin-bottom: 28px; } }

/* ---------- 01 · Mochila: el bocadillo grande se queda; alrededor, los
   círculos del informe 3, que llegan desde fuera con el scroll, y al final
   cae «EL CARPETÓN CIUDADANO» en la carpeta celeste. Posiciones y tamaño
   de la carpeta: mochilaCirculos() en reportaje.js. ----------------------- */
.mochila-circulo {
  --d: 128px;
  position: absolute; left: 0; top: 0;
  width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  box-sizing: border-box; padding: 12px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  border-radius: 50%; background: #d1e7fb;
  color: var(--negro-digital); font-size: 15px; line-height: 1.3;
  opacity: 0; transform: translate(-999px, -999px);
  will-change: transform;
}
.mochila-circulo span { transition: opacity .35s var(--curva); }
.mochila.rematada .mochila-circulo span { opacity: 0; }
@media screen and (max-width: 760px) { .mochila-circulo { --d: 88px; padding: 8px; font-size: 12px; } }
.mochila-golpe {
  width: min(740px, calc(100% - 2 * var(--gotera))); aspect-ratio: 740 / 500; max-width: none;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 0 0 126px; box-sizing: border-box;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 740 500' preserveAspectRatio='none'%3E%3Cpath d='M0 0H185L248 45H740V500H0Z' fill='%2357afff'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  border-radius: 0; box-shadow: none; filter: none;
  color: var(--negro-digital);
  font-size: 57px;
}
.mochila-golpe:before { display: none; }
.mochila-golpe p {
  margin: 0; font-size: inherit; font-weight: 600; line-height: 1.06; letter-spacing: -.02em;
  text-transform: uppercase; white-space: nowrap;
}
@media screen and (max-width: 760px) {
  .mochila-golpe { width: calc(100% - 2 * var(--gotera)); padding-left: 17%; font-size: 28px; }
}
@media (scripting: none) and (prefers-reduced-motion: reduce) { .mochila-circulo span { transition: none; } }
html.sin-animaciones .mochila-circulo span { transition: none; }

/* ---------- Cabecera 100 % opaca, también sobre las bandas oscuras ------- */
.cabecera, .cabecera.en-noche {
  background: var(--blanco-digital);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* Ladillo fijo («Dos palabras»…), algo menos alto: 64 → 52 px */
.ladillos-viajan .marcador { padding-top: 14px; padding-bottom: 14px; }

/* Bocadillo «He tenido un hijo…»: las mismas puntas que el resto (6 px) */
.bocadillo, .mochila-pregunta.bocadillo, .vuelta-escena .bocadillo { border-radius: 6px; }

/* «El análisis también muestra avances.»: en una sola línea en escritorio
   (la columna de lectura se queda un poco corta y la partía en dos) */
@media screen and (min-width: 900px) { .lee p.entrada.en-una-linea { white-space: nowrap; text-wrap: nowrap; } }

/* Perfiles agénticos: en vez del velo blanco (agrisaba el azul y los dejaba
   apagados), azul de la paleta: ultramar mezclado con azul. Marta y la
   tarjeta bajo el ratón, un punto más claras. */
.cap.noche.cap-04-noche .comunidad .agente-celda:nth-child(n) .agente:before,
.cap.noche.cap-04-noche .comunidad .agente-celda:nth-child(n) .agente:hover:before {
  background-color: #052d6f; background-color: color-mix(in srgb, var(--ultramar) 80%, var(--azul));
}
.cap.noche.cap-04-noche .comunidad .agente-celda:nth-child(3) .agente:before,
.cap.noche.cap-04-noche .comunidad .agente-celda:nth-child(n) .agente:is(:hover, :focus-visible):before {
  background-color: #0a3c90; background-color: color-mix(in srgb, var(--ultramar) 62%, var(--azul));
}

/* Cola del bocadillo «He tenido un hijo…»: la punta redondeada con el mismo
   radio que las esquinas del bocadillo (6 px). Se dibuja con una máscara y
   toma el color del propio bocadillo (ultramar o, sobre banda oscura, blanco). */
.bocadillo:before {
  border: 0; width: 38px; height: 26px; top: -25px;
  background-color: inherit;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 26'%3E%3Cpath d='M0 26L33.05 3.39Q38 0 38 6V26Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 26'%3E%3Cpath d='M0 26L33.05 3.39Q38 0 38 6V26Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

/* ==========================================================================
   05 · Simulador HOY / MAÑANA (recuperado de borrador-maria)
   Todo va dentro de .f-simulador para no chocar con otras reglas del informe
   (.etiqueta de la mochila, .nota-pie…). En escritorio, HOY y MAÑANA una
   junto a otra; por debajo de 992 px, un conmutador entre las dos.
   Esquinas: 6 px, como el resto de cajas del informe.
   ========================================================================== */
.ancho-simulador { max-width: 1360px; }
.f-simulador { --gris-claro: #e8e8e8; --gris-sim: #737373; margin: 0 auto; }
.f-simulador *, .f-simulador *::before, .f-simulador *::after { box-sizing: border-box; }
.f-simulador p { margin: 0; }
.f-simulador .simulador {
  background: var(--blanco-digital); border: 1px solid var(--negro-digital);
  border-radius: 6px; overflow: hidden;
}
.f-simulador .sim-cabecera { display: flex; flex-flow: column; gap: 16px; padding: 28px 28px 8px; }
.f-simulador .sim-rotulo {
  margin: 0 0 12px; color: var(--gris-sim);
  font-size: .9rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
}
.f-simulador .sim-rotulo-carga { margin-bottom: 12px; }
.f-simulador .sim-necesidades {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 16px; align-items: stretch;
}
/* Lo que pregunta la persona: bocadillos con la cola hacia abajo */
.f-simulador .sim-necesidad {
  --burbuja: var(--gris-claro);
  position: relative;
  padding: 16px 22px; border: 0; border-radius: 6px;
  background-color: var(--burbuja); color: var(--negro-digital);
  font: 600 1.15rem/1.12 "Pv sans", Arial, sans-serif; text-align: left;
  cursor: pointer; transition: background-color .3s, color .3s;
}
.f-simulador .sim-necesidad:after {
  content: ""; position: absolute; bottom: -15px; right: 34px;
  width: 0; height: 0;
  border-top: 16px solid var(--burbuja); border-left: 22px solid transparent;
  transition: border-color .3s;
}
.f-simulador .sim-necesidad:nth-child(n+3):after {
  border-left: 0; border-right: 22px solid transparent; left: 34px; right: auto;
}
.f-simulador .sim-necesidad:hover { --burbuja: #d6d6d6; }
.f-simulador .sim-necesidad[aria-pressed="true"] { --burbuja: var(--ultramar); color: var(--blanco-digital); }
.f-simulador .sim-necesidad:focus-visible, .f-simulador .sim-modo:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }
.f-simulador .centrado-modos { margin-top: 26px; text-align: center; }
.f-simulador .centrado-modos .sim-rotulo { margin-bottom: 14px; }
.f-simulador .sim-modos {
  display: flex; width: fit-content; margin-inline: auto; padding: 4px;
  background: var(--gris-claro); border-radius: 48px;
}
.f-simulador .sim-modo {
  padding: 12px 34px; border: 0; border-radius: 48px; background: transparent;
  color: var(--negro-digital); font: 500 1.1rem/1.2 "Pv sans", Arial, sans-serif;
  cursor: pointer; transition: background-color .3s, color .3s;
}
.f-simulador .sim-modo[aria-selected="true"] { background: var(--negro-digital); color: var(--blanco-digital); }
.f-simulador .sim-modo[aria-selected="true"][data-modo="manana"] { background: var(--ultramar); }
.f-simulador .sim-panel { padding: 26px 28px; }
.f-simulador .sim-panel[hidden] { display: none !important; }
.f-simulador .sim-panel.asoma { animation: .3s var(--curva) sim-fundir; }
@keyframes sim-fundir { from { opacity: 0; } to { opacity: 1; } }
.f-simulador .sim-titular {
  margin: 0 0 18px; text-align: center;
  font-size: 1.45rem; font-weight: 600; line-height: 1.08;
}
/* HOY */
.f-simulador .sim-ruta {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  margin: 0 0 18px; padding: 0; list-style: none;
}
.f-simulador .sim-paso {
  display: flex; flex-flow: column; gap: 3px; padding: 11px 14px;
  background: var(--gris-claro); border-left: 4px solid var(--negro-digital); border-radius: 6px;
}
.f-simulador .sim-paso .org { color: var(--gris-sim); font-size: .7rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; }
.f-simulador .sim-paso .accion { font-size: 1rem; font-weight: 600; line-height: 1.12; }
.f-simulador .sim-paso .friccion { font-size: .88rem; line-height: 1.3; }
.f-simulador .sim-carga {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  margin: 0; padding: 0; list-style: none;
}
.f-simulador .sim-carga li { display: flex; flex-flow: column; gap: 2px; padding-top: 8px; border-top: 2px solid var(--negro-digital); }
.f-simulador .sim-carga .valor { color: var(--negro-digital); font-size: 2.2rem; font-weight: 500; line-height: 1; }
/* .etiqueta también es la clase de la mochila: aquí se anula todo aquello */
.f-simulador .etiqueta {
  position: static; left: auto; top: auto; translate: none; rotate: none; scale: none;
  opacity: 1; padding: 0; border: 0; border-radius: 0; background: none;
  white-space: normal; transition: none;
}
.f-simulador .sim-carga .etiqueta { font-size: .85rem; font-weight: 400; line-height: 1.25; color: var(--negro-digital); }
/* MAÑANA */
.f-simulador .sim-necesidad-centro {
  display: flex; flex-flow: column; gap: 4px; margin-bottom: 14px; padding: 16px 20px;
  background: var(--ultramar); border-radius: 6px;
}
.f-simulador .sim-necesidad-centro .etiqueta { color: var(--celeste); font-size: .85rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.f-simulador .sim-necesidad-centro .frase { color: var(--blanco-digital); font-size: 1.35rem; font-weight: 600; line-height: 1.1; }
.f-simulador .sim-funciones { display: grid; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.f-simulador .sim-funcion {
  display: grid; grid-template-columns: 118px 1fr; column-gap: 14px; align-items: baseline;
  padding: 11px 16px; background: var(--blanco-digital);
  border: 1px solid var(--linea-suave); border-left: 4px solid var(--ultramar); border-radius: 6px;
}
.f-simulador .sim-funcion .nombre { color: var(--ultramar); font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.f-simulador .sim-funcion .detalle { font-size: .9rem; line-height: 1.3; }
.f-simulador .sello-autoridad {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: var(--gris-claro); border: 1px solid var(--ultramar); border-radius: 6px;
  font-size: .88rem; line-height: 1.35;
}
.f-simulador .sello-autoridad .marca {
  display: flex; flex: none; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--ultramar); color: var(--blanco-digital); font-size: 1.5rem;
}
.f-simulador .sello-autoridad .texto { font-size: 1.05rem; line-height: 1.4; }
.f-simulador .sello-autoridad .texto strong { display: block; font-size: 1.25rem; font-weight: 600; }
.f-simulador .nota-pie { max-width: 900px; color: var(--gris-sim); font-size: .78rem; line-height: 1.35; margin-top: 12px; }
.f-simulador .aviso-no-chatbot { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--linea-suave); }
/* Escritorio: HOY a la izquierda, MAÑANA a la derecha, sin conmutador */
@media (min-width: 992px) {
  .f-simulador .simulador {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 31px;
    background: none; border: 0; border-radius: 0; overflow: visible;
  }
  .f-simulador .sim-cabecera { grid-column: 1 / -1; padding: 0 0 36px; }
  .f-simulador .centrado-modos { display: none; }
  .f-simulador .sim-panel, .f-simulador .sim-panel[hidden] {
    display: block !important; padding: 26px 28px;
    background: var(--blanco-digital); border: 1px solid var(--negro-digital); border-radius: 6px;
  }
  .f-simulador .sim-panel::before {
    display: block; margin-bottom: 15px; color: var(--gris-sim);
    font: 500 .9rem/1.2 "Pv sans", Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase;
  }
  .f-simulador #panel-hoy::before { content: 'Hoy'; }
  .f-simulador #panel-manana::before { content: 'Mañana'; }
}
@media (max-width: 991px) {
  .f-simulador .sim-ruta { grid-template-columns: 1fr; }
  .f-simulador .sim-carga { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f-simulador .sim-necesidades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .f-simulador .sim-cabecera, .f-simulador .sim-panel { padding-inline: 18px; }
  .f-simulador .sim-necesidad { font-size: 1rem; padding: 14px 16px; }
  .f-simulador .sim-funcion { grid-template-columns: 1fr; row-gap: 4px; }
  .f-simulador .sim-modo { padding: 12px 26px; }
}
@media (scripting: none) and (prefers-reduced-motion: reduce) { .f-simulador .sim-panel.asoma { animation: none; } }
html.sin-animaciones .f-simulador .sim-panel.asoma { animation: none; }

/* «He tenido un hijo. ¿Qué tengo que hacer?» alineado a la izquierda en los
   dos bocadillos (mochila y cierre) */
.bocadillo, .bocadillo p,
.vuelta-escena .bocadillo, .vuelta-escena .bocadillo p { text-align: left; }

/* Menos aire en dos cambios de capítulo: «…solo genera barreras.» → «El
   carpetón ciudadano» y el desplegable de la IA → «Cuatro preguntas…» */
#cap-01, #cap-05 { padding-bottom: 40px; }

/* CTA: el mismo relleno arriba y abajo (40 px; 32 px en móvil) */
.cta-caja { padding: 40px; }
.cta-caja h3 { margin-top: 0; }
.cta-caja .boton { margin-bottom: 0; }
@media (max-width: 760px) { .cta-caja { padding: 32px 24px; } }

/* Simulador: el mismo trazo que el resto de cajas del informe (1 px gris
   medio, --trazo-caja), en los paneles HOY y MAÑANA, las funciones y la
   garantía de autoridad */
.f-simulador .simulador,
.f-simulador .sim-panel, .f-simulador .sim-panel[hidden],
.f-simulador .sello-autoridad { border: 1px solid var(--trazo-caja); }
@media (min-width: 992px) { .f-simulador .simulador { border: 0; } }
.f-simulador .sim-funcion { border: 1px solid var(--trazo-caja); border-left: 4px solid var(--ultramar); }

/* Bocadillos de las cuatro necesidades: la cola con la punta redondeada,
   como la del bocadillo grande (máscara; toma el color del bocadillo) */
.f-simulador .sim-necesidad:after,
.f-simulador .sim-necesidad:nth-child(n+3):after {
  border: 0; width: 22px; height: 16px; bottom: -15px;
  background-color: var(--burbuja);
  transition: background-color .3s;
}
.f-simulador .sim-necesidad:after {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath d='M0 0H22V11Q22 16 17.96 13.06Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath d='M0 0H22V11Q22 16 17.96 13.06Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.f-simulador .sim-necesidad:nth-child(n+3):after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath d='M22 0H0V11Q0 16 4.04 13.06Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath d='M22 0H0V11Q0 16 4.04 13.06Z'/%3E%3C/svg%3E");
}
/* Por debajo de 992 px el trazo lo lleva solo la caja de fuera */
@media (max-width: 991px) { .f-simulador .sim-panel, .f-simulador .sim-panel[hidden] { border: 0; } }

/* ---------- Simulador HOY / MAÑANA, segunda vuelta ----------------------- */
/* «Pulsa sobre una necesidad»: como «Pulsa cualquiera» del recorrido de
   Marta (circulito celeste con la mano y el texto en minúscula) */
.f-simulador .sim-pista {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 12px;
  color: #111111b3; font-size: calc(var(--nota) - 1px);
}
/* Necesidades: la seleccionada en ultramar; las demás, relleno blanco y
   trazo gris. La cola se dibuja con su trazo (SVG) en cada caso. */
.f-simulador .sim-necesidad {
  --burbuja: var(--blanco-digital);
  border: 1px solid var(--trazo-caja); background-color: var(--blanco-digital);
}
.f-simulador .sim-necesidad:hover { --burbuja: var(--blanco-digital); border-color: var(--negro-digital); }
.f-simulador .sim-necesidad[aria-pressed="true"],
.f-simulador .sim-necesidad[aria-pressed="true"]:hover {
  background-color: var(--ultramar); border-color: var(--ultramar); color: var(--blanco-digital);
}
.f-simulador .sim-necesidad:after,
.f-simulador .sim-necesidad:nth-child(n+3):after {
  -webkit-mask: none; mask: none; background-color: transparent;
  bottom: -16px; width: 22px; height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath d='M0 0H22V11Q22 16 17.96 13.06Z' fill='%23fafafa'/%3E%3Cpath d='M21.5 0V11Q21.5 15.2 17.7 12.6L0 0.5' fill='none' stroke='%23a8a8a8'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.f-simulador .sim-necesidad:after { right: 34px; }
.f-simulador .sim-necesidad:nth-child(n+3):after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath d='M22 0H0V11Q0 16 4.04 13.06Z' fill='%23fafafa'/%3E%3Cpath d='M0.5 0V11Q0.5 15.2 4.3 12.6L22 0.5' fill='none' stroke='%23a8a8a8'/%3E%3C/svg%3E");
}
.f-simulador .sim-necesidad[aria-pressed="true"]:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath d='M0 0H22V11Q22 16 17.96 13.06Z' fill='%23001e4e'/%3E%3C/svg%3E");
}
.f-simulador .sim-necesidad[aria-pressed="true"]:nth-child(n+3):after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath d='M22 0H0V11Q0 16 4.04 13.06Z' fill='%23001e4e'/%3E%3C/svg%3E");
}
/* «Hoy» y «Mañana»: en una pastilla como los botones, sin relleno y con
   trazo ultramar */
@media (min-width: 992px) {
  .f-simulador .sim-panel::before {
    display: inline-flex; align-items: center; height: 44px; padding: 0 24px; margin-bottom: 20px;
    border: 1px solid var(--ultramar); border-radius: 48px; background: transparent;
    color: var(--ultramar); font: 600 16px/1.2 "Pv sans", Arial, sans-serif;
    letter-spacing: normal; text-transform: none;
  }
}
.f-simulador .sim-modos { background: none; gap: 8px; padding: 0; }
.f-simulador .sim-modo {
  display: inline-flex; align-items: center; height: 44px; padding: 0 24px;
  border: 1px solid var(--ultramar); background: transparent; color: var(--ultramar);
  font: 600 16px/1.2 "Pv sans", Arial, sans-serif;
}
.f-simulador .sim-modo[aria-selected="true"],
.f-simulador .sim-modo[aria-selected="true"][data-modo="manana"] { background: var(--ultramar); color: var(--blanco-digital); }
/* Las dos frases, a la izquierda */
.f-simulador .sim-titular { text-align: left; }
/* Cajas de HOY (Registro Civil…) y de MAÑANA (Traducir…): sin la franja de
   la izquierda; caja redondeada con trazo gris y relleno blanco */
.f-simulador .sim-paso,
.f-simulador .sim-funcion {
  background: var(--blanco-digital);
  border: 1px solid var(--trazo-caja); border-radius: 6px;
}
/* Traducir, Orientar…: en minúscula y en negrita */
.f-simulador .sim-funcion .nombre {
  text-transform: none; letter-spacing: normal; font-size: .95rem; font-weight: 700;
}
/* «La carga que asume la persona»: en minúscula, negro y negrita */
.f-simulador .sim-rotulo-carga {
  margin: 4px 0 12px; color: var(--negro-digital);
  font-size: 1rem; font-weight: 700; letter-spacing: normal; text-transform: none;
}
/* 5, 6, 3, 4: en PV Sans White y más grandes */
.f-simulador .sim-carga .valor { font-size: 3.4rem; font-weight: 100; line-height: .95; letter-spacing: -.02em; }
/* Sin los filetes encima de 5, 6, 3, 4 */
.f-simulador .sim-carga li { border-top: 0; padding-top: 0; }

/* Notas al pie de HOY («Recorrido y cifras ilustrativos…») y de MAÑANA
   («No se trata de hacer un chatbot…»): sin el filete gris de encima y,
   en escritorio, las dos al fondo de su caja, a la misma altura */
.f-simulador .aviso-no-chatbot { border-top: 0; padding-top: 0; }
@media (min-width: 992px) {
  .f-simulador .sim-panel, .f-simulador .sim-panel[hidden] { display: flex !important; flex-direction: column; }
  .f-simulador .sim-panel > * { flex: none; }
  .f-simulador .sim-panel .aviso-no-chatbot { margin-top: auto; padding-top: 28px; }
}
@media (min-width: 992px) { .f-simulador .sim-panel::before { align-self: flex-start; } }

/* ---------- Simulador HOY / MAÑANA, tercera vuelta ----------------------- */
/* «Hoy» y «Mañana»: pastilla más baja, con el trazo celeste */
@media (min-width: 992px) {
  .f-simulador .sim-panel::before { height: 34px; padding: 0 18px; border-color: var(--celeste); font-size: 15px; }
}
.f-simulador .sim-modo { height: 36px; padding: 0 20px; border-color: var(--celeste); font-size: 15px; }
.f-simulador .sim-modo[aria-selected="true"],
.f-simulador .sim-modo[aria-selected="true"][data-modo="manana"] { background: var(--celeste); border-color: var(--celeste); color: var(--ultramar); }
/* Necesidades: al pasar el ratón, el bocadillo entero (con su cola) en
   ultramar, igual que el seleccionado */
.f-simulador .sim-necesidad:hover {
  background-color: var(--ultramar); border-color: var(--ultramar); color: var(--blanco-digital);
}
.f-simulador .sim-necesidad:hover:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath d='M0 0H22V11Q22 16 17.96 13.06Z' fill='%23001e4e'/%3E%3C/svg%3E");
}
.f-simulador .sim-necesidad:nth-child(n+3):hover:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath d='M22 0H0V11Q0 16 4.04 13.06Z' fill='%23001e4e'/%3E%3C/svg%3E");
}
/* «Tu necesidad, en el centro»: bloque celeste, rótulo en minúscula */
.f-simulador .sim-necesidad-centro { background: var(--celeste); }
.f-simulador .sim-necesidad-centro .etiqueta {
  color: var(--ultramar); font-size: .95rem; font-weight: 500; letter-spacing: normal; text-transform: none;
}
.f-simulador .sim-necesidad-centro .frase { color: var(--ultramar); }
/* Traducir, Orientar…: sin caja; una línea a la izquierda que se para en
   cada punto con un circulito */
.f-simulador .sim-funciones { gap: 0; margin: 6px 0 18px; }
.f-simulador .sim-funcion {
  position: relative; padding: 0 0 18px 30px;
  background: none; border: 0; border-radius: 0;
}
.f-simulador .sim-funcion:last-child { padding-bottom: 0; }
.f-simulador .sim-funcion::before {
  content: ""; position: absolute; left: 0; top: 5px;
  width: 11px; height: 11px; border-radius: 50%; background: var(--ultramar);
}
.f-simulador .sim-funcion:not(:last-child)::after {
  content: ""; position: absolute; left: 5px; top: 16px; bottom: -5px;
  width: 1px; background: var(--trazo-caja);
}
/* Garantía de autoridad oficial: el check más pequeño y arriba, a la altura
   del titular; el texto a 14 px */
.f-simulador .sello-autoridad { align-items: flex-start; }
.f-simulador .sello-autoridad .marca { width: 30px; height: 30px; font-size: 1rem; margin-top: 1px; }
.f-simulador .sello-autoridad .texto { font-size: 14px; line-height: 1.4; }
.f-simulador .sello-autoridad .texto strong { font-size: 1.1rem; line-height: 1.3; margin-bottom: 2px; }
/* 5, 6, 3, 4: en PV Sans Light */
.f-simulador .sim-carga .valor { font-weight: 300; }
/* «La carga que asume la persona»: con el icono de una persona cargando
   una caja (catálogo de iconos PV) */
.f-simulador .sim-rotulo-carga { display: flex; align-items: center; gap: 10px; }
.f-simulador .icono-carga {
  flex: none; width: 24px; height: 22px; background: var(--negro-digital);
  -webkit-mask: url('../images/iconos/pv-person-carry-box.svg') center / contain no-repeat;
  mask: url('../images/iconos/pv-person-carry-box.svg') center / contain no-repeat;
}

/* «La carga que asume la persona»: una persona con mochila (person-hiking,
   catálogo de iconos PV) */
.f-simulador .icono-carga {
  -webkit-mask-image: url('../images/iconos/pv-person-hiking.svg');
  mask-image: url('../images/iconos/pv-person-hiking.svg');
}
/* «Tu necesidad, en el centro»: relleno blanco y trazo celeste */
.f-simulador .sim-necesidad-centro { background: var(--blanco-digital); border: 1px solid var(--celeste); }
/* Garantía de autoridad oficial: sin trazo, solo el relleno gris */
.f-simulador .sello-autoridad { border: 0; background: var(--gris-claro); }

/* «Volvamos al principio.» alineado con el texto del bocadillo de debajo:
   mismo ancho que el bocadillo y el mismo margen interior a la izquierda */
.vuelta-escena .vuelta-titulo {
  box-sizing: border-box; width: min(100%, 640px);
  margin-inline: auto; align-self: center; justify-self: center;
  padding-inline: 48px; text-align: left;
}
@media screen and (max-width: 760px) { .vuelta-escena .vuelta-titulo { padding-inline: 26px; } }

/* HOY: las cajas de cada trámite, sin la entradilla del organismo
   («Registro Civil / Estado»…): solo el trámite y su fricción */
.f-simulador .sim-paso .org { display: none; }

/* Simulador: HOY y MAÑANA sobre gris claro, sin trazo. Lo de dentro que
   antes era gris (garantía de autoridad) pasa a blanco para no perderse. */
.f-simulador .simulador,
.f-simulador .sim-panel, .f-simulador .sim-panel[hidden] { background: #ededed; border: 0; }
@media (min-width: 992px) { .f-simulador .simulador { background: none; } }
@media (max-width: 991px) { .f-simulador .sim-panel, .f-simulador .sim-panel[hidden] { background: none; } }
.f-simulador .sello-autoridad { background: var(--blanco-digital); }

/* Entradilla de la portada, más pequeña: 24 → 21 px (19 → 17 px en móvil) */
.portada-pasos .portada-sub { font-size: 21px; line-height: 1.42; }
@media (max-width: 760px) { .portada-pasos .portada-sub { font-size: 17px; } }

/* ---------- Apertura: flecha sin «Leer» y botón «Leer el reportaje» -------
   Primer paso: solo el titular y una flecha que invita a bajar (más grande
   y con un rebote más marcado; se mueve dos veces, menos de 5 s, como pide
   WCAG 2.2.2). Segundo paso: bajo «Descargar informe», el botón «Leer el
   reportaje» (contorno blanco), que lleva al capítulo 01. */
.portada-pasos .portada-baja { gap: 0; padding: 8px; }
.portada-baja .flecha { width: 22px; height: 36px; animation: bajar-flecha-viva 2.2s var(--curva) 2; }
@keyframes bajar-flecha-viva {
  0%, 100% { transform: translateY(0);    opacity: .6; }
  50%      { transform: translateY(12px); opacity: 1; }
}
@media (scripting: none) and (prefers-reduced-motion: reduce) { .portada-baja .flecha { animation: none; } }
html.sin-animaciones .portada-baja .flecha { animation: none; }
.portada-informe .boton { display: inline-flex; }
.portada-informe .boton-leer {
  display: flex; width: fit-content; margin-top: 12px;
  background: transparent; color: var(--blanco-digital); border: 1px solid var(--blanco-digital);
}
.portada-informe .boton-leer:hover { background: var(--celeste); border-color: var(--celeste); color: var(--ultramar); }
.portada-informe .boton-leer:focus-visible { outline: 2px solid var(--blanco-digital); outline-offset: 3px; }
.icono-bajar {
  flex: none; width: 13px; height: 15px; background: currentColor;
  -webkit-mask: url('../images/iconos/pv-arrow-down.svg') center / contain no-repeat;
  mask: url('../images/iconos/pv-arrow-down.svg') center / contain no-repeat;
}

/* Apertura en pantallas bajas de escritorio (portátiles de 680–860 px de
   alto): el titular se ajusta también a la altura, menos aire entre bloques
   y los dos botones uno junto al otro, para que todo quepa sin cortarse */
@media (min-width: 761px) and (max-height: 860px) {
  .portada-pasos .portada-titulo { font-size: min(clamp(64px, 10.5vw, 168px), 17vh); }
  .portada-pasos .portada-sub { padding-top: 24px; }
  .portada-pasos .portada-informe {
    margin-top: 24px;
    display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: 12px; row-gap: 4px;
  }
  .portada-pasos .portada-informe > p { grid-column: 1 / -1; }
  .portada-pasos .portada-informe .boton { margin-top: 14px; }
}

/* «Leer el reportaje»: sin forma de botón, como el «Leer» de la versión
   publicada: texto blanco pequeño con la flecha hacia abajo debajo */
.portada-leer {
  display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
  width: fit-content; margin-top: 22px;
  color: var(--blanco-digital); font-size: 14px; font-weight: 500; text-decoration: none;
}
.portada-leer .icono-bajar { width: 14px; height: 20px; }
.portada-leer:hover { text-decoration: underline; text-underline-offset: 3px; }
.portada-leer:focus-visible { outline: 2px solid var(--blanco-digital); outline-offset: 4px; }
@media (min-width: 761px) and (max-height: 860px) {
  .portada-pasos .portada-informe .portada-leer { grid-column: 1 / -1; margin-top: 14px; }
}

/* Ladillo fijo («El carpetón ciudadano», «Cuando ampliamos el foco»…), un
   poco más pequeño: 20 → 17 px (17 → 15 px en móvil) */
.ladillos-viajan .marcador { font-size: 17px; line-height: 22px; }
@media (max-width: 760px) { .ladillos-viajan .marcador { font-size: 15px; line-height: 20px; } }

/* Destacados (párrafos .entrada, titulares de bloque, «El recorrido de
   Marta», cifras de texto…): 36 → 34 px en escritorio. Tableta (30) y móvil
   (25) no cambian. */
@media screen and (min-width: 1001px) { :root { --entrada: 34px; } }
@media (min-width: 761px) and (max-height: 860px) {
  .portada-pasos .portada-titulo { font-size: min(clamp(64px, 10.5vw, 168px), 15vh); }
  .portada-leer { flex-direction: row; gap: 8px; margin-top: 10px; }
  .portada-leer .icono-bajar { width: 12px; height: 16px; }
}

/* «Volvamos al principio»: menos recorrido anclado después de «Esta vez no
   aparecen carpetas…» y menos aire antes de la foto del cierre */
.vuelta-pista { height: 180vh; }
.cierre-foto { margin-top: 24px; }
/* Garantía de autoridad oficial: sin relleno (ni trazo) sobre el gris */
.f-simulador .sello-autoridad { background: transparent; border: 0; padding-inline: 0; }

/* «¿Qué podría hacer ese mapa por una persona?», pegado a la frase que le
   sigue (como un titular de su párrafo) */
.lee p.pegado-abajo { margin-bottom: 0; }
.lee p.pegado-abajo + p { margin-top: 4px; }

/* «Leer el reportaje»: la flecha a la izquierda, en la misma línea */
.portada-leer { flex-direction: row; align-items: center; gap: 8px; }
.portada-leer .icono-bajar { order: -1; width: 12px; height: 16px; }

/* Ventana de cada perfil: «Reto: renovar el DNI» en blanco */
.charla-reto { color: var(--blanco-digital); border-color: #fafafa80; }

/* Perfiles en móvil (dos columnas estrechas): la zona de las frases, más
   baja, para que no quede un hueco vacío entre la ficha y la frase */
@media (max-width: 760px) {
  .comunidad .agente-dice { min-height: 120px; height: 120px; }
  .comunidad .agente-celda:nth-child(n) .agente-burbuja { padding-top: 12px; }
}

/* «Sobre el informe y la metodología» (sobre la banda ultramar):
   · Estado, Madrid, Cataluña, Andalucía: relleno celeste, texto e icono en
     ultramar (el blanco sobre celeste no llega al contraste mínimo)
   · Las cuatro dimensiones: sin relleno y con trazo blanco */
.cap .desplegable .metodo-cuerpo .chips-carpetas li,
.cap .desplegable .metodo-cuerpo .chips-carpetas li * {
  color: var(--ultramar);
}
.cap .desplegable .metodo-cuerpo .chips-carpetas li { background: var(--celeste); border-color: var(--celeste); }
.cap .desplegable .metodo-cuerpo .chips-dimensiones li {
  background: transparent; border-color: var(--blanco-digital); color: var(--blanco-digital);
}

/* ---------- Simulador, cuarta vuelta -------------------------------------- */
/* «Hoy» y «Mañana»: pastilla con relleno blanco, sin trazo */
@media (min-width: 992px) {
  .f-simulador .sim-panel::before { background: var(--blanco-digital); border-color: transparent; }
}
.f-simulador .sim-modo { background: var(--blanco-digital); border-color: transparent; }
/* «Tu necesidad, en el centro»: sin caja; con un icono delante (una diana
   con la flecha en el centro, catálogo de iconos PV) */
.f-simulador .sim-necesidad-centro { background: none; border: 0; padding: 0; margin-bottom: 22px; }
.f-simulador .sim-necesidad-centro .etiqueta { display: flex; align-items: center; gap: 10px; }
.f-simulador .icono-necesidad {
  flex: none; width: 22px; height: 22px; background: var(--ultramar);
  -webkit-mask: url('../images/iconos/pv-bullseye-arrow.svg') center / contain no-repeat;
  mask: url('../images/iconos/pv-bullseye-arrow.svg') center / contain no-repeat;
}
/* Garantía de autoridad oficial: el check de trazo (círculo y marca en
   línea ultramar, sin relleno) */
.f-simulador .sello-autoridad .marca {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='15' r='14' fill='none' stroke='%23001e4e' stroke-width='1.5'/%3E%3Cpath d='M9.5 15.5l3.8 3.8 7.5-8' fill='none' stroke='%23001e4e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  color: transparent; font-size: 0;
}

/* ==================== Repaso móvil (5 de octubre, tarde) =================== */
/* Apertura en móviles bajos (≤ 760 px de alto): entradilla algo más pequeña
   y menos aire, para que la descarga y «Leer el reportaje» no se salgan por
   abajo ni queden pegados al borde de la foto */
@media (max-width: 760px) and (max-height: 760px) {
  .portada-pasos .portada-sub { font-size: 15.5px; line-height: 1.38; padding-top: 18px; }
  .portada-pasos .portada-informe { margin-top: 16px; }
  .portada-pasos .portada-informe .boton { margin-top: 12px; }
  .portada-leer { margin-top: 12px; }
}
@media (max-width: 760px) { .portada-pasos .portada-texto { bottom: 8vh; } }

/* Desplegables (metodología, comunidad agéntica, IA): del mismo ancho que el
   cuerpo de texto. La fórmula anterior restaba dos veces la gotera cuando la
   columna ocupa todo el ancho (móvil) y la caja quedaba metida. */
.cap .desplegable, .cap .desplegable.desplegable-gris,
.cap-02-entrada .desplegable, .cap.noche .desplegable {
  width: calc(min(var(--col-texto-max), var(--col-texto)) - 2 * var(--gotera));
}
@media (max-width: 760px) { .cierre-foto .lee { width: 100%; } }

/* Recorrido de Marta en móvil: todo alineado a la izquierda con el texto
   (título, «Pulsa cualquiera», carpetas y la explicación de cada paso);
   carpetas casi rectas (radio de 2 px) y más aire antes del párrafo
   siguiente */
@media screen and (max-width: 900px) {
  .red-tiempo[data-tiempo="3"] { align-items: flex-start; text-align: left; }
  .red-tiempo[data-tiempo="3"] .red-rotulo,
  .red-tiempo[data-tiempo="3"] .ruta-detalle,
  .red-tiempo[data-tiempo="3"] .ruta-titulo,
  .red-tiempo[data-tiempo="3"] .ruta-texto { text-align: left; margin-inline: 0; align-self: stretch; }
  .red-tiempo[data-tiempo="3"] .ruta-marco { display: flex; justify-content: flex-start; }
  .ruta { margin-inline: 0; }
  .ruta li:not(:first-child):before { margin-left: 18px; align-self: flex-start; }
  .cap .salto .salto-carpeta, .cap .salto:hover .salto-carpeta,
  .cap.cap-02-noche .salto .salto-carpeta, .cap.cap-02-noche .salto:hover .salto-carpeta {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 30'%3E%3Cpath d='M2 0H10.6Q12 0 13.2 .8L14.8 1.8Q16 2.6 17.4 2.6H46Q48 2.6 48 4.6V28Q48 30 46 30H2Q0 30 0 28V2Q0 0 2 0Z' fill='%23fafafa'/%3E%3C/svg%3E");
  }
  .cap .salto[aria-pressed="true"] .salto-carpeta,
  .cap.cap-02-noche .salto[aria-pressed="true"] .salto-carpeta,
  .cap.cap-02-noche .salto[aria-pressed="true"]:hover .salto-carpeta {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 30'%3E%3Cpath d='M2 0H10.6Q12 0 13.2 .8L14.8 1.8Q16 2.6 17.4 2.6H46Q48 2.6 48 4.6V28Q48 30 46 30H2Q0 30 0 28V2Q0 0 2 0Z' fill='%2357afff'/%3E%3C/svg%3E");
  }
  .lee.tras-red { margin-top: 48px; }
}

/* Ventana de un perfil: la X de cerrar dentro de un círculo con trazo (blanco
   en móvil, donde va sobre el ultramar; negro sobre el blanco en escritorio) */
.charla-cerrar { border: 1px solid currentColor; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.charla-cerrar .icono-pv-cerrar { width: 14px; height: 14px; }

/* Descarga del cierre: el icono junto al texto (sin el hueco que dejaba el
   texto centrado al partirse en dos líneas) */
.salidas .boton { text-align: left; }
@media (max-width: 760px) { .salidas .boton { width: fit-content; max-width: 100%; } }

/* «He tenido un hijo. ¿Qué tengo que hacer?» (Tu necesidad, en el centro) y
   Traducir, Orientar, Preparar, Comprobar, Acompañar: en negro */
.f-simulador .sim-necesidad-centro .frase,
.f-simulador .sim-funcion .nombre { color: var(--negro-digital); }
/* «Garantía de autoridad oficial»: mismo cuerpo y peso que Acompañar */
.f-simulador .sello-autoridad .texto strong { font-size: .95rem; font-weight: 700; line-height: 1.5; color: var(--negro-digital); }
/* «Tu necesidad, en el centro»: rótulo e icono en negro, como «La carga que
   asume la persona» */
.f-simulador .sim-necesidad-centro .etiqueta { color: var(--negro-digital); }
.f-simulador .icono-necesidad { background: var(--negro-digital); }

/* Garantía de autoridad oficial: el check del catálogo de iconos PV
   (circle-check, de trazo), en negro */
.f-simulador .sello-autoridad .marca {
  width: 24px; height: 24px; margin-top: 0;
  background: var(--negro-digital);
  -webkit-mask: url('../images/iconos/pv-circle-check.svg') center / contain no-repeat;
  mask: url('../images/iconos/pv-circle-check.svg') center / contain no-repeat;
  border-radius: 0;
}
/* «Tu necesidad, en el centro»: peso normal */
.f-simulador .sim-necesidad-centro .etiqueta { font-weight: 400; }

/* ---------- Para seguir leyendo: ediciones anteriores -------------------
   Dos cajas como las del CTA (trazo gris, 6 px), sin botón: antetítulo,
   título, una frase y «Ver informe» con flecha */
#seguir-leyendo { padding-top: 24px; }
#seguir-leyendo .seguir-intro { margin-top: 20px; }
.seguir-lista {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
  max-width: 1200px; margin: 0 auto; padding: 0; list-style: none;
}
.seguir-caja {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: 40px; box-sizing: border-box;
  background: var(--blanco-digital); border: 1px solid var(--trazo-caja); border-radius: 6px;
}
.seguir-caja .seguir-antetit { margin: 0; font-size: 14px; font-weight: 500; color: #111111b3; }
.seguir-caja h3 { margin: 0; font-size: calc(var(--rotulo) + 2px); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.seguir-caja p { margin: 0; font-size: calc(var(--cuerpo) - 3px); line-height: 1.55; }
.seguir-enlace {
  display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px;
  color: var(--ultramar); font-size: 16px; font-weight: 600; text-decoration: none;
}
.seguir-enlace:hover { text-decoration: underline; text-underline-offset: 3px; }
.seguir-enlace:focus-visible { outline: 2px solid var(--azul); outline-offset: 4px; border-radius: 2px; }
.icono-ver {
  flex: none; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: url('../images/iconos/pv-arrow-right.svg') center / contain no-repeat;
  mask: url('../images/iconos/pv-arrow-right.svg') center / contain no-repeat;
}
@media (max-width: 760px) {
  .seguir-lista { grid-template-columns: 1fr; }
  .seguir-caja { padding: 32px 24px; }
}
/* «Para seguir leyendo»: mismo titular que «De la reflexión a la transformación» */
#t-seguir { font-size: var(--entrada); line-height: 1.25; letter-spacing: -.015em; }

/* «De la reflexión a la transformación» y «Para seguir leyendo»: titular y
   entradilla alineados a la izquierda, al mismo margen que el ladillo fijo y
   que las cajas de debajo (la gotera); las cajas de las dos secciones, del
   mismo ancho */
#cta .lee, #seguir-leyendo .lee {
  margin-left: 0; margin-right: auto;
  width: auto; max-width: calc(var(--col-texto-max) + 2 * var(--gotera));
}
.seguir-lista { max-width: none; }

/* HOY sin «La carga que asume la persona»: las cajas de los trámites con
   más aire (relleno, separación entre ellas y letra algo mayor) */
.f-simulador .sim-ruta { gap: 14px; margin: 8px 0 0; }
.f-simulador .sim-paso { padding: 20px 22px; gap: 6px; }
.f-simulador .sim-paso .accion { font-size: 1.1rem; line-height: 1.2; }
.f-simulador .sim-paso .friccion { font-size: .95rem; line-height: 1.4; }
/* MAÑANA sin «Tu necesidad, en el centro»: aire entre la frase y los pasos */
.f-simulador #panel-manana .sim-funciones { margin-top: 8px; }

/* Simulador: las dos frases («Aquí está nuestro portal…» y «Dime qué
   necesitas…»), un poco más pequeñas: 1,45 → 1,25 rem */
.f-simulador .sim-titular { font-size: 1.25rem; line-height: 1.15; }

/* «De la reflexión a la transformación» y «Para seguir leyendo»: el texto
   arranca donde el del ladillo fijo («Cuatro preguntas…»), tras la flecha
   (gotera + 19 px de flecha + 12 px de hueco; 17 px de flecha en móvil) */
#cta .lee, #seguir-leyendo .lee { padding-left: calc(var(--gotera) + 31px); }
@media (max-width: 760px) { #cta .lee, #seguir-leyendo .lee { padding-left: calc(var(--gotera) + 29px); } }

/* CTA: un icono delante de cada titular (catálogo de iconos PV, en negro):
   la Administración, un edificio institucional; la empresa, un maletín */
.cta-caja h3 { display: flex; align-items: center; gap: 12px; }
.icono-cta {
  flex: none; width: 26px; height: 26px; background: var(--negro-digital);
  -webkit-mask: var(--icono) center / contain no-repeat; mask: var(--icono) center / contain no-repeat;
}
.icono-administracion { --icono: url('../images/iconos/pv-building-columns.svg'); }
.icono-empresa { --icono: url('../images/iconos/pv-briefcase-pv.svg'); }

/* CTA: sin cajas; una línea larga encima y otra debajo de las dos
   columnas (Administración / empresa) */
.cta-doble {
  border-top: 1px solid var(--trazo-caja); border-bottom: 1px solid var(--trazo-caja);
  column-gap: 56px;
}
.cta-caja {
  background: none; border: 0; border-radius: 0;
  min-height: 0; padding: 40px 0; justify-content: flex-start;
}
.cta-caja h3 { margin-bottom: 4px; }
.cta-caja p { margin-top: 0; }
@media (max-width: 760px) {
  .cta-caja { padding: 32px 0; }
  .cta-caja + .cta-caja { border-top: 1px solid var(--trazo-caja); }
  .cta-doble { row-gap: 0; }
}
/* Los dos botones a la misma altura, abajo de su columna */
.cta-caja p { margin-bottom: 8px; }
.cta-caja .boton { margin-top: auto; }

/* «Para seguir leyendo»: «Ver informe» como el resto de botones (píldora
   ultramar, 44 px de alto, mismo hover), con la flecha delante */
.seguir-caja .boton.seguir-enlace {
  margin-top: auto; padding-top: 0;
  color: var(--blanco-digital); text-decoration: none;
}
.seguir-caja .boton.seguir-enlace:hover { text-decoration: none; }
.seguir-caja p:last-of-type { margin-bottom: 12px; }

/* «De la reflexión a la transformación» y «Para seguir leyendo»: todo algo
   más pequeño (titular 34 → 28 px, textos 22 → 19 px, titulares de columna
   y cajas 22 → 20 px, sus textos 19 → 17 px) */
#t-cta, #t-seguir { font-size: 28px; }
#cta .lee p, #seguir-leyendo .lee p { font-size: 19px; line-height: 1.55; }
.cta-caja h3, .seguir-caja h3 { font-size: 20px; }
.cta-caja p, .seguir-caja p { font-size: 17px; }
.seguir-caja .seguir-antetit { font-size: 13px; }
@media (max-width: 760px) {
  #t-cta, #t-seguir { font-size: 24px; }
  #cta .lee p, #seguir-leyendo .lee p { font-size: 17px; }
  .cta-caja h3, .seguir-caja h3 { font-size: 19px; }
  .cta-caja p, .seguir-caja p { font-size: 16px; }
}

/* ---------- Estructura final del boceto (6 de octubre) --------------------
   CTA: entre dos líneas, dos columnas; en cada una, el icono a la
   izquierda y, a su lado, titular, frase y botón.
   Para seguir leyendo: sin cajas; cada informe en una fila, imagen a la
   izquierda (gris de momento) y el texto a la derecha, centrado en alto. */
.cta-caja { position: relative; padding-left: 64px; }
.cta-caja h3 { display: block; }
.cta-caja h3 .icono-cta { position: absolute; left: 0; top: 40px; width: 40px; height: 40px; }
.cta-caja .boton { margin-top: 20px; }
@media (max-width: 760px) {
  .cta-caja { padding-left: 52px; }
  .cta-caja h3 .icono-cta { top: 32px; width: 32px; height: 32px; }
}
.seguir-lista { display: flex; flex-direction: column; gap: 56px; }
.seguir-caja {
  display: grid; grid-template-columns: minmax(0, 465px) minmax(0, 600px); column-gap: 64px; align-items: center;
  padding: 0; background: none; border: 0; border-radius: 0;
}
.seguir-imagen { aspect-ratio: 465 / 305; background: #d4d4d4; border-radius: 6px; }
.seguir-texto { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.seguir-caja .seguir-antetit { font-size: 15px; color: var(--negro-digital); font-weight: 400; }
#seguir-leyendo .seguir-intro { margin-top: 16px; }
@media (max-width: 760px) {
  .seguir-caja { grid-template-columns: 1fr; row-gap: 20px; }
}

/* ---------- CTA: vuelven las cajas (trazo gris, 6 px), sin las líneas ---- */
.cta-doble { border: 0; column-gap: 24px; }
.cta-caja {
  position: static; padding: 40px;
  background: var(--blanco-digital); border: 1px solid var(--trazo-caja); border-radius: 6px;
}
.cta-caja h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.cta-caja h3 .icono-cta { position: static; width: 26px; height: 26px; }
@media (max-width: 760px) {
  .cta-caja { padding: 32px 24px; }
  .cta-caja + .cta-caja { border-top: 1px solid var(--trazo-caja); }
  .cta-doble { row-gap: 16px; }
}

/* ---------- Para seguir leyendo: fichas que se apilan --------------------
   La introducción se queda fija; al bajar, la ficha del 2024 sube y la tapa,
   y la del 2023 se coloca encima de la del 2024. Cada ficha es una caja
   blanca con una sombra muy sutil. */
#seguir-leyendo .lee { position: sticky; top: calc(var(--alto-cabecera) + 48px); z-index: 0; }
.seguir-lista { gap: 32px; padding-bottom: 12vh; }
.seguir-caja {
  position: sticky; top: calc(var(--alto-cabecera) + 48px);
  padding: 32px; box-sizing: border-box;
  background: var(--blanco-digital); border-radius: 6px;
  box-shadow: 0 1px 2px #1111110a, 0 8px 28px #1111110f;
}
.seguir-caja:nth-child(1) { z-index: 1; }
.seguir-caja:nth-child(2) { z-index: 2; top: calc(var(--alto-cabecera) + 72px); }
@media (max-width: 760px) {
  .seguir-caja { padding: 20px; }
}
@media (scripting: none) and (prefers-reduced-motion: reduce) {
  #seguir-leyendo .lee, .seguir-caja { position: static; }
}
html.sin-animaciones #seguir-leyendo .lee, html.sin-animaciones .seguir-caja { position: static; }
/* La introducción y las fichas, en el mismo contenedor: dejan de estar
   fijas a la vez y la introducción no asoma por debajo al final */
#seguir-leyendo .seguir-pila .ancho { margin-bottom: 0; }
.seguir-lista { padding-bottom: 0; }
#seguir-leyendo { padding-bottom: 120px; }
/* La primera ficha se fija a la altura del titular y lo tapa entero; la
   segunda, 24 px más abajo para que asome el borde de la primera */
.seguir-caja:nth-child(1) { top: calc(var(--alto-cabecera) + 32px); }
.seguir-caja:nth-child(2) { top: calc(var(--alto-cabecera) + 56px); }

/* Para seguir leyendo: las imágenes de cada informe (la portada del PDF de
   2024 y la ilustración de 2023, de comunicacionclara.com) y, en lugar de
   sombras, un filete gris medio arriba y abajo de cada ficha */
.seguir-imagen {
  display: block; width: 100%; height: auto; aspect-ratio: 465 / 305;
  object-fit: cover; object-position: center 60%; background: var(--blanco-digital);
}
.seguir-caja {
  box-shadow: none; border-radius: 0; padding: 32px 0;
  border-top: 1px solid var(--trazo-caja); border-bottom: 1px solid var(--trazo-caja);
}
/* Las ilustraciones de los informes, enteras (sin recortar) dentro de su
   recuadro, sobre el blanco de la página */
.seguir-imagen { object-fit: contain; object-position: center; background: var(--blanco-digital); }

/* Imágenes de los informes: el recuadro del tamaño de antes (465 × 305, en
   proporción), ahora en blanco digital, con la ilustración entera y centrada
   dentro. La imagen se multiplica sobre el recuadro: su blanco puro se funde
   con el blanco digital de la página. */
.seguir-marco {
  display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 465 / 305; box-sizing: border-box; padding: 16px;
  background: var(--blanco-digital); border-radius: 6px;
  isolation: isolate;
}
.seguir-marco .seguir-imagen {
  width: 100%; height: 100%; aspect-ratio: auto;
  object-fit: contain; object-position: center;
  background: transparent; mix-blend-mode: multiply;
}
/* Sin filete debajo de la última ficha (informe 2023) */
.seguir-caja:last-child { border-bottom: 0; }

/* ==========================================================================
   Accesibilidad (informe de revisión WCAG 2.2 AA, 6 de octubre)
   ========================================================================== */
/* Foco del teclado siempre visible y con contraste (≥ 3:1) */
html { scroll-padding-top: calc(var(--alto-cabecera) + 64px); }
a.cabecera-metodo:focus-visible, .boton:focus-visible, .metodo-boton:focus-visible,
.sim-necesidad:focus-visible, .sim-modo:focus-visible, .sim-panel:focus-visible,
.agente-hablar:focus-visible, .charla-pestana:focus-visible, .charla-sugerencia:focus-visible,
.charla-panel:focus-visible, .charla-cerrar:focus-visible, .salto:focus-visible,
.seguir-enlace:focus-visible, .subir:focus-visible {
  outline: 2px solid var(--azul); outline-offset: 3px;
}
.portada a:focus-visible, .portada-leer:focus-visible, .portada-baja:focus-visible,
.cap.noche :is(.boton, .metodo-boton, .agente-hablar, .salto):focus-visible,
.cierre-foto .boton:focus-visible {
  outline: 2px solid var(--blanco-digital); outline-offset: 3px;
}

/* Portada: si el foco entra en la entradilla o en el bloque del informe,
   se muestran aunque la apertura no haya ocurrido (respaldo del JS) */
.portada-pasos:focus-within :is(.portada-sub, .portada-informe) { opacity: 1; translate: 0 0; }

/* Pie: los grupos de enlaces son listas (sin viñetas ni márgenes) */
.pie-pv-lista { list-style: none; margin: 0; padding: 0; }
.pie-pv-lista li { display: flex; }

/* Comunidad: la ficha ya no es un botón; el botón «Qué dice…» cubre toda
   la ficha con un ::after para que siga siendo pulsable entera */
.agente { cursor: pointer; }
.agente > .agente-hablar { position: static; font-family: inherit; cursor: pointer; }
.agente-hablar::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: 6px; }
.cap.noche.cap-04-noche .comunidad .agente-celda:nth-child(n) .agente:focus-within:before {
  background-color: #0a3c90; background-color: color-mix(in srgb, var(--ultramar) 62%, var(--azul));
}
.cap-04-noche .comunidad .agente-celda:nth-child(n) .agente:focus-within .agente-hablar {
  color: var(--ultramar); background-color: var(--celeste); border-color: var(--celeste);
}

/* Diálogo de conversación: si es más alto que la pantalla, se desplaza */
.charla-caja { max-height: 100dvh; overflow-y: auto; }

/* Portada en flujo: si su texto no cabe (zoom, espaciado de texto mayor),
   deja de estar fija y se muestra abierta, sin recortes (lo activa
   portadaCabe() en reportaje.js) */
.portada.portada-flujo { height: auto; }
.portada.portada-flujo > .portada-escena:not(#_) { position: relative; height: auto; min-height: 100svh; }
.portada.portada-flujo .portada-texto {
  position: relative; inset: auto; transform: none;
  padding: calc(var(--alto-cabecera) + 5vh) clamp(24px, 6.5vw, 110px) 9vh;
}
.portada.portada-flujo :is(.portada-sub, .portada-informe) { opacity: 1; translate: 0 0; }
.portada.portada-flujo .portada-baja { display: none; }

/* Pantallas con muy poca altura (zoom al 200–400 %): sin escenas fijas ni
   barras fijas; cada escena se muestra entera, en su estado final */
@media (max-height: 500px) {
  html { scroll-padding-top: 0; }
  .cabecera { position: relative; }
  .ladillos-viajan h2.marcador {
    position: absolute; width: 1px; height: 1px; margin: 0; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .portada.portada-pasos { height: auto; }
  .portada.portada-pasos > .portada-escena:not(#_) { position: relative; height: auto; min-height: 0; }
  .portada-pasos .portada-texto { position: relative; inset: auto; transform: none; padding: 24px clamp(16px, 6.5vw, 110px) 40px; }
  .portada-pasos :is(.portada-sub, .portada-informe) { opacity: 1; translate: 0 0; }
  .portada-pasos .portada-baja { display: none; }
  .mochila-pista, .red-pista, .vuelta-pista { height: auto; }
  .mochila-escena, .red-escena, .vuelta-escena { position: relative; top: auto; height: auto; overflow: visible; }
  .mochila-escena { flex-direction: column; gap: 24px; padding: 32px var(--gotera); }
  .mochila-pregunta { opacity: 1; translate: 0 0; scale: 1; }
  .mochila-etiquetas { display: none; }
  .mochila-golpe { position: relative; left: auto !important; top: auto !important; translate: none; opacity: 1; scale: 1; }
  .red-lienzo { display: none; }
  .red-escena { display: block; padding: 32px var(--gotera); }
  .red-tiempo { position: relative; inset: auto; opacity: 1; translate: 0 0; pointer-events: auto; margin: 0 0 48px; }
  .red-tiempo .ruta li { opacity: 1; translate: 0 0; }
  .raton-ruta { display: none; }
  .vuelta-paso { opacity: 1; translate: none; }
  .subir { display: none; }
}
/* «Marta no estaba sola.» ahora es un h3: el mismo aspecto que tenía como p */
.lee h3.titulo-bloque {
  font-size: var(--entrada); font-weight: 600; line-height: 1.1;
  letter-spacing: -.02em; text-wrap: balance; margin-block: .2em .9em;
}
/* Las escenas recortan sin poder desplazarse por dentro: al enfocar con el
   teclado algo que aún no está a la vista, el navegador desplazaba la escena
   (overflow: hidden) y la descolocaba */
.portada-pasos .portada-escena, .mochila-escena, .red-escena { overflow: clip; }
/* Lo que aparece al llegar (.asomar) se muestra al momento si recibe el foco */
.asomar:focus-within, .asomar:focus-visible { opacity: 1; translate: 0 0; }
/* (más específico que las reglas de la apertura y de la entrada al cargar) */
html .portada.portada-pasos.portada-flujo :is(.portada-sub, .portada-informe, .portada-titulo) { opacity: 1; translate: 0 0; animation: none; }
@media (max-height: 500px) {
  html .portada.portada-pasos :is(.portada-sub, .portada-informe, .portada-titulo) { opacity: 1; translate: 0 0; animation: none; }
  html .mochila .mochila-pregunta, html .mochila .mochila-golpe { opacity: 1; translate: none; scale: 1; transition: none; }
  html .vuelta .vuelta-paso { opacity: 1; translate: none; }
}

/* Buscador «Renovar DNI» en pantallas estrechas (móvil, zoom alto): menos
   relleno y letra algo menor para que el botón «Buscar» no tape el texto */
@media (max-width: 480px) {
  .buscador { padding: 14px 16px; gap: 10px; }
  .buscador-campo { flex: 1 1 auto; min-width: 0; }
  .buscador-texto { font-size: 20px; }
  .buscador-boton { flex: 0 0 auto; padding: 0 14px; }
}

/* Notas grises del simulador («No es otro chatbot…», «Compara las dos
   lógicas»): gris más oscuro para llegar al contraste AA (5,9:1 sobre gris) */
.f-simulador .nota-pie, .f-simulador .sim-rotulo { color: #595959; }

/* Edad de los perfiles y descripción de cada paso del recorrido de Marta:
   en blanco (el celeste costaba leer a ese tamaño) */
.cap.noche .comunidad .agente-celda:nth-child(n) .agente-edad,
.cap-04-noche .comunidad .agente-celda:nth-child(n) .agente-edad,
.cap.noche .salto .salto-que, .cap.noche .salto[aria-pressed="true"] .salto-que,
.charla-edad { color: var(--blanco-digital); }

/* ---------- Perfiles en móvil: carrusel (lo monta carruselPerfiles()) ----
   Un perfil cada vez, a todo el ancho; botones «Anterior» y «Siguiente» y
   la posición («Perfil 2 de 5»), sin avance automático */
.comunidad-nav { display: none; }
@media (max-width: 767px) {
  .comunidad.carrusel { grid-template-columns: 1fr; }
  .comunidad.carrusel .agente-celda[hidden] { display: none; }
  .comunidad.carrusel .agente-foto { max-width: 120px; }
  .comunidad-nav {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 20px auto 0; max-width: 520px;
  }
  .comunidad-nav button {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
    border: 1px solid var(--blanco-digital); border-radius: 48px; background: transparent;
    color: var(--blanco-digital); font: 600 16px/1.2 "Pv sans", Arial, sans-serif; cursor: pointer;
  }
  .comunidad-nav button:hover { background: var(--celeste); border-color: var(--celeste); color: var(--ultramar); }
  .comunidad-nav button:focus-visible { outline: 2px solid var(--blanco-digital); outline-offset: 3px; }
  .comunidad-nav .comunidad-pos { color: var(--blanco-digital); font-size: 15px; }
  .comunidad-nav .icono-ant, .comunidad-nav .icono-sig {
    width: 14px; height: 14px; background: currentColor;
    -webkit-mask: url('../images/iconos/pv-arrow-right.svg') center / contain no-repeat;
    mask: url('../images/iconos/pv-arrow-right.svg') center / contain no-repeat;
  }
  .comunidad-nav .icono-ant { transform: scaleX(-1); }
}
@media (max-width: 767px) {
  .comunidad.carrusel { margin-bottom: 0; }
  .comunidad-nav { margin-bottom: 64px; }
  .comunidad-nav .comunidad-pos { margin: 0; white-space: nowrap; }
}
/* Entre las dos fichas, un solo filete (el de arriba de la segunda) */
.seguir-caja:first-child { border-bottom: 0; }

/* Pie: los dos grupos son listas de verdad (ul/li). La caja de la fila 1
   conserva el aire de antes; la fila 2 mantiene su disposición en fila y,
   en móvil, el correo arriba y los dos teléfonos juntos debajo */
.pie-pv-enlaces-caja { padding-top: 8px; }
ul.pie-pv-enlaces { padding: 0; }
ul.pie-pv-fila-2 { list-style: none; padding: 0; }
.pie-pv-fila-2 > li { margin: 0; }
@media (max-width: 767px) {
  ul.pie-pv-fila-2 { flex-flow: row wrap; column-gap: 20px; row-gap: 5px; }
  ul.pie-pv-fila-2 > .pie-pv-correo { flex-basis: 100%; }
}
/* La fila 2 del pie recupera su aire (la clase de lista le quitaba el margen) */
ul.pie-pv-fila-2.pie-pv-lista { margin: 20px auto 40px 0; }
@media screen and (max-width: 767px) { ul.pie-pv-fila-2.pie-pv-lista { padding-top: 10px; } }

/* Pie: enlaces legales en <nav> y contacto en <address> (sin la cursiva por
   defecto de address) */
.pie-pv-direccion { font-style: normal; }

/* Conversación: mientras llega la respuesta, las preguntas que quedan se
   atenúan y no se pueden pulsar */
.charla-sugerencias.esperando { opacity: .4; pointer-events: none; transition: opacity .3s; }

/* ---------------------------------------------------------------------------
   Conversación como <dialog> nativo (showModal): se anulan los estilos por
   defecto del navegador y el fondo oscuro pasa a ::backdrop. Mismo aspecto.
   ------------------------------------------------------------------------- */
dialog.charla-caja {
  position: fixed;
  inset: 0;
  margin: auto;
  padding: 0;
  border: 0;
  color: inherit;
  width: calc(100% - 48px);
  max-width: 1100px;
  height: min(88vh, 760px);
  max-height: calc(100dvh - 48px);
}
dialog.charla-caja:not([open]) { display: none !important; }
dialog.charla-caja::backdrop { background-color: #111111d9; }
dialog.charla-caja.asoma { animation: .45s var(--curva) modal-entra; }
dialog.charla-caja.asoma::backdrop { animation: .3s var(--curva) fundir; }
dialog.charla-caja.asoma .charla-perfil > * { animation: .4s var(--curva) both perfil-entra; }
@media screen and (max-width: 860px) {
  dialog.charla-caja { width: 100%; max-width: none; height: 100%; max-height: 100dvh; }
}
@media (scripting: none) and (prefers-reduced-motion: reduce) {
  dialog.charla-caja.asoma, dialog.charla-caja.asoma::backdrop { animation: none !important; }
}
html.sin-animaciones dialog.charla-caja.asoma, html.sin-animaciones dialog.charla-caja.asoma::backdrop { animation: none !important; }

/* ===========================================================================
   Animaciones quietas. Con html.sin-animaciones («reducir movimiento» del
   sistema) todo queda quieto y en su
   estado final: las escenas dejan de estar fijas y se apilan, como con muy
   poca altura (zoom), pero la cabecera y el ladillo siguen en su sitio.
   ========================================================================= */
/* Cualquier animación o transición que quede termina al instante */
html.sin-animaciones *, html.sin-animaciones *::before, html.sin-animaciones *::after {
  animation-duration: .01ms !important; animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important; transition-delay: 0s !important;
}
html.sin-animaciones .portada.portada-pasos { height: auto; }
html.sin-animaciones .portada.portada-pasos > .portada-escena:not(#_) { position: relative; height: auto; min-height: 0; }
html.sin-animaciones .portada-pasos .portada-texto {
  position: relative; inset: auto; transform: none;
  padding: calc(var(--alto-cabecera) + 5vh) clamp(16px, 6.5vw, 110px) 9vh;
}
html.sin-animaciones .portada.portada-pasos :is(.portada-sub, .portada-informe, .portada-titulo) { opacity: 1; translate: 0 0; animation: none; }
html.sin-animaciones .portada-pasos .portada-baja { display: none; }
html.sin-animaciones :is(.mochila-pista, .red-pista, .vuelta-pista) { height: auto; }
html.sin-animaciones :is(.mochila-escena, .red-escena, .vuelta-escena) { position: relative; top: auto; height: auto; overflow: visible; }
html.sin-animaciones .mochila-escena { flex-direction: column; gap: 24px; padding: 32px var(--gotera); }
html.sin-animaciones .mochila .mochila-pregunta { opacity: 1; translate: none; scale: 1; }
html.sin-animaciones .mochila-etiquetas { display: none; }
html.sin-animaciones .mochila .mochila-golpe { position: relative; left: auto !important; top: auto !important; translate: none; opacity: 1; scale: 1; }
html.sin-animaciones .red-lienzo { display: none; }
html.sin-animaciones .red-escena { display: block; padding: 32px var(--gotera); }
html.sin-animaciones .red-tiempo { position: relative; inset: auto; opacity: 1; translate: 0 0; pointer-events: auto; margin: 0 0 48px; }
html.sin-animaciones .red-tiempo .ruta li { opacity: 1; translate: 0 0; }
html.sin-animaciones .vuelta .vuelta-paso { opacity: 1; translate: none; }

/* «Volvamos al principio.» no se oculta con las animaciones pausadas (ni
   con mucho zoom): va encima del bocadillo, no superpuesto a él */
html.sin-animaciones .vuelta.quieta .vuelta-titulo { display: block; }
html.sin-animaciones .vuelta-escena :is(.vuelta-titulo, .vuelta-grupo) { grid-area: auto; }
html.sin-animaciones .vuelta-escena .vuelta-titulo { margin-bottom: 40px; }
@media (max-height: 500px) {
  .vuelta-escena :is(.vuelta-titulo, .vuelta-grupo) { grid-area: auto; }
  .vuelta-escena .vuelta-titulo { margin-bottom: 40px; }
}
/* Carrusel de perfiles a 320 px: la posición va en su propia línea, encima
   de «Anterior» y «Siguiente» (si no, el botón se salía por la derecha) */
@media (max-width: 400px) {
  .comunidad-nav { flex-wrap: wrap; row-gap: 12px; }
  .comunidad-nav .comunidad-pos { order: -1; flex-basis: 100%; text-align: center; }
}

/* Títulos: líneas equilibradas, sin palabras sueltas en la última */
h1, h2, h3, h4,
.cap-titular, .portada-informe-titulo, .sim-titular, .ruta-titulo, .tarjeta-titulo, .titulo-bloque {
  text-wrap: balance;
}

/* Conversación: los textos ocultos para el lector de pantalla («Tú:»,
   «Marta:») se colocan dentro del panel que se desplaza. Sin esto se
   colocaban respecto a la caja entera y, con varios mensajes, la hacían
   más alta: salía una segunda barra de desplazamiento */
.charla-panel { position: relative; }

/* Apertura: todo el contenido centrado (titular, entradilla, ficha del
   informe, descarga y «Leer reportaje») */
.portada.portada-pasos .portada-texto { align-items: center; text-align: center; }
.portada.portada-pasos :is(.portada-titulo, .portada-sub, .portada-antetit, .portada-informe-titulo) { text-align: center; margin-inline: auto; }
.portada.portada-pasos .portada-informe { align-items: center; text-align: center; }
@media (min-width: 761px) and (max-height: 860px) {
  .portada.portada-pasos .portada-informe { justify-content: center; justify-items: center; }
  .portada.portada-pasos .portada-informe .boton { grid-column: 1 / -1; }
}