/* ==================== RESET Y BASE ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Montserrat', sans-serif;
    background: #f0f8ff; /* Azul cielo claro de fondo */
    color: #1a2a4a; /* Azul oscuro para texto */
    line-height: 1.6;
}

.contenedor {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ==================== COLORES ==================== */
:root {
    --color-primary: #e8f4fd;      /* Azul cielo muy claro */
    --color-secondary: #d4ecf9;     /* Azul cielo claro */
    --color-accent: #0a2a59;       /* Azul oscuro del PDF */
    --color-accent-dark: #38b6ff;   /* Azul oscuro */
    --color-text: #1a2a4a;          /* Azul oscuro para texto */
    --color-text-light: #4a6a8a;    /* Azul grisáceo */
    --color-card-bg: #ffffff;       /* Fondo blanco para tarjetas */
    --color-shadow: rgba(26, 42, 74, 0.08);
    --color-border: #b8d8f0;        /* Azul claro para bordes */
}

/* ==================== MENÚ FIJO - FONDO BLANCO ==================== */
#menu-principal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: #ffffff;
    padding: 10px 0;
    border-bottom: 2px solid #0a2a59;
    box-shadow: 0 2px 30px rgba(0,0,0,0.08);
}

#menu-principal .contenedor {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* LOGO - IZQUIERDA */
.logo {
    flex-shrink: 0;
    margin-right: 30px;
}

.logo a {
    display: block;
    text-decoration: none;
}

.logo-img {
    height: 60px;
    width: auto;
    display: block;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.logo-img:hover {
    transform: scale(1.05);
}

/* MENÚ NAV - DERECHA */
nav {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

nav ul {
    display: flex;
    list-style: none;
    gap: 35px;
    margin: 0;
    padding: 0;
}

nav ul li a {
    color: #1a2a4a;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1.5px;
    transition: color 0.3s ease;
    text-transform: uppercase;
    padding: 5px 0;
    position: relative;
}

nav ul li a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: #38b6ff;
    transition: width 0.3s ease;
}

nav ul li a:hover {
    color: #38b6ff;
}

nav ul li a:hover::after {
    width: 100%;
}

/* WhatsApp - DERECHA */
.menu-whatsapp {
    flex-shrink: 0;
    margin-left: 30px;
}

.menu-whatsapp a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    background: #25D366;
    padding: 8px 20px;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}

.menu-whatsapp a:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 25px rgba(37, 211, 102, 0.5);
}

.menu-whatsapp svg {
    width: 20px;
    height: 20px;
}

.menu-hamburguesa {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 5px;
}

.menu-hamburguesa span {
    width: 28px;
    height: 3px;
    background: #1a2a4a;
    border-radius: 3px;
    transition: all 0.3s ease;
}

/* ==================== SECCIÓN INICIO (VIDEO) ==================== */
#inicio {
    height: 100vh;
    position: relative;
    overflow: hidden;
    margin-top: 0;
}

.video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.overlay-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.15);
}

/* ==================== SECCIÓN NOSOTROS ==================== */
#nosotros {
    padding: 80px 0;
    background: #e8f4fd;
}

.titulo-seccion {
    text-align: center;
    font-size: 38px;
    font-weight: 800;
    margin-bottom: 50px;
    color: #1a2a4a;
    letter-spacing: 2px;
}

.titulo-seccion::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: #38b6ff;
    margin: 10px auto 0;
}

.grid-nosotros {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.card-nosotros {
    background: #ffffff;
    padding: 35px 25px;
    border-radius: 16px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #d4ecf9;
    box-shadow: 0 4px 15px rgba(26, 42, 74, 0.06);
}

.card-nosotros:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(26, 42, 74, 0.1);
}

.card-imagen {
    width: 100%;
    height: 180px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px; 
    border: 2px solid #d4ecf9;
    
    /* ESTO ES LO NUEVO: */
    padding: 20px; 
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f4f9fd; 
}

.card-imagen img {
    width: auto;    
    height: 100%;   
    max-width: 80%; 
    object-fit: contain; 
    transition: transform 0.3s ease;
}

.card-imagen img:hover {
    transform: scale(1.05);
}

.card-nosotros h3 {
    font-size: 22px;
    color: #38b6ff;
    margin-bottom: 15px;
    font-weight: 700;
}

.card-nosotros p {
    color: #4a6a8a;
    font-size: 14px;
    line-height: 1.8;
    text-align: left;
}

.lista-valores {
    list-style: none;
    text-align: left;
    padding-left: 10px;
}

.lista-valores li {
    padding: 8px 0;
    color: #4a6a8a;
    font-weight: 500;
}

