/* ─── Adview — ajustes sobre el maquetado ───────────────────────────────
   styles.css es la hoja original del maquetado y se conserva intacta: es
   lo que nos permite verificar que la migración a WordPress es fiel al
   diseño. Todo arreglo posterior vive aquí, y se encola DESPUÉS de ella.

   Regla de la casa: cada bloque explica qué corrige y por qué, para que
   dentro de un año se entienda si el ajuste sigue haciendo falta.
   ───────────────────────────────────────────────────────────────────── */

/* ── Tipografía serif ───────────────────────────────────────────────────
   El maquetado usaba Playfair Display. Se sustituye por EB Garamond sin
   tocar styles.css: las 32 reglas serif del sitio consumen la variable
   --serif y ninguna nombra la familia a mano, así que basta redeclararla
   aquí. Comprobado: --serif solo se define en styles.css:30. Misma
   especificidad que allí, pero esta hoja carga después y gana.

   No se toca ningún font-style. La cursiva se queda exactamente donde el
   diseño ya la tenía (13 reglas) y la redonda donde no (19).

   El logotipo grande de la portada no cambia: es un SVG, no texto.
   ───────────────────────────────────────────────────────────────────── */
:root {
  --serif: 'EB Garamond', Georgia, serif;

  /* Compensación de tamaño.

     EB Garamond tiene la altura de x un 21% menor que Playfair —medido
     sobre el sitio, 42-43 frente a 52-53 a 100px—, así que al mismo
     font-size se ve bastante más chica y los títulos pierden peso frente
     al cuerpo en Inter.

     font-size-adjust fija la altura de x en proporción al font-size, sea
     cual sea la fuente que acabe pintando. 0.475 deja EB Garamond ~12% más
     grande. Igualar a Playfair del todo serían 0.52, pero eso la agranda un
     22% y con ella mayúsculas y descendentes: se ve inflada. 0.475 es el
     punto en el que las dos ocupan lo mismo a la vista.

     Va en variable para poder afinarlo en un solo sitio. */
  --serif-ajuste: 0.475;
}

/* La lista sale de `grep "var(--serif)" styles.css overrides.css`: son todos
   los elementos serif del sitio. Se puede volver a derivar igual dentro de un
   año para comprobar que sigue completa.

   No puede ir en :root ni en body: font-size-adjust se hereda, y arriba
   alcanzaría también a Inter —altura de x 0.727—, que quedaría reducida a dos
   tercios. Tiene que ir elemento por elemento.

   Dos exclusiones deliberadas:

     · .deco-semi y .semicolon-parallax, los punto y coma decorativos de hasta
       44rem. Son composición posicionada en absoluto, no texto: agrandarlos un
       12% movería el encuadre. Si la marca pierde presencia con la fuente nueva
       —el ; de EB Garamond es 14% más bajo y 20% más estrecho— se corrige su
       font-size, no esto.

     · .nav__mobile a:not(.btn-nav). El botón "Hacer una donación" del menú
       móvil es un <a> dentro de .nav__mobile, así que casa con .nav__mobile a.
       Su familia sí vuelve a Inter por especificidad (styles.css:225), pero
       font-size-adjust no tiene ahí nada que lo pise y lo encogería a dos
       tercios. El :not() lo deja fuera.

   Donde el navegador no soporte font-size-adjust (Chrome anterior a 127,
   Safari anterior a 16.4) la fuente sale a su tamaño nominal: más pequeña,
   no rota. De propina el ajuste también alcanza a Georgia, el fallback, así
   que el salto mientras carga la fuente es menor que antes. */
.nav__mobile a:not(.btn-nav),
.hero__title,
.hero__subtitle,
.section__title em,
.stat__num,
.signal-item__title,
.donation-tier__amount,
.donation-tier__custom,
.story-quote,
.video-bullet strong,
.intro-block__quote em,
.help-card__name,
.help-card__phone,
.contact-info__title em,
.mission-vision__text,
.pillar__title,
.semicolon-block__title em,
.blog-card__title,
.page-hero__title em,
.footer__semicolon,
.philosophy-quote,
.video-bullet-item strong,
.evt-popup__title,
.testimony-card__quote,
.articulo__titulo,
.articulo__cuerpo h2,
.articulo__cuerpo h3,
.articulo__cuerpo h4,
.articulo__cuerpo blockquote,
.donation-tier__name,
.pagina-generica h2,
.pagina-generica h3,
.pagina-generica h4,
.pagina-legal__titulo {
  font-size-adjust: var(--serif-ajuste);
}

/* ── Bloque "Historia de origen" (portada) ──────────────────────────────
   El maquetado resolvía este bloque con un grid en atributo style, sin
   clase. Dos consecuencias:

     1. Ninguna media query podía alcanzarlo (un style inline gana siempre),
        así que en móvil seguía a dos columnas.
     2. Peor aún: con `1fr 1.4fr` las fracciones no bajan del min-content de
        cada columna. El texto (párrafos largos) empujaba hasta quedarse con
        casi todo el ancho y el video terminaba en 24x13 px reales a 375px.

   `minmax(0,…)` es la pieza que desactiva ese suelo de min-content y hace
   que las fracciones se respeten de verdad.

   El bloque se divide en tres áreas —head, body, media— en lugar de dos
   columnas, para poder reordenarlas por tamaño de pantalla:

     escritorio            móvil
     ┌──────┬────────┐     ┌────────┐
     │ head │        │     │  head  │
     ├──────┤ media  │     ├────────┤
     │ body │        │     │ media  │
     └──────┴────────┘     ├────────┤
                           │  body  │
                           └────────┘

   `row-gap: 0` es deliberado: la separación entre el título y los párrafos
   la sigue dando el margin-bottom del propio <h2> (1.25rem), igual que
   cuando ambos vivían en el mismo div. Así el escritorio queda idéntico al
   diseño original pese al cambio de estructura. */
.origin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  grid-template-areas:
    "head media"
    "body media";
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: 0;
  align-items: start;
}

.origin-grid__head  { grid-area: head; }
.origin-grid__body  { grid-area: body; }
.origin-grid__media { grid-area: media; }

/* 767px es el mismo punto en el que styles.css colapsa el resto de bloques
   a dos columnas (.intro-block, .signals-block, .contact-grid…). */
@media (max-width: 767px) {
  .origin-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "media"
      "body";
  }
}

/* ── Tarjetas de ayuda inmediata (portada) ──────────────────────────────
   La tercera tarjeta perdió su nombre y su descripción (repetían el 911),
   así que se quedó con dos líneas frente a las cuatro de las otras. Como
   las tarjetas de un grid se estiran a la misma altura, eso dejaba un hueco
   al pie de la tarjeta corta.

   Empujando el teléfono al fondo, los tres números quedan sobre la misma
   línea y ninguna tarjeta se ve inacabada. Va acotado a --3col para no
   tocar las tarjetas de la página de Ayuda, que sí llevan las cuatro
   líneas y se ven bien tal cual. */
.help-cards--3col .help-card__phone { margin-top: auto; }

/* ── Cuatro frentes de trabajo (Nosotros) ───────────────────────────────
   .pillars-grid de styles.css asume 5 pilares y trae su propia escalera
   (5 → 3 en 1023px → 2 en 767px → 1 en 480px). Nosotros tiene 4, y el
   maquetado lo resolvía con un style inline que anulaba esa escalera
   completa: los 4 pilares seguían en fila a 375px y se desbordaban.

   Aquí se repite la escalera, adaptada a 4 columnas. Hace falta declararla
   entera: al ir esta hoja después de styles.css, una regla suelta ganaría
   también dentro de sus media queries y dejaría las 4 columnas fijas. */
.pillars-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1023px) {
  .pillars-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .pillars-grid--4 { grid-template-columns: 1fr; }
}

/* ── Líneas de emergencia (Nosotros) ────────────────────────────────────
   Tres tarjetas con el teléfono en white-space:nowrap. El grid inline del
   maquetado no colapsaba, así que en móvil las columnas no cabían y el
   tercer número quedaba fuera de la pantalla.

   Se mantienen las 3 columnas de `1fr` del diseño en lugar de minmax(0,…):
   con los números sin posibilidad de partirse, es preferible que la columna
   crezca a que el texto se salga de su tarjeta. Por debajo de 767px hay una
   sola columna, así que ese ensanchamiento ya no puede desbordar nada. */
.emergency-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 860px;
  margin: 0 auto;
}

@media (max-width: 767px) {
  .emergency-grid { grid-template-columns: 1fr; }
}

/* ── Aviso de cierre en Eventos de Helping Hearts ───────────────────────
   Sustituye a la cuarta tarjeta fija de "Más eventos en camino", que vivía
   dentro de la rejilla y se confundía con un evento real.

   Va centrado a propósito: colgando debajo de una rejilla de tarjetas, un
   bloque alineado a la izquierda parece una tarjeta huérfana, mientras que
   centrado se lee como el cierre de la sección. Reutiliza la tipografía de
   las tarjetas (.blog-card__title y .blog-card__body) para no introducir
   tamaños nuevos, y el ancho máximo evita renglones demasiado largos. */
.eventos-aviso {
  margin-top: 3rem;
  text-align: center;
}

/* Sin ancho máximo: el párrafo cabe en un solo renglón desde unos 560px de
   contenedor hacia arriba. Por debajo envuelve, que es lo correcto — forzarlo
   con nowrap lo sacaría de la pantalla. */
.eventos-aviso .blog-card__body { margin-inline: auto; }

.eventos-aviso .btn { margin-top: 0.5rem; }

/* ── Badge de estado en las tarjetas de evento ──────────────────────────
   El maquetado repetía este bloque de estilos en un atributo style por cada
   variante. Como ahora hay dos estados (próximo / finalizado, según si la
   fecha del evento ya pasó), viven aquí. */
.evento-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: var(--accent-light);
  color: var(--dark);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.625rem;
  border-radius: 2px;
}

/* Finalizado: gris apagado en lugar del verde, para que un evento que ya
   pasó no compita visualmente con los que están por venir. */
.evento-badge--finalizado {
  background: rgba(44, 44, 44, 0.8);
  color: var(--cream);
}

