/* =========================================================
   Fundación Utla Kumi — añadidos del sitio

   style.css NO se toca: es el template original, tal como vino.
   Acá va sólo lo que el template no traía, porque era un one-page sin
   páginas internas ni texto largo:

     1. Utilidades compartidas
     2. Blog (listado y lectura)
     3. Páginas completas: banner, migas, separadores
     4. Historia (línea de tiempo)
     5. Valores institucionales
     6. Impacto
     7. CTA de cierre: Únete / Dona / Sé voluntario
     8. Proyectos, Transparencia y Contacto
     9. Rejillas auxiliares

   Todo son clases nuevas o reglas acotadas a un contenedor propio.
   Los colores salen de las variables de marca de style.css: acá no se
   define ni un color suelto.
   ========================================================= */


/* =========================================================
   1. Utilidades compartidas
   ========================================================= */

/* El template titula cada sección con un h2 dentro de .titulo-seccion.
   En las páginas internas ese título es el h1, así que se le copia el
   tamaño del h2: mismo aspecto, jerarquía correcta. */
.titulo-seccion h1 {
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  margin-bottom: .6rem;
}

/* Texto sólo para lectores de pantalla. El template lo usa en el
   formulario de suscripción con estilos en línea; acá queda como clase
   de verdad, reutilizable. */
