/* ============================================================
   PASTORAL SOCIAL CARITAS PARAGUAY - Design system (prototipo)
   Tokens desde la carta de colores oficial. Solo modo claro.
   ============================================================ */

:root {
  /* Color madre */
  --bordo: #7A1E2C;
  --bordo-oscuro: #5E1420;
  --bordo-profundo: #4A0F19;

  /* Neutros institucionales */
  --marfil: #FAF6F0;
  --blanco: #FFFFFF;
  --gris-claro: #E9E9E9;
  --gris-medio: #B0B0B0;
  --gris-oscuro: #333333;
  --texto-suave: #5C5650;

  /* Colores por eje (etiquetas de categoria, nunca acentos que compitan) */
  --eje-identidad: #7A1E2C;
  --eje-riesgos: #2D9CDB;
  --eje-democracia: #E67E22;
  --eje-casa-comun: #4E8B3A;
  --eje-fortalecimiento: #C89B2B;

  /* Acentos de detalle (uso minimo) */
  --dorado-claro: #F2C94C;

  /* Tipografia */
  --serif: "Source Serif 4", Georgia, serif;
  --sans: "Source Sans 3", "Segoe UI", sans-serif;

  --t-display: clamp(2.5rem, 5.6vw, 4.25rem);
  --t-h2: clamp(1.85rem, 3.4vw, 2.6rem);
  --t-manifesto: clamp(1.45rem, 2.7vw, 2.15rem);
  --t-h3: 1.3rem;
  --t-cuerpo: 1.0625rem;
  --t-chico: 0.9rem;

  /* Forma: tarjetas 12px, botones pildora (regla de marca) */
  --radio: 12px;
  --radio-img: 12px;

  /* Movimiento */
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.65s;

  --ancho: 1240px;
  --pad-x: clamp(1.25rem, 4vw, 2.5rem);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; }}

body {
  font-family: var(--sans);
  font-size: var(--t-cuerpo);
  line-height: 1.65;
  color: var(--gris-oscuro);
  background: var(--marfil);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--bordo); text-decoration: none; }

::selection { background: var(--bordo); color: var(--blanco); }

:focus-visible {
  outline: 2px solid var(--bordo);
  outline-offset: 3px;
  border-radius: 4px;
}

.contenedor {
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--bordo);
  color: var(--blanco);
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  z-index: 200;
}
.salto-contenido:focus { left: 1rem; top: 1rem; }

/* ---------- Tipografia ---------- */
h1, h2, h3, .display {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.12;
  color: var(--gris-oscuro);
  text-wrap: balance;
}

h1 { font-size: var(--t-display); letter-spacing: -0.015em; }
h2 { font-size: var(--t-h2); letter-spacing: -0.01em; }
h3 { font-size: var(--t-h3); font-family: var(--sans); font-weight: 650; line-height: 1.3; }

.prosa { max-width: 62ch; }
.texto-suave { color: var(--texto-suave); }

/* ---------- Botones (pildora) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  padding: 0.78em 1.7em;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--curva), background-color 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(0.98); }

.btn-primario { background: var(--bordo); color: var(--blanco); }
.btn-primario:hover { background: var(--bordo-oscuro); box-shadow: 0 8px 24px rgba(122, 30, 44, 0.25); }

.btn-secundario { background: transparent; color: var(--bordo); border-color: var(--bordo); }
.btn-secundario:hover { background: var(--bordo); color: var(--blanco); }

.btn-claro { background: var(--blanco); color: var(--bordo); }
.btn-claro:hover { background: var(--marfil); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); }

.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 600;
  color: var(--bordo);
}
.enlace-flecha .flecha { transition: transform 0.3s var(--curva); }
.enlace-flecha:hover .flecha { transform: translateX(5px); }

/* ---------- Chips de categoria ---------- */
/* Etiqueta de categoría: tag editorial cuadrado (no pastilla). Color por
   categoría con contraste AA; el fondo tintado sostiene el texto oscuro. */
.chip {
  --c: var(--bordo);
  display: inline-flex;
  align-items: center;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.3em 0.55em;
  border-radius: 4px;
  background: color-mix(in srgb, var(--c) 14%, var(--blanco));
  color: color-mix(in srgb, var(--c) 48%, var(--gris-oscuro)); /* 48% mantiene el hue y pasa AA en el mostaza */
}
/* Legado (paginas de eje). En noticias NO se usan: se usan las categorias reales. */
.chip-identidad { --c: var(--eje-identidad); }
.chip-riesgos { --c: var(--eje-riesgos); }
.chip-democracia { --c: var(--eje-democracia); }
.chip-casa-comun { --c: var(--eje-casa-comun); }
.chip-fortalecimiento { --c: var(--eje-fortalecimiento); }

/* Chips por CATEGORÍA REAL (capa cero del council). Bordó por defecto;
   color solo en las categorías que valen la pena distinguir. */
.chip-emergencias { --c: var(--eje-riesgos); }        /* azul esperanza */
.chip-tiempos { --c: var(--eje-fortalecimiento); }    /* mostaza comunión */
.chip-tekoha { --c: var(--eje-casa-comun); }          /* verde vida */
.chip-proyectos { --c: var(--eje-democracia); }       /* naranja solidario */
.chip-documentos { --c: var(--texto-suave); }
.chip-pagina { --c: var(--texto-suave); }       /* resultados de búsqueda que no son noticias */
/* Actividades, Convocatorias, Institucional/Destacado y default => .chip base (bordó) */

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  transition: background-color 0.3s, box-shadow 0.3s, border-color 0.3s;
  border-bottom: 1px solid transparent;
}
.header.desplazado {
  background: rgba(250, 246, 240, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--gris-claro);
}
.header-interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: 74px;
}
.marca {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--gris-oscuro);
}
.marca img { width: 46px; height: 46px; }
/* Por defecto se ve el escudo a color; el blanco solo aparece cuando el header
   flota sobre una superficie oscura (ver la regla de body.home / .hero-oscuro). */
.marca-logo-claro { display: none; }
.marca-texto { font-family: var(--serif); font-weight: 600; font-size: 1.02rem; line-height: 1.15; }
.marca-texto small { display: block; font-family: var(--sans); font-weight: 500; font-size: 0.72rem; color: var(--texto-suave); letter-spacing: 0.02em; }

.nav-principal { display: flex; align-items: center; gap: 1.6rem; }
.nav-principal a:not(.btn) {
  font-size: 0.95rem;
  font-weight: 550;
  color: var(--gris-oscuro);
  position: relative;
  padding: 0.25rem 0;
}
.nav-principal a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--bordo);
  transition: right 0.3s var(--curva);
}
.nav-principal a:not(.btn):hover::after { right: 0; }
.nav-principal .btn { padding: 0.55em 1.4em; font-size: 0.95rem; }

.boton-menu {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 44px; height: 44px;
  border-radius: 999px;
  position: relative;
  z-index: 130;
}
.boton-menu span {
  display: block;
  width: 22px; height: 2px;
  background: var(--gris-oscuro);
  margin: 5px auto;
  transition: transform 0.3s var(--curva), opacity 0.2s;
}
.menu-abierto .boton-menu span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-abierto .boton-menu span:nth-child(2) { opacity: 0; }
.menu-abierto .boton-menu span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.panel-movil {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--marfil);
  z-index: 120;
  padding: 6.5rem var(--pad-x) 3rem;
  flex-direction: column;
  gap: 0.4rem;
  /* Con las subsecciones nuevas el menú mide más que la pantalla (891 px en un
     iPhone de 812) y el botón Doná quedaba cortado, sin forma de llegar. Con
     scroll propio entra siempre, sumen los ítems que sumen. */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.menu-abierto .panel-movil { display: flex; }
.panel-movil a:not(.btn) {
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--gris-oscuro);
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--gris-claro);
}
/* Subsecciones: en el teléfono no hay hover, así que en vez de esconderlas en
   un desplegable se listan debajo de su sección, más chicas y con sangría. */
.panel-movil a.panel-sub {
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--texto-suave);
  padding: 0.5rem 0 0.5rem 1.1rem;
  border-bottom: 1px solid var(--gris-claro);
  position: relative;
}
.panel-movil a.panel-sub::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 0.55rem; height: 1px; background: var(--gris-medio);
}
.panel-movil .btn { margin-top: 1.5rem; align-self: flex-start; }
.menu-abierto { overflow: hidden; }
/* Safari iOS compone mal un position:fixed (el panel) anidado en el header
   position:sticky, y deja pasar el contenido por debajo. Con el menú abierto
   ocultamos el fondo para que nunca se filtre, en cualquier navegador. */
.menu-abierto #contenido,
.menu-abierto .footer { visibility: hidden; }

@media (max-width: 1080px) {
  .nav-principal { display: none; }
  .boton-menu { display: block; }}

/* ---------- Secciones ---------- */
.seccion { padding-block: clamp(4rem, 9vw, 7.5rem); }
.seccion-compacta { padding-block: clamp(3rem, 6vw, 5rem); }

.encabezado-seccion {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(2.2rem, 5vw, 3.5rem);
  flex-wrap: wrap;
}

/* ---------- Hero ---------- */
.hero { padding-top: clamp(2.5rem, 6vw, 5rem); }
.hero h1 { max-width: 15ch; }
.hero-bajada {
  max-width: 44ch;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  color: var(--texto-suave);
  margin-top: 1.4rem;
}
.hero-acciones { margin-top: 2.2rem; display: flex; gap: 1rem; flex-wrap: wrap; }

.hero-figura {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  border-radius: var(--radio-img);
  overflow: hidden;
}
.hero-figura img {
  width: 100%;
  height: clamp(320px, 55vw, 620px);
  object-fit: cover;
}

/* ---------- Manifiesto (Quienes somos) ---------- */
.manifiesto { text-align: center; }
.manifiesto .display {
  font-size: var(--t-manifesto);
  font-weight: 550;
  line-height: 1.35;
  max-width: 30ch;
  margin-inline: auto;
}
.manifiesto .display em {
  font-style: italic;
  color: var(--bordo);
  line-height: 1.35;
  padding-bottom: 0.1em;
}
.manifiesto p {
  max-width: 52ch;
  margin: 1.6rem auto 0;
  color: var(--texto-suave);
}
.manifiesto .enlace-flecha { margin-top: 1.8rem; }

/* ---------- Cifras ---------- */
.cifras {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--gris-claro);
}
.cifra {
  padding: 2.2rem 1.8rem 0.5rem 0;
  border-top: 3px solid transparent;
  margin-top: -1px;
}
.cifra:hover { border-top-color: var(--bordo); }
.cifra { transition: border-color 0.35s; }
.cifra-numero {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 4.5vw, 3.8rem);
  font-weight: 600;
  color: var(--bordo);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cifra-etiqueta { margin-top: 0.7rem; color: var(--texto-suave); font-size: var(--t-chico); max-width: 24ch; }

@media (max-width: 900px) {
  .cifras { grid-template-columns: 1fr 1fr; }}
@media (max-width: 520px) {
  .cifras { grid-template-columns: 1fr; }
  .cifra { padding-block: 1.6rem 0.4rem; }}

/* ---------- Ejes de trabajo ---------- */
.ejes-grilla {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.ejes-lista { border-top: 1px solid var(--gris-claro); }
.eje-fila {
  --c: var(--bordo);
  display: grid;
  grid-template-columns: 3.2rem 1fr auto;
  align-items: center;
  gap: 1.2rem;
  padding: 1.5rem 1rem 1.5rem 0.9rem;
  border-bottom: 1px solid var(--gris-claro);
  position: relative;
  color: var(--gris-oscuro);
  transition: background-color 0.3s;
}
/* sin barra lateral: el acento vive en el número y el fondo al enfocar */
.eje-fila:hover, .eje-fila:focus-visible, .eje-fila.activo {
  background: var(--blanco);
}
.eje-fila > * { transition: transform 0.3s var(--curva); }
.eje-fila:hover > *, .eje-fila.activo > * { transform: translateX(6px); }
.eje-num {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--gris-medio);
  font-variant-numeric: tabular-nums;
}
.eje-fila:hover .eje-num, .eje-fila.activo .eje-num { color: var(--c); }
.eje-nombre { display: block; font-family: var(--sans); font-weight: 650; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.3; }
.eje-desc { display: block; }
.eje-desc { font-size: var(--t-chico); color: var(--texto-suave); margin-top: 0.25rem; max-width: 46ch; }
.eje-flecha {
  color: var(--gris-medio);
  font-size: 1.3rem;
  transition: transform 0.3s var(--curva), color 0.3s;
}
.eje-fila:hover .eje-flecha { transform: translateX(4px); color: var(--c); }

.eje-fila-riesgos { --c: var(--eje-riesgos); }
.eje-fila-democracia { --c: var(--eje-democracia); }
.eje-fila-casa-comun { --c: var(--eje-casa-comun); }
.eje-fila-fortalecimiento { --c: var(--eje-fortalecimiento); }

.ejes-visor {
  position: sticky;
  top: 110px;
  border-radius: var(--radio-img);
  overflow: hidden;
  aspect-ratio: 4 / 3.4;
}
.ejes-visor img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.55s var(--curva), transform 0.9s var(--curva);
}
.ejes-visor img.activa { opacity: 1; transform: scale(1); }

@media (max-width: 900px) {
  .ejes-grilla { grid-template-columns: 1fr; }
  .ejes-visor { display: none; }
  .eje-fila { grid-template-columns: 2.4rem 1fr auto; padding-inline: 0.4rem; }}

/* ---------- Noticias ---------- */
.noticias-grilla {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 1.5rem;
}
.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--gris-claro);
  border-radius: var(--radio);
  overflow: hidden;
  transition: transform 0.35s var(--curva), box-shadow 0.35s;
  display: block;
  color: var(--gris-oscuro);
}
.tarjeta:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(122, 30, 44, 0.1);
}
.tarjeta img { transition: transform 0.8s var(--curva); }
.tarjeta:hover img { transform: scale(1.03); }

.noticia-destacada .noticia-media { overflow: hidden; aspect-ratio: 16 / 9.2; }
.noticia-destacada .noticia-media img { width: 100%; height: 100%; object-fit: cover; }
.noticia-cuerpo { padding: 1.5rem 1.6rem 1.7rem; }
.noticia-meta {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.85rem;
}
.noticia-fecha { font-size: 0.85rem; color: var(--texto-suave); }
.noticia-titulo { font-family: var(--serif); font-weight: 600; font-size: 1.35rem; line-height: 1.3; }
.noticia-destacada .noticia-titulo { font-size: clamp(1.35rem, 2.2vw, 1.7rem); }
.noticia-extracto { margin-top: 0.7rem; color: var(--texto-suave); font-size: var(--t-chico); }

.noticias-columna { display: grid; gap: 1.5rem; align-content: start; }
.noticia-compacta { display: grid; grid-template-columns: 42% 1fr; align-items: stretch; }
.noticia-compacta .noticia-media { overflow: hidden; }
.noticia-compacta .noticia-media img { width: 100%; height: 100%; object-fit: cover; min-height: 150px; }
.noticia-compacta .noticia-cuerpo { padding: 1.2rem 1.3rem; }
.noticia-compacta .noticia-titulo { font-size: 1.1rem; }

@media (max-width: 900px) {
  .noticias-grilla { grid-template-columns: 1fr; }
  .noticia-compacta { grid-template-columns: 1fr; }
  .noticia-compacta .noticia-media img { min-height: 0; aspect-ratio: 16 / 8; }}

/* ---------- Banda de Tiempos y Tiempo de Dios ---------- */
.tiempos-banda { background: var(--blanco); border-block: 1px solid var(--gris-claro); }
.tiempos-grilla { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.tiempos-intro h2 { margin-top: 1.1rem; max-width: 15ch; }
.tiempos-intro p { color: var(--texto-suave); margin-top: 1rem; max-width: 42ch; }
.tiempos-intro .btn { margin-top: 1.8rem; }
.tiempos-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--gris-claro); }
.tiempos-lista li { border-bottom: 1px solid var(--gris-claro); }
.tiempos-lista a {
  display: grid; grid-template-columns: 7.5rem 1fr; gap: 1.2rem; align-items: baseline;
  padding: 1.3rem 0.2rem; color: inherit; text-decoration: none;
  transition: padding-left 0.35s var(--curva), color 0.2s;
}
.tiempos-lista a:hover, .tiempos-lista a:focus-visible { padding-left: 1rem; color: var(--bordo); }
.tiempos-lista time { color: var(--texto-suave); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.tiempos-t { font-family: var(--serif); font-weight: 600; font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.3; }
@media (max-width: 860px) {
  .tiempos-grilla { grid-template-columns: 1fr; }
  .tiempos-lista a { grid-template-columns: 1fr; gap: 0.35rem; }}

/* ---------- Campana destacada ---------- */
.campania { background: var(--bordo); color: var(--marfil); border-radius: 0; }
.campania-grilla {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.campania h2 { color: var(--blanco); max-width: 17ch; }
.campania .chip { background: rgba(255, 255, 255, 0.16); color: var(--dorado-claro); }
.campania p { color: rgba(250, 246, 240, 0.85); max-width: 48ch; margin-top: 1.2rem; }
.campania .btn { margin-top: 2rem; }
.campania-figura { justify-self: center; width: min(100%, 24rem); }
.campania-figura img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radio-img);
  box-shadow: 0 18px 44px rgba(20, 8, 11, 0.32);
}

@media (max-width: 900px) {
  .campania-grilla { grid-template-columns: 1fr; }
  .campania-figura { order: -1; }}

/* ---------- Red de socios ---------- */
/* FRANJA BLANCA, fija (pedido del cliente, 16-sep-2026). Cinco de los ocho
   logos vienen con el fondo blanco pegado al archivo (Caritas Internationalis,
   Caritas LAC, Adveniat, Misereor, Plzen, Cerrito): sobre el marfil se veian
   como cuadros blancos. Sobre blanco desaparece el borde. No es un campo
   editable a proposito: el color tiene que ser este o los logos vuelven a
   recortarse. */
.red {
  background: var(--blanco);
  /* La aurora (el velo de luz que sigue al scroll) es position:fixed con
     z-index 1 y flota SOBRE las secciones: tenia la franja blanca y la volvia
     un degradado rosado, que es lo que el cliente vio. Con z-index 2 la franja
     pasa por encima del velo y queda blanca de verdad. El velo sigue en el
     resto de la pagina. */
  position: relative;
  z-index: 2;
}
.red-titulo {
  text-align: center;
  font-size: var(--t-chico);
  font-weight: 600;
  color: var(--texto-suave);
  margin-bottom: 2.2rem;
}
.red-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2rem, 5vw, 4rem);
  flex-wrap: wrap;
}
/* A COLOR, como pidió el cliente (doc del 20-ago). Estaban en escala de grises
   al 65%: quedaban lavados y no se reconocía ninguna organización, que es
   justamente lo que la marquesina tiene que comunicar. */