/* ── Texto solo para lectores de pantalla ───────────────────────────────
   El maquetado no traía una clase para esto. Se usa en las etiquetas del
   paginador de testimonios: los puntos son círculos sin texto visible, y
   sin nombre accesible serían botones anónimos.

   clip-path en vez de display:none o visibility:hidden, que sí ocultarían
   el texto a los lectores de pantalla. */
.adview-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Paginador de testimonios (Con tus palabras) ────────────────────────
   Puntos para alternar entre grupos de 3 testimonios. El círculo visible
   mide 10px y el botón 25px, así que el área de clic es mayor que el punto.
   25px cumple el mínimo de WCAG 2.2 (24px); queda por debajo de los 44px
   que se recomiendan para uso táctil, y es una decisión de diseño. */
.testimony-dots {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  margin-top: 2.5rem;
}

.testimony-dots__dot {
  width: 25px;
  height: 25px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* El círculo se pinta con ::after para que el botón conserve su área de
   toque completa. */
.testimony-dots__dot::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(247, 245, 239, 0.25);
  transition: background 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.testimony-dots__dot:hover::after {
  background: rgba(247, 245, 239, 0.5);
}

.testimony-dots__dot.is-active::after {
  background: var(--accent-light);
  transform: scale(1.3);
}

/* El foco tiene que verse: son los únicos controles de esta sección. */
.testimony-dots__dot:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: -8px;
  border-radius: 2px;
}

/* Solo el grupo visible arrastra el margen superior del grid. */
.testimony-slider__page[hidden] { display: none; }

/* ── Transición del paginador ───────────────────────────────────────────
   Las usan las tres secciones paginadas (historias, agenda de Eventos y
   recomendaciones de Recursos). Las pone y las quita testimonios.js; ver
   ahí el porqué de cada pieza.

   La entrada no está aquí: la hace la animación que el sitio ya tiene para
   el scroll (.reveal y .stagger en styles.css), que el JS rebobina. Aquí
   solo vive lo que no existía: la salida y el cambio de altura.

   Los dos tiempos están duplicados en testimonios.js (MS_SALIDA y MS_ALTO).
   Si cambias uno, cambia el otro.
   ───────────────────────────────────────────────────────────────────── */

/* Lo que sale se va hacia arriba mientras se desvanece. Las tres versiones
   del selector son por especificidad, no por capricho: una tarjeta saliente
   lleva .reveal.is-visible (0,2,0), que fija opacity 1 y transform none, y
   .adview-sale a secas (0,1,0) no la alcanzaría. Empatando en especificidad
   gana esta hoja, que carga después.

   La curva NO es la --ease-out del sitio. Esa está pensada para entradas y
   sale disparada: a la cuarta parte del tiempo ya ha recorrido el 85% del
   camino, así que un elemento que se va con ella desaparece de golpe y
   volveríamos al corte seco que se quería quitar. Esta otra es lo contrario
   —arranca despacio y acelera—, que es como se comporta algo que se marcha.
   Las entradas siguen usando la del sitio, sin tocar. */
.adview-sale,
.reveal.adview-sale,
.stagger.adview-sale {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1),
              transform 0.2s cubic-bezier(0.4, 0, 1, 1);
}

/* La caja que va de una altura a otra. Cuál es lo decide testimonios.js: la
   rejilla de tarjetas en Recursos y en la agenda, y el grupo de historias en
   "Con tus palabras". Cuándo se mueve, y por qué no es el mismo momento
   creciendo que encogiendo, también está explicado ahí.

   ⚠ Aquí NO se recorta, y no por descuido. La caja se mueve siempre hacia
   donde le sobra sitio respecto a su contenido, así que nunca hay nada que
   recortar. Y recortar hacía daño: mientras la caja crecía se comía el borde
   inferior de la última fila de tarjetas durante toda la animación.

   ⚠ Si algún día hiciera falta recortar, que sea con `overflow: clip` y
   nunca con `hidden`: `hidden` crea un contexto de formato de bloque y
   `clip` no. Sobre una rejilla da igual, pero sobre un bloque cambia el
   layout, porque los márgenes de sus hijos dejan de colapsar hacia fuera.
   Pasó aquí: con la caja de historias en .testimony-slider, cuyo primer hijo
   lleva margin-top: 40px, el contenido bajaba 40px al empezar la animación y
   volvía a su sitio al acabarla. Lo mismo vale para align-content, que crea
   el contexto igual ahora que los navegadores la aceptan en layout de
   bloque: por eso está acotada abajo a los selectores que sí son rejilla.

   La duración la pone el JS en --adview-alto, porque no es la misma en los
   dos sentidos: creciendo tiene que caber en lo que dura la salida. */
.adview-midiendo {
  transition: height var(--adview-alto, 0.35s) var(--ease-out);
}

/* Solo sobre las cajas que son rejilla. Ahí hace falta: con una altura
   impuesta mayor que el contenido —que es siempre el caso, ver arriba— y el
   align-content por defecto (stretch), las filas se estiran para rellenarla
   y las tarjetas se deforman durante la animación. Medido en Recursos: de
   174px a 274px de alto. */
.blog-grid.adview-midiendo,
.testimony-grid.adview-midiendo {
  align-content: start;
}

/* Quien pide no animarse no se anima. El JS ya evita la transición cuando
   esta consulta coincide; esto es el cinturón por si alguna clase quedara
   puesta a media animación. */
@media (prefers-reduced-motion: reduce) {
  .adview-sale,
  .reveal.adview-sale,
  .stagger.adview-sale,
  .adview-midiendo {
    transition: none;
  }
}

/* ── Dos campos en una fila (formulario de "Con tus palabras") ──────────
   El nombre ocupa el espacio disponible y la edad se queda con lo justo:
   un selector de dos dígitos no necesita más. Por debajo de 480px se
   apilan, porque a esos anchos el campo de nombre quedaría demasiado
   estrecho para escribir con comodidad.

   El margin-bottom lo sigue poniendo cada .form-group, así que la fila no
   necesita separación propia. */
.form-row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.form-row > .form-group { flex: 1; margin-bottom: 1.125rem; }

/* El selector va con el mismo peso que la regla de arriba (dos clases y el
   combinador): con solo .form-row__edad perdería por especificidad y la edad
   acabaría tan ancha como el nombre. */
.form-row > .form-row__edad { flex: 0 0 7.5rem; }

@media (max-width: 480px) {
  .form-row { flex-wrap: wrap; }
  .form-row > .form-row__edad { flex: 1 1 100%; }
}

/* ── Logo en el hero de Helping Hearts ──────────────────────────────────
   Sustituye al título escrito, así que se dimensiona para pesar lo mismo:
   el texto "Helping Hearts" a su tamaño máximo (5rem) medía unos 480px, y
   el logo se mueve entre 240 y 460px según el ancho.

   El clamp con vw evita tener que declarar breakpoints: a 320px son 240px
   (caben en los 280 del contenedor) y de 1100px en adelante se queda fijo
   en 460. Las medidas van también en atributos width/height en el HTML para
   que el navegador reserve el espacio y el hero no salte al cargar. */
.page-hero__logo {
  display: block;
  width: clamp(240px, 42vw, 460px);
  height: auto;
}

/* ── Tarjetas de tono de voz (Dilo; la marca) ───────────────────────────
   Cuatro tarjetas en dos columnas. El maquetado lo resolvía con un grid en
   atributo style: a 320px seguían las dos columnas, de unos 124px cada una,
   y con el padding de 2.25rem que llevan las tarjetas el texto se salía de
   la pantalla.

   minmax(0,…) evita además que el texto largo fuerce las columnas a crecer
   por encima de su fracción. */
.tono-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

@media (max-width: 767px) {
  .tono-grid { grid-template-columns: 1fr; }
}

/* ── Los tres datos del propósito (Con tus palabras) ────────────────────
   El maquetado montaba este bloque con flex y paddings en atributos style.
   Con `flex:1; min-width:160px` y tres elementos, en un móvil de 375px
   caben dos arriba y el tercero baja solo — arrastrando su padding-left de
   2rem, así que quedaba visiblemente desalineado respecto a los otros dos.

   Aquí los paddings salen de :first-child/:last-child, que reproducen
   exactamente lo que hacía el inline en escritorio, y por debajo de 767px
   pasa a una columna con separadores horizontales (el mismo recurso que usa
   styles.css con .pillar en pantallas estrechas). */
.proposito-datos {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line-light);
}

.proposito-datos__item {
  flex: 1;
  min-width: 160px;
  padding-inline: 2rem;
  border-right: 1px solid var(--line-light);
}

.proposito-datos__item:first-child { padding-left: 0; }

.proposito-datos__item:last-child {
  padding-right: 0;
  border-right: 0;
}

@media (max-width: 767px) {
  .proposito-datos { display: block; }

  .proposito-datos__item {
    padding: 0 0 1.25rem;
    border-right: 0;
    border-bottom: 1px solid var(--line-light);
  }

  .proposito-datos__item + .proposito-datos__item { padding-top: 1.25rem; }

  .proposito-datos__item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }
}

/* ── Mensaje de éxito sobre fondo claro ─────────────────────────────────
   .form-success trae color:var(--cream) porque los otros cuatro formularios
   del sitio viven en secciones oscuras. El de "Recibe avisos" es el único
   sobre .section--cream, así que el texto salía crema sobre crema: se leía
   el borde verde y nada más.

   styles.css tiene un bloque entero de overrides para secciones claras
   (body.page-interior .section--cream .section__title, .blog-card__body,
   .alert-box__body…) y .form-success simplemente se quedó fuera de la
   lista. Esto lo añade con el mismo patrón. */
body.page-interior .section--cream .form-success { color: var(--ink); }

/* ── Bloque "Recibe avisos" (Helping Hearts) ────────────────────────────
   780px es lo que necesita el título para no partirse: pide 745px cuando la
   tipografía llega a su tamaño máximo (52px, a partir de 1300px de ancho).

   El margin-inline en .section__body corrige un descuadre del maquetado: esa
   clase trae max-width:560px sin márgenes automáticos, así que dentro de un
   contenedor centrado el párrafo se pegaba a la izquierda mientras su texto
   iba centrado. Con 600px el desfase pasaba desapercibido; con 780 no. */
.avisos-block {
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}

.avisos-block .section__body { margin-inline: auto; }

