/* ─────────────────────────────────────────────────────────────────────────
   MENÚ "DOS RAYAS"

   Botón discreto que despliega el sumario de páginas. No es una hamburguesa:
   las rayas son de distinta longitud, así se lee como una lista, no como un
   menú de plantilla. Al abrir se cruzan en aspa.

   El panel reutiliza el componente firma de la marca (sumario de libro):
   número en mono ámbar + título + línea fina.

   Se usa en index.html, servicios.html y guia.html. Depende de las variables
   de color que cada página define en su :root (--navy-soft, --amber, --white).
   ───────────────────────────────────────────────────────────────────────── */

.nav-dcha {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* ─── El botón ─── */
.nav-mas {
  /* 44x44 de zona de toque (WCAG 2.5.5). Las rayas siguen midiendo 22px:
     el área extra es aire alrededor, no un botón más gordo. */
  flex: 0 0 auto;          /* que el flex de la barra no lo encoja */
  width: 44px;
  height: 44px;
  margin: -7px -11px;      /* compensa el área extra: la barra no se descuadra */
  padding-right: 11px;     /* las rayas se quedan donde estaban */
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  -webkit-tap-highlight-color: transparent;
}
.nav-mas-raya {
  display: block;
  height: 1.5px;
  border-radius: 1px;
  background: var(--white);
  transition: width 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
              background-color 0.2s ease;
}
.nav-mas-raya:nth-child(1) { width: 22px; }
.nav-mas-raya:nth-child(2) { width: 13px; }

.nav-mas:hover .nav-mas-raya { background: var(--amber); }
.nav-mas:hover .nav-mas-raya:nth-child(2) { width: 22px; }
.nav-mas:focus-visible { outline: 2px solid var(--amber); outline-offset: 6px; }

/* Abierto: las dos rayas se igualan y se cruzan */
.nav-mas[aria-expanded="true"] .nav-mas-raya { width: 22px; background: var(--amber); }
.nav-mas[aria-expanded="true"] .nav-mas-raya:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
.nav-mas[aria-expanded="true"] .nav-mas-raya:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }

