/* =========================================================
   Fundación Utla Kumi — hoja de estilos base
   ========================================================= */

:root {
  /* Verde real del isotipo (antes era un verde más claro que no
     coincidía con el logo). Da 4.74:1 sobre blanco y el blanco encima da
     lo mismo, así que sirve para texto y también como fondo de botón.
     Sobre fondo verde el texto va en blanco puro y la jerarquía se hace
     con tamaño y peso, nunca con opacidad. */
  --verde:        #447E68;
  --verde-rgb:        68, 126, 104;
  --verde-oscuro: #336856;   /* 6.45:1 — aquí sí cabe blanco al 85% */
  --verde-oscuro-rgb: 51, 104, 86;
  --verde-claro:  #eaf2ee;

  /* Naranja del logo. Decoración únicamente sobre claro: 2.35:1 sobre
     blanco y 2.73:1 sobre el verde — inservible como texto en ambos.
     Sobre el violeta da 7.43:1, y por eso mismo el violeta sobre naranja
     también da 7.43:1: de ahí salen los botones amarillos con texto
     violeta del diseño original. */
  --naranja:        #ffb73c;
  --naranja-oscuro: #e2a02e;
  --naranja-claro:  #fbf1dd;

  --texto:   #24074A;
  --texto-2: #574465;
  --apagado: #6E6280;

  --fondo:   #ffffff;
  --fondo-2: #f7f7fa;
  --borde:   #e6e2ec;
  /* Texto apagado sobre fondos oscuros (violeta/verde): lo comparten la
     banda de estadísticas, la banda de contacto y el pie inferior. */
  --apagado-inverso: #d9d2e3;

  --fuente-marca:  "Architects Daughter", cursive;
  --fuente-titulo: "Oswald", sans-serif;
  --fuente-texto:  "Mulish", sans-serif;

  --radio: 10px;
  /* rgb de --texto (#24074A), reutilizado como tinte de sombra en la
     sombra base, la cabecera pegajosa y el menú móvil. */
  --sombra-rgb: 36, 7, 74;
  --sombra: 0 15px 40px rgba(var(--sombra-rgb), .1);
  --sombra-verde: 0 15px 40px rgba(0, 255, 110, .197);
  --contenedor: 1200px;
  --transicion: .2s ease;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--fuente-texto);
  color: var(--texto-2);
  background: var(--fondo);
  line-height: 1.7;
  font-size: 16px;
}
img { max-width: 100%; display: block; }
a { color: var(--verde); text-decoration: none; }
a:hover { color: var(--verde-oscuro); }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4, h5 {
  font-family: var(--fuente-titulo);
  color: var(--texto);
  text-transform: uppercase;
  line-height: 1.3;
  margin: 0 0 1rem;
}
p { margin: 0 0 1rem; }

/* Anillo de foco visible. Verde sobre fondos claros (4.74:1) y naranja
   sobre los oscuros, donde el verde se confundiría con el fondo. */
:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }
.hero :focus-visible,
.cta-franja :focus-visible,
.estadisticas :focus-visible,
.banda-contacto :focus-visible,
.barra-superior :focus-visible,
.testimonios .tarjeta-testimonio :focus-visible,
.pie :focus-visible { outline-color: var(--naranja); }

.contenedor {
  width: 100%;
  max-width: var(--contenedor);
  margin: 0 auto;
  padding: 0 16px;
  position: relative;
  z-index: 1;
}
@media (max-width: 576px) { .contenedor { padding: 0 12px; } }
/* 90px/60px de base, -19% acumulado (dos recortes del 10%): el padding
   vertical es lo que fija el alto de cada sección (el hero es aparte,
   tiene su propio min-height). */
section { padding: 73px 0; position: relative; overflow: hidden; }
section[id] { scroll-margin-top: 96px; }
@media (max-width: 768px) { section { padding: 49px 0; } }

.oculto-movil { display: block; }
@media (max-width: 992px) { .oculto-movil.oculto-movil { display: none; } }

/* ---------- Decoración de fondo ----------
   Formas orgánicas muy tenues, como las del diseño original. Van detrás
   del contenido y no reciben eventos. */
.deco {
  position: absolute;
  color: var(--verde);
  opacity: .07;
  pointer-events: none;
  z-index: 0;
}
.deco--naranja { color: var(--naranja); opacity: .16; }
.deco--sup-izq { top: -30px;    left: -50px;  width: 210px; }
.deco--sup-der { top: 40px;     right: -40px; width: 180px; }
.deco--inf-izq { bottom: -40px; left: -30px;  width: 190px; }
.deco--inf-der { bottom: 20px;  right: -30px; width: 220px; }
@media (max-width: 768px) { .deco { display: none; } }

/* img/manos-deco.png: el original (img/manos.png) tenía un alfa real de
   apenas ~9%, casi invisible sobre blanco; esta versión le sube el alfa a
   un rango que sí se nota, sin dejar de ser una decoración translúcida.
   height: 100% + width: auto (nada de object-fit: cover) para que la
   imagen se vea completa, sin recortar, escalada al alto de la sección. */
