/* ===================================================================
   Menú v2 · overlay a pantalla completa
   Se activa con la clase .site-nav--v2 (markup en index.html de la v2).
   El selector `.site-nav.site-nav--v2` gana a las reglas del cajón antiguo.
   =================================================================== */

.site-nav.site-nav--v2 {
  left: 0; right: 0; top: 0;
  width: 100vw;
  height: 100dvh;
  padding: 0;
  gap: 0;
  display: block;
  background: #0b0b0b;
  color: var(--color-white);
  box-shadow: none;
  transform: none;
  overflow: hidden;
  visibility: hidden;
  clip-path: circle(0px at calc(100% - 52px) 42px);
  transition: clip-path 750ms cubic-bezier(0.7, 0, 0.2, 1), visibility 0s linear 750ms;
}
.site-nav.site-nav--v2.is-open {
  visibility: visible;
  clip-path: circle(160vmax at calc(100% - 52px) 42px);
  transition: clip-path 950ms cubic-bezier(0.7, 0, 0.2, 1), visibility 0s;
}

.site-nav--v2 .menu {
  height: 100%;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(24px, 5vw, 88px);
  padding: calc(var(--header-h) + 2vh) var(--gutter) clamp(20px, 4vh, 48px);
}

/* Enlaces: tipografía grande, entran por máscara, atenúan a los demás */
.menu__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; }
.menu__list li { overflow: hidden; }
.site-nav.site-nav--v2 .menu__list a {
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 2vw, 28px);
  font-family: var(--font-display);
  font-size: clamp(1.9rem, min(5.2vw, 8vh), 5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-white);
  opacity: 1;
  transform: translateY(108%);
  transition: transform 400ms var(--ease), color 250ms var(--ease), padding-left 450ms var(--ease);
}
.site-nav.site-nav--v2.is-open .menu__list a {
  transform: translateY(0);
  transition: transform 950ms cubic-bezier(0.16, 1, 0.3, 1) calc(380ms + var(--i, 0) * 70ms), color 250ms var(--ease), padding-left 450ms var(--ease);
}
.site-nav.site-nav--v2 .menu__list:hover a { color: rgba(255,255,255,0.3); }
.site-nav.site-nav--v2 .menu__list a:hover,
.site-nav.site-nav--v2 .menu__list a:focus-visible { color: var(--color-white); padding-left: clamp(10px, 1.4vw, 22px); }
.menu__list a[aria-current="page"] .menu__t { font-style: italic; }
.menu__t em { font-style: normal; font-size: 0.42em; letter-spacing: 0; opacity: 0.6; margin-left: 0.5em; }

/* Lateral: foto que cambia con el enlace + datos */
.menu__side { display: flex; flex-direction: column; gap: clamp(16px, 3vh, 32px); min-height: 0; padding-top: 1vh; }
.menu__preview {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--radius-m);
  background: #161616;
}
.menu__preview img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.07);
  transition: opacity 650ms var(--ease), transform 1400ms var(--ease);
}
.menu__preview img.is-active { opacity: 1; transform: scale(1); }

.menu__info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 28px;
  font-size: 0.86rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.7);
}
.menu__info p { margin: 0; max-width: none; }
.site-nav.site-nav--v2 .menu__info a,
.site-nav.site-nav--v2 .menu__actions a {
  font-family: var(--font-body);
  font-size: inherit;
  opacity: 1;
  transform: none;
  color: var(--color-white);
  text-decoration: none;
}
.site-nav.site-nav--v2 .menu__info p a:hover { text-decoration: underline; color: var(--color-white); }
.menu__actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 6px; }
.site-nav.site-nav--v2 .menu__actions .btn { font-size: 0.82rem; }
.site-nav.site-nav--v2 .menu__actions .btn:hover,
.site-nav.site-nav--v2 .menu__actions .btn:focus-visible { color: var(--btn-hover-fg); }
.site-nav.site-nav--v2 .menu__actions .menu__lang {
  font-size: 0.85rem;
  border-bottom: 1px solid rgba(255,255,255,0.35);
  padding-bottom: 2px;
  transition: border-color 200ms var(--ease);
}
.site-nav.site-nav--v2 .menu__actions .menu__lang:hover { border-color: var(--color-gold); color: var(--color-white); }

/* Cabecera mientras el menú está abierto: logo pequeño y blanco, X blanca */
.site-header:has(.site-nav--v2.is-open) .menu-toggle span { background: var(--color-white); }
.site-header:has(.site-nav--v2.is-open) .site-header__logo { z-index: 600; top: 50%; transform: translateY(-50%); }
.site-header:has(.site-nav--v2.is-open) .site-header__logo img { width: 64px; height: 64px; filter: brightness(0) invert(1); }
.site-header:has(.site-nav--v2.is-open)::before { opacity: 0; }

@media (max-width: 900px) {
  .site-nav.site-nav--v2 { overflow-y: auto; }
  .site-nav--v2 .menu { grid-template-columns: 1fr; height: auto; min-height: 100%; padding-top: calc(var(--header-h) + 12px); }
  .menu__preview { display: none; }
  .site-nav.site-nav--v2 .menu__list a { font-size: clamp(1.9rem, 9vw, 3rem); }
  .menu__info { margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav.site-nav--v2, .site-nav.site-nav--v2.is-open { transition: none; }
  .site-nav.site-nav--v2 .menu__list a { transform: none; transition: none; }
}