/* ** Estilos para el Hero Banner de Página Interior "Sobre Nosotros" ** */

/* La clase de utilidad z-index-10 debe estar en tu CSS */
.z-index-10 {
    z-index: 10;
    position: relative;
}

#page-header-about {
    min-height: 350px; 
    padding-top: 100px; 
    position: relative; /* Necesario para que el fondo absoluto se posicione */
    overflow: hidden;
    color: var(--color-light);
}

/* Contenedor de la Imagen de Fondo */
.header-bg-about {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Ruta de la imagen del equipo (image_ec03ce.jpg o image_ec1a50.jpg) */
    background: url(../../../public/imagen/fondos/fondo_servicios.jpeg) center center no-repeat;
    background-size: cover;
    z-index: 1; /* Fondo debajo de todo */
}

/* Overlay con degradado azul/verde para el efecto de color y oscurecimiento */
.header-bg-about::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Aumentamos la opacidad (0.9) para oscurecer la imagen y que el texto blanco/verde resalte MÁS */
    background: linear-gradient(90deg, 
                rgba(13, 71, 161, 0.9) 0%, /* Azul oscuro */
                rgba(76, 175, 80, 0.9) 100% /* Verde */
            );
    z-index: 5; /* El overlay está encima del fondo (z-index: 1) pero debajo del texto (z-index: 10) */
}

/* Título Principal (Sobre Nosotros) */
.header-title-green {
    font-size: 3rem;
    color: var(--color-secondary); /* Verde brillante */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra para resaltar */
}

/* Subtítulo (Apasionado...) */
.header-subtitle-white {
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--color-light);
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* Sombra para resaltar */
}

/* Responsividad */
@media (max-width: 767.98px) {
    #page-header-about {
        min-height: 250px;
        padding-top: 80px;
    }
    .header-title-green {
        font-size: 2.2rem;
    }
    .header-subtitle-white {
        font-size: 1.1rem;
    }
}

/* ** Estilos para la Sección: Cobertura Nacional ** */

/* Fondo Azul Oscuro para la parte superior */
.coverage-bg {
    background-color: var(--color-primary); /* #0d47a1 */
    padding-bottom: 5rem;
    position: relative;
    overflow: hidden;
}

/* --- Contadores (Stats) --- */
.stat-item {
    padding: 0 10px;
}
.stat-number {
    font-size: 3rem;
    font-weight: 800;
    color: var(--color-secondary); /* Verde de acento */
    margin-bottom: 0.2rem;
}
.stat-label {
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
}

/* --- Mapa y Llamada a la Acción --- */
.coverage-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--color-light); 
    margin-bottom: 1rem;
}

.coverage-btn-green {
    background-color: var(--color-secondary); /* Verde */
    border-color: var(--color-secondary);
    color: var(--color-primary); /* Texto en azul oscuro */
    font-weight: 700;
    padding: 10px 30px;
    border-radius: 5px;
}
.coverage-btn-green:hover {
    background-color: #388e3c; 
    border-color: #388e3c;
    color: var(--color-light); 
}

/* Contenedor del Mapa de Perú */
.map-container-peru {
    background-color: #fff;
    padding: 10px;
    border-radius: 8px;
    position: relative;
    /* Ajusta la altura si la imagen del mapa no tiene proporciones fijas */
}
.map-container-peru img {
    border-radius: 5px;
    opacity: 0.8; /* Hace que el mapa se vea un poco más tenue */
}
.map-overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-primary);
    background-color: rgba(255, 255, 255, 0.7);
    padding: 5px 10px;
    border-radius: 3px;
    pointer-events: none; /* No interfiere con clics */
}

/* Imagen de Trabajo (a la derecha) */
.coverage-work-image {
    height: 250px; /* Altura para el bloque de imagen */
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    /* Aplica un filtro azulado sobre la imagen para unificar el diseño */
}
.coverage-work-image img {
    object-fit: cover;
    filter: brightness(0.8) sepia(0.2) hue-rotate(190deg); /* Efecto para que se vea azulado como en la imagen */
}


/* --- Pestañas de Cobertura (Tabs) --- */

.coverage-tabs {
    border-bottom: 2px solid #ccc;
    flex-wrap: nowrap; /* Evita que las pestañas se envuelvan en desktop */
    overflow-x: auto; /* Permite scroll horizontal en móviles */
    -webkit-overflow-scrolling: touch;
    margin-bottom: -1px;
}

