/* ============================================================
   nav.css — LA cabecera del sitio. Un solo componente.
   ============================================================
   Antes vivia por triplicado: .navbar en index.css (home), .subnav
   en landing.css (posts) y una tercera copia dentro del <style> del
   indice del blog. Por eso el boton del blog se quedo MARRON cuando
   ya se habia arreglado el de la home: al estar duplicado, cada copia
   iba por su lado.

   Ahora lo cargan las tres. Lo que se cambie aqui vale para todas.
   ============================================================ */

/* NAVEGACIÓN STICKY — barra de ancho completo pegada arriba.
   Era una pastilla flotante de 1200px separada del borde: ese patron
   ("floating pill nav") se lee hoy como decoracion, y ninguna de las
   referencias lo usa (decagon, steep, stripe y getharvest llevan barra
   completa translucida). Las pildoras se quedan DENTRO: los botones y
   los badges, que es donde el sistema las define. */
.navbar {
    position: fixed;
    top: var(--hero-gap);
    left: var(--hero-gap);
    right: var(--hero-gap);
    width: auto;
    height: 64px;
    /* Muy translucida: se ve pasar el contenido por debajo, que es lo que
       da la sensacion de cristal. El blur alto es lo que mantiene el
       texto legible pese a la transparencia. */
    background-color: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    z-index: 1000;
    animation: fadeInNav 360ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes fadeInNav {
    0%   { opacity: 0.4; }
    100% { opacity: 1; }
}

/* En la home la barra va DENTRO del bloque del hero: se mete un
   --hero-gap mas (el margen del propio hero) por cada lado, de modo que
   queda encima de su fondo oscuro y no en una banda aparte.
   Solo la home tiene hero en bloque; el resto de paginas usan la regla
   de arriba. El nav es un include compartido, por eso la diferencia va
   por clase y no moviendo el marcado. */
.navbar--en-hero {
    top: calc(var(--hero-gap) * 2);
    left: calc(var(--hero-gap) * 2);
    right: calc(var(--hero-gap) * 2);
}

/* =============================================================
   ESTADO ARRIBA DEL TODO — barra transparente sobre el hero
   =============================================================
   Mientras el hero llena la pantalla la barra desaparece: sin fondo,
   sin borde y con el texto en blanco, porque debajo esta el carbon
   con la aurora. Al bajar, el JS quita .navbar--sobre-hero y vuelve
   el cristal claro de la regla base, con su transicion. */
.navbar--sobre-hero {
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: transparent;
}

.navbar--sobre-hero .nav-link       { color: var(--on-night-body); }
.navbar--sobre-hero .nav-link:hover { color: var(--on-night); }
.navbar--sobre-hero .logo           { color: var(--on-night); }
/* El logo ya es blanco de origen: sobre el hero se deja tal cual y se
   retira el invert que lo oscurece para el resto de la pagina. */
.navbar--sobre-hero .logo img       { filter: none; }

/* El icono hamburguesa tambien va en blanco sobre el hero. */
.navbar--sobre-hero .nav-burger span { background: var(--on-night); }

/* El boton del header, mientras la barra esta sobre el hero, es el
   MISMO negro con borde degradado que el CTA del hero. El navbar vive
   fuera de .hero-section, asi que no hereda .inverse y hay que
   repetirlo aqui.
   Sin esto se veian dos botones distintos en la misma pantalla: el del
   header en terracota solido y el del hero en negro. Al bajar el
   scroll la barra pasa a cristal claro y el boton vuelve al terracota
   de la regla base, que es lo correcto sobre fondo blanco. */
/* ══ EL BOTON DEL HEADER ES SECUNDARIO ═════════════════════════════
   [4-sep-2026 v2] Recorrido de este boton, para no repetir los errores:

   1. Era terracota solido sobre claro y negro con halo sobre el hero.
      Cambiaba de color a media pagina y se notaba como un fallo.
   2. Se paso a negro con halo SIEMPRE. Se acabo el salto, pero quedaba
      identico al CTA del hero: dos botones iguales a 550px, los dos
      gritando lo mismo.

   Ahora es el nivel SECUNDARIO (.btn-2 en botones.css): outline
   terracota, sin relleno. Tres cosas a la vez:
     · no cambia con el scroll (el outline vale en claro y en oscuro);
     · no compite con el CTA del hero, que es la conversion de verdad;
     · sigue siendo de la marca, porque el color es el mismo terracota.

   El peso visual lo da el relleno, no el tono: quitandolo el boton
   acompana en vez de mandar. Es lo que hace decagon con su secundario. */
.navbar .nav-btn {
    color: var(--cobalt-700);
    background: transparent;
    /* [4-sep-2026] --cobalt-500 al 55%, no --cobalt-border (26%).
       Medido: el borde al 26% compuesto sobre el nav claro daba 1.37 de
       contraste, cuando WCAG 1.4.11 pide 3.0 para el contorno de un
       control. El boton se veia "apagado" y costaba reconocerlo como
       boton — no era cosa del texto (6.72, correcto), era que el marco
       casi no existia. */
    border: 1px solid var(--cobalt-600); /* opaco: al 70% de alfa hacia falta para pasar 3.0, y opaco da 5.68 sin depender del fondo translucido del nav */
}
.navbar .nav-btn:hover {
    color: var(--cobalt-800);
    border-color: var(--cobalt-500);
    background: var(--cobalt-tint);
    box-shadow: 0 0 0 4px var(--cobalt-tint);
}
/* Sobre el hero oscuro sube al tono claro (6.93 sobre carbon). */
.navbar--sobre-hero .nav-btn {
    color: var(--cobalt-400);
    background: transparent;
    /* Sobre el carbon del hero el borde necesita mas cuerpo todavia: el
       fondo es oscuro y un trazo al 42% se disuelve en el. */
    border-color: rgba(234, 130, 88, 0.60);
}
.navbar--sobre-hero .nav-btn:hover {
    color: var(--cobalt-300);
    border-color: var(--cobalt-400);
    background: rgba(234, 130, 88, 0.10);
    box-shadow: 0 0 0 4px rgba(234, 130, 88, 0.10);
}

/* Con el menu movil abierto la barra recupera su fondo aunque siga
   sobre el hero: si no, el panel desplegado flota sobre el vídeo sin
   superficie que lo sostenga. */
.navbar--sobre-hero:has(.nav-burger.open) {
    background-color: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-color: var(--glass-border);
}
.navbar--sobre-hero:has(.nav-burger.open) .nav-link       { color: var(--ink-mid); }
.navbar--sobre-hero:has(.nav-burger.open) .nav-link:hover { color: var(--ink); }
.navbar--sobre-hero:has(.nav-burger.open) .nav-burger span { background: var(--ink); }
.navbar--sobre-hero:has(.nav-burger.open) .logo img { filter: invert(1) brightness(0.12); }

/* La barra pasa de transparente a cristal sin salto. */
.navbar {
    transition: background-color 260ms var(--ease-standard),
                border-color 260ms var(--ease-standard),
                backdrop-filter 260ms var(--ease-standard);
}

.nav-container {
    height: 100%;
    width: 100%;
    /* Centrado al mismo ancho que .container: con la barra a sangre, el
       contenido tiene que seguir alineado con el resto de la pagina, no
       pegarse a los bordes de la ventana. */
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--gutter-desktop);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 900px) {
    .nav-container { padding: 0 var(--gutter-mobile); }
}

