/* ============================================= */
/* 1. CONFIGURACIÓN GLOBAL Y VARIABLES           */
/* ============================================= */

/* Definimos tus colores y fuentes como variables para usarlos fácilmente */
:root {
    --verde-esperanza: #2E7D32;
    --azul-profundo: #1A237E;
    --dorado-suave: #FBC02D;
    --gris-claro: #F5F5F5;
    --blanco: #FFFFFF;
    --negro-suave: #333333;

    --fuente-titulares: 'Poppins', sans-serif;
    --fuente-textos: 'Lato', sans-serif;
    --fuente-citas: 'Playfair Display', serif;
}

/* Reseteo básico para un comportamiento consistente */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--fuente-textos);
    font-weight: 400; /* Lato Regular */
    line-height: 1.7;
    color: var(--negro-suave);
    background-color: var(--blanco);
}

/* ============================================= */
/* 2. CLASES UTILITARIAS Y COMPONENTES           */
/* ============================================= */

/* Contenedor principal para centrar el contenido */
.container {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
}

/* --- Tipografía --- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--fuente-titulares);
    font-weight: 600; /* Poppins SemiBold */
    margin-bottom: 1.2rem;
    color: var(--azul-profundo); /* Usamos Azul Profundo para titulares por defecto */
}

h1 { font-size: 2.8rem; line-height: 1.2; }
h2 { font-size: 2.2rem; }
h3 { font-size: 1.5rem; color: var(--verde-esperanza); } /* Títulos de cajas más pequeños en verde */
p { margin-bottom: 1rem; }
a { color: var(--verde-esperanza); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Botones (CTAs) --- */
.cta-button {
    display: inline-block;
    padding: 12px 28px;
    text-decoration: none;
    font-family: var(--fuente-titulares);
    font-weight: 600;
    border-radius: 5px;
    margin: 5px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.cta-principal {
    background-color: var(--dorado-suave);
    color: var(--negro-suave);
    border-color: var(--dorado-suave);
}
.cta-principal:hover {
    background-color: #fdd835; /* Un dorado un poco más brillante */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.cta-secundario {
    background-color: var(--blanco);
    color: var(--verde-esperanza);
    border-color: var(--verde-esperanza);
}
.cta-secundario:hover {
    background-color: var(--verde-esperanza);
    color: var(--blanco);
}

/* ============================================= */
/* 3. ESTILOS DEL HEADER (MENÚ)                  */
/* ============================================= */
header.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
}
header .logo {
    font-family: var(--fuente-titulares);
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--azul-profundo);
    text-decoration: none;
}
header nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
}
header nav a {
    font-family: var(--fuente-textos);
    font-weight: 700; /* Lato Bold */
    font-size: 1rem;
    text-decoration: none;
}

/* ============================================= */
/* 4. ESTILOS DE SECCIONES (Homepage)            */
/* ============================================= */

/* --- 1. Sección Hero --- */
/* --- 1. Sección Hero --- */
.hero {
    /* Esta es la línea clave que usa tu imagen */
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('hero-fundecc.jpg');
    
    /* ESTAS SON LAS LÍNEAS QUE TE FALTABAN: */
    background-size: cover;
    background-position: center;
    padding: 100px 0;
    text-align: center;
    color: var(--blanco);
}
.hero h1 {
    color: var(--blanco);
    font-size: 3.2rem;
}
.hero p {
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto 2rem auto;
}
.hero h1 {
    color: var(--blanco);
    font-size: 3.2rem;
}
.hero p {
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto 2rem auto;
}

/* --- 2. Sección Misión --- */
section.mision {
    padding-top: 4rem;
    padding-bottom: 4rem;
    text-align: center;
}
.mision-columnas {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    text-align: left;
    margin-top: 3rem;
}
.mision-columnas > div {
    flex-basis: 32%;
    padding: 20px;
}
.mision-columnas h3 {
    text-align: center; /* Centramos el h3 de la columna */
}
/* Iconos (requiere que añadas un <img> o una librería de iconos) */
.mision-columnas .icono {
    font-size: 3rem;
    color: var(--verde-esperanza);
    margin-bottom: 1rem;
    text-align: center;
}


/* --- 3. Sección Pilares --- */
section.pilares {
    padding-bottom: 4rem;
}
.pilares-cajas {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}
.pilares-cajas > div {
    flex-basis: 32%;
    padding: 2.5rem 2rem;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}
