/* ==========================================================================
   Capa propia sobre el sistema Kindora.
   Aquí va SOLO lo que la plantilla no traía: navegación móvil, estados
   dinámicos (barras que dependen de datos reales), el acordeón de
   preguntas y las utilidades de accesibilidad.
   Nada de esto reinterpreta el diseño: lo completa.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. El atributo `hidden` manda

   Cualquier regla de clase con `display` (por ejemplo `.field{display:flex}`)
   gana por especificidad al `display:none` que el navegador aplica a
   `[hidden]`, y el elemento sigue viéndose aunque el guion lo marque oculto.
   Esto lo evita en todo el sitio de una vez.
   -------------------------------------------------------------------------- */
[hidden] { display: none !important; }

/* Única excepción: el panel de respuestas del FAQ se anima cambiando su
   altura, así que debe seguir en el flujo mientras está plegado. */
.answer-wrapper[hidden] { display: block !important; }

/* --------------------------------------------------------------------------
   1. Accesibilidad
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 24px; top: -100px;
  z-index: 200;
  padding: 12px 24px;
  border-radius: var(--_all-size---border-radius--radius-xxl);
  background-color: var(--neutral--neutral-04);
  color: var(--neutral--neutral-01);
  font-weight: var(--_all-typography---font-width--semibold);
  text-decoration: none;
  transition: top .2s ease;
}
.skip-link:focus { top: 24px; }

/* Foco visible y consistente en todo lo interactivo. La plantilla original
   lo desactivaba, lo que dejaba el sitio inutilizable con teclado. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--theme--color-03);
  outline-offset: 3px;
  border-radius: var(--_all-size---border-radius--radius-small);
}

/* --------------------------------------------------------------------------
   1 bis. Dimensiones de imagen que la plantilla no declaraba

   Webflow exportó muchas <img> sin ancho ni alto en CSS: se apoyaban en el
   tamaño real del archivo original (avatares de 25x25 px, estrellas de 18 px…).
   Al sustituir esas fotos por otras, el navegador usa el tamaño del archivo
   nuevo y el bloque revienta: un avatar de 1024 px empujaba el hero entero.
   Aquí se fija el tamaño que tenían los originales, para que la maqueta
   dependa del diseño y no del peso del archivo.
   -------------------------------------------------------------------------- */
.avatar-image {
  width: 25px;
  height: 25px;
  object-fit: cover;
  flex: none;
}
.avatar-image-2 {
  width: 40px;
  height: 40px;
  object-fit: cover;
  flex: none;
  border: 3px solid var(--neutral--neutral-01);
}
.hero-review-author { width: 44px; height: 44px; object-fit: cover; border-radius: 50%; flex: none; }
.hero-review-mark   { width: 34px; height: 34px; object-fit: contain; flex: none; }
.hero-review--message p { font-weight: var(--_all-typography---font-width--medium); }
.author-image      { width: 48px; height: 48px; object-fit: cover; flex: none; }
.card-image        { width: 72px; height: 72px; object-fit: cover; flex: none; }
.star-icon         { width: 18px; height: 18px; flex: none; }
.involved-icon     { width: 24px; height: 24px; }
.email-icon        { width: 20px; height: 20px; }
.arrow-right       { height: auto; }
.label-icon-wrapper img { width: 18px; height: 18px; }
.volunteer-card-title img { width: 24px; height: 24px; flex: none; }
.result-stat-icon img { width: 20px; height: 20px; }

/* Los logotipos de aliados llegan en tamaños dispares desde el panel. */
.hero-brand-logo { width: auto; max-width: 150px; object-fit: contain; }

/* El logotipo de la fundación es cuadrado; la plantilla esperaba uno
   apaisado. Se fija la altura y el ancho se ajusta solo. */
.navbar-brand-header { display: flex; align-items: center; }
.navbar-brand-header-logo { width: auto; height: 46px; }
.footer-logo-wrapper .logo-wrapper img { width: auto; height: 52px; }

/* --------------------------------------------------------------------------
   1 ter. Piezas que la plantilla dibujaba blancas sobre blanco

   Varias "píldoras" del hero son blancas porque en la maqueta original caían
   encima de una foto. En la nuestra caen sobre el fondo claro de la página y
   desaparecían. Se les da el mismo contorno que usa el resto del sistema.
   -------------------------------------------------------------------------- */
.short-text-item {
  padding-top: 2px;
  padding-bottom: 2px;
  border: 1px solid var(--others--stroke);
  background-color: var(--neutral--neutral-02);
}

/* La tarjeta "Equipo comprometido" va encima de la foto, abajo a la derecha.

   La plantilla lo conseguía con `space-between` y dos hijos: las píldoras a la
   izquierda y la tarjeta a la derecha. Al quitar las píldoras queda un solo
   hijo, y `space-between` lo manda al principio, es decir a la izquierda.
   Con `flex-end` la tarjeta se queda donde debe, haya uno o dos hijos. */
.hero-short-description { justify-content: flex-end; }
.hero-short-description .description-text-block { max-width: 340px; }

/* Contenedores de imagen que se hundían a cero de ancho.

   Webflow los dejaba sin medidas porque la foto original ya traía su tamaño.
   Con carga diferida el navegador aún no sabe cuánto ocupa, así que el bloque
   colapsa y la sección aparece vacía. Se les da una base y un alto mínimo. */
.featured-image-wrapper  { flex: 1 1 685px; min-height: 420px; }
.volunteer-image-wrapper { min-height: 360px; }
.result-image-wrapper    { flex: 1 1 550px; }
.result-image-wrapper .image { display: block; height: 100%; object-fit: cover; }
.program-image-wrapper   { display: block; }
.cta-image               { display: block; margin-inline: auto; }

/* --------------------------------------------------------------------------
   2. Cabecera: idioma, enlace activo y menú móvil
   -------------------------------------------------------------------------- */
/* La cabecera flota sobre el hero, así que tiene que pintarse por encima de
   él. Sin esto, la imagen del hero (posicionada y posterior en el documento)
   tapaba los últimos enlaces del menú y el botón de donar. */
.header-wrapper { z-index: 50; }

/* Marca: símbolo + nombre, como el bloque "logo + Kindora" del original. */
.navbar-brand-header {
  display: flex;
  align-items: center;
  gap: var(--_all-size---all-spacing--spacing-sm);
  text-decoration: none;
}
.brand-name {
  color: var(--neutral--neutral-04);
  font-size: 26px;
  font-weight: var(--_all-typography---font-width--semibold);
  letter-spacing: var(--_all-typography---letter-spacing--medium);
  line-height: 1.1;
  white-space: nowrap;
}
.brand-name small {
  display: block;
  font-size: 12px;
  font-weight: var(--_all-typography---font-width--medium);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--neutral--neutral-03);
}
@media screen and (max-width: 767px) { .brand-name { display: none; } }