/* ── Botones con etiqueta al lado ───────────────────────────────────────
   El maquetado separaba la etiqueta del botón con un margin-left. Funciona
   mientras caben en la misma línea; cuando la etiqueta salta de renglón se
   lleva el margen consigo y aparece sangrada respecto al botón. Con flex y
   gap la separación es la misma en escritorio y desaparece al envolver. */
.cta-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

/* ── Botones en pantallas estrechas ─────────────────────────────────────
   .btn lleva white-space:nowrap, que protege las etiquetas cortas de
   partirse a media palabra. El efecto secundario es que una etiqueta larga
   no puede encogerse: "Conoce el Programa Escolar →" medía 318px y a 320px
   de viewport se salía 22px de la pantalla, cortada sin posibilidad de
   scroll (el body lleva overflow-x:clip).

   Por debajo de 480px se permite que el texto del botón pase a dos líneas.
   Solo afecta a las etiquetas que no caben: las cortas siguen en una línea
   exactamente igual que antes. */
@media (max-width: 480px) {
  .btn { white-space: normal; text-align: center; }
}

/* ── Reproductor de video ───────────────────────────────────────────────
   styles.css solo contemplaba un <iframe> dentro de .video-wrap (el
   maquetado asumía un embed externo). El video ahora se sirve desde la
   Biblioteca de medios con la etiqueta <video> nativa, que necesita el
   mismo posicionamiento para llenar el marco 16:9.

   `contain` en vez de `cover`: si algún día se sustituye por un video que
   no sea 16:9, se verá completo con bandas en lugar de recortado. */
.video-wrap__player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
  background: var(--dark);
}

/* ── Rejillas de tarjetas (Eventos, Recursos) ──────────────────────────
   El maquetado declaraba estas rejillas de 3 columnas en el atributo
   style, así que ningún media query podía tocarlas y en móvil las
   tarjetas quedaban de ~92px, con el texto ilegible.

   Aquí no hacía falta clase nueva: .blog-grid (styles.css:759) ya es
   exactamente esa rejilla —repeat(3,1fr), gap 2rem, margin-top 3rem— y
   además colapsa a una columna en 767px. Las dos de Eventos pasaron a
   usarla, así que se comportan como el resto de las rejillas del sitio.

   Modificador para las que el maquetado traía con 2.5rem de margen
   superior en lugar de 3rem (la agenda de Eventos, y la rejilla de
   Recursos cuando le toque). */
.blog-grid--tight { margin-top: 2.5rem; }

/* Paso intermedio a dos columnas, que .blog-grid no tenía: saltaba de 3
   a 1 en 767px, y justo por encima de ese punto las tres columnas medían
   204px. Con el padding de la tarjeta, el cuerpo del texto se quedaba en
   dos o tres palabras por línea y una descripción normal ocupaba diez
   renglones. A 768px, dos columnas dan 344px cada una.

   La escalera va completa —incluido el paso a una columna que ya estaba
   en styles.css— porque esta hoja se encola después: una regla de 1023px
   suelta ganaría también dentro del media query de 767px de la hoja
   anterior y dejaría dos columnas fijas hasta el móvil más estrecho.

   Solo afecta a Eventos y Recursos, las dos únicas páginas que usan
   .blog-grid. */
@media (max-width: 1023px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .blog-grid { grid-template-columns: 1fr; }
}

/* ── Anclas y el nav fijo ───────────────────────────────────────────────
   .nav es position:fixed y mide 72px (60 en móvil), pero el maquetado no
   compensaba ese alto en ningún sitio. Cualquier salto a un ancla dejaba el
   destino a ras del borde superior, es decir con su encabezado escondido
   detrás del menú: pasaba con los 9 enlaces internos del sitio (#donar,
   #registro) y con el botón del popup de detalle.

   scroll-margin-top se aplica al DESTINO, no al que enlaza, así que una sola
   regla sobre las secciones con id los cubre a todos — y también el
   desplazamiento suave que hace popup-detalle.js, porque el navegador
   respeta este margen en scrollIntoView().

   El 1rem extra es aire: pegar el título justo al filo del menú se lee como
   un error de cálculo. */
section[id],
[id]:target {
  scroll-margin-top: calc(var(--nav-h) + 1rem);
}

/* ── Directorio de ayuda (Recursos) ─────────────────────────────────────
   El maquetado forzaba 3 columnas en un atributo style, fuera del alcance de
   cualquier media query: a 320px las tarjetas quedaban de ~90px y el texto se
   salía.

   Ahora son cuatro tarjetas (se sumó "Especialistas") y van las cuatro en un
   solo renglón, que es como se lee un directorio de un vistazo. Probé antes en
   2x2 y el usuario pidió el renglón único.

   Eso deja cada tarjeta en unos 299px a 1265px de pantalla, y los 2.5rem de
   padding lateral de .help-card se comían 80 de ellos. Con 1.75rem quedan 220px
   útiles, que es lo que necesita "800 911 2000" a su tamaño máximo —los
   teléfonos van en white-space:nowrap y no pueden partirse—. El padding
   reducido se limita al rango de 4 columnas: por debajo las tarjetas vuelven a
   ser anchas y el padding original es el que cuadra con el resto del sitio.

   La escalera va completa porque esta hoja se encola después de styles.css:
   una regla suelta ganaría también dentro de sus media queries. */
.help-cards--directorio { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (min-width: 1024px) {
  .help-cards--directorio .help-card { padding-inline: 1.75rem; }
}

/* Cuatro columnas por debajo de 1024px dejarían unos 230px por tarjeta, con el
   título partido en tres renglones. Dos es el paso natural. */
@media (max-width: 1023px) {
  .help-cards--directorio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .help-cards--directorio { grid-template-columns: 1fr; }
}

/* ── Tarjeta de especialistas ───────────────────────────────────────────
   Las otras tres tarjetas tienen un único teléfono como protagonista, a un
   tamaño grande. Esta lleva dos personas, y repetir ese tamaño dos veces la
   dejaría mucho más alta que sus vecinas y con dos focos compitiendo.

   Los nombres bajan a 1.0625rem y los números a 1.125rem: siguen siendo lo
   más visible de su bloque, pero la tarjeta conserva la altura del resto.
   1.125rem es además lo que permite que "+52 1 33 1138 9591" —18 caracteres
   con white-space:nowrap heredado— quepa en los 192px útiles que deja la
   tarjeta a 320px de pantalla. */
.help-card--especialistas .help-card__persona {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.help-card--especialistas .help-card__persona + .help-card__persona {
  margin-top: 1rem;
}

.help-card--especialistas .help-card__name { font-size: 1.0625rem; }

.help-card--especialistas .help-card__phone {
  font-size: 1.125rem;
  margin-top: 0;
}

/* ── Aviso al pie del directorio (Recursos) ─────────────────────────────
   El maquetado le puso max-width:600px, y la frase mide unos 670px: se partía
   siempre en dos renglones. Sin ese tope cabe entera en una línea en
   escritorio y envuelve sola en pantallas estrechas, que es lo correcto —
   forzarla con nowrap la sacaría de la pantalla. */
.directorio-aviso {
  margin-top: 2rem;
  font-size: 0.875rem;
  opacity: 0.65;
}

.directorio-aviso__enlace {
  color: var(--accent-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Separación bajo el extracto de los artículos (Recursos) ────────────
   El texto quedaba pegado a "Leer artículo →", sin nada de aire.

   La causa: styles.css:40 resetea los márgenes de todo (`* { margin: 0 }`)
   y `.blog-card__excerpt` no tiene ninguna regla propia — el maquetado usa
   esa clase en recursos.html pero nunca la definió. El párrafo se quedaba
   con margen 0.

   1rem es exactamente lo que lleva `.blog-card__body` (styles.css:778), que
   es la clase con la que se pinta este mismo texto en Eventos y la portada.
   Así que no es un valor elegido a ojo: iguala Recursos con el resto del
   sitio. */
.blog-card__excerpt { margin-bottom: 1rem; }

/* ── Paginador de la agenda de Eventos ──────────────────────────────────
   La agenda pasó a mostrarse de 6 en 6, sin recargar: mismo mecanismo que
   Historias compartidas, PHP imprime todos los grupos y testimonios.js
   muestra uno a la vez.

   El tema no tenía ningún paginador con números (los testimonios usan
   puntos, .testimony-dots en styles.css), así que este se define completo.

   Los controles son <button> y no enlaces, porque no navegan a ninguna
   parte. Eso obliga a resetear el estilo nativo del botón: el user-agent le
   pone su propio background, borde y tipografía, y styles.css no los toca.

   Las medidas salen de .btn-nav (styles.css): mismo cuerpo de 0.75rem, mismo
   letter-spacing y el border-radius de 2px que usa todo el sitio.

   Las tarjetas fuera de la página y los botones que sobran se ocultan con el
   atributo hidden desde JS. */
.evt-card[hidden],
.adview-paginable[hidden],
.evt-pager__num[hidden] { display: none; }

/* Sin las dos líneas de arriba el atributo hidden no hace nada: tanto
   .blog-card (styles.css:760, display:flex) como .evt-pager__num (más abajo,
   display:inline-flex) declaran display, y una regla de autor gana siempre a
   la del user-agent [hidden]{display:none}, sin importar la especificidad.
   Las flechas no la necesitan porque no declaran display.

   Es la misma razón por la que existe .testimony-slider__page[hidden] más
   arriba en este archivo. */

/* Las tarjetas se paginan de a una, así que un evento puede caer en
   cualquier posición del grid. Las reglas escalonadas de .stagger solo
   llegan a nth-child(6) (styles.css:139-144), pero eso no deja tarjetas
   invisibles: cada una es .reveal y el JS le pone .is-visible, y
   .reveal.is-visible (0,2,0) le gana a .stagger > * (0,1,0). A partir de la
   séptima simplemente entran sin retardo escalonado. */

.evt-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-top: 3rem;
}

.evt-pager__nums {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* Los colores son los de texto claro sobre fondo oscuro: la agenda es una
   .section--soft dentro de una página interior, y body.page-interior ya
   establece color:var(--cream) (styles.css:77). Con los tokens oscuros
   --ink-soft y --line el número inactivo y las flechas quedaban casi
   invisibles contra el fondo. */
.evt-pager__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  background: transparent;
  border: 1px solid var(--line-light);
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--cream);
  cursor: pointer;
  transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out),
              border-color 0.25s var(--ease-out);
}

.evt-pager__num:hover {
  background: var(--accent-light);
  border-color: var(--accent-light);
  color: var(--dark);
}

/* El foco se marca con outline y no con el fondo del hover, para que se
   distinga de "estoy pasando el mouse". Mismo patrón que
   .testimony-dots__dot:focus-visible más arriba. */
.evt-pager__num:focus-visible,
.evt-pager__arrow:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 2px;
}