.pilares-cajas > div:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.pilares-cajas h3 {
    margin-bottom: 1rem;
}
/* Colores específicos para cada caja */
.caja-beneficiarios { border-top: 5px solid var(--verde-esperanza); }
.caja-beneficiarios h3 { color: var(--verde-esperanza); }
.caja-beneficiarios .cta-button { background-color: var(--verde-esperanza); color: var(--blanco); }

.caja-donantes { border-top: 5px solid var(--dorado-suave); }
.caja-donantes h3 { color: var(--dorado-suave); }
.caja-donantes .cta-button { background-color: var(--dorado-suave); color: var(--negro-suave); }

.caja-voluntarios { border-top: 5px solid var(--azul-profundo); }
.caja-voluntarios h3 { color: var(--azul-profundo); }
.caja-voluntarios .cta-button { background-color: var(--azul-profundo); color: var(--blanco); }


/* --- 4. Sección Impacto --- */
.impacto {
    background-color: var(--gris-claro);
    padding: 4rem 0;
    text-align: center;
}
.impacto-cifras {
    display: flex;
    justify-content: space-around;
    margin-top: 3rem;
}
.impacto-cifras div {
    flex-basis: 22%;
}
.impacto-cifras span {
    font-family: var(--fuente-titulares);
    font-size: 3rem;
    font-weight: 600;
    color: var(--verde-esperanza);
}
.impacto-cifras p {
    font-size: 1.1rem;
    color: var(--negro-suave);
}

/* --- 5. Sección Testimonios --- */
.testimonios {
    padding: 4rem 0;
    text-align: center;
}
.testimonio-cita {
    font-family: var(--fuente-citas);
    font-style: italic;
    font-size: 1.5rem;
    color: var(--negro-suave);
    max-width: 800px;
    margin: 0 auto 1rem auto;
}
.testimonio strong {
    font-family: var(--fuente-titulares);
    color: var(--azul-profundo);
}

/* --- 6. Sección CTA Final --- */
.cta-final {
    background-color: var(--azul-profundo);
    color: var(--blanco);
    text-align: center;
    padding: 5rem 0;
}
.cta-final h2 {
    color: var(--blanco);
}
.cta-final p {
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 2rem auto;
}
/* Invertimos los colores de los botones aquí */
.cta-final .cta-principal { background-color: var(--dorado-suave); color: var(--negro-suave); }
.cta-final .cta-secundario { background-color: var(--blanco); color: var(--azul-profundo); border-color: var(--blanco); }

/* ============================================= */
/* 5. ESTILOS DEL FOOTER (PIE DE PÁGINA)         */
/* ============================================= */
footer {
    background-color: var(--negro-suave);
    color: #e0e0e0;
    padding: 4rem 0 2rem 0;
}
.footer-columnas {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    padding-bottom: 2rem;
}
.footer-columnas > div { 
    flex-basis: 22%; 
}
.footer-columnas .footer-logo-div {
    flex-basis: 30%; /* Más espacio para el logo */
}

.footer-logo {
    font-family: var(--fuente-titulares);
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--blanco);
    margin-bottom: 10px;
}
.footer-logo span {
    display: block;
    font-family: var(--fuente-textos);
    font-size: 0.9rem;
    font-weight: 400;
    color: #c0c0c0;
    line-height: 1.4;
}

.footer-columnas h4 {
    font-family: var(--fuente-titulares);
    font-weight: 600;
    color: var(--blanco);
    margin-bottom: 1rem;
}
.footer-columnas ul {
    list-style: none;
    padding: 0;
}
.footer-columnas li {
    margin-bottom: 0.5rem;
}
.footer-columnas a {
    color: #e0e0e0;
    text-decoration: none;
}
.footer-columnas a:hover {
    color: var(--dorado-suave);
    text-decoration: none;
}
.footer-copyright {
    text-align: center;
    border-top: 1px solid #555;
    padding-top: 2rem;
    margin-top: 2rem;
    font-size: 0.9rem;
    color: #aaa;
}
/* ============================================= */
/* 7. ESTILOS SECCIÓN "QUIÉNES SOMOS"            */
/* (Añadido después)                             */
/* ============================================= */

section.quienes-somos {
    padding-top: 4rem;
    padding-bottom: 4rem;
    background-color: var(--blanco); /* Fondo blanco por defecto */
}