.lang-switch {
  padding: var(--_all-size---padding--padding-micro) var(--_all-size---padding--padding-xxs);
  border: 1px solid var(--others--stroke);
  border-radius: var(--_all-size---border-radius--radius-xxl);
  background-color: var(--neutral--neutral-01);
  color: var(--neutral--neutral-04);
  font-size: var(--_all-typography---font-size--body-14-px);
  font-weight: var(--_all-typography---font-width--semibold);
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.lang-switch:hover {
  background-color: var(--neutral--neutral-04);
  color: var(--neutral--neutral-01);
}

.nav-link.is-active {
  background-color: var(--neutral--neutral-04);
  color: var(--neutral--neutral-01);
}

/* La plantilla declara `white-space: pre` en los enlaces del menú.

   Con `pre`, los saltos de línea y la sangría del HTML dejan de colapsar y se
   convierten en líneas reales: cada enlace pasaba a medir 132 px en lugar de
   42, y en móvil el menú se estiraba media pantalla. En el original no se
   notaba porque su HTML venía minificado, sin saltos de línea. */
.nav-link { white-space: normal; }

/* Botón hamburguesa: dos barras que se cruzan al abrir. */
.menu-button {
  display: none;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.menu-bar {
  display: block;
  width: 25px;
  height: 2px;
  border-radius: 2px;
  background-color: var(--neutral--neutral-04);
  transition: transform .3s ease, opacity .3s ease;
}
.menu-button[aria-expanded="true"] .menu-bar:first-child { transform: translateY(4.5px) rotate(45deg); }
.menu-button[aria-expanded="true"] .menu-bar:last-child  { transform: translateY(-4.5px) rotate(-45deg); }

@media screen and (max-width: 991px) {
  .menu-button { display: flex; }

  /* El menú se despliega como panel bajo la cabecera. */
  .nav-menu-wrapper {
    position: absolute;
    top: calc(100% + 16px);
    left: 0;
    right: 0;
    display: none;
    padding: var(--_all-size---padding--padding-compact);
    border: 1px solid var(--others--stroke);
    border-radius: var(--_all-size---border-radius--radius-large);
    background-color: var(--neutral--neutral-01);
    box-shadow: 0 24px 48px rgba(3, 3, 3, .12);
  }
  .nav-menu-wrapper.is-open { display: block; }

  .nav-menu {
    flex-flow: column;
    align-items: stretch;
    gap: var(--_all-size---all-spacing--spacing-micro);
    display: flex;
  }
  .nav-menu .nav-link { display: block; width: 100%; }

  .navbar-wrapper { position: relative; }
  .nav-menu-button { gap: var(--_all-size---all-spacing--spacing-sm); }
}

/* Cuando el menú móvil está abierto, el fondo no debe desplazarse. */
body.nav-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   3. Barras que dependen de datos reales
   -------------------------------------------------------------------------- */
/* La plantilla fijaba el 65% a mano; aquí el ancho lo decide la recaudación. */
.color-bar { width: var(--bar-width, 0%); transition: width 1s cubic-bezier(.22, 1, .36, 1); }

/* Igual con la gráfica: la altura sale de lo donado cada año. */
.chart-bar .bar { height: var(--bar-height, 36px); transition: height .8s cubic-bezier(.22, 1, .36, 1); }
.chart-bar:nth-child(1) .bar { opacity: .4; }
.chart-bar:nth-child(2) .bar { opacity: .6; }
.chart-bar:nth-child(3) .bar { opacity: .8; }
.chart-bar:nth-child(4) .bar { opacity: 1; }

/* --------------------------------------------------------------------------
   4. Acordeón de preguntas frecuentes
   La plantilla usaba una animación Lottie de 655x655 para un simple "+".
   Esto hace lo mismo con dos pseudoelementos.
   -------------------------------------------------------------------------- */
.question-wrapper {
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.faq-icon {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  border-radius: 2px;
  background-color: var(--neutral--neutral-04);
  transform: translateY(-50%);
  transition: transform .3s ease, opacity .3s ease;
}
.faq-icon::after { transform: translateY(-50%) rotate(90deg); }

.question-wrapper[aria-expanded="true"] .faq-icon::after {
  transform: translateY(-50%) rotate(0deg);
  opacity: 0;
}

/* La altura la fija el guion al abrir, para poder animarla. */
.answer-wrapper {
  height: 0;
  overflow: hidden;
  transition: height .35s cubic-bezier(.22, 1, .36, 1);
}
.answer-wrapper[hidden] { display: block; }

.answer-text > * + * { margin-top: 1em; }
.answer-text a { color: var(--neutral--neutral-04); text-decoration: underline; }

/* --------------------------------------------------------------------------
   5. Pie: notas del formulario y dirección
   -------------------------------------------------------------------------- */
.form-note {
  margin-top: var(--_all-size---all-spacing--spacing-sm);
  color: var(--neutral--neutral-03);
  font-size: var(--_all-typography---font-size--body-14-px);
}

.footer-address {
  color: var(--neutral--neutral-03);
  font-size: var(--_all-typography---font-size--body-16-px);
  line-height: var(--_all-typography---line-hight--large);
}

.social-icon { color: var(--theme--color-03); }
.social-icon svg { display: block; }

/* Reemplaza las reglas por id de Webflow (#w-node-…) con selectores legibles:
   en pantallas medias, la tercera tarjeta de voluntariado ocupa dos columnas. */
@media screen and (max-width: 991px) {
  .volunteer-card-wrapper > .volunteer-card:last-child { grid-area: span 1 / span 2 / span 1 / span 2; }
}
@media screen and (max-width: 479px) {
  .footer-menu-wrapper > .footer-menu:last-child { grid-area: span 1 / span 2 / span 1 / span 2; }
}

/* --------------------------------------------------------------------------
   6. Avisos: cookies y mensajes de formulario
   -------------------------------------------------------------------------- */
.cookie-banner {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  padding: var(--_all-size---padding--padding-compact);
}
.cookie-inner {
  display: flex;
  flex-flow: row;
  align-items: center;
  gap: var(--_all-size---all-spacing--spacing-md-minus);
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--_all-size---padding--padding-compact) var(--_all-size---padding--padding-s);
  border-radius: var(--_all-size---border-radius--radius-large);
  background-color: var(--neutral--neutral-04);
  box-shadow: 0 24px 48px rgba(3, 3, 3, .24);
}
.cookie-text {
  flex: 1;
  margin: 0;
  color: rgba(255, 255, 255, .75);
  font-size: var(--_all-typography---font-size--body-14-px);
  line-height: var(--_all-typography---line-hight--large);
}
.cookie-link { color: var(--neutral--neutral-01); font-weight: var(--_all-typography---font-width--semibold); }
.cookie-banner .primary-button-v2 { flex: none; }

@media screen and (max-width: 767px) {
  .cookie-inner { flex-flow: column; align-items: stretch; }
}

.flash {
  margin-top: var(--_all-size---all-spacing--spacing-ssm);
  padding: var(--_all-size---padding--padding-compact) var(--_all-size---padding--padding-s);
  border: 1px solid var(--others--stroke);
  border-radius: var(--_all-size---border-radius--radius-small-medium);
  background-color: var(--neutral--neutral-02);
}
.flash-text { margin: 0; font-weight: var(--_all-typography---font-width--medium); color: var(--neutral--neutral-04); }

.flash--success { background-color: #eafaf0; border-color: var(--theme--color-04); }
.flash--error   { background-color: #fff1ec; border-color: var(--theme--color-03); }
.flash--warning { background-color: #fffae6; border-color: var(--theme--color-01); }

/* --------------------------------------------------------------------------
   7. Páginas interiores
   La plantilla solo traía la portada, así que estas piezas se componen con
   sus mismos ingredientes: mismos radios, mismos colores, misma tipografía.
   -------------------------------------------------------------------------- */
.page-hero {
  padding: 190px var(--_all-size---padding--padding-left-right) var(--_all-size---padding--padding-xxl);
  background-color: var(--neutral--neutral-02);
}
.page-hero-title { align-items: flex-start; text-align: left; }
.page-hero-title .width-515px { text-align: left; max-width: 640px; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--_all-size---all-spacing--spacing-micro-plus);
  margin-bottom: var(--_all-size---all-spacing--spacing-ssm);
  color: var(--neutral--neutral-03);
  font-size: var(--_all-typography---font-size--body-14-px);
}
.breadcrumb a { color: var(--neutral--neutral-03); text-decoration: none; }
.breadcrumb a:hover { color: var(--theme--color-03); }
.breadcrumb [aria-current] { color: var(--neutral--neutral-04); font-weight: var(--_all-typography---font-width--medium); }
.breadcrumb-sep { opacity: .4; }

/* Sección genérica de página interior. */
.section {
  padding: var(--_all-size---padding--global-padding) var(--_all-size---padding--padding-left-right);
  position: relative;
}
.section--tight { padding-top: var(--_all-size---padding--padding-xxl); padding-bottom: var(--_all-size---padding--padding-xxl); }
.section--muted { background-color: var(--neutral--neutral-02); }

/* Rejillas reutilizables. */
.grid-2, .grid-3, .grid-4 {
  display: grid;
  gap: var(--_all-size---all-spacing--spacing-md-minus);
  width: 100%;
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media screen and (max-width: 991px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .page-hero { padding-top: 150px; }
}
@media screen and (max-width: 767px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .page-hero { padding-top: 130px; }
}

/* Tarjeta base: el mismo borde y radio que .program-card. */
.panel {
  padding: var(--_all-size---padding--padding-s);
  border: 1px solid var(--others--stroke);
  border-radius: var(--_all-size---border-radius--radius-large);
  background-color: var(--neutral--neutral-01);
}
.panel--flush { padding: 0; overflow: hidden; }

/* Retratos del equipo y de personas. */
.person-photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--_all-size---border-radius--radius-large);
}

/* --------------------------------------------------------------------------
   8. Formularios
   -------------------------------------------------------------------------- */
.field { display: flex; flex-flow: column; gap: var(--_all-size---all-spacing--spacing-micro-plus); }
.field-label {
  color: var(--neutral--neutral-04);
  font-size: var(--_all-typography---font-size--body-14-px);
  font-weight: var(--_all-typography---font-width--medium);
}
.field-hint { color: var(--neutral--neutral-03); font-size: var(--_all-typography---font-size--body-14-px); }
.field-error { color: #c0392b; font-size: var(--_all-typography---font-size--body-14-px); }

.field-input,
.field-select,
.field-textarea {
  width: 100%;
  padding: var(--_all-size---padding--padding-xxs) var(--_all-size---padding--padding-compact);
  border: 1px solid var(--others--stroke);
  border-radius: var(--_all-size---border-radius--radius-small-medium);
  background-color: var(--neutral--neutral-01);
  color: var(--neutral--neutral-04);
  font-family: var(--_all-typography---font-family--font);
  font-size: var(--_all-typography---font-size--body-16-px);
  line-height: var(--_all-typography---line-hight--large);
  transition: border-color .2s ease;
}
.field-textarea { min-height: 150px; resize: vertical; }
.field-input:focus,
.field-select:focus,
.field-textarea:focus { border-color: var(--neutral--neutral-04); }
.field-input::placeholder, .field-textarea::placeholder { color: #9a9a9a; }

/* Importes predefinidos de la página de donación. */
.amount-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--_all-size---all-spacing--spacing-sm);
}
@media screen and (max-width: 767px) { .amount-grid { grid-template-columns: repeat(2, 1fr); } }

.amount-option {
  padding: var(--_all-size---padding--padding-xxs) var(--_all-size---padding--padding-compact);
  border: 1px solid var(--others--stroke);
  border-radius: var(--_all-size---border-radius--radius-xxl);
  background-color: var(--neutral--neutral-01);
  color: var(--neutral--neutral-04);
  font-family: inherit;
  font-size: var(--_all-typography---font-size--body-16-px);
  font-weight: var(--_all-typography---font-width--semibold);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.amount-option:hover { border-color: var(--neutral--neutral-04); }
.amount-option.is-selected {
  background-color: var(--neutral--neutral-04);
  border-color: var(--neutral--neutral-04);
  color: var(--neutral--neutral-01);
}

/* --------------------------------------------------------------------------
   9. Texto largo (artículos, páginas legales)
   -------------------------------------------------------------------------- */
.prose { color: var(--neutral--neutral-03); font-size: var(--_all-typography---font-size--body-18-px); line-height: var(--_all-typography---line-hight--extra-large); }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { margin-top: 1.8em; color: var(--neutral--neutral-04); font-size: var(--_all-typography---font-size--heading-04); line-height: var(--_all-typography---line-hight--medium); font-weight: var(--_all-typography---font-width--semibold); }
.prose h3 { margin-top: 1.6em; color: var(--neutral--neutral-04); font-size: var(--_all-typography---font-size--heading-05); font-weight: var(--_all-typography---font-width--semibold); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: .5em; }
.prose a { color: var(--neutral--neutral-04); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--theme--color-03); }
.prose img { max-width: 100%; height: auto; border-radius: var(--_all-size---border-radius--radius-large); }
.prose blockquote {
  padding-left: var(--_all-size---padding--padding-compact);
  border-left: 3px solid var(--theme--color-03);
  color: var(--neutral--neutral-04);
  font-size: var(--_all-typography---font-size--body-20-px);
}

/* --------------------------------------------------------------------------
   10. Paginación
   -------------------------------------------------------------------------- */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--_all-size---all-spacing--spacing-micro-plus); }
.pagination a, .pagination span {
  min-width: 44px;
  padding: var(--_all-size---padding--padding-xs) var(--_all-size---padding--padding-xxs);
  border: 1px solid var(--others--stroke);
  border-radius: var(--_all-size---border-radius--radius-xxl);
  color: var(--neutral--neutral-04);
  text-align: center;
  text-decoration: none;
}
.pagination a:hover { border-color: var(--neutral--neutral-04); }
.pagination [aria-current] { background-color: var(--neutral--neutral-04); border-color: var(--neutral--neutral-04); color: var(--neutral--neutral-01); }

/* Estado vacío: cuando todavía no hay contenido publicado. */
.empty-state {
  padding: var(--_all-size---padding--padding-xxl) var(--_all-size---padding--padding-s);
  border: 1px dashed var(--others--stroke);
  border-radius: var(--_all-size---border-radius--radius-large);
  text-align: center;
  color: var(--neutral--neutral-03);
}

/* --------------------------------------------------------------------------
   11. Aparición al hacer scroll
   Tres redes de seguridad para que el contenido NUNCA quede invisible:
   1. Solo se oculta si el guion marcó <html class="js">.
   2. Si no hay IntersectionObserver, se muestra todo de una vez.
   3. Un temporizador de respaldo revela todo pasados 2,5 s.
   -------------------------------------------------------------------------- */
.js [data-animate] {
  opacity: 0;
  transform: translateY(24px);
}
.js [data-animate].is-visible,
.js [data-animate].reveal-all {
  opacity: 1;
  transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
}

/* Quien pidió menos movimiento no ve ninguno. */
@media (prefers-reduced-motion: reduce) {
  .js [data-animate] { opacity: 1; transform: none; }
  .color-bar, .chart-bar .bar, .answer-wrapper, .menu-bar { transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   12. Piezas de contacto, voluntariado, agradecimiento y páginas de aviso
   Todo lo de aquí abajo se apoya en las mismas variables del sistema: son
   composiciones que la plantilla no traía porque solo incluía la portada.
   -------------------------------------------------------------------------- */

/* Los botones de la plantilla no declaran text-decoration porque en Webflow
   siempre eran <a class="… w-inline-block">. Escritos como enlaces normales,
   el navegador los subraya. Solo afecta a los enlaces, no a los <button>. */
a.primary-button,
a.primary-button-v2,
a.white-button,
a.border-button { text-decoration: none; }

/* Columna vertical con aire uniforme: contenido de un .panel (formularios y
   tarjetas de texto) y columnas laterales de contacto y voluntariado. */
.stack {
  display: flex;
  flex-flow: column;
  gap: var(--_all-size---all-spacing--spacing-ssm);
}

/* Columna centrada: páginas de agradecimiento, error y baja del boletín.
   Los bloques de ancho completo se estiran; los botones se quedan centrados
   por sí solos al conservar su ancho natural. */
.stack-center {
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: var(--_all-size---all-spacing--spacing-lg);
  max-width: 760px;
  margin: 0 auto;
}
.stack-center > .title,
.stack-center > .panel,
.stack-center > .grid-2,
.stack-center > .grid-3,
.stack-center > .chip-block { width: 100%; }

/* Contenido principal + columna de apoyo (formulario / datos, formulario /
   requisitos). Se apila en una sola columna en tabletas y móviles. */
.grid-aside {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--_all-size---all-spacing--spacing-lg);
  align-items: start;
}
@media screen and (max-width: 991px) {
  .grid-aside { grid-template-columns: 1fr; }
}

/* Separación entre el encabezado de una sección y la rejilla que le sigue. */
.section-block { margin-top: var(--_all-size---all-spacing--spacing-xl-minus); }

/* Páginas sin page-hero (gracias, error, 404, baja): la cabecera del sitio
   flota encima, así que la primera sección reserva su altura igual que hace
   `.page-hero`, con los mismos saltos por tamaño de pantalla. */
.section--top { padding-top: 190px; }
@media screen and (max-width: 991px) { .section--top { padding-top: 150px; } }
@media screen and (max-width: 767px) { .section--top { padding-top: 130px; } }

/* --- Formularios --- */

/* Un grupo de casillas se agrupa con <fieldset>, que trae borde y sangrado
   propios del navegador. No se le da display:flex porque <legend> es una caja
   especial y algunos navegadores la colocan mal dentro de un contenedor flex. */
.fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.fieldset > legend { padding: 0; margin-bottom: var(--_all-size---all-spacing--spacing-micro-plus); }

/* Campo que ocupa toda la fila dentro de .grid-2. */
.field--wide { grid-column: 1 / -1; }

.form-note a { color: var(--neutral--neutral-04); text-decoration: underline; text-underline-offset: 3px; }
.form-note a:hover { color: var(--theme--color-03); }

/* Casilla de verificación: la plantilla no traía ninguna. */
.check-option {
  display: flex;
  align-items: center;
  gap: var(--_all-size---all-spacing--spacing-sm);
  padding: var(--_all-size---padding--padding-xxs) var(--_all-size---padding--padding-compact);
  border: 1px solid var(--others--stroke);
  border-radius: var(--_all-size---border-radius--radius-small-medium);
  color: var(--neutral--neutral-04);
  cursor: pointer;
  transition: border-color .2s ease;
}
.check-option:hover { border-color: var(--neutral--neutral-04); }
.check-input {
  flex: none;
  width: 18px;
  height: 18px;
  accent-color: var(--neutral--neutral-04);
  cursor: pointer;
}

/* Campo trampa del antispam: fuera de la pantalla, pero presente en el envío.
   No se usa .visually-hidden porque eso sí lo leen los lectores de pantalla. */
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Listas de puntos con viñeta propia --- */
.check-list { display: flex; flex-flow: column; gap: var(--_all-size---all-spacing--spacing-sm); margin: 0; padding: 0; list-style: none; }
.check-item {
  position: relative;
  padding-left: var(--_all-size---all-spacing--spacing-md-minus);
  color: var(--neutral--neutral-03);
  font-size: var(--_all-typography---font-size--body-16-px);
  line-height: var(--_all-typography---line-hight--large);
}
.check-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 8px;
  height: 8px;
  border-radius: var(--_all-size---border-radius--radius-xxl);
  background-color: var(--theme--color-04);
}

/* --- Tarjetas de datos de contacto --- */
.info-card {
  display: flex;
  align-items: flex-start;
  gap: var(--_all-size---all-spacing--spacing-sm-plus);
  padding: var(--_all-size---padding--padding-compact);
  border: 1px solid var(--others--stroke);
  border-radius: var(--_all-size---border-radius--radius-small-medium);
  background-color: var(--neutral--neutral-01);
}
/* El icono es el mismo componente del sistema; aquí no flota sobre una
   etiqueta, así que vuelve al flujo normal. */
.info-card .label-icon-wrapper { position: static; flex: none; }

.info-card-text { display: flex; flex-flow: column; gap: var(--_all-size---all-spacing--spacing-micro); min-width: 0; }
.info-card-label { color: var(--neutral--neutral-03); text-transform: uppercase; letter-spacing: .06em; }
.info-card-value {
  color: var(--neutral--neutral-04);
  font-size: var(--_all-typography---font-size--body-16-px);
  font-weight: var(--_all-typography---font-width--medium);
  line-height: var(--_all-typography---line-hight--large);
  overflow-wrap: anywhere;
  text-decoration: none;
}
a.info-card-value:hover { color: var(--theme--color-03); }

/* La plantilla solo definía el fondo negro del icono para .label; aquí hace
   falta también en las tarjetas de contacto. Los iconos son blancos. */
.label-icon-wrapper.bg-theme-color-02 { background-color: var(--theme--color-02); }

.map-frame { display: block; width: 100%; height: 260px; border: 0; }

/* Tarjeta oscura de llamada a la acción dentro de una columna. */
.panel--dark {
  background-color: var(--theme--color-02);
  border-color: var(--theme--color-02);
}
.panel--dark .heading-h4,
.panel--dark p { color: var(--neutral--neutral-01); }

/* Imagen recortada con el radio del sistema. */
.media-frame { border-radius: var(--_all-size---border-radius--radius-large); overflow: hidden; }
.media-frame img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* --- Página de agradecimiento --- */
.summary-cell { display: flex; flex-flow: column; gap: var(--_all-size---all-spacing--spacing-micro); }

.detail-list {
  margin: 0;
  border: 1px solid var(--others--stroke);
  border-radius: var(--_all-size---border-radius--radius-small-medium);
  overflow: hidden;
}
.detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--_all-size---all-spacing--spacing-sm-plus);
  padding: var(--_all-size---padding--padding-xxs) var(--_all-size---padding--padding-compact);
}
.detail-row + .detail-row { border-top: 1px solid var(--others--stroke); }
.detail-text { display: flex; flex-flow: column; gap: var(--_all-size---all-spacing--spacing-micro); min-width: 0; }
.detail-value {
  margin: 0;
  color: var(--neutral--neutral-04);
  font-size: var(--_all-typography---font-size--body-16-px);
  font-weight: var(--_all-typography---font-width--semibold);
  overflow-wrap: anywhere;
}