/* El activo lo marca aria-selected, que es el mismo atributo que ya lleva el
   patrón de pestañas: así el estado visual y el accesible no se separan. */
.evt-pager__num[aria-selected="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.evt-pager__arrow {
  padding: 0;
  background: transparent;
  border: 0;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cream);
  cursor: pointer;
  transition: color 0.25s var(--ease-out);
}

/* En hover se va al verde claro, no al oscuro --accent-dark: sobre este
   fondo el oscuro se perdía. */
.evt-pager__arrow:hover { color: var(--accent-light); }

/* En móvil las flechas se van abajo, centradas bajo los números, para que la
   fila no se parta en tres pedazos desiguales. */
@media (max-width: 560px) {
  .evt-pager {
    gap: 0.875rem;
  }
  .evt-pager__nums { order: -1; width: 100%; justify-content: center; }
}

/* ── Imagen de las tarjetas pegada al contenido ─────────────────────────
   Se quita el margin-bottom:1.25rem de .blog-card__img (styles.css:761).
   En Eventos ese margen se sumaba al padding:1.75rem del bloque de texto
   que va debajo, así que entre foto y categoría había casi 3rem de aire.

   El margen se elimina en la clase, no solo en Eventos, pero hay que
   compensar en Recursos: ahí la imagen no va seguida de un contenedor con
   padding sino de .blog-card__body a pelo, que no tiene ninguno
   (styles.css:778 solo declara tipografía, color, flex y margin-bottom).
   Ese 1.25rem era su única separación, así que se le devuelve como
   margin-top del hermano contiguo.

   Puesto así y no al revés (dejar el margen y quitarlo solo en Eventos)
   porque cualquier tarjeta futura que envuelva su texto en un contenedor
   con padding hereda el espaciado correcto sin tocar nada. */
.blog-card__img { margin-bottom: 0; }

.blog-card__img + .blog-card__body { margin-top: 1.25rem; }

/* ── Ficha de un artículo (single-recurso.php) ──────────────────────────
   Vista de fondo claro: el body no lleva .page-interior (ver
   adview_body_class) y header.php no imprime .int-vignette, así que hereda
   el `body { background: var(--bg) }` crema de styles.css:42 — sin ningún
   override aquí, a propósito.

   Tipografía y color salen de los tokens del tema, no de las medidas
   absolutas del Figma, para que el artículo no se sienta una página ajena.

   RITMO VERTICAL. Los valores de escritorio son los del diseño:

     ruta   → título   75px
     título → meta     25px
     meta   → imagen   60px
     imagen → cuerpo   50px
     cuerpo → volver   50px

   Se expresan con clamp() y no con media queries porque es el idioma del
   tema (--gutter, .section, los títulos) y porque así tablet no necesita
   una tabla propia: cae sola entre los dos extremos. Cada clamp alcanza su
   máximo alrededor de los 1250px y su mínimo por debajo de los 400px.

   Van como margin-top del bloque siguiente y no como margin-bottom del
   anterior, para que un artículo sin imagen destacada no deje el hueco
   colgando. */

/* Barra sólida desde el inicio, no solo al hacer scroll. --int-bg es
   exactamente el #2C3034 pedido, así que se usa el token y no el literal.
   Sigue llevando .nav--dark, que es lo que pone el logo claro y los
   enlaces en crema. */
body.page-articulo .nav {
  background: var(--int-bg);
  border-bottom-color: var(--line-light);
}

.articulo {
  /* --nav-h porque la barra es fixed (styles.css:148). Baja a 60px en
     móvil (styles.css:921) y este calc lo hereda solo. */
  padding-top: calc(var(--nav-h) + clamp(24px, 3vw, 40px));
  padding-bottom: clamp(4rem, 8vw, 7.5rem);
}

.articulo__wrap {
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Breadcrumb con el gris de apoyo del tema (--ink-mute), el mismo que usan
   .section__label y .page-hero__kicker para el texto secundario.

   flex + wrap para que en pantallas estrechas parta por separadores y no a
   media palabra; min-width:0 porque un ítem flex no se encoge por debajo
   de su contenido y el título largo desbordaba. */
.articulo__ruta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ink-mute);
  min-width: 0;
}

.articulo__ruta a { transition: color 0.2s var(--ease-out); }
.articulo__ruta a:hover { color: var(--ink); }

.articulo__ruta-sep { margin-inline: 0.375rem; opacity: 0.6; }

/* El tramo actual no es enlace: se apaga para que la ruta se lea
   de dónde vengo → dónde estoy. */
.articulo__ruta-actual {
  opacity: 0.7;
  min-width: 0;
}

/* Título en cursiva serif, el mismo tratamiento que el tema le da a los
   énfasis de .page-hero__title y .section__title. El tamaño sí escala con
   clamp: 3.5rem fijos partirían palabras en un móvil de 360px. */
.articulo__titulo {
  margin-top: clamp(40px, 6vw, 75px);
  font-family: var(--serif);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--ink);
}

/* Categoría. .blog-card__cat (styles.css:769) aporta el tamaño, las
   versalitas y el verde --accent; aquí solo va lo que esa clase no puede
   resolver.

   display:block porque .blog-card__cat es un <span> y su margin-bottom
   de 0.5rem no se aplica a un elemento inline: en las tarjetas el hueco lo
   daba el <h3> block que va debajo, no ese margen. Con block sí funciona y
   es el que separa la categoría de la fecha. */
.articulo__cat {
  display: block;
  margin-top: clamp(16px, 2vw, 25px);
}

/* El hueco tras el título lo toma la categoría, así que la fecha ya no lo
   necesita. Se anula solo cuando van seguidas: un artículo sin categoría
   conserva su separación. */
.articulo__cat + .articulo__meta { margin-top: 0; }

/* Fecha y tiempo de lectura: pegados al título, son su firma. */
.articulo__meta {
  margin-top: clamp(16px, 2vw, 25px);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
}

/* Imagen con el radio de 2px que usa todo el sitio. 500px de alto del
   diseño, recortada con object-fit para que no se deforme; por debajo de
   ~1250px baja proporcionalmente en lugar de comerse la pantalla. */
.articulo__imagen { margin-top: clamp(32px, 4.8vw, 60px); }

.articulo__imagen img {
  display: block;
  width: 100%;
  height: clamp(220px, 40vw, 500px);
  object-fit: cover;
  border-radius: 2px;
}

/* Cuerpo con la tipografía de .section__body: interlínea 1.75 y
   --ink-soft. */
.articulo__cuerpo {
  margin-top: clamp(32px, 4vw, 50px);
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
  line-height: 1.75;
  color: var(--ink-soft);
}

.articulo__cuerpo > * + * { margin-top: 1.5rem; }

.articulo__cuerpo a {
  color: var(--accent-dark);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.articulo__cuerpo a:hover { color: var(--ink); }

/* Subtítulos: familia y peso de .blog-card__title (serif 700), que es como
   el sitio titula el contenido editorial. */
.articulo__cuerpo h2,
.articulo__cuerpo h3,
.articulo__cuerpo h4 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  margin-top: 2.5rem;
}

.articulo__cuerpo h2 { font-size: clamp(1.375rem, 2.5vw, 1.75rem); }
.articulo__cuerpo h3 { font-size: clamp(1.125rem, 2vw, 1.375rem); }
.articulo__cuerpo h4 { font-size: 1.0625rem; }

.articulo__cuerpo strong { font-weight: 600; color: var(--ink); }

.articulo__cuerpo ul,
.articulo__cuerpo ol {
  padding-left: 1.25rem;
  list-style: revert;   /* styles.css:46 quita las viñetas en todo el sitio */
}

.articulo__cuerpo li + li { margin-top: 0.5rem; }

/* Cita con la barra en --accent, el verde sage del tema. */
.articulo__cuerpo blockquote {
  padding-left: 1.5rem;
  border-left: 2px solid var(--accent);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--ink);
}

.articulo__cuerpo img {
  height: auto;
  border-radius: 2px;
}

/* Enlace de vuelta con el mismo tratamiento de .blog-card__link: verde
   acento, versalitas y la flecha que se separa en hover. */
.articulo__volver {
  margin-top: clamp(32px, 4vw, 50px);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
}

.articulo__volver a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent-dark);
  transition: gap 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.articulo__volver a::before { content: '←'; }
.articulo__volver a:hover { gap: 0.625rem; color: var(--ink); }

/* En móvil el último tramo del breadcrumb repite el h1 que va justo
   debajo, y con títulos largos ocupaba dos o tres renglones de ruido. Se
   deja "Inicio / Recursos", que es lo único que aporta navegación.

   Se oculta con display:none y no con visibility para que no reserve
   espacio; el h1 sigue dando el contexto a los lectores de pantalla. */
@media (max-width: 767px) {
  .articulo__ruta-actual { display: none; }
}

/* ── Logotipo del pie, un poco más grande ───────────────────────────────
   El maquetado lo fijaba en 26px de alto (styles.css:808). Aquí manda el
   ancho, con height:auto, y no es un capricho de estilo: el sitio pone
   max-width:100% a toda imagen (styles.css:43), así que con la altura fija
   una columna estrecha recorta el ancho pero NO la altura, y el SVG se
   queda flotando con aire arriba y abajo dentro de una caja demasiado
   plana. Pasa de verdad: entre 481 y 560px la primera columna del pie baja
   a unos 205px, y cualquier altura por encima de 27px la desborda. Con el
   ancho al mando el logo se encoge proporcionado y nunca se deforma.

   296px es lo que mide el archivo a 40px de alto (su proporción es 7.4).
   El clamp deja ese tamaño en escritorio y no baja de 230px, que sigue
   siendo más grande que los 192px de antes. */
.footer__logo {
  width: 100%;
  max-width: clamp(230px, 24vw, 296px);
  height: auto;
}

