.site-header {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 50%;
  width: 100%;
  max-width: 480px;
  height: calc(59 * var(--u));
  background: var(--color-white-warm);
  transform: translateX(-50%);
  transition: transform 300ms ease;
}

/* Headroom: se oculta al bajar y reaparece al subir en mobile. */
.site-header--hidden {
  transform: translateX(-50%) translateY(-100%);
}

.site-header__logo {
  position: absolute;
  top: calc(17 * var(--u));
  left: calc(28.69 * var(--u));
  display: block;
  width: calc(93.62 * var(--u));
  height: calc(28 * var(--u));
}

.site-header__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.menu-toggle {
  position: absolute;
  top: 11px;
  right: 29px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
}

.menu-toggle::before { position: absolute; inset: -2px; content: ""; }
.menu-toggle__icon { position: absolute; inset: 0; display: block; width: 40px; height: 40px; }

.site-menu {
  position: fixed;
  z-index: 10;
  inset: 0;
  display: grid;
  place-items: center;
  max-width: 480px;
  margin: 0 auto;
  padding: calc(59 * var(--u)) calc(28.69 * var(--u));
  overflow-y: auto;
  background: #0b1635;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 300ms ease;
}

.site-menu[aria-hidden="false"] { opacity: 1; pointer-events: auto; visibility: visible; }
.site-menu__cenefa, .site-menu__columna, .site-menu__ofertiti { display: none; }
.site-menu__list { position: relative; z-index: 1; display: grid; gap: calc(24 * var(--u)); margin: 0; padding: 0; list-style: none; text-align: center; }
.site-menu__list a { color: var(--color-white-warm); font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 700; line-height: 1; text-decoration: none; }
.site-menu__list a:hover, .site-menu__list a:focus-visible { color: var(--color-gold); }
.site-menu__close { position: absolute; z-index: 3; top: calc(72 * var(--u)); right: calc(59.26 * var(--u)); display: grid; width: calc(31.48 * var(--u)); height: calc(31.37 * var(--u)); place-items: center; padding: 0; overflow: hidden; border: calc(1.7 * var(--u)) solid var(--color-gold); border-radius: 50%; background: var(--color-sky); box-shadow: calc(0.6 * var(--u)) calc(0.5 * var(--u)) 0 var(--color-gold-mid); }
.site-menu__close::before, .site-menu__close::after { position: absolute; width: calc(18 * var(--u)); height: calc(3 * var(--u)); background: var(--color-navy); content: ""; }
.site-menu__close::before { transform: rotate(45deg); }
.site-menu__close::after { transform: rotate(-45deg); }
.site-menu__close img { display: none; }

@media (max-width: 899px) {
  .site-menu {
    --u: min(calc(min(100vw, 480px) / 375), calc(100svh / 667));
    z-index: 30;
    width: 100%;
    max-width: none;
    padding: 0;
    overflow: hidden;
    background: var(--color-brown-dark);
  }

  .site-menu__cenefa, .site-menu__columna, .site-menu__ofertiti { position: absolute; display: block; max-width: none; pointer-events: none; }
  .site-menu__cenefa { z-index: 2; left: calc(-302.79 * var(--u)); width: calc(895.9 * var(--u)); height: calc(58.6 * var(--u)); }
  .site-menu__cenefa--top { top: calc(-2.6 * var(--u)); }
  .site-menu__cenefa--bottom { bottom: calc(-3 * var(--u)); }
  .site-menu__columna { z-index: 0; top: calc(53.41 * var(--u)); bottom: calc(5.4 * var(--u)); width: calc(128.01 * var(--u)); height: calc(100% - 58.81 * var(--u)); object-fit: fill; }
  .site-menu__columna--left { left: calc(-65.33 * var(--u)); }
  .site-menu__columna--right { right: calc(-73.45 * var(--u)); }
  .site-menu__list { position: absolute; z-index: 3; top: calc(142.35 * var(--u)); left: 50%; width: calc(137 * var(--u)); gap: calc(23 * var(--u)); transform: translateX(-50%); }
  .site-menu__list a { font-size: calc(34 * var(--u)); line-height: 0.84; white-space: nowrap; }
  .site-menu__ofertiti { z-index: 1; top: calc(100% - 328.6 * var(--u)); bottom: auto; left: 50%; width: auto; height: calc(402 * var(--u)); transform: translateX(-50%); }
}

@media (min-width: 481px) and (max-width: 899px) {
  .site-header {
    --u: min(calc(min(100vw, 480px) / 375), calc(100svh / 667));
    max-width: none;
  }

  .site-header__logo {
    left: calc((100vw - 375 * var(--u)) / 2 + 28.69 * var(--u));
  }

  .menu-toggle {
    right: calc((100vw - 375 * var(--u)) / 2 + 29 * var(--u));
  }
}

@media (min-width: 900px) {
  .site-header {
    max-width: none;
    height: 80px;
    background: var(--color-white);
    box-shadow: 0 4px 34px -17px rgba(10, 64, 87, 0.49);
  }

  .site-header__logo {
    top: 19px;
    left: 88px;
    width: 150.47px;
    height: 45px;
  }

  .menu-toggle {
    top: 12px;
    right: 88px;
  }

  .site-menu {
    inset: 0;
    z-index: 30;
    width: 100%;
    max-width: none;
    padding: 0;
    overflow: hidden;
    background: var(--color-brown-dark);
  }

  .site-menu__cenefa, .site-menu__columna, .site-menu__ofertiti {
    position: absolute;
    display: block;
    max-width: none;
    pointer-events: none;
  }

  .site-menu__cenefa {
    z-index: 2;
    left: calc(-81 * var(--ud));
    width: calc(100% + 89 * var(--ud));
    height: calc(86.93 * var(--ud));
    object-fit: cover;
  }

  .site-menu__cenefa--top { top: 0; }
  .site-menu__cenefa--bottom { bottom: 0; }

  .site-menu__columna {
    z-index: 0;
    top: calc(86.94 * var(--ud));
    right: auto;
    bottom: calc(24.6 * var(--ud));
    left: auto;
    width: calc(165.93 * var(--ud));
    height: auto;
    object-fit: fill;
  }

  .site-menu__columna--left { left: calc(6 * var(--ud)); }
  .site-menu__columna--right { right: calc(6 * var(--ud)); }

  .site-menu__list {
    position: absolute;
    z-index: 3;
    top: calc(320 * var(--ud));
    left: calc(50% - 309.74 * var(--ud));
    width: calc(225 * var(--ud));
    gap: calc(40 * var(--ud));
    transform: translateX(-50%);
  }

  .site-menu__list a {
    font-size: calc(56 * var(--ud));
    line-height: calc(60 * var(--ud));
    white-space: nowrap;
  }

  .site-menu__close {
    top: calc(117.77 * var(--ud));
    right: auto;
    left: calc(50% + 422.48 * var(--ud));
    width: calc(46 * var(--ud));
    height: calc(45.84 * var(--ud));
    border-width: calc(2.45 * var(--ud));
    box-shadow: calc(0.84 * var(--ud)) calc(0.68 * var(--ud)) 0 var(--color-gold-mid);
  }

  .site-menu__close::before, .site-menu__close::after {
    width: calc(26.3 * var(--ud));
    height: calc(4.4 * var(--ud));
  }

  .site-menu__ofertiti {
    z-index: 1;
    top: calc(100% - 671.1 * var(--ud));
    bottom: auto;
    left: calc(50% + 225.84 * var(--ud));
    width: auto;
    height: calc(852.8 * var(--ud));
    transform: translateX(-50%);
  }
}