.coverage-tabs .nav-item {
    flex-shrink: 0; /* Asegura que no se reduzcan */
}

.coverage-tabs .nav-link {
    color: #6c757d;
    font-weight: 600;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 10px 15px;
    transition: color 0.3s, border-bottom-color 0.3s;
}

.coverage-tabs .nav-link:hover {
    color: var(--color-primary);
    border-bottom-color: rgba(13, 71, 161, 0.3);
}

.coverage-tabs .nav-link.active {
    color: var(--color-primary); /* Texto azul oscuro */
    background-color: transparent;
    border-color: var(--color-primary); /* Línea azul en el activo */
}

.coverage-tab-content {
    border-top: none !important;
    border-radius: 0 0 8px 8px;
    border-color: #dee2e6 !important;
}

.client-list {
    list-style-type: disc;
    padding-left: 20px;
}
.client-list li {
    font-size: 1rem;
    line-height: 1.8;
    color: #343a40;
}

/* Responsividad */
@media (max-width: 767.98px) {
    .coverage-bg {
        padding-bottom: 3rem;
    }
    .stat-number {
        font-size: 2.5rem;
    }
    .coverage-title {
        font-size: 1.8rem;
    }
    .coverage-work-image {
        height: 180px;
    }
    .coverage-tabs {
        justify-content: start; /* Alineación a la izquierda en móviles */
    }
}

/* ** Estilos para la Sección: Sobre Nosotros - Información Principal ** */

/* Variables de color (asumidas, si no las tienes en un :root, defínelas) */
:root {
    --color-primary: #0d47a1;     /* Azul Oscuro Principal */
    --color-secondary: #4CAF50;  /* Verde de Acento */
    --color-dark: #0c3c86;        /* Azul Acento Oscuro */
    --color-light: #fff;
    --font-family-sans: 'Arial', sans-serif; 
}

/* Clases de títulos que deben estar definidas o las replicamos por si acaso */
.section-title-dark {
    color: var(--color-primary); /* Azul oscuro */
    font-weight: 800;
    font-size: 2rem;
}

.section-overline-green {
    color: var(--color-secondary); /* Verde */
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    display: inline-block;
    border-bottom: 2px solid var(--color-secondary);
    padding-bottom: 5px;
    margin-bottom: 15px;
}

.mission-title {
    color: var(--color-primary);
    font-size: 1.5rem;
    font-weight: 700;
}

/* Barra verde decorativa para el texto de la misión */
.border-left-green {
    border-left: 3px solid var(--color-secondary);
    height: auto; /* Asegura que la barra se adapte al contenido */
    margin-right: 15px;
}

/* Contenedor de Imagen y Botón Brochure */
.about-image-container {
    padding-right: 20px; /* Espacio para que el botón se superponga */
}

.about-image-container img {
    height: 400px; /* Altura fija para un mejor diseño */
    object-fit: cover;
    width: 100%;
}

/* Botón Brochure Flotante */
.brochure-button-box {
    position: absolute;
    bottom: -20px; /* Sube un poco por encima del borde inferior */
    right: 0;
    background-color: var(--color-primary); /* Fondo azul */
    color: var(--color-light);
    padding: 15px 25px;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Sombra para el efecto flotante */
    z-index: 5; /* Asegura que esté por encima de la imagen */
}
.brochure-button-box a {
    color: #ffffff;
}
.brochure-button-box:hover {
    background-color: var(--color-dark);
}

.brochure-icon {
    font-size: 2rem;
}

.brochure-text {
    font-size: 0.9rem;
    font-weight: 500;
    color: #ffffff;
}

/* Badge de Experiencia */
.experience-badge {
    font-size: 1.1rem;
    font-weight: 600;
    color: #555;
}

.experience-icon {
    color: var(--color-secondary); /* Icono verde */
    font-size: 1.5rem;
}

/* Botones de Bootstrap (solo para referencia si no los tienes) */
.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-light);
    font-weight: 600;
    transition: background-color 0.3s, border-color 0.3s;
}
.btn-primary:hover {
    background-color: var(--color-dark);
    border-color: var(--color-dark);
}