/* ── Contacto y redes en el pie ─────────────────────────────────────────
   La primera columna del footer tenía un hueco: el maquetado preveía ahí un
   teléfono (.footer__phone, styles.css:810, quedó sin usar). Ese espacio lo
   ocupan ahora el correo y los iconos.

   No se reutiliza .footer__phone aunque el estilo sirviera: llamar "phone" a
   un correo dejaría la hoja mintiendo. Se deja la clase huérfana en
   styles.css, que es la referencia del maquetado y se conserva intacta. */
.footer__email {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 300;
  /* El mismo gris que el resto de enlaces del pie (.footer__links a,
     styles.css:816). Antes iba en crema a pelo y resaltaba más que el lema
     que tiene justo encima, que es lo que se quería leer primero. */
  color: rgba(247, 245, 239, 0.5);
  transition: color 0.2s var(--ease-out);
}

/* Más aire entre el lema y el correo: el lema cierra la presentación de la
   marca y el correo abre el bloque de contacto, así que se separan más de
   lo que separa a dos párrafos seguidos.

   Se sobreescribe SOLO el margin-bottom. El resto de .footer__tagline
   (styles.css:809) se queda como está: repetir aquí las cinco propiedades
   dejaría dos sitios que mantener y ocultaría cuál es el cambio real. */
.footer__tagline { margin-bottom: 2.5rem; }

.footer__email:hover { color: var(--accent-light); }

.footer__redes {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-top: 1.25rem;
}

/* El enlace mide 36px aunque el icono sea de 18: el área de toque queda por
   encima del mínimo de 24px de WCAG 2.2 sin agrandar el dibujo. */
.footer__redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-light);
  border-radius: 50%;
  color: rgba(247, 245, 239, 0.5);
  transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out),
              background 0.2s var(--ease-out);
}

.footer__redes a:hover,
.footer__redes a:focus-visible {
  color: var(--dark);
  background: var(--accent-light);
  border-color: var(--accent-light);
}

.footer__redes svg { display: block; }

/* Crédito centrado en el hueco que dejan copyright y correo. flex:1 en lugar
   de margin-inline:auto porque .footer__bottom ya usa space-between: con
   auto el centrado dependería del largo de los otros dos. */
.footer__credito {
  flex: 1;
  text-align: center;
}

.footer__credito a {
  color: rgba(247, 245, 239, 0.28);
  transition: color 0.2s var(--ease-out);
}

.footer__credito a:hover { color: var(--accent-light); }

/* Apilado: con tres elementos en columna, flex:1 estiraría el del medio y
   el texto quedaría centrado en un bloque alto. Se alinean los tres a la
   izquierda, como el resto del pie en móvil. */
@media (max-width: 767px) {
  .footer__credito {
    flex: none;
    text-align: left;
  }
}

/* ── Barra de navegación en móvil ───────────────────────────────────────
   Dos arreglos, los dos por especificidad.

   1. EL CAMBIO DE IDIOMA NO SALÍA. styles.css:914 esconde `.nav__links,
      .nav__lang` de golpe por debajo de 1023px, y eso alcanza a los DOS
      botones de idioma que hay en el marcado: el de la barra y el que vive
      dentro del menú desplegable (header.php:85). El segundo se queda
      oculto a propósito — con el de la barra siempre visible, tenerlo dos
      veces sobra.

   2. EN SU LUGAR SE QUITA "DONATIVOS" de la barra. No se pierde la
      llamada: el menú desplegable ya trae "Hacer una donación", que es la
      misma URL con más presencia. */
@media (max-width: 1023px) {
  .nav__right .btn-nav { display: none; }
  .nav__right .nav__lang { display: inline-block; }
}

/* Botón de donación del menú desplegable.

   Salía en crema translúcido sobre el verde claro, casi ilegible:
   `.nav__mobile a` (0,1,1) declara color:var(--cream) y opacity:0.8, y le
   gana a `.btn-nav` (0,1,0), que es quien pone el color oscuro. La regla
   que ya existía, `.nav__mobile .btn-nav` (styles.css:225), solo ajustaba
   familia y tamaño, así que no entraba en esa pelea.

   --dark es exactamente el #1A1714 pedido, así que se usa el token.
   La opacidad vuelve a 1: al 0.8 también se apagaba el fondo verde.

   font-style: normal por la misma herencia. `.nav__mobile a` pone la
   cursiva serif de los enlaces del menú, y la regla del tema cambiaba la
   FAMILIA a Inter pero no el estilo, así que el botón salía en Inter
   cursiva mientras el de la barra —el mismo componente— va derecho. */
.nav__mobile .btn-nav {
  color: var(--dark);
  opacity: 1;
  font-style: normal;
  /* 1rem por lado, en lugar del 0.4375rem/1.125rem de .btn-nav: en la barra
     es un botón secundario apretado y aquí es la acción principal de una
     pantalla completa, así que necesita cuerpo. De paso pasa de 31px de alto
     a 51px, por encima del mínimo táctil recomendado de 44px. */
  padding: 1rem;
}

/* ── Niveles de donativo (Donativos) ───────────────────────────────────
   El maquetado de esta página usa seis clases que no existen en
   styles.css, así que esos elementos salían con los estilos por defecto
   del navegador. Se comprobó que las seis aparecen SOLO en
   donativos.html: las otras once páginas usan los nombres buenos, así que
   era un descuido y no una variante de esta página.

   Cuatro se arreglaron renombrando en la plantilla, porque styles.css ya
   tenía la regla equivalente (ver el encabezado de page-donativos.php).
   Las dos de aquí no tenían ninguna, y se resuelven copiando el par que
   el sitio ya usa para el mismo papel en .signal-item: título en serif y
   cuerpo en sans pequeño y apagado. No son valores elegidos a ojo.

   Sin esto, el nombre del nivel salía en Inter 18.72px —el tamaño que el
   navegador da a un h3 sin CSS— y la descripción en crema al 100% con
   line-height normal, más grande y con más contraste que el propio
   título. */
.donation-tier__name {
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--cream);
  line-height: 1.3;
}

/* Mismos valores que .signal-item__body sobre lienzo interior
   (styles.css:467-468): 0.875rem, 1.65 y --cream-mute. */
.donation-tier__desc {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--cream-mute);
}

/* En el resto del sitio .signal-item__title va seguido de __body, y ese
   margin-bottom de 0.375rem es la separación entre los dos. En Donativos
   cada punto es una sola línea, así que el margen queda colgando al final
   y descuadra el alto de la fila. Solo se anula cuando no hay nada
   debajo: en las demás páginas el título no es :last-child. */
.signal-item__title:last-child { margin-bottom: 0; }

/* ── Bloque "01 · 02 · 03" (Donativos) ──────────────────────────────────
   Los tres destinos del donativo. El maquetado declaraba la rejilla en un
   atributo style, con el resultado de siempre: a 320px seguían las tres
   columnas, de unos 176px, y las dos últimas quedaban fuera de la pantalla
   —24 elementos cortados, medidos con getClientRects().

   Las columnas también pasaron a clase, y no por gusto: llevaban su
   separador en `border-right` dentro del propio style. Apiladas en móvil esa
   línea queda al costado sin separar nada, y desde una media query no se
   puede tocar un estilo inline salvo con !important. Con la clase, el
   separador cambia de vertical a horizontal sin pelearse con nadie.

   El fondo tenue de la columna del medio sale de :nth-child(2), tal como
   estaba en el diseño. */
.pasos-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 3rem;
  border: 1px solid var(--line-light);
  border-radius: 4px;
  overflow: hidden;
}

.pasos-grid__paso {
  padding: 2.5rem 2rem;
  position: relative;
  border-right: 1px solid var(--line-light);
}

.pasos-grid__paso:last-child { border-right: 0; }

.pasos-grid__paso:nth-child(2) { background: rgba(164, 202, 175, 0.04); }

/* 767px es donde colapsa el resto de bloques de tres del sitio. */
@media (max-width: 767px) {
  .pasos-grid { grid-template-columns: 1fr; }

  .pasos-grid__paso {
    border-right: 0;
    border-bottom: 1px solid var(--line-light);
  }

  .pasos-grid__paso:last-child { border-bottom: 0; }
}

/* Con menos de 480px el padding lateral de 2rem se lleva 64 de los 280px
   disponibles. 1.5rem deja respirar al texto sin romper el ritmo vertical. */
@media (max-width: 480px) {
  .pasos-grid__paso { padding: 2rem 1.5rem; }
}

/* ── Enlaces dentro del aviso de crisis (Ayuda) ─────────────────────────
   El aviso pasó a ofrecer el correo como segunda vía, y styles.css tiene un
   reset global `a { color: inherit; text-decoration: none }`: sin esto el
   enlace se vería exactamente igual que el texto que lo rodea. En una página
   de crisis, un canal de contacto que no se distingue de la prosa es un canal
   que nadie usa.

   NO se pinta de verde. Medido sobre el fondo del aviso (#EDEBE3), ningún
   token de la paleta llega al mínimo de contraste de WCAG AA (4.5): --accent
   da 2.23, --accent-light 1.51 y hasta --accent-dark se queda en 3.92. Son
   verdes pensados para titulares grandes y botones, no para texto corrido.

   Tampoco sirve distinguirlo por página: `body.page-interior` está presente en
   Ayuda, pero este aviso concreto va sobre fondo claro, así que esa pista
   miente.

   Heredando el color, el enlace usa el que el propio aviso ya tiene resuelto
   para su fondo —5.76 de contraste aquí— y se distingue por subrayado y grosor.
   Es además lo correcto: diferenciar un enlace SOLO por color es de por sí un
   fallo de accesibilidad. */
.alert-box__body a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Aire del hero en las páginas legales ───────────────────────────────
   Entre la fecha del hero y el primer título había 212px, y se notaba como
   un hueco vacío: son páginas de puro texto, sin imagen ni nada que llene
   ese espacio.

   El hueco sumaba tres cosas: los 64px de padding-bottom de .page-hero, los
   102px de padding-top de .section, y 40px del margin-top del primer <h2>.
   Ese último no separaba de nada —es el primer elemento de la sección—, así
   que se quitó en el HTML; los demás h2 lo conservan porque sí vienen
   después de un párrafo.

   Aquí solo se recorta el padding superior de la sección, de 102 a 48px. No
   se toca .page-hero porque también lo usa Ayuda, que ahí sí está bien. */
