/* ==========================================================================
   VARIABLES DE DISEÑO (Fondo Claro y Moderno)
   ========================================================================== */
:root {
    --bg-principal: #f8fafc;       /* Gris ultra claro, descansa la vista */
    --bg-tarjeta: #ffffff;         /* Blanco puro para destacar elementos */
    --texto-principal: #0f172a;    /* Azul oscuro/negro para máxima legibilidad */
    --texto-mutado: #64748b;       /* Gris medio para descripciones */
    --color-rodev: #0284c7;        /* Azul corporativo vibrante para "RODEV" */
    --color-ia: #7c3aed;           /* Morado moderno e innovador para "IA" */
    --gradiente-rodevia: linear-gradient(135deg, #0284c7 0%, #7c3aed 100%);
    --sombra-suave: 0 10px 30px -10px rgba(0, 0, 0, 0.05);
    --sombra-tarjeta: 0 20px 40px -15px rgba(15, 23, 42, 0.06);
    --borde-sutil: 1px solid #e2e8f0;
}

/* ==========================================================================
   ESTILOS GENERALES
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-principal);
    color: var(--texto-principal);
    line-height: 1.6;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* ==========================================================================
   NAVBAR / CABECERA (Adaptada para Menú Hamburguesa)
   ========================================================================== */
header {
    background-color: var(--bg-tarjeta);
    border-bottom: var(--borde-sutil);
    position: fixed; /* Mantiene el menú fijo arriba al hacer scroll */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

.navbar {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    padding: 0.9rem 0;
    position: relative; /* Clave para posicionar el despliegue móvil */
}

/* Contenedor del logo para evitar deformaciones */
.logo-container {
    display: flex;
    align-items: center;
}

.logo-img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Contenedor de enlaces en Escritorio */
.nav-links {
    display: flex;
    list-style: none;
    gap: 1.2rem; 
    align-items: center;
    padding: 0;
    margin: 0;
    margin-left: auto; /* Empuja el menú a la derecha */
}

/* Estilo Base de los Botones Flotantes */
.nav-links a {
    background: var(--gradiente-rodevia);
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.7rem 1.8rem;
    border-radius: 50px;
    border: none;
    box-shadow: 0 8px 20px -6px rgba(2, 132, 199, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
}

/* Efecto HOVER Escritorio */
.nav-links a:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px -5px rgba(2, 132, 199, 0.5);
    opacity: 0.95;
}

/* Botón Hamburguesa (Oculto en PC) */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background: transparent;
    border: none;
    gap: 5px;
    padding: 10px;
    z-index: 1010;
}

.menu-toggle .bar {
    display: block;
    width: 28px;
    height: 3px;
    background: var(--gradiente-rodevia); /* Las líneas toman el estilo corporativo */
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.hero {
    padding: 220px 0 120px 0; /* Ajustado el padding superior por el header fixed */
    text-align: center;
    background: radial-gradient(circle at top, rgba(2, 132, 199, 0.05) 0%, transparent 50%);
}

.hero h1 {
    font-size: 3.2rem;
    margin-bottom: 1.5rem;
    font-weight: 800;
    letter-spacing: -1px;
    color: #0f172a;
}

.hero h1 span {
    background: var(--gradiente-rodevia);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero p {
    font-size: 1.25rem;
    color: var(--texto-mutado);
    max-width: 750px;
    margin: 0 auto 2.5rem auto;
    font-weight: 400;
}

.btn {
    display: inline-block;
    background: var(--gradiente-rodevia);
    color: #ffffff;
    padding: 0.9rem 2.2rem;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 10px 25px -5px rgba(2, 132, 199, 0.3);
    transition: all 0.3s ease;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px -5px rgba(2, 132, 199, 0.4);
}

/* ==========================================================================
   SECCIÓN SERVICIOS / SOLUCIONES
   ========================================================================== */
.servicios {
    padding: 100px 0;
    background-color: #ffffff;
}

.seccion-titulo {
    text-align: center;
    font-size: 2.4rem;
    margin-bottom: 4rem;
    font-weight: 800;
    color: #0f172a;
}

.seccion-titulo span {
    background: var(--gradiente-rodevia);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

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

.tarjeta {
    background-color: var(--bg-principal);
    padding: 3rem 2rem;
    border-radius: 20px;
    border: var(--borde-sutil);
    box-shadow: var(--sombra-suave);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tarjeta:hover {
    transform: translateY(-8px);
    background-color: var(--bg-tarjeta);
    border-color: rgba(2, 132, 199, 0.2);
    box-shadow: var(--sombra-tarjeta);
}

.tarjeta-icono {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    display: inline-block;
    background: rgba(2, 132, 199, 0.06);
    padding: 0.5rem 1rem;
    border-radius: 14px;
}

.tarjeta h3 {
    font-size: 1.35rem;
    margin-bottom: 1rem;
    font-weight: 700;
    color: #0f172a;
}

.tarjeta p {
    color: var(--texto-mutado);
    font-size: 0.95rem;
    line-height: 1.6;
}

.tarjeta-link,
.tarjeta-link h3,
.tarjeta-link p,
.tarjeta-link * {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.tarjeta-cta {
    display: inline-block;
    margin-top: 1.2rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: #0284c7;
}

/* ==========================================================================
   FOOTER (PIE DE PÁGINA)
   ========================================================================== */
footer {
    background-color: #0f172a;
    padding: 56px 0 0 0;
    color: #94a3b8;
}

/* Footer simple (páginas del panel/área de cliente) */
.footer-contenido {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
}
.footer-enlaces {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem 2.5rem;
    list-style: none;
}
.footer-enlaces a {
    color: #cbd5e1;
    text-decoration: none;
    font-size: .92rem;
    font-weight: 500;
    transition: color .2s ease;
}
.footer-enlaces a:hover { color: #38bdf8; }

/* Footer por columnas (páginas públicas) */
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 2.5rem;
    padding-bottom: 2.5rem;
}
.footer-marca {
    font-size: 1.3rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: .5px;
}
.footer-marca span {
    background: var(--gradiente-rodevia);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.footer-brand p {
    font-size: .88rem;
    color: #94a3b8;
    line-height: 1.6;
    margin: .8rem 0 1.1rem;
    max-width: 260px;
}
.footer-social { display: flex; gap: .8rem; }
.footer-social a { color: #cbd5e1; display: inline-flex; transition: color .2s ease; }
.footer-social a:hover { color: #38bdf8; }
.footer-social svg { width: 22px; height: 22px; }
.footer-col h4 {
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 1rem;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: .65rem; }
.footer-col a {
    color: #cbd5e1;
    text-decoration: none;
    font-size: .9rem;
    transition: color .2s ease;
}
.footer-col a:hover { color: #38bdf8; }
.footer-bottom { border-top: 1px solid #1e293b; padding: 1.4rem 0 1.6rem; }
.copyright {
    font-size: 0.83rem;
    color: #64748b;
    text-align: center;
    margin: 0;
}
@media (max-width: 780px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 480px) {
    .footer-grid { grid-template-columns: 1fr; text-align: center; }
    .footer-brand p { margin-left: auto; margin-right: auto; }
    .footer-social { justify-content: center; }
    .footer-col ul { align-items: center; }
}

/* ==========================================================================
   MEDIA QUERY UNIFICADA (Móviles y Tablets)
   ========================================================================== */
@media (max-width: 768px) {
    /* Redimensionamos el logo para que no ocupe toda la pantalla en móviles */
    .logo-img {
        width: 160px !important;
        height: auto !important;
    }

    /* Mostrar botón hamburguesa */
    .menu-toggle {
        display: flex !important;
    }

    /* Transformar el menú flotante en un panel desplegable vertical pulido.
       Se queda SIEMPRE en el DOM (no display:none) y plegado a altura 0, para que
       al pulsar la hamburguesa se despliegue de arriba hacia abajo en vez de
       aparecer de golpe. 'visibility' se retrasa hasta el final del plegado para
       que los enlaces no sean pulsables ni alcanzables con el tabulador. */
    .nav-links {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: 100%; /* Despliega justo debajo del header blanco */
        left: 0;
        width: 100%;
        background-color: var(--bg-tarjeta); /* Fondo blanco limpio en armonía con tu web */
        padding: 0;
        border-bottom: none;
        box-shadow: none;
        gap: 1rem;
        margin-left: 0;
        max-height: 0;
        opacity: 0;
        visibility: hidden;
        overflow: hidden;
        transition: max-height .35s ease, padding .35s ease, opacity .2s ease,
                    visibility 0s linear .35s;
    }

    /* Forzar a que los botones estéticos se vean bien apilados en móvil */
    .nav-links li {
        width: 80%;
    }
    
    .nav-links a {
        display: block;
        text-align: center;
        padding: 0.8rem 0;
    }

    /* Clase activa que inyecta JavaScript al hacer clic */
    .nav-links.active {
        display: flex !important;
        max-height: 480px;   /* holgado: solo marca el tope de la animación */
        opacity: 1;
        visibility: visible;
        padding: 1.5rem 0;
        border-bottom: var(--borde-sutil);
        box-shadow: 0 15px 25px -10px rgba(0, 0, 0, 0.08);
        transition: max-height .35s ease, padding .35s ease, opacity .25s ease .05s,
                    visibility 0s;
    }

    /* Respeta a quien pide menos animación en el sistema */
    @media (prefers-reduced-motion: reduce) {
        .nav-links, .nav-links.active { transition: none; }
    }

    /* Animación fluida de las líneas hacia la "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);
    }

    /* Ajustes extras del resto de la web en móvil */
    .hero h1 { font-size: 2.3rem; }
    .hero p { font-size: 1.1rem; }
    .seccion-titulo { font-size: 1.9rem; }
}
/* ==========================================================================
   SELECTOR DE IDIOMA (cabecera)
   Se monta como un <li class="nav-idioma"> más dentro de .nav-links, para que
   en móvil caiga dentro del menú desplegable sin tocar nada.
   ========================================================================== */
.selector-idioma { position: relative; }
.idioma-actual {
    display: inline-flex; align-items: center; gap: .35rem;
    background: none; border: 1px solid #e2e8f0; border-radius: 10px;
    padding: .45rem .7rem; cursor: pointer;
    font-family: inherit; font-size: .85rem; font-weight: 700; color: var(--texto-principal);
    transition: border-color .2s, background .2s;
}
.idioma-actual:hover { border-color: var(--color-rodev); background: rgba(2,132,199,.05); }
.idioma-actual svg {
    width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.5;
    stroke-linecap: round; stroke-linejoin: round; transition: transform .2s;
}
.selector-idioma.abierto .idioma-actual svg { transform: rotate(180deg); }
.idioma-opciones {
    position: absolute; top: calc(100% + .4rem); right: 0; z-index: 1200;
    list-style: none; margin: 0; padding: .35rem;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
    box-shadow: 0 12px 28px -12px rgba(0,0,0,.18);
    min-width: 150px;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.selector-idioma.abierto .idioma-opciones {
    opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
/* Gana a la regla .nav-links a (píldora con degradado y color !important) */
.nav-links .idioma-opciones a, .idioma-opciones a {
    display: block; padding: .5rem .7rem; border-radius: 8px;
    font-size: .88rem; font-weight: 600;
    background: #fff; color: var(--texto-mutado) !important;
    box-shadow: none; text-decoration: none; transform: none;
    white-space: nowrap;   /* bandera y nombre siempre en la misma línea */
}
.nav-links .idioma-opciones a:hover, .idioma-opciones a:hover {
    background: #f8fafc; color: var(--texto-principal) !important; transform: none; box-shadow: none;
}
.nav-links .idioma-opciones a.activo, .idioma-opciones a.activo {
    color: var(--color-rodev) !important; background: rgba(2,132,199,.08);
}

@media (max-width: 768px) {
    /* Dentro del menú desplegable: la lista se muestra siempre, sin flotar */
    .nav-idioma { width: 80%; }
    .selector-idioma { display: flex; justify-content: center; gap: .5rem; }
    .idioma-actual { display: none; }
    .idioma-opciones {
        position: static; display: flex; gap: .4rem; min-width: 0;
        opacity: 1; visibility: visible; transform: none;
        border: none; box-shadow: none; background: none; padding: 0;
    }
    .idioma-opciones a { border: 1px solid #e2e8f0; }
}