/* ** Archivo: assets/css/style.css ** */

/* Altura de la sección para que ocupe toda la pantalla */
#hero-section {
    min-height: 100vh; /* Asegura que cubra al menos el 100% del alto */
    overflow: hidden; /* Evita barras de desplazamiento no deseadas */
}

/* --- Carousel de Fondo --- */
#heroCarousel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Para que esté en la capa de fondo */
}

/* Imágenes del Carousel - Importante para que cubran todo el espacio */
.hero-bg-image {
    height: 100vh;
    object-fit: cover; /* Asegura que la imagen cubra todo sin distorsionarse */
    filter: brightness(0.4); /* Ajusta el brillo para que el texto resalte */
}

/* Capa de Oscurecimiento (Overlay) para el efecto azul-verde oscuro de la imagen */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradiente con los colores oscuros de la imagen */
    background: linear-gradient(135deg, rgba(0, 51, 102, 0.7) 0%, rgba(0, 102, 51, 0.7) 100%);
    opacity: 0.8; /* Ajusta la opacidad si es necesario */
}

/* --- Contenido Principal (Texto y Botones) --- */
.hero-content {
    position: relative;
    z-index: 10; /* Para que esté por encima del carousel */
    padding-top: 200px; /* Espacio para el header */
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Para empujar la fila inferior abajo */
}

/* Estilo para los bloques de información derecha */
.info-block {
    background-color: rgba(26, 68, 88, 0.85); /* Fondo oscuro semitransparente */
    border-radius: 5px;
    backdrop-filter: blur(5px); /* Efecto de desenfoque opcional */
    color: #fff;
    border-left: 5px solid #4CAF50; /* Línea verde de la imagen */
}

.info-icon {
    font-size: 2rem;
    color: #4CAF50; /* Color verde */
}

/* --- Fila Inferior (Logos y Video) --- */
.bottom-row {
    margin-bottom: 2rem; /* Espacio en la parte inferior */
    width: 100%;
}

/* Estilos de los Logos Circulares */
.logo-circle-container {
    display: flex;
    gap: 15px; /* Espacio entre logos */
    flex-wrap: wrap; /* Para responsividad, envuelve en pantallas pequeñas */
}

.logo-circle {
    width: 120px;
    height: 120px;
    background-color: #fff; /* Fondo blanco */
    border-radius: 10px; /* Bordes redondeados sutiles */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Ajuste de imágenes dentro del círculo */
.logo-circle img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Estilo para el contenedor de video (Bloque azul oscuro) */
.video-container {
    color: #fff;
    text-align: right;
}

.video-title {
    font-size: 0.9rem;
    margin-bottom: 5px;
    font-weight: 500;
}

.video-placeholder {
    width: 250px; /* Ajusta el ancho según la imagen, pero sigue el 100% en responsive */
    background-color: #1a4458; /* Color similar al bloque de la imagen */
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    border: 1px solid #4CAF50; /* Borde sutil del color verde */
}

.video-placeholder img {
    opacity: 0.7;
    transition: opacity 0.3s;
}

.video-placeholder:hover img {
    opacity: 1;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    padding: 10px 15px;
    line-height: 1;
    color: #fff;
    transition: background-color 0.3s;
}

.video-placeholder:hover .play-button {
    background-color: rgba(0, 0, 0, 0.7);
}

/* Ajustes Responsivos */
@media (max-width: 991.98px) {
    /* Oculta los bloques de información y el video en tabletas y móviles */
    .d-lg-block {
        display: none !important;
    }

    /* Centra el contenido principal en pantallas pequeñas */
    .hero-content .row {
        text-align: center;
        justify-content: center;
    }

    /* Centra los botones */
    .d-flex.flex-column.flex-sm-row {
        justify-content: center;
    }

    /* Centra los logos */
    .logo-circle-container {
        justify-content: center;
    }
}

/* ** Estilos para la sección Sobre Nosotros ** */

/* Ajuste general de color de texto */
#about-us .text-secondary {
    color: #6c757d !important; /* Mantiene el color estándar de texto secundario de Bootstrap */
    line-height: 1.7;
}