/* ==================== SECCIÓN SERVICIOS ==================== */
#servicios {
    padding: 80px 0;
    background: #f7f9fc;
}

.grid-servicios {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 50px;
}

/* Estilo base de las tarjetas (Fondo blanco por defecto) */
.servicio-item {
    display: block;
    text-align: center;
    background: #ffffff;
    padding: 12px;
    border-radius: 24px;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 2px solid transparent;
}

/* Contenedor de la imagen - AHORA MUCHO MÁS ALTO (RECTANGULAR) */
.servicio-imagen {
    width: 100%;
    height: 370px; /* <--- AUMENTÉ LA ALTURA A 250px PARA QUE SEA RECTANGULAR */
    border-radius: 16px;
    overflow: hidden;
    background-color: #ffffff;
    border: 2px solid #d4ecf9; /* Marco azul claro alrededor de la imagen */
    transition: all 0.3s ease;
}

/* La imagen se estira para llenar el rectángulo sin deformarse */
.servicio-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recorta los sobrantes para llenar el espacio */
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* El texto base (Negro) */
.servicio-item p {
    font-weight: 800;
    color: #1a2a4a;
    font-size: 14px;
    letter-spacing: 0.5px;
    margin-top: 14px;
    margin-bottom: 5px;
    transition: color 0.3s ease;
}

/* =========================================================== */
/* EFECTO AL PASAR EL MOUSE (ILUMINACIÓN AZUL)                  */
/* =========================================================== */
.servicio-item:hover {
    background: #1a2a4a;
    border-color: #4da6ff; /* Borde azul eléctrico */
    
    /* Resplandor azul exterior */
    box-shadow: 0 0 25px rgba(77, 166, 255, 0.6), 
                0 10px 30px rgba(26, 42, 74, 0.3);
    transform: translateY(-10px) scale(1.02);
}

/* Borde de la imagen desaparece al pasar el mouse */
.servicio-item:hover .servicio-imagen {
    border-color: transparent;
}

/* La imagen crece suavemente */
.servicio-item:hover .servicio-imagen img {
    transform: scale(1.08);
}

/* El texto se vuelve blanco */
.servicio-item:hover p {
    color: #ffffff; 
    text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

/* =========================================================== */
/* ANIMACIÓN ESPECIAL: PANTALLA VIAL                            */
/* =========================================================== */
.enlace-pantalla-vial {
    cursor: pointer;
}

.boton-ver-mas {
    display: inline-block;
    margin-top: 10px;
    padding: 5px 20px;
    background: #38b6ff;
    color: #ffffff !important;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    text-shadow: none !important;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(232, 69, 60, 0.3);
    animation: latido-boton 1.8s infinite ease-in-out;
}

@keyframes latido-boton {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); box-shadow: 0 6px 15px rgba(232, 69, 60, 0.5); }
    100% { transform: scale(1); }
}

