/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--header-bg);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--borde);
}

/* Ancho ajustado al contenido real (logo + 9 links + selector de idioma +
   botón), no al .container normal (1220px): con más margen que este,
   justify-content:space-between abre huecos enormes entre el logo, los
   links y los botones (y crecían más cuanto más ancha la pantalla). Con un
   tope ajustado, esos huecos quedan chicos y fijos en cualquier pantalla. */
.site-header .container.nav {
  max-width: 1180px;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  gap: 16px;
  padding-inline: 20px;
}

.nav-actions .btn-primary {
  padding: 10px 20px;
  font-size: 0.78rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-titulo);
  font-size: 1.5rem;
  letter-spacing: 1px;
  color: var(--petroleo-oscuro);
  flex-shrink: 0;
}
.logo svg { flex-shrink: 0; }
.logo small {
  display: block;
  font-family: var(--ff-cuerpo);
  font-size: 0.55rem;
  letter-spacing: 3px;
  color: var(--dorado);
  font-weight: 600;
}

/* Logo: assets/logo.png es una silueta negra. Antes se recoloreaba con mask-image,
   pero mask-image (como los ES modules) fuerza una carga con verificación CORS que
   Chrome bloquea al abrir el .html con doble clic (file://, cada archivo es un
   origen distinto). Un <img> normal + filter no tiene esa restricción — filter es
   puramente visual, no necesita "leer" el archivo entre orígenes. */
.logo-img {
  display: inline-block;
  height: 46px;
  width: auto;
  flex-shrink: 0;
}
.logo-img--footer { height: 40px; }

/* Menú principal: es un .navbar-expand-xl de Bootstrap con offcanvas
   (header.html). Desde xl (1200px) el offcanvas se muestra en línea como una
   fila de links; por debajo queda oculto y se abre con la hamburguesa. */
.navbar {
  --bs-navbar-padding-y: 0;
  /* Sin padding lateral propio en los links: la separación la da el gap. */
  --bs-navbar-nav-link-padding-x: 0;
}
.nav-links { gap: 18px; white-space: nowrap; }

.nav-links__link {
  --bs-nav-link-padding-x: 0;
  --bs-nav-link-padding-y: 0;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
  color: var(--texto);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.nav-links__link:hover,
.nav-links__link:focus { color: var(--petroleo); border-color: var(--borde); }
.navbar-nav .nav-links__link.active,
.nav-links__link--active { color: var(--petroleo-oscuro); font-weight: 600; border-color: var(--petroleo-oscuro); }

.nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.nav-toggle {
  background: none;
  border: none;
  padding: 4px;
  font-size: 1.5rem;
  color: var(--petroleo-oscuro);
  cursor: pointer;
}
.nav-toggle:focus { box-shadow: none; }
.nav-toggle:focus-visible { box-shadow: 0 0 0 3px var(--dorado); }

.navbar-brand.logo { margin-right: 0; padding: 0; }

@media (min-width: 1200px) {
  /* En línea: el offcanvas ocupa el espacio entre logo y acciones y centra
     los links. */
  .nav-offcanvas .offcanvas-body { justify-content: center; }
}

/* Justo al pasar a menú horizontal (1200px) la fila queda al límite: con la
   barra de scroll del navegador el ancho real es ~1185px y el botón se salía
   8px. Hasta 1280px el botón de WhatsApp se muestra solo con el ícono. */
@media (min-width: 1200px) and (max-width: 1279.98px) {
  .nav-actions .btn span { display: none; }
  .nav-actions .btn { padding: 10px 14px; }
}

@media (max-width: 1199.98px) {
  /* backdrop-filter en .site-header crea un "containing block" para
     descendientes position:fixed (spec CSS Filter Effects): el offcanvas
     quedaría encerrado dentro del header en vez de cubrir la pantalla. */
  .site-header { backdrop-filter: none; }
  .nav-offcanvas { --bs-offcanvas-width: min(340px, 86vw); }
  .nav-offcanvas .offcanvas-header { border-bottom: 1px solid var(--borde); }
  .nav-offcanvas .offcanvas-body { padding: 26px 24px; }
  .nav-links { gap: 20px; white-space: normal; }
  .nav-links__link { font-size: 0.95rem; display: inline-block; }
  .nav-actions .btn span { display: none; }
  .nav-actions .btn { padding: 10px 14px; }
}

/* ---------- Selector de idioma (dropdown) ---------- */
.lang-dropdown { position: relative; flex-shrink: 0; }
.lang-dropdown__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--texto);
  font-family: var(--ff-cuerpo);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.lang-dropdown__toggle:hover { border-color: var(--petroleo-oscuro); }
.lang-dropdown__toggle i { font-size: 0.6rem; color: var(--texto-suave); transition: transform 0.2s; }
.lang-dropdown__toggle[aria-expanded="true"] i { transform: rotate(180deg); }
/* Mostrar/ocultar y posicionar lo hace el dropdown de Bootstrap (.show + Popper). */
.lang-dropdown__menu {
  box-shadow: var(--sombra);
  min-width: 150px;
  padding: 6px;
  z-index: 50;
}
.lang-dropdown__menu-button {
  padding: 9px 10px;
  border-radius: 6px;
  font-family: var(--ff-cuerpo);
  font-size: 0.85rem;
  color: var(--texto);
  cursor: pointer;
  transition: background 0.2s;
}
.lang-dropdown__menu-button:hover { background: var(--crema-2); }
.lang-dropdown__menu-button--active { color: var(--petroleo-oscuro); font-weight: 600; }