/* ================================================
   VARIABLES GLOBALES
   ================================================ */
:root {
  /* Paleta oficial FAO */
  --cinabrio:       #E13F33;
  --naranja-llama:  #EE7404;
  --buff:           #F0E084;
  --azul-real:      #4559E0;
  --pampas:         #F3EFEA;

  /* Colores de apoyo (no modificar la paleta principal) */
  --blanco:         #FFFFFF;
  --texto-oscuro:   #1A1A1A;
  --texto-medio:    #555555;

  /* Layout */
  --header-alto:    72px;
  --ancho-max:      1200px;
  --padding-h:      1.5rem;

  /* Tipografía */
  --fuente-titulo:  'Oswald', sans-serif;
  --fuente-cuerpo:  'Inter', sans-serif;

  /* Transiciones */
  --trans:          0.22s ease;
}


/* ================================================
   RESET MÍNIMO
   ================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

/* Sin animaciones para quienes lo prefieren */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration:  0.01ms !important;
  }
}

body {
  font-family: var(--fuente-cuerpo);
  background-color: var(--pampas);
  color: var(--texto-oscuro);
  line-height: 1.65;
}

img  { max-width: 100%; display: block; }
a    { text-decoration: none; color: inherit; }
ul   { list-style: none; }


/* ================================================
   FOCO VISIBLE — navegación por teclado
   ================================================ */
:focus-visible {
  outline: 3px solid var(--azul-real);
  outline-offset: 3px;
  border-radius: 4px;
}


/* ================================================
   BOTONES — estilos compartidos
   ================================================ */
.btn {
  display: inline-block;
  font-family: var(--fuente-cuerpo);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.7rem 1.6rem;
  border-radius: 4px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color var(--trans), color var(--trans), border-color var(--trans);
  white-space: nowrap;
  text-align: center;
}

/* Botón "Donar" del header */
.btn--donar {
  background-color: var(--cinabrio);
  color: var(--blanco);
  border-color: var(--cinabrio);
  font-size: 0.9rem;
  padding: 0.55rem 1.3rem;
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  transition: background-color var(--trans), border-color var(--trans),
              transform 0.2s ease, box-shadow 0.2s ease;
}
.btn--donar:hover,
.btn--donar:focus-visible {
  background-color: #c73229;
  border-color: #c73229;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(225, 63, 51, 0.38);
}
.btn--donar:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn--donar-corazon {
  flex-shrink: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .btn--donar:hover .btn--donar-corazon,
  .btn--donar:focus-visible .btn--donar-corazon {
    animation: latido 0.65s ease infinite;
  }
}


/* ================================================
   HEADER — fijo en la parte superior
   ================================================ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: var(--blanco);
  transition: box-shadow 0.3s ease;
}

/* Franja de identidad: degradado Cinabrio → Naranja → Azul en el borde inferior */
.header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--cinabrio)      0%,
    var(--naranja-llama) 50%,
    var(--azul-real)     100%
  );
}

.header--compacto {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.12);
}

.header__inner {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 var(--padding-h);
  height: var(--header-alto);
  display: flex;
  align-items: center;
  gap: 2rem;
  transition: height 0.3s ease;
}

.header--compacto .header__inner {
  height: 56px;
}

/* ── Logo ── */
.header__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

/* Prefers-reduced-motion: la regla global ya mata transitions,
   pero se añade aquí para mayor claridad */
@media (prefers-reduced-motion: reduce) {
  .header__logo { transition: none; }
}

.header__logo:hover {
  transform: scale(1.05);
}

.header__logo-img {
  height: 50px;
  width: auto;
  display: block;
}

/* ── Navegación escritorio ── */
.header__nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.nav__lista {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.nav__enlace {
  position: relative;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--texto-oscuro);
  padding: 0.45rem 0.8rem;
  border-radius: 4px;
  transition: color var(--trans);
}

/* Subrayado naranja animado */
.nav__enlace::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0.8rem;
  right: 0.8rem;
  height: 2px;
  background-color: var(--naranja-llama);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.nav__enlace:hover,
.nav__enlace:focus-visible {
  color: var(--azul-real);
  outline: none;
}

.nav__enlace:hover::after,
.nav__enlace.activo::after {
  transform: scaleX(1);
}

.nav__enlace.activo {
  color: var(--azul-real);
  font-weight: 600;
}

/* ── Grupo selector de idioma + Donar ── */
.header__acciones {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

/* ── Selector de idioma ── */
.selector-idioma {
  position: relative;
}

.selector-idioma__btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: 1.5px solid rgba(0, 0, 0, 0.14);
  border-radius: 4px;
  padding: 0.4rem 0.65rem;
  font-family: var(--fuente-cuerpo);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--texto-oscuro);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--trans), background-color var(--trans), color var(--trans);
}

.selector-idioma__btn:hover,
.selector-idioma__btn:focus-visible {
  border-color: var(--azul-real);
  color: var(--azul-real);
  background-color: rgba(69, 89, 224, 0.05);
  outline: none;
}

.selector-idioma__flecha {
  color: currentColor;
  transition: transform 0.22s ease;
}

.selector-idioma.abierto .selector-idioma__flecha {
  transform: rotate(180deg);
}

.selector-idioma__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--blanco);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.11);
  min-width: 150px;
  padding: 0.35rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 200;
}

.selector-idioma.abierto .selector-idioma__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.selector-idioma__opcion {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.55rem 0.75rem;
  background: none;
  border: none;
  border-radius: 5px;
  font-family: var(--fuente-cuerpo);
  font-size: 0.88rem;
  color: var(--texto-oscuro);
  cursor: pointer;
  text-align: left;
  transition: background-color var(--trans), color var(--trans);
}

.selector-idioma__opcion:hover,
.selector-idioma__opcion:focus-visible {
  background-color: rgba(69, 89, 224, 0.07);
  outline: none;
}