.oculto-visual {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Medida de lectura para bloques de texto corrido: el contenedor del
   template son 1200px, que para un párrafo dan renglones de más de 130
   caracteres. */
.bloque-texto { max-width: 760px; }
.bloque-texto--centrado { max-width: 760px; margin-left: auto; margin-right: auto; }
.bloque-texto p:last-child { margin-bottom: 0; }

/* Párrafo de entrada, un punto más grande que el cuerpo. */
.entradilla {
  font-size: 1.08rem;
  color: var(--texto-2);
}

/* El teléfono y el correo de la banda de contacto ahora son enlaces
   marcables. El template los tenía como texto plano, así que el `a`
   global les mete el verde de marca — que sobre esta banda oscura da
   1.6:1 y no se lee. Van en blanco, como el resto de la banda, y el
   subrayado en hover es el mismo gesto de la barra superior. */
.banda-contacto__item p a { color: #fff; }
.banda-contacto__item p a:hover { color: #fff; text-decoration: underline; }


/* =========================================================
   2. Blog
   ========================================================= */

/* --- Listado --- */

/* El título de la tarjeta va en el color del texto, no en el verde de
   los enlaces: dentro de la tarjeta ya se entiende que lleva al
   artículo, y el verde competiría con el "Leer más". */
.tarjeta-blog h3 a { color: var(--texto); }
.tarjeta-blog:hover h3 a,
.tarjeta-blog h3 a:hover { color: var(--verde); }

.tarjeta-blog__resumen {
  font-size: .93rem;
  color: var(--apagado);
  margin-bottom: 1rem;
}

.blog__vacio {
  text-align: center;
  color: var(--apagado);
  margin: 0;
}

/* --- Entrada individual --- */
.entrada__articulo { max-width: 760px; margin: 0 auto; }
.entrada__meta { justify-content: center; margin-bottom: 0; }

.entrada__portada {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  margin-bottom: 2.4rem;
}

/* Cuerpo del artículo. Sólo acá dentro: el template pone list-style:none
   a todos los <ul> porque los usa como menús, pero en un texto largo las
   viñetas hacen falta para leer. Igual con los <ol> de Markdown. */
.entrada__cuerpo { font-size: 1.02rem; }
.entrada__cuerpo > *:first-child { margin-top: 0; }
.entrada__cuerpo h2 { font-size: 1.3rem;  margin: 2.4rem 0 1rem; }
.entrada__cuerpo h3 { font-size: 1.08rem; margin: 2rem 0 .8rem; }

.entrada__cuerpo ul,
.entrada__cuerpo ol { margin: 0 0 1.2rem; padding-left: 1.4rem; }
.entrada__cuerpo ul { list-style: disc; }
.entrada__cuerpo ol { list-style: decimal; }
.entrada__cuerpo li { margin-bottom: .45rem; }
.entrada__cuerpo li::marker { color: var(--verde); }

.entrada__cuerpo a { text-decoration: underline; text-underline-offset: 3px; }

.entrada__cuerpo blockquote {
  margin: 2rem 0;
  padding: .4rem 0 .4rem 1.4rem;
  border-left: 3px solid var(--naranja);
  font-family: var(--fuente-titulo);
  font-size: 1.08rem;
  color: var(--texto);
}
.entrada__cuerpo blockquote p:last-child { margin-bottom: 0; }

.entrada__cuerpo img { border-radius: var(--radio); margin: 1.8rem 0; }
.entrada__cuerpo figure { margin: 1.8rem 0; }
.entrada__cuerpo figcaption {
  font-size: .85rem;
  color: var(--apagado);
  text-align: center;
  margin-top: .6rem;
}

.entrada__cuerpo pre {
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1rem 1.2rem;
  overflow-x: auto;
  font-size: .88rem;
  line-height: 1.6;
}
.entrada__cuerpo code {
  font-size: .88em;
  background: var(--fondo-2);
  border-radius: 4px;
  padding: .1em .35em;
}
.entrada__cuerpo pre code { background: none; padding: 0; }

.entrada__cuerpo hr {
  border: 0;
  border-top: 1px solid var(--borde);
  margin: 2.4rem 0;
}

.entrada__cuerpo table { width: 100%; border-collapse: collapse; margin: 1.8rem 0; }
.entrada__cuerpo th,
.entrada__cuerpo td { border: 1px solid var(--borde); padding: .6rem .8rem; text-align: left; }
.entrada__cuerpo th { background: var(--fondo-2); font-family: var(--fuente-titulo); }

.entrada__pie {
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--borde);
}

/* .boton--texto empuja su flecha hacia la derecha al pasar el cursor;
   como esta apunta a la izquierda, acá se mueve hacia el otro lado. */
.entrada__volver:hover svg { transform: translateX(-3px); }

.entrada__navegacion {
  display: flex;
  justify-content: space-between;
  gap: 1.4rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
  font-size: .92rem;
}
.entrada__navegacion a { max-width: 46%; }
@media (max-width: 576px) { .entrada__navegacion a { max-width: 100%; } }


/* =========================================================
   3. Páginas completas: banner de cabecera
   ========================================================= */

/* Misma fórmula que las bandas del template (degradado de marca sobre
   foto). La foto entra por la variable --pagina-hero-img, que pone el
   include, así cada página trae la suya sin tocar el CSS.

   Sin background-attachment: fixed a propósito: el banner está arriba
   del todo y el efecto no se llega a ver, pero sí cuesta pintarlo. */
.pagina-hero {
  position: relative;
  padding: 88px 0 76px;
  text-align: center;
  color: #fff;
  overflow: hidden;
  background:
    linear-gradient(120deg, rgba(var(--sombra-rgb), .78), rgba(var(--verde-oscuro-rgb), .72)),
    var(--pagina-hero-img, none) center / cover no-repeat;
  background-color: var(--verde-oscuro);
}
@media (max-width: 768px) { .pagina-hero { padding: 56px 0 48px; } }

.pagina-hero .eyebrow { justify-content: center; color: var(--naranja); }
.pagina-hero h1 {
  color: #fff;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  margin: 0 auto .8rem;
  max-width: 900px;
  text-shadow: 0 1px 4px rgba(0,0,0,.45);
}
.pagina-hero__texto {
  color: rgba(255,255,255,.9);
  max-width: 620px;
  margin: 0 auto;
}

/* --- Migas --- */
.migas {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .6rem;
  margin-top: 1.6rem;
  font-family: var(--fuente-titulo);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: rgba(255,255,255,.85);
}
.migas a { color: #fff; }
.migas a:hover { color: var(--naranja); text-decoration: underline; }
.migas__sep { color: var(--naranja); }
.migas [aria-current="page"] { color: var(--naranja); }


/* =========================================================
   3b. Separador decorativo
   ========================================================= */
.separador {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 3.4rem auto;
  max-width: 420px;
  color: var(--verde);
}
.separador--naranja { color: var(--naranja); }
.separador__linea {
  height: 1px;
  flex: 1;
  background: linear-gradient(to right, transparent, currentColor);
  opacity: .45;
}
.separador__linea:last-child { background: linear-gradient(to left, transparent, currentColor); }
.separador__hoja { width: 26px; height: 26px; flex-shrink: 0; }


/* =========================================================
   4. Historia — línea de tiempo
   ========================================================= */
.linea-tiempo {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  padding-left: 0;
}
/* El riel vertical por el que van colgando los hitos. */
.linea-tiempo::before {
  content: "";
  position: absolute;
  top: .5rem; bottom: .5rem;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(to bottom, transparent, var(--borde) 8%, var(--borde) 92%, transparent);
}

.linea-tiempo__hito {
  position: relative;
  width: 50%;
  padding: 0 2.4rem 2.6rem;
}
/* Se alternan izquierda y derecha, como en el diseño original. */
.linea-tiempo__hito:nth-child(odd)  { margin-left: 0;   text-align: right; }
.linea-tiempo__hito:nth-child(even) { margin-left: 50%; text-align: left; }

/* El punto sobre el riel. */
.linea-tiempo__hito::before {
  content: "";
  position: absolute;
  top: .45rem;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--verde);
  border: 3px solid var(--fondo);
  box-shadow: 0 0 0 2px var(--verde);
}
.linea-tiempo__hito:nth-child(odd)::before  { right: -7px; }
.linea-tiempo__hito:nth-child(even)::before { left: -7px; }
/* Un hito de otro color cada tres, para que el riel no se vea plano. */
.linea-tiempo__hito:nth-child(3n)::before { background: var(--naranja); box-shadow: 0 0 0 2px var(--naranja); }

.linea-tiempo__anio {
  display: inline-block;
  font-family: var(--fuente-titulo);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--verde);
  margin-bottom: .3rem;
}
.linea-tiempo__hito:nth-child(3n) .linea-tiempo__anio { color: var(--naranja-oscuro); }
.linea-tiempo__hito h3 { font-size: 1rem; margin-bottom: .5rem; }
.linea-tiempo__hito p { font-size: .93rem; color: var(--apagado); margin: 0; }

/* En pantallas angostas el riel se va a la izquierda y todo cuelga de él:
   dos columnas de 160px no se leen. */
@media (max-width: 768px) {
  .linea-tiempo::before { left: 7px; }
  .linea-tiempo__hito,
  .linea-tiempo__hito:nth-child(odd),
  .linea-tiempo__hito:nth-child(even) {
    width: 100%;
    margin-left: 0;
    text-align: left;
    padding: 0 0 2.2rem 2.2rem;
  }
  .linea-tiempo__hito:nth-child(odd)::before,
  .linea-tiempo__hito:nth-child(even)::before { left: 0; right: auto; }
}


/* =========================================================
   5. Valores institucionales
   ========================================================= */
/* Heredan .tarjeta-ayuda del template; sólo cambia el trazo del ícono,
   que acá es un SVG en línea y no una imagen. */
.tarjeta-valor__icono svg { width: 40px; height: 40px; color: var(--verde); }
.tarjeta-valor { height: 100%; }


/* =========================================================
   6. Impacto
   ========================================================= */
/* La banda de cifras del template ya trae su fondo y su rejilla de 4.
   Acá sólo se permite que baje a 2 columnas cuando son pocas. */
.impacto .contenedor { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.logros { display: grid; gap: 1rem; max-width: 860px; margin: 0 auto; }
.logro {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--borde);
  border-left: 3px solid var(--verde);
  border-radius: var(--radio);
  padding: 1.2rem 1.4rem;
  transition: var(--transicion);
}
.logro:hover { box-shadow: var(--sombra-verde); transform: translateY(-3px); }
.logro:nth-child(even) { border-left-color: var(--naranja); }
.logro__marca {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--verde-claro);
  color: var(--verde);
  display: flex; align-items: center; justify-content: center;
}
.logro__marca svg { width: 17px; height: 17px; }
.logro h3 { font-size: .98rem; margin-bottom: .3rem; }
.logro p { font-size: .92rem; color: var(--apagado); margin: 0; }