/* Misma altura para todos y un tope de ancho: un logo muy apaisado (CRS es
   4,3 veces más ancho que alto) se achica en vez de comerse la fila. El aire
   sobrante del archivo ya viene recortado por psn_logo_recortado(). */
.red-logos img {
  height: 48px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  opacity: 0.92;
  transition: opacity 0.3s, transform 0.3s var(--curva);
}
.red-logos img:hover { opacity: 1; transform: translateY(-2px); }
.red-marca {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--gris-medio);
  transition: color 0.3s;
}
.red-marca:hover { color: var(--texto-suave); }

/* ---------- Encabezado de subpágina (Historia, Nuestro equipo, Áreas
   Pastorales, Salvaguardia): más contenido y menos hero que una sección
   principal, con el camino de vuelta a su sección madre. ---------- */
.sub-hero { padding-bottom: clamp(1.5rem, 3vw, 2.4rem); }
.sub-hero h1 { max-width: 18ch; margin-top: 0.6rem; }
.sub-hero-bajada { margin-top: 1.2rem; max-width: 62ch; font-size: 1.08rem; color: var(--texto-suave); }
.qs-ojo a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.qs-ojo a:hover { color: var(--bordo); }

/* ---------- Cita ---------- */
.cita { text-align: center; }
.cita blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  line-height: 1.3;
  color: var(--bordo);
  max-width: 24ch;
  margin-inline: auto;
  padding-bottom: 0.15em;
}
.cita figcaption { margin-top: 1.4rem; color: var(--texto-suave); font-size: var(--t-chico); font-weight: 600; }

/* ---------- Footer ---------- */
.footer {
  background: var(--bordo-profundo);
  color: rgba(250, 246, 240, 0.78);
  padding-top: clamp(3.5rem, 7vw, 5.5rem);
}
.footer a { color: rgba(250, 246, 240, 0.78); transition: color 0.25s; }
.footer a:hover { color: var(--blanco); }
.footer-grilla {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: 3rem;
}
.footer-marca img { width: 64px; margin-bottom: 1.1rem; }
.footer-marca p { font-size: var(--t-chico); max-width: 30ch; }
.footer h4 {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blanco);
  margin-bottom: 1.1rem;
}
.footer ul { list-style: none; display: grid; gap: 0.55rem; font-size: var(--t-chico); }
.footer-legal {
  border-top: 1px solid rgba(250, 246, 240, 0.15);
  padding-block: 1.4rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.82rem;
}
@media (max-width: 900px) {
  .footer-grilla { grid-template-columns: 1fr 1fr; }}
@media (max-width: 520px) {
  .footer-grilla { grid-template-columns: 1fr; }}

/* ---------- Animaciones de aparicion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .revelar {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity var(--dur) var(--curva), transform var(--dur) var(--curva);
    transition-delay: var(--d, 0s);
  }
  .revelar.visible { opacity: 1; transform: none; }

  .revelar-imagen {
    opacity: 0;
    transform: scale(1.035);
    transition: opacity 0.9s var(--curva), transform 1.3s var(--curva);
    transition-delay: var(--d, 0s);
  }
  .revelar-imagen.visible { opacity: 1; transform: scale(1); }}

/* ============================================================
   Design system (solo para design-system.html)
   ============================================================ */
.ds-bloque { margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.ds-bloque > h2 { margin-bottom: 1.6rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--gris-claro); }
.ds-nota { font-size: var(--t-chico); color: var(--texto-suave); max-width: 70ch; margin-bottom: 1.5rem; }
.ds-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.ds-color { border-radius: var(--radio); overflow: hidden; border: 1px solid var(--gris-claro); background: var(--blanco); }
.ds-color-muestra { height: 84px; }
.ds-color-info { padding: 0.8rem 1rem; font-size: 0.85rem; }
.ds-color-info strong { display: block; }
.ds-color-info code { color: var(--texto-suave); font-size: 0.8rem; }
.ds-fila { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.ds-tipo-item { margin-bottom: 1.4rem; }
.ds-tipo-item small { display: block; color: var(--gris-medio); font-size: 0.78rem; margin-bottom: 0.3rem; font-family: var(--sans); }

/* ============================================================
   Capa de motion design: cinetica, parallax y ornamentos
   ============================================================ */

/* Titular cinetico: las palabras suben en cascada desde una mascara */
.texto-cinetico .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.texto-cinetico .w > span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .texto-cinetico .w > span {
    transform: translateY(110%);
    transition: transform 0.9s var(--curva);
    transition-delay: calc(var(--i) * 65ms);
  }
  .texto-cinetico.visible .w > span { transform: none; }}

/* Apertura cinematografica de la foto de portada (clip-path wipe) */
@media (prefers-reduced-motion: no-preference) {
  .revelar-portada {
    clip-path: inset(16% 8% 16% 8% round var(--radio-img));
    transition: clip-path 1.15s var(--curva) 0.35s;
  }
  .revelar-portada.visible { clip-path: inset(0 0 0 0 round var(--radio-img)); }}

/* Parallax al scroll (CSS scroll-driven; sin listeners de scroll) */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .parallax-media > img {
      animation: parallax-suave linear both;
      animation-timeline: view();
    }
  }}
@keyframes parallax-suave {
  from { transform: translateY(-5%) scale(1.12); }
  to { transform: translateY(5%) scale(1.12); }
}

/* Ornamento radial (eco del roundel Caritas, se dibuja al entrar) */
.rayos { position: absolute; color: var(--bordo); opacity: 0.13; pointer-events: none; }
.rayos svg { width: 100%; height: 100%; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .rayos line { stroke-dashoffset: var(--len); }
  .rayos.dibujar line {
    animation: trazo 1.1s var(--curva) forwards;
    animation-delay: calc(var(--i) * 55ms);
  }
  .rayos.dibujar svg { animation: girar 150s linear infinite; }}
@keyframes trazo { to { stroke-dashoffset: 0; } }
@keyframes girar { to { transform: rotate(360deg); } }

.hero .contenedor { position: relative; }
.rayos-hero { top: -0.5rem; right: -1.5rem; width: min(29vw, 420px); aspect-ratio: 1; transition: transform 0.5s var(--curva); }
@media (max-width: 900px) { .rayos-hero { display: none; }}

.cita { position: relative; overflow: hidden; }
.cita .contenedor { position: relative; }

/* Orbitas concentricas: ondas que giran lento, motivo propio de la cita */
.orbitas { position: absolute; color: var(--bordo); pointer-events: none; }
.orbitas svg { width: 100%; height: 100%; display: block; overflow: visible; }
.orbitas circle { transform-box: fill-box; transform-origin: center; }
.orbitas-cita {
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  height: 84%; aspect-ratio: 1;
  opacity: 0.11;
}
@media (prefers-reduced-motion: no-preference) {
  .orbitas circle { stroke-dashoffset: var(--circ); }
  .orbitas.dibujar circle {
    animation: trazo 1.5s var(--curva) forwards, orbitar var(--dur) linear infinite;
    animation-delay: calc(var(--i) * 200ms), 0s;
  }}
@keyframes orbitar { to { transform: rotate(var(--giro, 360deg)); } }

/* Marquesina de socios (unica marquesina de la pagina) */
.marquesina {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 14%, black 86%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 14%, black 86%, transparent);
}
.marquesina-pista { display: flex; width: max-content; }
.marquesina-grupo {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  padding-right: clamp(2.5rem, 6vw, 4.5rem);
}
@media (prefers-reduced-motion: no-preference) {
  .marquesina-pista { animation: desplazar 32s linear infinite; }
  .marquesina:hover .marquesina-pista { animation-play-state: paused; }}
@media (prefers-reduced-motion: reduce) {
  .marquesina { mask-image: none; -webkit-mask-image: none; }
  .marquesina-pista { width: auto; justify-content: center; }
  .marquesina-grupo { flex-wrap: wrap; justify-content: center; }
  .marquesina-grupo + .marquesina-grupo { display: none; }}
@keyframes desplazar { to { transform: translateX(calc(-100% / 3)); } }

/* ============================================================
   Escena inmersiva de ejes (scrolltelling con seccion fijada)
   ============================================================ */
.ejes-escena { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .ejes-movil { display: none; }

  .ejes-escena { display: block; position: relative; height: 460vh; }
  .ejes-lienzo {
    --c-eje: var(--eje-identidad);
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
  }
  .ejes-fondo, .ejes-fondo img { position: absolute; inset: 0; }
  .ejes-fondo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.8s var(--curva);
  }
  .ejes-fondo img.activa { opacity: 1; animation: paneo-lento 10s var(--curva) forwards; }

  .ejes-velo {
    position: absolute;
    inset: 0;
    background-color: color-mix(in srgb, var(--c-eje) 66%, #170a0e);
    opacity: 0.85;
    transition: background-color 1s var(--curva);
  }
  .ejes-velo-grad {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top right, rgba(10, 4, 6, 0.45), transparent 60%);
  }

  .ejes-capa {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: clamp(3rem, 8vh, 5.5rem);
    color: var(--blanco);
  }
  .ejes-rotulo {
    position: absolute;
    top: clamp(5.5rem, 12vh, 7.5rem);
    left: var(--pad-x);
    font-size: var(--t-chico);
    font-weight: 650;
    color: rgba(255, 255, 255, 0.85);
  }

  .ejes-textos { position: relative; min-height: 17rem; }
  .eje-panel {
    position: absolute;
    inset: auto 0 0 0;
    max-width: 56rem;
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.55s var(--curva), transform 0.55s var(--curva);
    pointer-events: none;
  }
  .eje-panel.activo {
    opacity: 1;
    transform: none;
    transition-delay: 0.18s;
    pointer-events: auto;
  }
  .eje-etapa { font-size: var(--t-chico); font-weight: 650; color: rgba(255, 255, 255, 0.75); font-variant-numeric: tabular-nums; }
  .eje-titulo {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(2.3rem, 4.2vw, 3.7rem);
    line-height: 1.08;
    margin-top: 0.8rem;
    max-width: 18ch;
    text-wrap: balance;
    color: var(--blanco);
  }
  .eje-detalle { margin-top: 1.1rem; max-width: 52ch; color: rgba(255, 255, 255, 0.88); }
  .eje-panel .enlace-flecha { color: var(--blanco); margin-top: 1.4rem; }

  .ejes-progreso {
    display: flex;
    gap: 0.5rem;
    margin-top: 2.4rem;
  }
  .ejes-progreso span {
    width: 3.2rem;
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
    overflow: hidden;
    position: relative;
  }
  .ejes-progreso span::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--blanco);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s var(--curva);
  }
  .ejes-progreso span.hecho::after { transform: scaleX(1); }

  .ejes-sentinelas { position: absolute; inset: 0; pointer-events: none; }
  .ejes-sentinelas div { position: absolute; left: 0; width: 1px; height: 20%; }

  @media (max-width: 700px) {
    .eje-titulo { font-size: 2rem; }
    .eje-detalle { font-size: 0.95rem; }
    .ejes-textos { min-height: 15rem; }
    .ejes-progreso { margin-top: 1.8rem; }
    .ejes-progreso span { width: 2.4rem; }
    .ejes-rotulo { top: 5.5rem; }}}

@keyframes paneo-lento { from { transform: scale(1.03); } to { transform: scale(1.1); } }

/* Escena de ejes en pantallas chicas: mismos capitulos, tipografia acotada */
@media (max-width: 700px) {
  .ejes-lienzo { height: 100svh; }
  .eje-titulo { font-size: 1.85rem; }
  .eje-detalle { font-size: 0.95rem; }
  .ejes-progreso span { width: 2.3rem; }
  .ejes-capa { padding-bottom: 2.4rem; }}

/* ============================================================
   Capa de inmersion: cortina, ambiente, relleno y revelados
   ============================================================ */

/* Cortina de apertura (una vez por sesion) */
.cortina {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: var(--bordo);
  display: grid;
  place-items: center;
  transition: transform 0.85s var(--curva);
}
.cortina img { width: 92px; opacity: 0; transform: scale(0.85); }
@media (prefers-reduced-motion: no-preference) {
  .cortina img { animation: cortina-logo 0.7s var(--curva) 0.12s forwards; }}
.cortina.abrir { transform: translateY(-101%); }
@keyframes cortina-logo { to { opacity: 1; transform: scale(1); } }

/* Fondo ambiente: halos que derivan + grano de papel */
main { position: relative; z-index: 1; background: var(--marfil); overflow-x: clip; }
.ambiente { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.ambiente::before, .ambiente::after {
  content: "";
  position: absolute;
  width: 62vmax;
  height: 62vmax;
  border-radius: 50%;
}
.ambiente::before {
  background: radial-gradient(circle, rgba(122, 30, 44, 0.055), transparent 62%);
  top: -22vmax; right: -16vmax;
}
.ambiente::after {
  background: radial-gradient(circle, rgba(200, 155, 43, 0.05), transparent 62%);
  bottom: -26vmax; left: -18vmax;
}
.grano {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference) {
  .ambiente::before { animation: deriva-a 46s ease-in-out infinite alternate; }
  .ambiente::after { animation: deriva-b 58s ease-in-out infinite alternate; }}
@keyframes deriva-a { to { transform: translate3d(-9vmax, 11vmax, 0); } }
@keyframes deriva-b { to { transform: translate3d(11vmax, -9vmax, 0); } }

/* Footer con revelado parallax: la pagina se levanta y el footer espera detras */
@media (min-width: 900px) {
  main {
    border-radius: 0 0 26px 26px;
    box-shadow: 0 30px 70px rgba(23, 9, 13, 0.3);
  }
  .footer { position: sticky; bottom: 0; z-index: 0; }}

/* Manifiesto: el texto se pinta con el avance del scroll */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* el texto se aclara a tinta a medida que entra en lectura (barrido de
       color con el scroll, sin gradient-text) */
    .texto-relleno {
      color: #cbc0b4;
      animation: rellenar linear both;
      animation-timeline: view();
      animation-range: entry 30% cover 55%;
    }
    .texto-relleno em { color: var(--bordo); }
  }}
@keyframes rellenar { to { color: var(--gris-oscuro); } }

/* Aparicion palabra por palabra (cita) */
.texto-palabras span { display: inline; }
@media (prefers-reduced-motion: no-preference) {
  .texto-palabras span {
    opacity: 0.08;
    transition: opacity 0.55s var(--curva);
    transition-delay: calc(var(--i) * 75ms);
  }
  .texto-palabras.visible span { opacity: 1; }}

/* Anclas: que el header fijo no tape los titulos */
section[id] { scroll-margin-top: 84px; }

/* ============================================================
   Hilo de viaje: linea que se dibuja con el scroll y termina
   trazando el circulo de la cita. Vive entre los fondos y el
   contenido: visible solo sobre crema y sobre la banda bordo.
   ============================================================ */
.contenedor { position: relative; z-index: 2; }
.ejes-escena { z-index: 2; }
.linea-viaje {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  display: none;
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .linea-viaje { display: block; }
    /* la guia del recorrido es invisible (solo mediciones) */
    .linea-viaje .guia { visibility: hidden; }

    /* circulo final: lo traza el destello al pasar, en tres capas de luz */
    .linea-viaje .circulo-trazo {
      fill: none;
      stroke-linecap: round;
      stroke-dasharray: var(--circ);
      stroke-dashoffset: var(--circ);
      /* el trazo del circulo lo controla el JS (dashoffset), sincronizado al cometa */
    }
    .linea-viaje .circulo-halo { stroke: rgba(242, 201, 76, 0.13); stroke-width: 24; }
    .linea-viaje .circulo-medio { stroke: rgba(122, 30, 44, 0.11); stroke-width: 9; }
    .linea-viaje .circulo-fino { stroke: rgba(122, 30, 44, 0.42); stroke-width: 1.8; }

    /* aurora: banda difusa que fluye con el scroll, de lado a lado */
    div.aurora {
      display: block;
      animation: aurora-flujo linear both;
      animation-timeline: scroll(root);
    }

    /* el hero se despide difuminandose al empezar a bajar */
    .hero h1, .hero-bajada, .hero-acciones {
      animation: hero-despedida linear both;
      animation-timeline: scroll(root);
      animation-range: 0px 80vh;
    }

    /* el sol del hero se desarma al bajar: los rayos se dispersan
       escalonados (inline via JS) mientras el conjunto crece y se apaga */
    .rayos-hero {
      animation: desarmar linear both;
      animation-timeline: scroll(root);
      animation-range: 0px 90vh;
    }

    /* estrella fugaz: la cabeza luminosa que arrastra la tela
       (div.estrella gana en especificidad al display:none base) */
    div.estrella-viaje {
      display: block;
      animation: latir 2.4s ease-in-out infinite;
      /* offset-distance / scale / opacity los maneja el JS (sigue al viewport) */
    }
  }}
.rayos line { transform-box: fill-box; transform-origin: center; }
/* Destello: cometa difuso del tono del sol, con cola hacia atras.
   offset-rotate (auto) lo orienta solo en la direccion del viaje. */