.logo {
    font-family: var(--font-heading);
    font-weight: 300;
    font-size: 1.4rem;
    color: var(--ink);
    text-decoration: none;
    letter-spacing: -0.05em;
    position: relative;
    transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.logo:hover {
    transform: scale(1.05);
}

.logo img {
    height: 24px;
    width: auto;
    display: block;
    filter: invert(1) brightness(0.12);
}

.nav-menu {
    display: flex;
    gap: 32px;
}

.nav-link {
    color: var(--ink-mid);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    transition: color 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.nav-link:hover {
    color: var(--ink);
}


.nav-btn .short-text {
    display: none;
}

@media (max-width: 900px) {
    .nav-btn .full-text {
        display: none;
    }
    .nav-btn .short-text {
        display: inline;
    }
}


/* ---- Hamburguesa (solo móvil) ---- */
.nav-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 10px;
    background: none;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    cursor: pointer;
}

.nav-burger span {
    display: block;
    width: 100%;
    height: 1.5px;
    background: var(--ink);
    border-radius: var(--radius-sm);
    transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.nav-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Panel desplegable móvil */
.nav-mobile {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 18px;
    background-color: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl); /* Sistema Bosque Inteligente: radius-xl, contenedores especiales */
    box-shadow: 0 30px 60px rgba(15, 31, 27, 0.14);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 220ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
    pointer-events: none;
}

.nav-mobile.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.nav-mobile-link {
    color: var(--ink-mid);
    text-decoration: none;
    font-size: 1rem;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    transition: all 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.nav-mobile-link:hover {
    color: var(--ink);
    background: var(--bg-alt);
}

.nav-mobile-cta {
    margin-top: 10px;
    text-align: center;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--night-900);
    background: var(--cobalt-400);
    padding: 14px 16px;
    border-radius: var(--radius-sm); /* Sistema Bosque Inteligente: radio fijo, nunca píldora */
    text-decoration: none;
}

/* ---- Movil: fuera el menu, entra la hamburguesa ----
   Estaba en index.css, dentro de un @media general de la home, asi que
   blog y posts se quedaban SIN hamburguesa al unificar el componente.
   Vive aqui porque es del nav, no de la home. */
@media (max-width: 768px) {
    /* En movil manda la hamburguesa: fuera el menu y el boton de la
       pastilla. Al extraer esto de index.css se colo un `display: flex`
       en .nav-menu (en vez de none) y se perdio .nav-btn, asi que los
       enlaces de escritorio salian apretados y cortados por la derecha
       en las 14 paginas. No se veia como desborde porque body lleva
       overflow-x: hidden, que tapa el sintoma. */
    /* Van con .navbar delante a proposito. botones.css se carga DESPUES
       que este archivo y da `display: inline-block` a .nav-btn; con la
       misma especificidad gana el ultimo archivo, asi que la regla base
       de botones.css se comia este `none`. Con el padre delante este
       selector pesa mas y no depende del orden de carga. */
    .navbar .nav-menu,
    .navbar .nav-btn {
        display: none;
    }
    .nav-burger {
        display: flex;
    }
    .nav-mobile {
        display: flex; /* visible pero oculto por opacity hasta .open */
    }
}