/* ==========================================================================
   1. RESET, TIPOGRAFÍA Y CONFIGURACIÓN GENERAL
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #162247;
    font-family: 'Montserrat', sans-serif; /* Unificado con tu Google Fonts */
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto; 
    min-height: 100vh;
    padding-bottom: 50px;
    overflow-x: hidden; /* Evita scrolls horizontales inesperados */
}

/* Contenedor que ocupa todo el fondo dinámico */
.fondo-dinamico {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2; /* Al fondo absoluto */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background-color: #162247;
    pointer-events: none; /* No interfiere con clicks */
}

.linea-marquesina {
    font-family: 'Montserrat', sans-serif;
    font-size: 8vw;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.02); /* Opacidad sutil y elegante */
    white-space: nowrap;
    text-transform: uppercase;
    animation: scroll-izq 60s linear infinite;
}

.linea-marquesina.reversa {
    animation: scroll-der 60s linear infinite;
    color: rgba(255, 255, 255, 0.015);
}

/* ==========================================================================
   ANIMACIONES DE MARQUESINAS DE FONDO (Sin duplicados)
   ========================================================================== */
@keyframes scroll-izq {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes scroll-der {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* ==========================================================================
   ANUNCIO DE MANTENIMIENTO EN CINTILLO SUPERIOR
   ========================================================================== */
/*.cintillo-mantenimiento-alerta {
    width: 90%;
    max-width: 1900px;
    height: 45px; 
    background-color: #ffffff !important; 
    border: 2px solid #FFD700; 
    border-radius: 15px;  Mantiene la simetría con el resto del diseño 
    margin: 5px auto;
    display: flex;
    align-items: center;
    overflow: hidden;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
}

.cintillo-mantenimiento-alerta marquee {
    font-family: 'Montserrat', sans-serif;
    color: #162247; 
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.cintillo-mantenimiento-alerta i {
    color: #e51a22;
    margin: 0 10px;
    font-size: 14px;
}*/

/* ==========================================================================
   2. CINTILLO INSTITUCIONAL Y NAVBAR (Tamaño Gigante y Bordes Sutiles)
   ========================================================================== */
.contenedor-cintillo {
    margin-top: 5px;
    margin-bottom: 5px;
    width: 90%;
    max-width: 1900px;
    height: 65px; /* Tu altura perfecta */
    border-radius: 10px; 
    overflow: hidden; 
    margin-left: auto;
    margin-right: auto;
    background-color: #ffffff; 
    filter: drop-shadow(0px 4px 10px rgba(255, 255, 255, 0.15));
}
.cintillo-img {
    /* SOLUCIÓN: Cambiamos a 100% de alto y ancho automático para que el 
       navegador mantenga la proporción real de los logos sin estirarlos */
    width: auto;
    height: 100%;
    object-fit: contain; 
    
    /* Centra la imagen perfectamente dentro de los 65px blancos */
    display: block;
    margin-left: auto;
    margin-right: auto;
    
    background-color: transparent; 
    transition: all 0.4s ease;
}

.contenedor-cintillo:hover .cintillo-img {
    transform: scale(1.01);
}


/* NAVBAR ANGOSTA PERO DEL MISMO ANCHO MÁXIMO (1500px) */
.navbar {
    position: sticky;
    top: 5px; 
    z-index: 1000;
    margin-bottom: 5px;
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 10px; 
    padding: 6px 25px; /* Mantiene el acabado elegante y angosto */
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1700px; /* Ancho máximo original alineado al cintillo */
    box-shadow: 0px 5px 15px rgba(0,0,0,0.15);
    border: 1px solid rgba(255, 255, 255, 0.8);
}
.navbar {
    /* ... tus otros estilos ... */
    margin-top: 15px; /* Añade un poco de separación respecto al cintillo redondeado */
}

.menu {
    display: flex;
    align-items: center; /* Centrado vertical absoluto */
    justify-content: center;
    gap: 15px; 
}

/* CORRECCIÓN GENERAL: Asegura que el dropdown y los enlaces se alineen verticalmente */
.nav-links .dropdown,
.nav-links a {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

/* AJUSTE FINO DEL ACTIVADOR: Nivelación interna del texto y la flecha */
.dropdown-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px; 
    padding-bottom: 2px; /* Sincroniza la altura con el padding-bottom de los otros enlaces */
}

.dropdown-trigger i {
    font-size: 10px;
    margin-top: 2px; /* Pequeño empuje al icono para que no jale el texto hacia abajo */
    transition: transform 0.3s ease;
}



/* ENLACES Y EFECTOS */
.nav-links a {
    font-family: 'Montserrat', sans-serif;
    color: #162247 !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 11px; 
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    position: relative;
    padding-bottom: 2px;
    display: inline-block;
}

.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #162247;
    transition: width 0.3s ease;
    box-shadow: 0 0 8px rgba(22, 34, 71, 0.4);
}

.nav-links a:hover {
    color: #003366 !important;
    text-shadow: 0px 0px 8px rgba(22, 34, 71, 0.2);
    transform: translateY(-1px);
}

.nav-links a:hover::after {
    width: 100%;
}

/* CORRECCIÓN GENERAL: Asegura que el dropdown y los enlaces se alineen verticalmente */
.nav-links .dropdown,
.nav-links a {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

/* AJUSTE FINO DEL ACTIVADOR: Nivelación interna del texto y la flecha */
.dropdown-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px; 
    padding-bottom: 2px; /* Sincroniza la altura con el padding-bottom de los otros enlaces */
}

.dropdown-trigger i {
    font-size: 10px;
    margin-top: 2px; /* Pequeño empuje al icono para que no jale el texto hacia abajo */
    transition: transform 0.3s ease;
}



/* ==========================================================================
   3. ICONOS SOCIALES Y ACCESO EXTRANET AVANZADO
   ========================================================================== */
.social-icons {
    display: flex;
    gap: 15px;
    align-items: center;
}

.social-icons img {
    width: 20px;
    height: auto;
    transition: transform 0.3s ease;
}

.social-icons a:hover img {
    transform: scale(1.2);
}

/* Estilos para el enlace y el botón dinámico de Extranet */
.extranet-link {
    text-decoration: none;
    margin-left: 5px;
}

.extranet-button {
    background-color: #162247;
    padding: 6px 14px;
    border-radius: 20px; /* Forma de píldora estilizada */
    display: flex;
    align-items: center;
    gap: 8px;
    border: 2px solid #FFD700; /* Borde dorado corporativo */
    animation: pulse-alert 1.2s infinite; /* Animación de pulso activa */
    transition: all 0.3s ease;
    cursor: pointer;
}

.extranet-text {
    color: #FFD700;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

/* Propiedades del icono vectorial interno */
.extranet-button svg {
    transition: stroke 0.3s ease;
}

/* ==========================================================================
   ALERTA DE MANTENIMIENTO DENTRO DE LA BARRA DE NAVEGACIÓN (NAVBAR)
   ========================================================================== */
/* Forzado de alineación flex en el contenedor navbar original */
/* 1. OPTIMIZACIÓN DEL NAVBAR: Controlamos el flujo horizontal */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between; 
    gap: 15px; /* Reducimos el espacio de separación general */
    padding: 6px 20px; /* Ajustamos el aire interno para evitar desbordes */
    width: 100%;
    max-width: 1700px;
    box-sizing: border-box; /* Obliga al navegador a contar los paddings dentro del ancho total */
}

/* 2. CÁPSULA DE ALERTA COMPACTA: Resolvemos el desborde */
.navbar-mantenimiento-marquee {
    flex: 1; /* Sigue absorbiendo el espacio del medio */
    display: flex;
    align-items: center;
    background: rgba(16, 34, 71, 0.9) !important; 
    
    /* SOLUCIÓN 1: Bajamos el padding a 4px arriba/abajo para que sea delgada y estilizada */
    padding: 4px 15px; 
    
    border-radius: 6px;
    overflow: hidden;
    
    /* SOLUCIÓN 2: Reducimos el ancho máximo de 650px a 400px para que quepa perfectamente en el centro */
    max-width: 400px; 
    
    margin: 0 auto; 
    border: 1px solid #FFD700;
    
    /* SOLUCIÓN 3: Evita que la cápsula colapse o se estire de más interrumpiendo a los vecinos */
    min-width: 150px; 
    box-sizing: border-box;
}

.navbar-mantenimiento-marquee marquee {
    font-family: 'Montserrat', sans-serif;
    color: #FFD700 !important; 
    font-size: 13px; /* Tamaño compacto para no desarmar la altura fina del navbar */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Iconos de advertencia parpadeantes dentro de la barra */
.navbar-mantenimiento-marquee i {
    color: #ffffff; /* Icono blanco para crear el contraste perfecto con el fondo azul y letras amarillas */
    margin: 0 8px;
    font-size: 13px;
}


/* ==========================================================================
   4.- ANIMACIÓN DE PULSO DE ALERTA (Para captar atención)
   ========================================================================== */
@keyframes pulse-alert {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.6);
    }
    50% {
        transform: scale(1.04);
        box-shadow: 0 0 12px 4px rgba(255, 215, 0, 0.3);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
    }
}