.estrella-viaje {
  position: absolute;
  top: 0;
  left: 0;
  width: 360px;
  height: 120px;
  offset-anchor: 80% 50%;
  z-index: 1;
  pointer-events: none;
  display: none;
  background:
    radial-gradient(18% 32% at 76% 50%, rgba(252, 244, 226, 0.48), rgba(242, 201, 76, 0.30) 50%, transparent 95%),
    radial-gradient(32% 52% at 68% 50%, rgba(122, 30, 44, 0.22), transparent 92%),
    radial-gradient(40% 44% at 42% 50%, rgba(122, 30, 44, 0.13), transparent 90%);
  /* mascara: nada de luz llega a los bordes de la caja (sin siluetas) */
  -webkit-mask-image: radial-gradient(50% 50% at 50% 50%, #000 52%, transparent 96%);
  mask-image: radial-gradient(50% 50% at 50% 50%, #000 52%, transparent 96%);
  will-change: offset-distance;
}
@media (max-width: 700px) {
  .estrella-viaje { width: 210px; height: 76px; }}
/* Aurora: dos velos de luz superpuestos, muy desenfocados */
.aurora {
  position: fixed;
  inset: -22vh -28vw;
  z-index: 1;
  pointer-events: none;
  display: none;
}
@media (max-width: 700px) {
  .aurora { inset: -16vh -42vw; }}
/* velos con gradientes elipticos ya difusos: cero filter, cero costo extra */
.aurora::before, .aurora::after {
  content: "";
  position: absolute;
  left: -4%;
  width: 118%;
}
.aurora::before {
  top: 20%;
  height: 26%;
  background:
    radial-gradient(42% 88% at 34% 50%, rgba(122, 30, 44, 0.26), transparent 74%),
    radial-gradient(40% 82% at 64% 50%, rgba(242, 201, 76, 0.22), transparent 72%);
}
.aurora::after {
  top: 48%;
  height: 20%;
  background:
    radial-gradient(46% 90% at 45% 50%, rgba(242, 201, 76, 0.12), transparent 75%),
    radial-gradient(36% 80% at 68% 50%, rgba(0, 181, 176, 0.07), transparent 70%);
}
@keyframes aurora-flujo {
  0% { opacity: 0; transform: translate3d(-8vw, -10vh, 0) rotate(-16deg); }
  10% { opacity: 1; }
  32% { transform: translate3d(9vw, 0vh, 0) rotate(-7deg); }
  56% { transform: translate3d(-11vw, 6vh, 0) rotate(-17deg); }
  82% { transform: translate3d(7vw, 12vh, 0) rotate(-9deg); }
  94% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(-3vw, 16vh, 0) rotate(-13deg); }
}
@keyframes hero-despedida { to { opacity: 0; transform: translateY(-34px); } }
@keyframes viajar { to { offset-distance: 100%; } }
@keyframes desarmar { to { scale: 1.25; opacity: 0; } }
@keyframes latir { 50% { transform: scale(1.12); } }
@keyframes dispersar {
  55% { opacity: 0.9; }
  to { transform: translate(var(--tx), var(--ty)) rotate(14deg); opacity: 0; }
}

/* ============================================================
   Cifras + mapa de particulas del Paraguay
   ============================================================ */
.cifras-titulo {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.15;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  max-width: 20ch;
}
.cifras-grilla {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.cifras-dos { grid-template-columns: 1fr 1fr; }
/* El mapa de particulas se apoya en un panel propio: sin el, las particulas
   flotan sueltas sobre el marfil y el bloque se lee como un hueco. */
.mapa-py {
  position: relative;
  background: var(--blanco);
  border: 1px solid var(--gris-claro);
  border-radius: var(--radio-img);
  padding: clamp(1.4rem, 3vw, 2.4rem) clamp(1.2rem, 2.5vw, 2rem) clamp(1rem, 2vw, 1.4rem);
}
.mapa-py canvas { width: 100%; aspect-ratio: 1 / 1.04; display: block; }
.mapa-py figcaption {
  text-align: center;
  font-size: 0.82rem;
  color: var(--gris-medio);
  margin-top: 0.6rem;
}
@media (max-width: 900px) {
  .cifras-grilla { grid-template-columns: 1fr; }
  .mapa-py { max-width: 26rem; margin-inline: auto; width: 100%; }}

/* ============================================================
   FIX anti-defecto (council): si el JS no corre, NADA queda oculto.
   El JS agrega .js a <html>; sin eso, todo visible.
   ============================================================ */
html:not(.js) .revelar,
html:not(.js) .revelar-imagen,
html:not(.js) .revelar-portada,
html:not(.js) .texto-palabras span,
html:not(.js) .n-card { opacity: 1 !important; transform: none !important; clip-path: none !important; }

/* Red de seguridad para impresión / prerender / lectores: con .js presente pero
   sin scroll (el IntersectionObserver nunca interseca), un reveal dejaría el
   contenido presente-pero-invisible. En print forzamos todo visible. */
@media print {
  .revelar, .revelar-imagen, .revelar-portada, .qh-eje.destape, .texto-palabras span {
    opacity: 1 !important; transform: none !important; clip-path: none !important; visibility: visible !important;
  }
  .qh-port-visor { display: none !important; } /* duplicado decorativo del índice */
}

/* ============================================================
   PORTAL DE NOTICIAS (noticias.html) — motion BAJO
   Reveal aditivo + hover. Sin tilt, sin cometa, sin escena fijada.
   ============================================================ */
.noticias-hero { padding-block: clamp(3rem, 7vw, 5rem) clamp(1.5rem, 3vw, 2.5rem); }
.noticias-hero h1 { max-width: 16ch; }
.noticias-hero p { color: var(--texto-suave); max-width: 52ch; margin-top: 1rem; font-size: 1.1rem; }

/* Barra de filtros por categoría real */
.filtros {
  position: sticky;
  top: 74px;
  z-index: 50;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 1rem 0;
  background: color-mix(in srgb, var(--marfil) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gris-claro);
  margin-bottom: 2.5rem;
}
.filtro {
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.5em 1.1em;
  border-radius: 999px;
  border: 1.5px solid var(--gris-claro);
  background: var(--blanco);
  color: var(--texto-suave);
  cursor: pointer;
  transition: transform 0.2s var(--curva), background-color 0.25s, color 0.25s, border-color 0.25s;
}
.filtro:hover { transform: translateY(-1px); border-color: var(--bordo); color: var(--bordo); }
.filtro.activo { background: var(--bordo); color: var(--blanco); border-color: var(--bordo); }
.filtro .conteo { opacity: 0.6; font-variant-numeric: tabular-nums; }

/* Grilla del portal */
.n-grilla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
@media (max-width: 900px) { .n-grilla { grid-template-columns: 1fr 1fr; }}
@media (max-width: 620px) { .n-grilla { grid-template-columns: 1fr; }}

.n-card {
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border: 1px solid var(--gris-claro);
  border-radius: var(--radio);
  overflow: hidden;
  color: var(--gris-oscuro);
  transition: transform 0.35s var(--curva), box-shadow 0.35s;
}
.n-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(122, 30, 44, 0.1); }
.n-card-media { overflow: hidden; aspect-ratio: 16 / 10; background: var(--gris-claro); }
.n-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--curva); }
.n-card:hover .n-card-media img { transform: scale(1.04); }
.n-card-cuerpo { padding: 1.2rem 1.35rem 1.5rem; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.n-card-meta { display: flex; align-items: center; gap: 0.7rem; }
.n-card-titulo { font-family: var(--serif); font-weight: 600; font-size: 1.18rem; line-height: 1.3; }
.n-card-diocesis {
  margin-top: 0.5rem; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.02em; color: var(--bordo); opacity: 0.85;
}
.n-card-extracto { font-size: var(--t-chico); color: var(--texto-suave); line-height: 1.55; margin-top: auto; }

/* reveal aditivo escalonado (bajo) */
@media (prefers-reduced-motion: no-preference) {
  .js .n-card { opacity: 0; transform: translateY(20px); transition: opacity 0.5s var(--curva), transform 0.5s var(--curva); }
  .js .n-card.visible { opacity: 1; transform: none; }}

.sin-resultados { text-align: center; color: var(--texto-suave); padding: 3rem 0; display: none; }

/* Paginación */
.paginacion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  flex-wrap: wrap;
}
.paginacion a, .paginacion span {
  min-width: 2.6rem;
  height: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--gris-oscuro);
  border: 1.5px solid transparent;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
  cursor: pointer;
}
.paginacion a:hover { border-color: var(--bordo); color: var(--bordo); }
.paginacion .actual { background: var(--bordo); color: var(--blanco); }
.paginacion .puntos { border: none; cursor: default; color: var(--gris-medio); }
.paginacion .flecha-pag { font-size: 1.1rem; }

/* ============================================================
   NOTICIA INDIVIDUAL (noticia.html) — motion MÍNIMO, máxima lectura
   ============================================================ */
.articulo { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 7vw, 5rem); }
.articulo-cabecera { max-width: 46rem; margin-inline: auto; text-align: center; }
.articulo-migas { font-size: var(--t-chico); color: var(--texto-suave); margin-bottom: 1.3rem; }
.articulo-migas a { color: var(--texto-suave); }
.articulo-migas a:hover { color: var(--bordo); }
.articulo h1 {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-top: 0.9rem;
}
.articulo-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 1.3rem;
  color: var(--texto-suave);
  font-size: var(--t-chico);
}
.articulo-figura {
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  max-width: 60rem;
  border-radius: var(--radio-img);
  overflow: hidden;
}
.articulo-figura img { width: 100%; height: clamp(240px, 42vw, 460px); object-fit: cover; }
.articulo-cuerpo {
  max-width: 40rem;   /* medida de lectura ~68ch */
  margin: clamp(2.2rem, 5vw, 3.2rem) auto 0;
  font-size: 1.15rem;
  line-height: 1.75;
  color: var(--gris-oscuro);
}
.articulo-cuerpo p { margin-bottom: 1.4rem; }
.articulo-cuerpo p:first-of-type::first-letter {
  font-family: var(--serif);
  font-size: 3.4em;
  float: left;
  line-height: 0.82;
  padding: 0.04em 0.12em 0 0;
  color: var(--bordo);
}
.articulo-pie {
  max-width: 40rem;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  padding-top: 1.6rem;
  border-top: 1px solid var(--gris-claro);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.compartir { display: flex; align-items: center; gap: 0.6rem; }
.compartir span { font-size: var(--t-chico); color: var(--texto-suave); }
.compartir a {
  width: 2.4rem; height: 2.4rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1.5px solid var(--gris-claro);
  color: var(--bordo);
  font-weight: 700;
  transition: transform 0.2s var(--curva), background-color 0.25s, color 0.25s, border-color 0.25s;
}
.compartir a:hover { transform: translateY(-2px); background: var(--bordo); color: var(--blanco); border-color: var(--bordo); }

/* Relacionadas */
.relacionadas { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.relacionadas h2 { font-size: var(--t-h3); font-family: var(--serif); margin-bottom: 1.8rem; }
.relacionadas .n-grilla { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 780px) { .relacionadas .n-grilla { grid-template-columns: 1fr; }}

/* ============================================================
   ARCHIVO DE CATEGORÍA DESTACADA (categoria.html)
   UN SOLO MOLDE data-driven: nombre, descripción, color e imagen
   salen de la categoría. El mismo template sirve a cualquiera.
   ============================================================ */

/* El header usa su tratamiento normal (texto oscuro sobre marfil / crema al
   scrollear). El hero sticky queda debajo del header, no detrás, así que NO se
   fuerza texto blanco: eso dejaba el nav ilegible sobre el fondo marfil. */

/* Hero premium: foto a sangre con velo tintado del color de la categoría */
.cat-hero {
  --c: var(--bordo);
  position: relative;
  min-height: clamp(30rem, 62vh, 40rem);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  /* respaldo oscuro: si la imagen no carga, el hero (y el nav blanco) siguen legibles */
  background-color: #1f1216;
}
/* Variante sin foto: el molde en bordó plano. La usa Salvaguardia, donde una
   imagen decorativa restaría seriedad y no hay ninguna honesta que poner. */
.cat-hero-solido { background-color: var(--bordo); }
/* los correos largos partían el ancho del teléfono (413 px en una pantalla de 375) */
.articulo-cuerpo a[href^="mailto"] { overflow-wrap: anywhere; }
.cat-hero-media { position: absolute; inset: 0; z-index: -2; }
.cat-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.cat-hero-velo {
  position: absolute; inset: 0; z-index: -1;
  background:
    /* leve vignette arriba (el nav ya va sobre marfil, no hace falta más) */
    linear-gradient(to bottom, rgba(18, 10, 12, 0.4) 0%, transparent 22%),
    linear-gradient(to top,
      color-mix(in srgb, var(--c) 74%, #120a0c) 2%,
      color-mix(in srgb, var(--c) 32%, transparent) 48%,
      rgba(18, 10, 12, 0.3) 100%);
  transition: background 0.5s var(--curva);
}
.cat-hero-inner { color: var(--blanco); padding-block: clamp(3rem, 8vw, 5.5rem); position: relative; }
.cat-hero-inner .articulo-migas { color: rgba(255, 255, 255, 0.75); margin-bottom: 1rem; }
.cat-hero-inner .articulo-migas a { color: rgba(255, 255, 255, 0.75); }
.cat-hero-inner .articulo-migas a:hover { color: var(--blanco); }
.cat-hero .chip { background: rgba(255, 255, 255, 0.18); color: var(--blanco); }
.cat-hero h1 { color: var(--blanco); font-size: clamp(2.4rem, 5.4vw, 4.1rem); max-width: 17ch; margin-top: 1rem; }
.cat-hero-intro { color: rgba(255, 255, 255, 0.9); max-width: 54ch; font-size: clamp(1.05rem, 1.5vw, 1.25rem); margin-top: 1.1rem; }
.cat-hero-meta { margin-top: 1.5rem; font-size: 0.88rem; color: rgba(255, 255, 255, 0.8); display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.cat-hero-meta .punto { width: 4px; height: 4px; border-radius: 999px; background: currentColor; opacity: 0.6; }

/* Sub-barra: enlace al portal con el filtro puesto (deep-link) */
.cat-sub { border-bottom: 1px solid var(--gris-claro); background: var(--marfil); }
.cat-sub .contenedor { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.1rem; flex-wrap: wrap; }
.cat-sub-txt { font-size: var(--t-chico); color: var(--texto-suave); }

/* Banda "detrás de escena": el mock del formulario que llena el equipo */
.tras-escena { background: var(--blanco); border-top: 1px solid var(--gris-claro); }
.tras-escena .contenedor { padding-block: clamp(2.8rem, 6vw, 4.5rem); }
.tras-escena-cabecera { max-width: 62ch; margin-bottom: clamp(1.8rem, 4vw, 2.6rem); }
.tras-escena-cabecera .chip { margin-bottom: 1rem; }
.tras-escena h2 { font-size: var(--t-h2); }
.tras-escena-cabecera p { color: var(--texto-suave); margin-top: 0.9rem; max-width: 58ch; }
.tras-escena-grilla { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(1.8rem, 4vw, 3.2rem); align-items: center; }
@media (max-width: 820px) { .tras-escena-grilla { grid-template-columns: 1fr; }}

.admin-mock { border: 1px solid var(--gris-claro); border-radius: var(--radio); overflow: hidden; background: var(--marfil); box-shadow: 0 20px 45px rgba(23, 9, 13, 0.08); }
.admin-mock-barra { background: #1d2327; color: #dcdcde; font-size: 0.82rem; font-weight: 600; padding: 0.65rem 1.1rem; display: flex; align-items: center; gap: 0.55rem; }
.admin-mock-barra::before { content: ""; width: 14px; height: 14px; border-radius: 3px; background: #2271b1; display: inline-block; }
.admin-campos { padding: 1.5rem 1.6rem; display: grid; gap: 1.2rem; }
.admin-campos label { display: block; font-size: 0.74rem; font-weight: 700; color: var(--texto-suave); text-transform: uppercase; letter-spacing: 0.04em; }
.admin-campos input, .admin-campos textarea {
  display: block; width: 100%; margin-top: 0.45rem;
  font-family: var(--sans); font-size: 0.95rem; font-weight: 400; color: var(--gris-oscuro);
  text-transform: none; letter-spacing: normal;
  padding: 0.6rem 0.75rem; border: 1px solid var(--gris-claro); border-radius: 8px; background: var(--blanco);
}
.admin-campos textarea { resize: none; min-height: 4.6rem; line-height: 1.5; }
.admin-valor { display: inline-flex; align-items: center; gap: 0.7rem; margin-top: 0.45rem; font-weight: 400; text-transform: none; letter-spacing: normal; font-size: 0.95rem; color: var(--gris-oscuro); }
.admin-valor i { width: 1.5rem; height: 1.5rem; border-radius: 6px; border: 1px solid rgba(0, 0, 0, 0.12); flex: none; }
.admin-valor img { width: 3.2rem; height: 3.2rem; object-fit: cover; border-radius: 8px; flex: none; }
.admin-valor .admin-arch { color: var(--texto-suave); font-size: 0.88rem; word-break: break-all; }

.admin-lista { list-style: none; display: grid; gap: 0.85rem; margin-bottom: 1.6rem; }
.admin-lista li { display: flex; gap: 0.7rem; font-size: 0.98rem; color: var(--gris-oscuro); line-height: 1.5; }
.admin-lista li::before { content: "auto"; flex: none; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.03em; color: var(--eje-casa-comun); background: color-mix(in srgb, var(--eje-casa-comun) 14%, var(--blanco)); padding: 0.15rem 0.5rem; border-radius: 999px; height: fit-content; margin-top: 0.15rem; }
.admin-cierre { color: var(--texto-suave); font-size: var(--t-chico); font-style: italic; }

/* Barra de demostración fija abajo (NO es parte del sitio real) */
body.cat-page { padding-bottom: 5.5rem; }
.demo-barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 300; background: #1b0c10; border-top: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.28); }
.demo-barra-inner { max-width: var(--ancho); margin-inline: auto; padding: 0.7rem var(--pad-x); display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.demo-nota { font-size: 0.8rem; color: rgba(250, 246, 240, 0.6); white-space: nowrap; }
.demo-nota strong { color: var(--dorado-claro); font-weight: 650; }
.demo-cats { display: flex; gap: 0.4rem; flex-wrap: wrap; flex: 1; }
.demo-cats button {
  font-family: var(--sans); font-size: 0.82rem; font-weight: 600;
  padding: 0.42em 1em; border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.2); background: transparent; color: rgba(250, 246, 240, 0.82);
  cursor: pointer; transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.demo-cats button:hover { border-color: rgba(255, 255, 255, 0.55); color: var(--blanco); }
.demo-cats button.activo { background: var(--dorado-claro); border-color: var(--dorado-claro); color: #3a2a06; }
.demo-toggle { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: rgba(250, 246, 240, 0.72); cursor: pointer; user-select: none; white-space: nowrap; }
.demo-toggle input { accent-color: var(--dorado-claro); width: 1rem; height: 1rem; }
@media (max-width: 720px) { .demo-nota { display: none; } .demo-barra-inner { gap: 0.6rem; } body.cat-page { padding-bottom: 9rem; }}

/* Toggle "ver los campos": marca en el hero qué parte sale de qué campo */
.campo-imagen-nota {
  position: absolute; top: 1.1rem; right: 1.1rem; z-index: 3; display: none;
  font-family: var(--sans); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em;
  background: var(--dorado-claro); color: #3a2a06; padding: 0.2rem 0.7rem; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.mostrar-campos .campo-imagen-nota { display: inline-flex; }
.mostrar-campos .cat-hero [data-campo] { position: relative; outline: 1.6px dashed rgba(255, 255, 255, 0.92); outline-offset: 7px; border-radius: 3px; }
.mostrar-campos .cat-hero [data-campo]::after {
  content: attr(data-campo);
  position: absolute; left: 0; top: 0; transform: translateY(-145%);
  font-family: var(--sans); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em;
  background: var(--dorado-claro); color: #3a2a06; padding: 0.12rem 0.55rem; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.mostrar-campos .admin-campos label { outline: 1.6px dashed var(--eje-fortalecimiento); outline-offset: 5px; border-radius: 8px; }

/* ============================================================
   INICIO · Últimas noticias (titulares) + Explorá por tema
   ============================================================ */
.ultimas { margin-top: clamp(2.6rem, 5vw, 3.6rem); border-top: 1px solid var(--gris-claro); padding-top: clamp(1.6rem, 3vw, 2.2rem); }
.ultimas-titulo { font-family: var(--sans); font-weight: 700; font-size: 0.98rem; color: var(--gris-oscuro); margin-bottom: 0.7rem; }
.ultimas-titulo .apunte { color: var(--texto-suave); font-weight: 500; }
.ultimas-lista { list-style: none; }
.ultima-fila a {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1.1rem;
  padding: 0.85rem 0.4rem; border-bottom: 1px solid var(--gris-claro); color: var(--gris-oscuro);
  transition: background-color 0.25s;
}
.ultima-fila a:hover { background: var(--blanco); }
.ultima-thumb { width: 92px; height: 64px; border-radius: 8px; overflow: hidden; background: var(--gris-claro); flex: none; }
.ultima-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--curva); }
.ultima-fila a:hover .ultima-thumb img { transform: scale(1.06); }
.ultima-cuerpo { min-width: 0; }
.ultima-meta { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.35rem; }
.ultima-titulo { font-family: var(--serif); font-weight: 600; font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.3; transition: color 0.25s; }
.ultima-fila a:hover .ultima-titulo { color: var(--bordo); }
.ultima-fecha { font-size: 0.8rem; color: var(--texto-suave); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ultimas-pie { text-align: center; margin-top: clamp(1.8rem, 4vw, 2.6rem); }
@media (max-width: 500px) { .ultima-thumb { width: 74px; height: 54px; }}

/* Temas: mosaicos con foto tintada en el color del tema (pedido de Rocío:
   "botones por color, con imagen, más grandes"). Texto blanco sobre banda
   fuerte del color -> contraste AA en todos. */
.temas-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
@media (max-width: 900px) { .temas-tiles { grid-template-columns: 1fr 1fr; }}
@media (max-width: 520px) { .temas-tiles { grid-template-columns: 1fr; }}
.tema-tile {
  --c: var(--bordo);
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radio); aspect-ratio: 4 / 3.5;
  color: var(--blanco); text-decoration: none;
  isolation: isolate; background: #1e0d12;
}
.tema-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.1s var(--curva); }
.tema-tile:hover img { transform: scale(1.06); }
.tt-velo {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--c) 90%, #0f090b) 0%,
    color-mix(in srgb, var(--c) 46%, transparent) 46%,
    rgba(15, 8, 10, 0.22) 100%);
  transition: opacity 0.4s var(--curva);
}
.tema-tile:hover .tt-velo { opacity: 0.9; }
.tt-cont { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(1.1rem, 2vw, 1.6rem); display: flex; flex-direction: column; gap: 0.5rem; }
.tt-nombre { font-family: var(--serif); font-weight: 600; font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.2; text-wrap: balance; }
.tt-meta { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: rgba(255, 255, 255, 0.92); }
.tt-n { font-weight: 700; font-variant-numeric: tabular-nums; }
.tt-meta svg { width: 1em; height: 1em; transition: transform 0.3s var(--curva); }
.tema-tile:hover .tt-meta svg { transform: translateX(4px); }

/* ============================================================
   FIRMA A · Luz que sigue el cursor (profundidad tipo espacial)
   El JS setea --sx/--sy con la posición del puntero dentro del
   elemento; la luz cálida aparece solo al pasar. Liviano: opacity.
   ============================================================ */
.tarjeta, .n-card { position: relative; }
.tarjeta::after, .n-card::after, .hero-figura::after {
  content: "";
  position: absolute; inset: 0; z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.4s var(--curva);
}
.tarjeta::after, .n-card::after {
  background: radial-gradient(240px circle at var(--sx, 50%) var(--sy, 50%), rgba(242, 201, 76, 0.22), rgba(122, 30, 44, 0.05) 40%, transparent 55%);
}
.hero-figura { position: relative; }
.hero-figura::after {
  background: radial-gradient(460px circle at var(--sx, 50%) var(--sy, 30%), rgba(255, 249, 232, 0.28), rgba(242, 201, 76, 0.1) 34%, transparent 60%);
}
.tarjeta:hover::after, .n-card:hover::after, .hero-figura:hover::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .tarjeta::after, .n-card::after, .hero-figura::after { display: none; }}

/* ============================================================
   FIRMA B · Sello de marca (roundel Cáritas) como motivo vivo
   Watermark grande y tenue que deriva y rota con el scroll.
   Se apaga en reduced-motion (queda estático y sutil).
   ============================================================ */
.manifiesto { position: relative; overflow: hidden; }
.manifiesto .contenedor { position: relative; z-index: 1; }
.sello-marca {
  position: absolute; top: 50%; left: 50%;
  width: min(46vw, 480px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 0; pointer-events: none;
  opacity: 0.06;
}
.sello-marca img { width: 100%; height: 100%; object-fit: contain; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .sello-marca img {
      animation: sello-deriva linear both;
      animation-timeline: view();
    }
  }}
@keyframes sello-deriva {
  from { transform: rotate(-9deg) scale(0.9); }
  to { transform: rotate(9deg) scale(1.08); }
}

/* ============================================================
   Mega-menú de Noticias (navegación rápida por categoría)
   ============================================================ */
.nav-drop { position: relative; display: inline-flex; align-items: center; }
.nav-panel {
  position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content; /* el panel abraza el contenido: sin vacío a la derecha */
  background: var(--blanco);
  border: 1px solid var(--gris-claro);
  border-radius: 14px;
  box-shadow: 0 14px 34px -10px rgba(74, 15, 25, 0.22);
  padding: 0.65rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.16s ease-out, transform 0.16s ease-out, visibility 0s linear 0.16s;
  z-index: 120;
}
/* puente invisible: cubre el hueco entre el disparador y el panel para no perder el hover */
.nav-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.nav-drop:hover .nav-panel, .nav-drop:focus-within .nav-panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.16s ease-out, transform 0.16s ease-out, visibility 0s;
}
/* cierre por Escape: gana sobre hover/focus-within (misma especificidad, va después) */
.nav-drop.cerrado .nav-panel { opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%) translateY(4px); }

.nav-panel { display: grid; gap: 0.2rem; }
.nav-panel a { display: block; padding: 0.78rem 3.2rem 0.78rem 1.15rem; border-radius: 10px; font-size: 1rem; font-weight: 500; white-space: nowrap; }
.nav-panel a::after { content: none; }
.nav-panel a:hover { background: var(--marfil); }
/* color explícito en el nombre: no hereda el blanco del header transparente sobre el hero */
.nav-cat-t { color: var(--gris-oscuro); transition: color 0.15s ease; }
.nav-panel a:hover .nav-cat-t { color: var(--bordo); }
/* "Todas las noticias" se distingue solo por peso y un poco más de aire (sin filete) */
.nav-todas { font-weight: 650; margin-bottom: 0.3rem; }

/* reduced-motion: solo fundido */
@media (prefers-reduced-motion: reduce) {
  .nav-panel,
  .nav-drop:hover .nav-panel,
  .nav-drop:focus-within .nav-panel,
  .nav-drop.cerrado .nav-panel { transform: translateX(-50%); transition: opacity 0.15s linear, visibility 0s; }}

/* ============================================================
   PÁGINA · Quiénes somos
   ============================================================ */
.qs-hero { position: relative; overflow: hidden; padding-top: clamp(3rem, 7vw, 5.5rem); }
.qs-hero-grilla { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.qs-ojo { color: var(--bordo); font-weight: 650; font-size: 0.95rem; margin-bottom: 1rem; }
.qs-hero-texto h1 { max-width: 15ch; }
.qs-hero-texto p { margin-top: 1.3rem; max-width: 52ch; font-size: 1.08rem; }
/* La foto se ve ENTERA (pedido del cliente, doc del 20-ago: "corregir de manera
   que aparezcan todas las personas"). Estaba metida a la fuerza en una caja casi
   cuadrada con object-fit:cover, y como la foto es apaisada 3:2 perdía un 35%
   del ancho: la gente de los extremos quedaba fuera. Sin proporción fija, se
   muestra como es. */
.qs-hero-figura { border-radius: var(--radio-img); overflow: hidden; }
.qs-hero-figura img { width: 100%; height: auto; display: block; }
@media (max-width: 860px) {
  .qs-hero-grilla { grid-template-columns: 1fr; }
  .qs-hero-figura { order: -1; }}

/* Misión / Visión / Objetivo: tres declaraciones (no tarjetas idénticas) */
.qs-decl { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 4vw, 3rem); }
.qs-decl-item { position: relative; border-top: 2px solid var(--gris-claro); padding-top: 1.3rem; transition: transform 0.35s var(--curva); }
/* el acento bordó se dibuja al pasar el mouse (no estático) */
.qs-decl-item::before { content: ""; position: absolute; top: -2px; left: 0; right: 0; height: 2px; background: var(--bordo); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--curva); }
.qs-decl-item:hover, .qs-decl-item:focus-within { transform: translateY(-4px); }
.qs-decl-item:hover::before, .qs-decl-item:focus-within::before { transform: scaleX(1); }
.qs-decl-item h2 { font-size: 1.15rem; font-family: var(--sans); font-weight: 700; color: var(--bordo); margin-bottom: 0.9rem; }
.qs-decl-item p { font-family: var(--serif); font-weight: 500; font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.5; color: var(--gris-oscuro); }
@media (max-width: 820px) { .qs-decl { grid-template-columns: 1fr; }}

/* Historia: línea de tiempo */
.qs-historia { list-style: none; }
.hito { display: grid; grid-template-columns: 7rem minmax(0, 1fr) 17rem; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; padding-block: clamp(1.8rem, 4vw, 2.6rem); border-top: 1px solid var(--gris-claro); }
.hito-año { font-family: var(--serif); font-weight: 600; font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--bordo); line-height: 1; }
.hito-cuerpo h3 { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; margin-bottom: 0.6rem; }
.hito-cuerpo p { color: var(--texto-suave); max-width: 60ch; }
.hito-foto { border-radius: var(--radio-img); overflow: hidden; align-self: stretch; }
.hito-foto img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
@media (max-width: 780px) {
  .hito { grid-template-columns: 1fr; gap: 0.9rem; }
  .hito-foto { order: 3; }
  .hito-foto img { aspect-ratio: 16 / 8; }}