.selector-idioma__opcion.seleccionado {
  color: var(--azul-real);
  font-weight: 600;
}

/* ── Botón hamburguesa ── */
.header__hamburguesa {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.header__hamburguesa span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--texto-oscuro);
  border-radius: 2px;
  transition: transform var(--trans), opacity var(--trans);
}

/* Animación hamburguesa → X */
.header__hamburguesa.activo span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.header__hamburguesa.activo span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.header__hamburguesa.activo span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* ── Menú móvil ── */
.header__nav-movil {
  background-color: var(--blanco);
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
}

.header__nav-movil.abierto {
  max-height: 300px;
}

.nav__lista-movil {
  padding: 1rem var(--padding-h) 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.nav__enlace-movil {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  color: var(--texto-oscuro);
  padding: 0.65rem 0.6rem;
  border-radius: 4px;
  transition: color var(--trans), background-color var(--trans);
}
.nav__enlace-movil:hover,
.nav__enlace-movil:focus-visible {
  color: var(--azul-real);
  background-color: rgba(69, 89, 224, 0.07);
  outline: none;
}

.btn--donar-movil {
  display: block;
  width: 100%;
  margin-top: 0.6rem;
  font-size: 1rem;
  padding: 0.75rem 1.5rem;
}


/* ================================================
   HERO — imagen a pantalla completa
   ================================================ */
.hero {
  position: relative;
  min-height: 95vh;
  padding-top: var(--header-alto);
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Carrusel de imágenes de fondo */
.hero__carrusel {
  position: absolute;
  inset: 0;
}

.hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.hero__slide.activo {
  opacity: 1;
}

/* Capa oscura sobre la imagen */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(0, 0, 0, 0.74) 0%,
    rgba(0, 0, 0, 0.42) 60%,
    rgba(0, 0, 0, 0.25) 100%
  );
}

/* Contenido del Hero (sobre las capas) */
.hero__contenido {
  position: relative;
  z-index: 1;
  max-width: var(--ancho-max);
  width: 100%;
  margin: 0 auto;
  padding: 4rem 1.5rem 5rem 1rem;
}

/* Columna angosta de texto — libera la mitad derecha del Hero para el carrusel */
.hero__texto {
  max-width: min(45vw, 620px);
}

/* Badge de credibilidad */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.38rem 0.9rem;
  background: rgba(240, 224, 132, 0.1);
  border: 1px solid rgba(240, 224, 132, 0.38);
  border-radius: 3px;
  font-family: var(--fuente-cuerpo);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 1.3rem;
}

.hero__badge::before {
  content: '★';
  color: var(--buff);
  font-size: 0.72rem;
  line-height: 1;
}

/* Titular principal */
.hero__titulo {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.7rem, 3.2vw + 0.5rem, 3.0rem);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--blanco);
  line-height: 1.12;
  letter-spacing: 0.03em;
  margin-bottom: 0;
}

/* Degradado Cinabrio → Naranja Llama en "talento STEM" */
.hero__titulo-acento {
  color: var(--naranja-llama); /* fallback si el navegador no soporta background-clip: text */
  background: linear-gradient(
    90deg,
    var(--cinabrio)      0%,
    var(--naranja-llama) 50%,
    var(--cinabrio)      100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Línea naranja — elemento independiente para animarse en secuencia */
.hero__linea {
  width: 72px;
  height: 4px;
  background-color: var(--naranja-llama);
  border-radius: 2px;
  margin-top: 1.1rem;
  margin-bottom: 1.2rem;
}

/* Subtítulo */
.hero__subtitulo {
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  color: rgba(255, 255, 255, 0.88);
  max-width: 560px;
  line-height: 1.7;
}

/* Indicador de scroll */
.hero__scroll-indicator {
  position: absolute;
  bottom: 2.2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.55);
  transition: color var(--trans);
}

.hero__scroll-indicator:hover,
.hero__scroll-indicator:focus-visible {
  color: var(--buff);
  outline: none;
}

/* ── Animaciones de entrada y rebote ── */
@keyframes hero-aparece {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-rebote {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(9px); }
}

/* Desplazamiento lento del degradado en "talento STEM":
   la posición de fondo oscila entre el primer y el segundo bloque de color */
@keyframes hero-gradiente {
  from { background-position: 0% center; }
  to   { background-position: 100% center; }
}

/* Solo si el usuario NO prefiere movimiento reducido */
@media (prefers-reduced-motion: no-preference) {
  .hero__badge,
  .hero__titulo,
  .hero__linea,
  .hero__subtitulo {
    opacity: 0;
    animation: hero-aparece 0.65s ease forwards;
  }

  .hero__badge     { animation-delay: 0.15s; }
  .hero__titulo    { animation-delay: 0.38s; }
  .hero__linea     { animation-delay: 0.62s; }
  .hero__subtitulo { animation-delay: 0.82s; }

  .hero__scroll-indicator {
    animation: hero-rebote 2.4s ease-in-out infinite;
  }

  /* Degradado oscilante muy lento: 4s ida + 4s vuelta = ciclo de 8s */
  .hero__titulo-acento {
    animation: hero-gradiente 4s ease-in-out infinite alternate;
  }
}


/* ================================================
   RESPONSIVE — Mobile First
   ================================================ */

/* Pantallas pequeñas (hasta 768 px) */
@media (max-width: 768px) {

  /* Logo ligeramente más pequeño en móvil */
  .header__logo-img {
    height: 46px;
  }

  /* Ocultar nav y botón Donar de escritorio */
  .header__nav,
  .btn--donar:not(.btn--donar-movil) {
    display: none;
  }

  /* Mostrar hamburguesa */
  .header__hamburguesa {
    display: flex;
  }

  /* Logo | [espacio] | Selector idioma | [espacio] | Hamburguesa */
  .header__inner {
    justify-content: space-between;
  }

  /* El grupo .header__acciones en móvil solo muestra el selector de idioma */
  .header__acciones {
    gap: 0;
  }

  /* Columna de texto del Hero ocupa el ancho completo en móvil */
  .hero__texto {
    max-width: 100%;
  }

}

/* Pantallas medianas y grandes (desde 769 px) */
@media (min-width: 769px) {
  /* Forzar que el menú móvil no aparezca en desktop */
  .header__nav-movil {
    display: none !important;
  }
  .header__hamburguesa {
    display: none !important;
  }
}


/* ================================================================
   UTILIDADES COMPARTIDAS — contenedor + secciones
   ================================================================ */

/* Contenedor centrado con ancho máximo */
.contenedor {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 var(--padding-h);
}

/* Sección base: espaciado vertical uniforme */
.seccion {
  padding: 5rem 0;
}

/* Encabezado de sección centrado */
.seccion__encabezado {
  text-align: center;
  margin-bottom: 3rem;
}

.seccion__titulo {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.7rem, 2.5vw + 0.5rem, 2.6rem);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--azul-real);
  letter-spacing: 0.04em;
  line-height: 1.15;
}