/* =========================================================
   7. CTA de cierre: Únete / Dona / Sé voluntario
   ========================================================= */
.cta-final__opciones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  margin-top: 2.6rem;
  text-align: left;
}
@media (max-width: 900px) {
  .cta-final__opciones { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
}

/* Fondo en el violeta de marca y no en blanco translúcido: la banda lleva
   una foto detrás, y sobre una foto con mucho detalle el texto blanco a
   .1 de opacidad se pierde. */
.cta-final__opcion {
  background: rgba(var(--sombra-rgb), .5);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--radio);
  padding: 1.8rem 1.6rem;
  display: flex;
  flex-direction: column;
  transition: var(--transicion);
}
.cta-final__opcion:hover { background: rgba(var(--sombra-rgb), .3); transform: translateY(-4px); }
/* La opción del medio es la que la fundación quiere destacar. */
.cta-final__opcion--destacada { border-color: var(--naranja); }

.cta-final__icono {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.1rem;
}
.cta-final__icono svg { width: 26px; height: 26px; }

.cta-final__opcion h3 { color: #fff; font-size: 1.05rem; margin-bottom: .5rem; }
.cta-final__opcion p {
  color: rgba(255,255,255,.92);
  font-size: .92rem;
  flex: 1;
  margin-bottom: 1.3rem;
}
/* El botón no se estira a todo el ancho de la tarjeta. */
.cta-final__opcion .boton { align-self: flex-start; }

/* Nota al pie de la banda: la fundación no recibe donaciones por el sitio.
   Va en letra chica pero legible, no escondida. */
.cta-final__nota {
  max-width: 640px;
  margin: 2.8rem auto 0;
  font-size: .88rem;
  color: rgba(255,255,255,.88);
}
.cta-final__nota a { color: var(--naranja); text-decoration: underline; text-underline-offset: 3px; }
.cta-final__nota a:hover { color: #fff; }


/* =========================================================
   8. Proyectos, Transparencia y Contacto
   ========================================================= */

/* --- Proyectos: filtro visual por estado (sin lógica, es una etiqueta) --- */
.tarjeta-causa__categoria--cerrado { background: var(--apagado); color: #fff; }

.proyecto__meta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-family: var(--fuente-titulo);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--apagado);
  margin-bottom: .7rem;
}
.proyecto__meta span { display: inline-flex; align-items: center; gap: .35rem; }
.proyecto__meta svg { width: 13px; height: 13px; color: var(--verde); }

/* --- Transparencia: documentos descargables --- */
.documentos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
@media (max-width: 768px) { .documentos { grid-template-columns: 1fr; } }

.documento {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.2rem 1.4rem;
  transition: var(--transicion);
}
.documento:hover { box-shadow: var(--sombra-verde); transform: translateY(-3px); border-color: var(--verde); }
.documento__icono {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 8px;
  background: var(--verde-claro);
  color: var(--verde);
  display: flex; align-items: center; justify-content: center;
}
.documento__icono svg { width: 21px; height: 21px; }
.documento h3 { font-size: .95rem; margin-bottom: .2rem; }
.documento p { font-size: .84rem; color: var(--apagado); margin: 0; }
.documento__flecha { margin-left: auto; color: var(--verde); flex-shrink: 0; }
.documento__flecha svg { width: 18px; height: 18px; }

/* --- Transparencia: destino de cada quetzal --- */
.destino { display: grid; gap: 1.4rem; max-width: 720px; margin: 0 auto; }
.destino__fila h4 { font-size: .95rem; margin-bottom: .5rem; }

/* --- Contacto --- */
.contacto__rejilla {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 900px) { .contacto__rejilla { grid-template-columns: 1fr; gap: 2.4rem; } }

.contacto__dato {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.6rem;
}
.contacto__dato:last-child { margin-bottom: 0; }
.contacto__icono {
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--verde-claro);
  color: var(--verde);
  display: flex; align-items: center; justify-content: center;
}
.contacto__icono svg { width: 21px; height: 21px; }
.contacto__dato h3 { font-size: .95rem; margin-bottom: .2rem; }
.contacto__dato p { font-size: .93rem; color: var(--apagado); margin: 0; }