/* EFECTO INTERACTIVO: Al pasar el mouse se vuelve dorado sólido con texto negro */
.extranet-button:hover {
    animation: none; /* Se detiene el pulso al interactuar */
    background-color: #FFD700;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
}

.extranet-button:hover .extranet-text {
    color: #162247; /* El texto cambia al azul oscuro de la empresa */
}

.extranet-button:hover svg {
    stroke: #162247; /* El icono de la flecha cambia a azul oscuro */
}

.extranet-button:active {
    transform: scale(0.95); /* Efecto de hundimiento al hacer click */
}

/* EFECTO INTERACTIVO: Al pasar el mouse se vuelve dorado sólido con texto negro */
.extranet-button:hover {
    animation: none; /* Se detiene el pulso al interactuar */
    background-color: #FFD700;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
}

.extranet-button:hover .extranet-text {
    color: #162247; /* El texto cambia al azul oscuro de la empresa */
}

.extranet-button:hover svg {
    stroke: #162247; /* El icono de la flecha cambia a azul oscuro */
}

.extranet-button:active {
    transform: scale(0.95); /* Efecto de hundimiento al hacer click */
}
/* ==========================================================================
   5. CARRUSEL PRINCIPAL (Efecto de Mosaico y Capas de Texto)
   ========================================================================== */
.carousel-container {
    --dorado-impacto: #FFD700;
    width: 90%;
    height: 800px; /* Altura optimizada para evitar desbordamientos */
    max-width: 1900px;
    margin: 20px auto;
    overflow: hidden;
    position: relative;
    border-radius: 30px;
    z-index: 1;
}

.mosaic-background-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    z-index: 1; /* Por debajo del texto */
}

.mosaic-tile {
    background-repeat: no-repeat;
    box-sizing: border-box;
    
    /* SOLUCIÓN: Sube un 20% el brillo natural y un 5% el contraste de las fotos */
    filter: brightness(1.20) contrast(1.05);
    
    transition: filter 0.3s ease; /* Transición suave por si deseas cambiarlo en hover */
}



/* Clase de ruptura de mosaicos disparada cíclicamente por script.js */
.mosaic-tile.desaparecer {
    opacity: 0;
    transform: scale(0.7) rotate(5deg);
}

/* Capa contenedora para aislar y elevar los textos sobre las fotos */
.carousel-text-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none; /* Traspasa clics a elementos inferiores si es necesario */
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0.8s ease;
    display: flex;
    align-items: center;
}

/* Control de transiciones de encendido para los slides activos */
.carousel-slide.active {
    opacity: 1;
    visibility: visible;
}

.carousel-slide::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    b/* SOLUCIÓN: Reducido de 0.75 a 0.35 para aclarar la imagen considerablemente */
    background: linear-gradient(90deg, rgba(0, 35, 102, 0.35) 0%, transparent 80%);
    z-index: 2;
    border-radius: 30px;
}

/* Posicionamiento de Textos e Interactividad Interna */
.slide-content {
    position: absolute;
    left: 8%;
    z-index: 20;
    color: white;
    max-width: 450px;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.8);
    transform: translateY(30px);
    transition: all 0.8s ease 0.5s;
    pointer-events: auto; /* Reactiva los clics en los botones CTA de cada slide */
}

.carousel-slide.active .slide-content {
    transform: translateY(0);
}

.slide-content h2 {
    font-size: 3rem;
    margin-bottom: 10px;
    color: var(--dorado-impacto); /* Dorado institucional definitivo */
    font-weight: 900;
    text-transform: uppercase;
}

.slide-content p {
    font-size: 1.1rem;
    margin-bottom: 25px;
    font-weight: 400;
    line-height: 1.4;
}

/* Ajustes a tu clase btn-cta existente */
.btn-cta {
    position: relative;
    display: inline-block;
    padding: 14px 35px;
    background: #f1b814; /* Reemplaza var(--dorado-impacto) si no lee la variable */
    color: #0f1c3f; /* Texto azul oscuro corporativo para perfecto contraste */
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.5px;
    border: 2px solid #f1b814;
    transition: background 0.3s ease, transform 0.2s ease, color 0.3s ease;
    z-index: 30;
}

.btn-cta:hover {
    background: transparent;
    color: var(--dorado-impacto);
    transform: translateY(-2px);
}

