/*
 * -----------------------------------------------------------------
 * Estilos para la sección Quienes Somos (Misión y Visión)
 * -----------------------------------------------------------------
 */

.mission-vision-section {
    background-color: #fff;
    overflow: hidden;
}

/* --- Estilos del Collage de Imágenes (Igual que antes) --- */
.mv-image-collage {
    padding-bottom: 15%;
    padding-right: 10%;
}

.mv-img-main {
    width: 90%;
    border-radius: 1rem !important;
    background-color: #eee; /* Color de fondo por si no carga la imagen */
    min-height: 300px;      /* Altura mínima para que se vea el espacio */
}

.mv-img-secondary {
    width: 60%;
    bottom: 0;
    right: 0;
    border-radius: 0.8rem !important;
    background-color: #ddd;
    min-height: 200px;
}

.mv-dots-decoration {
    width: 200px;
    height: 200px;
    bottom: -30px;
    left: -30px;
    background-image: radial-gradient(#da6517 2px, transparent 2px); /* Puntos naranjas */
    background-size: 15px 15px;
    opacity: 0.3;
}

/* --- Estilos Generales de Texto --- */
.mv-content h2 {
    line-height: 1.2;
    color: #212529;
    text-align: left; /* <--- CAMBIO AQUÍ: 'left' se ve mucho mejor en títulos */
}

/* --- NUEVO ESTILO: Tarjetas de Texto Misión/Visión --- */
.mv-text-card {
    background-color: #ffffff;
    border-radius: 8px;
    /* Sombra suave para levantar la tarjeta */
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    /* Borde izquierdo grueso con tu color naranja */
    border-left: 5px solid #da6517;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto al pasar el mouse */
.mv-text-card:hover {
    transform: translateY(-5px); /* Sube un poquito */
    box-shadow: 0 8px 25px rgba(218, 101, 23, 0.15); /* Sombra naranja muy suave */
}

/* Estilo de los iconos */
.icon-accent {
    color: #da6517; /* Icono naranja */
}

.lead-sm {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #6c757d;
    text-align: left; /* <--- Opcional: Cambia esto si los párrafos también se ven mal */
}

/* Ajustes para móviles */
@media (max-width: 991px) {
    .mv-image-collage {
        padding-bottom: 5%;
        padding-right: 0;
        margin-bottom: 3rem;
        text-align: center;
    }
    .mv-img-main { width: 100%; }
    .mv-img-secondary { display: none; }
    .mv-dots-decoration { display: none; }
    
    .mv-content {
        padding-left: 0 !important;
        text-align: center;
    }
    .mv-content h2 { text-align: center; }
    
    /* En móviles, las tarjetas se ven mejor alineadas a la izquierda */
    .lead-sm { text-align: left; }
    .mv-text-card { text-align: left; }
}