.deco-manos {
  position: absolute;
  top: 0;
  height: 100%;
  width: auto;
  pointer-events: none;
  z-index: 0;
}
.deco-manos--izq { left: -20px; }
.deco-manos--der { right: -20px; transform: scaleX(-1); }
@media (max-width: 768px) { .deco-manos { display: none; } }

/* ---------- Utilidades ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--fuente-titulo);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--verde);
}
.eyebrow::before, .eyebrow::after {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--naranja);
  display: block;
}

/* Adorno bajo los títulos: dos filetes y un brote, como el original. */
.ornamento {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin: -.3rem 0 1rem;
}
.ornamento::before, .ornamento::after {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--naranja);
}
.ornamento svg { width: 18px; height: 18px; color: var(--verde); }

.titulo-seccion {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 3.5rem;
}
.titulo-seccion .eyebrow { justify-content: center; margin-bottom: .9rem; }
.titulo-seccion h2 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); margin-bottom: .6rem; }
.titulo-seccion p { color: var(--apagado); margin: 0; }

.fondo-suave { background: var(--fondo-2); }

.boton {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  border: 2px solid transparent;
  border-radius: 50px;
  padding: .85rem 1.9rem;
  font-family: var(--fuente-titulo);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: var(--transicion);
}
.boton--relleno { background: var(--verde); color: #fff; }
.boton--relleno:hover { background: var(--verde-oscuro); color: #fff; }

/* Botón amarillo del diseño original. El texto va en violeta: 7.43:1. */
.boton--acento { background: var(--naranja); color: var(--texto); }
.boton--acento:hover { background: var(--naranja-oscuro); color: var(--texto); }

.boton--contorno { border-color: #fff; color: #fff; }
.boton--contorno:hover { background: #fff; color: var(--texto); }

.boton--texto {
  color: var(--verde);
  font-family: var(--fuente-titulo);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.boton--texto svg { width: 14px; height: 14px; transition: transform var(--transicion); }
.boton--texto:hover svg { transform: translateX(3px); }

.barra-progreso {
  height: 7px;
  border-radius: 50px;
  background: var(--borde);
  overflow: hidden;
  margin: .5rem 0 1.1rem;
}
.barra-progreso span { display: block; height: 100%; border-radius: 50px; background: var(--verde); }
.barra-progreso.acento span { background: var(--naranja); }
.progreso-etiqueta {
  display: flex;
  justify-content: space-between;
  font-family: var(--fuente-titulo);
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--texto);
  text-transform: uppercase;
}

/* ---------- Placeholder de imagen ---------- */
.ph-img {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(135deg, var(--verde-claro), var(--verde-claro) 10px, #fff 10px, #fff 20px);
  border-radius: var(--radio);
  overflow: hidden;
  color: var(--verde);
}
.ph-img::after {
  content: attr(data-nota);
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  font-family: var(--fuente-titulo);
  font-size: .68rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--verde-oscuro);
  background: rgba(255,255,255,.85);
  border-radius: 4px;
  padding: .3rem .5rem;
  text-align: center;
}
.ph-img[data-nota=""]::after { display: none; }
.ph-img svg { width: 34%; height: 34%; max-width: 60px; opacity: .5; }

/* =========================================================
   Barra superior + navbar
   ========================================================= */
/* Fondo verde: todo el texto va en blanco puro (4.74:1). */
.barra-superior { background: var(--verde); color: #fff; font-size: .85rem; }
.barra-superior .contenedor {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: .5rem;
  padding-bottom: .5rem;
  gap: 1rem;
}
.barra-superior__contacto { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.barra-superior__contacto a { color: #fff; display: inline-flex; align-items: center; gap: .4rem; }
.barra-superior__contacto a:hover,
.pie__enlaces a:hover { color: #fff; text-decoration: underline; }
.barra-superior__redes { display: flex; gap: .8rem; }
.barra-superior__redes a {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #fff;
  border-radius: 50%;
  color: #fff;
}
/* Aro naranja al pasar el cursor: lo comparten los botones circulares del
   sitio (redes de la barra superior, flechas y pausa del hero, redes del pie). */
.barra-superior__redes a:hover,
.hero__flecha:hover,
.hero__pausa:hover,
.pie__redes a:hover {
  background: var(--naranja);
  border-color: var(--naranja);
  color: var(--texto);
}
.barra-superior__redes svg { width: 13px; height: 13px; }

.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  box-shadow: 0 4px 20px rgba(var(--sombra-rgb), .06);
}
.cabecera .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: .7rem;
  padding-bottom: .7rem;
}

.marca { display: flex; align-items: center; gap: .8rem; color: var(--texto); }
.marca:hover { text-decoration: none; }
.marca__logo { width: 60px; height: 60px; object-fit: contain; flex-shrink: 0; border-right: 2px solid var(--naranja); padding-right: .7rem; }
.marca__texto { display: flex; flex-direction: column; line-height: 1.2; }
.marca__nombre {
  font-weight: 400;
  font-size: 1.45rem;
  font-family: var(--fuente-marca);
  font-optical-sizing: auto;
  font-style: normal;
  text-transform: uppercase;
  white-space: nowrap;
}
.marca__lema { font-size: .755rem; color: var(--apagado); font-family: var(--fuente-titulo); font-weight: 400; text-transform: uppercase; }

@media (max-width: 1150px) {
  .marca__nombre { font-size: 1.2rem; }
  .marca__lema { font-size: .68rem; }
  .marca__logo { width: 50px; height: 50px; }
}
@media (max-width: 576px) {
  .marca__logo { width: 42px; height: 42px; padding-right: .55rem; }
  .marca__nombre { font-size: 1.05rem; white-space: normal; }
  .marca__lema { display: none; }
}

.nav-principal { display: flex; align-items: center; gap: 2.4rem; }
.nav-principal__lista { display: flex; gap: 2.1rem; }
.nav-principal__lista a {
  font-family: var(--fuente-titulo);
  font-size: .88rem;
  font-weight: 500;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--texto);
  position: relative;
}
.nav-principal__lista a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 0; height: 2px;
  background: var(--naranja);
  transition: width var(--transicion);
}
.nav-principal__lista a:hover, .nav-principal__lista a.activo { color: var(--verde); }
.nav-principal__lista a:hover::after, .nav-principal__lista a.activo::after { width: 100%; }
.cabecera__acciones { display: flex; align-items: center; gap: 1.2rem; }

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 6px;
}
.menu-toggle span { width: 24px; height: 2px; background: var(--texto); display: block; }

@media (max-width: 992px) {
  .nav-principal__lista {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    /* 30% del ancho ya andaba bien en celular, pero en tablet (768-992px)
       dejaba un panel larguísimo con medio menú de espacio vacío. */
    width: min(320px, 78vw);
    flex-direction: column;
    background: #fff;
    padding: 5.5rem 2rem 2rem;
    gap: 1.4rem;
    box-shadow: -10px 0 30px rgba(var(--sombra-rgb), .12);
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 60;
  }
  .nav-principal__lista.abierto { transform: translateX(0); }
  .menu-toggle { display: flex; }
}

/* =========================================================
   Hero
   ========================================================= */
/* padding 0 anula el de `section`: el alto lo pone el contenido de cada
   diapositiva. Si no, quedan franjas blancas arriba y abajo, porque las
   diapositivas viven dentro de la caja de contenido de la sección. */
.hero { position: relative; color: #fff; overflow: hidden; padding: 0; }

/* Las diapositivas se apilan en la misma celda de grid. min-height: 88vh
   (sólo el slider: el resto de secciones no se toca); el alto real puede
   ser mayor si el texto de una diapositiva no entra en ese alto. */
.hero__slides { display: grid; min-height: 88vh; }
.hero__slide {
  grid-area: 1 / 1;
  position: relative;
  /* Centra el bloque de texto en el alto completo del slider. */
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s ease, visibility .9s;
}
.hero__slide.activo { opacity: 1; visibility: visible; }

.hero__media {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  /* Duotono verde (definido en el <defs> de index.html). Sustituye al velo
     opaco: en vez de tapar la foto, remapea sus tonos al verde de marca. */
  filter: url(#duotono);
}
/* Efecto Ken Burns: sólo sobre la diapositiva activa. */
.hero__slide.activo .hero__media { animation: kenburns 9s ease-out forwards; }
@keyframes kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

.hero__patron {
  position: absolute;
  inset: 0;
  background-size: 26px 26px;
}
.hero__contenido {
  position: relative;
  z-index: 1;
  /* El alto ya no lo pone el padding: `.hero__slide` centra este bloque
     verticalmente en la pantalla completa. Sólo queda el respiro lateral
     (pisa el padding horizontal de `.contenedor`, si no el texto llega
     pegado al borde en móvil) y uno vertical mínimo por si el contenido
     roza el borde de la pantalla. */
  padding: 16px;
  text-align: center;
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
}
.hero .eyebrow { justify-content: center; color: var(--naranja); }
/* `.hero .hero__titulo` y no `.hero__titulo` a secas: el título de las
   diapositivas 2 y 3 es un <p>, así que `.hero p` (0,1,1) le ganaría en
   especificidad y lo dejaría en tamaño de párrafo. */
.hero h1, .hero .hero__titulo {
  color: #fff;
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  line-height: 1.3;
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  max-width: none;
  margin: .9rem 0 1.1rem;
}
.hero p { color: rgba(255,255,255,.88); font-size: 1.02rem; max-width: 560px; margin: 0 auto 1.8rem; }
.hero__acciones { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Entrada escalonada del texto de la diapositiva activa. */
.hero__slide .eyebrow,
.hero__slide h1,
.hero__slide .hero__titulo,
.hero__slide p,
.hero__slide .hero__acciones {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s ease, transform .7s ease;
}
.hero__slide.activo .eyebrow        { opacity: 1; transform: none; transition-delay: .15s; }
.hero__slide.activo h1,
.hero__slide.activo .hero__titulo   { opacity: 1; transform: none; transition-delay: .3s; }
.hero__slide.activo p               { opacity: 1; transform: none; transition-delay: .45s; }
.hero__slide.activo .hero__acciones { opacity: 1; transform: none; transition-delay: .6s; }

/* ---- Controles ---- */
.hero__flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1px solid #fff;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transicion);
}
.hero__flecha svg { width: 18px; height: 18px; }
.hero__flecha--prev { left: 22px; }
.hero__flecha--next { right: 22px; }
@media (max-width: 768px) { .hero__flecha { display: none; } }

.hero__controles {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1rem;
  z-index: 3;
}
.hero__puntos { display: flex; gap: .5rem; align-items: center; }
.hero__punto {
  width: 10px; height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  transition: .25s ease;
}
.hero__punto[aria-current="true"] { background: var(--naranja); width: 28px; border-radius: 50px; }
.hero__pausa {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1px solid #fff;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transicion);
}
.hero__pausa svg { width: 12px; height: 12px; }

/* Sin animación: nada de Ken Burns, ni entradas, ni reproducción sola.
   El JS además no arranca el temporizador en este caso. */
@media (prefers-reduced-motion: reduce) {
  .hero__slide.activo .hero__media { animation: none; }
  .hero__slide,
  .hero__slide .eyebrow, .hero__slide h1, .hero__slide .hero__titulo,
  .hero__slide p, .hero__slide .hero__acciones {
    transition: none;
    opacity: 1;
    transform: none;
  }
  .hero__slide:not(.activo) { opacity: 0; visibility: hidden; }
}

/* =========================================================
   Ayuda / iconos de 3 columnas
   ========================================================= */
.ayuda__lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2rem; }
@media (max-width: 900px) { .ayuda__lista { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } }
.tarjeta-ayuda { text-align: center; padding: 2.4rem 1.6rem; border-radius: var(--radio); transition: var(--transicion); background: #fff; border: solid 1px var(--borde)}
/* Elevación + sombra verde al pasar el cursor: mismo efecto en todas las
   tarjetas del sitio (esta, causas, blog y la galería de proyectos). */
.tarjeta-ayuda:hover,
.tarjeta-causa:hover,
.tarjeta-blog:hover,
.galeria .ph-img:hover,
.galeria img:hover {
  box-shadow: var(--sombra-verde);
  transform: translateY(-4px);
}
.tarjeta-ayuda:hover { border-color: var(--verde); }
.tarjeta-ayuda__icono {
  width: 84px; height: 84px;
  margin: 0 auto 1.4rem;
  border-radius: 50%;
  background: var(--verde-claro);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.tarjeta-ayuda__icono img { width: 44px; height: 44px; }
.tarjeta-ayuda__icono::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 2px dashed var(--naranja);
  border-radius: 50%;
  opacity: .55;
}
.tarjeta-ayuda h3 { font-size: 1.05rem; }
.tarjeta-ayuda p { font-size: .93rem; }

/* =========================================================
   Collage de fotos superpuestas
   ========================================================= */
.collage { position: relative; aspect-ratio: 1 / 1; }
.collage__pieza { position: absolute; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); border: 5px solid #fff; }
.collage__pieza .ph-img { width: 100%; height: 100%; border-radius: 0; }
.collage__pieza img { width: 100%; height: 100%; object-fit: cover; display: block; }
.collage__pieza--a { top: 0;      left: 4%;   width: 56%; height: 60%; z-index: 2; }
.collage__pieza--b { top: 26%;    right: 0;   width: 44%; height: 46%; z-index: 3; }
.collage__pieza--c { bottom: 0;   left: 14%;  width: 50%; height: 40%; z-index: 4; }
/* Marco verde detrás, como el bloque de color del diseño original. */
.collage__marco {
  position: absolute;
  top: -14px; left: -14px;
  width: 52%; height: 46%;
  background: var(--verde-claro);
  border-radius: var(--radio);
  z-index: 1;
}
.collage__acento {
  position: absolute;
  right: 2%; bottom: 6%;
  width: 26%; height: 26%;
  border: 6px solid var(--naranja);
  border-radius: var(--radio);
  opacity: .55;
  z-index: 1;
}
@media (max-width: 900px) { .collage { max-width: 460px; margin: 0 auto; } }

/* =========================================================
   Ayudándonos entre todos (misión / historia)
   ========================================================= */
.mutua .contenedor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
@media (max-width: 900px) { .mutua .contenedor { grid-template-columns: 1fr; gap: 3rem; } }
/* Misión y visión en dos columnas. El diseño original traía barras de
   progreso aquí, pero un porcentaje sobre la misión no significa nada:
   se cambiaron por un filete de color que mantiene el mismo ritmo visual. */
.mutua__pilares { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin: 1.8rem 0 2rem; }
@media (max-width: 520px) { .mutua__pilares { grid-template-columns: 1fr; } }
.mutua__pilares > div { border-left: 3px solid var(--verde); padding-left: 1rem; }
.mutua__pilares > div:last-child { border-left-color: var(--naranja); }
.mutua__pilares h4 { font-size: .95rem; margin-bottom: .4rem; }
.mutua__pilares p { font-size: .9rem; color: var(--apagado); margin: 0; }

/* =========================================================
   Causas destacadas
   ========================================================= */
.rejilla-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
@media (max-width: 900px) { .rejilla-3 { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } }

.tarjeta-causa {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  transition: var(--transicion);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.tarjeta-causa__media { position: relative; }
.tarjeta-causa .ph-img { aspect-ratio: 4/3; border-radius: 0; }
.tarjeta-causa__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
/* Etiqueta naranja sobre violeta: 7.43:1. */
.tarjeta-causa__categoria {
  position: absolute;
  top: 1rem; left: 1rem;
  font-family: var(--fuente-titulo);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--naranja);
  background: var(--texto);
  padding: .3rem .7rem;
  border-radius: 4px;
}
.tarjeta-causa__cuerpo { padding: 1.7rem 1.6rem 1.9rem; flex: 1; display: flex; flex-direction: column; }
.tarjeta-causa h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.tarjeta-causa p { font-size: .93rem; flex: 1; }

/* =========================================================
   CTA voluntariado
   ========================================================= */
.cta-franja {
  position: relative;
  background:
    linear-gradient(120deg, rgba(var(--verde-oscuro-rgb),.6), rgba(var(--verde-rgb),.6)),
    url('../img/paralax_1.jpeg') center / cover no-repeat;
  background-attachment: fixed, fixed;
  color: #fff;
  text-align: center;
  overflow: hidden;
}
/* Círculos decorativos del diseño original. */
.cta-franja__circulo { position: absolute; border-radius: 50%; }
.cta-franja__circulo--1 { width: 240px; height: 240px; background: rgba(255,255,255,.07); top: -90px; left: 6%; }
.cta-franja__circulo--2 { width: 150px; height: 150px; background: rgba(255,255,255,.07); bottom: -60px; left: 22%; }
.cta-franja__circulo--3 { width: 200px; height: 200px; background: var(--naranja); opacity: .16; top: -70px; right: 8%; }
.cta-franja__circulo--4 { width: 110px; height: 110px; border: 3px solid rgba(255,255,255,.18); bottom: -30px; right: 20%; }
/* Sombra sutil: con foto de fondo (antes era sólo el degradado sólido) el
   contraste ya no es 100% predecible si una zona clara de la imagen cae
   justo detrás del texto. La sombra es la red de seguridad. */
.cta-franja h2, .cta-franja p { text-shadow: 0 1px 4px rgba(0,0,0,.45); }
.cta-franja h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.1rem); max-width: 660px; margin: 0 auto 1rem; }
/* Sobre verde no cabe blanco translúcido: va en blanco puro. */
.cta-franja p { color: #fff; max-width: 540px; margin: 0 auto 1.8rem; }

/* =========================================================
   Cómo marcamos la diferencia (acordeón)
   ========================================================= */
.diferencia .contenedor { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
@media (max-width: 900px) { .diferencia .contenedor { grid-template-columns: 1fr; gap: 3rem; } }

.acordeon { display: grid; gap: .8rem; }
.acordeon__item {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  background: #fff;
  transition: var(--transicion);
}
/* Mismo despegue + sombra verde que las tarjetas del sitio (ver
   .tarjeta-ayuda:hover), para que el acordeón se sienta parte del mismo
   lenguaje visual. */
.acordeon__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-verde);
  border-color: var(--verde);
}
.acordeon__boton {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  background: var(--fondo-2);
  border: none;
  text-align: left;
  font-family: var(--fuente-titulo);
  font-size: .95rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--texto);
  transition: var(--transicion);
}
.acordeon__item.activo .acordeon__boton { background: var(--verde); color: #fff; }
.acordeon__item:not(.activo):hover .acordeon__boton { background: var(--verde-claro); }
.acordeon__numero {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--verde);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem;
  transition: var(--transicion);
}
.acordeon__item.activo .acordeon__numero { background: var(--naranja); color: var(--texto); }
.acordeon__item:not(.activo):hover .acordeon__numero { transform: scale(1.1); }
.acordeon__flecha { margin-left: auto; width: 16px; height: 16px; transition: transform var(--transicion); }
.acordeon__item.activo .acordeon__flecha,
.acordeon__item:hover .acordeon__flecha { transform: rotate(180deg); }

/* Despliegue animado del panel: grid-template-rows de 0fr a 1fr anima el
   alto real del contenido sin necesidad de medirlo en JS. El padding vive
   en el <p> y no en el contenedor, así también se anima a cero al cerrar
   (si quedara en el contenedor, dejaría un hueco fijo aunque la fila
   colapse). Se abre al activarlo por click Y al pasar el cursor, para que
   la lista se sienta interactiva sin tener que hacer click. */
.acordeon__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease;
}
.acordeon__item.activo .acordeon__panel,
.acordeon__item:hover .acordeon__panel {
  grid-template-rows: 1fr;
}
.acordeon__panel p {
  overflow: hidden;
  margin: 0;
  padding: 0 1.3rem;
  font-size: .93rem;
  transition: padding var(--transicion);
}
.acordeon__item.activo .acordeon__panel p,
.acordeon__item:hover .acordeon__panel p {
  padding: 1.2rem 1.3rem 1.4rem;
}

.diferencia__collage { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; grid-template-rows: auto auto; gap: 1rem; }
.diferencia__collage img:nth-child(1) { grid-row: 1 / 3; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.diferencia__collage img:nth-child(2) { aspect-ratio: 1/1; width: 100%; object-fit: cover; border-radius: 8px; }
.diferencia__collage img:nth-child(3) { aspect-ratio: 4/3; width: 100%; object-fit: cover; border-radius: 8px; }

/* =========================================================
   Formulario de donación
   ========================================================= */
.donar .contenedor { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
@media (max-width: 900px) { .donar .contenedor { grid-template-columns: 1fr; } }
/* 420px/320px de base, -36% acumulado (dos recortes del 20%). */
.donar__imagen { position: relative; border-radius: var(--radio) 0 0 var(--radio); overflow: hidden; min-height: 269px; }
@media (max-width: 900px) { .donar__imagen { border-radius: var(--radio) var(--radio) 0 0; min-height: 205px; } }
.donar__imagen .ph-img { height: 100%; border-radius: 0; }

/* El video es vertical (9:16) y la columna es apaisada, así que `cover`
   recorta arriba y abajo. Al ser una toma aérea general no se pierde nada
   importante; `object-position` lo centra un poco alto para conservar el
   río y las casas. */
.donar__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  background: var(--texto);
}
.donar__lema {
  position: absolute; left: 1.6rem; right: 1.6rem; bottom: 1.6rem;
  background: var(--texto);
  color: #fff;
  padding: 1.2rem 1.4rem;
  border-radius: var(--radio);
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  font-size: 1.05rem;
  border-left: 4px solid var(--naranja);
  z-index: 2;
  margin: 0;
}
.donar__form {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 0 var(--radio) var(--radio) 0;
  padding: 1.8rem;
}
@media (max-width: 900px) { .donar__form { border-radius: 0 0 var(--radio) var(--radio); padding: 1.5rem; } }
/* El video (align-items: stretch en .donar .contenedor) copia el alto de
   esta columna: para achicarlo hay que achicar el formulario, no la
   tarjeta del video por separado. */
.campo-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 520px) { .campo-fila { grid-template-columns: 1fr; } }
.campo { margin-bottom: .8rem; }
.campo label {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texto);
  margin-bottom: .4rem;
}
.campo input, .campo select, .campo textarea {
  width: 100%;
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: .6rem .9rem;
  font-family: var(--fuente-texto);
  font-size: .95rem;
  color: var(--texto);
  background: var(--fondo-2);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--verde);
  background: #fff;
}
.donar__form .boton { width: 100%; justify-content: center; margin-top: .4rem; border: none; }

