/* ==========================================================================
   ESTILOS DE LA SECCIÓN ESTADÍSTICAS CORPORATIVAS
   ========================================================================== */

.section-stats-corporate {
    width: 100%;
    background-color: #ffffff;
    
    /* Padding superior e inferior ajustado (0 abajo para que los bloques toquen el límite) */
    padding: 100px 0 0 0; 
    box-sizing: border-box;
    
    /* CORRECCIÓN: Forzamos a que los bloques se apilen verticalmente */
    display: flex;
    flex-direction: column; 
    align-items: center;
}

.stats-container {
    width: 100%;
    max-width: 1000px;
    padding: 0 20px; /* Margen interno para que los contadores no peguen a los bordes */
    box-sizing: border-box;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Logotipo 'm' guinda centrado */
.stats-brand-logo {
    margin-bottom: 35px;
}

.stats-brand-logo img {
    height: 70px;
    width: auto;
}

/* Descripción superior de la marca */
.stats-description {
    max-width: 780px;
    margin-bottom: 70px;
}

.stats-description p {
    font-family: 'Exo', sans-serif;
    font-size: 1.15rem;
    color: #4A4A4A;
    line-height: 1.6;
    margin: 0;
    font-weight: 300;
}

/* Estructura de Grilla del Contador */
.stats-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 20px;
}

/* Bloque Individual */
.stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-icon {
    margin-bottom: 25px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon img {
    max-height: 100%;
    width: auto;
}

/* Números Gigantes en Color Guinda */
.stat-number {
    font-family: 'Exo', sans-serif;
    font-size: 5.5rem; /* Ajuste del tamaño para hacerlo imponente */
    font-weight: 900;  /* Ultra negrita de la tipografía */
    color: #8C1527;    /* Color Guinda de la marca */
    line-height: 1;
    margin-bottom: 15px;
    letter-spacing: -2px;
}

/* Textos de las Etiquetas Inferiores */
.stat-label {
    font-family: 'Exo', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: #4A4A4A;
    line-height: 1.4;
    letter-spacing: 1px;
}

/* ==========================================================================
   RESPONSIVE MÓVIL
   ========================================================================== */
@media screen and (max-width: 768px) {
    .section-stats-corporate {
        padding: 60px 20px;
    }

    .stats-description {
        margin-bottom: 45px;
    }

    .stats-description p {
        font-size: 1rem;
    }

    .stats-grid {
        grid-template-columns: 1fr; /* Una columna vertical en móvil */
        gap: 60px;
    }

    .stat-number {
        font-size: 4.5rem;
    }
}

/* ==========================================================================
   BLOQUES: MISIÓN Y VISIÓN (MEJORA DE APARICIÓN)
   ========================================================================== */

.mission-vision-fluid-container {
    width: 100%;
    display: flex;
    margin-top: 100px; /* Separación de la grilla de contadores */
}

/* Bloques individuales de Misión y Visión */
.mv-block {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 40px;
    box-sizing: border-box;
    text-align: center;
}

/* Colores de marca */
.mv-mision {
    background-color: #8C1527; /* Guinda */
}

.mv-vision {
    background-color: #2C2825; /* Gris oscuro corporativo */
}

/* Contenido interno centrado */
.mv-content {
    max-width: 500px;
}

/* Títulos MISIÓN / VISIÓN */
.mv-title {
    font-family: 'Exo', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 3px;
    display: block;
    margin-bottom: 25px;
}

/* Textos de descripción */
.mv-text {
    font-family: 'Exo', sans-serif;
    font-size: 1.6rem;
    font-weight: 300;
    color: #ffffff;
    line-height: 1.35;
    margin: 0;
}

/* ==========================================================================
   EFECTO DE APARICIÓN BONITO (FADE IN UP)
   ========================================================================== */

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(40px); /* Empieza desplazado hacia abajo */
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    /* El delay se inyecta dinámicamente desde el inline style de cada bloque */
    transition-delay: var(--reveal-delay, 0s); 
}

.reveal-on-scroll.active {
    opacity: 1;
    transform: translateY(0); /* Sube suavemente a su posición original */
}

/* ==========================================================================
   RESPONSIVE MÓVIL (ACTUALIZADO)
   ========================================================================== */
@media screen and (max-width: 768px) {
    .mission-vision-fluid-container {
        flex-direction: column; /* Se apilan verticalmente en móviles */
        margin-top: 60px;
    }
    
    .mv-block {
        padding: 60px 20px;
    }

    .mv-text {
        font-size: 1.35rem;
    }
}