/* Estilo de la imagen flotante emergente */
.img-emergente {
    position: absolute;
    bottom: 140%;
    left: 50%;
    transform: translateX(-50%) scale(0.8);
    width: 220px;
    height: auto;
    border-radius: 15px;
    border: 3px solid var(--dorado-impacto);
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 100;
}

/* Flecha decorativa del bocadillo emergente */
.btn-cta::before {
    content: "";
    position: absolute;
    bottom: 120%;
    left: 30%;
    transform: translateX(-50%);
    border-width: 10px;
    border-style: solid;
    border-color: var(--dorado-impacto) transparent transparent transparent;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 101;
}

.btn-cta:hover .img-emergente {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
}

.btn-cta:hover::before {
    opacity: 1;
    visibility: visible;
}

/* Indicadores de Navegación Inferior (Dots) */
.carousel-dots {
    position: absolute;
    bottom: 15px;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 12px;
    z-index: 25;
}

.dot {
    width: 10px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    background-color: var(--dorado-impacto);
    transform: scale(1.3);
    box-shadow: 0 0 10px var(--dorado-impacto);
}



/* ==========================================================================
   6. SECCIÓN DE SERVICIOS (Acabado Cristal Claro / Glassmorphism)
   ========================================================================== */
.servicios-section {
    width: 90%;
    max-width: 1550px;
    margin: 40px auto;
    text-align: center;
}

.titulo-seccion {
    font-family: 'Montserrat', sans-serif;
    font-size: 50px;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
    text-shadow: 0 0 10px rgba(255,255,255,0.3);
}

.servicios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 20px;
}

/* Tarjetas de Servicio */
.servicio-card {
    /* SOLUCIÓN: Subimos la opacidad a 0.85 (85%) para que el azul oscuro del fondo no opaque la tarjeta */
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    padding: 60px 40px;
    min-height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); /* Sombra más oscura para dar profundidad sobre fondo azul */
}

.servicio-card h3 {
    color: #162247; /* SOLUCIÓN: Cambiado al azul corporativo más oscuro para máxima lectura */
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    margin-bottom: 20px;
    text-transform: uppercase;
    font-weight: 700;
}

.servicio-card p {
    color: #1a1a1a; /* SOLUCIÓN: Negro suave/Gris muy oscuro para que resalte nítido sobre el cristal claro */
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 30px;
    max-width: 90%;
}

.servicio-card img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 20px;
    
    /* SOLUCIÓN: Agregamos brillo directo a las fotos que metas en los servicios */
    filter: brightness(1.15) contrast(1.05);
}

/* Iconos de Servicios */
.icon-box {
    font-size: 60px;
    color: #1a4f8b;
    margin-bottom: 25px;
    filter: drop-shadow(0 4px 6px rgba(26, 79, 139, 0.2));
    transition: all 0.3s ease;
}

.btn-servicio {
    display: inline-block;
    color: #1a4f8b;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: 2px solid rgba(26, 79, 139, 0.2);
    transition: all 0.3s ease;
}

/* Efectos Interactivos (Hover) */
.servicio-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.95) !important; /* Cristal casi puro al pasar el mouse */
    border-color: #162247;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.3);
}

.servicio-card:hover .icon-box {
    transform: scale(1.15);
    color: #162247; /* Azul profundo alineado con el navbar */
}

.servicio-card:hover .btn-servicio {
    border-bottom: 2px solid #162247;
}

/* ==========================================================================
   7. SECCIÓN: QUÉ ES CORPOSERVICA (Efecto Emergente a la Izquierda)
   ========================================================================== */

.titulo-seccion-nosotros {
    font-family: 'Montserrat', sans-serif;
    font-size: 50px;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
    text-shadow: 0 0 10px rgba(255,255,255,0.3);
    text-align: center;
}


.acerca-section {
    width: 90%;
    max-width: 1550px;
    margin: 60px auto 100px auto; /* SOLUCIÓN: Subimos de 60px a 100px abajo para alejarlo de NOTICIAS */
    font-family: 'Montserrat', sans-serif;
}

.acerca-container {
    display: flex;
    align-items: center;
    justify-content: center; 
    gap: 60px; 
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 80px;
    border-radius: 30px;
    position: relative; /* Obligatorio para controlar la profundidad */
    z-index: 20; /* Eleva el contenedor por encima de las noticias de abajo */
}

.acerca-info {
    flex: 1;
    text-align: left;
}

/* Nuevo estilo para el texto decorativo superior */
.antetitulo-seccion {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px; /* Tamaño compacto y elegante */
    color: #FFD700; /* Dorado institucional */
    text-transform: uppercase;
    font-weight: 700; /* Negrita clara */
    letter-spacing: 4px; /* Espaciado amplio para estilo premium */
    display: block;
    margin-bottom: 5px; /* Lo separa sutilmente del título principal */
    opacity: 0.9; /* Suaviza un poco el brillo para dar jerarquía */
}


