/* ============================================================
   HEADER (doc maestro §7.3 / §8.1) — BEM vce-header
   ============================================================ */
.vce-header {
  position: sticky;
  top: 0;
  z-index: var(--vce-z-header);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--vce-color-border);
  transition: box-shadow var(--vce-transition-base), background var(--vce-transition-base);
}
.vce-header.is-scrolled {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--vce-shadow-md);
}
.vce-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vce-spacing-lg);
  min-height: 72px;
}
.vce-header__logo img {
  display: block;
  height: 44px;
  width: auto;
}

/* Navegación principal */
.vce-nav {
  display: flex;
  align-items: center;
  gap: var(--vce-spacing-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}
.vce-nav__link,
.vce-nav__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center; /* centrado también cuando el texto pasa a 2 líneas */
  gap: 6px;
  font-family: var(--vce-font-display);
  font-size: var(--vce-fs-sm);
  font-weight: var(--vce-fw-medium);
  color: var(--vce-yale);
  -webkit-appearance: none; /* anula el botón nativo de Hello (reset.css) */
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: var(--vce-spacing-sm) var(--vce-spacing-md);
  border-radius: var(--vce-radius-pill);
  text-decoration: none;
  transition: background var(--vce-transition-fast), color var(--vce-transition-fast);
}
.vce-nav__link:hover,
.vce-nav__trigger:hover,
.vce-nav__trigger[aria-expanded="true"] {
  background: var(--vce-gris-claro);
  color: var(--vce-indigo);
}
.vce-nav__trigger:focus-visible {
  outline: 2px solid var(--vce-indigo);
  outline-offset: 2px;
}
.vce-nav__caret {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--vce-transition-fast);
}
.vce-nav__trigger[aria-expanded="true"] .vce-nav__caret {
  transform: rotate(-135deg) translateY(-2px);
}

/* Acciones */
.vce-header__actions {
  display: flex;
  align-items: center;
  gap: var(--vce-spacing-md);
}
.vce-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center; /* centrado también cuando el texto pasa a 2 líneas */
  font-family: var(--vce-font-display);
  font-weight: var(--vce-fw-semibold);
  font-size: var(--vce-fs-sm);
  padding: 0.6rem 1.25rem;
  border-radius: var(--vce-radius-pill);
  text-decoration: none;
  -webkit-appearance: none; /* sirve también para <button class="vce-btn"> (anula reset de Hello) */
  appearance: none;
  border: 0;
  cursor: pointer;
  transition: transform var(--vce-transition-fast), background var(--vce-transition-fast);
}
.vce-btn--cta {
  background: var(--vce-color-cta);
  color: var(--vce-blanco);
}
.vce-btn--cta:hover {
  background: var(--vce-color-cta-hover);
  transform: translateY(-1px);
}

/* Hamburguesa (oculta en desktop; visible solo <720px) */
.vce-header__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  box-shadow: none;
  cursor: pointer;
}
.vce-header__burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--vce-yale);
  transition: transform var(--vce-transition-fast), opacity var(--vce-transition-fast);
}
.vce-header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.vce-header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.vce-header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* El drawer off-canvas (translateX(100%)) contribuye al scrollable overflow y
   generaba scroll horizontal en todo el sitio móvil. clip en el root lo corta
   sin crear un scroll container (position: sticky sigue funcionando); hidden
   queda como fallback para navegadores viejos. */
html { overflow-x: hidden; overflow-x: clip; }
/* body también (iOS Safari ignora el del root para el pan táctil). Scoped a
   móvil: los position: sticky del sitio son solo >=1024px y no se afectan. */
@media (max-width: 1023px) {
  body { overflow-x: hidden; overflow-x: clip; }
}

/* Drawer móvil */
.vce-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(82vw, 360px);
  background: var(--vce-blanco);
  z-index: var(--vce-z-drawer);
  padding: var(--vce-spacing-3xl) var(--vce-spacing-xl);
  box-shadow: var(--vce-shadow-xl);
  transform: translateX(100%);
  transition: transform var(--vce-transition-base);
}
.vce-drawer.is-open { transform: translateX(0); }
.vce-drawer[hidden] { display: block; } /* controlado por transform, no por hidden visual */
.vce-drawer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--vce-spacing-sm); }
.vce-drawer__link {
  display: block;
  font-family: var(--vce-font-display);
  font-size: var(--vce-fs-md);
  font-weight: var(--vce-fw-medium);
  color: var(--vce-yale);
  text-decoration: none;
  padding: var(--vce-spacing-md) 0;
  border-bottom: 1px solid var(--vce-color-border);
}
.vce-drawer__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 51, 102, 0.4);
  z-index: var(--vce-z-drawer);
  opacity: 0;
  transition: opacity var(--vce-transition-base);
}
.vce-drawer__overlay.is-open { opacity: 1; }