#videoModal .modal-body{
    padding: 0;
}
/* Responsividad */
@media (max-width: 991.98px) {
    .about-image-container {
        padding-right: 0; /* Elimina el padding extra en móviles */
    }
    .brochure-button-box {
        position: static; /* Vuelve a posición normal en móviles */
        width: 100%;
        margin-top: 20px;
        border-radius: 5px;
        box-shadow: none; /* Elimina la sombra en móviles si no se desea */
    }
    .about-image-container img {
        height: auto; /* Altura automática en móviles */
    }
    .mission-title, .section-title-dark, .section-overline-green {
        text-align: center;
    }
    .d-flex.mb-4 { /* Contenedor de la misión */
        flex-direction: column;
        align-items: center;
    }
    .border-left-green {
        height: 3px; /* Se convierte en barra horizontal */
        width: 60px;
        border-left: none;
        border-bottom: 3px solid var(--color-secondary);
        margin-right: 0;
        margin-bottom: 15px;
    }
    .d-flex.align-items-center.justify-content-between {
        flex-direction: column;
    }
    .experience-badge {
        margin-bottom: 20px;
    }
    .btn-primary {
        width: 100%;
        max-width: 300px;
    }
}

/* ** Estilos para la Sección: Especialistas - Misión, Visión y Video ** */

#specialists-section {
    position: relative;
    padding-top: 5rem;
    padding-bottom: 5rem;
    color: var(--color-light); 
}

/* --- Fondo de Imagen y Overlay --- */
.specialists-bg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Reemplaza 'imagen-equipo-oficina.jpg' con la imagen de fondo (image_eced02.jpg) */
    background: url(../../../public/imagen/fondos/fondo_servicios.jpeg) center center no-repeat;
    background-size: cover;
    background-attachment: scroll; /* Puedes probar con 'fixed' si quieres un efecto parallax */
    z-index: 1; 
}

/* Overlay Azul Oscuro con Alta Opacidad */
.specialists-bg-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(13, 71, 161, 0.9); /* Azul oscuro (var(--color-primary)) con 90% de opacidad */
    z-index: 5;
}

/* --- Títulos --- */
.section-overline-white {
    color: var(--color-light); /* Texto blanco */
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    display: inline-block;
    border-bottom: 2px solid var(--color-secondary); /* Línea verde */
    padding-bottom: 5px;
    margin-bottom: 15px;
}
.specialists-title {
    font-size: 2.2rem;
    font-weight: 800;
}

/* --- Tarjeta de Video --- */
.video-card-specialist {
    height: 380px; /* Altura fija para el video */
    border-radius: 8px;
    overflow: hidden;
    z-index: 10;
    position: relative; /* Necesario para que el overlay funcione */
}
.video-card-specialist img {
    filter: brightness(0.8); /* Oscurecer un poco el thumbnail */
}
.video-overlay-specialist {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Degradado oscuro para el video, similar al fondo de la imagen original */
    background: linear-gradient(135deg, rgba(13, 71, 161, 0.6) 0%, rgba(13, 71, 161, 0.9) 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--color-light);
    cursor: pointer;
}

.video-title-specialist {
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 15px;
}

.play-button-specialist {
    width: 60px;
    height: 60px;
    background-color: var(--color-secondary); /* Círculo de play verde */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    transition: transform 0.3s;
}

/* --- Tarjeta de Misión/Visión --- */
.text-card-mission {
    background-color: var(--color-light); /* Fondo blanco */
    border-radius: 8px;
    z-index: 10;
    min-height: 380px; /* Misma altura que el video para alineación */
    text-align: left;
}
.mission-icon-blue {
    color: var(--color-primary); /* Icono azul oscuro */
    font-size: 1.8rem;
    padding-top: 5px;
}

.mission-title-blue, .vision-title-blue {
    color: var(--color-primary);
    font-weight: 700;
    font-size: 1.3rem;
}

.mission-text-dark, .vision-text-dark {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Responsividad */
@media (max-width: 991.98px) {
    .specialists-title {
        font-size: 1.6rem;
    }
    .video-card-specialist {
        height: 300px;
    }
    .text-card-mission {
        min-height: auto;
    }
}

/* ** Estilos para la Sección: Homologaciones y Registros Legales ** */

#certifications-section {
    background-color: #fff; /* Fondo blanco */
}