.seccion__linea {
  width: 56px;
  height: 4px;
  background-color: var(--naranja-llama);
  border-radius: 2px;
  margin: 0.9rem auto 0;
}


/* ================================================================
   SCROLL REVEAL — aparición al hacer scroll
   (.js-reveal se añade al <html> por JS solo si motion está OK)
   ================================================================ */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.js-reveal [data-reveal].visible {
  opacity: 1;
  transform: translateY(0);
}


/* ================================================================
   SECCIÓN 1 — MISIÓN Y VISIÓN
   ================================================================ */
.mision {
  position: relative;
  overflow: hidden;
  background-color: var(--pampas);
  /* Patrón de puntos muy tenue: dot grid en Azul Real al 9 % */
  background-image: radial-gradient(circle, rgba(69, 89, 224, 0.09) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
}

/* Contenedor de íconos flotantes (decorativos, aria-hidden) */
.mision__deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.deco-icono {
  position: absolute;
  opacity: 0.08;
  color: var(--azul-real);
}

/* Posiciones de cada ícono decorativo */
.deco-icono--1 { top: 6%;   left: 3%;   width: 80px; height: 80px; }   /* átomo */
.deco-icono--2 { top: 10%;  right: 4%;  width: 64px; height: 64px; }   /* código */
.deco-icono--3 { top: 48%;  left: 1.5%; width: 58px; height: 58px; }   /* CPU */
.deco-icono--4 { bottom: 9%; left: 6%;  width: 66px; height: 66px; }   /* probeta */
.deco-icono--5 { bottom: 7%; right: 3%; width: 72px; height: 72px; }   /* onda */

/* Flotación lenta — solo si se permite movimiento */
@media (prefers-reduced-motion: no-preference) {
  .deco-icono--1 { animation: deco-flotar  9s ease-in-out infinite alternate; }
  .deco-icono--2 { animation: deco-flotar 11s ease-in-out infinite alternate; animation-delay: -3s; }
  .deco-icono--3 { animation: deco-flotar 13s ease-in-out infinite alternate; animation-delay: -7s; }
  .deco-icono--4 { animation: deco-flotar  8s ease-in-out infinite alternate; animation-delay: -5s; }
  .deco-icono--5 { animation: deco-flotar 10s ease-in-out infinite alternate; animation-delay: -2s; }
}

@keyframes deco-flotar {
  from { transform: translateY(0); }
  to   { transform: translateY(-13px); }
}

/* Frase objetivo */
.mision__objetivo {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.1rem, 1.6vw + 0.4rem, 1.6rem);
  font-weight: 400;
  color: var(--azul-real);
  text-align: center;
  max-width: 820px;
  margin: 0 auto 3.5rem;
  line-height: 1.55;
  padding: 0 1rem;
  border: none;
}

/* Grid de tarjetas */
.mision__columnas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: 920px;
  margin: 0 auto;
}

/* Tarjeta mejorada */
.mision__col {
  background: var(--blanco);
  border-radius: 14px;
  padding: 2rem 2rem 2.25rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
  border-top: 4px solid var(--cinabrio);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.mision__col:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.11);
}

.mision__col:last-child {
  border-top-color: var(--azul-real);
}

/* Ícono en la tarjeta */
.mision__col-icono {
  width: 44px;
  height: 44px;
  margin-bottom: 1.1rem;
  color: var(--cinabrio);
}

.mision__col:last-child .mision__col-icono {
  color: var(--azul-real);
}

.mision__col-titulo {
  font-family: var(--fuente-titulo);
  font-size: 1.15rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--cinabrio);
  letter-spacing: 0.06em;
  margin-bottom: 0.85rem;
}

.mision__col:last-child .mision__col-titulo {
  color: var(--azul-real);
}

.mision__col p {
  color: var(--texto-medio);
  line-height: 1.75;
}

/* Énfasis selectivo — frase objetivo */
.mision__objetivo strong {
  font-weight: 600;
}
.mision__objetivo .em-naranja  { color: var(--naranja-llama); }
.mision__objetivo .em-cinabrio { color: var(--cinabrio); }

/* Énfasis selectivo — párrafos de tarjetas (solo peso, sin cambiar color) */
.mision__col p strong {
  font-weight: 600;
  color: inherit;
}


/* ================================================================
   SECCIÓN 2 — LA FUNDADORA
   ================================================================ */
.fundadora {
  background-color: var(--blanco);
  position: relative;
  overflow: hidden;
}

/* El contenedor queda por encima del isotipo de fondo */
.fundadora .contenedor {
  position: relative;
  z-index: 1;
}