/* Skip-link accesible (site-wide): oculto hasta recibir foco por teclado */
.vce-skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.vce-skip-link:focus {
  left: var(--vce-spacing-md);
  top: var(--vce-spacing-md);
  width: auto;
  height: auto;
  z-index: 2000;
  background: var(--vce-blanco);
  color: var(--vce-yale);
  padding: var(--vce-spacing-sm) var(--vce-spacing-md);
  border-radius: var(--vce-radius-sm);
  box-shadow: var(--vce-shadow-md);
}

/* Responsive: < 720px (md) colapsa a hamburguesa */
@media (max-width: 719px) {
  .vce-header__nav { display: none; }
  /* SOLO el CTA del header: un selector global aquí ocultaba todos los
     .vce-btn--cta del sitio en móvil (hero, reserve card). */
  /* v0.16.1: con 3 clases para ganar a ".vce-c .vce-btn" (home.css, misma especificidad que
     ".vce-header .vce-btn--cta" y cargado después): en móvil el CTA seguía visible y empujaba la
     hamburguesa fuera de la pantalla (x=439 en 360 px). El CTA vive en el drawer. */
  .vce-header .vce-header__actions .vce-btn--cta { display: none !important; }
  .vce-header__burger { display: flex; }
  .vce-header__actions { gap: var(--vce-spacing-sm); }
}
@media (max-width: 379px) {
  /* Pantallas muy angostas: el logo se achica para que quepan idioma + hamburguesa. */
  .vce-header__logo img { height: 36px; }
}
@media (min-width: 720px) {
  .vce-drawer,
  .vce-drawer__overlay { display: none !important; }
}

/* ============================================================
   Dirección C · header sobre el hero oscuro de la portada.
   En la portada el header flota transparente (texto claro) y
   se vuelve sólido al hacer scroll. Fuera de la portada: sólido.
   ============================================================ */
