/* =============================================================
   Header / nav — present on every page
   ============================================================= */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  background: rgba(248,246,241,0);
  transition: background .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.site-nav.is-scrolled { background: rgba(248,246,241,.92); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line); }
.nav-inner { height: 100%; max-width: none; padding-left: 40px; padding-right: 40px; display: flex; align-items: center; justify-content: flex-start; gap: 1.5rem; }
.nav-brand { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; }
/* Nav starts transparent over a dark hero/detail-hero — text must default to light
   and only switch to dark once .is-scrolled gives it a solid light background. */
.nav-brand-name, .nav-links a { color: var(--bg); transition: color .4s var(--ease-out); }
.nav-toggle span { background: var(--bg); transition: background .4s var(--ease-out), transform .3s var(--ease-out), opacity .3s var(--ease-out); }
/* When scrolled, the nav sits on a solid light (marfil) panel, so text turns
   dark. IMPORTANT: only the hamburger bars (.nav-toggle span) get a dark
   background — applying `background` to the text elements would paint a dark
   box over the dark text and hide it entirely. */
.site-nav.is-scrolled .nav-brand-name,
.site-nav.is-scrolled .nav-links a { color: var(--ink); }
.site-nav.is-scrolled .nav-toggle span { background: var(--ink); }
.nav-links { display: none; gap: 1.4rem; }
.nav-links a { font-size: .9rem; font-weight: 500; position: relative; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px; background: var(--accent-2);
  transition: width .3s var(--ease-out);
}
.nav-links a:hover::after { width: 100%; }
.nav-cta { display: none; }
.nav-toggle { display: flex; flex-direction: column; gap: 5px; padding: 8px; }
.nav-toggle span { width: 22px; height: 2px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 959px) {
  /* Floating card — inset from the edges, not a flush full-width strip */
  .nav-links.is-open {
    display: flex; flex-direction: column; position: fixed;
    top: calc(var(--nav-h) + .75rem); left: .75rem; right: .75rem;
    background: var(--paper); padding: 1.5rem; gap: 1rem;
    border-radius: 20px; box-shadow: 0 20px 44px rgba(6,30,58,.22);
  }
  /* Open dropdown always has a solid light panel — links must be dark regardless of scroll state. */
  .nav-links.is-open a { color: var(--ink); }
  /* Once the mobile menu is open, the toggle sits over that same light panel too. */
  .nav-toggle[aria-expanded="true"] span { background: var(--ink); }
}

/* Nav brand with icon */
.nav-brand { display: flex; align-items: center; gap: .85rem; }
/* Ornamento a la altura de las 3 filas de texto, sin deformarse */
.nav-brand img { height: 46px; width: auto; flex-shrink: 0; }
@media (min-width: 720px) { .nav-brand img { height: 58px; } }
/* Bloque de texto: 3 filas centradas (JUAN CARLOS / TORREJÓN / eslogan) */
.nav-brand-text { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.05; gap: .12rem; }
.nav-brand-name { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; text-transform: uppercase; letter-spacing: .1em; }
.nav-brand-tagline { display: none; white-space: nowrap; font-family: var(--sans); font-weight: 400; font-style: normal; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-2); }
/* Filete dorado del logo: línea corta y centrada entre el nombre y el eslogan,
   con el ancho que va del centro de una «o» de TORREJÓN al de la otra (~62%). */
.nav-brand-rule {
  display: none;
  width: 4.4rem;            /* = distancia centro-O a centro-Ó de TORREJÓN (70,5px) */
  height: 1px;
  margin: .16rem 0 .1rem;
  background: linear-gradient(90deg, #9c6f27 0%, #caa14e 50%, #9c6f27 100%);
}
@media (min-width: 720px) { .nav-brand-tagline, .nav-brand-rule { display: block; } }

/* El menú horizontal aparece cuando hay sitio para el logo grande (≥1160px);
   por debajo se usa el menú hamburguesa. */
@media (min-width: 1160px) {
  .nav-links { display: flex; margin-left: auto; }   /* menú empujado a la derecha, lejos del logo */
  .nav-links a, .nav-cta { white-space: nowrap; }
  .nav-cta { display: inline-flex; }
  .nav-toggle { display: none; }
}
/* Escritorio estrecho: menú algo más compacto para que todo quepa con holgura */
@media (min-width: 1160px) and (max-width: 1360px) {
  .nav-inner { gap: 1rem; }
  .nav-links { gap: 1rem; }
  .nav-links a { font-size: .85rem; }
  .nav-cta { padding: .75rem 1.2rem; font-size: .88rem; }
  .nav-brand img { height: 50px; }   /* ornamento algo menor donde el menú aprieta */
}