/* --- Título principal "Sobre Nosotros" --- */
.about-title {
    font-weight: 700;
    color: #343a40; /* Color oscuro para el título */
    position: relative;
    padding-bottom: 10px; /* Espacio para el separador */
}

/* Línea Separadora Verde bajo el título */
.about-title .title-separator {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px; /* Ancho de la línea */
    height: 3px;
    background-color: #4CAF50; /* El color verde principal de la web */
}

/* Título de la Misión */
.mission-title {
    font-weight: 600;
    color: #343a40;
    margin-top: 20px;
    margin-bottom: 10px;
}

/* --- Bloque de Descarga de Brochure --- */
.brochure-link {
    display: block;
    background-color: #007bff; /* Azul primario de Bootstrap (o ajusta al azul oscuro de la imagen) */
    background-color: #0d47a1; /* Azul más oscuro (similar al de la imagen) */
    border-radius: 5px;
    text-align: left;
    transition: background-color 0.3s;
}

.brochure-link:hover {
    background-color: #0c3c86;
    color: #fff;
    text-decoration: none;
}

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

/* --- Bloque de Años de Experiencia --- */
.experience-block {
    color: #343a40;
}

.experience-icon {
    color: #4CAF50; /* Icono en color verde */
    font-size: 1.5rem;
}

/* Botón "Más de Nosotros" */
.more-info-btn {
    background-color: #0d47a1; /* Azul oscuro */
    border-color: #0d47a1;
    font-weight: 600;
}

.more-info-btn:hover {
    background-color: #0c3c86;
    border-color: #0c3c86;
}

/* --- Responsividad y Ajustes de Imagen --- */
.about-image-container img {
    /* Pequeño ajuste para mejorar el aspecto visual */
    border: 1px solid #ddd;
}

/* Ajuste de márgenes en móviles (para separar bloques) */
@media (max-width: 991.98px) {
    .about-text-content {
        padding-left: 15px;
        padding-right: 15px;
    }
    .experience-block {
        margin-right: 0 !important;
        margin-bottom: 1rem !important;
    }
}

/* ** Estilos para la sección de Servicios ** */

#services-section {
    position: relative;
    overflow: hidden; /* Asegura que la sección contenedora se ajuste */
    min-height: 750px; /* Altura mínima para que el fondo se vea bien */
}

/* Contenedor de Fondo Fijo */
.services-bg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Reemplaza 'service-bg.jpg' con tu imagen real */
    background: url(../../../public/imagen/fondos/fondo_servicios.jpeg) center center no-repeat;
    background-size: cover;
    background-attachment: fixed; /* ¡Efecto de fondo fijo! */
    z-index: 1; 
}

/* Capa de Oscurecimiento y Tinte (Similar al Carousel inicial) */
.overlay-services {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradiente con los colores oscuros de la imagen de ejemplo (azul-verde) */
    background: linear-gradient(135deg, rgba(0, 51, 102, 0.75) 0%, rgba(0, 102, 51, 0.75) 100%);
    opacity: 0.9;
}

/* Asegura que el contenido esté encima del fondo */
#services-section .container {
    position: relative;
    z-index: 10;
}

/* --- Títulos y Botones del Encabezado --- */
.service-subtitle {
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
    position: relative;
    padding-bottom: 5px;
}

/* Separador verde bajo el subtítulo */
.service-subtitle .subtitle-separator {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background-color: #4CAF50; /* Verde */
}

.service-title {
    color: #fff;
    font-weight: 700;
}

.quote-btn {
    background-color: #4CAF50; /* Verde */
    border-color: #4CAF50;
    font-weight: 600;
}

.quote-btn:hover {
    background-color: #388E3C;
    border-color: #388E3C;
}

/* --- Estilos de las Tarjetas de Servicio --- */
.service-card {
    border-radius: 5px;
    transition: transform 0.3s, box-shadow 0.3s;
    min-height: 250px; /* Altura mínima para que se vea bien */
}

.service-card:hover {
    transform: translateY(-5px); /* Pequeño efecto hover */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important;
}