/* El mapa es un marcador de posición: no se carga un iframe de un tercero
   sin que alguien decida antes qué proveedor y con qué consentimiento. */
.mapa-placeholder {
  margin-top: 2rem;
  border-radius: var(--radio);
  border: 1px dashed var(--borde);
  background: var(--fondo-2);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  color: var(--apagado);
  font-size: .88rem;
  text-align: center;
  padding: 1.4rem;
}
.mapa-placeholder svg { width: 30px; height: 30px; color: var(--verde); }

/* Mismo hueco/esquinas que .mapa-placeholder, para cuando site.mapa_embed
   sí tiene una URL: el iframe no deja "saltar" el layout al activarlo. */
.mapa-embed {
  margin-top: 2rem;
  border-radius: var(--radio);
  overflow: hidden;
  line-height: 0;
}


/* =========================================================
   9. Rejillas auxiliares
   ========================================================= */
.rejilla-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.4rem; }
@media (max-width: 900px) { .rejilla-2 { grid-template-columns: 1fr; gap: 2rem; } }

.rejilla-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
@media (max-width: 992px) { .rejilla-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .rejilla-4 { grid-template-columns: 1fr; max-width: 380px; margin-inline: auto; } }

.galeria__pie { text-align: center; margin-top: 2.5rem; }