/* Isotipo como marca de agua en esquina inferior derecha */
.fundadora__isotipo-marca {
  position: absolute;
  bottom: -3rem;
  right: -3rem;
  width: 340px;
  height: 340px;
  pointer-events: none;
  z-index: 0;
}

.fundadora__isotipo-img {
  width: 100%;
  height: 100%;
  opacity: 0.06;
  object-fit: contain;
}

.fundadora__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  max-width: 1020px;
  margin: 0 auto;
}

/* Columna foto — posicionamiento relativo para el blob */
.fundadora__foto-col {
  display: flex;
  justify-content: center;
  position: relative;
}

/* Blob degradado orgánico detrás de la foto */
.fundadora__blob {
  position: absolute;
  width: 92%;
  height: 92%;
  top: -4%;
  left: -8%;
  background: radial-gradient(
    ellipse at 45% 45%,
    rgba(69, 89, 224, 0.26) 0%,
    rgba(238, 116, 4, 0.16) 55%,
    transparent 78%
  );
  border-radius: 60% 40% 70% 30% / 50% 65% 35% 50%;
  z-index: 0;
  pointer-events: none;
  filter: blur(32px);
}

/* La foto flota sobre el blob */
.fundadora__foto {
  width: 100%;
  max-width: 420px;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(69, 89, 224, 0.18), 0 4px 16px rgba(0, 0, 0, 0.08);
  object-fit: cover;
  position: relative;
  z-index: 1;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.fundadora__foto:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 22px 56px rgba(69, 89, 224, 0.26), 0 8px 24px rgba(0, 0, 0, 0.1);
}

.fundadora__nombre {
  font-family: var(--fuente-titulo);
  font-size: clamp(2rem, 3vw + 0.5rem, 2.8rem);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--azul-real);
  letter-spacing: 0.04em;
  line-height: 1.1;
  margin-bottom: 0.85rem;
}

.fundadora__pill {
  display: inline-block;
  background-color: var(--naranja-llama);
  color: var(--blanco);
  font-family: var(--fuente-cuerpo);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 1rem;
  border-radius: 100px;
  margin-bottom: 1rem;
}

/* Chips de logros — tres etiquetas con acento azul sutil */
.fundadora__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.6rem;
}

.fundadora__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.9rem;
  border: 1.5px solid rgba(69, 89, 224, 0.4);
  border-radius: 100px;
  font-family: var(--fuente-cuerpo);
  font-size: 0.77rem;
  font-weight: 600;
  color: var(--azul-real);
  background: rgba(69, 89, 224, 0.06);
  letter-spacing: 0.03em;
  transition: background var(--trans), color var(--trans),
              border-color var(--trans), transform 0.18s ease;
  cursor: default;
}

.fundadora__chip:hover {
  background: var(--azul-real);
  color: var(--blanco);
  border-color: var(--azul-real);
  transform: translateY(-2px);
}

.fundadora__bio {
  color: var(--texto-medio);
  line-height: 1.75;
  margin-bottom: 1.75rem;
  font-size: 1rem;
}

/* Cita con comilla decorativa grande — elemento editorial */
.fundadora__cita {
  position: relative;
  border-left: 4px solid var(--naranja-llama);
  padding: 1rem 1.25rem 1rem 1.5rem;
  background: rgba(240, 224, 132, 0.14);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: var(--texto-oscuro);
  font-size: 1.02rem;
  line-height: 1.65;
  overflow: hidden;
}

/* Comilla " decorativa grande — solo diseño, baja opacidad */
.fundadora__cita::before {
  content: '\201C';
  position: absolute;
  top: -1.5rem;
  left: 0.4rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 7.5rem;
  font-style: normal;
  line-height: 1;
  color: var(--naranja-llama);
  opacity: 0.14;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}


/* ================================================================
   SECCIÓN 3 — NOTICIAS
   ================================================================ */
.noticias {
  background-color: var(--pampas);
  position: relative;
  overflow: hidden;
  /* Cuadrícula en diamante: dos sets de líneas a ±45° — diferente del patrón de puntos de Propósito */
  background-image:
    repeating-linear-gradient(
       45deg,
      transparent 0,
      transparent 28px,
      rgba(238, 116, 4, 0.055) 28px,
      rgba(238, 116, 4, 0.055) 29px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent 0,
      transparent 28px,
      rgba(238, 116, 4, 0.055) 28px,
      rgba(238, 116, 4, 0.055) 29px
    );
}

/* Blob azul real — esquina superior derecha */
.noticias::before {
  content: '';
  position: absolute;
  top: -10rem;
  right: -8rem;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(69, 89, 224, 0.10) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}

/* Blob cinabrio — esquina inferior izquierda */
.noticias::after {
  content: '';
  position: absolute;
  bottom: -8rem;
  left: -6rem;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(225, 63, 51, 0.08) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}

/* El contenedor queda por encima de toda la decoración */
.noticias .contenedor {
  position: relative;
  z-index: 1;
}

/* Wrapper de formas geométricas decorativas */
.noticias__deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.ndeco {
  position: absolute;
}

/* Hexágono — esquina superior derecha, parcialmente recortado */
.ndeco--1 {
  top: -2.5rem;
  right: -2.5rem;
  width: 210px;
  height: 210px;
  color: var(--azul-real);
  opacity: 0.07;
}

/* Doble anillo — esquina inferior izquierda, parcialmente recortado */
.ndeco--2 {
  bottom: -6rem;
  left: -6rem;
  width: 270px;
  height: 270px;
  color: var(--naranja-llama);
  opacity: 0.08;
}

/* Rombo — centrado verticalmente en el lado derecho */
.ndeco--3 {
  top: calc(50% - 28px);
  right: 6%;
  width: 56px;
  height: 56px;
  color: var(--buff);
  opacity: 0.22;
}

