/* =========================================
   11. SECCIÓN DE FILOSOFÍA CORPORATIVA
   ========================================= */

.mvv-seccion-formal {
    padding: 60px 20px 80px 20px;
    background-color: #f4f4f4; /* Hereda el gris de fondo de tu reset */
}

.mvv-container-formal {
    max-width: 1300px; /* Igual al ancho máximo de tu navbar */
    margin: 0 auto;
}

/* --- ENCABEZADO --- */
.mvv-header-formal {
    text-align: center;
    margin-bottom: 50px;
}

.mvv-subtitle-formal {
    color: #ffd700; /* Dorado para destacar el subtexto */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 14px;
    margin-bottom: 10px;
}

.mvv-main-title-formal {
    font-size: 2.5rem; /* Copiado exacto de tu .quienes-somos-titulo */
    font-weight: 700;
    color: #333333;
    margin: 0;
}

.mvv-linea-formal {
    margin: 15px auto 0 auto;
    height: 3px;
    background-color: #003366; /* Línea en azul principal */
    width: 60px;
    border-radius: 2px;
}

/* --- REJILLA (FLEXBOX RESPONSIVO) --- */
.mvv-grid-formal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
}

/* --- TARJETAS FORMALES --- */
.mvv-card-formal {
    background-color: #ffffff;
    border-radius: 8px; /* Mismo radio que tus tarjetas-custom */
    border: 1px solid #ddd; /* Consistencia con tu borde de tarjeta */
    padding: 35px 25px;
    width: 100%;
    max-width: 380px; /* Tamaño ideal balanceado para 3 columnas */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Sombra base idéntica */
    transition: all 0.3s ease; /* Tu transición estándar */
}

/* Efecto Hover idéntico a tus botones e imágenes */
.mvv-card-formal:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    border-color: #b3c2d1;
}

