/*
 | Menú y pie compartidos de keyaerp.com.
 |
 | Vive en un archivo aparte y no incrustado en cada página —como el resto del
 | sitio— por dos razones que aquí sí pesan:
 |
 |  1. Son catorce páginas. Con el menú copiado en cada una, agregar un
 |     producto obliga a catorce ediciones idénticas, y basta olvidar una para
 |     que el sitio tenga dos menús distintos según dónde caiga el visitante.
 |  2. El navegador lo descarga UNA vez y lo reutiliza en toda la sesión. Como
 |     casi todo el tráfico llega de Google a una guía y luego navega, esa
 |     caché se cobra en la segunda página, que es justo donde se decide si se
 |     quedan.
 |
 | Los colores se toman de las variables que ya define cada página; aquí sólo
 | se declaran respaldos por si alguna no las trae.
 */

:root {
    --k-bg: #020817;
    --k-line: rgba(148, 163, 184, .14);
    --k-blue: #0ea5e9;
    --k-white: #f1f5f9;
    --k-dim: #94a3b8;
    --k-nav-h: 64px;

    /* La publica keya-nav.js midiendo la barra de oferta, si la hay. */
    --k-banner-h: 0px;
}

/* ══ Barra ══════════════════════════════════════════════════════ */

.k-nav {
    position: fixed;
    top: calc(var(--k-banner-h) + 12px);

    /*
     | Se centra con `left/right: 0` y márgenes automáticos, NO con
     | `translateX(-50%)`.
     |
     | Las páginas del sitio traen una animación de entrada sobre `nav`
     | (`fadeDown`), y una animación gana sobre cualquier declaración normal
     | —incluso sobre un estilo en línea—. Con el método del transform, el
     | menú se quedaba pegado a la mitad derecha de la pantalla y ningún
     | ajuste de CSS lo movía, porque no era una pelea de especificidad sino
     | de cascada de animación. Centrar por caja no depende del transform y
     | por tanto no se lo puede llevar ninguna animación heredada.
     */
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;

    /* Y se anula el de la página, que si no sigue corriendo el menú media
       anchura hacia la izquierda. */
    transform: none;

    /* Por si alguna página anima también opacidad o desplazamiento. */
    animation: none;

    z-index: 900;
    width: min(1180px, calc(100% - 28px));
    display: flex;
    align-items: center;
    gap: 6px;
    height: var(--k-nav-h);
    padding: 0 8px 0 18px;
    border-radius: 999px;
    border: 1px solid var(--k-line);
    background: rgba(6, 15, 30, .72);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.k-nav__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 10px;
}

.k-nav__logo svg { height: 22px; width: auto; display: block; }

.k-nav__links {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.k-nav__link,
.k-nav__trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 13px;
    border-radius: 999px;
    font-size: 14px;
    line-height: 1;
    color: var(--k-dim);
    text-decoration: none;
    background: none;
    border: 0;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s ease, background-color .15s ease;
}

.k-nav__link:hover,
.k-nav__trigger:hover,
.k-nav__trigger[aria-expanded="true"] { color: var(--k-white); background: rgba(148, 163, 184, .1); }

.k-nav__link--on { color: var(--k-white); }

.k-nav__caret { width: 9px; height: 9px; transition: transform .2s cubic-bezier(.23,1,.32,1); }
.k-nav__trigger[aria-expanded="true"] .k-nav__caret { transform: rotate(180deg); }

/* ── Redes y llamada a la acción ── */

.k-nav__end { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

.k-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 999px;
    color: var(--k-dim);
    transition: color .15s ease, background-color .15s ease;
}

.k-social:hover { color: var(--k-white); background: rgba(148, 163, 184, .12); }
.k-social svg { width: 15px; height: 15px; fill: currentColor; }

.k-nav__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 6px;
    padding: 9px 17px;
    border-radius: 999px;
    background: var(--k-white);
    color: #020817;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, transform .15s cubic-bezier(.23,1,.32,1);
}

.k-nav__cta:hover { background: #fff; }
.k-nav__cta:active { transform: scale(.97); }

/* ══ Panel desplegable ══════════════════════════════════════════ */

.k-panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: min(680px, calc(100vw - 28px));
    padding: 14px;
    border-radius: 20px;
    border: 1px solid var(--k-line);
    background: rgba(8, 17, 33, .97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .7);

    /*
     | Sale desde arriba y con una escala que NO parte de cero.
     |
     | Nada en el mundo real aparece de la nada: arrancar en `scale(0)` se ve
     | a truco. Y el origen va en la esquina superior izquierda porque es de
     | donde cuelga —del botón que se acaba de pulsar—, no del centro.
     */
    transform-origin: top left;
    opacity: 0;
    transform: scale(.97) translateY(-4px);
    pointer-events: none;
    transition: opacity .16s ease-out, transform .16s cubic-bezier(.23, 1, .32, 1);
}

.k-drop { position: relative; }
.k-drop[data-abierto="true"] .k-panel { opacity: 1; transform: none; pointer-events: auto; }

/*
 | El puente invisible sobre el hueco.
 |
 | El panel cuelga 10px por debajo del botón, y ese hueco no pertenece a
 | ningún elemento: al mover el ratón del botón hacia una opción, el puntero
 | lo cruza, sale de `.k-drop` y el menú se cierra en la cara del usuario.
 | Es el fallo clásico de los menús con separación, y no se arregla con
 | retardos: se arregla tapando el hueco.
 |
 | Este `::before` pertenece al panel, que sí es descendiente de `.k-drop`,
 | así que el puntero nunca sale mientras baja. Es transparente y sólo existe
 | cuando el panel está abierto — si estuviera siempre, bloquearía los clics
 | de lo que hubiera debajo.
 */