/* Tarjeta de Fondo Azul Oscuro */
.dark-blue-card {
    background-color: #0d47a1; /* Azul muy oscuro de la imagen */
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-blue-card .card-text {
    color: rgba(255, 255, 255, 0.8);
}

/* Tarjeta de Fondo Blanco */
.light-card {
    background-color: #fff;
    color: #343a40;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.light-card .card-text {
    color: #6c757d;
}

/* Iconos de las tarjetas blancas */
.service-icon-top, .service-icon-bottom {
    position: absolute;
    font-size: 3rem;
    color: #4CAF50; /* Verde */
    opacity: 0.2;
}

.service-icon-top {
    top: 15px;
    right: 15px;
}

.service-icon-bottom {
    bottom: 15px;
    left: 15px;
}

/* Estilo para el enlace 'Saber Más' de las tarjetas blancas */
.light-card a.text-success {
    color: #4CAF50 !important;
}

/* Responsividad: Centrar el botón de cotización en móviles */
@media (max-width: 767.98px) {
    .quote-btn {
        display: block;
        width: 100%;
    }
}

/* ** Estilos para la sección de Video e Información ** */

/* --- Contenedor Principal del Video (Clickable Area) --- */
.video-hero-container {
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    cursor: pointer;
}

.video-thumb-image {
    display: block;
    filter: brightness(0.6); /* Oscurece la imagen de fondo */
    transition: filter 0.3s;
}

/* Efecto Hover: ilumina ligeramente */
.video-hero-container:hover .video-thumb-image {
    filter: brightness(0.7);
}

/* --- Capa de Superposición y Texto (Overlay) --- */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Fondo azul semi-transparente similar al de la imagen */
    background-color: rgba(13, 71, 161, 0.75); 
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
}

.video-title-text {
    font-size: 1.5rem;
    font-weight: 500;
}

.video-main-text {
    font-size: 2rem;
    color: #4CAF50; /* Verde para el texto principal */
    line-height: 1.2;
}

/* --- Botón de Reproducción Grande --- */
.play-button-large {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    background-color: rgba(255, 255, 255, 0.2);
    border: 3px solid #fff;
    border-radius: 50%;
    padding: 15px 20px;
    line-height: 1;
    transition: background-color 0.3s;
}

.video-hero-container:hover .play-button-large {
    background-color: rgba(255, 255, 255, 0.4);
}

/* --- Estilos para las Tarjetas de Beneficios --- */
.benefit-card {
    border-radius: 5px;
}

/* Tarjeta Azul (Experiencia Comprobada) */
.dark-blue-benefit {
    background-color: #0d47a1; /* Azul oscuro */
    color: #fff;
}

.benefit-icon-white {
    font-size: 1.5rem;
    color: #fff;
}

/* Tarjeta Blanca (Enfoque Personalizado) */
.light-benefit {
    background-color: #fff;
    border: 1px solid #eee;
    color: #343a40;
}

.benefit-icon-green {
    font-size: 1.5rem;
    color: #4CAF50; /* Verde */
}

/* Ajustes de responsividad */
@media (max-width: 767.98px) {
    .video-main-text {
        font-size: 1.5rem;
    }
}

/* ** Estilos para la sección de Estadísticas y Cobertura ** */

#stats-coverage-section {
    background-color: #0d47a1; /* Azul oscuro primario */
}

/* --- Estadísticas (Factoids) --- */
.stat-item {
    padding: 10px;
}

.stat-number {
    font-size: 2.5rem;
    color: #fff;
}

.stat-label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

/* --- Cobertura Nacional (Mapa e Imagen) --- */
.coverage-title {
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 15px;
}

.coverage-btn {
    background-color: #4CAF50; /* Verde */
    border-color: #4CAF50;
    font-weight: 600;
}

.coverage-btn:hover {
    background-color: #388E3C;
    border-color: #388E3C;
}

/* Imagen del Mapa - Ajuste de transparencia si es necesario */
.map-image {
    max-width: 300px; /* Ajusta el tamaño máximo del mapa en desktop */
    opacity: 0.8;
}

/* Imagen de Proyecto */
.project-image-container {
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    /* Ajuste para que la imagen se vea sobrepuesta al mapa si es necesario */
    /* z-index: 2; */ 
}