.section--legal { padding-top: 3rem; }

/* ── Contenido escrito desde el editor (page.php) ───────────────────────
   Las 12 páginas del sitio traen su tipografía en atributos style, elemento
   por elemento. Una página creada desde el panel no tiene nada de eso, y el
   tema arranca con `* { margin: 0; padding: 0 }` (styles.css:40) y con
   `ul { list-style: none }`. Sin estas reglas, el HTML del editor sale con
   los párrafos pegados unos a otros, los subtítulos sin jerarquía y las
   listas sin viñetas ni sangría.

   Los valores no son inventados: replican lo que las páginas legales
   declaran inline (interlínea 1.8, cuerpo en --cream-mute, h2 en serif de
   1.25rem sobre --cream), para que una página nueva se vea del sitio y no
   de WordPress. */
.pagina-generica {
  line-height: 1.8;
  color: var(--cream-mute);
}

.pagina-generica p,
.pagina-generica ul,
.pagina-generica ol,
.pagina-generica blockquote,
.pagina-generica figure,
.pagina-generica table { margin-bottom: 1.25rem; }

.pagina-generica h2,
.pagina-generica h3,
.pagina-generica h4 {
  font-family: var(--serif);
  color: var(--cream);
  line-height: 1.3;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.pagina-generica h2 { font-size: 1.25rem; }
.pagina-generica h3 { font-size: 1.0625rem; }
.pagina-generica h4 { font-size: 1rem; }

/* El primer bloque no necesita separarse de nada: ya lo hace el padding de
   la sección. */
.pagina-generica > :first-child { margin-top: 0; }
.pagina-generica > :last-child { margin-bottom: 0; }

/* Devuelve la viñeta y la sangría que el reset del tema quita a las listas. */
.pagina-generica ul { list-style: disc; padding-left: 1.5rem; }
.pagina-generica ol { list-style: decimal; padding-left: 1.5rem; }
.pagina-generica li + li { margin-top: 0.5rem; }

.pagina-generica strong { color: var(--cream); }

/* Mismo verde que usan los enlaces de las páginas legales sobre este fondo
   oscuro, con subrayado para no depender solo del color. */
.pagina-generica a {
  color: var(--accent-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pagina-generica blockquote {
  border-left: 2px solid var(--accent-light);
  padding-left: 1.25rem;
  font-style: italic;
}

.pagina-generica img { border-radius: 3px; }

/* ── Apartados de las páginas legales ──────────────────────────────────
   Aviso de privacidad, Términos y Cookies repetían el mismo atributo style
   en cada uno de sus 17 encabezados —14 veces idéntico carácter a carácter—
   y en su <article> contenedor. Era el único bloque del tema que de verdad
   pedía una clase: cambiar el tamaño de los apartados obligaba a editar 17
   sitios, y de hecho ya tuve que tocarlos uno por uno para el ajuste del
   aire del hero.

   El resto de los 363 atributos style del tema se quedan como están: son
   cosmética en elementos únicos, y casi todos ya apuntan a variables CSS
   (color:var(--cream) y compañía), así que un cambio de paleta sigue siendo
   una línea en :root. Convertirlos todos sería un refactor mecánico de 12
   páginas a cambio de nada visible.

   :first-of-type resuelve el primer encabezado, que no debe separarse de
   nada porque ya lo hace el padding de .section--legal. Antes eso estaba
   escrito a mano en el HTML de cada página. */
.pagina-legal {
  line-height: 1.8;
  color: var(--cream-mute);
}

.pagina-legal__titulo {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--cream);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.pagina-legal__titulo:first-of-type { margin-top: 0; }

/* ── Cintillo de contenido responsable ──────────────────────────────────
   Markup en template-parts/aviso-contenido.php. Lo usan las cuatro páginas
   con contenido de la comunidad: Helping Hearts, Con tus palabras, Eventos y
   Recursos.

   Los valores son los que el maquetado traía en un atributo style dentro de
   page-helping-hearts.php; aquí son clase para no repetirlos en cuatro
   plantillas. Se conservan tal cual, incluidos los rgba a pelo: no hay
   variable para esas dos opacidades y el maquetado las escribe así en 46
   sitios.

   Sin fondo propio: el cintillo va entre la última sección y el footer, y se
   apoya en el lienzo oscuro fijo que body.page-interior monta detrás de todo
   (.int-vignette). De ahí que el texto sea crema translúcida.
   ───────────────────────────────────────────────────────────────────── */
.aviso-contenido {
  border-top: 1px solid var(--line-light);
  padding: 1.5rem 0;
  margin: 0;
}

.aviso-contenido__texto {
  font-size: 0.75rem;
  line-height: 1.6;
  color: rgba(247, 245, 239, 0.38);
}

.aviso-contenido__etiqueta {
  font-weight: 600;
  color: rgba(247, 245, 239, 0.55);
}


/* ── Donantes: logos de empresas que ya apoyaron (page-donativos.php) ──
   El título reutiliza .section__title para que pese lo mismo que el resto de
   encabezados de la página; aquí solo se ajusta el margen inferior.

   Los logos son PNG blancos sobre transparente de 200x100. A 80px de alto el
   archivo se muestra casi a tamaño real (160px de ancho), así que en pantallas
   retina pierden algo de nitidez: si hace falta, pedir versiones al doble o SVG. */
.donantes { margin-top: 3rem; text-align: center; }

.donantes__titulo { margin-bottom: 2rem; }

.donantes__lista {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: clamp(2rem, 6vw, 4.5rem); list-style: none; padding: 0; margin: 0;
}

.donantes__logo {
  display: block; height: 80px; width: auto; max-width: 260px;
  object-fit: contain; opacity: 0.8;
  transition: opacity 0.25s var(--ease-out);
}

.donantes__logo:hover { opacity: 1; }

/* ── Botón flotante de WhatsApp (functions.php: adview_boton_whatsapp) ──
   z-index 90 a propósito: por debajo del menú móvil (99) y del popup de
   detalle (600), para que cualquiera de los dos lo tape al abrirse en vez de
   quedar flotando encima.

   Color de marca en lugar del verde oficial de WhatsApp: la paleta del sitio
   es sage y el #25D366 chirría. El icono es lo que hace reconocible el botón. */
.wa-flotante {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: calc(clamp(1rem, 3vw, 2rem) + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--accent-light);
  color: var(--int-bg);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  transition: background 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.wa-flotante:hover,
.wa-flotante:focus-visible {
  background: var(--accent-hover);
  transform: scale(1.06);
}

.wa-flotante:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 3px;
}

/* En un sitio sobre salud mental el movimiento gratuito molesta de verdad a
   quien tiene vértigo o migraña: mismo criterio que la pantalla de espera. */
@media (prefers-reduced-motion: reduce) {
  .wa-flotante { transition: background 0.25s; }
  .wa-flotante:hover,
  .wa-flotante:focus-visible { transform: none; }
}


/* ── Imagen enlazada en las tarjetas de Recursos ─────────────────────
   El <a> ocupa todo el recuadro de .blog-card__img para que la imagen
   siga llenando el 16/10 con object-fit, igual que sin enlace. */
.blog-card__img-link { display: block; width: 100%; height: 100%; }


/* ── Niveles de donativo con beneficios (portada) ─────────────────────
   Beneficios con el mismo tamaño y color que .donation-tier__desc, en lista
   sin viñetas y con una raya fina entre periodicidad y beneficios.
   La cuarta celda (.donation-tier-mas) toma el fondo de .donation-tier
   pero no es seleccionable: centra el texto y el botón al PDF. */
.donation-tier__beneficios {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.5rem;
  font-size: 0.875rem; line-height: 1.5; color: var(--cream-mute);
}
.donation-tier__beneficios li { padding-left: 0.875rem; position: relative; }
.donation-tier__beneficios li::before {
  content: '·'; position: absolute; left: 0; color: var(--accent-light);
}
.donation-tier-mas {
  background: rgba(20,18,16,0.7); padding: 2.5rem 2rem;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.25rem;
}
.donation-tier-mas .donation-tier__desc { margin: 0; }

/* ── Portada: columnas iguales y etiqueta "Qué incluye" ─────────────────
   styles.css reparte con 1fr, que no deja encoger una columna por debajo
   de su contenido más ancho: "$500,000" y el botón ensanchaban la suya y
   la cuadrícula se salía de su borde. minmax(0,1fr) fuerza el mismo ancho.
   Mismos saltos que styles.css (2 columnas ≤1023px, 1 columna ≤480px).
   Se limita a .donation-tiers--beneficios para no tocar /donativos/. */
.donation-tiers--beneficios { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) { .donation-tiers--beneficios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .donation-tiers--beneficios { grid-template-columns: minmax(0, 1fr); } }

.donation-tiers--beneficios .donation-tier,
.donation-tiers--beneficios .donation-tier-mas { padding: 2.25rem 1.5rem; min-width: 0; }
.donation-tiers--beneficios .donation-tier__amount { font-size: clamp(1.875rem, 2.6vw, 2.5rem); }
.donation-tiers--beneficios .btn { white-space: normal; width: 100%; }

.donation-tier__incluye {
  margin: 0.75rem 0 0; padding-top: 1rem;
  border-top: 1px solid rgba(247,245,239,0.12);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-light);
}

/* La celda final lleva el destacado: mismo fondo y línea superior que
   .donation-tier.is-featured (styles.css). */
.donation-tier-mas.is-featured { background: rgba(35,30,25,0.85); position: relative; }
.donation-tier-mas.is-featured::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--accent-light);
}


/* Aviso de seguridad del donativo en una sola línea: styles.css lo limita
   a 480px. Sin límite ocupa el ancho del contenedor; en pantallas donde no
   cabe se parte solo, en vez de salirse (por eso no lleva nowrap). */
.donation-legal { max-width: none; }


/* ── Etiqueta del botón flotante de WhatsApp ─────────────────────────────
   Aparece a la izquierda del botón al pasar el cursor o al llegar con el
   teclado. Solo en dispositivos con hover: en móvil un toque abre WhatsApp
   directo y la etiqueta quedaría pegada. */