.quienes-somos-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 4rem; /* Espacio generoso entre las dos columnas */
}

/* Columna izquierda con el texto principal */
.quienes-somos-texto {
    flex-basis: 60%; /* Ocupa el 60% del ancho */
}
.quienes-somos-texto h2 {
    color: var(--azul-profundo);
    margin-bottom: 1.5rem;
}
.quienes-somos-texto h3 {
    color: var(--verde-esperanza);
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}

/* Columna derecha con los valores */
.quienes-somos-valores {
    flex-basis: 35%; /* Ocupa el 35% (el 5% es de 'gap') */
    background-color: var(--gris-claro);
    padding: 2.5rem 2rem;
    border-radius: 8px;
    border-left: 5px solid var(--verde-esperanza);
}
.quienes-somos-valores h2 {
    color: var(--azul-profundo);
    margin-bottom: 1.5rem;
}
.quienes-somos-valores ul {
    list-style: none; /* Quitamos las viñetas */
}
.quienes-somos-valores li {
    margin-bottom: 1.5rem;
}
.quienes-somos-valores li strong {
    font-family: var(--fuente-titulares);
    font-weight: 600;
    color: var(--negro-suave);
    display: block; /* Hace que el valor (ej. 'Equidad') esté en su propia línea */
    font-size: 1.1rem;
}

/* Ajuste para el Footer que moví */
.footer-logo-div {
    flex-basis: 30%;
}
.footer-copyright {
    text-align: center;
    border-top: 1px solid #555;
    padding-top: 2rem;
    margin-top: 2rem;
    font-size: 0.9rem;
    color: #aaa;
}
/* ============================================= */
/* 8. ESTILOS PÁGINA "PROGRAMAS"                 */
/* ============================================= */

/* Hero específico para la página de programas */
/* (Puedes cambiar 'hero-programas.jpg' por otra foto) */
#programas-hero {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('hero-fundecc.jpg');
    padding: 80px 0; /* Un poco menos de padding que la home */
}

/* Estilo para los subtítulos de sección */
.subtitulo-seccion {
    font-size: 1.15rem;
    max-width: 700px;
    margin: -1rem auto 3rem auto;
    text-align: center;
    color: #555;
}
section h2 {
    text-align: center;
}

/* Sección "Por qué FUNDECC" */
.porque-fundecc {
    padding: 4rem 0;
}
.porque-columnas {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    text-align: center;
    margin-top: 3rem;
}
.porque-columnas > div {
    flex-basis: 32%;
    padding: 20px;
}
.porque-columnas h3 {
    font-size: 1.3rem;
}

/* Sección "Áreas de Formación" (Catálogo) */
.areas-formacion {
    background-color: var(--gris-claro);
    padding: 4rem 0;
}
.programas-cajas {
    display: grid;
    /* Crea 3 columnas en escritorio */
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px;
}
.programa-tarjeta {
    background-color: var(--blanco);
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.07);
    overflow: hidden; /* Para que la imagen se ajuste */
    display: flex;
    flex-direction: column; /* Apila el contenido verticalmente */
    transition: all 0.3s ease;
}
.programa-tarjeta:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.programa-tarjeta img {
    width: 100%;
    height: 180px;
    object-fit: cover; /* Asegura que la imagen cubra el espacio */
}
.programa-tarjeta h3 {
    padding: 1.5rem 1.5rem 0.5rem 1.5rem;
    color: var(--azul-profundo);
}
.programa-tarjeta p {
    padding: 0 1.5rem 1.5rem 1.5rem;
    flex-grow: 1; /* Hace que el texto ocupe el espacio disponible */
}
.programa-tarjeta .cta-button {
    background-color: var(--verde-esperanza);
    color: var(--blanco);
    text-align: center;
    margin: 0 1.5rem 1.5rem 1.5rem;
}
.programa-tarjeta:nth-child(even) .cta-button {
     /* Alternamos colores para variedad */
    background-color: var(--azul-profundo);
}

/* Sección "Proceso / Pasos" */
.proceso-pasos {
    padding: 5rem 0;
}
.pasos-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    text-align: center;
}
.paso {
    flex-basis: 23%;
    position: relative;
}
/* La línea de puntos (decorativa) */
.paso:not(:last-child)::after {
    content: '...';
    position: absolute;
    top: 1.5rem;
    right: -25%;
    font-size: 2rem;
    color: var(--gris-claro);
    letter-spacing: 5px;
}
.paso span {
    display: block;
    font-family: var(--fuente-titulares);
    font-size: 3rem;
    font-weight: 600;
    color: var(--dorado-suave);
    line-height: 1;
}
.paso h3 {
    color: var(--azul-profundo);
    margin-top: 0.5rem;
}