/* Animaciones — solo si no hay preferencia de movimiento reducido */
@media (prefers-reduced-motion: no-preference) {
  .ndeco--1 { animation: ndeco-girar  38s linear        infinite; }
  .ndeco--2 { animation: ndeco-pulsar  9s ease-in-out   infinite alternate; }
  .ndeco--3 { animation: ndeco-flotar  7s ease-in-out   infinite alternate; }
}

@keyframes ndeco-girar  { to { transform: rotate(360deg); } }

@keyframes ndeco-pulsar {
  from { opacity: 0.08; }
  to   { opacity: 0.03; }
}

@keyframes ndeco-flotar {
  from { transform: translateY(0); }
  to   { transform: translateY(-14px); }
}

.noticias__subtitulo {
  font-size: 1rem;
  color: var(--texto-medio);
  margin-top: 0.75rem;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* Wrapper del carrusel — posicionamiento relativo para las flechas */
.noticias__carrusel-wrapper {
  position: relative;
  padding: 0 3.25rem;
}

/* Flechas de navegación izquierda / derecha */
.noticias__flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(69, 89, 224, 0.25);
  background: var(--blanco);
  color: var(--azul-real);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.09);
  transition: background var(--trans), color var(--trans),
              border-color var(--trans), box-shadow 0.2s ease;
}

.noticias__flecha--prev { left: 0; }
.noticias__flecha--next { right: 0; }

.noticias__flecha:hover:not(:disabled) {
  background: var(--azul-real);
  color: var(--blanco);
  border-color: var(--azul-real);
  box-shadow: 0 4px 16px rgba(69, 89, 224, 0.32);
}

.noticias__flecha:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Pista de scroll horizontal — trackpad y swipe táctil nativos */
.noticias__pista {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0.5rem 0.25rem 1.25rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(69, 89, 224, 0.2) transparent;
}

.noticias__pista::-webkit-scrollbar        { height: 4px; }
.noticias__pista::-webkit-scrollbar-thumb  { background: rgba(69, 89, 224, 0.22); border-radius: 2px; }
.noticias__pista::-webkit-scrollbar-track  { background: transparent; }

/* Tarjeta de noticia */
.noticia-card {
  flex-shrink: 0;
  width: clamp(280px, 30vw, 340px);
  background: var(--blanco);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.07);
  scroll-snap-align: start;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}

.noticia-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.12);
}

/* Imagen con etiqueta encima */
.noticia-card__imagen-wrap {
  position: relative;
  flex-shrink: 0;
}

.noticia-card__imagen {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}

.noticia-card__etiqueta {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  background: var(--cinabrio);
  color: var(--blanco);
  font-family: var(--fuente-cuerpo);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 3px;
}

/* Cuerpo de la tarjeta */
.noticia-card__cuerpo {
  padding: 1.2rem 1.3rem 1.3rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.noticia-card__titulo {
  font-family: var(--fuente-titulo);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--texto-oscuro);
  line-height: 1.3;
  margin-bottom: 0.65rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.noticia-card__resumen {
  font-size: 0.88rem;
  color: var(--texto-medio);
  line-height: 1.65;
  margin-bottom: 1rem;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Pie: meta y tags */
.noticia-card__pie {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.noticia-card__meta {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: 0.78rem;
  color: var(--texto-medio);
}

.noticia-card__autor {
  font-weight: 600;
  color: var(--texto-oscuro);
}

.noticia-card__fecha::before {
  content: ' · ';
  opacity: 0.5;
}

/* Tags de categoría */
.noticia-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.noticia-tag {
  font-size: 0.66rem;
  font-weight: 700;
  font-family: var(--fuente-cuerpo);
  letter-spacing: 0.05em;
  padding: 0.18rem 0.55rem;
  border-radius: 3px;
  background: rgba(69, 89, 224, 0.08);
  color: var(--azul-real);
  text-transform: uppercase;
}

/* Sin animación de scroll en pista cuando el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
  .noticias__pista { scroll-behavior: auto; }
}


/* ================================================================
   SECCIÓN 4 — DONA
   ================================================================ */
.dona {
  background: linear-gradient(150deg, var(--azul-real) 0%, #1e3a8a 100%);
}

/* Layout dos columnas: texto izquierda, tarjeta derecha */
.dona__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

/* ── Columna texto ── */
.dona__preheadline {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--buff);
  margin-bottom: 0.85rem;
}

.dona__titulo {
  font-family: var(--fuente-titulo);
  font-size: clamp(2.2rem, 3.5vw + 0.5rem, 3.4rem);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--blanco);
  letter-spacing: 0.03em;
  line-height: 1.1;
  margin-bottom: 1.2rem;
}

.dona__subtitulo {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.76);
  line-height: 1.7;
  max-width: 420px;
  margin-bottom: 2.5rem;
}

/* Columna texto — crea contexto de apilamiento para decoraciones */
.dona__texto {
  position: relative;
  isolation: isolate;
}

/* Orb de luz cálida sutil en esquina superior izquierda */
.dona__texto::before {
  content: '';
  position: absolute;
  top: -6rem;
  left: -6rem;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 224, 132, 0.09) 0%, transparent 68%);
  pointer-events: none;
  z-index: -1;
}

/* Marca de agua isotipo — esquina inferior derecha de la columna */
.dona__texto-deco {
  position: absolute;
  bottom: -2rem;
  right: -1rem;
  width: 240px;
  height: 240px;
  pointer-events: none;
  z-index: -1;
}

.dona__isotipo-deco {
  width: 100%;
  height: 100%;
  opacity: 0.07;
  object-fit: contain;
}

/* Estadísticas de impacto */
.dona__impacto {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
}

.dona__impacto-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.dona__impacto-num {
  font-family: var(--fuente-titulo);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--blanco);
  line-height: 1;
}

.dona__impacto-plus {
  font-size: 1.5rem;
  color: var(--naranja-llama);
  vertical-align: top;
  line-height: 1.2;
}