.titulo-seccion-izquierda {
    font-size: 36px;
    color: #FFD700;
    text-transform: uppercase;
    font-weight: 900;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.acerca-descripcion {
    color: #ffffff;
    font-size: 16px;
    line-height: 1.8;
    font-weight: 400;
}

.acerca-opciones {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.opcion-item {
    position: relative;
}

.opcion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 30px;
    background: rgba(255, 255, 255, 0.85) !important;
    color: #162247;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 15px;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.9);
    transition: all 0.3s ease;
}

.opcion-trigger i {
    font-size: 16px;
    transition: transform 0.3s ease;
}

.opcion-item:hover .opcion-trigger {
    background: #FFD700 !important;
    color: #162247;
    transform: translateX(-5px); /* Pequeño empuje al lado contrario para balancear */
    box-shadow: 0 10px 25px rgba(255, 215, 0, 0.2);
}

/* VENTANA FLOTANTE COMPACTA Y UNIFORME */
.bloque-flotante.izquierdo {
    position: absolute;
    top: 50%;
    right: 125%; 
    transform: translateY(-50%) translateX(30px) scale(0.95); 
    width: 450px; /* Reducido a 450px para igualar a las otras ventanas */
    
    /* SOLUCIÓN 1: Bajamos drásticamente la altura mínima para que se adapte al contenido */
    min-height: 320px; 
    
    background: #ffffff !important; 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 2px solid #FFD700;
    box-shadow: -15px 20px 60px rgba(0, 0, 0, 0.65); 
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 99999 !important; 
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
}

/* CONTENIDO INTERNO COMPACTO */
.flotante-contenido {
    /* SOLUCIÓN 2: Reducimos los paddings internos para quitar aire innecesario */
    padding: 20px 25px; 
    display: flex;
    flex-direction: column;
    gap: 8px; /* Espaciado interno más corto */
}

.flotante-contenido h3 {
    color: #162247;
    font-size: 18px; /* Un poco más pequeño para que no ocupe tanto espacio */
    margin: 0;
    text-transform: uppercase;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 10px; 
}

.flotante-contenido p {
    color: #1a1a1a;
    font-size: 13.5px;
    line-height: 1.5;
    margin: 0;
    text-align: left;
}

/* OPTIMIZACIÓN DE LA LISTA DE VALORES */
.lista-valores {
    list-style: none;
    padding: 0;
    margin: 5px 0 0 0;
    text-align: left;
}

.lista-valores li {
    font-size: 13px;
    color: #222222;
    
    /* SOLUCIÓN 4: Más separación vertical entre cada valor para que no se amontonen */
    margin-bottom: 8px; 
    
    line-height: 1.4;
    position: relative;
    padding-left: 18px;
}

.lista-valores li::before {
    content: "•";
    color: #FFD700; 
    font-weight: bold;
    font-size: 16px;
    position: absolute;
    left: 0;
    top: -2px;
}

/* Estilos internos para la lista de valores */
.lista-valores {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
    text-align: left;
}

.lista-valores li {
    font-size: 13px;
    color: #1a1a1a;
    margin-bottom: 8px;
    line-height: 1.4;
    position: relative;
    padding-left: 15px;
}

.lista-valores li::before {
    content: "•";
    color: #FFD700; /* Punto decorativo dorado */
    font-weight: bold;
    font-size: 16px;
    position: absolute;
    left: 0;
    top: -2px;
}

.flotante-img {
    width: 100%;
    height: 460px;
    object-fit: cover;
}

.flotante-contenido {
    padding: 25px;
}

.flotante-contenido h3 {
    color: #162247;
    font-size: 20px;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px; /* Despega el icono del texto */
}

/* Estilo para los nuevos iconos decorativos */
.icono-flotante {
    color: #162247; /* Azul corporativo para el icono */
    font-size: 22px;
}

.flotante-contenido p {
    color: #1a1a1a;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    text-align: left;
}

/* DISPARADOR LATERAL */
.opcion-item:hover .bloque-flotante.izquierdo {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0) scale(1); /* Se desliza limpiamente hacia la izquierda */
}

/* Responsivo */
@media (max-width: 1200px) {
    .acerca-container {
        flex-direction: column;
    }
    .bloque-flotante.izquierdo {
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        transform: none !important;
        display: none;
        margin-top: 15px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    }
    .opcion-item:hover .bloque-flotante.izquierdo {
        display: flex;
    }
}


/* ==========================================================================
   8. SECCIÓN: NOTICIAS / ESPECIALES (4 Columnas Glassmorphism)
   ========================================================================== */
.noticias-section {
    width: 90%;
    max-width: 1550px;
    margin: 30px auto 60px auto;
    font-family: 'Montserrat', sans-serif;
}

/* Forzado de 4 columnas horizontales idénticas */
.noticias-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Tarjeta contenedora con efecto cristal iluminado */
.noticia-card {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

/* Contenedor de la foto para manejar el botón de guardar/marcador */
.noticia-img-wrapper {
    position: relative;
    width: 100%;
    height: 250px; /* Altura controlada idéntica a la referencia de Especiales */
    overflow: hidden;
}

.noticia-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Icono flotante de marcador (como el de la referencia de Últimas Noticias) */
.noticia-tag {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    backdrop-filter: blur(5px);
    transition: background 0.3s ease;
}

/* Zona inferior destinada al texto de 3 líneas */
.noticia-cuerpo {
    padding: 15px;
    flex-grow: 1;
    display: flex;
    align-items: flex-start;
}

.noticia-texto {
    color: #1a1a1a; /* Contraste oscuro óptimo sobre cristal claro */
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
    text-align: left;
    font-weight: 500;
    
    /* Control estricto de desbordamiento: Corta a las 3 líneas con puntos suspensivos (...) si el texto es muy largo */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Efectos Interactivos al pasar el ratón (Hover) */
.noticia-card:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
    border-color: #FFD700; /* Destello dorado en el borde */
}

.noticia-card:hover .noticia-img {
    transform: scale(1.05); /* Efecto zoom suave en la imagen */
}

.noticia-card:hover .noticia-tag {
    background: #162247; /* El marcador se pinta del azul corporativo */
    color: #FFD700;
}

/* Adaptación para pantallas medianas y móviles */
@media (max-width: 1024px) {
    .noticias-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 filas de 2 tarjetas en tabletas */
    }
}

@media (max-width: 600px) {
    .noticias-grid {
        grid-template-columns: 1fr; /* 1 sola columna vertical en smartphones */
    }
}

/* ==========================================================================
   8.1. BOTÓN DE ACCIÓN: VER MÁS NOTICIAS (Dorado Corporativo)
   ========================================================================== */
.noticias-action-container {
    width: 100%;
    display: flex;
    justify-content: center; /* Centra el botón horizontalmente debajo de la cuadrícula */
    margin-top: 40px; /* Genera una separación elegante respecto a las 4 tarjetas */
}