/* Ajuste para 4 tarjetas en "Programas" */
/* Si prefieres 4 columnas, usa esto. Si no, 3 está bien. */
/* .programas-cajas {
    grid-template-columns: repeat(4, 1fr); 
}
.programa-tarjeta h3 { font-size: 1.1rem; }
.programa-tarjeta p { font-size: 0.9rem; }
*/
/* ============================================= */
/* 9. ESTILOS PÁGINA "DONAR"                     */
/* ============================================= */

/* (Opcional) Hero específico para la página de donar */
/* #donar-hero {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('hero-donar.jpg');
} */

.donar-contenido {
    display: flex;
    justify-content: space-between;
    gap: 4rem;
    padding: 4rem 0;
}

/* Columna Izquierda: El Formulario */
.donar-formulario {
    flex-basis: 60%;
    background-color: var(--gris-claro);
    padding: 2.5rem;
    border-radius: 8px;
}
.donar-formulario h2 {
    text-align: center;
    margin-top: 0;
}
.form-grupo {
    margin-bottom: 2rem;
}
.form-grupo label {
    font-family: var(--fuente-titulares);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--negro-suave);
    display: block;
    margin-bottom: 0.75rem;
}

/* Botones seleccionables (Frecuencia, Monto) */
.frecuencia-botones,
.monto-botones {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.monto-botones {
    grid-template-columns: repeat(4, 1fr);
}
.btn-opcion {
    display: block;
    background-color: var(--blanco);
    border: 2px solid #ccc;
    padding: 12px;
    text-align: center;
    border-radius: 5px;
    font-family: var(--fuente-titulares);
    font-weight: 600;
    color: var(--negro-suave);
    text-decoration: none;
    transition: all 0.2s ease;
}
.btn-opcion:hover {
    border-color: var(--azul-profundo);
    text-decoration: none;
}
/* Estilo del botón activo (seleccionado) */
.btn-opcion.activo {
    background-color: var(--verde-esperanza);
    border-color: var(--verde-esperanza);
    color: var(--blanco);
}

.input-otra-cantidad {
    width: 100%;
    padding: 12px;
    border: 2px solid #ccc;
    border-radius: 5px;
    margin-top: 10px;
    font-family: var(--fuente-textos);
    font-size: 1rem;
}

/* Botón principal de Donar */
.donar-submit {
    width: 100%;
    text-align: center;
    font-size: 1.5rem;
    padding: 18px 24px;
    margin-top: 1rem;
}
.sellos-confianza {
    text-align: center;
    margin-top: 1.5rem;
    color: #777;
    font-size: 0.9rem;
}

/* Columna Derecha: Impacto */
.donar-impacto {
    flex-basis: 40%;
}
.donar-impacto h2 {
    text-align: left;
    margin-top: 0;
}
.impacto-lista {
    list-style: none;
    margin-top: 2rem;
}
.impacto-lista li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 1.5rem;
}
/* (Aquí iría el estilo para un icono) */
.impacto-lista h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1.2rem;
}
.impacto-lista p {
    margin: 0;
    line-height: 1.5;
}
.cita-impacto {
    font-family: var(--fuente-citas);
    font-style: italic;
    font-size: 1.25rem;
    color: var(--negro-suave);
    margin-top: 2rem;
    border-left: 3px solid var(--dorado-suave);
    padding-left: 1rem;
}

/* Sección Alianzas Corporativas */
.alianzas-corp {
    background-color: var(--azul-profundo);
    color: var(--blanco);
    text-align: center;
    padding: 4rem 0;
}
.alianzas-corp h2, .alianzas-corp p {
    color: var(--blanco);
    max-width: 700px;
    margin: 0 auto 1.5rem auto;
}
.alianzas-corp .cta-secundario {
    background-color: var(--blanco);
    color: var(--azul-profundo);
    border-color: var(--blanco);
}
.alianzas-corp .cta-secundario:hover {
    background-color: var(--dorado-suave);
    border-color: var(--dorado-suave);
    color: var(--negro-suave);
}

