/* ==========================================================================
   STARSOFT — Header
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 500;
    background: var(--starsoft-white);
    border-bottom: 1px solid var(--starsoft-border);
    box-shadow: 0 2px 14px rgba(8, 8, 46, 0.04);
}
.site-header::before {
    content: "";
    display: block;
    height: 3px;
    background: var(--starsoft-gold-gradient);
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    height: 78px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.brand-logo-img {
    height: 26px;
    width: auto;
}

.main-nav {
    display: flex;
    flex: 1;
    justify-content: center;
}

.main-nav ul {
    display: flex;
    align-items: center;
    gap: clamp(0.9rem, 1.6vw, 1.9rem);
}

.main-nav a {
    position: relative;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--starsoft-dark-blue);
    padding: 1.7rem 0.1rem;
    display: inline-block;
    transition: color var(--transition-fast);
}

.main-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.55rem;
    height: 3px;
    border-radius: 3px;
    background: var(--starsoft-gold-gradient);
    transform: scaleX(0);
    transition: transform var(--transition-fast);
}

.main-nav a:hover {
    color: var(--starsoft-gold-dark);
}
.main-nav a:hover::after {
    transform: scaleX(1);
}

.main-nav a[aria-current="page"] {
    color: var(--starsoft-gold-dark);
}
.main-nav a[aria-current="page"]::after {
    transform: scaleX(1);
}

.header-cta {
    flex-shrink: 0;
}

/* Botón "Cotiza Ahora" propio del menú móvil: en escritorio ya está
   .header-cta, así que este permanece oculto hasta el breakpoint móvil
   (ver responsive.css), donde reemplaza al ícono circular del header
   mientras el menú está abierto. Selector ".main-nav a.main-nav__cta"
   (en vez de solo ".main-nav__cta") a propósito: ".main-nav a" más abajo
   en este mismo archivo tiene más especificidad (clase + etiqueta) y
   pisaría "display" si el nuestro fuera solo una clase. */
.main-nav a.main-nav__cta {
    display: none;
}

.header-cta .btn-red {
    padding: 0.75rem 1.4rem;
    font-size: 0.85rem;
}

/* ---- Desplegable "Productos" ---- */
.has-dropdown {
    /* Ancla .nav-submenu (position: absolute) a este <li>. Sin esto, el
       menú se posicionaba respecto a .site-header (el único ancestro con
       position != static), quedando centrado en medio de toda la pantalla
       en vez de bajo el enlace "Productos": al mover el mouse hacia el
       menú se salía del área con :hover y el menú se cerraba de golpe,
       antes de poder hacer clic en un ítem. */
    position: relative;
}
.has-dropdown > a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.has-dropdown__chevron {
    transition: transform var(--transition-fast);
}
body.hover-ready .has-dropdown:hover .has-dropdown__chevron,
.has-dropdown:focus-within .has-dropdown__chevron {
    transform: rotate(180deg);
}

/* Posicionamiento absoluto + apertura por :hover del desplegable "Productos":
   solo tiene sentido en escritorio (mouse real). Restringido a >=768px a
   propósito: estas reglas usan varias clases combinadas y terminan con más
   especificidad que ".main-nav.is-open .nav-submenu" (responsive.css, que
   fuerza el submenú a estar siempre visible y en flujo normal en móvil). Sin
   este límite de ancho, un :hover "fantasma" que algunos navegadores móviles
   disparan tras un toque (junto con body.hover-ready) le gana la pulseada en
   "transform" a la regla móvil, desplazando el submenú medio ancho propio
   hacia la izquierda y cortando su texto contra el borde de la pantalla. */
@media (min-width: 768px) {
    .nav-submenu {
        position: absolute;
        top: 100%;
        left: 50%;
        width: max-content;
        background: var(--starsoft-white);
        border: 1px solid var(--starsoft-border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-hover);
        padding: 0.4rem;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        /* .main-nav ul ya define gap (clamp(...)) para el menú principal; como
           .nav-submenu también es un <ul> dentro de .main-nav, esa regla (más
           específica: clase + elemento) lo alcanza también, así que hay que
           anularla con !important aquí. */
        gap: 0 !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        /* Un poco de "colchón" invisible arriba: da margen para que el mouse
           llegue al menú sin perder el :hover en el trayecto. */
        margin-top: -6px;
        padding-top: calc(0.4rem + 6px);
        transform: translate(-50%, 8px);
        transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
        z-index: 600;
    }
    /* El :hover real solo cuenta tras un mousemove en esta página (ver main.js):
       evita que un cursor que quedó físicamente sobre este punto al navegar
       (p. ej. al hacer clic en un ítem de este mismo submenú) reabra el menú
       fantasma sobre el contenido de la página recién cargada. */
    body.hover-ready .has-dropdown:hover .nav-submenu,
    .has-dropdown:focus-within .nav-submenu,
    .has-dropdown.is-open .nav-submenu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate(-50%, 0);
    }
}
.nav-submenu a {
    display: block;
    padding: 0.5rem 0.9rem !important;
    font-size: 0.82rem;
    color: var(--starsoft-dark-blue);
    border-radius: 8px;
    white-space: nowrap;
}
.nav-submenu a::after {
    display: none;
}
.nav-submenu a:hover,
.nav-submenu a:focus-visible {
    background: var(--starsoft-light-gray);
    color: var(--starsoft-gold-dark);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    flex-shrink: 0;
}
.nav-toggle span {
    display: block;
    width: 24px;
    height: 2.5px;
    background: var(--starsoft-dark-blue);
    border-radius: 2px;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg);
}