/* Botón de copiar. El guion le reemplaza el texto, así que no lleva nada
   dentro: cualquier icono se perdería al confirmar la copia. */
.copy-button {
  flex: none;
  padding: var(--_all-size---padding--padding-xs) var(--_all-size---padding--padding-compact);
  border: 1px solid var(--others--stroke);
  border-radius: var(--_all-size---border-radius--radius-xxl);
  background-color: var(--neutral--neutral-01);
  color: var(--neutral--neutral-04);
  font-family: inherit;
  font-size: var(--_all-typography---font-size--body-14-px);
  font-weight: var(--_all-typography---font-width--semibold);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.copy-button:hover {
  background-color: var(--neutral--neutral-04);
  border-color: var(--neutral--neutral-04);
  color: var(--neutral--neutral-01);
}

/* Aviso destacado dentro de un panel (la referencia de la transferencia). */
.note {
  padding: var(--_all-size---padding--padding-compact);
  border: 1px solid var(--others--stroke);
  border-radius: var(--_all-size---border-radius--radius-small-medium);
  background-color: var(--neutral--neutral-02);
}
.note p { margin: 0; }

/* --- Páginas de aviso (404, error, baja) --- */
.error-code { color: var(--theme--color-03); }

.chip-block {
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: var(--_all-size---all-spacing--spacing-sm-plus);
  padding-top: var(--_all-size---all-spacing--spacing-lg);
  border-top: 1px solid var(--others--stroke);
}
.chip-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--_all-size---all-spacing--spacing-sm); }
.chip-row .program-tag { text-decoration: none; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.chip-row .program-tag:hover {
  background-color: var(--neutral--neutral-04);
  border-color: var(--neutral--neutral-04);
  color: var(--neutral--neutral-01);
}

/* --------------------------------------------------------------------------
   13. Blog, artículo y páginas de contenido
   La plantilla Kindora no traía ni listado de noticias ni páginas de texto
   largo. Todo lo de aquí abajo se apoya en sus mismas variables para que no
   se note la costura.
   -------------------------------------------------------------------------- */

/* `.stack` (definido más arriba) deja 20 px entre bloques: bien dentro de un
   panel, poco entre el título de una sección y su rejilla. Estas dos variantes
   solo cambian esa distancia, no el comportamiento. */
.stack--wide { gap: var(--_all-size---all-spacing--spacing-lg-plus); }
.reading-column.stack { gap: var(--_all-size---all-spacing--spacing-lg-minus); }

/* Los botones son `display:flex`: sueltos en un bloque ocuparían todo el
   ancho, así que se centran dentro de una fila propia. */
.button-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--_all-size---all-spacing--spacing-sm);
}