/* Bloque de misión / visión: media columna de texto y media de foto. */
.bloque-par {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.4rem;
  align-items: center;
}
@media (max-width: 900px) { .bloque-par { grid-template-columns: 1fr; gap: 2.4rem; } }
/* Invierte el orden para alternar foto-texto / texto-foto sin repetir HTML. */
@media (min-width: 901px) {
  .bloque-par--invertido > *:first-child { order: 2; }
}
.bloque-par__foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
/* Marco naranja detrás de la foto, como el acento del collage del home.
   Se esconde en móvil, igual que el resto de la decoración del template:
   ahí no hay margen donde asomarse y sólo se ve el recorte. */
.bloque-par__marco { position: relative; }
.bloque-par__marco::before {
  content: "";
  position: absolute;
  inset: -14px -14px auto auto;
  width: 46%; height: 46%;
  border: 6px solid var(--naranja);
  border-radius: var(--radio);
  opacity: .5;
  z-index: -1;
}
@media (max-width: 768px) { .bloque-par__marco::before { display: none; } }

/* =========================================================
   10. Pie: columnas dinámicas según secciones ocultas
   ========================================================= */

/* style.css fija 4 columnas fijas (1.4fr 1fr 1fr 1.3fr) para
   .pie__rejilla, pensadas para las 4 columnas del template original:
   Marca, Explorar, En la portada, Del blog.

   "En la portada" y "Del blog" se ocultan solas cuando _config.yml
   (secciones.inicio / secciones.fundacion) deja sin secciones visibles
   que enlazar (ver _includes/footer.html). Sin esto, al ocultar una
   columna quedaba un hueco vacío en el grid en vez de que las columnas
   restantes se repartieran el ancho. */
.pie__rejilla--2 { grid-template-columns: 1.4fr 1fr; }
.pie__rejilla--3 { grid-template-columns: 1.4fr 1fr 1fr; }
.pie__rejilla--4 { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; }

@media (max-width: 900px) {
  .pie__rejilla--2,
  .pie__rejilla--3,
  .pie__rejilla--4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .pie__rejilla--2,
  .pie__rejilla--3,
  .pie__rejilla--4 { grid-template-columns: 1fr; }
}

/* =========================================================
   11. Pantalla de error (403 / 404)
   ========================================================= */

