/* ============================================================
   SMARTLEASE — NAVEGACIÓN
   ============================================================
   Contiene: Top bar de contacto, menú desktop, menú móvil PWA,
   botón flotante "Cotiza" y los títulos de sección tipo banner.
   Orden de carga: 3° (después de layout.css)

   LÓGICA DE BREAKPOINTS:
   - Mayor a 1024px  → Menú desktop visible, mobile-nav oculto
   - 768px a 1024px  → Menú hamburguesa oculto (igual que antes)
                        pero SE MUESTRA el mobile-nav para no
                        dejar al usuario sin navegación (FIX)
   - Menor a 768px   → Solo mobile-nav visible
   ============================================================ */


/* ══════════════════════════════════════════════════════════
   BLOQUE: HEADER PRINCIPAL (contenedor pegajoso al top)
   ══════════════════════════════════════════════════════════ */

.main-header {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 1000;          /* Siempre por encima del contenido */
    background: var(--white);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}

/* Contenedor interior con ancho máximo centrado */
.header-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 25px;
    display: flex;
    align-items: center;
    width: 100%;
}


/* ══════════════════════════════════════════════════════════
   BLOQUE: TOP BAR (línea delgada con email y teléfono)
   ══════════════════════════════════════════════════════════ */

.top-bar {
    background: #f8f8f8;
    border-bottom: 1px solid #eee;
    padding: 6px 0;
}

/* Alineado a la derecha */
.top-bar .header-container {
    justify-content: flex-end;
}

/* Grupo de links de contacto */
.top-bar-contact {
    display: flex;
    gap: 25px;
    align-items: center;
}

/* Cada link individual (email / teléfono) */
.contact-item {
    text-decoration: none;
    color: #666;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    white-space: nowrap; /* No rompe en dos líneas */
}

.contact-item i {
    color: var(--primary);
    margin-right: 7px;
    font-size: 0.85rem;
}


/* ══════════════════════════════════════════════════════════
   BLOQUE: BARRA DE NAVEGACIÓN DESKTOP (logo + menú links)
   ══════════════════════════════════════════════════════════ */

.main-nav {
    padding: 15px 0;
    background: var(--white);
}

/* Separación máxima entre logo (izq) y menú (der) */
.main-nav .header-container {
    justify-content: space-between;
}

/* Logo de la empresa */
.logo {
    height: 38px;   /* Reducido: se veía demasiado grande en desktop */
    width: auto;
    display: block;
}

/* Lista horizontal de links del menú */
.desktop-menu ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 0;
    padding: 0;
}

/* Links del menú desktop */
.desktop-menu a {
    text-decoration: none;
    color: #333;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

.desktop-menu a:hover {
    color: var(--primary);
}

/* Botón "CONTACTO" rojo al final del menú */
.btn-contacto-header {
    background: var(--primary);
    color: var(--white) !important;
    padding: 10px 22px;
    border-radius: 50px;
    transition: background 0.3s ease, transform 0.3s ease;
}

.btn-contacto-header:hover {
    background: var(--primary-hover) !important;
    transform: translateY(-2px);
}


/* ══════════════════════════════════════════════════════════
   BLOQUE: MENÚ MÓVIL PWA (barra inferior estilo app nativa)
   ══════════════════════════════════════════════════════════ */

.mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background: var(--nav-bg);
    display: none;              /* Oculto por defecto en desktop */
    grid-template-columns: repeat(5, 1fr);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    z-index: 9999;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(10px); /* Efecto vidrio esmerilado */
}

/* Cada ítem del menú móvil */
.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-decoration: none;
    color: var(--nav-text);
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    transition: color 0.3s ease;
    padding: 8px 0;
}

.mobile-nav-item svg {
    width: 22px;
    height: 22px;
    fill: var(--nav-text);
    transition: fill 0.3s ease;
}

/* Estado activo (sección visible en pantalla) */
.mobile-nav-item.active,
.mobile-nav-item.active svg {
    color: var(--primary);
    fill: var(--primary);
}