/* ---- Barra de filtros y búsqueda del blog ---- */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--_all-size---all-spacing--spacing-ssm);
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--_all-size---all-spacing--spacing-micro-plus);
}

/* Mismo lenguaje que `border-button`, en tamaño de etiqueta. */
.filter-chip {
  padding: var(--_all-size---padding--padding-xs) var(--_all-size---padding--padding-compact);
  border: 1px solid var(--others--stroke);
  border-radius: var(--_all-size---border-radius--radius-xxl);
  background-color: var(--neutral--neutral-01);
  color: var(--neutral--neutral-04);
  font-size: var(--_all-typography---font-size--body-14-px);
  font-weight: var(--_all-typography---font-width--medium);
  line-height: var(--_all-typography---line-hight--large);
  text-decoration: none;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.filter-chip:hover { border-color: var(--neutral--neutral-04); }
.filter-chip.is-active {
  background-color: var(--neutral--neutral-04);
  border-color: var(--neutral--neutral-04);
  color: var(--neutral--neutral-01);
}

.toolbar-search {
  display: flex;
  align-items: center;
  gap: var(--_all-size---all-spacing--spacing-micro-plus);
}
.toolbar-search .field-input { width: 220px; }

@media screen and (max-width: 767px) {
  .toolbar-search { width: 100%; }
  .toolbar-search .field-input { flex: 1; width: auto; }
}

/* ---- Tarjeta de artículo ----
   Hereda de `program-card`; solo añade lo que un artículo necesita: que
   todas las tarjetas de una fila midan igual y que el botón quede abajo. */
.post-card { height: 100%; }
.post-card .program-content { flex: 1; }
.post-card .program-text { flex: 1; }
.post-card .last-date { flex-wrap: wrap; }

/* ---- Artículo ---- */
.reading-column { max-width: 760px; margin-left: auto; margin-right: auto; }

.post-cover-wrapper { line-height: 0; }
.post-cover {
  display: block;
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  border-radius: var(--_all-size---border-radius--radius-xl);
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--_all-size---all-spacing--spacing-sm);
  color: var(--neutral--neutral-03);
}
.post-meta p, .post-meta time { margin: 0; }
.post-meta .program-tag { text-decoration: none; }