/* Reutiliza .cta-franja (degradado de marca + foto + círculos): mismo
   fondo que ya usa el sitio para "banda a pantalla completa", para que
   una página oculta se sienta parte del diseño y no un error genérico
   de navegador. */
.pantalla-error { min-height: 56vh; display: flex; align-items: center; }
.pantalla-error__contenido {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
}
.pantalla-error__codigo {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: clamp(4.5rem, 14vw, 9rem);
  line-height: 1;
  color: var(--naranja);
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
/* .cta-franja de style.css sólo da color blanco y sombra de texto a su
   h2/p; acá el título es un h1 (es la página, no una sección), así que
   hay que repetírselo. */
.pantalla-error h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  text-shadow: 0 1px 4px rgba(0,0,0,.45);
}
.pantalla-error p {
  margin: 0 0 .6rem;
  color: #fff;
  max-width: 540px;
  text-shadow: 0 1px 4px rgba(0,0,0,.45);
}
.pantalla-error .boton { margin-top: .4rem; }

/* =========================================================
   12. Diálogo de biografía (equipo de trabajo)
   ========================================================= */

/* Botón "Biografía" de cada tarjeta: usa .boton (mismo pill que el resto
   del sitio) con la variante --contorno-verde de acá abajo. Es un
   <button>, no un <a>, así que sólo hace falta el cursor: el resto del
   reset de estilos por defecto ya lo da .boton. */
.tarjeta-persona__bio-btn {
  cursor: pointer;
}
.tarjeta-persona__bio-btn svg { width: 14px; height: 14px; transition: transform var(--transicion); }
.tarjeta-persona__bio-btn:hover svg { transform: translateX(3px); }

/* Contorno verde de marca, con relleno sólido al pasar el cursor. Mismo
   patrón que .boton--contorno del template (blanco sobre fondo oscuro),
   pero en verde para usarse sobre fondo claro. */
.boton--contorno-verde {
  background: transparent;
  border-color: var(--verde);
  color: var(--verde);
}
.boton--contorno-verde:hover { background: var(--verde); color: #fff; }

/* <dialog> nativo (lo abre/cierra assets/js/sitio.js): el navegador ya
   centra el elemento y le pone el ::backdrop; sólo hace falta vestirlo
   con la identidad del sitio. */
.dialogo-bio {
  width: min(640px, calc(100vw - 2.5rem));
  max-height: min(680px, calc(100vh - 3rem));
  border: none;
  border-radius: var(--radio);
  padding: 0;
  box-shadow: var(--sombra);
}
.dialogo-bio::backdrop { background: rgba(var(--sombra-rgb), .3); }
.dialogo-bio__contenido { padding: 2.4rem; overflow-y: auto; }
.dialogo-bio__foto {
  width: 88px; height: 88px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1.1rem;
}
.dialogo-bio__texto h3 { margin-bottom: .2rem; }
.dialogo-bio__cargo {
  color: var(--verde);
  font-weight: 600;
  font-size: .92rem;
  margin-bottom: 1.1rem;
}
.dialogo-bio__texto p:not(.dialogo-bio__cargo) { margin-bottom: .9rem; }
.dialogo-bio__texto p:last-child { margin-bottom: 0; }
/* Mismo círculo blanco/verde que .volver-arriba: el botón "de acción"
   circular estándar del sitio. */
.dialogo-bio__cerrar {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--verde);
  background: #fff;
  color: var(--verde);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion), color var(--transicion);
}
.dialogo-bio__cerrar:hover { background: var(--naranja); border-color: var(--naranja); color: var(--texto); }
.dialogo-bio__cerrar svg { width: 18px; height: 18px; }

@media (min-width: 640px) {
  .dialogo-bio__contenido { display: flex; gap: 1.6rem; align-items: flex-start; }
  .dialogo-bio__foto { width: 110px; height: 110px; flex-shrink: 0; }
}

