/* ======================================================= */
/* --- AJUSTES DE ESCRITORIO (WEB) --- */
/* ======================================================= */

/* 1. SECCIÓN ACERCA DE NOSOTROS (CON TÍTULO CENTRADO Y ESPACIO) */
.about-hero {
    display: grid;
    grid-template-columns: 3fr 2fr; 
    gap: 40px !important; /* Forzar separación entre columnas */
    align-items: center; 
    
    /* ESPACIADO: Margen inferior de 7rem para una separación profesional */
    margin-top: 4rem !important; 
    margin-bottom: 7rem !important; 
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px; 
}

/* 1.1 Estilos del bloque de TEXTO: TARJETA FORZADA Y CENTRADA */
.about-hero-content {
    /* Aplicar estilo de tarjeta con !important para forzar la visualización */
    background-color: var(--white) !important;
    padding: 30px !important; 
    border-radius: 12px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important; 
    height: 100%; 
    margin-bottom: 25px;
}
.about-hero-content h1{
font-size: 3rem;
 font-weight: 700; 
 color: #dc2626; 
 margin-bottom: 1rem;
 text-align: center;

}

/* 1.2 Estilos de la imagen: Manteniendo la tarjeta visual */
.about-hero-image {
    padding: 0;
}

.about-hero-image img {
    width: 100%;
    height: auto;
    max-height: 450px; 
    object-fit: cover;
    border-radius: 15px !important; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important; 
}
.about-section{
    padding: 80px 0;
    background: #f8f9fa;
}

/* 2. ESTILOS PROFESIONALES PARA LA SECCIÓN NUESTRA HISTORIA */
.content-block {
    background-color: var(--white) !important;
    padding: 40px !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1) !important;
    text-align: left;
    max-width: 900px;
    margin-top: 0 !important; 
    margin-bottom: 4rem !important; 
    margin-left: auto;
    margin-right: auto;
}

.content-block h2 {
    text-align: left;
    margin-bottom: 1.5rem;
}

/* --- NUEVO: Estilo del texto del párrafo para profesionalidad --- */
.content-block p {
    font-size: 1.1rem; /* Tamaño optimizado para lectura en escritorio */
    color: var(--text-dark); /* Color oscuro para máxima legibilidad */
    line-height: 1.7; /* Espaciado cómodo entre líneas */
    margin-bottom: 1rem; /* Espacio entre párrafos sucesivos */
}

/* --- Media Query para Dispositivos Móviles (máximo 768px) --- */
@media (max-width: 768px) {

    .container {
        /* Ajusta el padding lateral para no pegar los elementos a los bordes */
        padding: 0 15px;
    }

 /* 2. CORRECCIÓN DE LA IMAGEN Y SECCIONES PRINCIPALES (STACKING ESTÁNDAR) */
    
    /* ANULA EL GRID DE ESCRITORIO y fuerza el apilamiento vertical */
    .about-hero {
        grid-template-columns: 1fr !important; /* Anula la plantilla de columnas de Grid */
        gap: 2rem !important; 
        display: flex !important;
        flex-direction: column; /* Stacking: Texto arriba, Imagen abajo */
    }
    .about-hero-content h1{
    font-size: 2.3rem;
    font-weight: 700;
    color: #dc2626;
    margin-bottom: 1rem;
    text-align: center;
    }

    /* Asegura que el bloque de imagen se adapte al ancho móvil */
    .about-hero-image {
        width: 100%;
    }

    .about-hero-image img {
        width: 100% !important; 
        height: auto !important; 
        max-height: 300px; 
        object-fit: cover;
    }
   .about-section{
    padding: 20px 0;
    background: #f8f9fa;
}

    /* --- ESTILOS PROFESIONALES PARA LA SECCIÓN NUESTRA HISTORIA --- */

.content-block {
    /* 1. Fondo, Bordes y Sombra (Look de Tarjeta) */
    background-color: var(--white); /* Fondo blanco */
    padding: 40px; /* Espacio interior, crucial para la estética */
    border-radius: 12px; /* Bordes redondeados suaves */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); /* Sombra profesional sutil */
    
    /* 2. Alineación y Centrado */
    text-align: left; /* Alineación del texto */
    max-width: 900px; /* Limitar el ancho para facilitar la lectura */
    margin: 4rem auto; /* Centrar el bloque y darle espacio vertical */
}

.content-block p {
    font-size: 1.1rem; /* Tamaño optimizado para lectura en escritorio */
    color: var(--text-dark); /* Color oscuro para máxima legibilidad */
    line-height: 1.7; /* Espaciado cómodo entre líneas */
    margin-bottom: 1rem; /* Espacio entre párrafos sucesivos */
}

/* Asegurar que el título también esté alineado */
.content-block h2 {
    text-align: left;
    margin-bottom: 1.5rem;
}
    
    /* 3. SECCIÓN MISIÓN Y VISIÓN */
    .mission-vision {
        /* Cambia el grid de 2 columnas a 1 columna apilada */
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .mission-card, .vision-card {
        padding: 2rem !important;
    }

/* 4. CORRECCIÓN PRINCIPAL: SECCIONES VALORES, LOGROS Y EQUIPO DIRECTIVO */
    
    /* Asegura el espacio vertical entre secciones (Valores, Logros, Equipo) */
    .values-section, .achievements-section, .team-section {
        /* Aumentamos el margen inferior para separarlos de la sección siguiente */
        margin-bottom: 4rem !important; 
    }

    /* Ajuste para el título de la sección de Logros (que tiene un fondo de color) */
    .achievements-section {
        padding: 3rem 1rem !important; /* Ajusta el padding para no sobrecargar el diseño */
    }

    .values-grid, .achievements-grid, .team-grid {
        /* Mantiene el diseño de 2 columnas o más, pero AUMENTA EL ESPACIO ENTRE ELLAS */
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
        gap: 2rem !important; /* *** AUMENTADO: de 1rem a 2rem para evitar que se peguen *** */
    }

    /* Asegura que cada tarjeta tenga un buen padding interno */
    .value-item, .achievement-card, .team-member {
        padding: 1.5rem 1rem !important; /* Padding uniforme */
    }

    /* Ajuste para las imágenes del Equipo Directivo */
    .team-member img {
        width: 120px !important;
        height: 120px !important;
        margin-bottom: 0.75rem !important; /* Más espacio entre imagen y nombre */
    }

    .team-member h4 {
        font-size: 1.3rem !important;
    }

    /* 5. FOOTER */
    .footer-content {
        /* Coloca las 4 secciones del footer en una sola columna */
        grid-template-columns: 1fr !important;
        text-align: center;
        gap: 3rem;
    }
    
    .footer-logo, .social-links {
        /* Centra los elementos de las secciones del footer */
        justify-content: center;
    }

    .footer-bottom {
        /* Apila los enlaces del fondo del footer */
        flex-direction: column;
        gap: 10px;
    }
}