/* --- Logo de Homologación (Columna Izquierda) --- */
.sgs-logo-box {
    width: 100%;
    border: 1px solid #ccc; /* Borde fino alrededor del logo */
    background-color: #fff;
    border-radius: 4px;
}
.sgs-logo-box img {
    height: auto;
    width: 100%;
    display: block;
}

.sgs-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-primary); /* Azul oscuro */
    margin-bottom: 0;
}
.sgs-subtitle {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 0;
}

/* --- Lista de Registros (Columna Derecha) --- */
.registry-main-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #343a40;
    line-height: 1.4;
}

.registry-code {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-primary); /* Código en azul para destacar */
    margin-left: 10px;
}

.registry-list {
    list-style: none; /* Elimina las viñetas predeterminadas */
    padding-left: 0;
}

.registry-list li {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 15px;
    padding-left: 20px;
    position: relative;
}

/* Simula la viñeta de punto o cuadrado al inicio del texto */
.registry-list li::before {
    content: "\2022"; /* Carácter de viñeta (punto o •) */
    color: var(--color-secondary); /* Color verde para la viñeta */
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
    font-size: 1.2rem;
    position: absolute;
    left: 0;
    top: 0;
}


/* Responsividad */
@media (max-width: 767.98px) {
    .registry-main-title {
        font-size: 1.2rem;
        text-align: center;
    }
    .registry-code {
        margin-left: 0;
        display: block;
        text-align: center;
    }
    .registry-list li {
        font-size: 0.85rem;
        margin-bottom: 10px;
    }
    .sgs-logo-box {
        margin-left: auto;
        margin-right: auto;
    }
    .sgs-title, .sgs-subtitle {
        text-align: center;
    }
}

/* ** Estilos para la Sección: Llamada a la Acción (CTA) ** */

#cta-section {
    /* Altura que asegura que el contenido se vea bien */
    min-height: 400px; 
    position: relative;
    overflow: hidden;
    color: var(--color-light);
    padding: 60px 0; /* Relleno general si la altura no es suficiente */
}

/* --- Fondo de Imagen y Overlay de Degradado --- */
.cta-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; 
    
    /* 1. Imagen de Fondo del Trabajador (Asegúrate de cambiar la URL) */
    background: url(../../../public/imagen/fondos/fondo_servicios.jpeg) center center no-repeat; 
    background-size: cover;
    background-attachment: scroll; 
    
    /* 2. Degradado de Color (Azul Oscuro a Verde/Amarillo) */
    /* El degradado se aplica como un segundo fondo o usando ::before, aquí usamos la técnica de fondo con mezcla */
    background-image: linear-gradient(90deg, 
                        rgba(13, 71, 161, 0.85) 0%, /* Azul (var(--color-primary)) - Izquierda */
                        rgba(76, 175, 80, 0.7) 100% /* Verde (var(--color-secondary)) - Derecha */
                        ), 
                      url(../../../public/imagen/fondos/fondo_servicios.jpeg); /* Repite la imagen de fondo */
    background-blend-mode: multiply; /* Multiplica el color por la imagen para el efecto de tinte */
}

/* --- Texto y Botón --- */
.cta-title {
    font-size: 2.2rem;
    line-height: 1.2;
    font-weight: 800;
    color: var(--color-light);
}

.cta-subtitle {
    font-size: 1.1rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
}

/* Botón Verde (CTA) */
.btn-cta-green {
    background-color: var(--color-secondary); /* Verde principal */
    border-color: var(--color-secondary);
    color: #ffffff; /* Texto azul oscuro */
    font-weight: 700;
    padding: 12px 35px;
    border-radius: 5px;
    transition: all 0.3s;
}
.btn-cta-green:hover {
    background-color: #388e3c; /* Verde más oscuro */
    border-color: #388e3c;
    color: var(--color-light); /* Texto blanco al pasar el ratón */
}

/* Z-Index del Contenedor (ya definido previamente, pero repetimos para claridad) */
.z-index-10 {
    z-index: 10;
    position: relative;
}

/* Responsividad */
@media (max-width: 767.98px) {
    #cta-section {
        min-height: 350px;
        text-align: center;
    }
    .cta-title {
        font-size: 1.8rem;
    }
    .col-lg-8.col-md-10.mx-auto.mx-md-0 {
        margin: 0 auto !important; /* Centra el contenido en móviles */
    }
}