.project-image {
    filter: brightness(0.8) grayscale(0.2);
}


/* --- Pestañas de Clientes/Proyectos --- */

/* Estilo de la Navegación (Pills/Tabs) */
.client-tabs .nav-link {
    background-color: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    padding: 0.5rem 1rem;
    border-radius: 0;
    transition: all 0.3s;
    font-weight: 500;
}

/* Pestaña activa */
.client-tabs .nav-link.active {
    color: #fff;
    background-color: transparent;
    border-bottom: 3px solid #4CAF50; /* Línea verde de la pestaña activa */
    font-weight: 700;
}

.client-tabs .nav-link:hover:not(.active) {
    color: #fff;
}

/* Contenido de la Pestaña */
.client-tab-content {
    background-color: rgba(255, 255, 255, 0.1); /* Fondo sutil para el contenido */
    border-radius: 0 5px 5px 5px;
    border-top: 2px solid #4CAF50; /* Borde superior verde para el contenido */
}

.client-list {
    font-size: 1rem;
    line-height: 1.8;
}

.client-list li {
    color: #fff;
}

/* Responsividad para centrar contenido en móvil */
@media (max-width: 767.98px) {
    .coverage-title {
        text-align: center;
    }
    .coverage-btn {
        display: block;
        margin: 0 auto 1rem auto;
    }
    /* Centrar la lista de pestañas en móvil */
    .client-tabs {
        justify-content: center;
        flex-wrap: wrap;
    }
    .client-tabs .nav-item {
        margin-bottom: 5px;
    }
}

/* ** Estilos para la sección de Clientes ** */

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

/* Título de la sección */
.clients-title {
    color: #0d47a1; /* Azul oscuro */
    font-weight: 700;
    font-size: 2.2rem;
}

/* Contenedor del logo para centrar */
.client-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 150px; /* Ya lo tienes, ¡bien! */
}

/* Estilo principal del contenedor del logo (Borde redondeado) */
.logo-box {
    width: 100%;
    max-width: 140px; /* Ancho máximo para el logo */
    height: 120px;
    padding: 10px;
    background-color: #fff;
    border-radius: 10px;
    border: 3px solid transparent;
    object-fit: contain; /* Asegura que la imagen quepa dentro de su caja */
    transition: all 0.3s;
}

/* Estilos de borde/fondo específicos según la imagen */

/* Borde Verde */
.logo-green-border {
    border-color: #4CAF50; 
}

/* Borde Azul */
.logo-blue-border {
    border-color: #0d47a1; 
}

/* Fondo Azul Oscuro (para el logo CILTEST) */
.logo-dark-bg {
    border-color: #0d47a1;
}

/* Responsividad: Ocultar controles y reducir tamaño en móviles */
@media (max-width: 767.98px) {
    .client-logo-container {
        height: 100px; /* Reduce la altura en móvil */
        padding: 5px;
    }
    
    .logo-box {
        max-width: 100px;
        height: 80px;
    }

    .clients-title {
        font-size: 1.8rem;
    }
}

/* ** Estilos para la sección de Contacto ** */

/* --- Bloque Superior (Slogan / Formulario) --- */
.contact-hero-container {
    position: relative;
    min-height: 400px; 
    background: url(../../../public/imagen/fondos/fondo_servicios.jpeg) center center no-repeat;
    background-size: cover;
    background-attachment: scroll; /* No fixed, ya que es un fondo de sección */
    display: flex;
    align-items: center;
}

/* Overlay Azul Oscuro y Opaco */
.overlay-contact {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Azul muy oscuro, similar al resto de la web */
    background-color: rgba(13, 71, 161, 0.8); 
    z-index: 5; 
}

/* Contenido (Texto y Botón) */
.contact-hero-container .container {
    position: relative;
    z-index: 10;
}