/* Bordes superiores de 4px al estilo Bootstrap/Corporativo */
.b-top-azul-principal { border-top: 4px solid #003366; }
.b-top-dorado { border-top: 4px solid #ffd700; }
.b-top-gris { border-top: 4px solid #868e96; }

/* --- CONTENEDOR DE ICONOS --- */
.mvv-icon-box-formal {
    width: 50px;
    height: 50px;
    border-radius: 6px; /* Ajustado a tus botones */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.mvv-svg-formal {
    width: 22px;
    height: 22px;
}

/* Fondos y colores derivados de tu paleta */
.bg-azul-suave { background-color: rgba(0, 51, 102, 0.1); }
.bg-dorado-suave { background-color: rgba(255, 215, 0, 0.15); }
.bg-gris-suave { background-color: rgba(134, 142, 150, 0.15); }

.text-azul-principal { color: #003366; }
.text-dorado-dark { color: #b89200; } /* Variante un poco más oscura del dorado para lectura del título */
.text-gris-oscuro { color: #555555; }

/* --- TEXTOS --- */
.mvv-card-title-formal {
    font-size: 1.3rem;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 12px;
}

.mvv-card-text-formal {
    color: #666666; /* Mismo color de .tarjeta-texto */
    line-height: 1.6;
    font-size: 1rem;
    margin: 0;
    text-align: justify;
}

/* --- LISTA DE VALORES --- */
.mvv-list-formal {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mvv-list-item-formal {
    color: #666666;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
}

/* Viñeta elegante: Guion medio que adopta tu tono dorado corporativo */
.mvv-list-item-formal::before {
    content: "—";
    color: #ffd700;
    font-weight: bold;
    margin-right: 10px;
    flex-shrink: 0;
}

/* Responsividad para móviles */
@media (max-width: 768px) {
    .mvv-card-formal {
        max-width: 100%; /* Toma todo el ancho en móviles como tu estructura */
    }
    .mvv-main-title-formal {
        font-size: 2rem;
    }
}


/* =========================================
   12. SECCIÓN DE VIDEOS (GRUPO CONSULTA)
   ========================================= */

.video-seccion {
    /* Fondo blanco para contrastar con el gris anterior */
    background-color: #ffffff;
    padding: 80px 20px;
}

.video-container {
    max-width: 1300px;
    margin: 0 auto;
}

/* --- ENCABEZADO --- */
.video-header {
    text-align: center;
    margin-bottom: 50px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.video-subtitle {
    color: #ffd700; /* Dorado institucional */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 14px;
    margin-bottom: 10px;
}

.video-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #003366; /* Azul Marino */
    margin: 0;
}

.video-linea {
    margin: 15px auto 20px auto;
    height: 3px;
    background-color: #003366;
    width: 60px;
    border-radius: 2px;
}

.video-texto {
    font-size: 1.1rem;
    color: #666666;
    line-height: 1.6;
}

/* --- GRID DE VIDEOS --- */
.video-grid {
    display: grid;
    /* Esto hace que si hay espacio haya 2 columnas, y en celular baje a 1 automáticamente */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
    margin-top: 40px;
}

/* --- TARJETA DE VIDEO --- */
.video-card {
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden; /* Corta las esquinas del video para que coincidan con el borde */
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.video-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.15);
    border-color: #b3c2d1;
}

/* --- TRUCO RESPONSIVO PARA IFRAMES DE YOUTUBE (16:9) --- */
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* Proporción exacta de 16:9 */
    height: 0;
    overflow: hidden;
    background-color: #000; /* Fondo negro por si tarda en cargar */
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* --- TEXTO DEBAJO DEL VIDEO --- */
.video-info {
    padding: 20px 25px;
    border-top: 3px solid #ffd700; /* Detalle dorado sutil debajo del video */
}

.video-card-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #003366;
    margin-bottom: 10px;
}

.video-card-text {
    font-size: 0.95rem;
    color: #666666;
    line-height: 1.5;
    margin: 0;
}

/* Responsividad extra */
@media (max-width: 768px) {
    .video-seccion {
        padding: 50px 20px;
    }
    .video-title {
        font-size: 2rem;
    }
}


/* ====== Estilos específicos para el apartado del director ====== */
.director-section {
    background-color: #f5f7fa;
    padding: 40px 20px;
}

.director-container {
    max-width: 900px;
    margin: 0 auto;
}

.director-title {
    font-size: 2rem;
    color: #003366;
    text-align: center;
    margin-bottom: 30px;
}

.director-profile {
    display: flex;
    align-items: center;
    gap: 20px;
}

.director-image {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #003366;
}

.director-info {
    flex: 1;
}

.director-name {
    font-size: 1.5rem;
    color: #222;
    margin-bottom: 10px;
}

.director-description {
    font-size: 1rem;
    line-height: 1.6;
    color: #555;
}


/* ====== Estilos específicos para el apartado de la empresa ====== */
.empresa-section {
    background-color: #f9fbfd;
    padding: 60px 20px;
}

.empresa-container {
    max-width: 1000px;
    margin: 0 auto;
}

.empresa-title {
    font-size: 2.5rem;
    color: #003366;
    text-align: center;
    margin-bottom: 35px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.empresa-content {
    text-align: justify;
}

.empresa-description {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333;
    max-width: 850px;
    margin: 0 auto;
}


/* =========================================
   2. BARRA DE NAVEGACIÓN (COLOR SÓLIDO FIJO)
   ========================================= */
.main-nav {
    background-color: #001f3e;
    width: 100%;
    position: sticky; /* Cambiado de fixed a sticky */
    top: 0;
    z-index: 2000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.mobile-nav {
    background-color: #001f3e;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.nav-wrapper {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 80px;
}

.nav-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    height: 80px;
    gap: 15px;
    padding-left: 10px;
    color: White;
}

.nav-brand img {
    height: 100px;
    width: auto;
    display: block;
}


/* =========================================
   13. SUBNAV SOBRE NOSOTROS (STICKY SCROLLSPY)
   ========================================= */

/* Desplazamiento suave general */
html {
    scroll-behavior: smooth;
}

/* Offset para que la barra no sobreponga el título al hacer clic */
main section[id^="sn-"] {
    scroll-margin-top: 140px; /* Compensación combinada (main-nav + subnav) */
}

/* Contenedor Flotante/Pegajoso del Submenú */
.sn-about-nav-wrapper {
    position: sticky;
    top: 80px; /* Se posiciona exactamente debajo del main-nav (que mide 80px) */
    z-index: 1500;
    background-color: #001830; /* Tono azul oscuro complementario a #001f3e */
    border-bottom: 2px solid #003366;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.sn-about-container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
}

.sn-about-menu-list {
    list-style: none;
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
}

/* Enlaces del submenú */
.sn-about-menu-item {
    display: block;
    padding: 14px 22px;
    color: #a0aec0; /* Gris inactivo legible */
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
}

.sn-about-menu-item:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.05);
}

/* Estado Activo: Se resalta en azul al llegar a la sección */
.sn-about-menu-item.active {
    color: #ffffff !important;
    background-color: #003366 !important; /* Azul principal de tu paleta */
    border-bottom: 3px solid #ffd700 !important; /* Detalle en dorado institucional */
    border-radius: 4px 4px 0 0;
    box-shadow: 0 2px 8px rgba(0, 51, 102, 0.4);
}

/* Ajustes para móviles */
@media (max-width: 768px) {
    .sn-about-nav-wrapper {
        top: 0; /* En caso de que el navbar colapse en responsive */
    }

    .sn-about-container {
        justify-content: flex-start;
        padding: 0 10px;
    }

    .sn-about-menu-list {
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: thin;
        scrollbar-color: #003366 #001830;
    }

    .sn-about-menu-item {
        padding: 10px 14px;
        font-size: 0.85rem;
    }
}