.enlace-pantalla-vial:hover .boton-ver-mas {
    animation-play-state: paused;
    background: #ffffff;
    color: #38b6ff !important;
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

/* ==================== SEPARADORES Y DETALLES ==================== */
.separador-servicios {
    height: 2px;
    background: linear-gradient(to right, transparent, #38b6ff, transparent);
    margin: 50px 0;
}

.servicio-detalle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 40px;
    background: #ffffff;
    padding: 30px;
    border-radius: 16px;
    border: 1px solid #c0dcee;
    box-shadow: 0 2px 15px rgba(26, 42, 74, 0.05);
}

.servicio-detalle.reverso {
    direction: rtl;
}
.servicio-detalle.reverso .detalle-texto {
    direction: ltr;
}

.detalle-imagen {
    width: 100%;
    height: 280px;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid #d4ecf9;
}
.detalle-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.detalle-imagen img:hover { transform: scale(1.05); }

.detalle-texto h3 {
    font-size: 22px;
    color: #38b6ff;
    margin-bottom: 15px;
    font-weight: 700;
}
.detalle-texto p {
    color: #4a6a8a;
    font-size: 15px;
    line-height: 1.8;
}

.servicios-extra {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 40px;
}

.extra-item {
    background: #ffffff;
    padding: 30px;
    border-radius: 16px;
    border: 1px solid #c0dcee;
    box-shadow: 0 2px 15px rgba(26, 42, 74, 0.05);
}

.extra-item h3 {
    font-size: 20px;
    color: #38b6ff;
    margin-bottom: 12px;
}
.extra-item p {
    color: #4a6a8a;
    font-size: 14px;
    margin-bottom: 20px;
}

.extra-imagen {
    width: 100%;
    height: 200px;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid #d4ecf9;
}
.extra-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.extra-imagen img:hover { transform: scale(1.05); }

/* ==================== SERVICIOS EXTRA (DISEÑO TIPO TARJETA) ==================== */
.grid-servicios-extra {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 40px; /* Espacio después de las tarjetas superiores */
    margin-bottom: 40px;
}

/* Tarjeta blanca individual */
.extra-item-card {
    background: #ffffff;
    border-radius: 20px;
    border: 2px solid #d4ecf9;
    box-shadow: 0 4px 15px rgba(26, 42, 74, 0.05);
    padding: 20px;
    display: flex;
    align-items: stretch; /* Esto hace que la imagen y el texto tengan la misma altura */
    gap: 25px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
}

/* EFECTO HOVER (Igual que las tarjetas de arriba) */
.extra-item-card:hover {
    transform: translateY(-8px) scale(1.01);
    border-color: #4da6ff; /* Borde azul brillante */
    box-shadow: 0 0 25px rgba(77, 166, 255, 0.4), 
                0 10px 30px rgba(26, 42, 74, 0.15);
}

/* Contenedor de la imagen (Ocupa la mitad izquierda o derecha) */
.extra-imagen-lado {
    width: 45%; /* Ocupa el 45% del ancho de la tarjeta */
    border-radius: 16px;
    overflow: hidden;
    flex-shrink: 0; /* Evita que se encoja */
    border: 1px solid #e8f4fd;
}

/* La imagen se estira para llenar TODO el alto del bloque */
.extra-imagen-lado img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* CLAVE: LLENA EL ALTO COMPLETO */
    display: block;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.extra-item-card:hover .extra-imagen-lado img {
    transform: scale(1.06);
}

/* Contenedor del texto */
.extra-texto-lado {
    width: 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 10px;
}

.extra-texto-lado h3 {
    font-size: 22px;
    color: #38b6ff;
    font-weight: 700;
    margin-bottom: 12px;
    transition: color 0.3s ease;
}

.extra-item-card:hover .extra-texto-lado h3 {
    color: #1a2a4a; /* El título cambia a azul oscuro al hacer hover */
}

.extra-texto-lado p {
    color: #4a6a8a;
    font-size: 15px;
    line-height: 1.6;
}

/* ==================== RESPONSIVE (Móviles) ==================== */
@media (max-width: 992px) {
    .grid-servicios-extra {
        grid-template-columns: 1fr; /* En tablets, uno debajo del otro */
    }
}

@media (max-width: 768px) {
    .extra-item-card {
        flex-direction: column; /* En celulares, imagen arriba, texto abajo */
        padding: 15px;
    }
    
    .extra-imagen-lado, 
    .extra-texto-lado {
        width: 100%;
    }

    .extra-imagen-lado {
        height: 200px; /* Altura fija para la imagen en móviles */
    }
}


/* ==================== CLIENTES - CARRUSEL (GRANDE) ==================== */
.clientes-section {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 2px solid #d4ecf9;
    width: 100vw; /* Ocupa todo el ancho de la pantalla */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden; /* Esconde lo que se salga de la pantalla */
    background: #d4ecf9; /* Mismo fondo que el resto de la web */
}

.clientes-section h3 {
    text-align: center;
    font-size: 28px;
    margin-bottom: 30px;
    color: #1a2a4a;
    font-weight: 700;
    position: relative;
    z-index: 2;
}

.clientes-section h3::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: #38b6ff;
    margin: 10px auto 0;
}