.article-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--_all-size---all-spacing--spacing-sm);
  padding-top: var(--_all-size---all-spacing--spacing-lg-minus);
  border-top: 1px solid var(--others--stroke);
}

/* ---- Aviso de vigencia de los documentos legales ---- */
.notice {
  padding: var(--_all-size---padding--padding-compact) var(--_all-size---padding--padding-s);
  border-left: 3px solid var(--theme--color-01);
  border-radius: var(--_all-size---border-radius--radius-small-medium);
  background-color: var(--neutral--neutral-02);
}
.notice-text {
  margin: 0;
  color: var(--neutral--neutral-03);
  font-size: var(--_all-typography---font-size--body-14-px);
  line-height: var(--_all-typography---line-hight--large);
}

/* ---- Indicadores en tarjeta (transparencia y "nosotros") ---- */
.stat-tile {
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: var(--_all-size---all-spacing--spacing-micro-plus);
  padding: var(--_all-size---padding--padding-s);
  border: 1px solid var(--others--stroke);
  border-radius: var(--_all-size---border-radius--radius-large);
  background-color: var(--neutral--neutral-01);
  text-align: center;
}
.stat-tile p { margin: 0; }
.stat-tile-number {
  color: var(--neutral--neutral-04);
  font-size: var(--_all-typography---font-size--heading-03);
  line-height: var(--_all-typography---line-hight--medium);
  font-weight: var(--_all-typography---font-width--semibold);
}
.stat-tile-note { color: var(--neutral--neutral-03); }

/* ---- Reparto por programa: barras con el dato real ---- */
.bar-list { margin: 0; padding: 0; list-style: none; }
.bar-list > li + li { margin-top: var(--_all-size---all-spacing--spacing-ssm); }
.bar-row { display: flex; flex-flow: column; gap: var(--_all-size---all-spacing--spacing-micro-plus); }
.bar-row-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--_all-size---all-spacing--spacing-sm);
}

/* ---- Equipo ---- */
.person-card { display: flex; flex-flow: column; gap: var(--_all-size---all-spacing--spacing-sm); }
.person-card-text { display: flex; flex-flow: column; gap: var(--_all-size---all-spacing--spacing-micro); }
.person-card-text h3 { margin: 0; }
.person-card-text p { margin: 0; color: var(--neutral--neutral-03); }

