/* ** 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: Elaboración de Estudios Técnicos ** */

/* --- Fila Superior (Imagen y Resumen) --- */
.section-overline-green-service {
    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;
}

.service-title-dark {
    color: var(--color-primary); /* Azul oscuro */
    font-weight: 800;
    font-size: 2rem;
}

.service-description {
    font-size: 1.05rem;
    line-height: 1.6;
}

.service-image-box {
    height: 380px; /* Altura fija para la imagen */
    border-radius: 8px;
}

.service-image-box img {
    object-fit: cover;
}

/* Botón CTA Verde */
.btn-service-green {
    background-color: var(--color-secondary); /* Verde */
    border-color: var(--color-secondary);
    color: var(--color-light); /* Texto blanco */
    font-weight: 600;
    padding: 10px 30px;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.btn-service-green:hover {
    background-color: #388e3c; /* Verde más oscuro */
    border-color: #388e3c;
}

/* --- Fila Inferior (Tarjetas) --- */

/* Tarjeta de Información Azul */
.info-card-blue {
    background-color: var(--color-primary); /* Fondo azul oscuro */
    color: var(--color-light);
    border-radius: 8px;
    min-height: 250px; /* Altura para igualar el video */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.info-card-title-white {
    font-size: 1.4rem;
    font-weight: 700;
}

.info-card-text-white {
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

/* Tarjeta de Video Pequeña (Reutilizando estilos de Video) */
.video-card-small {
    height: 250px; /* Misma altura que la tarjeta azul */
    border-radius: 8px;
    overflow: hidden;
}

.video-overlay-small {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Overlay azul semi-transparente para el video */
    background: rgba(13, 71, 161, 0.8); 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--color-light);
    cursor: pointer;
}

.video-title-small {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.play-button-small {
    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;
}
.play-button-small:hover {
    transform: scale(1.1);
}


/* Responsividad */
@media (max-width: 991.98px) {
    .service-image-box {
        height: 300px; 
    }
    .service-title-dark {
        font-size: 1.8rem;
    }
    .info-card-blue, .video-card-small {
        min-height: 200px;
        height: auto;
    }
    .info-card-title-white {
        font-size: 1.2rem;
    }
}

/* ** CSS para Diseño 1: Extremos Apegados ** */

.detailed-extreme-wrapper {
    /* Altura fija reducida para dar un look más compacto y estirado */
    min-height: 550px; 
    max-height: 550px;
}

.detailed-list-extreme {
    /* Eliminamos el padding vertical para pegar el contenido arriba y abajo */
    padding-top: 20px !important; 
    padding-bottom: 20px !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribuye el espacio entre el contenido */
}

/* Imagen del Trabajador - La altura se ajusta al nuevo tamaño del wrapper */
.worker-image-final {
    height: 550px;
}

/* Contenedor de las tarjetas flotantes */
.detailed-extreme-cards {
    /* Aquí se ajusta la posición de las tarjetas para que estén pegadas */
}

/* Tarjeta Flotante Inferior: Pegada al borde inferior */
.floating-card-bottom {
    bottom: 20px; /* Mínimo margen inferior */
    right: 5%; 
    width: 480px; 
}

/* ** CSS para Diseño IDÉNTICO: RÉPLICA FINAL (image_f01362.jpg) ** */

:root {
    --color-primary: #0d47a1;     /* Azul Oscuro Principal */
    --color-secondary: #4CAF50;  /* Verde de Acento */
    --color-light: #fff;
    --section-final-height: 600px; 
    --image-width-ratio: 45%; /* La imagen ocupa aproximadamente el 45% del ancho total de la sección */
}

/* --- Estructura General y Fondos --- */
#detailed-services-ultimate {
    overflow: hidden; 
    background-color: var(--color-primary); /* Fondo de la sección por defecto (azul) */
}

/* Contenedor azul de fondo (se asegura de cubrir el 100% del ancho) */
.full-width-blue-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-primary); 
}

/* El contenido (lista y tarjetas) se centra con el container de Bootstrap */
.detailed-content-container {
    height: 100%;
}

/* --- Posicionamiento de la IMAGEN ABSOLUTA --- */
.absolute-worker-image {
    position: absolute;
    top: 0;
    /* La imagen empieza al 50% del ancho del viewport y va hasta el final */
    left: 50%; 
    width: var(--image-width-ratio); 
    height: 100%;
    z-index: 5; /* Por encima del fondo azul */
}
.absolute-worker-image img {
    object-fit: cover;
    filter: brightness(0.9) grayscale(0.1); 
    /* La clave aquí es el desplazamiento horizontal dentro de la imagen, 
       pero object-fit cover es la mejor opción estándar */
}

/* --- Columna Izquierda: Lista de Servicios --- */
.detailed-list-col {
    /* La lista requiere un padding interno para el espacio vertical */
    padding-top: 50px !important;
    padding-bottom: 50px !important;
    z-index: 10; /* Debe estar por encima de la imagen si se superpone */
}
.services-list-title {
    color: var(--color-secondary); 
}
.detailed-service-list li::before {
    color: var(--color-secondary); 
}

/* --- Tarjetas Flotantes (Derecha) --- */
.detailed-cards-col {
    z-index: 15; /* Las tarjetas deben estar encima de todo */
}
#videoModal .modal-body{
    padding: 0;
}
/* Tarjeta Flotante Superior: Confía en Consultea */
.ultimate-card-top {
    position: absolute;
    top: 30px;
    left: 5%;
    width: 600px; 
    background-color: var(--color-light); 
    border-radius: 8px;
}