/* =========================================================
   Estadísticas
   ========================================================= */
.estadisticas {
  position: relative;
  background:
    linear-gradient(120deg, rgba(var(--sombra-rgb),.6), rgba(var(--sombra-rgb),.6)),
    url('../img/paralax_2.jpg') center / cover no-repeat;
  background-attachment: fixed, fixed;
  color: #fff;
}
.estadisticas .contenedor {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
}
@media (max-width: 700px) { .estadisticas .contenedor { grid-template-columns: 1fr 1fr; } }
/* Sobre violeta el naranja llega a 7.43:1, así que aquí sí puede pintar. */
.estadistica__icono { color: var(--naranja); margin-bottom: .8rem; }
.estadistica__icono svg { width: 36px; height: 36px; margin: 0 auto; }
.estadistica__numero { font-family: var(--fuente-titulo); font-size: 2.1rem; color: #fff; line-height: 1.2; text-shadow: 0 1px 4px rgba(0,0,0,.45); }
.estadistica__etiqueta { font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--apagado-inverso); text-shadow: 0 1px 4px rgba(0,0,0,.45); }

/* =========================================================
   Voluntarios / equipo
   ========================================================= */
/* Carrusel sin botones: avanza solo, en bucle infinito (JS lo reinicia al
   llegar a la última tarjeta). scroll-snap nativo de todos modos, para que
   el arrastre táctil quede prolijo si alguien lo mueve a mano. 3 tarjetas
   visibles en escritorio, 2 en tablet, 1 en móvil — mismos cortes que el
   resto del sitio (900px/600px). */