/* Sección Otras Formas de Ayudar */
.otras-formas {
    padding: 4rem 0;
}
.otras-formas h2 {
    text-align: center;
}
.otras-formas-cajas {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 3rem;
}
.forma-caja {
    flex-basis: 45%;
    padding: 2.5rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    text-align: center;
}
.forma-caja h3 {
    color: var(--azul-profundo);
}
/* ============================================= */
/* 10. ESTILOS PÁGINA "VOLUNTARIADO"             */
/* ============================================= */

/* (Opcional) Hero específico para la página de voluntariado */
/* #voluntariado-hero {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('hero-voluntariado.jpg');
} */

.porque-voluntario {
    padding: 4rem 0;
}

/* Perfiles de Voluntariado */
.perfiles-voluntariado {
    background-color: var(--gris-claro);
    padding: 4rem 0;
}
.perfiles-cajas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.perfil-tarjeta {
    background-color: var(--blanco);
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.07);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    border-top: 5px solid var(--azul-profundo);
}
.perfil-tarjeta:nth-child(even) {
    border-top-color: var(--verde-esperanza);
}
.perfil-tarjeta h3 {
    color: var(--azul-profundo);
}
.perfil-tarjeta p {
    flex-grow: 1; /* Empuja el botón hacia abajo */
}
.perfil-tarjeta p strong {
    font-family: var(--fuente-titulares);
    color: var(--negro-suave);
}
.perfil-tarjeta .cta-button {
    background-color: var(--azul-profundo);
    color: var(--blanco);
    text-align: center;
    margin-top: 1rem;
}
.perfil-tarjeta:nth-child(even) .cta-button {
    background-color: var(--verde-esperanza);
}

/* Formulario de Postulación */
.formulario-voluntario {
    padding: 4rem 0;
}
.form-voluntario-wrapper {
    max-width: 800px;
    margin: 2rem auto 0 auto;
    background-color: var(--gris-claro);
    padding: 2.5rem;
    border-radius: 8px;
}
.form-grupo-vol {
    margin-bottom: 1.5rem;
}
.form-grupo-vol label {
    display: block;
    font-family: var(--fuente-titulares);
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--negro-suave);
}
/* Estilo para todos los campos del formulario */
.form-voluntario-wrapper input[type="text"],
.form-voluntario-wrapper input[type="email"],
.form-voluntario-wrapper input[type="tel"],
.form-voluntario-wrapper select,
.form-voluntario-wrapper textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #ccc;
    border-radius: 5px;
    font-family: var(--fuente-textos);
    font-size: 1rem;
    transition: border-color 0.3s ease;
}
.form-voluntario-wrapper input:focus,
.form-voluntario-wrapper select:focus,
.form-voluntario-wrapper textarea:focus {
    outline: none;
    border-color: var(--verde-esperanza);
}
.btn-submit-voluntario {
    width: 100%;
    font-size: 1.2rem;
    background-color: var(--verde-esperanza);
}
/* ============================================= */
/* 11. ESTILOS PÁGINA "CONTACTO"                 */
/* ============================================= */

/* Un Hero más simple, sin imagen de fondo */
.hero-simple {
    background-color: var(--azul-profundo);
    padding: 4rem 0;
    text-align: center;
}
.hero-simple h1 {
    color: var(--blanco);
    font-size: 2.8rem;
}
.hero-simple p {
    color: #e0e0e0;
    font-size: 1.15rem;
    max-width: 600px;
    margin: 0 auto;
}

/* Contenido principal (Formulario + Info) */
.contacto-contenido {
    display: flex;
    justify-content: space-between;
    gap: 4rem;
    padding: 4rem 0;
}

/* Columna Izquierda: Formulario */
.contacto-formulario {
    flex-basis: 60%;
    /* Reutilizamos los estilos del formulario de voluntariado */
}
.contacto-formulario h2 {
    text-align: left;
    margin-top: 0;
}
/* Reutilizamos las clases .form-grupo-vol y sus campos */
.form-contacto-wrapper {
    /* No necesita el fondo gris, lo dejamos limpio */
    padding: 0;
}
.form-contacto-wrapper .btn-submit-voluntario {
    width: auto; /* El botón no ocupa el 100% */
    background-color: var(--verde-esperanza);
}