/* ============================================================
   Hover premium de fotos-showcase (historia + portada de equipo)
   El momento "cobra vida": se eleva con sombra tintada en bordó,
   la imagen hace un zoom suave con más brillo, y un destello de luz
   la recorre una sola vez. Motion motivado = feedback + heritage.
   ============================================================ */
.hito-foto, .qs-equipo-portada { position: relative; isolation: isolate; transition: transform 0.5s var(--curva), box-shadow 0.5s var(--curva); }
.hito-foto img, .qs-equipo-portada img { transition: transform 0.6s var(--curva), filter 0.6s var(--curva); }
.hito-foto::after, .qs-equipo-portada::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 34%, rgba(255, 255, 255, 0.28) 48%, transparent 62%);
  transform: translateX(-120%);
}
@media (hover: hover) {
  .hito-foto:hover, .qs-equipo-portada:hover { transform: translateY(-5px); box-shadow: 0 26px 55px -20px rgba(122, 30, 44, 0.42); }
  .hito-foto:hover img, .qs-equipo-portada:hover img { transform: scale(1.055); filter: saturate(1.06) brightness(1.035); }
  .hito-foto:hover::after, .qs-equipo-portada:hover::after { animation: foto-destello 0.9s var(--curva); }}
@keyframes foto-destello {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
  .hito-foto, .qs-equipo-portada, .hito-foto img, .qs-equipo-portada img { transition: box-shadow 0.3s ease, filter 0.3s ease; }
  .hito-foto:hover, .qs-equipo-portada:hover { transform: none; box-shadow: 0 16px 36px -18px rgba(122, 30, 44, 0.4); }
  .hito-foto:hover img, .qs-equipo-portada:hover img { transform: none; filter: saturate(1.05) brightness(1.03); }
  .hito-foto::after, .qs-equipo-portada::after { display: none; }}

/* Cómo nos organizamos (con red de nodos animada de fondo) */
.qs-org-sec { position: relative; overflow: hidden; }
.qs-org-fondo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
/* velo para asegurar lectura del texto sobre la red */
.qs-org-sec::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 90% at 30% 50%, var(--marfil) 22%, transparent 70%); }
.qs-org-grilla { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4rem); align-items: stretch; }
.qs-org-izq { display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 2.4rem); }
.qs-org-3d { position: relative; flex: 1 1 auto; min-height: 300px; margin: 0; }
.qs-org-3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.qs-org-intro p { margin-top: 1rem; }
@media (max-width: 820px) { .qs-org-3d { min-height: 240px; }}
.qs-org { list-style: none; border-top: 1px solid var(--gris-claro); }
.qs-org li { padding-block: 1.3rem; border-bottom: 1px solid var(--gris-claro); }
.qs-org h3 { font-family: var(--serif); font-weight: 600; font-size: 1.2rem; }
.qs-org p { color: var(--texto-suave); font-size: var(--t-chico); margin-top: 0.35rem; max-width: 52ch; }
@media (max-width: 820px) { .qs-org-grilla { grid-template-columns: 1fr; }}

/* Cáritas Internationalis (sección bordó) */
.qs-caritas { background: var(--bordo); color: var(--marfil); }
.qs-caritas h2 { color: var(--blanco); }
.qs-caritas-cab { max-width: 62ch; margin-bottom: clamp(2.2rem, 5vw, 3.2rem); }
.qs-caritas-cab p { color: rgba(250, 246, 240, 0.85); margin-top: 1.1rem; }
.qs-caritas-grilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
.qs-red { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radio); padding: 1.8rem 1.6rem; }
.qs-red img { height: 64px; width: auto; margin-bottom: 1.2rem; background: var(--blanco); padding: 0.45rem 0.6rem; border-radius: 8px; box-sizing: content-box; }
.qs-red-num { font-family: var(--serif); font-weight: 600; font-size: clamp(2.4rem, 4vw, 3.2rem); color: var(--dorado-claro); line-height: 1; font-variant-numeric: tabular-nums; }
.qs-red-rol { font-weight: 650; margin-top: 0.5rem; color: var(--blanco); }
.qs-red-txt { color: rgba(250, 246, 240, 0.8); font-size: var(--t-chico); margin-top: 0.4rem; }
.qs-caritas-acciones { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: clamp(2rem, 4vw, 2.8rem); }
@media (max-width: 820px) { .qs-caritas-grilla { grid-template-columns: 1fr; }}

/* Equipo */
/* foto grupal de portada del equipo */
.qs-equipo-portada { margin: clamp(1.6rem, 3vw, 2.4rem) 0 clamp(2.2rem, 4.5vw, 3.4rem); border-radius: calc(var(--radio) + 4px); overflow: hidden; aspect-ratio: 16 / 7; background: color-mix(in srgb, var(--bordo) 9%, var(--marfil)); }
.qs-equipo-portada img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* grupos del equipo: título + grilla de retratos, lenguaje editorial (sin cards) */
.qs-equipo-grupo + .qs-equipo-grupo { margin-top: clamp(2.4rem, 5vw, 3.8rem); }
.qs-equipo-titulo { font-family: var(--serif); font-weight: 600; font-size: 1.32rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--gris-claro); }
.qs-equipo-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: clamp(1.3rem, 2.6vw, 2.2rem) clamp(1.1rem, 2.2vw, 1.8rem); margin-top: 1.6rem; }
.miembro { display: flex; flex-direction: column; }
.miembro-foto { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radio); overflow: hidden; background: color-mix(in srgb, var(--bordo) 9%, var(--marfil)); }
.miembro-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; transition: transform 0.55s var(--curva); }
.miembro:hover .miembro-foto img { transform: scale(1.045); }
.miembro-foto-mono { display: flex; align-items: center; justify-content: center; }
.miembro-foto-mono span { font-family: var(--serif); font-weight: 600; font-size: 2rem; color: var(--bordo); opacity: 0.72; }
.miembro-n { font-family: var(--sans); font-weight: 650; font-size: 0.97rem; line-height: 1.25; margin-top: 0.8rem; }
.miembro-r { color: var(--texto-suave); font-size: var(--t-chico); margin-top: 0.15rem; }

/* coordinaciones: solo nombres (decisión 15-jul), pero con monograma refinado +
   hover que lo llena en bordó. Jerarquía: foto para la cúpula, iniciales para la red. */
.qs-nombres { list-style: none; margin-top: 1.7rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.15rem clamp(1.6rem, 3.2vw, 3.2rem); }
.coord { display: flex; align-items: center; gap: 0.85rem; padding: 0.72rem 0.25rem; border-bottom: 1px solid var(--gris-claro); }
.coord-mono {
  flex: none; width: 2.45rem; height: 2.45rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.01em;
  color: var(--bordo); background: color-mix(in srgb, var(--bordo) 11%, var(--marfil));
  transition: background-color 0.35s var(--curva), color 0.35s var(--curva), transform 0.35s var(--curva);
}
.coord:hover .coord-mono { background: var(--bordo); color: var(--marfil); transform: scale(1.07); }
.coord-txt { min-width: 0; }
.coord .n { display: block; font-weight: 600; font-size: 0.96rem; transition: color 0.25s ease; }
.coord:hover .n { color: var(--bordo); }
.coord .d { display: block; color: var(--texto-suave); font-size: var(--t-chico); margin-top: 0.08rem; }
@media (prefers-reduced-motion: reduce) { .coord:hover .coord-mono { transform: none; }}

/* ============================================================
   PÁGINA · Qué hacemos
   ============================================================ */
/* Hero sobre marfil: los caminos de los 5 ejes (sendas curvas de color)
   fluyen por el lienzo y convergen en un pequeño sol bordó (la misión). */
.qh-hero {
  position: relative;
  min-height: clamp(540px, 82svh, 800px);
  display: flex; align-items: center;
  overflow: hidden;
}
.qh-hero canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; }
.qh-hero .contenedor { position: relative; z-index: 1; }
.qh-hero-texto { max-width: 40rem; padding-block: clamp(2.5rem, 7vh, 5rem); }
.qh-hero-texto h1 { max-width: 16ch; }
.qh-hero-texto p { margin-top: 1.3rem; max-width: 48ch; font-size: clamp(1.05rem, 1.5vw, 1.18rem); }
.qh-hero-texto .hero-acciones { margin-top: 2.2rem; display: flex; gap: 1rem; flex-wrap: wrap; }
@media (max-width: 860px) {
  .qh-hero { align-items: flex-start; min-height: 92svh; }
  .qh-hero-texto { padding-block: clamp(2rem, 5vh, 3rem); }}

/* Cinco ejes: mosaicos verticales con foto real y lavado del color del eje.
   Mismo lenguaje que "Explorá por tema" (color como acento fotográfico, no bloque plano). */
.qh-ejes { list-style: none; display: flex; gap: clamp(0.8rem, 1.4vw, 1.2rem); height: clamp(340px, 36vw, 480px); }
.qh-eje {
  --c: var(--bordo);
  position: relative; overflow: hidden;
  flex: 1 1 0; min-width: 0;
  border-radius: var(--radio);
  color: var(--blanco); isolation: isolate; background: #1e0d12;
}
.qh-eje img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.1s var(--curva); }
.qh-eje:hover img { transform: scale(1.05); }
/* acordeón: el eje que mirás se abre, los demás ceden (solo desktop con puntero fino) */
@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
  .qh-eje { transition: flex-grow 0.6s var(--curva); }
  .qh-eje:hover, .qh-eje:focus-within { flex-grow: 1.55; }}
