/* Encabezado de la página de impacto */
.impact-header {
    text-align: center; /* Centrado del contenido */
    max-width: 800px; /* Ancho máximo para centrar el texto */
    margin: 4rem auto; /* Margen vertical y centrado horizontal */
}

/* Título de la sección de impacto */
.impact-header h1 {
    font-size: 3.5rem; /* Tamaño de fuente grande */
    color: var(--text-primary); /* Color de texto oscuro */
    margin-bottom: 1rem; /* Espacio inferior */
}

/* Resalte en el título de impacto */
.impact-header h1 span {
    color: var(--primary); /* Color azul principal */
}

/* Subtítulo de la sección de impacto */
.impact-header p {
    font-size: 1.25rem; /* Tamaño de fuente legible */
    color: var(--text-secondary); /* Color gris tenue */
}

/* Cuadrícula de estadísticas de impacto */
.stats-grid {
    display: grid; /* Sistema de rejilla */
    grid-template-columns: repeat(4, 1fr); /* Cuatro columnas de igual ancho */
    gap: 2rem; /* Espacio entre las tarjetas */
    margin-bottom: 4rem; /* Margen inferior */
}

/* Tarjeta individual de estadística */
.stat-card {
    background: white; /* Fondo blanco */
    padding: 3rem 1.5rem; /* Espaciado interno generoso */
    border-radius: 24px; /* Esquinas muy redondeadas */
    text-align: center; /* Centrado del texto */
    box-shadow: var(--shadow); /* Sombra suave */
    border: 1px solid var(--border); /* Borde gris tenue */
    transition: var(--transition); /* Transición suave para el hover */
}

/* Efecto hover sobre la tarjeta de estadística */
.stat-card:hover {
    transform: translateY(-10px); /* Eleva la tarjeta */
    border-color: var(--primary); /* Cambia el borde a azul */
    box-shadow: var(--shadow-lg); /* Sombra más fuerte */
}

/* Estilo para el número de la estadística */
.stat-number {
    display: block; /* Ocupa su propia línea */
    font-size: 2.5rem; /* Fuente grande */
    font-weight: 800; /* Letra extra negrita */
    color: var(--primary); /* Color azul principal */
    font-family: 'Outfit', sans-serif; /* Tipografía Outfit */
    margin-bottom: 0.5rem; /* Espacio inferior */
}

/* Descripción de la estadística */
.stat-desc {
    color: var(--text-secondary); /* Color gris tenue */
    font-weight: 600; /* Letra gruesa */
    text-transform: uppercase; /* Mayúsculas */
    font-size: 0.8rem; /* Fuente pequeña */
    letter-spacing: 0.1em; /* Espaciado entre letras */
}

/* Cuadrícula de historias de impacto */
.stories-grid {
    display: grid; /* Sistema de rejilla */
    grid-template-columns: 1fr 1fr; /* Dos columnas de igual ancho */
    gap: 3rem; /* Espacio entre historias */
}

/* Tarjeta de historia individual */
.story-card {
    display: flex; /* Flexbox */
    flex-direction: column; /* Contenido apilado verticalmente */
    background: white; /* Fondo blanco */
    border-radius: 24px; /* Esquinas muy redondeadas */
    overflow: hidden; /* Corta contenido que sobresalga (la imagen) */
    box-shadow: var(--shadow); /* Sombra suave */
}

/* Imagen de la historia */
.story-card img {
    width: 100%; /* Ocupa todo el ancho */
    height: 250px; /* Alto fijo */
    object-fit: cover; /* Ajuste sin deformación */
}

/* Contenido de texto de la historia */
.story-content {
    padding: 2.5rem; /* Relleno interno amplio */
}

/* Título de la historia */
.story-content h3 {
    font-size: 1.5rem; /* Tamaño de fuente grande */
    margin-bottom: 1rem; /* Espacio inferior */
    color: var(--text-primary); /* Texto oscuro */
}

/* Texto del testimonio */
.story-content p {
    font-style: italic; /* Texto en cursiva para testimonios */
    color: var(--text-secondary); /* Color gris tenue */
    line-height: 1.8; /* Interlineado cómodo */
    margin-bottom: 1.5rem; /* Espacio inferior */
}

/* Autor del testimonio */
.story-author {
    display: block; /* Línea propia */
    font-weight: 700; /* Letra negrita */
    color: var(--primary); /* Color azul resaltado */
}

/* Media Queries para diseño responsivo */
@media (max-width: 992px) {
    /* Ajustes para tablets */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr); /* Dos columnas en lugar de cuatro */
    }
    .stories-grid {
        grid-template-columns: 1fr; /* Una sola columna para las historias */
    }
}

@media (max-width: 480px) {
    /* Ajustes para celulares */
    .stats-grid {
        grid-template-columns: 1fr; /* Una sola columna para las estadísticas */
    }
    .impact-header h1 {
        font-size: 2.5rem; /* Título más pequeño en móviles */
    }
}