.k-panel::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
}

/*
 | Y un margen a los lados, por la diagonal.
 |
 | Nadie baja en línea recta: se corta hacia la opción que le interesa, y en
 | ese arco el puntero se sale por un costado. Estos 12px de holgura cubren
 | el desvío sin estorbar a nada, porque el panel es más ancho que el botón.
 */
.k-drop::after {
    content: "";
    position: absolute;
    inset: -8px -12px -14px;
    pointer-events: none;
}

.k-drop[data-abierto="true"]::after { pointer-events: auto; }

.k-panel__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }

.k-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 12px;
    border-radius: 13px;
    text-decoration: none;
    transition: background-color .14s ease;
}

.k-item:hover { background: rgba(148, 163, 184, .09); }

.k-item__ico {
    flex-shrink: 0;
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: 9px;
    background: rgba(14, 165, 233, .1);
    color: var(--k-blue);
}

.k-item__ico svg { width: 16px; height: 16px; }

.k-item__nom {
    display: flex; align-items: center; gap: 7px;
    font-size: 14px; color: var(--k-white); line-height: 1.3;
}

.k-item__desc { margin-top: 2px; font-size: 12px; color: var(--k-dim); line-height: 1.45; }

.k-tag {
    font-size: 10px;
    letter-spacing: .04em;
    padding: 2px 7px;
    border-radius: 999px;
    white-space: nowrap;
}

.k-tag--vivo { background: rgba(16, 185, 129, .14); color: #34d399; }
.k-tag--pronto { background: rgba(148, 163, 184, .12); color: var(--k-dim); }

/* Lo que todavía no existe no se puede pulsar: un enlace que no lleva a
   ningún lado gasta la confianza que el menú acaba de ganar. */
.k-item--pronto { cursor: default; opacity: .62; }
.k-item--pronto:hover { background: none; }

.k-panel__sep {
    margin: 10px 4px;
    border: 0;
    border-top: 1px solid var(--k-line);
}

.k-panel__pie {
    margin-top: 4px;
    padding: 11px 12px 6px;
    font-size: 12px;
    color: var(--k-dim);
}

.k-panel__pie a { color: var(--k-blue); text-decoration: none; }
.k-panel__pie a:hover { text-decoration: underline; }

/* ══ Móvil ══════════════════════════════════════════════════════ */

.k-burger {
    display: none;
    width: 38px; height: 38px;
    border: 0; background: none;
    border-radius: 999px;
    color: var(--k-white);
    cursor: pointer;
}

.k-burger svg { width: 19px; height: 19px; }

@media (max-width: 940px) {
    .k-nav { padding-right: 10px; }
    .k-burger { display: grid; place-items: center; }

    .k-nav__links {
        position: absolute;
        top: calc(100% + 10px);
        left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 12px;
        border-radius: 20px;
        border: 1px solid var(--k-line);
        background: rgba(8, 17, 33, .98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        max-height: calc(100vh - var(--k-nav-h) - 40px);
        overflow-y: auto;

        opacity: 0;
        transform: translateY(-6px);
        pointer-events: none;
        transition: opacity .16s ease-out, transform .16s cubic-bezier(.23,1,.32,1);
    }

    .k-nav[data-menu="true"] .k-nav__links { opacity: 1; transform: none; pointer-events: auto; }

    .k-nav__link, .k-nav__trigger { justify-content: space-between; padding: 12px 14px; font-size: 15px; }

    /* En móvil el panel deja de flotar: se despliega en el flujo, que es como
       se espera que funcione un acordeón al tacto. */
    .k-panel {
        position: static;
        width: auto;
        opacity: 1; transform: none; pointer-events: auto;
        display: none;
        padding: 4px 0 8px;
        border: 0; background: none; box-shadow: none;
        backdrop-filter: none;
    }

    .k-drop[data-abierto="true"] .k-panel { display: block; }
    .k-panel__grid { grid-template-columns: 1fr; }

    .k-nav__end .k-social { display: none; }
    .k-nav__cta { margin-left: 2px; padding: 9px 14px; font-size: 13px; }

    /* Las redes se mueven al final del menú desplegado. */
    .k-nav__social-movil { display: flex; gap: 6px; padding: 12px 10px 4px; border-top: 1px solid var(--k-line); margin-top: 6px; }
    .k-nav__social-movil .k-social { display: inline-flex; }
}

@media (min-width: 941px) {
    .k-nav__social-movil { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .k-panel, .k-nav__links, .k-nav__caret, .k-nav__cta { transition: none; }
    .k-nav__cta:active { transform: none; }
}

/* El contenido de la página arranca debajo de la barra flotante. */
body { padding-top: calc(var(--k-banner-h) + var(--k-nav-h) + 24px); }

/*
 | Los destinos de ancla se detienen debajo del menú, no debajo de la nada.
 |
 | Con una barra fija, saltar a `#precios` deja el encabezado escondido tras
 | ella: el usuario aterriza a media tabla sin saber qué está viendo y cree
 | que el enlace lo mandó al lugar equivocado. Importa más desde que el menú
 | enlaza a `/#contacto`.
 */
:target,
section[id],
[id^="k-"] {
    scroll-margin-top: calc(var(--k-banner-h) + var(--k-nav-h) + 28px);
}