/* ---- Ejes de trabajo ---- */
.grid-5 {
  display: grid;
  gap: var(--_all-size---all-spacing--spacing-md-minus);
  grid-template-columns: repeat(5, 1fr);
  width: 100%;
}
@media screen and (max-width: 991px) { .grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media screen and (max-width: 767px) { .grid-5 { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 479px) { .grid-5 { grid-template-columns: 1fr; } }

.focus-card {
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: var(--_all-size---all-spacing--spacing-sm);
  padding: var(--_all-size---padding--padding-s);
  border: 1px solid var(--others--stroke);
  border-radius: var(--_all-size---border-radius--radius-large);
  background-color: var(--neutral--neutral-01);
  text-align: center;
  text-decoration: none;
  transition: border-color .3s ease, transform .3s ease;
}
.focus-card:hover { border-color: var(--neutral--neutral-04); transform: translateY(-4px); }
.focus-card h3 { margin: 0; }

.focus-icon {
  display: flex;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--_all-size---border-radius--radius-xxl);
}

/* ---- Enlace dentro de texto corrido fuera de `.prose` ---- */
.text-link { color: var(--neutral--neutral-04); text-decoration: underline; text-underline-offset: 3px; }
.text-link:hover { color: var(--theme--color-03); }

.closing-note { color: var(--neutral--neutral-03); text-align: center; }

/* --------------------------------------------------------------------------
   12. Listado y ficha de programas
   La plantilla solo traía el carrusel de tres tarjetas de la portada. Estas
   reglas la adaptan a un listado completo y a una ficha, sin repintar nada:
   son las mismas piezas (.program-card, .panel) con el espacio que les falta.
   -------------------------------------------------------------------------- */

/* En la portada el título de la tarjeta es un <a>; en el listado y en la
   ficha tiene que ser un encabezado real, así que hereda el mismo aspecto. */
h2.program-title,
h3.program-title { margin: 0; }
.program-title a {
  color: inherit;
  text-decoration: none;
  transition: color .4s;
}

/* Tarjetas de una misma fila con la misma altura: el botón queda alineado
   aunque los extractos midan distinto. */
.card-stretch > [role="listitem"] { display: flex; }
.card-stretch .program-card { height: 100%; }
.card-stretch .program-content { flex: 1; }
.card-stretch .program-text { flex: 1; }

/* El listado conserva las dos acciones que ya ofrecía: ver ficha y donar. */
.program-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--_all-size---all-spacing--spacing-sm);
}
.program-actions > * { flex: 1 1 auto; }

/* Ficha: relato a la izquierda, panel de donación a la derecha. */
.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 370px;
  gap: var(--_all-size---all-spacing--spacing-xl-minus);
  align-items: start;
}
.detail-main { min-width: 0; }

/* El panel acompaña la lectura: quien decide donar a mitad del texto no
   tiene que volver arriba a buscar el botón. */
.detail-aside {
  position: sticky;
  top: 120px;
  display: flex;
  flex-flow: column;
  gap: var(--_all-size---all-spacing--spacing-md-minus);
}

.detail-image {
  width: 100%;
  max-height: 440px;
  margin-bottom: var(--_all-size---all-spacing--spacing-md-minus);
  object-fit: cover;
  border-radius: var(--_all-size---border-radius--radius-xl);
}

@media screen and (max-width: 991px) {
  .detail-layout { grid-template-columns: 1fr; }
  /* Apilado, un panel pegajoso solo estorbaría. */
  .detail-aside { position: static; }
}

/* Contenido interno de un .panel, con ritmo vertical propio. */
.panel-block {
  display: flex;
  flex-flow: column;
  gap: var(--_all-size---all-spacing--spacing-sm-plus);
}
.panel-block > * { margin-top: 0; margin-bottom: 0; }

/* Datos sueltos del programa: dónde ocurre y a cuánta gente llega. */
.fact-list {
  display: flex;
  flex-flow: column;
  gap: var(--_all-size---all-spacing--spacing-sm);
}
.fact {
  display: flex;
  justify-content: space-between;
  gap: var(--_all-size---all-spacing--spacing-sm);
}
.fact dt {
  color: var(--neutral--neutral-03);
  font-size: var(--_all-typography---font-size--body-16-px);
}
.fact dd {
  margin: 0;
  color: var(--neutral--neutral-04);
  font-size: var(--_all-typography---font-size--body-16-px);
  font-weight: var(--_all-typography---font-width--semibold);
  text-align: right;
}

.link-list {
  display: flex;
  flex-flow: column;
  gap: var(--_all-size---all-spacing--spacing-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}
.link-list a {
  color: var(--neutral--neutral-04);
  font-size: var(--_all-typography---font-size--body-16-px);
  font-weight: var(--_all-typography---font-width--medium);
  text-decoration: none;
  transition: color .2s ease;
}
.link-list a:hover { color: var(--theme--color-03); }

/* --------------------------------------------------------------------------
   14. Página de donación

   Dos columnas: los cuatro pasos a la izquierda, todos visibles a la vez, y
   un resumen pegajoso a la derecha que se actualiza mientras se elige. Se
   descartó el formato de asistente por pasos: quien llega aquí ya decidió
   donar, y esconderle campos solo añade fricción y abandono.
   -------------------------------------------------------------------------- */
.donate-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--_all-size---all-spacing--spacing-lg);
  align-items: start;
}
.donate-main  { display: flex; flex-flow: column; gap: var(--_all-size---all-spacing--spacing-md-minus); }
.donate-aside { display: flex; flex-flow: column; gap: var(--_all-size---all-spacing--spacing-md-minus); position: sticky; top: 24px; }

@media screen and (max-width: 991px) {
  .donate-layout { grid-template-columns: 1fr; }
  .donate-aside  { position: static; }
}

.donate-step { border: 1px solid var(--others--stroke); }
.donate-step + .donate-step { margin-top: 0; }

.donate-step-title {
  display: flex;
  align-items: center;
  gap: var(--_all-size---all-spacing--spacing-sm);
  margin-bottom: var(--_all-size---all-spacing--spacing-ssm);
  padding: 0;
  color: var(--neutral--neutral-04);
  font-size: var(--_all-typography---font-size--heading-05);
  font-weight: var(--_all-typography---font-width--semibold);
  letter-spacing: var(--_all-typography---letter-spacing--small);
}
.donate-step-number {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: 50%;
  font-size: var(--_all-typography---font-size--body-16-px);
  font-weight: var(--_all-typography---font-width--semibold);
}
.donate-step-number.bg-theme-color-02 { color: var(--neutral--neutral-01); }

.donate-custom, .donate-frequency { margin-top: var(--_all-size---all-spacing--spacing-ssm); }

.amount-input { position: relative; }
.amount-currency {
  position: absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  color: var(--neutral--neutral-03);
  font-weight: var(--_all-typography---font-width--semibold);
}
.amount-input .field-input { padding-left: 34px; font-weight: var(--_all-typography---font-width--semibold); }

/* Opciones tipo píldora: el input real queda oculto pero sigue siendo el que
   recibe el foco del teclado, y el contorno se dibuja sobre la cara visible. */
