/* assets/css/cabecera-comun.css — la cabecera del sitio.
 *
 * POR QUÉ EXISTE
 *
 * La barra de navegación (marca, menú, los dos botones, el conmutador de
 * idioma y la hamburguesa) vivía dentro de assets/css/pages/index.css, así
 * que era de la portada y de nadie más. Cuando /guia-medida tuvo que llevar
 * la misma cabecera había dos salidas: copiar cuarenta reglas a otra hoja
 * —y garantizar que al primer retoque una de las dos se quedara atrás— o
 * sacarlas aquí. Es el mismo movimiento que ya se hizo con el pie
 * (assets/css/footer-comun.css), y por el mismo motivo.
 *
 * AUTOCONTENIDA A PROPÓSITO
 *
 * No usa los tokens locales de index.css (`--coral`, `--white`, `--mono`…):
 * esos solo existen en esa hoja, y esta la cargan páginas que no la traen.
 * Bebe directamente de assets/css/marca.css, que sí cargan todas. Los
 * valores son exactamente los mismos —index.css no hacía más que renombrar
 * los de marca— así que la portada no cambia ni un píxel.
 *
 * El comportamiento (abrir el menú, el botón de cuenta según la sesión) está
 * en assets/js/cabecera-comun.js.
 */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgb(255 255 255 / 14%);
  background: rgb(0 27 53 / 92%);
  color: var(--color-white);
  backdrop-filter: blur(18px);
}
.site-header--light { background: rgb(0 27 53 / 92%); }
/* La barra no puede depender del `a { text-decoration: none }` de la hoja de
   cada página: en la portada existe y en las de colección no, y los enlaces
   del menú salían subrayados. Es la misma lección que `.shell`. */
.site-header a { text-decoration: none; }

/* El ancho se lo pone la propia barra, no la clase `.shell` que la envuelve
   en la portada: esa vive en index.css y una página que no cargue esa hoja
   tendría la cabecera pegada a los dos bordes. En la portada el valor es
   idéntico al de `.shell`, así que allí no cambia nada. */
.nav-shell {
  width: min(var(--content-width), calc(100% - 80px));
  margin: 0 auto;
  height: 78px;
  display: flex;
  align-items: center;
  gap: 48px;
}

.brand { display: inline-flex; align-items: center; }
/* El logotipo lleva el nombre dentro: no se acompaña de texto, o la marca
   saldría dos veces. El nombre accesible lo pone el `alt` de la imagen. */
.brand__logo { display: block; height: 42px; width: auto; }
.brand--footer .brand__logo { height: 36px; }

.main-nav {
  display: flex;
  align-items: center;
  gap: 34px;
  margin-left: auto;
  color: rgb(250 247 241 / 68%);
  font-size: 13px;
}
.main-nav a, .footer-links a { transition: color 0.2s ease; }
.main-nav a:hover, .footer-links a:hover { color: var(--color-brand-coral); }
/* El enlace del menú al configurador, destacado en coral sobre el azul. */
.main-nav .nav-medida { color: var(--color-brand-coral); font-weight: 600; }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border: 1px solid var(--color-brand-coral);
  border-radius: var(--radius-small);
  background: var(--color-brand-coral);
  color: var(--color-white);
  font-family: var(--font-brand);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  transition: background var(--dur-media) ease, color var(--dur-media) ease, transform var(--dur-media) ease;
}
.nav-cta:hover {
  background: var(--color-brand-coral-oscuro);
  border-color: var(--color-brand-coral-oscuro);
  color: var(--color-white);
  transform: translateY(-2px);
}
.nav-ctas { display: flex; align-items: center; gap: 9px; }
.nav-cta--ghost { border-color: rgb(250 247 241 / 42%); background: transparent; color: var(--color-white); }
.nav-cta--ghost:hover { background: var(--color-white); border-color: var(--color-white); color: var(--color-brand-ink); }

.nav-only-mobile { display: none; }

.language-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 999px;
}
.language-switch button {
  min-width: 31px;
  height: 26px;
  padding: 0 7px;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  background: transparent;
  color: rgb(255 255 255 / 50%);
  font-family: var(--font-brand);
  font-size: 8px;
  letter-spacing: 0.08em;
}
.language-switch button.is-active { background: var(--color-white); color: var(--color-brand-ink); }