/* reveal de cortina: cada mosaico se descubre de abajo hacia arriba y la foto se asienta.
   La clase es .destape (no .revelar, y ojo: .cortina ya es el overlay de apertura):
   el destape lo dispara el observer del CONTENEDOR, porque un elemento clipeado
   al 100% tiene interseccion cero y su propio observer jamas dispararia. */
@media (prefers-reduced-motion: no-preference) {
  html.js .qh-eje.destape:not(.visible) { clip-path: inset(100% 0 0 0); }
  html.js .qh-eje.destape:not(.visible) img { transform: scale(1.14); }
  .qh-eje.destape.visible { animation: qh-cortina 0.95s var(--curva) var(--d, 0s) backwards; }
  .qh-eje.destape.visible img { animation: qh-asentar 1.5s var(--curva) var(--d, 0s) backwards; }}
@keyframes qh-cortina { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes qh-asentar { from { transform: scale(1.14); } to { transform: scale(1); } }
.qh-eje-velo {
  position: absolute; inset: 0; z-index: -1;
  /* piso oscuro bajo el texto (legibilidad AA) + color del eje brillando en la banda media */
  background:
    linear-gradient(to top, rgba(10, 6, 8, 0.94) 0%, rgba(10, 6, 8, 0.62) 30%, rgba(10, 6, 8, 0) 58%),
    linear-gradient(to top, color-mix(in srgb, var(--c) 76%, transparent) 6%, color-mix(in srgb, var(--c) 40%, transparent) 50%, transparent 84%);
}
.qh-eje-cont { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(0.9rem, 1.5vw, 1.3rem); display: flex; flex-direction: column; gap: 0.4rem; }
.qh-eje-n { font-family: var(--serif); font-weight: 600; font-size: clamp(1rem, 1.25vw, 1.24rem); line-height: 1.18; text-wrap: balance; }
.qh-eje-foco { font-size: 0.82rem; line-height: 1.4; color: rgba(255, 255, 255, 0.9); }
@media (max-width: 900px) {
  .qh-ejes { height: auto; gap: 0.9rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 0.6rem; scrollbar-width: thin; }
  .qh-eje { flex: 0 0 62%; aspect-ratio: 3 / 4; scroll-snap-align: start; }}
@media (max-width: 560px) { .qh-eje { flex-basis: 78%; }}

/* Proyectos: ÍNDICE + VISOR VIVO (portada del portafolio de mini-páginas).
   Filas-link editoriales a la izquierda; visor sticky a la derecha con la
   identidad del proyecto activo (foto lavada en su color, como los mosaicos). */
.qh-port { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.qh-port-lista { border-top: 1px solid var(--gris-claro); }
.qh-fila {
  --c: var(--bordo);
  display: block;
  padding: clamp(0.95rem, 1.6vw, 1.25rem) clamp(0.7rem, 1.4vw, 1.1rem);
  border-bottom: 1px solid var(--gris-claro);
  color: inherit;
  transition: background 0.35s var(--curva);
}
.qh-fila:hover, .qh-fila.activo { background: color-mix(in srgb, var(--c) 7%, transparent); }
.qh-fila:focus-visible { outline: 2px solid var(--bordo); outline-offset: -2px; border-radius: 8px; }
.qh-fila-meta { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.qh-fila-coop { font-size: 0.78rem; color: var(--texto-suave); }
.qh-fila-n { display: block; font-family: var(--serif); font-weight: 600; font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.25; text-wrap: balance; }

.qh-port-visor {
  position: sticky; top: 96px;
  height: min(560px, calc(100svh - 130px));
  border-radius: var(--radio); overflow: hidden;
  isolation: isolate; background: #1e0d12;
}
.qh-visor-p { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 0.6s var(--curva); }
.qh-visor-p.activo { opacity: 1; pointer-events: auto; }
.qh-visor-p img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.06); }
.qh-visor-p.activo img { transform: scale(1); transition: transform 5.5s var(--curva); }
.qh-visor-velo {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(10, 6, 8, 0.95) 0%, rgba(10, 6, 8, 0.74) 34%, rgba(10, 6, 8, 0.3) 58%, rgba(10, 6, 8, 0) 74%),
    linear-gradient(to top, color-mix(in srgb, var(--c) 74%, transparent) 6%, color-mix(in srgb, var(--c) 38%, transparent) 50%, transparent 84%);
}
.qh-visor-cont {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(1.2rem, 2.2vw, 1.9rem);
  color: var(--blanco);
  display: flex; flex-direction: column; gap: 0.55rem;
}
.qh-visor-coop { font-size: 0.8rem; color: rgba(255, 255, 255, 0.88); }
/* color explícito: la regla global de h3 (gris oscuro) pisa la herencia del blanco */
.qh-visor-n { font-family: var(--serif); font-weight: 600; font-size: clamp(1.35rem, 2vw, 1.8rem); line-height: 1.18; text-wrap: balance; color: var(--blanco); }
.qh-visor-d { font-size: 0.92rem; line-height: 1.5; color: rgba(255, 255, 255, 0.88); max-width: 52ch; }
.qh-visor-cont .btn { align-self: flex-start; margin-top: 0.5rem; }
@media (max-width: 900px) {
  .qh-port { grid-template-columns: 1fr; }
  .qh-port-visor { display: none; }}

/* Campañas */
.qh-campanias { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3.2rem); }
.qh-campania h3 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
.qh-campania p { color: var(--texto-suave); margin-top: 0.7rem; max-width: 52ch; }
.qh-campania .enlace-flecha { margin-top: 1rem; }
.qh-campania-acciones { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; margin-top: 1.3rem; }
.qh-campania-acciones .enlace-flecha { margin-top: 0; }
@media (max-width: 760px) { .qh-campanias { grid-template-columns: 1fr; }}

/* Articulación con pastorales */
/* 2 columnas y no 3: desde el 24-ago son CUATRO pastorales y llevan foto. Con
   3 columnas la cuarta quedaba sola en una fila, y con 4 la foto salía del
   tamaño de una estampilla. */
.qh-pastorales { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.8rem, 3.5vw, 3rem); }
.qh-pastoral { border-top: 2px solid var(--gris-claro); padding-top: 1.1rem; }
.qh-pastoral h3 { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; }
.qh-pastoral p { color: var(--texto-suave); font-size: var(--t-chico); margin-top: 0.5rem; }
.qh-pastoral .enlace-flecha { margin-top: 0.9rem; }
/* La foto va ARRIBA del filete, no debajo del título: así la tarjeta se lee
   como una unidad y el filete sigue separando una pastoral de la otra. */
.qh-pastoral-media {
  aspect-ratio: 16 / 10;
  margin: 0 0 1.1rem;
  border-radius: var(--radio-img);
  overflow: hidden;
  background: color-mix(in srgb, var(--bordo) 9%, var(--marfil));
}
.qh-pastoral-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Sin foto todavía (Pastoral Penitenciaria): un bloque tintado del mismo alto,
   para que la fila no se desarme. Es el mismo recurso que ya usan las fotos del
   equipo cuando falta un retrato. */
.qh-pastoral-media-vacia {
  background:
    radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--bordo) 16%, transparent), transparent 60%),
    color-mix(in srgb, var(--bordo) 7%, var(--marfil));
}

/* ============================================================
   INICIO · Hero a sangre (foto a pantalla) + carrusel de destacados
   ============================================================ */
/* Header en claro mientras está sobre un hero oscuro (solo en el tope) */
body.home:not(.menu-abierto) .header:not(.desplazado) .marca,
body.hero-oscuro:not(.menu-abierto) .header:not(.desplazado) .marca,
body.home:not(.menu-abierto) .header:not(.desplazado) .nav-principal a:not(.btn),
body.hero-oscuro:not(.menu-abierto) .header:not(.desplazado) .nav-principal a:not(.btn) { color: var(--blanco); }
body.home:not(.menu-abierto) .header:not(.desplazado) .marca-texto small,
body.hero-oscuro:not(.menu-abierto) .header:not(.desplazado) .marca-texto small { color: rgba(255, 255, 255, 0.78); }
body.home:not(.menu-abierto) .header:not(.desplazado) .boton-menu span,
body.hero-oscuro:not(.menu-abierto) .header:not(.desplazado) .boton-menu span { background: var(--blanco); }
body.home:not(.menu-abierto) .header:not(.desplazado) .nav-principal a:not(.btn)::after,
body.hero-oscuro:not(.menu-abierto) .header:not(.desplazado) .nav-principal a:not(.btn)::after { background: var(--blanco); }
/* el escudo también cambia: en bordó sobre bordó no se veía nada */
body.home:not(.menu-abierto) .header:not(.desplazado) .marca-logo-color,
body.hero-oscuro:not(.menu-abierto) .header:not(.desplazado) .marca-logo-color { display: none; }
body.home:not(.menu-abierto) .header:not(.desplazado) .marca-logo-claro,
body.hero-oscuro:not(.menu-abierto) .header:not(.desplazado) .marca-logo-claro { display: block; }

.hero-foto {
  position: relative;
  /* 75px = los 74 del header + su borde inferior de 1px. Con -74 quedaba
     asomando una franja del fondo por encima del nav. */
  margin-top: -75px;
  min-height: 90svh;
  display: flex; align-items: flex-end;
  overflow: hidden; isolation: isolate;
  background-color: #1e0d12;     /* respaldo si la foto no carga */
}
.hero-fondo { position: absolute; inset: 0; z-index: -2; }
.hero-fondo img { width: 100%; height: 100%; object-fit: cover; }
.hero-velo {
  position: absolute; inset: 0; z-index: -1;
  background:
    /* sombreado aliviado a pedido del cliente, para que se vean los rostros;
       lo justo para que el texto blanco siga pasando contraste AA */
    linear-gradient(to bottom, rgba(20, 8, 11, 0.42) 0, rgba(20, 8, 11, 0.08) 15%, transparent 30%),
    linear-gradient(to top, rgba(20, 8, 11, 0.78) 3%, rgba(20, 8, 11, 0.26) 44%, rgba(20, 8, 11, 0.04) 100%),
    linear-gradient(to right, rgba(20, 8, 11, 0.34), transparent 62%);
}
.hero-inner { position: relative; z-index: 1; color: var(--blanco); padding-block: clamp(2.5rem, 8vh, 5.5rem); }
/* UN solo renglón (pedido del cliente, doc del 20-ago). El titular pasó de tres
   líneas a dos ensanchándolo, y de dos a una bajando el cuerpo: a 68 px el texto
   mide ~1520 px de largo y no hay pantalla donde eso entre dentro de la grilla
   de 1240. Dos cambios, entonces:
     1) el hero usa un contenedor más ancho que el resto del sitio (es a sangre,
        no tiene por qué respetar la grilla de lectura);
     2) el cuerpo se ata al ancho de la ventana, con ~7% de holgura para que un
        retoque del texto desde el panel no lo parta en dos.
   Si el equipo escribe un titular mucho más largo, cae a dos líneas y no se
   rompe nada: no lleva nowrap a propósito. */
.hero-foto .hero-inner { max-width: min(96vw, 1600px); }
.hero-foto h1 {
  color: var(--blanco);
  max-width: none;
  font-size: min(3.75vw, 4rem);
}
@media (max-width: 1100px) {
  /* abajo de esto ninguna tipografía legible entra en una línea: vuelve a
     ajustarse por ancho de texto y se parte donde tenga que partirse */
  .hero-foto .hero-inner { max-width: var(--ancho); }
  .hero-foto h1 { font-size: clamp(2.4rem, 7vw, 3.2rem); max-width: 20ch; }}
.hero-foto .hero-bajada { color: rgba(255, 255, 255, 0.9); max-width: 46ch; font-size: clamp(1.1rem, 1.6vw, 1.3rem); margin-top: 1.4rem; }
.hero-foto .hero-acciones { margin-top: 2.2rem; display: flex; gap: 1rem; flex-wrap: wrap; }

.btn-contorno-claro { background: transparent; color: var(--blanco); border-color: rgba(255, 255, 255, 0.55); }
.btn-contorno-claro:hover { background: rgba(255, 255, 255, 0.14); border-color: var(--blanco); }

@media (max-width: 820px) { .qh-pastorales { grid-template-columns: 1fr; }}

/* ============================================================
   PÁGINA · Doná (sensible: motion mínimo, sobriedad máxima)
   ============================================================ */
.dona-hero {
  position: relative; overflow: hidden;
  min-height: min(76svh, 700px);
  display: flex; align-items: center;
  padding-top: clamp(3rem, 7vw, 5.5rem);
}
.dona-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.dona-hero .contenedor { position: relative; z-index: 1; }
.dona-hero h1 { max-width: 16ch; }
.dona-hero p { margin-top: 1.3rem; max-width: 52ch; font-size: 1.08rem; }
@media (max-width: 860px) {
  .dona-hero { align-items: flex-start; min-height: 88svh; }}

.dona-grilla { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
/* los datos bancarios en un campo de color de marca: es EL contenido de la página */
.dona-banco {
  background: color-mix(in srgb, var(--bordo) 7%, var(--blanco));
  border-radius: var(--radio);
  padding: clamp(1.6rem, 3vw, 2.4rem);
}
.dona-banco h2 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
.dona-datos { margin-top: 1.4rem; display: grid; gap: 1rem; }
.dona-datos > div { display: grid; gap: 0.2rem; border-top: 1px solid color-mix(in srgb, var(--bordo) 18%, transparent); padding-top: 0.9rem; }
.dona-datos > div:first-child { border-top: 0; padding-top: 0; }
.dona-datos dt { font-size: 0.82rem; color: var(--texto-suave); }
.dona-datos dd { margin: 0; font-weight: 650; font-size: clamp(1.1rem, 1.6vw, 1.3rem); display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.dona-num { font-variant-numeric: tabular-nums; }
.dona-copiar {
  font: inherit; font-size: 0.78rem; font-weight: 600;
  padding: 0.28rem 0.75rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--bordo) 42%, transparent);
  background: none; color: var(--bordo); cursor: pointer;
  transition: background 0.25s var(--curva), color 0.25s var(--curva);
}
.dona-copiar:hover { background: var(--bordo); color: var(--blanco); }
.dona-copiar.copiado { background: var(--bordo); color: var(--blanco); }

/* Botón WhatsApp: al hacer clic, momento de gratitud (la gota de la página
   hecha gesto): el rótulo se despide, entra "Muchas gracias" con un corazón
   que late, y una onda + gotitas salpican desde el botón. Luego abre WhatsApp. */
.dona-wsp { position: relative; }
.dona-wsp-caras { display: grid; }
.dona-wsp-a, .dona-wsp-b { grid-area: 1 / 1; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; }
.dona-wsp-b { opacity: 0; }
.dona-corazon { width: 1.05em; height: 1.05em; flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .dona-wsp-a, .dona-wsp-b { transition: opacity 0.35s var(--curva), transform 0.35s var(--curva); }
  .dona-wsp-b { transform: translateY(9px); }
  .dona-wsp.gracias .dona-wsp-a { opacity: 0; transform: translateY(-9px); }
  .dona-wsp.gracias .dona-wsp-b { opacity: 1; transform: none; }
  .dona-wsp.gracias .dona-corazon { animation: corazon-late 0.9s var(--curva) 0.15s both; }
  /* la onda del splash: un anillo que se expande desde el botón */
  .dona-wsp::after {
    content: ""; position: absolute; inset: 0; border-radius: 999px;
    border: 2px solid rgba(122, 30, 44, 0.5);
    opacity: 0; pointer-events: none;
  }
  .dona-wsp.gracias::after { animation: wsp-onda 0.85s ease-out 0.05s; }
  .dona-gotita {
    position: absolute; left: 50%; top: 50%; width: 6px; height: 6px;
    margin: -3px 0 0 -3px; border-radius: 50%;
    background: color-mix(in srgb, var(--bordo) 55%, var(--blanco));
    opacity: 0; pointer-events: none;
  }
  .dona-wsp.gracias .dona-gotita { animation: gotita-vuela 0.8s var(--curva) 0.05s; }}
@keyframes corazon-late {
  0% { transform: scale(0); }
  55% { transform: scale(1.25); }
  75% { transform: scale(0.92); }
  100% { transform: scale(1); }
}
@keyframes wsp-onda {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(2); opacity: 0; }
}
@keyframes gotita-vuela {
  0% { transform: none; opacity: 0.9; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.35); opacity: 0; }
}

.dona-contacto h2 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
.dona-contacto > p { margin-top: 0.8rem; color: var(--texto-suave); max-width: 44ch; }
.dona-contacto .btn { margin-top: 1.4rem; }
.dona-lineas { list-style: none; margin-top: 1.7rem; display: grid; gap: 0.6rem; color: var(--texto-suave); }
.dona-lineas a { color: var(--gris-oscuro); font-weight: 550; }
@media (max-width: 820px) { .dona-grilla { grid-template-columns: 1fr; }}

/* ============================================================
   PÁGINA · Contacto (split: contenido + mapa a sangre a la derecha)
   ============================================================ */
.contacto-split { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); min-height: calc(100svh - 76px); }
/* la columna de texto se alinea al borde del contenedor del sitio; el mapa va al borde del viewport */
.contacto-lado { display: flex; align-items: center; padding: clamp(2.5rem, 6vh, 5rem) clamp(1.5rem, 4vw, 3.5rem) clamp(2.5rem, 6vh, 5rem) max(1.5rem, calc((100vw - var(--ancho)) / 2)); }
.contacto-lado-inner { width: 100%; max-width: 34rem; }
.contacto-lado-inner h1 { max-width: 16ch; }
.contacto-lado-inner > p { margin-top: 1.2rem; max-width: 46ch; font-size: 1.06rem; }
.contacto-wsp { margin-top: 1.7rem; }
/* datos en grilla compuesta (no lista tipo planilla): Teléfono | Dirección arriba,
   Correo y Redes a lo ancho; sin filetes por fila, agrupa el blanco */
.contacto-datos {
  margin-top: 2.1rem; padding-top: 1.6rem;
  border-top: 1px solid var(--gris-claro);
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 1.6rem;
}
.contacto-datos > div { display: grid; gap: 0.3rem; align-content: start; }
.contacto-datos > div:nth-child(n + 3) { grid-column: 1 / -1; }
.contacto-datos dt { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texto-suave); }
.contacto-datos dd { margin: 0; font-size: 1.02rem; line-height: 1.5; overflow-wrap: anywhere; }
.contacto-datos dd a { color: var(--gris-oscuro); font-weight: 550; }
.contacto-datos dd a:hover { color: var(--bordo); }
.contacto-redes { display: flex; gap: 1.2rem; flex-wrap: wrap; }
/* Canal de salvaguardia: puntero a su página, no un bloque suelto.
   Se sacó el filete lateral de color: es un recurso que se ve prolijo y no
   significa nada, y acá ya hay una regla arriba que separa. */