.vce-dark-hero .vce-header {
  position: fixed;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.vce-dark-hero .vce-header:not(.is-scrolled) .vce-nav__trigger,
.vce-dark-hero .vce-header:not(.is-scrolled) .vce-nav__link,
.vce-dark-hero .vce-header:not(.is-scrolled) .vce-lang a,
.vce-dark-hero .vce-header:not(.is-scrolled) .vce-lang span { color: rgba(247, 247, 242, 0.88); }
.vce-dark-hero .vce-header:not(.is-scrolled) .vce-nav__trigger:hover,
.vce-dark-hero .vce-header:not(.is-scrolled) .vce-nav__link:hover,
.vce-dark-hero .vce-header:not(.is-scrolled) .vce-nav__trigger[aria-expanded="true"] { color: var(--vce-hueso); background: rgba(247, 247, 242, 0.14); }
/* Selector de idioma sobre el hero oscuro (v0.11.2): la píldora era gris claro con texto blanco
   encima, así que ES/EN desaparecían. Ahora: cápsula translúcida con borde, opción activa en
   hueso sólido con texto Yale (se ve en cualquier fondo). */
.vce-dark-hero .vce-header:not(.is-scrolled) .vce-lang { background: rgba(247, 247, 242, 0.12); border: 1px solid rgba(247, 247, 242, 0.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.vce-dark-hero .vce-header:not(.is-scrolled) .vce-lang__opt:hover { color: var(--vce-hueso); background: rgba(247, 247, 242, 0.16); }
.vce-dark-hero .vce-header:not(.is-scrolled) .vce-lang__opt.is-active { color: var(--vce-yale); background: var(--vce-hueso); }
/* Con el mega-menú abierto el header se vuelve sólido (texto oscuro sobre claro), para que
   el disparador "Viajes" nunca quede en blanco sobre gris. */
.vce-dark-hero .vce-header:has(.vce-nav__trigger[aria-expanded="true"]) { background: rgba(247, 247, 242, 0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: var(--vce-color-border); }
.vce-dark-hero .vce-header:has(.vce-nav__trigger[aria-expanded="true"]) .vce-nav__trigger,
.vce-dark-hero .vce-header:has(.vce-nav__trigger[aria-expanded="true"]) .vce-nav__link,
.vce-dark-hero .vce-header:has(.vce-nav__trigger[aria-expanded="true"]) .vce-lang a,
.vce-dark-hero .vce-header:has(.vce-nav__trigger[aria-expanded="true"]) .vce-lang span { color: var(--vce-yale); }
.vce-dark-hero .vce-header:has(.vce-nav__trigger[aria-expanded="true"]) .vce-nav__trigger[aria-expanded="true"] { background: var(--vce-gris-claro); color: var(--vce-indigo); }
.vce-dark-hero .vce-header:has(.vce-nav__trigger[aria-expanded="true"]) .vce-nav__caret { border-color: currentColor; }
.vce-dark-hero .vce-header:has(.vce-nav__trigger[aria-expanded="true"]) .vce-header__logo img { filter: none; }
.vce-dark-hero .vce-header:has(.vce-nav__trigger[aria-expanded="true"]) .vce-btn--cta { background: var(--vce-color-cta); border-color: var(--vce-indigo); color: var(--vce-blanco); backdrop-filter: none; }
.vce-dark-hero .vce-header:has(.vce-nav__trigger[aria-expanded="true"]) .vce-header__burger span { background: var(--vce-yale); }
.vce-dark-hero .vce-header:not(.is-scrolled) .vce-nav__caret { border-color: rgba(247, 247, 242, 0.88); }
.vce-dark-hero .vce-header:not(.is-scrolled) .vce-header__logo img { filter: brightness(0) invert(1); }
.vce-dark-hero .vce-header:not(.is-scrolled) .vce-btn--cta { background: rgba(247, 247, 242, 0.14); border: 1px solid rgba(247, 247, 242, 0.5); color: var(--vce-hueso); backdrop-filter: blur(8px); }
.vce-dark-hero .vce-header:not(.is-scrolled) .vce-btn--cta:hover { background: rgba(247, 247, 242, 0.26); }
.vce-dark-hero .vce-header:not(.is-scrolled) .vce-header__burger span { background: var(--vce-hueso); }
.vce-dark-hero .vce-header.is-scrolled {
  background: rgba(247, 247, 242, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--vce-color-border);
}

/* Enlaces de nav: subrayado fino en bronce (todas las páginas) */
.vce-nav__link, .vce-nav__trigger { position: relative; }
.vce-nav__link::after, .vce-nav__trigger::after { content: ""; position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.35rem; height: 1px; background: var(--vce-bronce); transform: scaleX(0); transform-origin: left; transition: transform 0.3s; }
.vce-nav__link:hover::after, .vce-nav__trigger:hover::after, .vce-nav__trigger[aria-expanded="true"]::after { transform: scaleX(1); }
.vce-btn--cta { border: 1px solid var(--vce-indigo); }
.vce-drawer__link--cta { color: var(--vce-bronce-tinta); font-weight: 600; }

/* Barra de administración de WP: el header fijo/sticky baja 32px (46px en móvil). */
.admin-bar .vce-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .vce-header { top: 46px; } }

/* ============================================================
   Marca en texto (.vce-wordmark) mientras no exista assets/images/vce-logo.svg.
   Se usa en header, panel (topbar y login). Misma composición que el logo de
   Haxiah: "Viaja con" en display + "Etzayorkina" manuscrita en bronce.
   ============================================================ */
.vce-wordmark { display: inline-flex; flex-direction: column; line-height: 1; color: var(--vce-yale); text-decoration: none; }
.vce-wordmark b { font-family: var(--vce-font-display); font-weight: 700; letter-spacing: -.02em; font-size: 1rem; }
.vce-wordmark i { font-family: var(--vce-font-script, 'Allison', cursive); font-style: normal; font-size: 1.35rem; color: var(--vce-bronce); margin-top: -3px; }
.vce-wordmark--light { color: var(--vce-hueso); }
.vce-wordmark--light i { color: #E9C48A; }
.vce-wordmark--lg { align-items: center; margin-bottom: 1rem; }
.vce-wordmark--lg b { font-size: 1.4rem; }
.vce-wordmark--lg i { font-size: 2rem; }
.vce-dark-hero .vce-header:not(.is-scrolled) .vce-wordmark { color: var(--vce-hueso); }
.vce-dark-hero .vce-header:not(.is-scrolled) .vce-wordmark i { color: #E9C48A; }