.dona__impacto-label {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.58);
  max-width: 110px;
  line-height: 1.35;
}

/* ── Tarjeta flotante blanca ── */
.dona__tarjeta-wrap {
  display: flex;
  justify-content: center;
}

.dona__tarjeta {
  background: var(--blanco);
  border-radius: 20px;
  padding: 2rem 2rem 1.75rem;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28), 0 8px 24px rgba(0, 0, 0, 0.14);
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

/* Toggle Única vez / Mensual */
.dona__toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: rgba(69, 89, 224, 0.07);
  border-radius: 10px;
  padding: 4px;
  gap: 4px;
}

.dona__toggle-btn {
  padding: 0.6rem;
  border: none;
  border-radius: 7px;
  background: transparent;
  font-family: var(--fuente-cuerpo);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--texto-medio);
  cursor: pointer;
  transition: background var(--trans), color var(--trans), box-shadow 0.2s ease;
}

.dona__toggle-btn.activo {
  background: var(--blanco);
  color: var(--azul-real);
  box-shadow: 0 2px 8px rgba(69, 89, 224, 0.14);
}

.dona__toggle-btn:hover:not(.activo) {
  color: var(--azul-real);
  background: rgba(69, 89, 224, 0.06);
}

/* Etiqueta de campo */
.dona__campo-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--texto-medio);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: -0.4rem;
}

/* Chips de monto */
.dona__chips {
  display: flex;
  gap: 0.6rem;
}

.dona__chip {
  flex: 1;
  padding: 0.7rem 0.5rem;
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  border-radius: 9px;
  background: var(--blanco);
  color: var(--texto-oscuro);
  font-family: var(--fuente-cuerpo);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: background var(--trans), border-color var(--trans),
              color var(--trans), transform 0.15s ease, box-shadow 0.15s ease;
}

.dona__chip:hover:not(.activo) {
  border-color: var(--azul-real);
  color: var(--azul-real);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(69, 89, 224, 0.14);
}

.dona__chip.activo {
  background: var(--azul-real);
  border-color: var(--azul-real);
  color: var(--blanco);
  box-shadow: 0 4px 14px rgba(69, 89, 224, 0.35);
}

/* Input de cantidad personalizada */
.dona__monto-input-wrap {
  display: flex;
  align-items: stretch;
  border: 1.5px solid rgba(0, 0, 0, 0.14);
  border-radius: 9px;
  overflow: hidden;
  transition: border-color var(--trans), box-shadow var(--trans);
  background: var(--blanco);
}

.dona__monto-input-wrap:focus-within {
  border-color: var(--azul-real);
  box-shadow: 0 0 0 3px rgba(69, 89, 224, 0.12);
}

.dona__monto-prefijo,
.dona__monto-sufijo {
  padding: 0 0.75rem;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--texto-medio);
  background: rgba(0, 0, 0, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  flex-shrink: 0;
}

.dona__monto-prefijo { border-right: 1.5px solid rgba(0, 0, 0, 0.08); }

.dona__monto-sufijo {
  border-left:  1.5px solid rgba(0, 0, 0, 0.08);
  flex-direction: column;
  gap: 3px;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.dona__sufijo-bandera {
  display: block;
  flex-shrink: 0;
  border-radius: 2px;
}

.dona__monto-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 0.78rem 0.75rem;
  font-family: var(--fuente-cuerpo);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--texto-oscuro);
  background: transparent;
  text-align: center;
  -moz-appearance: textfield;
}

.dona__monto-input::-webkit-outer-spin-button,
.dona__monto-input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* Mensaje de error de validación */
.dona__monto-error {
  font-size: 0.76rem;
  color: var(--cinabrio);
  min-height: 1em;
  margin-top: -0.85rem;
  line-height: 1.4;
}

/* Botón CTA principal con corazón */
.dona__btn-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  background: var(--cinabrio);
  color: var(--blanco);
  border-radius: 10px;
  padding: 1rem 1.5rem;
  font-family: var(--fuente-cuerpo);
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.dona__btn-cta:hover {
  background: #c73229;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(225, 63, 51, 0.45);
}

.dona__btn-cta:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Corazón con micro-animación de latido al hacer hover */
.dona__btn-corazon {
  flex-shrink: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .dona__btn-cta:hover .dona__btn-corazon {
    animation: latido 0.65s ease infinite;
  }
}

@keyframes latido {
  0%, 100% { transform: scale(1); }
  30%       { transform: scale(1.32); }
  65%       { transform: scale(1.1); }
}

/* Separador "o paga con" */
.dona__separador {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.76rem;
  color: rgba(0, 0, 0, 0.3);
  font-weight: 500;
}

.dona__separador::before,
.dona__separador::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
}

/* Botones de método de pago */
.dona__metodos {
  display: flex;
  gap: 0.6rem;
}

.dona__pago-btn {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.65rem 0.4rem;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  border-radius: 9px;
  background: var(--blanco);
  color: var(--texto-medio);
  font-family: var(--fuente-cuerpo);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--trans), background-color var(--trans),
              color var(--trans), box-shadow var(--trans), transform 0.18s ease;
  text-align: center;
  min-width: 0;
}

.dona__pago-btn:hover:not(.seleccionado) {
  border-color: rgba(0, 0, 0, 0.22);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.09);
  transform: translateY(-2px);
  color: var(--texto-oscuro);
}

.dona__pago-btn:focus-visible {
  outline: 2px solid var(--azul-real);
  outline-offset: 2px;
}

/* Estado seleccionado */
.dona__pago-btn.seleccionado {
  border-color: var(--cinabrio);
  background: rgba(225, 63, 51, 0.06);
  color: var(--cinabrio);
  box-shadow: 0 0 0 2px rgba(225, 63, 51, 0.14);
}