.wa-flotante__tip {
  position: absolute; right: calc(100% + 0.75rem); top: 50%;
  transform: translate(6px, -50%);
  white-space: nowrap; pointer-events: none;
  padding: 0.45rem 0.8rem; border-radius: 6px;
  background: var(--int-bg, #1a1814); color: var(--cream);
  font-size: 0.8125rem; font-weight: 500; line-height: 1.2;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out), visibility 0.2s;
}
.wa-flotante:focus-visible .wa-flotante__tip { opacity: 1; visibility: visible; transform: translate(0, -50%); }
@media (hover: hover) {
  .wa-flotante:hover .wa-flotante__tip { opacity: 1; visibility: visible; transform: translate(0, -50%); }
}
/* El botón crece al 1.06 en hover; la etiqueta no debe crecer con él. */
.wa-flotante:hover .wa-flotante__tip,
.wa-flotante:focus-visible .wa-flotante__tip { scale: calc(1 / 1.06); transform-origin: right center; }
@media (prefers-reduced-motion: reduce) {
  .wa-flotante__tip { transition: opacity 0.2s, visibility 0.2s; transform: translate(0, -50%); }
  .wa-flotante:hover .wa-flotante__tip,
  .wa-flotante:focus-visible .wa-flotante__tip { scale: none; }
}

/* ── Botón flotante de la línea de ayuda (teléfono) ──────────────────────
   Mismo estilo que .wa-flotante, apilado encima: su bottom es el del de
   WhatsApp + su alto (46px) + 0.75rem de separación. */
.wa-flotante--tel {
  bottom: calc(clamp(1rem, 3vw, 2rem) + 46px + 0.75rem + env(safe-area-inset-bottom, 0px));
}

/* Botón sin enlace (p. ej. Programa Escolar "Próximamente" en /nosotros/):
   conserva el aspecto pero sin cursor de mano ni efecto hover. */
.btn--inactivo { cursor: default; pointer-events: none; }


/* ── Franja blanca al hacer scroll en iPhone (páginas interiores) ─────────
   El fondo oscuro de las interiores es .int-vignette, una capa fija del alto
   de la pantalla; el body quedaba transparente y debajo asomaba el blanco del
   lienzo. Al ocultarse la barra inferior de Safari la pantalla crece y la
   capa tarda en estirarse, dejando una franja blanca abajo.

   1) El body toma el mismo gris: el navegador lo pasa al lienzo (el html no
      tiene fondo), que queda por debajo de la capa (z-index:-1), así que la
      capa se sigue viendo igual y cualquier hueco sale del mismo color.
   2) La capa mide el alto con la barra oculta (lvh) desde el principio.
      Donde no hay lvh se conserva inset:0 de styles.css. */
body.page-interior { background: var(--int-bg); }
@supports (height: 100lvh) {
  .int-vignette { bottom: auto; height: 100lvh; }
}

/* ── Menú móvil más compacto ────────────────────────────────────────
   styles.css: gap 2.5rem y enlaces a clamp(1.75rem, 6vw, 3rem), que con el
   font-size-adjust de EB Garamond salen aún mayores. Con seis enlaces y el
   botón no cabían: el primero quedaba pegado a la barra y el botón EN se
   salía por abajo.

   Menos separación y letra, relleno arriba del alto de la barra para que
   nada quede debajo de ella, y scroll interno por si una pantalla muy baja
   (o el texto en inglés) sigue sin caber. */
.nav__mobile {
  gap: 1.25rem;
  padding: calc(var(--nav-h) + 1rem) 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
}
.nav__mobile a:not(.btn-nav) { font-size: clamp(1.5rem, 5vw, 2.25rem); line-height: 1.2; }
.nav__mobile .btn-nav { font-size: 0.875rem; }

/* ── Botones flotantes: etiqueta fija en escritorio, barra en móvil ───────
   Escritorio (≥768px): la etiqueta deja de depender del hover y queda
   siempre visible a la izquierda de cada botón, en dos líneas (título +
   "Dilo emergencias 24/7").

   Móvil (≤767px): los dos botones se vuelven una barra fija abajo, mitad y
   mitad, con icono y texto. El body gana relleno inferior para que la barra
   no tape el final del pie. Sigue en z-index 90: el menú móvil (99) y los
   popups (600) la tapan al abrirse. */
.wa-flotante__tip-titulo,
.wa-flotante__tip-sub { display: block; }
.wa-flotante__tip-titulo { font-weight: 600; }
.wa-flotante__tip-sub { font-size: 0.75rem; opacity: 0.75; margin-top: 0.125rem; }

@media (min-width: 768px) {
  .wa-flotante__tip {
    opacity: 1; visibility: visible; transform: translate(0, -50%);
    text-align: right;
  }
}

@media (max-width: 767px) {
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

  .wa-flotante,
  .wa-flotante--tel {
    bottom: 0; width: auto; height: auto; min-height: 60px;
    border-radius: 0;
    padding: 0.625rem 0.75rem calc(0.625rem + env(safe-area-inset-bottom, 0px));
    flex-direction: row-reverse; justify-content: center; gap: 0.625rem;
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.25);
  }
  .wa-flotante      { left: 50%; right: 0; }
  .wa-flotante--tel { left: 0; right: 50%; border-right: 1px solid rgba(26, 23, 20, 0.18); }
  .wa-flotante svg  { flex-shrink: 0; }

  .wa-flotante:hover,
  .wa-flotante:focus-visible { transform: none; }
  .wa-flotante:focus-visible { outline-offset: -4px; outline-color: var(--int-bg); }

  .wa-flotante__tip,
  .wa-flotante:hover .wa-flotante__tip,
  .wa-flotante:focus-visible .wa-flotante__tip {
    position: static; transform: none; scale: none;
    opacity: 1; visibility: visible;
    padding: 0; background: none; box-shadow: none; border-radius: 0;
    color: var(--int-bg); text-align: left; white-space: normal;
    font-size: 0.8125rem; line-height: 1.2;
  }
  .wa-flotante__tip-sub { font-size: 0.6875rem; opacity: 0.8; }
}

/* ── Barra inferior móvil: las dos mitades a la misma altura ──────────────
   Cada botón es un elemento fijo aparte con alto automático: si el texto
   de WhatsApp, más largo, bajaba a otra línea, esa mitad crecía y las dos
   quedaban desalineadas. Alto fijo igual para ambos (64px + zona segura)
   y un poco menos de letra, icono y relleno para que el título quepa en
   dos líneas como máximo aun en pantallas de 320px. */
@media (max-width: 767px) {
  .wa-flotante,
  .wa-flotante--tel {
    height: calc(64px + env(safe-area-inset-bottom, 0px));
    min-height: 0;
    padding: 0 0.625rem env(safe-area-inset-bottom, 0px);
    gap: 0.5rem;
  }
  .wa-flotante svg { width: 20px; height: 20px; }
  .wa-flotante__tip,
  .wa-flotante:hover .wa-flotante__tip,
  .wa-flotante:focus-visible .wa-flotante__tip { font-size: 0.75rem; line-height: 1.15; }
  .wa-flotante__tip-sub { font-size: 0.6875rem; }
}

/* ── Líneas de ayuda Dilo; (portada, sobre las tarjetas SAPTEL/CONASAMA/911) ─
   Un renglón de ancho completo con el mismo estilo de .help-card, pegado a
   la fila de tres por la misma raya de 1px que separa las tarjetas, así se
   ve como la primera fila de un solo directorio. Lleva dos números lado a
   lado (teléfono y WhatsApp); en pantallas angostas bajan uno bajo otro. */
.help-cards--dilo { grid-template-columns: 1fr; }
.help-card__contactos {
  display: flex; flex-wrap: wrap; gap: 1rem 3.5rem; margin-top: 0.75rem;
}
.help-card__contacto { display: flex; flex-direction: column; gap: 0.25rem; }
.help-card__contacto .help-card__phone { margin-top: 0; }

/* Líneas de ayuda Dilo;: separada de la fila SAPTEL/CONASAMA/911 (antes
   iban pegadas por 1px), todo centrado, e icono junto a cada número. */
.help-cards--dilo + .help-cards { margin-top: 2rem; }
.help-cards--dilo .help-card { align-items: center; text-align: center; padding-block: 2.5rem; }
.help-cards--dilo .help-card__contactos { justify-content: center; }
.help-cards--dilo .help-card__contacto { align-items: center; }
.help-cards--dilo .help-card__phone { display: inline-flex; align-items: center; gap: 0.5rem; }
.help-card__icono { width: 0.75em; height: 0.75em; flex-shrink: 0; }

/* ── "El impacto" en Donativos: cuatro frentes ───────────────────────────
   Mismos frentes que Nosotros. 4 columnas en escritorio, 2x2 en tablet y
   1 en móvil (la regla de 767px de .pasos-grid ya lo resuelve). Cada paso
   es columna flex y la etiqueta del pie va con margin-top:auto, así las
   rayas y etiquetas quedan a la misma altura aunque el texto varíe. */
.pasos-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Sin el fondo tenue de la 2ª columna (.pasos-grid__paso:nth-child(2)):
   con cuatro frentes no hay uno destacado, van todos iguales. */
.pasos-grid--4 .pasos-grid__paso:nth-child(2) { background: none; }
.pasos-grid--4 .pasos-grid__paso { display: flex; flex-direction: column; padding-inline: 1.75rem; }
@media (max-width: 1023px) and (min-width: 768px) {
  .pasos-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pasos-grid--4 .pasos-grid__paso:nth-child(2n)  { border-right: 0; }
  .pasos-grid--4 .pasos-grid__paso:nth-child(-n+2) { border-bottom: 1px solid var(--line-light); }
}
@media (max-width: 767px) {
  .pasos-grid--4 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .pasos-grid--4 .pasos-grid__paso { padding-inline: 1.5rem; }
}

/* Icono dentro de un botón (correo / WhatsApp en Donativos empresariales).
   Toma el color del texto y escala con su tamaño. */
.btn__icono { width: 1.15em; height: 1.15em; margin-right: 0.5rem; vertical-align: -0.225em; flex-shrink: 0; }


/* Enlaces dentro de un renglón de .signal-item (Transparencia, Donativos):
   verde de acento + subrayado, para que se distingan del texto sin
   depender solo del color. */
.signal-item__link {
  color: var(--accent-light); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
  transition: color 0.2s;
}
.signal-item__link:hover { color: var(--cream); }