/* =========================================================
   13. Contraste del texto sobre foto en el hero

   El hero era el único bloque texto-sobre-foto del sitio sin ningún
   mecanismo de contraste. .hero__patron ya existe en el markup y en
   style.css (posicionado encima de la foto) pero nunca tuvo
   background: es el punto donde pintar el velo sin agregar un div
   nuevo.

   Mismo --sombra-rgb que ya usa .pagina-hero para el mismo problema
   (banner con foto de fondo), pero acá va plano, sin degradado — un
   degradado diagonal (el de .pagina-hero) deja un lado más claro que
   el otro, y el texto del hero está centrado, no en una esquina fija:
   a veces cae justo del lado claro y termina compitiendo contra el
   propio velo, no sólo contra la foto. Con un color plano el velo es
   parejo caiga donde caiga el texto.

   Medido con contraste real: WCAG sobre la captura ya renderizada
   (foto + duotono + velo + cover, con Playwright), promediando sólo
   los píxeles de fondo del recuadro de cada texto — sin contar las
   letras blancas del propio texto, que si no inflan el promedio hacia
   arriba y el número sale mal. En escritorio y en móvil, en las 3
   fotos: mínimo medido 5.33:1 (bien arriba del 4.5:1 pedido). */
.hero__patron {
  background: rgba(var(--sombra-rgb), .3);
}
.hero h1, .hero .hero__titulo, .hero .eyebrow {
  text-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}
/* El naranja de marca no pasa de ~3:1 contra el duotono verde en
   ninguna de las 3 fotos — es la paleta (naranja y verde tienen
   luminancia parecida), no una foto puntual. Sólo en el hero (nunca
   fuera de él) el eyebrow pasa a blanco. */