.choice-row  { display: flex; flex-wrap: wrap; gap: var(--_all-size---all-spacing--spacing-sm); }
.choice-grid { display: flex; flex-wrap: wrap; gap: var(--_all-size---all-spacing--spacing-sm); }
.choice { position: relative; display: inline-flex; }
.choice input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.choice-face {
  display: inline-flex;
  align-items: center;
  padding: var(--_all-size---padding--padding-xxs) var(--_all-size---padding--padding-compact);
  border: 1px solid var(--others--stroke);
  border-radius: var(--_all-size---border-radius--radius-xxl);
  color: var(--neutral--neutral-04);
  font-size: var(--_all-typography---font-size--body-16-px);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.choice input:hover + .choice-face { border-color: var(--neutral--neutral-04); }
.choice input:checked + .choice-face {
  background-color: var(--neutral--neutral-04);
  border-color: var(--neutral--neutral-04);
  color: var(--neutral--neutral-01);
}
.choice input:focus-visible + .choice-face {
  outline: 3px solid var(--theme--color-03);
  outline-offset: 3px;
}

/* Formas de pago: tarjetas apiladas. */
.method-list { display: flex; flex-flow: column; gap: var(--_all-size---all-spacing--spacing-sm); }
.method { position: relative; display: block; }
.method input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.method-face {
  display: flex;
  flex-flow: column;
  gap: 4px;
  padding: var(--_all-size---padding--padding-compact);
  border: 1px solid var(--others--stroke);
  border-radius: var(--_all-size---border-radius--radius-small-medium);
  transition: border-color .2s ease, background-color .2s ease;
}
.method input:checked + .method-face {
  border-color: var(--neutral--neutral-04);
  background-color: var(--neutral--neutral-02);
}
.method input:focus-visible + .method-face { outline: 3px solid var(--theme--color-03); outline-offset: 3px; }
.method-head { display: flex; align-items: center; gap: var(--_all-size---all-spacing--spacing-sm); }
.method-name { color: var(--neutral--neutral-04); font-weight: var(--_all-typography---font-width--semibold); }
.method-note { color: var(--neutral--neutral-03); font-size: var(--_all-typography---font-size--body-14-px); }
.method-badge {
  padding: 1px 10px;
  border-radius: var(--_all-size---border-radius--radius-xxl);
  background-color: var(--theme--color-01);
  color: var(--neutral--neutral-04);
  font-size: 12px;
  font-weight: var(--_all-typography---font-width--medium);
}
/* Una forma de pago aún no disponible se muestra, pero no se puede elegir:
   ocultarla haría que quien la busca piense que no existe. */
.method--soon { opacity: .55; }
.method--soon input { cursor: not-allowed; }

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--_all-size---all-spacing--spacing-ssm);
}
.field-grid .field--wide { grid-column: 1 / -1; }
@media screen and (max-width: 767px) { .field-grid { grid-template-columns: 1fr; } }

.field-optional { color: var(--neutral--neutral-03); font-weight: var(--_all-typography---font-width--regular); }

/* Resumen lateral */
.donate-summary { display: flex; flex-flow: column; gap: var(--_all-size---all-spacing--spacing-ssm); }
.donate-amount {
  margin: 0;
  color: var(--neutral--neutral-04);
  font-size: var(--_all-typography---font-size--heading-03);
  font-weight: var(--_all-typography---font-width--semibold);
  letter-spacing: var(--_all-typography---letter-spacing--medium);
  line-height: 1.1;
}
.donate-amount-freq {
  display: block;
  color: var(--neutral--neutral-03);
  font-size: var(--_all-typography---font-size--body-16-px);
  font-weight: var(--_all-typography---font-width--regular);
  letter-spacing: 0;
}
.donate-submit { width: 100%; text-align: center; justify-content: center; }

.timeline { margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.timeline li {
  position: relative;
  padding-left: 38px;
  padding-bottom: var(--_all-size---all-spacing--spacing-ssm);
  counter-increment: paso;
}
.timeline li::before {
  content: counter(paso);
  position: absolute;
  left: 0; top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background-color: var(--neutral--neutral-02);
  border: 1px solid var(--others--stroke);
  font-size: var(--_all-typography---font-size--body-14-px);
  font-weight: var(--_all-typography---font-width--semibold);
  color: var(--neutral--neutral-04);
}
/* Línea que une los pasos, menos en el último. */
.timeline li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 13px; top: 30px; bottom: 6px;
  width: 1px;
  background-color: var(--others--stroke);
}
.timeline strong { display: block; color: var(--neutral--neutral-04); }
.timeline span { color: var(--neutral--neutral-03); font-size: var(--_all-typography---font-size--body-14-px); }
.donate-steps-note { display: flex; flex-flow: column; gap: var(--_all-size---all-spacing--spacing-ssm); }

/* --------------------------------------------------------------------------
   15. Testimonios en bucle

   Por defecto se mantiene la rejilla de tres columnas de la plantilla. Solo
   cuando el guion detecta más de tres opiniones añade `.is-marquee` y el
   bloque pasa a desplazarse. La tarjeta no cambia en ningún caso.
   -------------------------------------------------------------------------- */
.testimonial-marquee { width: 100%; }

.testimonial-marquee.is-marquee {
  overflow: hidden;
  /* Los extremos se desvanecen para que las tarjetas no aparezcan cortadas. */
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.testimonial-marquee.is-marquee .testimonial-wrapper {
  display: flex;
  width: max-content;
  grid-template-columns: none;
  animation: testimonial-loop var(--marquee-duration, 40s) linear infinite;
}
.testimonial-marquee.is-marquee .testimonial-card {
  width: 400px;
  flex: none;
}

/* Al pasar el ratón o al llegar con el teclado se detiene: si no, es
   imposible terminar de leer una opinión. */
.testimonial-marquee.is-marquee:hover .testimonial-wrapper,
.testimonial-marquee.is-marquee:focus-within .testimonial-wrapper {
  animation-play-state: paused;
}

/* Se desplaza justo la mitad: en ese punto la copia ocupa la posición
   original y el reinicio es invisible. */
@keyframes testimonial-loop {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .testimonial-marquee.is-marquee .testimonial-wrapper { animation: none; }
}

/* --------------------------------------------------------------------------
   15 bis. En móvil: carrusel que se arrastra con el dedo

   El desplazamiento automático funciona en escritorio, donde hay sitio para
   ver tres tarjetas y el ratón puede pausarlo. En un teléfono es al revés:
   solo cabe una tarjeta, el texto se va antes de terminar de leerlo y no hay
   forma de pararlo. Aquí se cambia por un carrusel de uno en uno que avanza
   con el dedo y se queda quieto donde se le suelte.

   Es scroll nativo con puntos de anclaje: hereda el desplazamiento por
   inercia del sistema, funciona sin JavaScript y se puede recorrer con el
   teclado. Ninguna librería.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .testimonial-marquee.is-marquee {
    /* El velo de los bordes estorba cuando la tarjeta ocupa toda la pantalla. */
    mask-image: none;
    -webkit-mask-image: none;
    overflow: visible;
  }

  .testimonial-marquee.is-marquee .testimonial-wrapper {
    animation: none;
    width: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--_all-size---padding--padding-compact);
    /* Espacio a los lados para que la primera y la última no queden pegadas. */
    padding-inline: var(--_all-size---padding--padding-compact);
    margin-inline: calc(-1 * var(--_all-size---padding--padding-compact));
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .testimonial-marquee.is-marquee .testimonial-wrapper::-webkit-scrollbar { display: none; }

  .testimonial-marquee.is-marquee .testimonial-card {
    width: min(86vw, 400px);
    scroll-snap-align: center;
  }

  /* Las copias SÍ se muestran aquí: son las que permiten el bucle infinito.
     Al llegar al final de la primera tanda, el guion devuelve el scroll al
     principio de golpe; como la copia es idéntica, el salto no se ve. */

  /* Mientras se arrastra con el dedo o el ratón, se desactiva el anclaje:
     si no, pelea contra el movimiento y da tirones. */
  .testimonial-marquee.is-marquee .testimonial-wrapper.esta-arrastrando {
    scroll-snap-type: none;
    scroll-behavior: auto;
    cursor: grabbing;
    user-select: none;
  }
}