.equipo__carrusel { position: relative; }
.equipo__pista {
  display: grid;
  grid-auto-flow: column;
  /* center: cada tarjeta se centra dentro de su propio carril, así que si
     el carril mide más que la tarjeta (pasa en móvil) no queda pegada a
     la izquierda. align-items: center también centra verticalmente
     cuando una tarjeta mide menos que la más alta de la fila. */
  align-items: center;
  justify-items: center;
  grid-auto-columns: calc((100% - 2 * 1.8rem) / 3);
  gap: 1.8rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: .3rem;
  scrollbar-width: none;
}
.equipo__pista::-webkit-scrollbar { display: none; }
.equipo__pista .tarjeta-persona { scroll-snap-align: start; }
@media (max-width: 900px) { .equipo__pista { grid-auto-columns: calc((100% - 1.8rem) / 2); } }
/* 88% dejaba un sobrante sin repartir: la tarjeta quedaba pegada a la
   izquierda y la siguiente se asomaba cortada del lado derecho, en vez de
   verse una sola tarjeta centrada. 100% (una por pantalla, sin espiar la
   próxima) es lo que realmente centra sin cortar nada. */
@media (max-width: 600px) { .equipo__pista { grid-auto-columns: 100%; } }

.tarjeta-persona { text-align: center; }
.tarjeta-persona__media { position: relative; margin-bottom: 1.3rem; }
.tarjeta-persona .ph-img { aspect-ratio: 1/1; border-radius: 50%; }
.tarjeta-persona__media img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.tarjeta-persona h3 { font-size: 1.05rem; margin-bottom: .2rem; }
.tarjeta-persona__rol { color: var(--apagado); font-size: .85rem; margin-bottom: .8rem; }
.tarjeta-persona__redes { display: flex; justify-content: center; gap: .7rem; }
.tarjeta-persona__redes a {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--verde);
  background: var(--verde);
  display: flex; align-items: center; justify-content: center;
  /* Blanco en los dos estados (no naranja/verde) para más contraste. */
  color: #fff;
  transition: var(--transicion);
}
.tarjeta-persona__redes a:hover { background: var(--naranja); color: #fff; border-color: var(--naranja); }
.tarjeta-persona__redes svg { width: 18px; height: 18px; }

/* =========================================================
   Proyectos recientes (galería 3x2)
   ========================================================= */
.galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.galeria .ph-img { aspect-ratio: 4/3; border-radius: 8px; transition: var(--transicion); }
.galeria img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  transition: var(--transicion);
}
@media (max-width: 900px) { .galeria { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .galeria { grid-template-columns: 1fr; } }

/* =========================================================
   Testimonios: título a la izquierda, tarjetas verdes a la derecha
   ========================================================= */
.testimonios { background: var(--fondo-2); }
.testimonios .contenedor { display: grid; grid-template-columns: .8fr 1.2fr; gap: 3rem; align-items: center; }
@media (max-width: 900px) { .testimonios .contenedor { grid-template-columns: 1fr; gap: 2.5rem; } }
.testimonios__lista { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
@media (max-width: 620px) { .testimonios__lista { grid-template-columns: 1fr; } }
/* Fondo verde ⇒ todo el texto de la tarjeta en blanco puro. */
.tarjeta-testimonio {
  background: var(--verde);
  color: #fff;
  border-radius: var(--radio);
  padding: 1.8rem;
  border-top: 4px solid var(--naranja);
}
.tarjeta-testimonio__cita { color: var(--naranja); margin-bottom: .6rem; }
.tarjeta-testimonio__cita svg { width: 26px; height: 26px; }
.tarjeta-testimonio p { font-size: .93rem; color: #fff; }
.tarjeta-testimonio__persona { display: flex; align-items: center; gap: .8rem; margin-top: 1.2rem; }
.tarjeta-testimonio__persona .ph-img { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; }
.tarjeta-testimonio__persona img {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.tarjeta-testimonio h4 { font-size: .95rem; margin: 0; color: #fff; }
.tarjeta-testimonio span { font-size: .82rem; color: #fff; }

/* =========================================================
   Blog
   ========================================================= */
.tarjeta-blog {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  transition: var(--transicion);
}
.tarjeta-blog .ph-img { aspect-ratio: 16/10; border-radius: 0; }
.tarjeta-blog > img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.tarjeta-blog__cuerpo { padding: 1.6rem; }
.tarjeta-blog__meta {
  display: flex; gap: 1rem; flex-wrap: wrap;
  font-size: .78rem; color: var(--apagado);
  font-family: var(--fuente-titulo); text-transform: uppercase; letter-spacing: .03em;
  margin-bottom: .7rem;
}
.tarjeta-blog__meta span { display: inline-flex; align-items: center; gap: .35rem; }
.tarjeta-blog__meta svg { width: 13px; height: 13px; color: var(--verde); }
.tarjeta-blog h3 { font-size: 1.02rem; margin-bottom: .7rem; }

/* =========================================================
   Aliados
   ========================================================= */
.aliados { padding: 50px 0; }
.aliados .contenedor {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
}
.aliados__item {
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--apagado);
  font-size: 1.1rem;
  border: 2px dashed var(--borde);
  padding: .6rem 1.4rem;
  border-radius: 8px;
}

/* =========================================================
   Banda oscura: contacto + suscripción
   ========================================================= */
.banda-contacto {
  position: relative;
  background:
    linear-gradient(120deg, rgba(var(--sombra-rgb),.6), rgba(var(--sombra-rgb),.6)),
    url('../img/paralax_3.jpg') center / cover no-repeat;
  background-attachment: fixed, fixed;
  color: #fff;
}
.banda-contacto__datos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding-bottom: 2.5rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,.18);
}
@media (max-width: 800px) { .banda-contacto__datos { grid-template-columns: 1fr; } }
.banda-contacto__item { display: flex; gap: 1rem; align-items: center; }
.banda-contacto__icono {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.banda-contacto__icono svg { width: 22px; height: 22px; color: var(--naranja); }
.banda-contacto__item h4 { color: #fff; font-size: .78rem; letter-spacing: .05em; margin-bottom: .25rem; }
.banda-contacto__item p { margin: 0; color: var(--apagado-inverso); font-size: .95rem; }
.banda-contacto__item h4, .banda-contacto__item p,
.suscripcion h2, .suscripcion p { text-shadow: 0 1px 4px rgba(0,0,0,.45); }

.suscripcion { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.suscripcion h2 { color: #fff; font-size: 1.4rem; margin-bottom: .4rem; }
.suscripcion p { color: var(--apagado-inverso); margin: 0; }
.suscripcion__form { display: flex; max-width: 460px; width: 100%; }
.suscripcion__form input {
  flex: 1;
  min-width: 0;
  border: none;
  border-radius: 50px 0 0 50px;
  padding: .95rem 1.3rem;
  font-family: var(--fuente-texto);
  color: var(--texto);
}
.suscripcion__form input:focus { outline: 2px solid var(--naranja); outline-offset: -2px; }
.suscripcion__form button {
  border: none;
  border-radius: 0 50px 50px 0;
  background: var(--naranja);
  color: var(--texto);
  padding: 0 1.6rem;
  font-family: var(--fuente-titulo);
  font-size: .8rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.suscripcion__form button:hover { background: var(--naranja-oscuro); }

/* =========================================================
   Pie de página
   ========================================================= */
/* Fondo verde de marca. TODO el texto de aquí va en blanco puro: la
   jerarquía se hace con tamaño y peso, no con opacidades. */
.pie { background: var(--verde); color: #fff; }
.pie__superior { padding: 5rem 0 3rem; }
.pie__rejilla { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 2.5rem; }
@media (max-width: 900px) { .pie__rejilla { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pie__rejilla { grid-template-columns: 1fr; } }
.pie__marca { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.1rem; }
/* El isotipo es verde sobre verde: lo pasamos a blanco puro. */
.pie__marca img { width: 48px; height: 48px; filter: brightness(0) invert(1); }
.pie__marca span {
  font-family: var(--fuente-marca);
  font-size: 1.2rem;
  color: #fff;
  text-transform: uppercase;
  line-height: 1.2;
}
.pie p { font-size: .92rem; color: #fff; }
.pie h5 {
  color: #fff;
  font-size: .85rem;
  letter-spacing: .06em;
  margin-bottom: 1.3rem;
  padding-bottom: .8rem;
  border-bottom: 2px solid var(--naranja);
  display: inline-block;
}
.pie__enlaces li { margin-bottom: .7rem; }
.pie__enlaces a { color: #fff; font-size: .92rem; }
.pie__redes { display: flex; gap: .7rem; margin-top: 1.3rem; }
.pie__redes a {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid #fff;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.pie__redes svg { width: 14px; height: 14px; }
.pie__mini-blog { display: flex; gap: .8rem; margin-bottom: 1rem; }
.pie__mini-blog .ph-img,
.pie__mini-blog img { width: 60px; height: 60px; flex-shrink: 0; border-radius: 6px; }
.pie__mini-blog img { object-fit: cover; }
.pie__mini-blog p { font-size: .87rem; color: #fff; margin: 0 0 .2rem; line-height: 1.4; }
.pie__mini-blog span { font-size: .78rem; color: #fff; }

/* Franja inferior en violeta: aquí el naranja sí funciona como texto (7.43:1). */
.pie__inferior { background: var(--texto); }
.pie__inferior .contenedor {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
  padding: 1.3rem 16px;
  font-size: .85rem;
  color: var(--apagado-inverso);
}
.pie__inferior a { color: var(--naranja); }
.pie__inferior a:hover { color: #f0bf6c; }

/* background-attachment: fixed es problemático en móvil (iOS/Android): se
   desactiva el parallax de las tres franjas con foto de fondo ahí. Una sola
   media query para las tres en vez de repetirla, misma condición siempre. */
@media (max-width: 900px), (hover: none) {
  .cta-franja, .estadisticas, .banda-contacto { background-attachment: scroll, scroll; }
}

/* =========================================================
   Botón "volver arriba"
   ========================================================= */
/* Mismo círculo verde con sombra y aro naranja al hover que ya usan las
   flechas y la pausa del hero y las redes del pie: es el botón circular
   "de acción" del sitio. */
.volver-arriba {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 40;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--verde);
  background: #fff;
  color: var(--verde);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sombra-verde);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: background var(--transicion), border-color var(--transicion),
              color var(--transicion), opacity .3s ease, transform .3s ease,
              visibility .3s;
}
.volver-arriba.visible { opacity: 1; visibility: visible; transform: none; }
.volver-arriba:hover { background: var(--naranja); border-color: var(--naranja); color: var(--texto); }
.volver-arriba svg { width: 20px; height: 20px; }
@media (max-width: 576px) { .volver-arriba { right: 14px; bottom: 14px; } }
@media (prefers-reduced-motion: reduce) { .volver-arriba { transition: opacity .2s ease, visibility .2s; } }

/* =========================================================
   Animación de aparición
   ========================================================= */
/* Se esconde sólo si el JS llegó a marcar <html class="js">. Si el script
   falla o tarda, el contenido queda visible en vez de desaparecer. */
.js [data-animar] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js [data-animar].visible { opacity: 1; transform: translateY(0); }

/* Los íconos de "Gestión integral" dan una vuelta completa al entrar en
   pantalla y, como .girado se saca al salir de pantalla (a diferencia del
   .visible de arriba, que se queda para siempre), la transición de vuelta
   a 0deg gira para el otro lado en vez de repetir la misma vuelta. */
.js .tarjeta-ayuda__icono img { transform: rotate(0deg); transition: transform 1.1s ease; }
.js .tarjeta-ayuda__icono.girado img { transform: rotate(360deg); }
@media (prefers-reduced-motion: reduce) {
  .js [data-animar] { opacity: 1; transform: none; transition: none; }
  .js .tarjeta-ayuda__icono img { transition: none; }
  html { scroll-behavior: auto; }
}