/* Columna Derecha: Información */
.contacto-info {
    flex-basis: 35%;
}
.contacto-info h2 {
    text-align: left;
    margin-top: 0;
}
.info-lista {
    list-style: none;
    margin-top: 2rem;
}
.info-lista li {
    margin-bottom: 1.5rem;
    padding-left: 2.5rem; /* Espacio para un futuro icono */
    position: relative;
    line-height: 1.5;
}
/* (Aquí pondrías los estilos para los iconos) */
/* .info-lista li::before { 
    content: '[ICONO]'; 
    position: absolute; left: 0; top: 0;
} */
.info-lista li strong {
    font-family: var(--fuente-titulares);
    font-weight: 600;
    color: var(--negro-suave);
    display: block;
    font-size: 1.1rem;
}
.info-lista li span {
    color: #555;
}

.contacto-redes {
    margin-top: 2rem;
}
.contacto-redes h3 {
    color: var(--azul-profundo);
}
/* (Estilos para los iconos de redes) */
.contacto-redes a {
    font-size: 1.5rem;
    margin-right: 1rem;
    color: var(--azul-profundo);
    text-decoration: none;
}
.contacto-redes a:hover {
    color: var(--verde-esperanza);
}

/* Sección del Mapa */
.mapa-seccion {
    /* El iframe ocupará el 100% del ancho */
    width: 100%;
    /* Quitamos cualquier borde del iframe */
    line-height: 0; 
}
.mapa-seccion iframe {
    width: 100%;
    border: 0;
}
/* ============================================= */
/* 12. DISEÑO RESPONSIVO (MEDIA QUERIES)         */
/* Estos estilos SÓLO se aplican si la pantalla */
/* es de 768px de ancho o menos (tablets y móviles) */
/* ============================================= */

@media (max-width: 768px) {

    /* 1. AJUSTES GENERALES */
    
    /* Reducimos el tamaño de los títulos */
    h1, .hero h1 {
        font-size: 2.2rem; /* Más pequeño que el 3.2rem de escritorio */
    }
    h2 {
        font-size: 1.8rem; /* Más pequeño que el 2.2rem */
    }

    /* El contenedor ahora ocupa casi todo el ancho */
    .container {
        width: 95%;
    }

    /* 2. HEADER (MENÚ DE NAVEGACIÓN) */
    
    /* Hacemos que el logo y el menú se apilen */
    header.container {
        flex-direction: column;
        gap: 15px;
        padding: 15px 0;
    }
    header nav ul {
        flex-direction: column; /* Apilamos los enlaces */
        gap: 10px;
        align-items: center; /* Centramos el menú */
        padding: 10px 0;
        border-top: 1px solid var(--gris-claro);
        width: 100%;
    }

    /* 3. COLUMNAS (EL CAMBIO MÁS IMPORTANTE) */
    
    /* Todas nuestras cajas flexibles ahora se apilan verticalmente */
    .mision-columnas,
    .pilares-cajas,
    .quienes-somos-wrapper,
    .porque-columnas,
    .pasos-wrapper,
    .donar-contenido,
    .otras-formas-cajas,
    .contacto-contenido,
    .footer-columnas {
        flex-direction: column;
        gap: 30px; /* Espacio vertical entre cajas */
    }

    /* Todas nuestras grillas ahora son de 1 sola columna */
    .programas-cajas,
    .perfiles-cajas {
        grid-template-columns: 1fr;
    }

    /* Hacemos que la columna de valores tenga ancho completo */
    .quienes-somos-valores {
        flex-basis: 100%;
    }

    /* 4. AJUSTES ESPECIALES */

    /* Hero */
    .hero {
        padding: 60px 0; /* Menos espacio vertical */
    }

    /* Cifras de Impacto */
    .impacto-cifras {
        flex-direction: column; /* Apilamos las 4 cifras */
        gap: 25px;
    }
    
    /* Formulario Donar: 2 botones por fila en vez de 4 */
    .monto-botones {
        grid-template-columns: 1fr 1fr;
    }
    
    /* Página de Contacto: Centramos el formulario */
    .contacto-formulario h2,
    .contacto-info h2 {
        text-align: center;
    }

    /* Proceso (Pasos): Ocultamos la línea de puntos */
    .paso:not(:last-child)::after {
        display: none;
    }

    /* Footer: Centramos todo */
    .footer-columnas {
        text-align: center;
    }
    .footer-logo-div {
        margin-bottom: 20px;
    }

}