.menu-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgb(250 247 241 / 34%);
  border-radius: var(--radius-small);
  background: transparent;
  color: var(--color-white);
  cursor: pointer;
}
.menu-toggle__barras { display: block; width: 17px; }
.menu-toggle__barras span { display: block; height: 1.5px; margin: 3.5px 0; background: currentcolor; border-radius: 2px; }
.menu-toggle__texto {
  font-family: var(--font-brand);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.menu-toggle[aria-expanded="true"] { border-color: var(--color-white); }

/* El CTA de la barra en móvil. En escritorio no aparece: ahí la barra ya
   lleva sus dos botones y el enlace de guía a medida está en el menú. */
.nav-cta--movil { display: none; }

/* ══════════ Entre 761 y 1080 ══════════
   La barra lleva dos botones y aún no hay hamburguesa: se aprieta lo justo
   para que ninguno de los dos se parta en varias líneas. */
@media (min-width: 761px) and (max-width: 1080px) {
  .main-nav { gap: 20px; font-size: 12px; }
  .nav-ctas { gap: 6px; }
  .nav-cta { padding: 10px 11px; letter-spacing: 0.04em; }
  .nav-cta .arrow { display: none; }
}
@media (min-width: 761px) and (max-width: 900px) { .language-switch { display: none; } }

/* ══════════ La cabecera en móvil ══════════
   Antes ocupaba 68 px con el logotipo a 42 px —casi 300 px de ancho, medio
   móvil— y la única forma de navegar eran dos rayas de 1 px que no parecían
   un botón. Ahora la barra lleva las tres cosas que importan: marca pequeña,
   un CTA a la vista y un menú que se lee como tal.
   El sitio para el CTA sale del selector de idioma, que pasa a estar dentro
   del desplegable (en escritorio sigue donde estaba, al final del menú). */
@media (max-width: 760px) {
  .nav-shell { width: calc(100% - 36px); height: 56px; gap: 10px; }
  .brand { flex: 0 0 auto; }
  .brand__logo { width: min(150px, 40vw); height: auto; }

  .nav-cta--movil { display: inline-flex; flex: 0 0 auto; margin-left: auto; padding: 9px 12px; font-size: 10px; letter-spacing: 0.05em; }

  /* La hamburguesa se va al borde derecho. Cuando la barra lleva CTA móvil
     —la portada—, es él quien empuja y el botón se queda pegado a su lado;
     sin CTA —el configurador, que ya está en esa página— empuja el botón. */
  .menu-toggle { display: inline-flex; flex: 0 0 auto; margin-left: auto; }
  .nav-cta--movil + .menu-toggle { margin-left: 0; }

  /* El desplegable arranca justo bajo la barra y no se sale de la pantalla:
     con seis enlaces y el idioma dentro, en pantallas bajas hace falta que
     pueda desplazarse. */
  .main-nav {
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    max-height: calc(100dvh - 56px);
    overflow-y: auto;
    padding: 12px 18px 22px;
    background: var(--color-brand-ink);
    border-bottom: 1px solid rgb(255 255 255 / 15%);
  }
  .main-nav--open { display: flex; }
  .main-nav a { width: 100%; padding: 14px 0; border-bottom: 1px solid rgb(255 255 255 / 10%); }

  .nav-ctas { display: none; }
  .nav-only-mobile { display: block; }

  .language-switch { width: auto; margin: 16px 0 0; }
  .language-switch button { min-width: 44px; height: 32px; font-size: 9px; }
}

/* Por debajo de 400 px el logotipo baja otro punto y el CTA aprieta el
   espaciado: es la diferencia entre caber en una línea o partirse. */
@media (max-width: 400px) {
  .brand__logo { width: min(150px, 34vw); }
  .nav-cta--movil { padding: 8px 9px; font-size: 9px; letter-spacing: 0.03em; }
  /* Aquí el rótulo del botón se retira y queda el icono: con el CTA delante no
     hay sitio para las dos palabras, y el recuadro ya lo delata como botón. */
  .menu-toggle { padding: 8px 10px; }
  .menu-toggle__texto { display: none; }
}