.contacto-salvaguardia {
  margin-top: 2.2rem; padding-top: 1.3rem;
  border-top: 1px solid var(--gris-claro);
  font-size: 0.9rem; color: var(--texto-suave); line-height: 1.55;
  overflow-wrap: anywhere; /* el correo largo no debe inflar el min-content de la grilla (desbordaba el split en móvil) */
}
.contacto-salvaguardia strong { color: var(--gris-oscuro); display: block; margin-bottom: 0.3rem; }

/* mapa que se funde con el marfil (Leaflet, base clara CARTO, vista fija) */
.contacto-mapa-full { position: relative; min-height: 46svh; background: var(--marfil); }
#contacto-mapa { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; background: var(--marfil); }
/* base casi invisible: la línea sutil no debe competir con el callejero */
.contacto-mapa-full .leaflet-tile-pane { filter: saturate(0.15) sepia(0.05) brightness(1.2) contrast(0.82); opacity: 0.2; }
/* efecto "impregnado": bordes suaves/difusos, como tinta absorbida en el papel */
.contacto-mapa-full .leaflet-overlay-pane { filter: blur(1px); }
/* marca de agua: nombre de cada ciudad, mismo tono impregnado */
.mapa-ciudad {
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0;
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(0.72rem, 0.95vw, 0.98rem); letter-spacing: 0.04em;
  color: #D9D2C7; white-space: nowrap; text-transform: uppercase;
  filter: blur(0.5px);
}
/* Asunción, la ciudad de la sede: misma marca de agua, un punto más presente */
.mapa-ciudad-sede { font-size: clamp(1rem, 1.4vw, 1.35rem); letter-spacing: 0.09em; color: #D0C8BB; }
.contacto-mapa-full .leaflet-container { background: var(--marfil); outline: none; }
/* bordes degradados a marfil (fusión, sin corte): izquierda, arriba y abajo */
.contacto-mapa-full::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 500;
  background:
    linear-gradient(to right, var(--marfil), rgba(250, 246, 240, 0) 26%),
    linear-gradient(to bottom, var(--marfil), rgba(250, 246, 240, 0) 15%),
    linear-gradient(to top, var(--marfil), rgba(250, 246, 240, 0) 13%);
}

/* referencia del lugar: punto minimalista (dot bordó con aro marfil) + nombre */
.mapa-ref-anillo {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bordo); border: 2px solid var(--marfil);
  box-shadow: 0 1px 4px rgba(23, 9, 13, 0.28);
}
.mapa-ref-nombre {
  position: absolute; left: 13px; top: -0.7em;
  font-family: var(--serif); font-weight: 600; font-size: 0.9rem; line-height: 1.2;
  color: color-mix(in srgb, var(--bordo) 84%, #000); white-space: nowrap;
  text-shadow: 0 1px 3px rgba(250, 246, 240, 0.95);
}
/* latido de entrada de la sede: dos ondas que se calman */
.mapa-ref-onda {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--bordo) 55%, transparent);
  opacity: 0;
}
.mapa-ref.animar .mapa-ref-onda { animation: mapa-ref-latido 1.9s var(--curva) 2; }
@keyframes mapa-ref-latido {
  0% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(3.6); }
}

/* atribución obligatoria, discreta */
.contacto-mapa-full .leaflet-control-attribution { background: rgba(250, 246, 240, 0.7); font-size: 10px; color: var(--texto-suave); }
.contacto-mapa-full .leaflet-control-attribution a { color: var(--texto-suave); }

/* todo el mapa es el enlace a Google Maps */
.contacto-mapa-link { position: absolute; inset: 0; z-index: 1000; display: block; }
.contacto-mapa-hint {
  position: absolute; right: clamp(1.2rem, 2.5vw, 2.2rem); bottom: clamp(1.2rem, 2.5vw, 2.2rem);
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.68rem 1.1rem; border-radius: 999px;
  background: var(--blanco); color: var(--bordo); font-weight: 650; font-size: 0.88rem;
  box-shadow: 0 8px 26px rgba(23, 9, 13, 0.18);
  transition: background 0.3s var(--curva), color 0.3s var(--curva), transform 0.3s var(--curva);
}
.contacto-mapa-link:hover .contacto-mapa-hint,
.contacto-mapa-link:focus-visible .contacto-mapa-hint { background: var(--bordo); color: var(--blanco); transform: translateY(-2px); }
.contacto-mapa-link:focus-visible { outline: 2px solid var(--bordo); outline-offset: -6px; }
@media (max-width: 860px) {
  .contacto-split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .contacto-lado { padding: clamp(2rem, 6vw, 3rem) clamp(1.3rem, 5vw, 2rem); }
  .contacto-mapa-full { min-height: 56svh; order: 1; }}
@media (max-width: 480px) {
  .contacto-datos { grid-template-columns: 1fr; }
  .contacto-datos > div { grid-column: auto; }}

/* ============================================================
   PÁGINA · Recursos (biblioteca de documentos)
   ============================================================ */
.rec-hero {
  position: relative; overflow: hidden;
  min-height: min(72svh, 640px);
  display: flex; align-items: center;
  padding-top: clamp(3rem, 7vw, 5.5rem);
}
.rec-hero canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0;
  /* disolver las hojas en el marfil arriba y abajo (sin corte duro) */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 60%, transparent 100%);
}
.rec-hero .contenedor { position: relative; z-index: 1; }
.rec-hero h1 { max-width: 16ch; }
.rec-hero p { margin-top: 1.3rem; max-width: 54ch; font-size: 1.08rem; }
.rec-etiqueta { font-size: 0.82rem; font-weight: 600; color: var(--texto-suave); }

/* Anuario destacado: bloque partido, panel bordó tipográfico (sin portada falsa) */
.rec-anuario {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  border-radius: var(--radio); overflow: hidden; background: var(--blanco);
  border: 1px solid var(--gris-claro);
  transition: transform 0.45s var(--curva), box-shadow 0.45s var(--curva);
}
.rec-anuario:hover { transform: translateY(-5px); box-shadow: 0 26px 60px color-mix(in srgb, var(--bordo) 22%, transparent); }
.rec-anuario-marca {
  position: relative; overflow: hidden;
  background: var(--bordo); color: var(--blanco);
  padding: clamp(2rem, 4vw, 3.2rem);
  display: flex; flex-direction: column; justify-content: center; gap: 0.2rem;
  min-height: 240px;
}
/* esquina de página plegada: se despliega al pasar el mouse (motivo "documento") */
.rec-anuario-marca::after {
  content: ""; position: absolute; right: 0; bottom: 0;
  width: 0; height: 0; border-style: solid;
  border-width: 0 0 30px 30px;
  border-color: transparent transparent var(--marfil) transparent;
  transition: border-width 0.5s var(--curva);
}
.rec-anuario:hover .rec-anuario-marca::after { border-width: 0 0 54px 54px; }
/* ñandutí: encaje radial paraguayo que gira y sigue al cursor (detrás del texto) */
.rec-nanduti { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.rec-anuario-anio { position: relative; z-index: 1; font-family: var(--serif); font-weight: 600; font-size: clamp(3.5rem, 8vw, 6rem); line-height: 0.95; }
.rec-anuario-tipo { position: relative; z-index: 1; font-size: 1.05rem; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.82); }
.rec-anuario-cuerpo { padding: clamp(1.8rem, 3.5vw, 2.8rem); align-self: center; }
.rec-anuario-cuerpo h2 { margin-top: 0.4rem; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.rec-anuario-cuerpo p { margin-top: 0.9rem; color: var(--texto-suave); max-width: 48ch; }
.rec-anuario-cuerpo .btn { margin-top: 1.6rem; }
/* revelado cinético del año al entrar en vista */
@media (prefers-reduced-motion: no-preference) {
  .rec-anuario.revelar .rec-anuario-anio { opacity: 0; transform: translateY(22px); }
  .rec-anuario.revelar.visible .rec-anuario-anio {
    animation: rec-anio 0.8s var(--curva) 0.15s forwards;
  }}
@keyframes rec-anio { to { opacity: 1; transform: none; } }
@media (max-width: 760px) { .rec-anuario { grid-template-columns: 1fr; }}

/* Biblioteca: filas editoriales con descarga (divide-y, no tarjetas) */
.rec-lista { list-style: none; border-top: 1px solid var(--gris-claro); }
.rec-item {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1.2rem, 3vw, 2.5rem);
  padding: clamp(1.4rem, 2.4vw, 1.9rem) clamp(0.3rem, 1vw, 0.8rem);
  border-bottom: 1px solid var(--gris-claro);
  transition: background 0.35s var(--curva);
}
/* el filo bordó se dibuja al pasar el mouse (interacción, no adorno estático) */
.rec-item::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--bordo); transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s var(--curva);
}
.rec-item:hover { background: color-mix(in srgb, var(--bordo) 3.5%, transparent); }
.rec-item:hover::after { transform: scaleX(1); }
.rec-item-info { min-width: 0; }
.rec-item-info h3 { margin-top: 0.35rem; font-family: var(--serif); font-weight: 600; font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.3; transition: color 0.35s var(--curva); }
.rec-item:hover .rec-item-info h3 { color: var(--bordo); }
.rec-item-d { margin-top: 0.5rem; color: var(--texto-suave); font-size: var(--t-chico); max-width: 68ch; }
.rec-item-btn { flex: none; }
@media (max-width: 640px) {
  .rec-item { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .rec-item-btn { align-self: stretch; text-align: center; }}

/* ============================================================
   MAPA ECLESIAL · el mapa es el layout (referencia Chizay/Generali)
   ============================================================ */
.mapa-split {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 288px;
  min-height: calc(100dvh - 74px);
  background: var(--marfil);
}
/* Colapsado: el índice sale de la grilla y el mapa toma toda la superficie.
   Sin transición sobre grid-template-columns a propósito: con un var() de por
   medio el navegador no interpola y la columna se queda clavada en el valor
   inicial. Lo que sí acompaña es la pestañita, que anima su posición. */
.mapa-split.es-colapsado { grid-template-columns: minmax(0, 1fr) 0; }
.mapa-split.es-colapsado .mapa-aside { display: none; }
.mapa-lienzo { position: relative; min-height: 60vh; }
#mapa-diocesis {
  position: absolute; inset: 0;
  background: var(--marfil);
  z-index: 0;
}
/* Leaflet sin tiles: no debe pintar su fondo gris propio */
#mapa-diocesis.leaflet-container { background: var(--marfil); outline: none; font: inherit; }
#mapa-diocesis .leaflet-interactive { cursor: pointer; transition: fill-opacity 0.3s var(--curva); }
/* Ficha de contacto de una jurisdicción: reusa las filas de Recursos, con las
   columnas más apretadas porque son pares dato/valor, no descargables. */
.jurisdiccion-ficha { margin-block: clamp(2rem, 4vw, 3rem); }
.jurisdiccion-ficha .rec-item { padding-block: clamp(0.9rem, 1.6vw, 1.2rem); }
.jurisdiccion-ficha .rec-item-info h3 { font-size: clamp(1rem, 1.4vw, 1.15rem); }
.jurisdiccion-redes { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.jurisdiccion-redes a { color: var(--bordo); }

/* Pin de la sede: solo aparece si la ficha tiene coordenadas cargadas. */
.mapa-sede { pointer-events: none; }
.mapa-sede-btn {
  pointer-events: auto; cursor: pointer;
  width: 13px; height: 13px; padding: 0;
  margin: -6px 0 0 -6px;              /* centrado sobre la coordenada */
  border: 2.5px solid var(--blanco); border-radius: 999px;
  background: var(--bordo);
  box-shadow: 0 2px 7px rgba(20, 8, 11, 0.42);
  transition: transform 0.22s var(--curva);
}
.mapa-sede-btn:hover, .mapa-sede-btn:focus-visible { transform: scale(1.35); }

/* Aviso de que el mapa es interactivo. Se va al primer clic, o solo a los 9 s. */
.mapa-pista {
  position: absolute; z-index: 500;
  left: 50%; bottom: clamp(1rem, 2.5vw, 1.6rem);
  transform: translate(-50%, 8px);
  margin: 0; padding: 0.6rem 1.1rem;
  border-radius: 999px;
  background: rgba(38, 30, 28, 0.86);
  color: var(--marfil); font-size: 0.82rem; line-height: 1;
  white-space: nowrap; pointer-events: none;
  opacity: 0;
  transition: opacity 0.42s var(--curva), transform 0.42s var(--curva);
}
.mapa-pista.es-visible { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  .mapa-pista { transition: none; transform: translate(-50%, 0); }}
@media (max-width: 560px) {
  .mapa-pista { font-size: 0.75rem; padding: 0.5rem 0.85rem; white-space: normal; max-width: 82vw; text-align: center; line-height: 1.35; }}
#mapa-diocesis .leaflet-interactive:focus-visible { outline: 2px solid var(--bordo); outline-offset: 2px; }


.mapa-titulo {
  position: absolute;
  left: clamp(1.2rem, 3vw, 3rem);
  bottom: clamp(1.5rem, 4vw, 3.2rem);
  z-index: 500;
  max-width: 32ch;
  pointer-events: none;
}
.mapa-titulo h1 {
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.02;
  margin: 0.3rem 0 0.6rem;
}
.mapa-bajada { color: var(--texto-suave); font-size: var(--t-chico); max-width: 42ch; }

/* ---- panel derecho ---- */
.mapa-aside {
  /* min-width:0 es lo que permite que la columna llegue de verdad a 0 al
     colapsar: sin esto el nombre más largo de la lista fija un ancho mínimo
     y la grilla se niega a encogerse */
  min-width: 0;
  overflow-y: auto;
  border-left: 1px solid var(--gris-claro);
  background: var(--blanco);
  max-height: calc(100dvh - 74px);
  padding: 0 1.1rem 1.4rem;
}
.mapa-sindatos { color: var(--texto-suave); font-size: var(--t-chico); line-height: 1.6; }
.mapa-tipo {
  font-size: 0.7rem; font-weight: 650; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--bordo);
}
.mapa-nombre { font-size: 1.3rem; line-height: 1.15; margin: 0.35rem 0 0.9rem; }
.mapa-datos { margin: 0 0 1.1rem; }
.mapa-datos dt {
  font-size: 0.62rem; font-weight: 650; letter-spacing: 0.1em;
  text-transform: uppercase; color: #9a8f8a;
  margin-top: 0.95rem; line-height: 1.3;
}
.mapa-datos > dt:first-child { margin-top: 0; }
.mapa-datos dd {
  margin: 0.18rem 0 0;
  font-size: 0.93rem; font-weight: 500; line-height: 1.4;
  color: var(--gris-oscuro);
  overflow-wrap: anywhere;
}
.mapa-datos dd a { color: var(--gris-oscuro); }
.mapa-datos dd a:hover { color: var(--bordo); }
.mapa-resumen {
  margin-top: 1.15rem; padding-top: 1.1rem;
  border-top: 1px solid var(--gris-claro);
  font-size: 0.86rem; color: var(--texto-suave); line-height: 1.6;
}
/* OJO especificidad: leaflet.css trae `.leaflet-container a { color:#0078A8 }`
   y se encola DESPUÉS del CSS del tema, así que a igual peso le ganaba y los
   enlaces del popup salían azules. Por eso todo lo de adentro del popup se
   califica con .mapa-popup / #mapa-diocesis. */
.mapa-redes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1.15rem; }
.mapa-popup .mapa-datos dd a:not(.mapa-correo),
#mapa-diocesis .mapa-datos dd a:not(.mapa-correo) { color: var(--gris-oscuro); text-decoration: none; }
.mapa-popup .mapa-datos dd a:not(.mapa-correo):hover,
#mapa-diocesis .mapa-datos dd a:not(.mapa-correo):hover { color: var(--bordo); }

