:root {
    --azul-industrial: #0F2B46;
    --azul-claro: #1A4B7A;
    --gris-acero: #6c757d;
    --blanco: #ffffff;
    --fondo-claro: #f8f9fa;
    --wa-green: #25D366;
}

html {
    scroll-behavior: smooth;
    font-family: 'Montserrat', sans-serif;
    color: #333;
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

/* Tipografía */
h1, h2, h3 { color: var(--azul-industrial); font-weight: 800; }
.text-center { text-align: center; }
.mt-4 { margin-top: 2rem; }
.mb-4 { margin-bottom: 2rem; }

/* Botones */
.btn-primary, .btn-secondary {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s ease;
}
.btn-primary { background: var(--azul-industrial); color: var(--blanco); border: 2px solid var(--azul-industrial); }
.btn-primary:hover { background: var(--blanco); color: var(--azul-industrial); }
.btn-secondary { background: transparent; color: var(--blanco); border: 2px solid var(--blanco); }
.btn-secondary:hover { background: var(--blanco); color: var(--azul-industrial); }
.btn-block { width: 100%; border: none; cursor: pointer; font-size: 1.1rem; }

/* Navegación */
.navbar {
    background: var(--blanco);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.nav-container { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; }
.nav-links { list-style: none; display: flex; gap: 20px; align-items: center; margin: 0; }
.nav-links a { text-decoration: none; color: var(--gris-acero); font-weight: 600; }
.nav-links a:hover { color: var(--azul-industrial); }

/* Fix: Botón de navegación forzado a blanco */
.navbar .nav-links a.btn-nav { 
    background-color: var(--azul-claro) !important; 
    color: #ffffff !important; 
    padding: 10px 20px; 
    border-radius: 4px;
    transition: 0.3s;
}
.navbar .nav-links a.btn-nav:hover {
    background-color: var(--azul-industrial) !important;
}

/* Corrección: Forzar color blanco en el botón de navegación */
.nav-links a.btn-nav { 
    background: var(--azul-claro); 
    color: var(--blanco); /* Ahora sí prioriza el blanco */
    padding: 10px 20px; 
    border-radius: 4px;
    transition: 0.3s;
}
.nav-links a.btn-nav:hover {
    background: var(--azul-industrial);
    color: var(--blanco);
}

/* Estilos del Menú Hamburguesa (Oculto en escritorio) */
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
    z-index: 1001;
}
.menu-toggle .bar {
    width: 25px;
    height: 3px;
    background-color: var(--azul-industrial);
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
}

/* Secciones */
section { padding: 80px 0; }
.section-light { background: var(--blanco); }
.section-dark { background: var(--fondo-claro); }
.section-grey { background: #e9ecef; }

/* Hero */
.hero {
    /* Fix: Propiedades separadas para garantizar que cargue la imagen */
    background-image: linear-gradient(rgba(15, 43, 70, 0.85), rgba(15, 43, 70, 0.85)), url('Hero.jpg?v=2');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--blanco);
    text-align: center;
    padding: 120px 0;
}
.hero h1 { color: var(--blanco); font-size: 3rem; margin-bottom: 20px; }
.hero .subheadline { font-size: 1.5rem; margin-bottom: 40px; }
.hero-kpis { display: flex; justify-content: center; gap: 30px; margin-bottom: 40px; font-weight: bold; }
.hero-ctas { display: flex; justify-content: center; gap: 20px; }

/* Grids */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* Cards, Listas e Imágenes */
.card { background: var(--blanco); padding: 30px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); text-align: center; }
.problem-list ul { font-size: 1.1rem; line-height: 1.8; color: var(--gris-acero); }
.highlight-text { font-size: 1.2rem; color: var(--azul-industrial); margin-top: 20px; }
/* Fix: Límite estricto para que la imagen no deforme el sitio */
.image-content { width: 100%; max-width: 600px; margin: 0 auto; }
.image-content img { width: 100%; max-width: 100%; height: auto; display: block; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }

/* Comparativa */
.comparison-table { display: grid; grid-template-columns: 1fr 1fr; max-width: 800px; margin: 0 auto; background: var(--blanco); border-radius: 8px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.col-traditional, .col-agre { padding: 40px; }
.col-traditional { background: var(--fondo-claro); color: var(--gris-acero); }
.col-agre { background: var(--azul-industrial); color: var(--blanco); }
.col-agre h3 { color: var(--blanco); }

/* Formulario */
.lead-form { max-width: 700px; margin: 0 auto; background: var(--blanco); padding: 40px; border-radius: 8px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); }
.form-group { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
input, select { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; font-family: inherit; font-size: 1rem; box-sizing: border-box;}
.form-note { font-size: 0.85rem; color: var(--gris-acero); margin-top: 15px; }

/* Footer */
footer { background: var(--azul-industrial); color: var(--blanco); padding: 60px 0; }
footer a { color: var(--blanco); text-decoration: none; }
.footer-contact p { margin: 5px 0; }

/* WhatsApp Flotante */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 30px;
    right: 30px;
    background-color: var(--wa-green);
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
    z-index: 100;
    transition: transform 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
}
.whatsapp-float:hover { transform: scale(1.1); }
.wa-icon { width: 35px; height: 35px; }

/* === Responsive === */

/* Tablets y móviles en horizontal (Hasta 992px) */
@media (max-width: 992px) {
    /* Mostrar botón hamburguesa */
    .menu-toggle { display: flex; }
    
    /* Configuración del menú desplegable móvil */
    .nav-links { 
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--blanco);
        flex-direction: column;
        padding: 20px 0;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
        transition: clip-path 0.3s ease-in-out;
    }
    
    .nav-links.active {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    
    .nav-links li { width: 100%; text-align: center; margin: 15px 0; }
    
    /* Animación de la hamburguesa convirtiéndose en una "X" */
    .menu-toggle.is-active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .menu-toggle.is-active .bar:nth-child(2) { opacity: 0; }
    .menu-toggle.is-active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}

/* Teléfonos en vertical (Hasta 768px) */
@media (max-width: 768px) {
    .grid-2, .grid-4, .form-group, .comparison-table { grid-template-columns: 1fr; }
    .hero h1 { font-size: 2rem; }
    .hero-ctas { flex-direction: column; }
}