.dona__pago-logo {
  display: block;
  height: 22px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  flex-shrink: 0;
}

/* Aviso de demostración */
.dona__aviso {
  font-size: 0.76rem;
  color: rgba(0, 0, 0, 0.35);
  text-align: center;
  line-height: 1.5;
}


/* ================================================================
   SECCIÓN 5 — CONTACTO
   ================================================================ */
.contacto {
  background-color: var(--pampas);
  position: relative;
  overflow: hidden;
}

/* Blobs de color suaves en las esquinas */
.contacto::before {
  content: '';
  position: absolute;
  top: -8rem;
  left: -10rem;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(69, 89, 224, 0.07) 0%, transparent 68%);
  pointer-events: none;
}

.contacto::after {
  content: '';
  position: absolute;
  bottom: -5rem;
  right: -8rem;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(225, 63, 51, 0.06) 0%, transparent 68%);
  pointer-events: none;
}

/* Marca de agua del isotipo centrada en la sección */
.contacto__deco {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  height: 280px;
  pointer-events: none;
}

.contacto__isotipo-deco {
  width: 100%;
  height: 100%;
  opacity: 0.035;
  object-fit: contain;
}

/* Contenido sobre la decoración */
.contacto .contenedor {
  position: relative;
  z-index: 1;
}

/* Tarjeta blanca flotante */
.contacto__tarjeta {
  background: var(--blanco);
  border-radius: 20px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.07),
    0 4px 16px rgba(0, 0, 0, 0.04);
  padding: 2.5rem 3rem;
  max-width: 740px;
  margin: 0 auto;
}

.contacto__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.contacto__campo {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.contacto__campo--completo {
  grid-column: 1 / -1;
}

.contacto__campo label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--texto-oscuro);
}

.contacto__campo abbr {
  text-decoration: none;
  color: var(--cinabrio);
  margin-left: 0.1rem;
}

.contacto__campo input,
.contacto__campo textarea {
  font-family: var(--fuente-cuerpo);
  font-size: 0.95rem;
  padding: 0.72rem 1rem;
  border: 1.5px solid rgba(0, 0, 0, 0.16);
  border-radius: 6px;
  background: var(--blanco);
  color: var(--texto-oscuro);
  transition: border-color var(--trans), box-shadow var(--trans);
}

.contacto__campo input::placeholder,
.contacto__campo textarea::placeholder {
  color: rgba(0, 0, 0, 0.28);
}

.contacto__campo input:focus,
.contacto__campo textarea:focus {
  outline: none;
  border-color: var(--azul-real);
  box-shadow: 0 0 0 3px rgba(69, 89, 224, 0.12);
}

.contacto__campo textarea {
  resize: vertical;
  min-height: 130px;
}

/* Estado de error */
.contacto__campo input.campo-error,
.contacto__campo textarea.campo-error {
  border-color: var(--cinabrio);
  box-shadow: 0 0 0 3px rgba(225, 63, 51, 0.1);
}

.contacto__error {
  font-size: 0.76rem;
  color: var(--cinabrio);
  min-height: 1em;
  line-height: 1.4;
}

/* ── Campo de teléfono con selector de lada ── */
.contacto__tel-wrap {
  display: flex;
  align-items: stretch;
  border: 1.5px solid rgba(0, 0, 0, 0.16);
  border-radius: 6px;
  overflow: hidden;
  background: var(--blanco);
  transition: border-color var(--trans), box-shadow var(--trans);
}

.contacto__tel-wrap:focus-within {
  border-color: var(--azul-real);
  box-shadow: 0 0 0 3px rgba(69, 89, 224, 0.12);
}

.contacto__tel-wrap.campo-error {
  border-color: var(--cinabrio);
  box-shadow: 0 0 0 3px rgba(225, 63, 51, 0.1);
}

.contacto__lada {
  border: none;
  outline: none;
  background: rgba(0, 0, 0, 0.03);
  border-right: 1.5px solid rgba(0, 0, 0, 0.1);
  padding: 0 0.6rem;
  font-family: var(--fuente-cuerpo);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--texto-oscuro);
  cursor: pointer;
  flex-shrink: 0;
  width: 92px;
}

.contacto__lada:focus {
  outline: none;
}

/* Input de tel sin borde propio (el borde lo maneja el wrapper) */
.contacto__campo .contacto__tel-wrap input[type="tel"] {
  flex: 1;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0.72rem 0.9rem;
  min-width: 0;
}

.contacto__campo .contacto__tel-wrap input[type="tel"]:focus {
  border: none;
  box-shadow: none;
}

/* Pie del campo mensaje: error + contador */
.contacto__mensaje-pie {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  min-height: 1.4em;
}

.contacto__contador {
  font-size: 0.72rem;
  color: var(--texto-medio);
  white-space: nowrap;
  flex-shrink: 0;
}

.contacto__check-label {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  cursor: pointer;
  padding-top: 0.25rem;
}

.contacto__check-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  accent-color: var(--azul-real);
  cursor: pointer;
}

.contacto__check-label span {
  font-size: 0.9rem;
  color: var(--texto-medio);
  line-height: 1.5;
}

.contacto__link {
  color: var(--azul-real);
  text-decoration: underline;
}

.contacto__link:hover {
  color: var(--naranja-llama);
}

.contacto__pie {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.btn--enviar {
  background: var(--cinabrio);
  color: var(--blanco);
  border: 2px solid var(--cinabrio);
  font-size: 1rem;
  padding: 0.88rem 2.75rem;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--fuente-cuerpo);
  font-weight: 600;
  transition: background var(--trans), border-color var(--trans),
              transform 0.2s ease, box-shadow 0.2s ease;
}

.btn--enviar:hover,
.btn--enviar:focus-visible {
  background: #c73229;
  border-color: #c73229;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(225, 63, 51, 0.38);
}