.hero .eyebrow { color: #fff; }

/* =========================================================
   14. Decoración del pie
   ========================================================= */

/* .pie__superior y .pie__inferior no son <section>, así que no heredan
   el "position: relative; overflow: hidden" que style.css les da a las
   secciones — hace falta repetirlo para que .deco/.deco-manos queden
   contenidas ahí y no se salgan a fluir sobre el resto de la página. */
.pie__superior, .pie__inferior { position: relative; overflow: hidden; }

/* Ilustración de planta (assets/img/deco-planta.svg) en la esquina
   inferior derecha de la franja verde. Es un <img>, no un símbolo de
   #deco-*, así que no puede recolorearse con currentColor — se deja en
   su negro original y se controla el peso visual sólo con opacity (por
   eso no hace falta el truco del blanco translúcido que sí necesitan
   los .deco de este mismo verde). */
/* El balanceo en sí (ángulo y duración de cada tramo) lo pone
   assets/js/sitio.js con valores aleatorios distintos cada vez — un
   @keyframes siempre repite el mismo ciclo, y una brisa real no se
   mueve igual dos veces. Acá sólo queda la transición base que ese
   script dispara cambiando `transform` con JS. */
.pie__superior-planta {
  position: absolute;
  bottom: 0;
  right: 38px;
  width: 300px;
  height: auto;
  opacity: .16;
  pointer-events: none;
  transform-origin: bottom right;
}
@media (max-width: 768px) { .pie__superior-planta { width: 190px; } }


/* =========================================================
   15. Ajustes exclusivos de móvil (≤768px)

   Todo lo de acá abajo vive detrás de `@media (max-width: 768px)` —
   mismo corte que ya usa el resto del sitio (.hero__flecha, .deco,
   .pagina-hero, etc.). Nada de esto toca ni el layout de escritorio ni
   el `:hover` de mouse, que sigue viniendo de style.css sin tocar.
   ========================================================= */
@media (max-width: 768px) {

  /* --- Barra superior: teléfono y correo en una columna (uno debajo
     del otro) en vez de fila con flex-wrap. Con flex-wrap el correo
     quebraba a una segunda línea pero se quedaba pegado a la izquierda
     mientras los íconos de redes seguían arriba a la derecha
     (align-items:center de .barra-superior .contenedor), dando un
     renglón descuadrado. La dirección ya está oculta acá (.oculto-movil,
     style.css), así que esto sólo reordena teléfono + correo. */
  .barra-superior__contacto { flex-direction: column; align-items: flex-start; gap: .1rem; }


  /* --- Hero: el slide se recorta menos al bajarle el alto mínimo.
     .hero__media es background-image (no <img>/<video>), así que
     object-fit no aplica acá — el ajuste real es el alto de la caja
     que ese fondo cubre con `cover`. Con 88vh en un celular angosto la
     foto queda recortadísima; a menos alto, el recuadro se acerca más
     a la proporción real de la foto y se pierde menos por los costados.
     min-height sigue siendo un mínimo: si el texto de una diapositiva
     no entra, la caja crece sola, no se corta nada. */
  .hero__slides { min-height: 62vh; }

  /* Respiro para que el texto no quede pegado a los controles (puntos +
     pausa, ya que las flechas se ocultan en móvil desde style.css). */
  .hero__contenido { padding-bottom: 3rem; }

  /* --- Gestión integral (tarjetas Ambiental/Económica/Cultural): no
     hay :hover táctil, así que el estado "resaltado" (borde verde +
     sombra) queda siempre puesto, no sólo al pasar el cursor. El hover
     real de mouse (style.css) no se toca y sigue sumándose igual. */
  .tarjeta-ayuda {
    border-color: var(--verde);
    box-shadow: var(--sombra-verde);
  }

  /* Más aire a los costados para que las tarjetas (centradas con
     margin:auto desde style.css) queden simétricas frente al borde de
     la pantalla, no pegadas al padding mínimo del contenedor general. */
  .ayuda .contenedor { padding-left: 24px; padding-right: 24px; }

  /* --- Quiénes somos: centrar sólo el botón "Conoce la Fundación",
     sin tocar la alineación (a la izquierda) del resto del bloque. */
  .mutua .boton--acento { display: flex; width: fit-content; margin-inline: auto; }

  /* --- Trabajemos juntos: el video se ve completo, nunca recortado.
     En vez de llenar con `cover` la caja de alto fijo de escritorio,
     pasa a flujo normal (`position: static`) y su alto lo pone su
     propia proporción (`height: auto`); `object-fit: contain` es la
     red de seguridad por si algún navegador igual le impone un alto
     (nunca `cover`, como pide la tarea). */
  .donar__imagen { min-height: 0; }
  .donar__video {
    position: static;
    width: 100%;
    height: auto;
    max-height: 60vh;
    object-fit: contain;
    object-position: center;
  }

  /* La descripción ya no flota encima del video (no hay una caja de
     alto fijo de la cual "flotar"): pasa a una franja angosta justo
     debajo, más baja y con menos padding que en escritorio. */
  .donar__lema {
    position: static;
    left: auto; right: auto; bottom: auto;
    margin: 0;
    padding: .7rem 1rem;
    font-size: .92rem;
  }

  /* --- Pie de página: todo centrado (marca, texto, botón, redes,
     enlaces y copyright). h5 es inline-block, así que centrarlo alcanza
     con el text-align del contenedor; los flex (marca, redes,
     mini-blog) necesitan su propio justify-content. */
  .pie__rejilla > div { text-align: center; }
  .pie__marca { justify-content: center; }
  .pie__redes { justify-content: center; }
  .pie__mini-blog { justify-content: center; text-align: left; }
  .pie__inferior .contenedor { justify-content: center; text-align: center; }

  /* Los datos de contacto (teléfono/correo/dirección) no viven dentro
     de <footer>: es la franja .banda-contacto, justo arriba, en
     index.html. Se centra acá también porque es la que trae "datos de
     contacto" que pide la tarea. */
  .banda-contacto__item { justify-content: center; text-align: center; }
}

/* --- Formulario de contacto: mensaje de estado y trampa anti-spam ---
   El fetch a la Netlify Function lo maneja sitio.js (sección 3). */
.formulario__estado {
  margin: .8rem 0 0;
  font-size: .92rem;
}
.formulario__estado--exito { color: var(--verde-oscuro); }
.formulario__estado--error { color: #a4262c; }

/* Campo trampa para bots: sigue en el DOM (los bots que completan
   todos los inputs igual la encuentran) pero invisible y fuera del
   flujo de tabulación para quien navega con teclado o lector de
   pantalla. */
.campo--trampa {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}