/* ── Líneas de emergencia (Nosotros): cuarta tarjeta Dilo; ────────────────
   4 columnas en escritorio (más ancho que las 860px de tres), 2x2 en tablet
   y 1 en móvil (la regla de 767px ya existente). La tarjeta Dilo; lleva dos
   botones apilados a lo ancho en lugar de un número. */
.emergency-grid--4 { grid-template-columns: repeat(4, 1fr); max-width: 1100px; }
@media (max-width: 1023px) and (min-width: 768px) {
  .emergency-grid--4 { grid-template-columns: repeat(2, 1fr); max-width: 640px; }
}
@media (max-width: 767px) {
  .emergency-grid--4 { grid-template-columns: 1fr; }
}
.emergency-card__botones { display: flex; flex-direction: column; gap: 0.5rem; }
.emergency-card__botones .btn {
  width: 100%; justify-content: center; font-size: 0.75rem;
  padding-block: 0.625rem; white-space: nowrap;
}

/* Contenido de las tarjetas de emergencia centrado en vertical: se estiran
   a la altura de la más alta (la de Dilo;, con dos botones) y las demás
   quedaban con el texto arriba y un hueco abajo. */
.emergency-grid--4 > div { display: flex; flex-direction: column; justify-content: center; }


/* ── Barra "Síguenos en redes sociales" (Nosotros) ────────────────────────
   Entre Misión y Visión y Cómo trabajamos. Título a la izquierda (mismo
   juego sans + cursiva serif que los títulos del sitio, a menor tamaño) y
   redes a la derecha como píldoras con icono y nombre, con el mismo hover
   verde que los iconos del pie. En móvil se apila y centra. */
.redes-barra { padding-block: clamp(2rem, 4vw, 3rem); }
.redes-barra__inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1.25rem 2rem;
  padding-block: 1.75rem;
  border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light);
}
.redes-barra__titulo {
  font-size: clamp(1.25rem, 2.2vw, 1.625rem); font-weight: 500; color: var(--cream);
  letter-spacing: -0.01em; line-height: 1.2;
}
.redes-barra__titulo em {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size-adjust: var(--serif-ajuste);
}
.redes-barra__lista {
  display: flex; flex-wrap: wrap; gap: 0.75rem; list-style: none; margin: 0; padding: 0;
}
.redes-barra__lista a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 44px; padding: 0.5rem 1.125rem;
  border: 1px solid var(--line-light); border-radius: 999px;
  color: var(--cream); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.redes-barra__lista a:hover,
.redes-barra__lista a:focus-visible {
  color: var(--dark); background: var(--accent-light); border-color: var(--accent-light);
}
.redes-barra__lista svg { display: block; flex-shrink: 0; }
@media (max-width: 767px) {
  .redes-barra__inner { flex-direction: column; justify-content: center; text-align: center; }
  .redes-barra__lista { justify-content: center; }
}

/* ── Barra de redes como sección propia ──────────────────────────────────
   Transparente sobre la viñeta, con las rayas dentro del contenedor, se leía
   como el final de Misión y Visión. Ahora es una franja de lado a lado en el
   sage de la marca, con texto oscuro: se distingue a simple vista de la
   sección gris de arriba y de la oscura de abajo. Las rayas sobran.
   z-index para quedar sobre la viñeta fija (z-index:-1). */
.redes-barra {
  position: relative; z-index: 1;
  background: var(--accent-light);
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
}
.redes-barra__inner { padding-block: 0; border: 0; }
.redes-barra__titulo { color: var(--dark); }
.redes-barra__lista a {
  color: var(--dark); border-color: rgba(26, 23, 20, 0.35); background: transparent;
}
.redes-barra__lista a:hover,
.redes-barra__lista a:focus-visible {
  color: var(--cream); background: var(--dark); border-color: var(--dark);
}
.redes-barra__lista a:focus-visible { outline: 2px solid var(--dark); outline-offset: 2px; }

/* Barra de redes, versión discreta: fondo oscuro, texto, bordes e iconos en
   sage, y 1rem de relleno. Hover: la píldora se rellena de sage con texto
   oscuro. */
.redes-barra { background: var(--dark); padding-block: 1rem; }
.redes-barra__titulo { color: var(--accent-light); }
.redes-barra__lista a {
  color: var(--accent-light); border-color: var(--accent-light); background: transparent;
}
.redes-barra__lista a:hover,
.redes-barra__lista a:focus-visible {
  color: var(--dark); background: var(--accent-light); border-color: var(--accent-light);
}
.redes-barra__lista a:focus-visible { outline-color: var(--accent-light); }

/* Barra de redes: título, bordes, iconos y nombres en blanco (crema de la
   marca); el hover sigue rellenando la píldora de sage con texto oscuro. */
.redes-barra__titulo { color: var(--cream); }
.redes-barra__lista a { color: var(--cream); border-color: var(--cream); }
.redes-barra__lista a:hover,
.redes-barra__lista a:focus-visible {
  color: var(--dark); background: var(--accent-light); border-color: var(--accent-light);
}
.redes-barra__lista a:focus-visible { outline-color: var(--cream); }

/* Barra de redes en móvil: las tres píldoras en un solo renglón. Menos
   relleno, letra e icono, y sin salto de línea. Por debajo de 360px (no hay
   sitio para los tres nombres) quedan solo los iconos; el nombre sigue ahí
   para lectores de pantalla, oculto a la vista. */
@media (max-width: 767px) {
  .redes-barra__inner { gap: 0.875rem; }
  .redes-barra__lista { flex-wrap: nowrap; gap: 0.5rem; }
  .redes-barra__lista a {
    min-height: 40px; padding: 0.4375rem 0.75rem; gap: 0.375rem;
    font-size: 0.75rem; white-space: nowrap;
  }
  .redes-barra__lista svg { width: 16px; height: 16px; }
}
@media (max-width: 359px) {
  .redes-barra__lista a { padding-inline: 0.75rem; }
  .redes-barra__lista a span {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}

/* Fondo de la barra de redes (Nosotros y Dilo;): gris carbón pedido por el
   cliente, en lugar de --dark. */
.redes-barra { background: #212426; }


/* Botón al pie de una .help-card ("Ver directorio" en Especialistas). */
.help-card__boton { margin-top: 1.25rem; align-self: flex-start; font-size: 0.75rem; padding: 0.625rem 1.125rem; }


/* ── Directorio de ayuda (Recursos): Dilo; + Especialistas arriba ──────────
   Primer renglón: Líneas de ayuda Dilo; y Especialistas, sin fondo de raya
   (igual que las tarjetas de abajo en las interiores). Debajo, SAPTEL,
   CONASAMA y 911 en tres columnas (.help-cards--3col). Por debajo de
   1024px el primer renglón se apila. */
.directorio-top {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  gap: 1px; margin-top: 2rem;
}
.directorio-top > .help-cards--dilo { margin: 0; }
.directorio-top > .help-card--especialistas { justify-content: center; }
.directorio-top + .help-cards { margin-top: 2rem; }
@media (max-width: 1023px) {
  .directorio-top { grid-template-columns: 1fr; }
}

/* Directorio (Recursos): Dilo; en 2/3 y Especialistas en 1/3.
   El bloque Dilo; se veía más claro porque su envoltorio (.help-cards--dilo)
   también pinta el fondo de raya, y quedaba doble capa bajo la tarjeta
   translúcida. Transparente aquí, toma el mismo tono que las demás. */
.directorio-top { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.directorio-top > .help-cards--dilo { background: transparent; }
/* La regla de arriba va después de la media query de 1023px y la pisaría:
   se repite aquí para que en tablet y móvil el renglón siga apilándose. */
@media (max-width: 1023px) {
  .directorio-top { grid-template-columns: 1fr; }
}


/* Texto solo para lectores de pantalla y buscadores (p. ej. el título del
   recurso dentro de "Leer más", para que el enlace sea descriptivo). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}


/* H1 de la portada: envuelve el logo sin alterar el diseño. */
.hero__h1 { margin: 0; padding: 0; font: inherit; }


/* Crédito de la productora bajo el video de origen (portada y Dilo;). */
.video-credito {
  display: flex; align-items: center; gap: 0.625rem; margin-top: 1rem;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(247,245,239,0.5);
}
.video-credito__logo { display: inline-flex; color: var(--cream); }
.video-credito__logo svg { height: 22px; width: auto; display: block; }


/* ── Aviso de cookies ──────────────────────────────────────────────────────
   Tarjeta abajo a la izquierda en escritorio (los botones flotantes van a
   la derecha); en móvil, a lo ancho y encima de la barra inferior de ayuda.
   z-index 95: sobre los flotantes (90), bajo el menú móvil (99). */
.aviso-cookies {
  position: fixed; z-index: 95;
  left: clamp(1rem, 3vw, 2rem);
  bottom: calc(clamp(1rem, 3vw, 2rem) + env(safe-area-inset-bottom, 0px));
  width: min(420px, calc(100vw - 2rem));
  padding: 1.25rem 1.375rem;
  background: #212426; color: var(--cream);
  border: 1px solid var(--line-light); border-radius: 6px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}
.aviso-cookies[hidden] { display: none; }
.aviso-cookies__titulo {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-light); margin-bottom: 0.5rem;
}
.aviso-cookies__texto { font-size: 0.8125rem; line-height: 1.6; color: rgba(247, 245, 239, 0.8); }
.aviso-cookies__texto a { color: var(--accent-light); text-decoration: underline; text-underline-offset: 2px; }
.aviso-cookies__botones { display: flex; gap: 0.625rem; margin-top: 1rem; }
.aviso-cookies__botones .btn { flex: 1; justify-content: center; font-size: 0.75rem; padding-block: 0.625rem; }
@media (max-width: 767px) {
  .aviso-cookies {
    left: 0.75rem; right: 0.75rem; width: auto;
    bottom: calc(64px + 0.75rem + env(safe-area-inset-bottom, 0px));
  }
}

/* Control para desactivar cookies en /cookies/. */
.cookies-control { margin-block: 1.25rem; padding: 1.25rem 1.5rem; border: 1px solid var(--line-light); border-radius: 3px; }
.cookies-control__estado { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin: 0; }
.cookies-control__estado[hidden] { display: none; }
.cookies-control .btn { font-size: 0.75rem; padding: 0.625rem 1.125rem; }