/* Header / navegación principal — fija, transparente sobre el Hero, sólida al hacer scroll */

.header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-height-mobile);
  display: flex;
  align-items: center;
  background-color: transparent;
  transition: background-color var(--duracion-normal) var(--ease-suave),
    box-shadow var(--duracion-normal) var(--ease-suave);
}

@media (min-width: 1024px) {
  .header {
    height: var(--header-height);
  }
}

/* Base sólida: es también el respaldo para navegadores sin backdrop-filter. */
.header.is-scrolled,
.header.is-open,
.header--sin-hero {
  background-color: var(--color-guindo);
  box-shadow: var(--shadow-sm);
}

/* Vidrio esmerilado al hacer scroll: el contenido se intuye por detrás en vez
   de quedar tapado por un bloque opaco. Al 85% de opacidad el texto blanco
   mantiene 6.6:1 de contraste incluso sobre una foto clara.
   El menú móvil abierto (.is-open) se queda sólido a propósito: su panel
   inferior es opaco y una cabecera translúcida encima se vería despegada. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .header.is-scrolled:not(.is-open),
  .header--sin-hero:not(.is-open) {
    /* Opacidad 0.75: sobre las secciones claras la barra queda en rgb(153,93,92),
       muy por encima del guindo sólido rgb(112,29,28), así que la translucidez
       se percibe aunque detrás no haya fotos que desenfocar. Es el límite útil:
       por debajo de 0.68 el texto blanco baja de 4.5:1 y deja de ser legible.
       Con el velo incluido, el contraste medido es 4.98:1. */
    background-color: rgba(var(--color-guindo-rgb), 0.75);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    border-bottom: 1px solid rgba(253, 250, 250, 0.14);

    /* Velo de luz superior: no depende de lo que haya detrás, de modo que la
       cabecera se lee como vidrio también sobre fondos planos. */
    background-image: linear-gradient(
      180deg,
      rgba(253, 250, 250, 0.07) 0%,
      rgba(253, 250, 250, 0.02) 55%,
      rgba(253, 250, 250, 0) 100%
    );
  }
}

.header__inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.header__logo {
  display: flex;
  align-items: center;
  height: 44px;
}

.header__logo img {
  height: 100%;
  width: auto;
}

@media (min-width: 1024px) {
  .header__logo {
    height: 54px;
  }
}

/* ---------- Navegación de escritorio ---------- */
.nav-desktop {
  display: none;
}

@media (min-width: 1024px) {
  .nav-desktop {
    display: flex;
    align-items: center;
    gap: var(--space-6);
  }

  .nav-desktop__list {
    display: flex;
    gap: var(--space-5);
  }

  .nav-desktop__link {
    font-family: var(--font-titulos);
    font-weight: 600;
    font-size: var(--fs-200);
    color: var(--color-blanco);
    padding-block: var(--space-2);
    position: relative;
  }

  .nav-desktop__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 2px;
    background-color: var(--color-dorado);
    transition: width var(--duracion-rapida) var(--ease-suave);
  }

  .nav-desktop__link:hover::after,
  .nav-desktop__link[aria-current="page"]::after {
    width: 100%;
  }
}

/* ---------- Botón hamburguesa ---------- */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
}

@media (min-width: 1024px) {
  .nav-toggle {
    display: none;
  }
}

.nav-toggle__bar {
  width: 24px;
  height: 2px;
  background-color: var(--color-blanco);
  transition: transform var(--duracion-rapida) var(--ease-suave),
    opacity var(--duracion-rapida) var(--ease-suave);
}

.header.is-open .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.header.is-open .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.header.is-open .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Menú móvil ---------- */
.nav-mobile {
  position: fixed;
  inset: var(--header-height-mobile) 0 0 0;
  background-color: var(--color-guindo);
  padding: var(--space-6) var(--container-padding);
  transform: translateY(-12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duracion-normal) var(--ease-suave),
    transform var(--duracion-normal) var(--ease-suave),
    visibility 0s linear var(--duracion-normal);
  overflow-y: auto;
}

.header.is-open .nav-mobile {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition: opacity var(--duracion-normal) var(--ease-suave),
    transform var(--duracion-normal) var(--ease-suave),
    visibility 0s linear 0s;
}

@media (min-width: 1024px) {
  .nav-mobile {
    display: none;
  }
}

.nav-mobile__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.nav-mobile__link {
  display: block;
  font-family: var(--font-titulos);
  font-weight: 600;
  font-size: var(--fs-500);
  color: var(--color-blanco);
  padding-block: var(--space-3);
  border-bottom: 1px solid rgba(253, 250, 250, 0.15);
}

/* ---------- CTA en navegación ---------- */
.nav-desktop .btn,
.nav-mobile .btn {
  flex-shrink: 0;
}