/* =============================================================
   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: 1159px) {
  /* Floating card — inset from the edges, not a flush full-width strip.
     El rango llega hasta 1159px para que coincida con el botón ☰ (visible <1160):
     antes solo llegaba a 959px y el menú no se desplegaba entre 960 y 1159. */
  .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); }
  /* La barra/aspa del botón NO se fuerza a oscuro al abrir: sigue el fondo del
     encabezado (clara sobre el hero oscuro, oscura cuando la barra es clara al
     hacer scroll). Así el aspa nunca queda negra sobre fondo oscuro. */
}

/* 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: 66px; } }   /* a la altura del bloque de texto (~69px) */
/* 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: block; 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: block;
  width: 4.4rem;            /* = distancia centro-O a centro-Ó de TORREJÓN (70,5px) */
  height: 1px;
  margin: .4rem 0 .34rem;   /* +1 mm de aire arriba y abajo (nombre / eslogan) */
  background: linear-gradient(90deg, #9c6f27 0%, #caa14e 50%, #9c6f27 100%);
}
/* En móvil se mantiene el logo completo (nombre + filete + eslogan): se reduce el
   margen lateral y el ornamento para que quepa junto al botón de menú. */
@media (max-width: 719px) {
  .nav-inner { padding-left: 16px; padding-right: 16px; gap: .6rem; }
  .nav-brand img { height: 44px; }
}
/* Móviles muy estrechos (<375px: iPhone SE 1ª gen, Galaxy Fold plegado).
   El logo en una sola línea necesita justo 375px, así que en pantallas más
   estrechas se salía y quedaba cortado (body tiene overflow-x:clip). Se
   conserva el logo completo —misma tipografía, color y proporción—: solo se
   reduce un punto el ornamento y el eslogan pasa a dos líneas para verse
   entero. El corte es 374px para que los iPhone de 375px NO se vean afectados
   y mantengan el eslogan en una sola línea. */
@media (max-width: 374px) {
  .nav-brand img { height: 38px; }
  .nav-brand-name { font-size: 1.1rem; }
  .nav-brand-tagline { white-space: normal; letter-spacing: .12em; }
  .nav-brand-rule { margin: .3rem 0 .26rem; }
}

/* 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: 56px; }   /* ornamento algo menor donde el menú aprieta */
}