/* --------------------------------------------------------------------------
   16. Cabecera de página interior con imagen de fondo

   La foto va debajo de un velo claro. El texto es lo que importa aquí, así
   que el contraste se garantiza con el velo y no confiando en que la imagen
   generada salga clara: si algún día se cambia por una oscura, el titular
   se sigue leyendo igual.
   -------------------------------------------------------------------------- */
.page-hero--image { position: relative; overflow: hidden; isolation: isolate; }

.page-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, var(--neutral--neutral-02) 12%, rgba(250, 250, 250, .86) 55%, rgba(250, 250, 250, .62) 100%),
    rgba(250, 250, 250, .35);
}

/* En pantallas estrechas el texto ocupa todo el ancho, así que el velo pasa
   a ser parejo: un degradado lateral dejaría el final del titular sin fondo. */
@media screen and (max-width: 767px) {
  .page-hero-veil { background: rgba(250, 250, 250, .88); }
}

/* --------------------------------------------------------------------------
   17. Movimiento

   Criterio: la animación sirve para guiar la mirada, no para lucirse. Nada
   dura más de medio segundo, nada se mueve más de 24 px y todo se apaga si
   el sistema pide menos movimiento.
   -------------------------------------------------------------------------- */

/* Las tarjetas de una rejilla entran una detrás de otra. El retraso lo pone
   el guion en cada hija, para que valga con cualquier número de tarjetas.

   Se revelan tanto si el contenedor recibe `is-visible` como si lo recibe un
   antepasado con `data-animate`: si la revelación dependiera de un único
   elemento, un atributo mal colocado dejaría toda la sección en blanco. */
.js [data-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
}
.js [data-stagger].is-visible > *,
.js .is-visible [data-stagger] > *,
.js [data-stagger].reveal-all > * {
  opacity: 1;
  transform: none;
  transition: opacity .55s ease, transform .55s cubic-bezier(.22, 1, .36, 1);
}

/* Realce al pasar el ratón: se levanta muy poco, lo justo para que se note
   que el elemento responde. */
.program-card,
.involved-card,
.volunteer-card,
.testimonial-card,
.panel {
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease;
}
.program-card:hover,
.volunteer-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(3, 3, 3, .08);
}

/* Las imágenes de tarjeta se acercan despacio dentro de su marco. */
.program-image-wrapper { overflow: hidden; }
.program-image { transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.program-card:hover .program-image { transform: scale(1.05); }

/* Los botones ceden un poco al pulsarlos. */
.primary-button,
.primary-button-v2,
.white-button,
.border-button,
.amount-option {
  transition: transform .18s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.primary-button:active,
.primary-button-v2:active,
.white-button:active,
.border-button:active,
.amount-option:active { transform: scale(.97); }

/* La flecha de la tarjeta de impacto avanza al pasar por encima. */
.icon-button .arrow-right { transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.icon-button:hover .arrow-right { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .js [data-stagger] > * { opacity: 1; transform: none; }
  .program-card:hover,
  .volunteer-card:hover { transform: none; }
  .program-card:hover .program-image { transform: none; }
}

/* ==========================================================================
   18. Correcciones de la versión móvil

   La plantilla traía su propio menú móvil (a pantalla completa, con jQuery).
   Al sustituirlo por un panel desplegable propio, quedaron activas reglas
   suyas que ahora estorban. Aquí se neutralizan una por una.
   ========================================================================== */

@media screen and (max-width: 991px) {

  /* El panel heredaba una altura de pantalla completa. Como la lista es un
     flex en columna, esa altura sobrante se repartía entre los enlaces y
     cada uno acababa midiendo 144 px. Con altura automática, cada enlace
     ocupa lo que ocupa su texto. */
  .nav-menu-wrapper {
    height: auto;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
  }

  .nav-menu .list-item { flex: none; }

  .nav-menu .nav-link {
    padding: var(--_all-size---padding--padding-xs) var(--_all-size---padding--padding-compact);
    line-height: var(--_all-typography---line-hight--large);
  }

  /* Donar es la acción principal del sitio: esconderla en móvil, que es por
     donde entra la mayoría, no tiene sentido. Se queda en la barra, junto al
     botón de menú. */
  .navbar-button {
    display: flex;
    gap: var(--_all-size---all-spacing--spacing-micro-plus);
  }
  .navbar-wrapper { gap: var(--_all-size---all-spacing--spacing-sm); }
  .nav-menu-button {
    column-gap: var(--_all-size---all-spacing--spacing-sm);
    row-gap: var(--_all-size---all-spacing--spacing-sm);
  }

  /* El pie: de cuatro columnas a dos. */
  .footer-top-content   { grid-template-columns: 1fr; }
  .footer-menu-wrapper  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 767px) {
  .header { margin-top: 20px; }
  .navbar-button .header-button { padding-left: 18px; padding-right: 18px; }
}

@media screen and (max-width: 560px) {
  .footer-menu-wrapper { grid-template-columns: 1fr; }
  /* Con el nombre de la marca oculto, el botón de donar cabe entero. */
  .lang-switch { display: none; }
}

/* Los correos y direcciones largas partían la línea y empujaban el ancho de
   la página. Que rompan por donde haga falta antes que desbordar. */
.footer-link,
.footer-address,
.info-card-value,
.breadcrumb { overflow-wrap: anywhere; font-size: 1rem; }

/* Red de seguridad contra el desplazamiento lateral.

   Se usa `clip` y no `hidden` a propósito: `hidden` crea un contenedor de
   desplazamiento y rompería los elementos con `position: sticky` (el resumen
   de la página de donación, por ejemplo). */
html, body { max-width: 100%; overflow-x: clip; }

/* Ninguna imagen debe poder ser más ancha que su contenedor. */
img, svg, video, iframe { max-width: 100%; }

/* --------------------------------------------------------------------------
   19. Vídeo del hero

   Ocupa el mismo hueco que ocupaba la foto y hereda su recorte y su radio.
   El `poster` es esa misma foto, así que si el vídeo no llega a reproducirse
   el bloque se ve exactamente igual que antes.
   -------------------------------------------------------------------------- */
video.hero-image {
  display: block;
  background-color: var(--neutral--neutral-02);

  /* El vídeo es 9:16 y la foto que sustituye era 3:4, bastante menos alta.
     Se le impone la proporción de la foto para que el hero conserve su
     altura de siempre, y el sobrante se recorta por ARRIBA (`bottom`), que
     es donde solo hay cielo y copa del árbol: así las personas y los
     carteles quedan siempre dentro del encuadre. */
  aspect-ratio: 1050 / 1368;
  height: auto;
  object-fit: cover;
  object-position: center bottom;
}