.carrusel-clientes {
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* Efecto de degradado a los lados para suavizar la entrada/salida */
.carrusel-clientes::before,
.carrusel-clientes::after {
    content: '';
    position: absolute;
    top: 0;
    width: 15%; /* Un poco más de degradado para que no se corte de golpe */
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.carrusel-clientes::before {
    left: 0;
    background: linear-gradient(to right, #d4ecf9, transparent);
}

.carrusel-clientes::after {
    right: 0;
    background: linear-gradient(to left, #d4ecf9, transparent);
}

/* El track que se mueve */
.carrusel-track {
    display: flex;
    gap: 30px; /* Espacio visual mínimo entre logos */
    animation: scroll-clientes 50s linear infinite; /* Un poco más lento para apreciarlos bien */
    width: max-content;
    padding: 20px 0;
}

/* Animación del carrusel */
@keyframes scroll-clientes {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* -- ELIMINACIÓN DE TARJETAS Y AGRANDAMIENTO DE IMÁGENES -- */
.cliente-item {
    /* ELIMINAMOS EL ANCHO Y ALTO FIJO */
    width: auto; 
    height: 240px; /* Altura fija grande para que se vean altos */
    max-width: 350px; /* Ancho máximo para que no se estiren demasiado */
    
    background: transparent; 
    border: none; 
    box-shadow: none; 
    border-radius: 0;
    
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: none;
    padding: 0 10px; /* Un pequeño respiro interno */
}

/* Las imágenes ahora se adaptan a la altura */
.cliente-item img {
    width: auto; /* El ancho se ajusta automáticamente */
    height: 100%; /* Ocupa toda la altura disponible (160px) */
    max-width: 100%;
    object-fit: contain; 
    display: block;
}


#pantalla-vial {
    padding: 120px 0 60px;
    background: #d4ecf9;
    min-height: 100vh;
}

.titulo-pantalla-vial {
    text-align: center;
    font-size: 44px;
    font-weight: 800;
    color: #1a2a4a;
    margin-bottom: 40px;
}

.titulo-pantalla-vial::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: #38b6ff;
    margin: 10px auto 0;
}

.pv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
}

.pv-imagen {
    width: 100%;
    height: 400px;
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid #ffffff;
    box-shadow: 0 4px 20px rgba(26, 42, 74, 0.1);
}

.pv-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.pv-imagen img:hover {
    transform: scale(1.03);
}

.pv-info {
    background: #ffffff;
    padding: 35px;
    border-radius: 16px;
    border: 1px solid #c0dcee;
    box-shadow: 0 2px 15px rgba(26, 42, 74, 0.06);
}

.pv-info h2 {
    font-size: 28px;
    color: #1a2a4a;
    margin-bottom: 20px;
}

.pv-lista {
    list-style: none;
    margin: 20px 0;
}

.pv-lista li {
    padding: 10px 0;
    border-bottom: 1px solid #e8f4fd;
    color: #4a6a8a;
    font-weight: 500;
}

.pv-lista li strong {
    color: #38b6ff;
}

.pv-especificaciones {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin: 30px 0;
}

.pv-espec {
    background: #f0f8ff;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    border: 1px solid #d4ecf9;
}

.pv-label {
    display: block;
    font-size: 11px;
    color: #6a8aaa;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pv-valor {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #1a2a4a;
    margin-top: 5px;
}

.pv-botones {
    display: flex;
    gap: 15px;
    margin-top: 30px;
}

.btn-saber-mas {
    padding: 14px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    background: transparent;
    color: #1a2a4a;
    border: 2px solid #1a2a4a;
    transition: all 0.3s ease;
    flex: 1;
}

.btn-saber-mas:hover {
    background: #1a2a4a;
    color: #ffffff;
    transform: scale(1.05);
}

.btn-cotizar-pv {
    padding: 14px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    background: #38b6ff;
    color: #ffffff;
    border: 2px solid #38b6ff;
    transition: all 0.3s ease;
    flex: 1;
}

.btn-cotizar-pv:hover {
    background: #c7352d;
    transform: scale(1.05);
}

.pv-mapa {
    margin-top: 50px;
    background: #ffffff;
    padding: 25px;
    border-radius: 16px;
    border: 1px solid #c0dcee;
    box-shadow: 0 2px 15px rgba(26, 42, 74, 0.06);
}

.pv-mapa h3 {
    font-size: 22px;
    color: #1a2a4a;
    margin-bottom: 15px;
}

.pv-mapa iframe {
    border-radius: 12px;
    border: 2px solid #d4ecf9;
}

/* ==================== FOOTER ==================== */
footer {
    background: #1a2a4a;
    color: #b8d8f0;
    text-align: center;
    padding: 30px 0;
    border-top: 2px solid #38b6ff;
}

footer a {
    color: #38b6ff;
    text-decoration: none;
    font-weight: 600;
}

footer a:hover {
    color: #ffffff;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 992px) {
    .logo-img {
        height: 50px;
    }
    
    nav ul {
        gap: 25px;
    }
    
    nav ul li a {
        font-size: 13px;
    }
    
    .menu-whatsapp {
        margin-left: 20px;
    }
    
    .grid-contacto {
        grid-template-columns: 1fr;
    }
    
    .pv-grid {
        grid-template-columns: 1fr;
    }
    
    .pv-imagen {
        height: 300px;
    }
    
    .servicio-detalle {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .servicio-detalle.reverso {
        direction: ltr;
    }
    
    .servicios-extra {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    #menu-principal .contenedor {
        justify-content: space-between;
    }
    
    nav {
        order: 3;
        flex: 0 0 100%;
        justify-content: center;
    }
    
    nav ul {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #ffffff;
        padding: 20px;
        text-align: center;
        gap: 15px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }
    
    nav ul.activo {
        display: flex;
    }
    
    nav ul li a {
        color: #1a2a4a;
        font-size: 15px;
        padding: 8px 0;
        display: block;
    }
    
    nav ul li a::after {
        display: none;
    }
    
    .menu-hamburguesa {
        display: flex;
        order: 2;
    }
    
    .menu-whatsapp {
        order: 1;
        margin-left: 0;
    }
    
    .menu-whatsapp a span {
        display: none;
    }
    
    .menu-whatsapp a {
        padding: 8px 12px;
    }
    
    .logo {
        margin-right: 15px;
    }
    
    .logo-img {
        height: 40px;
    }
    
    .titulo-seccion {
        font-size: 30px;
    }
    
    .grid-nosotros {
        grid-template-columns: 1fr;
    }
    
    .grid-servicios {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .servicio-imagen {
        height: 100px;
    }
    
    .detalle-imagen {
        height: 200px;
    }
    
    .pv-especificaciones {
        grid-template-columns: 1fr 1fr;
    }
    
    .pv-botones {
        flex-direction: column;
    }
    
    .titulo-pantalla-vial {
        font-size: 32px;
    }
    
    .cliente-item {
        width: 120px;
        height: 80px;
    }
    
    .carrusel-track {
        gap: 20px;
        animation-duration: 20s;
    }
    
    .servicio-detalle {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .logo-img {
        height: 32px;
    }
    
    .logo {
        margin-right: 10px;
    }
    
    #menu-principal {
        padding: 5px 0;
    }
    
    .menu-whatsapp a {
        padding: 6px 10px;
    }
    
    .menu-whatsapp svg {
        width: 18px;
        height: 18px;
    }
    
    .grid-servicios {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    
    .servicio-item {
        padding: 12px 8px;
    }
    
    .servicio-imagen {
        height: 80px;
    }
    
    .titulo-seccion {
        font-size: 26px;
    }
    
    .card-nosotros {
        padding: 20px 15px;
    }
    
    .formulario-contacto {
        padding: 20px;
    }
    
    .cliente-item {
        width: 90px;
        height: 65px;
        padding: 5px;
    }
    
    .carrusel-track {
        gap: 15px;
        animation-duration: 15s;
    }
    
    .pv-info {
        padding: 20px;
    }
    
    .pv-mapa {
        padding: 15px;
    }
}

/* ==================== ANIMACIÓN PROFESIONAL PARA NOSOTROS ==================== */

.card-nosotros {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
    position: relative;
    will-change: transform;
}

.card-nosotros:hover {
    transform: translateY(-12px); 
    box-shadow: 0 20px 40px rgba(26, 42, 74, 0.15); 
    border-color: #0a2a59; /* <--- CAMBIO: De rojo a azul */
}

.card-imagen {
    transition: all 0.4s ease;
    position: relative;
}

.card-nosotros:hover .card-imagen {
    border-color: #0a2a59; /* <--- CAMBIO: De rojo a azul */
    background-color: #ffffff; 
    box-shadow: inset 0 0 15px rgba(10, 42, 89, 0.05); /* <--- CAMBIO: Sombra azul sutil */
}

.card-imagen img {
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}

.card-nosotros:hover .card-imagen img {
    transform: scale(1.08) rotate(-2deg); 
}

.card-nosotros h3 {
    transition: color 0.3s ease, transform 0.3s ease;
}

.card-nosotros:hover h3 {
    color: #0a2a59; /* <--- CAMBIO: De rojo a azul oscuro corporativo */
    transform: scale(1.02); 
}

.card-nosotros p, 
.card-nosotros .lista-valores li {
    transition: color 0.3s ease;
}

.card-nosotros:hover p,
.card-nosotros:hover .lista-valores li {
    color: #0a2a59; /* <--- CAMBIO: Texto a azul */
}

/* ==================== NUEVO BLOQUE GRANDE (IMAGEN IZQ / TEXTOS DER) ==================== */
.bloque-gran-formato {
    display: flex;
    gap: 40px;
    align-items: stretch;
    margin-top: 20px;
    margin-bottom: 40px;
    background: #ffffff;
    border-radius: 24px;
    padding: 30px;
    border: 2px solid #d4ecf9;
    box-shadow: 0 10px 30px rgba(26, 42, 74, 0.08);
    transition: all 0.4s ease;
}

.bloque-gran-formato:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(26, 42, 74, 0.12);
    border-color: #4da6ff;
}

/* Imagen grande a la izquierda - ACHICADA UN 25% */
.bloque-imagen-principal {
    flex: 0.75; /* Antes era 1.2, ahora es 0.75 (un 25% más chica) */
    border-radius: 20px;
    overflow: hidden;
    border: 2px solid #e8f4fd;
}

.bloque-imagen-principal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.bloque-gran-formato:hover .bloque-imagen-principal img {
    transform: scale(1.03) rotate(-2deg);
}

/* Contenedor de los 3 textos a la derecha - OCUPA MÁS ESPACIO */
.bloque-textos-derecha {
    flex: 1.25; /* Aumentado para que el texto tenga más ancho */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 80px; /* MÁS SEPARACIÓN ENTRE PÁRRAFOS (Antes 25px, ahora 35px) */
}

/* Cada uno de los 3 items de texto */
.item-texto-derecha {
    display: flex;
    align-items: center; /* ICONO CENTRADO VERTICALMENTE CON EL TEXTO */
    gap: 15px;
}

.item-texto-derecha .icono-texto {
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    display: block;
}

.item-texto-derecha h4 {
    font-size: 18px;
    color: #1a2a4a;
    font-weight: 700;
    margin-bottom: 6px;
}

.item-texto-derecha p {
    color: #4a6a8a;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* ==================== BOTÓN DE WHATSAPP ARRIBA ==================== */
.contenedor-boton-whatsapp-arriba {
    text-align: center; 
    margin-bottom: 50px; 
    padding-bottom: 50px; 
    border-bottom: 2px solid #0a2a59;
}

.boton-whatsapp-parpadeante {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 35px;
    background-color: #1a2a4a; 
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
    /* Animación de parpadeo rojo/azul */
    animation: parpadeo-rojo-azul 1.5s infinite alternate;
}

.boton-whatsapp-parpadeante:hover {
    transform: scale(1.05);
    animation-play-state: paused;
    background-color: #38b6ff; /* Rojo al hacer hover */
    box-shadow: 0 0 30px rgba(232, 69, 60, 0.5);
}

.boton-whatsapp-parpadeante svg {
    width: 24px;
    height: 24px;
    fill: #ffffff;
}

@keyframes parpadeo-rojo-azul {
    0% { box-shadow: 0 0 10px rgba(26, 42, 74, 0.3), 0 0 25px rgba(232, 69, 60, 0.3); background-color: #1a2a4a; }
    100% { box-shadow: 0 0 20px #25D366, 0 0 40px #25D366; background-color: #25D366; }
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 992px) {
    .bloque-gran-formato {
        flex-direction: column;
    }
    
    .bloque-imagen-principal {
        height: 300px;
        flex: none; /* Quitar el ancho flexible en móviles */
        width: 100%;
    }
    
    .bloque-textos-derecha {
        flex: none;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .bloque-imagen-principal {
        height: 200px;
    }
    .item-texto-derecha {
        flex-direction: row; /* Mantener icono al lado en móviles */
        align-items: flex-start;
    }
    .contenedor-boton-whatsapp-arriba {
        text-align: center;
    }
}

/* ==================== CONTACTO - BLOQUE ÚNICO ==================== */

/* Contenedor principal del bloque único */
.contacto-bloque-unico {
    background: #ffffff;
    border-radius: 24px;
    border: 2px solid #d4ecf9;
    box-shadow: 0 10px 30px rgba(26, 42, 74, 0.08);
    padding: 40px;
    display: flex;
    gap: 50px;
    align-items: stretch; /* Asegura que ambos lados tengan la misma altura */
    transition: all 0.4s ease;
}

.contacto-bloque-unico:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(26, 42, 74, 0.12);
    border-color: #4da6ff;
}

/* --- LADO IZQUIERDO (INFORMACIÓN) --- */
.contacto-info-lado {
    flex: 0.8; /* Ocupa el 40% del ancho aprox */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 25px;
    border-right: 2px solid #d4ecf9; /* Línea separadora vertical sutil */
    padding-right: 40px;
}

.info-item-unico {
    display: flex;
    align-items: center;
    gap: 20px;
}

.icono-contacto {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8f4fd;
    border-radius: 50%;
    padding: 10px;
}

.icono-contacto img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.info-texto {
    display: flex;
    flex-direction: column;
}

.info-titulo {
    font-size: 13px;
    font-weight: 600;
    color: #6a8aaa;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.info-dato {
    font-size: 16px;
    font-weight: 700;
    color: #1a2a4a;
    text-decoration: none;
    transition: color 0.3s ease;
}

.info-dato:hover {
    color: #38b6ff;
}

/* --- LADO DERECHO (FORMULARIO) --- */
.contacto-form-lado {
    flex: 1.2; /* Ocupa el 60% del ancho aprox */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contacto-form-lado h3 {
    font-size: 24px;
    color: #1a2a4a;
    margin-bottom: 20px;
    font-weight: 700;
    text-align: center;
}

.campo-form {
    margin-bottom: 15px;
}

.campo-form label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1a2a4a;
    margin-bottom: 6px;
}

.campo-form input,
.campo-form textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #d4ecf9;
    border-radius: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    background: #f8faff;
    color: #1a2a4a;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.campo-form input:focus,
.campo-form textarea:focus {
    outline: none;
    border-color: #4da6ff;
    box-shadow: 0 0 0 4px rgba(77, 166, 255, 0.1);
}

.campo-form input::placeholder,
.campo-form textarea::placeholder {
    color: #aaa;
}

/* ========================================================== */
/* BOTÓN ENVIAR: BLANCO CON ILUMINACIÓN AZUL CIELO            */
/* ========================================================== */
.btn-enviar {
    width: 100%;
    background: #ffffff; /* Fondo blanco */
    color: #1a2a4a;       /* Texto azul oscuro */
    padding: 14px;
    border: 2px solid #4da6ff; /* Borde azul cielo */
    border-radius: 50px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.btn-enviar:hover {
    background: #4da6ff; /* Fondo se vuelve azul cielo */
    color: #ffffff;       /* Texto se vuelve blanco */
    border-color: #4da6ff;
    box-shadow: 0 0 20px rgba(77, 166, 255, 0.4); /* Iluminación azul */
    transform: scale(1.02);
}

#mensaje-enviado {
    margin-top: 15px;
    padding: 15px;
    background: #d4edda;
    border-radius: 10px;
    color: #155724;
    font-weight: 600;
    text-align: center;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 992px) {
    .contacto-bloque-unico {
        flex-direction: column;
        padding: 25px;
        gap: 30px;
    }
    
    .contacto-info-lado {
        border-right: none;
        border-bottom: 2px solid #d4ecf9; /* Línea horizontal en móviles */
        padding-right: 0;
        padding-bottom: 20px;
    }
    
    .contacto-info-lado, 
    .contacto-form-lado {
        flex: none;
        width: 100%;
    }
}

/* ==================== CONTACTO - ESTILO AZUL OSCURO ==================== */

/* Ajuste de color de fondo para toda la sección */
#contacto {
    background: #102E6A; /* Azul oscuro exacto de la imagen */
    padding: 80px 0;
    margin: 0;
}

/* Contenedor especial para esta sección (ancho ajustado) */
.contenedor-contacto {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Título grande blanco */
.titulo-contacto-grande {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 44px;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 40px;
}

/* Columnas lado a lado */
.contacto-dos-columnas {
    display: flex;
    gap: 60px;
    align-items: stretch;
}

/* ==================== LADO IZQUIERDO (INFO) ==================== */
.contacto-info-lado {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 25px;
}

/* Cada fila de información */
.info-item-nuevo {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Iconos azules redondos */
.icono-azul {
    width: 38px;
    height: 38px;
    background: #3da5e0; /* Azul claro de los iconos */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
}

/* Textos blancos */
.texto-blanco, 
.texto-blanco-link {
    color: #ffffff;
    font-size: 18px;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
    transition: opacity 0.3s ease;
    line-height: 1.4;
}

.texto-blanco-link:hover {
    opacity: 0.8;
}

/* Logo corporativo abajo */
.logo-contacto {
    margin-top: auto; /* Empuja el logo hacia el fondo de la columna */
    padding-top: 30px;
}

.logo-contacto img {
    max-width: 220px;
    height: auto;
    display: block;
}

/* ==================== LADO DERECHO (FORMULARIO) ==================== */
.contacto-form-lado {
    flex: 1.5;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.input-blanco {
    width: 100%;
    background: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 14px 18px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #102E6A;
    margin-bottom: 12px;
    outline: none;
    transition: box-shadow 0.3s ease;
}

.input-blanco::placeholder {
    color: #888;
}

.input-blanco:focus {
    box-shadow: 0 0 0 3px rgba(61, 165, 224, 0.5); /* Resplandor azul al hacer foco */
}

/* Botón Enviar (Azul claro con texto blanco) */
.btn-enviar-azul-claro {
    width: 100%;
    background: #3da5e0;
    color: #ffffff;
    border: none;
    border-radius: 30px; /* Forma de píldora */
    padding: 14px 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 16px;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s ease;
    margin-top: 5px;
    box-shadow: 0 4px 15px rgba(61, 165, 224, 0.3);
}

.btn-enviar-azul-claro:hover {
    background: #ffffff;
    color: #102E6A;
    transform: scale(1.02);
    box-shadow: 0 6px 25px rgba(61, 165, 224, 0.5);
}

#mensaje-enviado {
    margin-top: 15px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 6px;
    color: #102E6A;
    font-weight: 600;
    text-align: center;
}

/* ==================== RESPONSIVE (Celu / Tablet) ==================== */
@media (max-width: 992px) {
    .contacto-dos-columnas {
        flex-direction: column;
        gap: 40px;
    }
    
    .contacto-info-lado, 
    .contacto-form-lado {
        flex: none;
        width: 100%;
    }

    .logo-contacto img {
        max-width: 180px;
    }
    
    .titulo-contacto-grande {
        font-size: 34px;
    }
}

/* ==================== PÁGINA PANTALLA VIAL (ESTILO NUEVO) ==================== */
#pantalla-vial {
    padding: 120px 0 60px;
    background: #f7f9fc; /* Fondo azul cielo unificado */
    min-height: 100vh;
}

.titulo-pantalla-vial {
    text-align: center;
    font-size: 44px;
    font-weight: 800;
    color: #1a2a4a;
    margin-bottom: 40px;
}
.titulo-pantalla-vial::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background: #38b6ff;
    margin: 10px auto 0;
}

/* Contenedor Flex (Imagen a la izquierda, info a la derecha) */
.pv-contenedor-flex {
    display: flex;
    gap: 40px;
    align-items: stretch;
    margin-bottom: 50px;
}

/* Imagen izquierda (Se estira a lo alto) */
.pv-imagen-lado {
    flex: 1.2;
    border-radius: 20px;
    overflow: hidden;
    border: 2px solid #ffffff;
    box-shadow: 0 4px 20px rgba(26, 42, 74, 0.08);
}

.pv-imagen-lado img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ESTO HACE QUE LA IMAGEN SE VEA COMPLETA Y LLENE EL ALTO */
    display: block;
}

/* Información derecha (Sin tarjeta blanca, sobre el fondo azul) */
.pv-info-lado {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pv-info-lado h2 {
    font-size: 32px;
    color: #1a2a4a;
    margin-bottom: 20px;
    font-weight: 800;
}

.pv-lista-simple {
    list-style: none;
    margin-bottom: 25px;
    padding: 0;
}

.pv-lista-simple li {
    padding: 12px 0;
    border-bottom: 1px solid rgba(26, 42, 74, 0.08);
    color: #4a6a8a;
    font-size: 16px;
    font-weight: 500;
}
.pv-lista-simple li:last-child {
    border-bottom: none;
}
.pv-lista-simple li strong {
    color: #38b6ff;
}

.pv-especificaciones-simple {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 30px;
}

.pv-espec {
    background: rgba(255, 255, 255, 0.6); /* Fondo blanco semitransparente para los datos */
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.pv-label {
    display: block;
    font-size: 11px;
    color: #6a8aaa;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.pv-valor {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #1a2a4a;
    margin-top: 5px;
}

/* Botón SABER MÁS (Único) */
.pv-boton-unico {
    margin-top: 10px;
}

.btn-saber-mas-unico {
    display: inline-block;
    padding: 14px 40px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    background: transparent;
    color: #1a2a4a;
    border: 2px solid #1a2a4a;
    transition: all 0.3s ease;
}

.btn-saber-mas-unico:hover {
    background: #1a2a4a;
    color: #ffffff;
    transform: scale(1.05);
}

/* Mapa */
.pv-mapa {
    margin-top: 40px;
}
.pv-mapa h3 {
    font-size: 22px;
    color: #1a2a4a;
    margin-bottom: 15px;
}
.pv-mapa iframe {
    border-radius: 12px;
    border: 2px solid #ffffff;
    box-shadow: 0 4px 20px rgba(26, 42, 74, 0.08);
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 992px) {
    .pv-contenedor-flex {
        flex-direction: column;
    }
    .pv-imagen-lado {
        height: 350px;
    }
    .pv-info-lado h2 {
        font-size: 28px;
    }
}
@media (max-width: 480px) {
    .pv-imagen-lado {
        height: 250px;
    }
    .pv-especificaciones-simple {
        grid-template-columns: 1fr 1fr;
    }
    .titulo-pantalla-vial {
        font-size: 32px;
    }
}

/* ==================== DIRECCIÓN EN EL MAPA ==================== */
.direccion-mapa {
    font-size: 16px;
    color: #4a6a8a;
    font-weight: 500;
    margin-bottom: 15px;
    background: rgba(255, 255, 255, 0.5); /* Fondo blanco semitransparente */
    padding: 12px 20px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.8);
}

/* ==================== CAPTCHA GOOGLE ==================== */
.g-recaptcha {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.cf-turnstile {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
}