.btn-ver-mas {
    font-family: 'Montserrat', sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Despega el texto de la flecha */
    padding: 14px 40px;
    background: #FFD700; /* Dorado institucional definitivo */
    color: #162247; /* Texto azul oscuro corporativo para perfecto contraste */
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 50px; /* Forma de píldora redondeada en sintonía con la web */
    border: 2px solid #FFD700;
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Efectos al apuntar con el ratón (Hover) */
.btn-ver-mas:hover {
    background: transparent; /* Efecto contorno (Outline) */
    color: #FFD700; /* El texto se pinta de dorado */
    transform: translateY(-3px); /* Pequeña elevación táctil */
    box-shadow: 0 10px 25px rgba(255, 215, 0, 0.4); /* Destello luminoso expandido */
}

/* Animación interna para la flecha icono */
.btn-ver-mas i {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.btn-ver-mas:hover i {
    transform: translateX(5px); /* La flecha se desplaza hacia la derecha incitando al clic */
}

/* ==========================================================================
   9. SECCIÓN: CLIENTES (Efecto Marquesina Infinita Glassmorphism)
   ========================================================================== */
.titulo-seccion-centro {
    font-family: 'Montserrat', sans-serif;
    font-size: 50px;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
    text-shadow: 0 0 10px rgba(255,255,255,0.3);
    text-align: center;
}


.clientes-section {
    width: 90%;
    max-width: 1850px;
    margin: 60px auto;
    text-align: center;
    font-size: 50px;
    color: #ffffff;
    letter-spacing: 2px;
    margin-bottom: 20px;
    text-shadow: 0 0 10px rgba(255,255,255,0.3);
    font-family: 'Montserrat', sans-serif;
}

/* Estilos de títulos centrados para combinar con Nosotros y Noticias */
.antetitulo-seccion-centro {
    font-size: 14px;
    color: #FFD700;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 4px;
    display: block;
    margin-bottom: 5px;
    opacity: 0.9;
}



/* Contenedor Principal de la Marquesina (Cristal Iluminado) */
.marquesina-container {
    width: 100%;
    
    /* SOLUCIÓN 1: Cambiado a blanco puro y sólido para eliminar el efecto traslúcido */
    background: #ffffff; 
    
    border: 1px solid #e0e0e0; /* Un borde sutil gris que enmarca el recuadro blanco */
    border-radius: 20px;
    padding: 25px 0;
    overflow: hidden; /* Corta los logos que salen del recuadro */
    position: relative;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

/* Difuminado elegante en los extremos izquierdo y derecho (Efecto máscara) */
.marquesina-container::before,
.marquesina-container::after {
    content: "";
    height: 100%;
    position: absolute;
    top: 0;
    width: 100px;
    z-index: 2;
    pointer-events: none;
}

/* Difuminado elegante adaptado al fondo blanco puro */
.marquesina-container::before {
    left: 0;
    background: linear-gradient(to right, #ffffff, transparent);
}
.marquesina-container::after {
    right: 0;
    background: linear-gradient(to left, #ffffff, transparent);
}

.marquesina-track {
    display: flex;
    width: max-content; 
    
    /* SOLUCIÓN: Reducimos un poco el espacio de 60px a 45px para compensar el nuevo tamaño */
    gap: 45px; 
    
    padding-left: 30px;
    animation: scrollMarquesina 25s linear infinite; 
}

/* Detención de la marquesina al pasar el mouse por encima */
.marquesina-container:hover .marquesina-track {
    animation-play-state: paused;
}

/* Estilo para las imágenes de los clientes (Tamaño ampliado sutilmente) */
.marquesina-item {
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* SOLUCIÓN: Subimos la altura de 60px a 75px para que se vean más grandes y legibles */
    height: 85px; 
    
    width: auto;
}

.marquesina-item img {
    height: 100%;
    width: auto;
    object-fit: contain; /* Evita que los logos se estiren o distorsionen */
    filter: grayscale(0%) opacity(1); /* Estilo sobrio inicial */
    transition: all 0.3s ease;
}

/* El logo realiza un sutil crecimiento táctil al pasar el puntero */
.marquesina-item:hover img {
    transform: scale(1.08); 
    filter: drop-shadow(0px 4px 8px rgba(22, 34, 71, 0.15));
}

/* REGLA LÓGICA DE LA ANIMACIÓN INFINITA:
   Se desplaza hacia la izquierda exactamente el 50% de la tira (el grupo original) 
   y se reinicia de golpe de 0% a 50% de forma invisible para el ojo humano. */
@keyframes scrollMarquesina {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}


/* ==========================================================================
   10. SECCIÓN: CANALES DE ATENCIÓN Y CONTACTO (Glassmorphism Sólido)
   ========================================================================== */
.contacto-corporativo-section {
    width: 90%;
    max-width: 1550px;
    margin: 60px auto 80px auto;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
}

/* Grilla fluida de 3 columnas simétricas */
.contacto-corporativo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 20px;
}

/* Tarjetas individuales de contacto */
.contacto-box-card {
    background: rgba(255, 255, 255, 0.85) !important; /* Cristal de alta visibilidad */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Contenedor circular del icono */
.contacto-icon-wrapper {
    width: 70px;
    height: 70px;
    background: #162247; /* Azul corporativo profundo */
    color: #FFD700; /* Dorado impacto para el icono */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(22, 34, 71, 0.2);
    transition: transform 0.3s ease;
}

.contacto-box-card h3 {
    color: #162247;
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0 0 10px 0;
}

/* Resalte tipográfico de los correos y teléfonos */
.contacto-info-principal {
    color: #003366; /* Azul intermedio para destacar el dato */
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 15px 0;
    word-break: break-all; /* Evita desbordes de texto en pantallas pequeñas */
}

.contacto-info-desc {
    color: #333333;
    font-size: 13.5px;
    line-height: 1.6;
    margin: 0 0 25px 0;
    flex-grow: 1; /* Empuja los botones de acción para que queden alineados abajo */
}

/* Botón inferior de enlace directo */
.btn-contacto-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #162247;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: 2px solid rgba(22, 34, 71, 0.25);
    transition: all 0.3s ease;
    padding-bottom: 3px;
}

/* Efectos al pasar el cursor (Hover) */
.contacto-box-card:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    border-color: #FFD700; /* Destello perimetral dorado */
}

.contacto-box-card:hover .contacto-icon-wrapper {
    transform: scale(1.1) rotate(5deg);
}

.contacto-box-card:hover .btn-contacto-link {
    color: #003366;
    border-bottom-color: #FFD700; /* La línea del enlace se enciende en dorado */
}

/* Ajustes de Responsividad */
@media (max-width: 992px) {
    .contacto-corporativo-grid {
        grid-template-columns: 1fr; /* Una sola tarjeta por fila en móviles/tabletas */
        gap: 20px;
    }
    .contacto-box-card { padding: 30px 20px; }
}

/* ==========================================================================
   11. PIE DE PÁGINA (Footer Estructura Dual Sólida)
   ========================================================================== */
.footer-corporativo {
    width: 100%;
    background: rgba(0, 20, 60, 0.4); /* Fondo azul noche sutil de base */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 60px 0 0 0;
    margin-top: 80px;
    font-family: 'Montserrat', sans-serif;
}

.footer-container {
    width: 90%;
    max-width: 1550px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Dos recuadros de idéntico tamaño lado a lado */
    gap: 40px; /* Separación amplia entre ambos bloques */
    padding-bottom: 50px;
}

/* Base Común de los Dos Recuadros Sólidos con Borde de Seguridad */
.footer-box {
    background: #ffffff !important; /* Fondo blanco sólido para máximo contraste */
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    
    /* SOLUCIÓN: Cambiado el borde gris opaco por el Dorado/Amarillo Seguridad Corporativo */
    border: 2px solid #FFD700; 
    
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: auto; /* Permite que la caja se estire según el tamaño del mapa y el texto */
    min-height: 340px; /* Asegura un tamaño mínimo simétrico para ambas cajas */
}

/* Potenciación del efecto al pasar el mouse por encima */
.footer-box:hover {
    transform: translateY(-5px); 
    box-shadow: 0 20px 45px rgba(255, 215, 0, 0.25); /* Añade un sutil destello amarillo de fondo */
}

/* Títulos Internos de los Recuadros */
.footer-box-title {
    font-size: 20px;
    color: #162247; /* Azul corporativo profundo */
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-box-title i {
    color: #FFD700; /* Iconos decorativos en dorado */
}

.footer-box-desc {
    color: #555555;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 25px; /* SOLUCIÓN: Da un margen inferior cómodo antes de la barra azul del contador */
}


/* --- BLOQUE 1: CONTADOR DE VISITAS DIGITAL --- */
.contador-pantalla {
    display: flex;
    gap: 5px;
    background: #162247; /* Pantalla del contador en azul oscuro */
    padding: 12px 20px;
    border-radius: 10px;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.5);
    margin-bottom: 10px;
}

.contador-digito {
    font-family: monospace; /* Fuente de ancho fijo estilo marcador */
    font-size: 28px;
    font-weight: bold;
    color: #FFD700; /* Números dorados de alto impacto */
    background: rgba(255, 255, 255, 0.08);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.contador-label {
    font-size: 12px;
    color: #777777;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- BLOQUE 2: DISEÑO DE LA UBICACIÓN --- */
/* --- DISEÑO DE LA UBICACIÓN CON MAPA REAL --- */
.ubicacion-contenido {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espaciado corto y ordenado entre el mapa y el texto */
}

/* Contenedor del mapa para aplicar bordes redondeados al iframe */
.mapa-wrapper {
    width: 100%;
    border-radius: 12px;
    overflow: hidden; /* Corta las esquinas del mapa de Google */
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.mapa-wrapper iframe {
    display: block; /* Elimina espacios vacíos inferiores del elemento inline */
}

.direccion-texto {
    color: #222222;
    font-size: 13.5px;
    line-height: 1.5;
    margin: 0;
}


.direccion-texto {
    color: #222222;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

.btn-mapa {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 25px;
    background: #162247; /* Botón azul corporativo */
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    border-radius: 50px;
    transition: all 0.3s ease;
    border: 2px solid #162247;
    align-self: flex-start;
}

.btn-mapa:hover {
    background: #FFD700; /* Cambia a dorado en hover */
    color: #162247;
    border-color: #FFD700;
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3);
}

/* --- BARRA FINAL DE COPYRIGHT --- */
.footer-copyright {
    width: 100%;
    background: #0d1630; /* Azul ultradiurno de cierre */
    padding: 20px 0;
    text-align: center;
    margin-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-copyright p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    margin: 0;
}

/* Adaptación Responsiva para Pantallas Medianas y Móviles */
@media (max-width: 992px) {
    .footer-container {
        grid-template-columns: 1fr; /* Pasa a un recuadro encima del otro en tabletas/móviles */
        gap: 30px;
    }
}

/* --- INTEGRACIÓN DEL CONTADOR REAL EXTERNO --- */
.contador-box {
    width: 100%;
    background: #162247; /* Mantenemos el fondo azul oscuro corporativo de fondo */
    padding: 25px; /* Reemplaza el py-5 de Bootstrap de forma controlada */
    border-radius: 12px;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.4);
    margin: 15px 0;
    display: flex;
    justify-content: center; /* Centra el widget que inyecta el script */
    align-items: center;
}

/* Forzado de estilos al widget inyectado por el script externo */
.contador-box div, 
.contador-box img {
    display: block;
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0px 2px 5px rgba(0,0,0,0.3));
}

.contador-label {
    font-size: 11px;
    color: #777777;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}



/* **************************************************************************
   **************************************************************************
   ****************** NUEVA SECCION *****************************************
   **************************************************************************
   ************************************************************************** */

   /* ==========================================================================
   11. ESTRUCTURA COMPLETA DE LA PÁGINA GENERAL DE NOTICIAS
   ========================================================================== */
.seccion-noticias-page {
    width: 90%;
    max-width: 1550px;
    margin: 40px auto 80px auto;
    font-family: 'Montserrat', sans-serif;
}

.encabezado-noticias {
    text-align: center;
    margin-bottom: 5px;
}

.subtitulo-noticias {
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    max-width: 650px;
    margin: 10px auto 40px auto;
    line-height: 1.6;
}

/* Grilla fluida de 4 columnas que genera nuevas filas automáticamente */
.noticias-grid-page {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px 18px; /* Reducimos el espacio entre columnas para ensanchar las fotos */
}

/* Tarjeta optimizada blanca sólida con relieve */
.noticia-card-page {
    background: #ffffff !important;
    border: 2px solid #e0e0e0;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
}

/* 1. CONTENEDOR DE LA IMAGEN: Lo estiramos más arriba y abajo */
.noticia-card-page .noticia-img-wrapper {
    position: relative;
    width: 100%;
    height: 300px; /* SOLUCIÓN: Subimos a 300px para estirar drásticamente la foto hacia abajo */
    overflow: hidden;
}

.noticia-card-page .noticia-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fuerza a la imagen a cubrir todo el nuevo tamaño sin deformarse */
    object-position: center center;
    transition: transform 0.5s ease;
}

.noticia-card-page .noticia-tag {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(16, 34, 71, 0.85);
    color: #FFD700; /* Dorado sobre azul oscuro */
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    backdrop-filter: blur(5px);
}

/* CUERPO DE TEXTO COMPACTO */
.noticia-card-page .noticia-cuerpo {
    padding: 12px 22px 15px 22px; /* Elimina el hueco blanco superior gigante */
    display: flex;
    flex-direction: column;
    text-align: left;
    flex-grow: 1;
}


.noticia-fecha {
    font-size: 11px;
    color: #777777;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.noticia-fecha i {
    color: #162247;
}

/* 3. TÍTULO: Ajustamos el margen para que no genere espacios artificiales */
.noticia-titulo-card {
    color: #162247;
    font-size: 16px;
    font-weight: 800;
    margin: 8px 0 10px 0; /* Espaciado compacto y elegante */
    line-height: 1.4;
}

.noticia-card-page .noticia-texto {
    color: #333333;
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
    font-weight: 500;
    
    /* Control de recorte automático estricto a 3 líneas */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Efectos de Interacción (Hover) */
.noticia-card-page:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.45);
    border-color: #FFD700; /* Destello dorado perimetral */
}

.noticia-card-page:hover .noticia-img {
    transform: scale(1.06);
}

/* Ajustes de Responsividad */
@media (max-width: 1200px) {
    .noticias-grid-page { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
    .noticias-grid-page { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .noticias-grid-page { grid-template-columns: 1fr; }
}

/* ==========================================================================
   12. PÁGINA LECTOR DE NOTICIA INDIVIDUAL (noti1.html) Y GALERÍA HOVER
   ========================================================================== */
.lector-noticia-container {
    width: 90%;
    max-width: 1200px; /* Ancho más angosto estilo blog de lectura para no cansar la vista */
    margin: 40px auto 80px auto;
    font-family: 'Montserrat', sans-serif;
}

/* Caja de lectura blanca sólida */
.noticia-completa-block {
    background: #ffffff !important;
    border-radius: 25px;
    padding: 50px;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.4);
    border: 2px solid #e0e0e0;
}

.btn-regresar-noticias {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #162247;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 30px;
    transition: color 0.3s ease, transform 0.3s ease;
}

.btn-regresar-noticias:hover {
    color: #FFD700; /* Se enciende en dorado */
    transform: translateX(-5px);
}

.noticia-meta-detalle {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.tag-categoria-noticia {
    background: #162247;
    color: #FFD700;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 50px;
    letter-spacing: 0.5px;
}

.fecha-noticia-detalle {
    font-size: 12px;
    color: #777777;
    font-weight: 600;
}

.titulo-noticia-ampliado {
    color: #162247 !important;
    font-size: 32px;
    font-weight: 900;
    line-height: 1.3;
    text-align: left;
    margin: 0 0 30px 0;
}

/* Banner de imagen principal estirada de la noticia */
.noticia-img-destacada {
    width: 100%;
    height: 450px; /* Banner masivo de visualización */
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 35px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.noticia-img-destacada img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
}

/* Estilos de redacción de los párrafos */
.noticia-texto-completo {
    text-align: left;
    margin-bottom: 50px;
}

.noticia-texto-completo p {
    color: #222222;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 22px;
}

/* --- DISEÑO DE LA GALERÍA INTERACTIVA HOVER-REVEAL --- */
.seccion-galeria-noticia {
    border-top: 2px solid #eeeeee;
    padding-top: 40px;
    text-align: left;
}

.titulo-galeria-interno {
    font-size: 22px;
    color: #162247;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0 0 5px 0;
}

.desc-galeria-interno {
    font-size: 13.5px;
    color: #666666;
    margin: 0 0 25px 0;
}

/* Contenedor flexible de expansión horizontal */
.galeria-hover-reveal-grid {
    display: flex;
    width: 100%;
    height: 280px; /* Altura controlada fija de la galería */
    gap: 12px;
}

/* Comportamiento base de cada una de las 4 fotos */
.galeria-item-reveal {
    position: relative;
    flex: 1; /* Todas inician midiendo exactamente lo mismo */
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1); /* Animación ultra fluida de estiramiento */
}

.galeria-item-reveal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Texto flotante explicativo oculto inicialmente */
.info-foto-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(transparent, rgba(22, 34, 71, 0.95));
    color: #ffffff;
    padding: 20px 15px;
    font-size: 13px;
    font-weight: 700;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s; /* Espera que termine el estiramiento para mostrarse */
    text-align: left;
}

/* EFECTO HOVER MAJESTUOSO:
   La foto apuntada por el mouse multiplica su ancho por 4, 
   obligando a las otras 3 a encogerse sutilmente hacia los lados. */
.galeria-item-reveal:hover {
    flex: 4; 
    border: 2px solid #FFD700; /* Enmarca la foto ampliada en dorado */
}

/* Revela el texto descriptivo de la foto activa */
.galeria-item-reveal:hover .info-foto-overlay {
    opacity: 1;
    transform: translateY(0);
}

/* Ajuste Responsivo para Pantallas Pequeñas */
@media (max-width: 768px) {
    .galeria-hover-reveal-grid {
        flex-direction: column; /* Pasa a formato de lista vertical en teléfonos */
        height: auto;
    }
    .galeria-item-reveal {
        height: 180px;
    }
    .galeria-item-reveal:hover {
        flex: none; /* Desactiva el estiramiento en pantallas táctiles */
    }
}




/* ==========================================================================
   ADAPTABILIDAD RESPONSIVA PARA PANTALLAS CHICAS
   ========================================================================== */
@media (max-width: 992px) {
    .news-flash-container {
        flex-direction: column; /* Pasa a lista vertical en tablets y celulares */
        gap: 35px;
    }
    .flash-card {
        min-width: 100%;
        width: 100%;
    }
    .flash-info-box {
        height: auto; /* Libera la altura fija en móviles */
    }
}

@media (max-width: 480px) {
    .flash-card {
        flex-direction: column; /* Apila foto y texto verticalmente en pantallas muy pequeñas */
        align-items: center;
    }
    .flash-info-box {
        text-align: center;
    }
    .flash-action-box {
        justify-content: center;
    }
}




/* ==========================================================================
   ADAPTABILIDAD EN MÓVILES (Pasa de horizontal a vertical si es pantalla chica)
   ========================================================================== */
@media (max-width: 768px) {
    .flash-card {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    .flash-info-box {
        text-align: center;
    }
    .flash-action-box {
        justify-content: center;
        width: 100%;
    }
    .btn-ampliar {
        width: 100%;
        justify-content: center;
    }
    .flash-img-box {
        flex: 0 0 120px;
        width: 160px;
        height: 100px;
    }
}

/* Layout moderno de dos columnas para el modal */
.container-dos-columnas {
    display: flex;
    flex-direction: row;
    background: #111116 !important; 
    width: 90%;
    max-width: 900px !important; /* Un poco más estrecho para videos verticales */
    height: auto; /* Permite que el alto se adapte al video */
    max-height: 85vh; /* Evita que sature pantallas pequeñas */
    border-radius: 12px !important; 
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 215, 0, 0.15);
}

/* Columna del video calibrada al 40% */
.columna-video-box {
    flex: 0 0 40%; 
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.columna-video-box video {
    width: 100%;
    height: 100%;
    object-fit: contain; 
    display: block;
}

/* Columna de texto calibrada al 60% */
.columna-texto-box {
    flex: 0 0 60%; 
    padding: 30px; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    background: #111116;
    overflow-y: auto; 
    box-sizing: border-box;
}


/* Estilos de fuentes internas */
.modal-dinamico-titulo {
    font-family: 'Montserrat', sans-serif;
    color: #ffffff;
    font-size: 16px; 
    font-weight: 800;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.3;
}

.modal-divisor-dorado {
    width: 45px; 
    height: 2px;
    background: #FFD700; 
    margin-bottom: 12px;
    border-radius: 1px;
}

.modal-dinamico-parrafo {
    font-family: 'Montserrat', sans-serif;
    color: #cccccc;
    font-size: 13.5px; 
    line-height: 1.65;
    margin: 0;
    font-weight: 400;
}


.btn-cerrar-modal:hover {
    color: #FFD700;
}

/* Adaptación para pantallas de Celulares */
@media (max-width: 768px) {
    .container-dos-columnas {
        flex-direction: column;
        width: 92%;
        max-height: 85vh;
        overflow-y: auto;
    }
    .columna-video-box {
        flex: 0 0 auto;
        width: 100%;
        height: 250px; /* Altura controlada para el video en móvil */
    }
    .columna-texto-box {
        flex: 0 0 auto;
        width: 100%;
        padding: 20px;
    }
}
/* ==========================================================================
   ADAPTACIÓN RESPONSIVA: CINTILLO, NAVBAR Y PORTADA EN CELULARES
 ========================================================================== */
 
@media (max-width: 768px) {
    /* 1. Ajuste del Cintillo Institucional */
    .contenedor-cintillo {
        width: 100%;
        overflow: hidden;
        background-color: #ffffff;
    }

    .cintillo-img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
    }

    /* 2. Barra de Navegación Adaptativa */
    .navbar {
        flex-direction: column;
        gap: 15px;
        padding: 15px 10px;
        margin-bottom: 15px;
    }

    .nav-links {
        width: 100%;
    }

    .menu {
        display: flex;
        flex-wrap: wrap; /* Permite que los enlaces bajen si no caben en una línea */
        justify-content: center;
        gap: 12px;
        width: 100%;
    }

    .menu a {
        font-size: 14px;
        padding: 6px 10px;
    }

    .social-icons {
        justify-content: center;
        width: 100%;
        gap: 15px;
    }

    .social-icons img {
        width: 24px; /* Iconos más cómodos para pulsar con el dedo */
        height: 24px;
    }

    /* 3. Título de la Sección en Móviles */
    .titulo-seccion {
        font-size: 28px;
        margin-top: 15px;
        margin-bottom: 15px;
        padding: 0 10px;
    }

    /* 4. Carrusel Principal de la Portada */
    .carousel-container {
        width: 96%;
        margin: 10px auto;
        height: 380px; /* Limita la altura del mosaico en teléfonos */
        border-radius: 8px;
    }

    .slide-content {
        padding: 20px;
        text-align: center;
    }

    .slide-content h2 {
        font-size: 24px;
    }

    .slide-content p {
        font-size: 14px;
    }

    /* Ajuste del botón CTA en el carrusel de portada */
    .btn-cta {
        width: 85%;
        font-size: 11px;
        padding: 12px;
    }

    /* Reubica la imagen emergente en móviles para que no se salga de la pantalla */
    .img-emergente {
        width: 180px;
        left: 50%;
        transform: translateX(-50%) scale(0.8);
    }
    
    .btn-cta:hover .img-emergente {
        transform: translateX(-50%) scale(1);
    }
}

/* ==========================================================================
   AJUSTE DE ESCALA AUTOMÁTICA (MOSAICO) Y RESPONSIVE DE SERVICIOS
 ========================================================================== */

/* Escala dinámica para pantallas grandes utilizando funciones matemáticas de CSS */
.titulo-noticia-ampliado, .titulo-servicio-destacado {
    font-size: clamp(26px, 4vw, 42px) !important;
}

.item-check-servicio {
    font-size: clamp(15px, 2vw, 22px) !important;
}

/* ==========================================================================
   BLOQUE MEDIA CRÍTICO PARA PANTALLAS MÓVILES (CELULARES)
 ========================================================================== */
@media (max-width: 768px) {
    
    /* 1. Ajuste Automático de Textos del Mosaico de Portada */
    .carousel-text-layer h2 {
        font-size: clamp(20px, 6vw, 32px) !important;
        line-height: 1.2 !important;
        margin-bottom: 12px !important;
    }

    .carousel-text-layer p {
        font-size: clamp(13px, 3.5vw, 16px) !important;
        line-height: 1.4 !important;
        margin-bottom: 20px !important;
    }

    .slide-content {
        padding: 15px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* 2. Responsive Total de la Sección "Nuestros Servicios" */
    .modulo-servicios-corpo {
        max-width: 95% !important;
        width: auto !important;
        margin: 15px auto !important;
        padding: 15px !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    }

    .contenedor-diapositivas-servicio {
        min-height: auto !important;
        height: auto !important;
    }

    /* Rompe la estructura horizontal y la convierte en una columna limpia */
    .diapositiva-servicio-item.activa-servicio {
        flex-direction: column !important;
        gap: 20px !important;
        align-items: stretch !important;
    }

    /* Contenedor Izquierdo (Galería de Fotos) */
    .bloque-multimedia-izquierdo {
        width: 100% !important;
        flex: none !important;
    }

    .bloque-galeria-interna {
        height: 280px !important; /* Altura ideal en celular para evitar scroll eterno */
        border-width: 3px !important; /* Borde dorado un poco más delgado en móvil */
    }

    .foto-interna-item {
        object-fit: cover !important;
    }

    .flecha-interna-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
    }

    /* Barra de progreso adaptada debajo del borde dorado */
    .barra-progreso-contenedor {
        margin-top: 8px !important;
        height: 4px !important;
    }

    /* Contenedor Derecho (Información y Lista de Viñetas) */
    .bloque-informacion-servicio {
        width: 100% !important;
        flex: none !important;
        padding-left: 0 !important;
        text-align: center !important;
    }

    .titulo-servicio-destacado {
        text-align: center !important;
        margin-bottom: 20px !important;
        letter-spacing: 0.5px !important;
    }

    /* Centra la lista de checks en la pantalla del celular */
    .lista-checks-servicio {
        display: inline-block !important;
        text-align: left !important;
        margin: 0 auto 20px auto !important;
        width: 100% !important;
        max-width: 320px; /* Evita que las viñetas se dispersen */
    }

    .item-check-servicio {
        margin-bottom: 12px !important;
        gap: 12px !important;
        justify-content: flex-start !important;
    }

    .icono-check-amarillo {
        width: 26px !important;
        height: 26px !important;
        font-size: 14px !important;
        flex-shrink: 0 !important; /* Evita que el cuadro se deforme si el texto es largo */
    }

    /* 3. Ajuste de Botones del Carrusel General de Servicios */
    .navegacion-carrusel-general {
        margin-top: 20px !important;
        padding-top: 15px !important;
        gap: 10px !important;
    }

    .btn-general-carrusel {
        padding: 10px 16px !important;
        font-size: 13px !important;
    }

    .punto-general-dot {
        width: 10px !important;
        height: 10px !important;
    }

    /* Centrado e integración móvil del Botón Amarillo CTA */
    .contenedor-cta-servicio {
        width: 100% !important;
        text-align: center !important;
        margin-top: 10px !important;
    }

    .btn-cta {
        width: 100% !important;
        max-width: 280px !important;
        padding: 12px 20px !important;
        font-size: 12px !important;
        box-sizing: border-box !important;
    }

    /* Oculta o reescala bocadillos emergentes para evitar colisiones táctiles */
    .btn-cta::before {
        display: none !important; /* Elimina la flecha física en móviles */
    }

    .img-emergente {
        width: 160px !important;
        bottom: 120% !important;
        left: 50% !important;
        transform: translateX(-50%) scale(0.9) !important;
    }
}