.mapa-popup .mapa-red, #mapa-diocesis .mapa-red {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  width: 34px; height: 34px; border-radius: 999px;
  color: var(--bordo); background: rgba(122, 30, 44, 0.07);
  text-decoration: none;
  transition: color 0.25s var(--curva), background 0.25s var(--curva);
}
.mapa-popup .mapa-red:hover, #mapa-diocesis .mapa-red:hover {
  color: var(--blanco); background: var(--bordo);
}
.mapa-red svg { display: block; }
.buscador { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.6rem; max-width: 34rem; }
.buscador-campo {
  flex: 1; min-width: 0; font: inherit; font-size: var(--t-cuerpo); color: var(--gris-oscuro);
  background: var(--blanco); border: 1px solid var(--gris-claro); border-radius: 999px;
  padding: 0.75rem 1.2rem; transition: border-color 0.2s, box-shadow 0.2s;
}
.buscador-campo::placeholder { color: var(--gris-medio); }
.buscador-campo:focus { outline: none; border-color: var(--bordo); box-shadow: 0 0 0 3px rgba(122, 30, 44, 0.12); }
.buscador-btn {
  flex: none; width: 2.9rem; height: 2.9rem; border-radius: 999px; border: none; cursor: pointer;
  background: var(--bordo); color: var(--blanco); display: grid; place-items: center;
  transition: transform 0.2s var(--curva), background-color 0.2s;
}
.buscador-btn:hover { background: #611722; transform: translateY(-2px); }
.buscador-btn:active { transform: translateY(0) scale(0.96); }
.buscador-vacio { color: var(--texto-suave); max-width: 52ch; }

.psn-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mapa-aviso {
  margin-top: 0.9rem; padding-left: 0.75rem;
  border-left: 2px solid var(--dorado-claro);
  font-size: 0.76rem; color: var(--texto-suave); line-height: 1.5;
}

/* ---- lista de jurisdicciones ---- */
.mapa-lista-cab {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  background: var(--blanco);
  border-bottom: 1px solid var(--gris-claro);
  margin-bottom: 0.35rem;
}
.mapa-cajon-cerrar {
  flex: none; width: 34px; height: 34px; padding: 0;
  display: none; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 999px; cursor: pointer;
  color: var(--texto-suave);
  transition: color 0.2s var(--curva), background 0.2s var(--curva);
}
.mapa-cajon-cerrar:hover { color: var(--bordo); background: #f6f1ea; }
.mapa-lista-titulo {
  background: var(--blanco);
  padding: 1.25rem 0 0.75rem; margin: 0;
  font-family: var(--sans); font-size: 0.7rem; font-weight: 650;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-suave);
}
.mapa-lista { list-style: none; margin: 0; padding: 0; }
.mapa-lista button {
  display: flex; align-items: flex-start; gap: 0.6rem;
  width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer;
  font: inherit; color: var(--gris-oscuro);
  padding: 0.5rem 0.7rem; border-radius: 8px;
  transition: background 0.2s var(--curva), color 0.2s var(--curva);
}
/* el icono ancla la fila y le da peso a una lista que quedaba muy vacía */
.mapa-lista-ico { flex: none; display: flex; margin-top: 1px; color: #b9a5a9; transition: color 0.2s var(--curva); }
.mapa-lista button:hover .mapa-lista-ico { color: var(--bordo); }
.mapa-lista button[aria-current="true"] .mapa-lista-ico { color: var(--blanco); }
.mapa-lista-txt { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.mapa-lista-nombre { font-size: 0.88rem; font-weight: 550; line-height: 1.25; }
/* el tipo solo aparece cuando NO es una diócesis: si no, quince veces lo mismo */
.mapa-lista-tipo {
  font-size: 0.63rem; font-weight: 650; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--texto-suave);
}
.mapa-lista button[aria-current="true"] .mapa-lista-tipo { color: rgba(255, 255, 255, 0.72); }
.mapa-lista button:hover { background: #f6f1ea; color: var(--bordo); }
.mapa-lista li + li { margin-top: 1px; }
.mapa-lista button[aria-current="true"] { background: var(--bordo); color: var(--blanco); font-weight: 600; }

.mapa-nota-datos {
  padding-block: 1.2rem;
  font-size: var(--t-chico);
  color: var(--texto-suave);
}

@media (max-width: 900px) {
  .mapa-split { grid-template-columns: 1fr; min-height: 0; }
  /* el título sale del apilado absoluto y pasa ARRIBA del mapa, si no queda
     encima de los polígonos y tapa medio país */
  .mapa-lienzo { display: flex; flex-direction: column; min-height: 0; }
  .mapa-titulo { position: static; order: -2; padding: 1.6rem var(--pad-x) 1rem; max-width: none; }
  #mapa-diocesis { position: relative; inset: auto; height: 52vh; min-height: 320px; }
  .mapa-aside { max-height: none; border-left: 0; border-top: 1px solid var(--gris-claro); }}

/* ---- popup con la ficha ---- */
.mapa-popup .leaflet-popup-content-wrapper {
  background: var(--blanco);
  border-radius: 12px;
  box-shadow: 0 18px 44px -14px rgba(60, 20, 28, 0.34);
  padding: 0;
}
/* OJO: no forzar width:auto acá. Leaflet calcula el ancho del popup y lo
   escribe inline; pisarlo colapsa la ficha a una columna de una palabra. */
.mapa-popup .leaflet-popup-content { margin: 0; }
.mapa-popup .leaflet-popup-tip { background: var(--blanco); }
.mapa-popup-cuerpo {
  padding: 1.25rem 1.4rem 1.4rem;
  font-family: var(--sans);
  min-width: 17rem;
}
.mapa-popup-cuerpo .mapa-nombre { font-size: 1.12rem; margin-bottom: 0.8rem; text-wrap: balance; }
.mapa-popup-cuerpo .mapa-datos { font-size: 0.82rem; }
.mapa-popup .leaflet-popup-close-button { color: var(--texto-suave); font-size: 1.4rem; padding: 6px 8px 0 0; }
.mapa-popup .leaflet-popup-close-button:hover { color: var(--bordo); background: none; }
/* CTA principal: a todo el ancho de la ficha y centrado. Antes competía con
   la caja del correo y quedaba como un botón secundario más. */
.mapa-vermas {
  display: block; width: 100%; box-sizing: border-box;
  margin-top: 1.25rem; padding: 0.72em 1.4em;
  font-size: 0.85rem; font-weight: 600; text-align: center;
}

/* ---- controles ---- */
#mapa-diocesis .leaflet-control-zoom a {
  background: var(--blanco); color: var(--gris-oscuro);
  border-color: var(--gris-claro); width: 32px; height: 32px; line-height: 30px;
}
#mapa-diocesis .leaflet-control-zoom a:hover { color: var(--bordo); }
#mapa-diocesis .leaflet-bar { border: 0; box-shadow: 0 3px 12px -4px rgba(60, 20, 28, 0.24); border-radius: 8px; overflow: hidden; }

/* ---- etiquetas de jurisdicción (como el mapa eclesial oficial del cliente) ---- */
/* PUNTITOS BORDÓ, no recuadros con el nombre (pedido del cliente, doc del
   20-ago). Con 17 nombres en cajas blancas el mapa se tapaba a sí mismo:
   Villarrica, Carapeguá y Caazapá se pisaban entre sí y no se veía el país.
   Ahora cada jurisdicción es un punto; el nombre aparece al pasar el mouse y,
   al tocar, se abre la ficha como siempre. */
.mapa-pin { pointer-events: none; }
.mapa-pin-btn {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center;
  background: none; border: 0; padding: 8px; cursor: pointer;
  pointer-events: auto; font: inherit; white-space: nowrap;
  transition: transform 0.25s var(--curva);
}
/* el punto en sí */
.mapa-pin-btn::before {
  content: ""; flex: none;
  width: 9px; height: 9px; border-radius: 999px;
  background: var(--bordo);
  border: 2px solid var(--marfil);
  box-shadow: 0 1px 4px rgba(60, 20, 28, 0.4);
  transition: transform 0.25s var(--curva), background-color 0.25s;
}
/* El nombre se ve SIEMPRE, debajo del punto. Con los nombres escondidos en
   hover el mapa quedaba mudo: quince puntos idénticos y nada que leer, y en
   teléfono no hay hover. Va sin caja y con halo de color de fondo, que ocupa
   mucho menos que un recuadro y por eso ya no se pisan. */
.mapa-pin-nombre {
  position: absolute; left: 50%; top: 100%; margin-top: 5px;
  font-family: var(--sans); font-size: 0.63rem; font-weight: 650;
  line-height: 1.15; letter-spacing: 0.01em; color: #3d2026;
  width: max-content; max-width: 8.5rem; white-space: normal; text-align: center;
  pointer-events: none;
  transform: translateX(-50%);
  /* halo en vez de fondo: se lee sobre el gris del mapa y sobre el bordó de la
     jurisdicción seleccionada, sin dibujar una caja */
  text-shadow:
    0 0 3px var(--marfil), 0 0 3px var(--marfil),
    0 0 6px var(--marfil), 0 1px 2px rgba(250, 246, 240, 0.9);
  transition: color 0.22s var(--curva);
}
/* La esconde el descarte por colisión cuando no hay lugar; vuelve al alejar
   o al pasar el mouse por su punto. */
.mapa-pin-nombre.es-tapado { opacity: 0; }
.mapa-pin-btn:hover .mapa-pin-nombre.es-tapado,
.mapa-pin-btn:focus-visible .mapa-pin-nombre.es-tapado,
.mapa-pin.es-activo .mapa-pin-nombre.es-tapado { opacity: 1; }
.mapa-pin-nombre { transition: color 0.22s var(--curva), opacity 0.2s var(--curva); }

/* Central abre otra capa: se anuncia, si no nadie lo descubre. */
.mapa-pin-mas {
  display: block; margin-top: 1px;
  font-size: 0.55rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--bordo);
}
.mapa-pin-puerta .mapa-pin-btn::before { width: 11px; height: 11px; box-shadow: 0 0 0 3px rgba(122, 30, 44, 0.22), 0 1px 4px rgba(60, 20, 28, 0.4); }
.mapa-pin-btn:hover, .mapa-pin-btn:focus-visible { transform: translate(-50%, -50%) scale(1.06); }
.mapa-pin-btn:hover::before, .mapa-pin-btn:focus-visible::before { transform: scale(1.25); }
.mapa-pin-btn:hover .mapa-pin-nombre,
.mapa-pin-btn:focus-visible .mapa-pin-nombre,
.mapa-pin.es-activo .mapa-pin-nombre { color: var(--bordo); }
.mapa-pin.es-activo .mapa-pin-nombre { font-weight: 700; }
/* la seleccionada deja el nombre a la vista para no perder la referencia */
.mapa-pin.es-activo { z-index: 500; }
.mapa-pin.es-activo .mapa-pin-btn::before { background: #4d0f1b; transform: scale(1.3); }
.mapa-pin-btn:focus-visible { outline: 2px solid var(--bordo); outline-offset: 2px; border-radius: 999px; }
/* Con dedo no hay hover, pero mostrar los 17 nombres a la vez devuelve el
   amontonamiento que justamente se vino a sacar: el nombre aparece al tocar
   (queda .es-activo) y el área táctil del punto se agranda. */
@media (hover: none) {
  .mapa-pin-btn { padding: 12px; }}
@media (max-width: 560px) {
  /* en pantallas chicas el mapa se ve lejos: nombres más chicos para que entren */
  .mapa-pin-nombre { font-size: 0.55rem; max-width: 6.5rem; }
  .mapa-pin-mas { font-size: 0.5rem; }}
/* la Vicaría Castrense no tiene territorio: su punto va con un halo para
   distinguirlo de los que sí tienen superficie dibujada */
.mapa-pin-solo .mapa-pin-btn::before { box-shadow: 0 0 0 3px rgba(122, 30, 44, 0.2), 0 1px 4px rgba(60, 20, 28, 0.4); }
.mapa-pin-punto { display: none; }

/* ---- botones sobre el mapa ---- */
.mapa-acciones { position: absolute; right: 14px; top: 14px; z-index: 600; display: flex; gap: 0.5rem; }
.mapa-btn-mapa {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: var(--blanco); border: 1px solid var(--gris-claro);
  border-radius: 999px; padding: 0.5em 1.05em 0.5em 0.9em; cursor: pointer;
  font: inherit; font-size: 0.76rem; font-weight: 600; color: var(--gris-oscuro);
  box-shadow: 0 3px 12px -4px rgba(60, 20, 28, 0.2);
  transition: color 0.25s var(--curva), border-color 0.25s var(--curva);
}
/* el icono se mueve un pelo en el sentido de su acción, para que el botón
   se sienta vivo sin recurrir a otra animación */
.mapa-btn-mapa .psn-icono { flex: none; transition: transform 0.25s var(--curva); }
.mapa-btn-mapa:hover .psn-icono { color: var(--bordo); }
#mapa-volver:hover .psn-icono { transform: translateX(-2px); }
#mapa-reset:hover .psn-icono { transform: scale(1.1); }
.mapa-btn-mapa:hover { color: var(--bordo); border-color: var(--bordo); }
.mapa-btn-mapa[hidden] { display: none; }

/* mapa base (calles y ciudades): entra al acercar el zoom, con un tinte cálido
   para que no choque con el marfil. En la vista país va en opacidad 0. */
#mapa-diocesis .leaflet-tile-pane {
  /* apenas entibiado para que pegue con el marfil, pero con contraste real:
     antes quedaba lavado y no se leían ni las calles ni los nombres */
  filter: sepia(0.10) saturate(0.95) contrast(1.14) brightness(0.97);
  transition: opacity 0.5s var(--curva);
}
/* con el callejero visible el trazo de las jurisdicciones se afina para no taparlo */
#mapa-diocesis.es-detalle .leaflet-overlay-pane path { stroke-width: 1; }
#mapa-diocesis .leaflet-control-attribution {
  background: rgba(250, 246, 240, 0.75); font-size: 0.62rem; color: var(--texto-suave);
}
#mapa-diocesis .leaflet-control-attribution a { color: var(--texto-suave); }
/* el botón del popup es un <a> dentro de .leaflet-container: sin esto hereda
   el celeste de Leaflet en el texto en vez del blanco del tema */
.mapa-popup .mapa-vermas,
#mapa-diocesis .mapa-vermas { color: var(--blanco); text-decoration: none; }
.mapa-popup .mapa-vermas:hover,
#mapa-diocesis .mapa-vermas:hover { color: var(--blanco); }

/* ---- correos de la ficha: sobre a la izquierda, flecha de salida a la derecha ---- */
.mapa-datos dd:has(.mapa-correo) { display: flex; flex-direction: column; align-items: flex-start; }
/* El correo es un dato más, no una caja: encerrarlo lo hacía competir con el
   botón principal y sumaba una tercera forma a la ficha. */
.mapa-popup .mapa-correo,
#mapa-diocesis .mapa-correo {
  display: inline-flex; align-items: center; gap: 0.42rem;
  margin-top: 0.18rem;
  color: var(--bordo);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color 0.22s var(--curva);
}
.mapa-correo + .mapa-correo { margin-top: 0.3rem; }
.mapa-correo-txt { min-width: 0; font-size: 0.88rem; font-weight: 500; line-height: 1.35; }
/* el sobre no se achica; la flecha va al extremo y se apaga hasta el hover */
.mapa-correo > .psn-icono { flex: none; }
.mapa-correo > .psn-icono:last-child { color: var(--texto-suave); opacity: 0.65; transition: transform 0.22s var(--curva), opacity 0.22s var(--curva); }
.mapa-popup .mapa-correo:hover,
#mapa-diocesis .mapa-correo:hover { color: var(--bordo-oscuro, #5C1420); }
.mapa-popup .mapa-correo:hover .mapa-correo-txt,
#mapa-diocesis .mapa-correo:hover .mapa-correo-txt { text-decoration: underline; text-underline-offset: 3px; }
.mapa-correo:hover > .psn-icono:last-child { opacity: 1; transform: translate(1px, -1px); }

/* ---- pestañita que colapsa el índice ---- */
.mapa-pestania {
  position: absolute; z-index: 620;
  top: 50%; right: 288px;
  /* monta 1px sobre el borde del panel para que no quede la costura entre
     ambos: se leen como una sola pieza */
  margin-right: -1px;
  transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 62px; padding: 0; cursor: pointer;
  background: var(--blanco);
  border: 1px solid var(--gris-claro); border-right: 0;
  border-radius: 10px 0 0 10px;
  padding-right: 1px;
  color: var(--texto-suave);
  /* Sombra SOLO hacia el mapa. Se corre bastante a la izquierda y se encoge
     apenas: así asoma ~9px del lado del mapa y su borde derecho queda 7px
     ADENTRO de la pestaña, o sea nunca toca el lado que apoya en el panel. */
  box-shadow: -8px 0 10px -4px rgba(60, 20, 28, 0.16);
  transition: right 0.35s var(--curva), color 0.25s var(--curva), background 0.25s var(--curva);
}
.es-colapsado .mapa-pestania { right: 0; }
.mapa-pestania:hover { color: var(--bordo); background: #fffdfb; }
.mapa-pestania:focus-visible { outline: 2px solid var(--bordo); outline-offset: 2px; }
.mapa-pestania .mapa-ico-abrir { display: none; }
.es-colapsado .mapa-pestania .mapa-ico-cerrar { display: none; }
.es-colapsado .mapa-pestania .mapa-ico-abrir { display: block; }

@media (max-width: 900px) {
  .mapa-split, .mapa-split.es-colapsado { grid-template-columns: 1fr; }
  .mapa-split.es-colapsado .mapa-aside { display: block; }
  .mapa-pestania { display: none; }   /* en móvil no colapsa: se va a pantalla completa */

  /* Título compacto: en 375px el bloque anterior se comía media pantalla y al
     mapa le quedaban unos centímetros. */
  .mapa-split { --mapa-alto: max(62vh, 360px); }
  .mapa-titulo { padding: 1.1rem var(--pad-x) 0.75rem; }
  .mapa-titulo h1 { font-size: clamp(1.55rem, 7vw, 2rem); line-height: 1.08; }
  .mapa-bajada { font-size: 0.82rem; line-height: 1.45; max-width: 34ch; }
  #mapa-diocesis { height: var(--mapa-alto); }

  /* Popup a medida del teléfono: el de escritorio ocupaba casi todo el ancho */
  .mapa-popup-cuerpo {
    min-width: 0; padding: 1rem 1.05rem 1.1rem;
    /* una ficha larga tapaba el mapa entero: se acota y scrollea adentro */
    max-height: 52vh; overflow-y: auto; overscroll-behavior: contain;
  }
  .mapa-popup-cuerpo .mapa-nombre { font-size: 1rem; margin-bottom: 0.6rem; }
  .mapa-popup-cuerpo .mapa-datos { font-size: 0.78rem; }
  .mapa-popup-cuerpo .mapa-resumen { font-size: 0.8rem; }
  .mapa-correo-txt { font-size: 0.76rem; }
  .mapa-vermas { margin-top: 0.8rem; }

  /* Los controles bajan debajo del texto de presentación: arriba se pisaban
     con el título y tapaban el mapa. */
  .mapa-acciones {
    position: static; order: -1;   /* después del título (-2), antes del mapa (0) */
    padding: 0 var(--pad-x) 1rem;
    flex-wrap: wrap; gap: 0.45rem;
  }
  .mapa-btn-mapa { font-size: 0.73rem; }

  /* EL ÍNDICE ES UN CAJÓN DEL MAPA: entra desde la derecha por encima del
     mapa y deja una franja a la izquierda para que se siga viendo el país
     (así se entiende que sigue estando dentro del mapa). Funciona igual en
     pantalla completa porque el JS lo mueve adentro del lienzo. */
  .mapa-aside, .mapa-split.es-colapsado .mapa-aside {
    display: block;
    /* se calza EXACTAMENTE sobre el mapa: anclado abajo y con su mismo alto.
       Antes iba de top:0 a bottom:0 del lienzo y tapaba el título y los
       botones, que están arriba del mapa en el flujo. */
    position: absolute; top: auto; right: 0; bottom: 0;
    height: var(--mapa-alto);
    width: 82%; max-width: 340px;
    z-index: 700;
    margin: 0; padding: 0 1.1rem 1.4rem;
    background: var(--blanco);
    border-left: 1px solid var(--gris-claro);
    border-top: 0;
    box-shadow: -16px 0 34px -22px rgba(60, 20, 28, 0.5);
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(101%);
    /* Cerrado NO se tabula. Sin esto queda fuera de pantalla pero navegable:
       quien usa teclado o lector se comía 16 enlaces invisibles antes de
       llegar al resto de la página. La visibilidad cambia recién al terminar
       de salir, así el deslizamiento se sigue viendo. */
    visibility: hidden;
    transition: transform 0.32s var(--curva), visibility 0s linear 0.32s;
  }
  .cajon-abierto .mapa-aside {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.32s var(--curva), visibility 0s;
  }
  .mapa-cajon-cerrar { display: inline-flex; }
  /* el botón de salir de pantalla completa queda redondo, sin rótulo */
  .mapa-pantalla-completa #mapa-pantalla {
    width: 40px; height: 40px; padding: 0; border-radius: 999px; justify-content: center;
  }}

/* ---- pantalla completa (solo móvil) ---- */
.mapa-solo-movil { display: none; }
@media (max-width: 900px) { .mapa-solo-movil { display: inline-flex; }}
#mapa-pantalla .mapa-ico-salir { display: none; }
.mapa-pantalla-completa #mapa-pantalla .mapa-ico-entrar { display: none; }
.mapa-pantalla-completa #mapa-pantalla .mapa-ico-salir { display: inline-flex; }
.mapa-pantalla-completa #mapa-pantalla .mapa-pantalla-txt { display: none; }
body.mapa-pantalla-completa { overflow: hidden; }
body.mapa-pantalla-completa .mapa-lienzo {
  position: fixed; inset: 0; z-index: 9000;
  height: auto; background: var(--marfil);
}
body.mapa-pantalla-completa #mapa-diocesis { position: absolute; inset: 0; height: auto; }
/* con el lienzo despegado del flujo, el cajón pasa a fijo sobre la pantalla */
body.mapa-pantalla-completa .mapa-aside {
  position: fixed; top: 0; bottom: 0; right: 0; height: auto; z-index: 9100;
}
/* los controles quedan flotando arriba del mapa, fuera del notch */
body.mapa-pantalla-completa .mapa-acciones {
  position: fixed; z-index: 9200;
  top: calc(env(safe-area-inset-top, 0px) + 10px); right: 12px; left: auto;
  padding: 0; justify-content: flex-end;
}
/* el título y la cabecera estorban sobre el mapa a pantalla completa */
body.mapa-pantalla-completa .mapa-titulo,
body.mapa-pantalla-completa .header { display: none; }