/* Ítem especial de WhatsApp */
.nav-whatsapp svg { fill: #25D366; }
.nav-whatsapp     { color: #25D366; }


/* ══════════════════════════════════════════════════════════
   BLOQUE: BOTÓN FLOTANTE "COTIZA" (esquina inferior derecha)
   ══════════════════════════════════════════════════════════ */

.btn-floating-cotiza {
    position: fixed;
    bottom: 90px;           /* Encima del mobile-nav */
    right: 20px;
    background: var(--primary);
    color: var(--white);
    padding: 12px 20px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 20px rgba(221, 10, 20, 0.4);
    z-index: 1000;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    opacity: 1;
    transform: translateY(0);
}

.btn-floating-cotiza:hover {
    background: var(--primary-hover);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(221, 10, 20, 0.5);
}

/* Estado oculto: JS agrega esta clase cuando llega al formulario */
.btn-floating-cotiza.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
}

/* En desktop el botón va un poco más arriba (sin mobile-nav) */
@media (min-width: 769px) {
    .btn-floating-cotiza { bottom: 30px; }
}


/* ══════════════════════════════════════════════════════════
   BLOQUE: TÍTULOS DE SECCIÓN tipo BANNER OSCURO
   (el banner gris oscuro con texto blanco que aparece en
    Flota, Clientes, Sucursales y Contacto)
   ══════════════════════════════════════════════════════════ */

.section-title-banner {
    background-color: var(--dark);
    padding: 20px 0;
    text-align: center;
    width: 100%;
    margin-bottom: 40px;
}

.section-title-banner h2 {
    color: var(--white);
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* Responsive: títulos más pequeños en móvil */
@media (max-width: 768px) {
    .section-title-banner           { margin-bottom: 30px; }
    .section-title-banner h2        { font-size: 1.3rem; letter-spacing: 2px; }
}


/* ══════════════════════════════════════════════════════════
   BLOQUE: REGLAS RESPONSIVE DE NAVEGACIÓN
   ══════════════════════════════════════════════════════════ */

/* Tablets y pantallas medianas (768px – 1024px):
   Se oculta el menú desktop y se activa el mobile-nav.
   FIX: Antes había un gap donde ningún menú era visible. */
@media (max-width: 1024px) {
    .top-bar      { display: none; }       /* Quita la barra de contacto superior */
    .desktop-menu { display: none; }       /* Quita el menú de links horizontales */
    .main-nav .header-container { justify-content: center; } /* Centra el logo */
    .mobile-nav   { display: grid; }      /* Activa el menú inferior */
    body          { padding-bottom: 75px; } /* Espacio para no tapar contenido */
}

/* Móviles pequeños */
@media (max-width: 768px) {
    .logo { height: 38px; }
}


/* ══════════════════════════════════════════════════════════
   BLOQUE: SCROLL-MARGIN-TOP — Fix secciones tapadas por el header
   ══════════════════════════════════════════════════════════
   Problema: el header sticky tiene ~95px de altura. Cuando el
   navegador hace scroll a un #id (ej: #flota), coloca ese
   elemento al borde superior de la ventana y el header lo tapa.
   scroll-margin-top le dice al navegador: "cuando hagas scroll
   a esta sección, deja este espacio libre por encima".
   ══════════════════════════════════════════════════════════ */

/* IDs en <section> (inicio, soluciones, tecnologia):
   100px header desktop + 45px renta-bar = 145px */
#inicio,
#soluciones,
#tecnologia {
    scroll-margin-top: 145px;
}

/* IDs en .section-title-banner (flota, clientes, sucursales, contacto):
   95px header desktop + 45px renta-bar = 140px */
#flota,
#clientes,
#sucursales,
#contacto {
    scroll-margin-top: 140px;
}

/* En tablet/móvil: 70px header + 40px renta-bar = 110px */
@media (max-width: 1024px) {
    #inicio,
    #soluciones,
    #tecnologia {
        scroll-margin-top: 115px;
    }

    #flota,
    #clientes,
    #sucursales,
    #contacto {
        scroll-margin-top: 110px;
    }
}


/* ══════════════════════════════════════════════════════════
   BLOQUE: BARRA ESTÁTICA DE RENTA
   Siempre visible en desktop y móvil, pegada al header sticky
   ══════════════════════════════════════════════════════════ */

.renta-bar {
    width: 100%;
    position: sticky;
    top: 100px;         /* Desktop: top-bar (~32px) + main-nav (~68px) */
    z-index: 999;       /* Un nivel por debajo del header (z-index:1000) */
    background: var(--primary);
    color: var(--white);
    text-align: center;
    padding: 10px 20px;
    font-family: var(--font-main);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.3;
}

.renta-bar .renta-word {
    color: var(--white);
    font-weight: 800;
}

/* Móvil/tablet: top-bar oculto, solo main-nav (~68px). Sin aumentar tipografía */
@media (max-width: 1024px) {
    .renta-bar {
        top: 68px;
        font-size: 0.72rem;
        text-align: center;
        font-weight: 700;
    }

    .renta-bar .renta-word {
        font-weight: 800;
    }
}