/* ─── El panel: el sumario ─── */
.nav-panel {
  position: absolute;
  top: calc(100% + 1px);
  /* Cada barra tiene su propio padding lateral: la página lo declara con
     --nav-panel-right para que el panel quede a plomo con el botón. */
  right: var(--nav-panel-right, 3rem);
  min-width: 19rem;
  padding: 0.3rem 1.7rem 0.9rem;
  background: var(--navy-soft);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: none;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.nav-panel[hidden] { display: none; }

.np-fila {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  text-decoration: none;
  opacity: 0;
  transform: translateY(-6px);
  animation: npEntra 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.np-fila:last-child { border-bottom: none; }
.np-fila:nth-child(1) { animation-delay: 0.04s; }
.np-fila:nth-child(2) { animation-delay: 0.11s; }

@keyframes npEntra {
  to { opacity: 1; transform: none; }
}

.np-num {
  flex: 0 0 auto;
  width: 1.6rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.76rem;
  color: var(--amber);
}
.np-tit {
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--white);
  transition: color 0.18s ease;
}
.np-fila:hover .np-tit,
.np-fila:focus-visible .np-tit { color: var(--amber); }

@media (prefers-reduced-motion: reduce) {
  .nav-mas-raya { transition: none; }
  .np-fila { animation: none; opacity: 1; transform: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   ESCRITORIO (≥ 900px): el menú deja de ser desplegable.
   Los enlaces se muestran en línea y el botón de las dos rayas desaparece.
   En móvil todo sigue exactamente igual que antes. (25-ago-2026)
   ───────────────────────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  .nav-mas { display: none; }

  /* Orden en la barra: marca ... enlaces ... boton "Hablamos".
     Sin esto el panel cae detras de .nav-dcha y el boton queda en medio.
     El selector cubre las dos estructuras de nav que hay en el sitio:
     la portada usa .barra > .marca y las de servicio nav > .nav-name. */
  nav[aria-label="Principal"] { display: flex; align-items: center; }
  nav[aria-label="Principal"] > .marca,
  nav[aria-label="Principal"] > .nav-name { order: 0; }
  nav[aria-label="Principal"] > .nav-panel { order: 1; margin-left: auto; }
  nav[aria-label="Principal"] > .nav-dcha  { order: 2; margin-left: 2.4rem; }

  .nav-panel,
  .nav-panel[hidden] {
    display: flex;
    align-items: center;
    gap: 2rem;
    position: static;
    right: auto;
    top: auto;
    min-width: 0;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    animation: none;
  }

  .np-fila {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    padding: 0;
    border: none;
    white-space: nowrap;
  }
  .np-fila::after { display: none; }

  .np-num {
    font-size: 0.62rem;
    opacity: 0.55;
  }
  .np-tit {
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--tx-2, #d7e0ee);
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: color 0.18s ease, border-color 0.18s ease;
  }
  .np-fila:hover .np-tit,
  .np-fila:focus-visible .np-tit {
    color: var(--white, #fff);
    border-bottom-color: var(--amber, #5ce0d0);
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   NAV STICKY (26-ago-2026)
   Transparente mientras estas arriba: el hero se ve entero, sin barra que
   lo corte. Al bajar aparece el fondo con desenfoque y la barra se estrecha.
   Vale para las dos estructuras de nav del sitio.
   ───────────────────────────────────────────────────────────────────────── */
nav[aria-label="Principal"] {
  /* 🚩 28-ago: el `display: flex` FALTABA aquí. Este fichero coloca el nav,
     pero el reparto horizontal lo declaraba cada página en su <style>… y
     /guia no lo hacía: su nav caía a `display: block` y el logo y los
     enlaces se apilaban a la izquierda, uno debajo del otro (127px de alto
     en vez de 78). Se notaba en móvil, que es donde no sobra sitio.
     Es el mismo agujero que ya se pagó con el COLOR del nav.
     Las páginas que ya lo declaran siguen mandando: su `body > nav` tiene
     más especificidad que este selector, así que ahí no cambia nada. */
  display: flex;
  justify-content: space-between;
  align-items: center;

  position: sticky;
  top: 0;
  z-index: 100;                 /* por debajo del modal, que va a 200 */
  max-width: none;
  margin: 0;
  padding-block: 1.05rem;
  /* 100% y no 100vw: vw incluye el ancho de la barra de scroll, así que el
     nav se centraba sobre 1440 mientras el contenido lo hacía sobre 1425.
     Eran 7,5px de descuadre entre la barra y la página de debajo. */
  padding-inline: max(1.6rem, calc((100% - 1080px) / 2));
  background: transparent;
  border-bottom: 1px solid transparent;
  opacity: 1;
  pointer-events: auto;
  transition: background-color .3s ease, border-color .3s ease,
              padding-block .3s ease, backdrop-filter .3s ease;
}

nav[aria-label="Principal"].con-fondo {
  background: rgba(6, 13, 26, 0.82);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  backdrop-filter: blur(12px) saturate(130%);
  border-bottom-color: rgba(255, 255, 255, 0.07);
  padding-block: 0.72rem;
}

/* Sin desenfoque disponible, se compacta el fondo para que siga siendo legible */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  nav[aria-label="Principal"].con-fondo { background: rgba(6, 13, 26, 0.96); }
}

@media (prefers-reduced-motion: reduce) {
  nav[aria-label="Principal"] { transition: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   MÓVIL — va al FINAL del fichero a propósito: el padding-inline de la barra
   se declara más arriba con la misma especificidad, así que si estos bloques
   fueran antes, el padding lateral de aquí no se aplicaría nunca.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .nav-dcha { gap: 1.1rem; }
  .nav-panel { right: 1.2rem; left: 1.2rem; min-width: 0; }

  /* En 375px el nombre (156) + las dos rayas (44) + el botón (128) suman 328,
     y con el padding lateral se van a 379: cuatro más que la pantalla. El
     navegador lo resolvía partiendo AMBOS en dos líneas y dejando la barra en
     98px de alto. Se recupera el sitio apretando el padding lateral y
     prohibiendo el corte, que aquí nunca es lo que queremos. */
  /* Con el selector completo, no con la clase suelta: cada página define
     .nav-name y .nav-cta en su propio <style>, que se carga DESPUÉS de este
     fichero y gana por orden. Es el mismo patrón que ya usa la portada. */
  nav[aria-label="Principal"] { padding-left: 1.1rem; padding-right: 1.1rem; }
  nav[aria-label="Principal"] .nav-name,
  nav[aria-label="Principal"] .nav-cta { white-space: nowrap; }
  nav[aria-label="Principal"] .nav-cta { padding-left: 1rem; padding-right: 1rem; }
  /* Con solo el nowrap seguían sobrando 80px. El grueso se lo comía el
     espaciado del nombre: 20 letras a 0.15em son 39px de puro aire. */
  nav[aria-label="Principal"] .nav-name { font-size: 12px; letter-spacing: 0.07em; }
  nav[aria-label="Principal"] .nav-cta-flecha { display: none; }   /* la flecha, aquí, no cabe */
  nav[aria-label="Principal"] .nav-dcha { gap: 1rem; }
}

/* Android estrecho (360px y por debajo): un escalón más. */
@media (max-width: 400px) {
  nav[aria-label="Principal"] { padding-left: 0.9rem; padding-right: 0.9rem; }
  nav[aria-label="Principal"] .nav-name { font-size: 11px; letter-spacing: 0.04em; }
  nav[aria-label="Principal"] .nav-cta { font-size: 11px; padding-left: 0.85rem; padding-right: 0.85rem; }
  nav[aria-label="Principal"] .nav-dcha { gap: 0.8rem; }
}