/* RAXG Software - Ultra Responsive Core */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&display=swap');

:root {
    --primary: #0046ad;
    --accent: #00d4ff;
    --cta: #ff4d4d;
    --dark-blue: #001a33;
    --gray-bg: #f4f7fa;
    --text-main: #2d3436;
}

/* 1. Reset Maestro Anti-Scroll */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body { 
    font-family: 'Montserrat', sans-serif; 
    color: var(--text-main); 
    line-height: 1.6; 
    background: #fff;
    overflow-x: hidden; /* Blindaje total contra el scroll lateral */
    width: 100%;
}

/* 2. Contenedor Fluido */
.container { 
    width: 100%;
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 clamp(1rem, 5%, 2rem); /* Margen que se ajusta al tamaño de pantalla */
}

/* 3. Tipografía Fluida (Se ajusta sola sin Media Queries) */
h1 { font-size: clamp(2rem, 8vw, 3.5rem); font-weight: 800; }
h3 { font-size: clamp(1.2rem, 4vw, 1.8rem); }

/* Navegación */
.navbar { 
    background: #fff; 
    padding: clamp(10px, 2vw, 20px) 0; 
    position: sticky; 
    top: 0; 
    z-index: 1000; 
    box-shadow: 0 2px 15px rgba(0,0,0,0.1); 
}

.nav-content { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    flex-wrap: wrap; /* Para que el logo y menú no choquen en pantallas mini */
}

/* Hero Section: El corazón de la respuesta */
.hero { 
    padding: clamp(40px, 10vw, 100px) 0; 
    background: linear-gradient(135deg, var(--dark-blue) 0%, #003366 100%); 
    color: #fff; 
}

.hero-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Magia pura: se vuelve 1 o 2 columnas según el espacio */
    gap: clamp(2rem, 5vw, 4rem); 
    align-items: center; 
}

/* Lista de Beneficios (Solución al error de tu foto) */
.benefit-list {
    list-style: none;
}

.benefit-list li { 
    margin-bottom: 1rem; 
    display: grid; 
    grid-template-columns: 24px 1fr; /* Columna fija para el icono, flexible para el texto */
    gap: 15px; 
    align-items: start;
}

.benefit-list i { color: var(--accent); font-size: 1.2rem; }

/* Formulario Blindado */
.lead-form { 
    background: #fff; 
    padding: clamp(1.5rem, 5vw, 2.5rem); 
    border-radius: 15px; 
    box-shadow: 0 20px 40px rgba(0,0,0,0.3); 
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.lead-form input, .lead-form textarea { 
    width: 100%; 
    padding: 12px; 
    margin-bottom: 1rem; 
    border: 1px solid #ddd; 
    border-radius: 8px; 
    font-size: 16px; /* Evita zoom automático en móviles */
}

/* Botón adaptable */
.btn-cta { 
    background: var(--cta); 
    color: #fff; 
    padding: 1rem 2rem; 
    border-radius: 8px; 
    text-decoration: none; 
    font-weight: 700; 
    display: inline-block;
    width: 100%; 
    text-align: center;
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-cta:hover { transform: scale(1.02); }

/* Footer */
footer { 
    background: var(--dark-blue); 
    color: #fff; 
    padding: 4rem 0; 
    text-align: center;
}

/* Media Query solo para ajustes finos */
@media (max-width: 600px) {
    .hero-text { text-align: center; }
    .benefit-list li { text-align: left; }
}