.btn--enviar:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.contacto__estado {
  font-size: 0.95rem;
  font-weight: 500;
  min-height: 1.5em;
}

.contacto__estado.exito { color: #2e7d32; }
.contacto__estado.error { color: var(--cinabrio); }


/* ================================================================
   FOOTER
   ================================================================ */
.footer {
  background-color: #0f1b3d;
  color: rgba(255, 255, 255, 0.65);
}

/* Franja de acento con el degradado de la marca */
.footer__acento {
  height: 4px;
  background: linear-gradient(90deg, var(--cinabrio) 0%, var(--naranja-llama) 50%, var(--azul-real) 100%);
}

.footer__inner {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 3.5rem var(--padding-h) 2.5rem;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
  align-items: start;
}

/* ── Columnas ── */
.footer__col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer__col-titulo {
  font-family: var(--fuente-cuerpo);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  margin-bottom: 0.25rem;
}

/* Col 1 — Marca */
.footer__logo-link {
  display: inline-block;
  margin-bottom: 0.25rem;
}

.footer__logo-img {
  height: 52px;
  width: auto;
  /* El filtro invierte el SVG a blanco para que contraste sobre el fondo oscuro.
     Si tu logo ya es claro o tiene colores propios que se ven bien, elimina estas dos líneas. */
  filter: brightness(0) invert(1);
  display: block;
}

.footer__mision {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.42);
  line-height: 1.7;
  max-width: 280px;
}

.footer__redes {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}

.footer__red {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.5);
  transition: background var(--trans), color var(--trans),
              border-color var(--trans), transform 0.2s ease;
}

.footer__red:hover,
.footer__red:focus-visible {
  background: var(--cinabrio);
  color: var(--blanco);
  border-color: var(--cinabrio);
  transform: translateY(-3px);
}

/* Col 2 — Navegación */
.footer__nav-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer__nav-link {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  transition: color var(--trans), padding-left 0.2s ease;
  display: inline-block;
}

.footer__nav-link:hover,
.footer__nav-link:focus-visible {
  color: var(--buff);
  padding-left: 4px;
}

/* Col 3 — Contacto */
.footer__info-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Ítem de correo con icono (flex row alineado) */
.footer__contacto-item {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
}

.footer__contacto-icono {
  flex-shrink: 0;
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.35);
}

.footer__correo {
  color: var(--buff);
  font-size: 0.82rem;
  overflow-wrap: break-word;
  word-break: break-word;
  transition: color var(--trans);
  line-height: 1.5;
}

.footer__correo:hover,
.footer__correo:focus-visible {
  color: var(--naranja-llama);
}

.footer__ubicacion {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.45);
}

/* Col 4 — Apoya */
.footer__apoya-frase {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.42);
  line-height: 1.65;
}

.footer__btn-dona {
  display: inline-block;
  background: var(--cinabrio);
  color: var(--blanco);
  font-family: var(--fuente-cuerpo);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.6rem 1.5rem;
  border-radius: 6px;
  transition: background var(--trans), transform 0.2s ease, box-shadow 0.2s ease;
  align-self: flex-start;
}

.footer__btn-dona:hover,
.footer__btn-dona:focus-visible {
  background: #c73229;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(225, 63, 51, 0.4);
}

.footer__sello {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--buff);
  background: rgba(240, 224, 132, 0.08);
  border: 1px solid rgba(240, 224, 132, 0.2);
  border-radius: 20px;
  padding: 0.3rem 0.75rem;
  align-self: flex-start;
}

/* ── Barra inferior ── */
.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.footer__bottom-inner {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 1.1rem var(--padding-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer__copy-texto {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.28);
}

.footer__legal {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.footer__legal-link {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.28);
  transition: color var(--trans);
}

.footer__legal-link:hover,
.footer__legal-link:focus-visible {
  color: rgba(255, 255, 255, 0.65);
}

.footer__legal-sep {
  color: rgba(255, 255, 255, 0.2);
  font-size: 0.78rem;
}


/* ================================================================
   RESPONSIVE — secciones nuevas (hasta 768 px)
   ================================================================ */
@media (max-width: 768px) {

  .seccion {
    padding: 3.5rem 0;
  }

  .mision__columnas {
    grid-template-columns: 1fr;
  }

  .fundadora__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .fundadora__foto {
    max-width: 300px;
    margin: 0 auto;
  }

  .fundadora__isotipo-marca {
    width: 200px;
    height: 200px;
    bottom: -1.5rem;
    right: -1.5rem;
  }

  .fundadora__chips {
    justify-content: center;
  }

  /* Noticias: ocultar flechas en móvil (el swipe táctil es suficiente) */
  .noticias__carrusel-wrapper {
    padding: 0;
  }

  .noticias__flecha {
    display: none;
  }

  .noticia-card {
    width: clamp(260px, 80vw, 310px);
  }

  /* Dona: columna única, texto centrado */
  .dona__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .dona__texto {
    text-align: center;
  }

  .dona__impacto {
    justify-content: center;
  }

  .dona__subtitulo {
    margin-left: auto;
    margin-right: auto;
  }

  .dona__tarjeta {
    max-width: 100%;
  }

  .contacto__tarjeta {
    padding: 1.75rem 1.25rem;
    border-radius: 14px;
  }

  .contacto__grid {
    grid-template-columns: 1fr;
  }

  .contacto__lada {
    width: 82px;
  }

  .footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    padding: 2.5rem var(--padding-h);
  }

  .footer__col--marca {
    grid-column: 1 / -1;
  }

  .footer__mision {
    max-width: 100%;
  }

  .footer__bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

}

/* Footer columna única en móviles muy pequeños */
@media (max-width: 480px) {

  .footer__inner {
    grid-template-columns: 1fr;
  }

  .footer__col--marca {
    grid-column: auto;
  }

}