/* ============================================================
   HERO EN HISTORIAS (portada + últimas noticias, estilo Instagram)
   ============================================================ */
/* .hero-foto es flex con align-items:flex-end. Si las diapositivas son hijas
   flex, la primera queda del alto de su contenido y la foto (absoluta adentro)
   se encoge con ella. Se vuelve a bloque y son TODAS absolutas: la altura la
   pone el min-height de .hero-foto. */
.hero-historias { position: relative; display: block; overflow: hidden; }
.hh-slide {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end;
  opacity: 0; visibility: hidden;
  transition: opacity 0.6s var(--curva), visibility 0s linear 0.6s;
}
.hh-slide.es-activa { opacity: 1; visibility: visible; transition-delay: 0s, 0s; }

/* ---- barras de progreso ---- */
/* Al pie y CENTRADAS, discretas: ocupar todo el ancho competía con la foto.
   Además no se muestran mientras está la portada: recién aparecen cuando
   arrancan las historias de noticias (clase .es-noticia en la sección). */
.hh-barras {
  position: absolute; z-index: 30;
  bottom: clamp(1.1rem, 2.5vw, 1.7rem);
  left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.45s var(--curva);
}
.hero-historias.es-noticia .hh-barras { opacity: 1; pointer-events: auto; }
.hh-barra {
  width: 30px; height: 3px; flex: none;
  padding: 10px 0; margin: -10px 0;   /* área táctil sin engordar la barra */
  background: none; border: 0; cursor: pointer;
  display: flex; align-items: center;
}
.hh-barra span {
  display: block; width: 100%; height: 3px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.32);
  overflow: hidden; position: relative;
}
.hh-barra span::after {
  content: ""; position: absolute; inset: 0;
  background: var(--blanco); border-radius: inherit;
  transform: scaleX(0); transform-origin: left;
}
/* El llenado va por ANIMACIÓN, no por transición. Con transiciones, una barra
   interrumpida a mitad de camino quedaba con un valor intermedio y al pasar a
   "pasada" no siempre saltaba a lleno: por eso al cambiar rápido se veían
   barras a medio cargar. Una animación se reinicia de cero cada vez y una
   barra sin la clase simplemente toma su valor estático. */
.hh-barra.es-pasada span::after { transform: scaleX(1); animation: none; }
.hh-barra.es-corriendo span::after {
  animation: hh-llenar var(--hh-dur, 5000ms) linear forwards;
}
@keyframes hh-llenar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hh-barra:focus-visible { outline: 2px solid var(--blanco); outline-offset: 3px; border-radius: 4px; }

/* ---- zonas de navegación (como tocar los costados en Instagram) ---- */
.hh-zona {
  position: absolute; top: 0; bottom: 0; width: 18%;
  z-index: 25; background: none; border: 0; cursor: pointer;
  opacity: 0; transition: opacity 0.25s var(--curva);
}
.hh-prev { left: 0; }
.hh-next { right: 0; }
.hero-historias:hover .hh-zona { opacity: 1; }
.hh-zona::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 13px; height: 13px; margin: -7px 0 0 -7px;
  border-top: 2px solid var(--blanco); border-right: 2px solid var(--blanco);
}
.hh-prev::after { transform: rotate(-135deg); }
.hh-next::after { transform: rotate(45deg); }
.hh-zona:focus-visible { opacity: 1; outline: 2px solid var(--blanco); outline-offset: -6px; }

/* ---- una historia de NOTICIA ----
   Mismo formato que la portada, como pidió el cliente: foto a sangre con la
   categoría y el título encima, centrados. La foto NO se recorta (la sube el
   equipo y puede ser un afiche, un retrato o una apaisada): se ve entera sobre
   una copia desenfocada de sí misma. Y el texto va abajo, corto, donde suele
   haber piso o cielo en vez de caras. */
.hh-centro { text-align: center; }
.hh-centro .hh-meta { justify-content: center; }
.hh-centro .hero-acciones { justify-content: center; }

/* ---- contenido de una historia de noticia ---- */
.hh-meta { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.9rem; }
.hh-fecha { font-size: 0.8rem; color: rgba(255, 255, 255, 0.82); }
/* El titular va ENTERO, sin puntos suspensivos (pedido del cliente, 24-ago).
   El tope de 4 renglones no es un recorte de texto: es el freno para que un
   titular larguísimo no trepe por encima de la foto. Con los titulares reales
   del sitio (el más largo tiene 96 caracteres) nunca llega a los 4. */
.hh-titulo {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.6rem, 3.2vw, 2.75rem); line-height: 1.14;
  color: var(--blanco); max-width: 30ch; margin-inline: auto;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
  overflow: hidden;
  text-wrap: balance;
}

/* La foto de la noticia llena el hueco, con zoom, sin franjas arriba ni abajo.
   Es la referencia que eligió el cliente (jesuitas.org.py, 27-ago-2026).

   object-position 50% 38%: al recortar se sacrifica más piso que cielo, porque
   en una foto de grupo las caras están arriba del centro. Es el mismo criterio
   que usa scripts/optimizar_fotos.py al preparar las fotos.

   El relleno desenfocado que había acá se retiró junto con el "contain": ya no
   sobra ningún borde que rellenar. */
.hh-slide:not([data-slide="0"]) .hero-fondo { overflow: hidden; }
.hh-slide:not([data-slide="0"]) .hero-fondo > img {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
}
/* La portada conserva EXACTAMENTE su composición original (padding y separación
   de los botones vienen de .hero-inner / .hero-foto). Solo las historias de
   noticia, que llevan más texto, aprietan un poco la separación. */
.hh-slide:not([data-slide="0"]) .hero-acciones { margin-top: 1.4rem; }
/* En la noticia el texto está abajo y sobre una foto imprevisible: el velo
   inferior sube a 0.9 para que el titular pase contraste con cualquier imagen. */
.hh-slide:not([data-slide="0"]) .hero-velo {
  background:
    linear-gradient(to bottom, rgba(20, 8, 11, 0.5) 0, rgba(20, 8, 11, 0.1) 18%, transparent 34%),
    linear-gradient(to top, rgba(20, 8, 11, 0.9) 3%, rgba(20, 8, 11, 0.45) 38%, rgba(20, 8, 11, 0.06) 100%);
}

/* con el movimiento reducido no hay autoplay: se ve la portada y se navega a mano */
@media (prefers-reduced-motion: reduce) {
  .hh-slide { transition: none; }
  .hh-barra.es-corriendo span::after { animation: none; transform: scaleX(1); }
  .hh-zona { opacity: 1; }}

@media (max-width: 720px) {
  .hh-barra { width: 24px; }
  .hh-titulo { font-size: clamp(1.25rem, 5.2vw, 1.7rem); max-width: none; }
  .hh-zona { width: 26%; opacity: 1; }
  .hh-zona::after { opacity: 0.55; }}

/* ============================================================
   Ajustes finales de teléfono
   Van al final a propósito: son overrides de reglas que aparecen más abajo en
   el archivo y, con la misma especificidad, gana la última.
   ============================================================ */
@media (max-width: 720px) {
  /* los rótulos de Contacto quedaban en 11,5 px, ilegibles en la mano */
  .contacto-datos dt { font-size: 0.8rem; }
  .mapa-pista { font-size: 0.78rem; }}

/* ---------- Botón "Ver el mapa" sobre el dibujo de Paraguay del Inicio.
   El mapa interactivo se dejó fuera del Inicio por tiempo de carga (reunión del
   24-ago-2026), así que el dibujo tiene que anunciar solo que hay algo detrás.
   El enlace cubre TODO el dibujo, no solo la píldora: el dibujo ya parecía
   tocable y quien apunta al país tiene que llegar igual. ---------- */
.mapa-py-cta {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: clamp(2.6rem, 6vw, 4rem);
  text-decoration: none;
  /* el degradado despega la píldora del dibujo sin taparlo */
  background: linear-gradient(to top, rgba(255, 255, 255, 0.92) 8%, rgba(255, 255, 255, 0) 40%);
  opacity: 0;
  transition: opacity 0.45s var(--curva);
}
/* Sin JS el degradado nunca se revela: el enlace tiene que verse igual. */
html:not(.js) .mapa-py-cta,
.mapa-py.visible .mapa-py-cta { opacity: 1; }
.mapa-py-cta .btn { pointer-events: none; }   /* el clic lo toma el <a> entero */
.mapa-py-cta:hover .btn,
.mapa-py-cta:focus-visible .btn {
  background: var(--bordo);
  border-color: var(--bordo);
  color: var(--blanco);
}
.mapa-py-cta:focus-visible { outline: 2px solid var(--bordo); outline-offset: 3px; border-radius: var(--radio-img); }

@media (prefers-reduced-motion: reduce) {
  .mapa-py-cta { transition: none; }
}


/* ============================================================
   QUÉ HACEMOS · desplegables
   Los ejes y los proyectos se abren en el lugar, con <details> nativo: abre sin
   JavaScript, ya trae el estado para lectores de pantalla y no hace falta
   inventar un acordeón. Pedido del cliente del 24-ago-2026 ("lista desplegable").
   ============================================================ */

/* El mosaico del eje ahora es un enlace a su recuadro. Cubre todo el mosaico
   para que el área táctil sea la que se ve. */
.qh-eje-link { position: absolute; inset: 0; display: block; color: inherit; text-decoration: none; }
.qh-eje-ver {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s var(--curva), transform 0.35s var(--curva);
}
.qh-eje-link:hover .qh-eje-ver,
.qh-eje-link:focus-visible .qh-eje-ver { opacity: 0.92; transform: none; }
.qh-eje-link:focus-visible { outline: 2px solid var(--blanco); outline-offset: -4px; border-radius: var(--radio); }
/* En el teléfono no hay hover: la pista se muestra siempre. */
@media (hover: none) {
  .qh-eje-ver { opacity: 0.92; transform: none; }}

.qh-lineas { margin-top: clamp(1.6rem, 3vw, 2.4rem); display: grid; gap: 0.6rem; }

.qh-linea,
.qh-fila { --c: var(--bordo); }

.qh-linea {
  border: 1px solid var(--gris-claro);
  border-radius: var(--radio);
  background: var(--blanco);
  overflow: hidden;
  transition: border-color 0.3s var(--curva);
}
.qh-linea[open] { border-color: color-mix(in srgb, var(--c) 45%, var(--gris-claro)); }
.qh-linea > summary,
.qh-fila > summary {
  cursor: pointer;
  list-style: none;              /* Firefox */
  display: flex;
  align-items: center;
  gap: 1rem;
}
/* El triángulo por defecto de Safari y Chrome no se puede estilar: se saca y se
   dibuja un signo propio, que además toma el color del eje. */
.qh-linea > summary::-webkit-details-marker,
.qh-fila > summary::-webkit-details-marker { display: none; }

.qh-linea > summary {
  padding: clamp(0.95rem, 1.8vw, 1.25rem) clamp(1rem, 2vw, 1.4rem);
  border-left: 4px solid var(--c);
}
.qh-linea > summary:hover { background: color-mix(in srgb, var(--c) 5%, transparent); }
.qh-linea > summary:focus-visible { outline: 2px solid var(--c); outline-offset: -3px; }
.qh-linea-n { font-family: var(--serif); font-weight: 600; font-size: 1.08rem; flex: 1; }

/* El signo "+" que se convierte en "-" al abrir. Dos barras giradas, así la
   transición es un giro y no un cambio de carácter. */
.qh-linea-mas,
.qh-fila-mas { position: relative; width: 15px; height: 15px; flex: none; }
.qh-linea-mas::before, .qh-linea-mas::after,
.qh-fila-mas::before, .qh-fila-mas::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  border-radius: 2px;
  background: var(--c);
  transition: transform 0.35s var(--curva);
}
.qh-linea-mas::after,
.qh-fila-mas::after { transform: rotate(90deg); }
.qh-linea[open] .qh-linea-mas::after,
.qh-fila[open] .qh-fila-mas::after { transform: rotate(0deg); }

.qh-linea-cuerpo {
  padding: 0 clamp(1rem, 2vw, 1.4rem) clamp(1.1rem, 2vw, 1.5rem) calc(clamp(1rem, 2vw, 1.4rem) + 4px);
}
.qh-linea-d { color: var(--texto-suave); font-size: var(--t-chico); max-width: 68ch; }
.qh-linea-cuerpo h4,
.qh-fila-cuerpo h4 {
  margin-top: 1.1rem;
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gris-medio);
}
.qh-linea-cuerpo ul,
.qh-fila-cuerpo ul { margin-top: 0.6rem; display: grid; gap: 0.55rem; list-style: none; padding: 0; }
.qh-linea-cuerpo li,
.qh-fila-cuerpo li {
  position: relative;
  padding-left: 1.4rem;
  font-size: var(--t-chico);
  line-height: 1.6;
  color: var(--texto-suave);
  max-width: 72ch;
}
.qh-linea-cuerpo li::before,
.qh-fila-cuerpo li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c);
}

/* --- Filas de proyecto: mismo mecanismo, sin caja (viven dentro del índice) --- */
.qh-fila > summary {
  padding: clamp(0.95rem, 1.6vw, 1.25rem) clamp(0.7rem, 1.4vw, 1.1rem);
  align-items: flex-start;
}
.qh-fila > summary > span:first-child { flex: 1; }
.qh-fila > summary:focus-visible { outline: 2px solid var(--bordo); outline-offset: -2px; border-radius: 8px; }
/* La fila era un <a> y el nombre estaba en línea; ahora el bloque de texto va a
   la izquierda y el signo a la derecha. */
.qh-fila > summary { flex-wrap: wrap; }
.qh-fila > summary .qh-fila-n { flex: 1 1 100%; order: 3; }
.qh-fila > summary .qh-fila-meta { order: 1; }
.qh-fila > summary .qh-fila-mas { order: 2; margin-left: auto; margin-top: 0.15rem; }
.qh-fila-cuerpo {
  padding: 0 clamp(0.7rem, 1.4vw, 1.1rem) clamp(1.1rem, 2vw, 1.4rem);
}
.qh-fila-cuerpo > p { color: var(--texto-suave); font-size: var(--t-chico); max-width: 70ch; }
.qh-fila-cuerpo .enlace-flecha { margin-top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .qh-eje-ver,
  .qh-linea-mas::before, .qh-linea-mas::after,
  .qh-fila-mas::before, .qh-fila-mas::after { transition: none; }}




/* ---------- Mosaicos del mapa ----------
   Vienen de OpenStreetMap, que no pide clave de API pero llega a todo color
   (verdes, rutas naranjas). Sin esto compite con el bordó y con el marfil.
   El filtro lo deja parecido al estilo claro de CARTO que se usaba antes.
   Solo toca las imágenes de fondo: los polígonos de las jurisdicciones viven en
   otro pane (overlayPane) y conservan su color. ---------- */
#mapa-diocesis .leaflet-tile-pane {
  filter: grayscale(0.92) contrast(0.86) brightness(1.08) sepia(0.12);
}

/* ---------- Silueta de Paraguay del Inicio y de Quiénes somos ----------
   Es el MISMO dibujo del mapa (se genera de la misma geometría con
   scripts/build_svg_inicio.py), pero como SVG suelto: acá no hace falta Leaflet
   ni los 258 KB de los límites, y así el Inicio no paga ese costo de carga. ---------- */
.mapa-py-svg { display: block; }
.mapa-py-svg svg { display: block; width: 100%; height: auto; }
/* Entran de a una, en el orden en que las numeró el generador (--i).
   Es una TRANSICIÓN y no una animación con "forwards" a propósito: con la
   animación, si por lo que sea no llega a correr, los caminos se quedan en
   opacidad 0 y el mapa desaparece. Ya pasó con las tarjetas del Inicio. Con
   transición, el estado final lo fija la regla, corra o no corra. */
.mapa-py-svg .py-j {
  opacity: 0;
  transition: opacity 0.55s var(--curva), fill 0.3s var(--curva);
  transition-delay: calc(var(--i) * 45ms), 0s;
}
/* Sin JavaScript el dibujo tiene que verse igual: mismo criterio que .revelar. */
html:not(.js) .mapa-py-svg .py-j { opacity: 1; }
.mapa-py.visible .mapa-py-svg .py-j { opacity: 1; }
/* El botón queda por encima del dibujo. */
.mapa-py .mapa-py-cta { z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .mapa-py-svg .py-j { opacity: 1; transition: none; }}


/* Noticias vinculadas a un eje, dentro de su recuadro desplegable. */
.qh-linea-notas li { padding-left: 0; }
.qh-linea-notas li::before { content: none; }
.qh-linea-notas a {
  color: var(--texto);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
  transition: border-color 0.25s var(--curva), color 0.25s var(--curva);
}
.qh-linea-notas a:hover { color: var(--c); border-bottom-color: var(--c); }
.qh-linea-fecha {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  color: var(--gris-medio);
}


/* ============================================================
   CIUDADANÍA · la identidad del PROYECTO, no la del sitio
   ============================================================
   Otra paleta y otra tipografía a propósito: son los lineamientos del proyecto
   "Fe, Ciudadanía y Bien Común" (AECID + DECIDAMOS), que todas las
   organizaciones que participan respetan. Los valores están tomados de la
   página que ya estaba publicada (ver referencia/ciudadania-original/), no
   inventados.

   Todo cuelga de .ciu: el resto del sitio no se entera.
   ============================================================ */
.ciu {
  --bordo: #7F1912;                /* el bordó del proyecto, más rojo que el del sitio */
  --bordo-oscuro: #430C08;
  --naranja: #F39200;              /* el acento que lo distingue */
  --marfil: #FBF5EC;               /* crema más cálida que el marfil institucional */
  --crema: #F4E7D6;
  --serif: "Spectral", Georgia, "Times New Roman", serif;
  background: var(--marfil);
}

/* las secciones tienen que frenar debajo de las dos barras al saltar al ancla */
.ciu [id] { scroll-margin-top: 130px; }

/* ---------- Títulos y textos ---------- */
.ciu h2, .ciu h3 { font-family: var(--serif); color: var(--bordo); }
.ciu .cifra-numero { color: var(--bordo); font-family: var(--serif); }

@media (max-width: 820px) {
  .ciu [id] { scroll-margin-top: 118px; }}