.contact-slogan-title {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

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

.quote-btn-white {
    background-color: #fff;
    border-color: #fff;
    color: #0d47a1; /* Texto azul oscuro */
    font-weight: 600;
}

.quote-btn-white:hover {
    background-color: #f0f0f0;
    border-color: #f0f0f0;
    color: #0d47a1;
}


/* --- Bloque Inferior (Info y Especialistas) --- */

/* Estilos de la Card de Contacto (Flotante) */
.contact-card {
    background-color: #0c3c86; /* Azul ligeramente más oscuro que el fondo para destacar */
    border-radius: 5px;
    border: none;
}

.card-title-contact {
    font-weight: 700;
    color: #fff;
}

.contact-list li {
    font-size: 0.95rem;
    margin-bottom: 8px;
    color: #fff;
}

.contact-icon {
    color: #4CAF50; /* Iconos en color verde */
    font-size: 1.2rem;
    width: 25px; /* Para alinear el texto */
    text-align: center;
}

/* Títulos de Especialistas */
.specialist-subtitle {
    font-weight: 500;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

.subtitle-separator-white {
    width: 60px;
    height: 2px;
    background-color: #fff;
}

/* --- Acordeón (Especialistas) --- */
.specialist-card {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    background-color: transparent;
}

.specialist-header {
    background-color: rgba(255, 255, 255, 0.1);
    border-bottom: none;
    padding: 0;
}

.specialist-header .btn-link {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
    /* Asegura que el botón se vea como una tarjeta */
    border-radius: 5px;
}

/* Color del contenido del acordeón */
.specialist-body {
    background-color: #fff;
    color: #343a40 !important; /* Texto oscuro sobre fondo blanco */
    border-radius: 0 0 5px 5px;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Flecha del acordeón */
.accordion-arrow {
    transition: transform 0.3s;
}

.specialist-header .btn-link[aria-expanded="true"] .accordion-arrow {
    transform: rotate(180deg);
}

/* ** Estilos para la sección de Testimonios ** */

#testimonials-section {
    position: relative;
    overflow: hidden; 
    min-height: 700px; /* Altura mínima para que el fondo se vea bien */
    display: flex;
    align-items: center; /* Centra verticalmente el contenido */
}

/* Contenedor de Imagen de Fondo Fija (Parallax) */
.testimonials-bg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Reemplaza 'testimonials-bg.jpg' con tu imagen real de fondo */
    background: url(../../../public/imagen/fondos/fondo_servicios.jpeg) center center no-repeat;
    background-size: cover;
    background-attachment: fixed; /* ¡Efecto de fondo fijo! */
    z-index: 1; 
}

/* Capa de Oscurecimiento y Tinte Azulado/Verdoso */
.overlay-testimonials {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradiente con los colores oscuros de la imagen de ejemplo (azul-verde) */
    background: linear-gradient(145deg, rgba(0, 51, 102, 0.75) 0%, rgba(60, 150, 60, 0.7) 100%);
    opacity: 0.9;
    z-index: 5;
}

/* Asegura que el contenido esté encima del fondo */
#testimonials-section .container {
    position: relative;
    z-index: 10;
}

/* --- Títulos y Botones --- */
.testimonials-title {
    color: #fff;
    font-size: 2.5rem;
}

.testimonials-subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
}

.testimonials-btn {
    /* El botón se ve oscuro en la imagen, sobre el fondo claro */
    background-color: #0d47a1; 
    border-color: #0d47a1;
    color: #fff;
    font-weight: 600;
}

.testimonials-btn:hover {
    background-color: #0c3c86; 
    border-color: #0c3c86;
}

/* --- Tarjetas de Testimonios --- */
.testimonial-card {
    background-color: #0d47a1; /* Azul oscuro fuerte, como en la imagen */
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.stars i {
    color: #ffc107; /* Estrellas amarillas */
    font-size: 1rem;
}

.quote-text {
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

.quote-author {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    border-bottom: 2px solid #4CAF50; /* Línea de separación verde */
    display: inline-block;
    padding-bottom: 5px;
}

.quote-role {
    color: rgba(255, 255, 255, 0.7);
}

/* Ajustes de responsividad */
@media (max-width: 991.98px) {
    .testimonials-title {
        text-align: center;
    }
    .testimonials-subtitle {
        text-align: center;
    }
    .testimonials-btn {
        display: block;
        margin: 0 auto 30px auto;
        width: 100%;
        max-width: 300px;
    }
}
#videoModal .modal-body{
    padding: 0;
}