/* Tarjeta Flotante Inferior: Nuestros Servicios Incluyen */
.ultimate-card-bottom {
    position: absolute;
    width: 500px; 
    background-color: var(--color-light); 
    border-radius: 8px;
}

.floating-card-title-blue {
    color: var(--color-primary);
    font-weight: 700;
    font-size: 1.3rem;
}
.benefit-number {
    color: var(--color-primary); 
}

/* --- Responsividad (Ocultar el diseño complejo en móvil) --- */
@media (max-width: 991.98px) {
    #detailed-services-ultimate {
        min-height: auto;
        max-height: none;
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .absolute-worker-image, .detailed-cards-col {
        display: none !important; 
    }
    .detailed-list-col {
        width: 100%; 
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    /* Aquí se mostraría el contenido de las tarjetas flotantes en un formato apilado normal para móvil si se requiere */
}

/* ** Estilos para la Sección: Confianza y Beneficios ** */

:root {
    --color-primary: #0d47a1;     /* Azul Oscuro */
    --color-secondary: #4CAF50;  /* Verde de Acento */
    --color-dark: #333;
    --color-light: #fff;
}

/* --- Placeholders y Títulos --- */
.image-placeholder-box {
    /* Simulando el recuadro que se ve en la imagen para el contenedor de la foto */
    border: 1px solid #ccc; /* Puedes quitar este borde o hacerlo más sutil */
    height: 450px; /* Altura fija para la imagen */
    width: 100%;
    overflow: hidden;
    /* Estilo del recuadro rojo que solicitaste (Opcional, solo para identificar el área) */
    /* border: 2px solid red; */ 
}
.image-placeholder-box img {
    object-fit: cover;
}

.section-overline-blue-service {
    color: var(--color-secondary); /* Verde */
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    display: block;
    border-bottom: 2px solid var(--color-primary); /* Subrayado azul */
    padding-bottom: 5px;
    width: fit-content;
    margin-bottom: 15px;
}

.service-title-dark-blue {
    color: var(--color-primary); /* Azul oscuro */
    font-weight: 700;
    font-size: 2rem;
}

.service-description-text {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #6c757d;
}

/* --- Beneficios (Iconos y Texto) --- */
.benefit-item-small {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.benefit-icon-green {
    color: var(--color-secondary); /* Verde */
    font-size: 1.8rem;
}

.benefit-text-dark {
    font-weight: 600;
    color: var(--color-dark);
}

/* Botón CTA Verde (Reutilizado del primer ejemplo) */
.btn-service-green {
    background-color: var(--color-secondary); /* Verde */
    border-color: var(--color-secondary);
    color: var(--color-light); 
    font-weight: 600;
    padding: 10px 30px;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.btn-service-green:hover {
    background-color: #388e3c; /* Verde más oscuro */
    border-color: #388e3c;
}

/* Responsividad */
@media (max-width: 991.98px) {
    .image-placeholder-box {
        height: 300px;
    }
    .service-title-dark-blue {
        font-size: 1.8rem;
    }
}

/* ** Estilos para la Sección: CTA - Consulta Gratuita ** */

:root {
    --cta-blue: #0f3d76; /* Azul oscuro para el degradado */
    --cta-green: #59a63c; /* Verde brillante del botón y degradado */
    --text-light: #fff;
    --text-light-opacity: rgba(255, 255, 255, 0.9);
}

#consulta-gratuita-cta {
    /* 1. Imagen de Fondo */
    background-image: url(../../../public/imagen/fondos/fondo_servicios.jpeg); /* Reemplazar con tu URL de imagen */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    /* Altura para que se vea bien en desktop */
    min-height: 350px; 
    display: flex; /* Centra el contenido verticalmente */
    align-items: center; 
}

#consulta-gratuita-cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    
    /* 2. Degradado Superpuesto (Overlay) que se ve en la imagen */
    background-image: linear-gradient(
        to right, 
        rgba(13, 71, 161, 0.75) 0%, /* Azul (similar a var(--color-primary)) */
        rgba(13, 71, 161, 0.7) 40%, 
        rgba(76, 175, 80, 0.7) 100% /* Verde/Amarillo (similar a var(--color-secondary)) */
    );
    /* Ajuste fino para replicar la luz lateral que se ve en la captura original */
    background-image: linear-gradient(
        to right,
        var(--cta-blue),
        var(--cta-blue) 40%,
        var(--cta-green) 100%
    );
    opacity: 0.9;
}

#consulta-gratuita-cta .container {
    position: relative;
    z-index: 5; /* Asegura que el contenido esté sobre el overlay */
}

/* --- Título y Subtítulo --- */
.cta-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-light);
    line-height: 1.2;
    /* Ajuste para que el texto no sea tan ancho y se centre */
    max-width: 650px; 
    margin-left: auto;
    margin-right: auto;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* Mejora la legibilidad */
}

.cta-subtitle {
    font-size: 1.1rem;
    color: var(--text-light-opacity);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* --- Botón CTA --- */
.btn-cta-green {
    background-color: var(--cta-green);
    border-color: var(--cta-green);
    color: var(--text-light); 
    font-weight: 600;
    padding: 12px 30px;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.btn-cta-green:hover {
    background-color: #388e3c; /* Verde más oscuro al pasar el ratón */
    border-color: #388e3c;
}

/* Responsividad */
@media (max-width: 767.98px) {
    #consulta-gratuita-cta {
        min-height: 300px;
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .cta-title {
        font-size: 1.8rem;
    }
}