/* ============================================================
   GEO Navigation
   Figma Desktop-1 header: CONTACTO + lupa [izq] | logo [centro] | PAGA FACTURAS + MENÚ [der]
   ============================================================ */

/* ----------------------------------------------------------
   Barra de navegación
   ---------------------------------------------------------- */
.geo-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 0 var(--space-lg);
  height: 68px;
  color: var(--color-white);
}

.geo-nav__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 100%;
  max-width: 1761px;
  margin: 0 auto;
}

/* Zona izquierda */
.geo-nav__left {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Menú izquierdo de WP — aplana la lista que genera wp_nav_menu */
.geo-nav__left-menu {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.geo-nav__left-menu ul { display: flex; gap: var(--space-sm); list-style: none; }
.geo-nav__left-menu a {
  font-family: var(--font-utility);
  font-size: var(--text-nav);
  font-weight: var(--weight-bold);
  color: inherit;
  white-space: nowrap;
}

/* Zona central — logo */
.geo-nav__center {
  display: flex;
  justify-content: center;
}

.geo-nav__logo {
  display: block;
  position: relative;
}

/* Logos blanco/negro — swap via CSS */
.geo-nav__logo-img {
  display: block;
  width: auto;
  height: 34px;
  object-fit: contain;
}

.geo-nav__logo-img--black { display: none; }

.geo-nav.is-scrolled .geo-nav__logo-img--white,
.geo-nav--light      .geo-nav__logo-img--white { display: none; }

.geo-nav.is-scrolled .geo-nav__logo-img--black,
.geo-nav--light      .geo-nav__logo-img--black { display: block; }

/* Zona derecha */
.geo-nav__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}

/* Menú derecho de WP */
.geo-nav__right-menu {
  display: flex;
  align-items: center;
}
.geo-nav__right-menu ul { display: flex; gap: 24px; list-style: none; }
.geo-nav__right-menu a {
  font-family: var(--font-utility);
  font-size: var(--text-nav);
  font-weight: var(--weight-regular);
  color: inherit;
  white-space: nowrap;
}

/* Links y botones de nav */
.geo-nav__link,
.geo-nav__btn {
  font-family: var(--font-utility);
  font-size: var(--text-nav);
  font-weight: var(--weight-regular);
  color: inherit;
  line-height: 1;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.geo-nav__link:hover,
.geo-nav__btn:hover { opacity: 0.7; }
.geo-nav a.geo-nav__link--bold { font-weight: 700 !important; }

/* Ícono de búsqueda */
.geo-nav__search-btn {
  display: flex;
  align-items: center;
  color: inherit;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.geo-nav__search-btn svg { width: 100%; height: 100%; }

/* Botón MENÚ */
.geo-nav__menu-btn {
  font-family: var(--font-utility);
  font-size: var(--text-nav);
  font-weight: var(--weight-regular);
  color: inherit;
  padding: 0;
}

/* ----------------------------------------------------------
   Estado sólido — páginas sin hero oscuro (ej. Redes, Contacto)
   Se aplica desde PHP vía el campo ACF header_transparent=false.
   No tiene transición (el header es siempre blanco en estas páginas).
   ---------------------------------------------------------- */
.geo-nav--solid {
  background-color: var(--color-white);
  color: var(--color-black);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}
.geo-nav--solid .geo-nav__logo-img--white { display: none; }
.geo-nav--solid .geo-nav__logo-img--black { display: block; }

/* MENÚ button en estado blanco — explícito para superar la especificidad del
   estado over-dark (que usa !important). Espeja la regla de .geo-nav--solid/
   .is-scrolled para links: texto negro siempre visible sobre fondo blanco. */
.geo-nav--solid .geo-nav__menu-btn,
.geo-nav.is-scrolled .geo-nav__menu-btn {
  color: var(--color-black) !important;
}

/* ----------------------------------------------------------
   Estado claro — páginas con header blanco (ej. Contacto)
   ---------------------------------------------------------- */
.geo-nav--light {
  color: var(--color-black);
}

/* ----------------------------------------------------------
   Estado scrolled — fondo blanco, texto negro
   ---------------------------------------------------------- */
.geo-nav.is-scrolled {
  background-color: var(--color-white);
  color: var(--color-black);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
}

/* ----------------------------------------------------------
   Barra de búsqueda — toggle bajo el nav
   ---------------------------------------------------------- */
.geo-search-bar {
  position: fixed;
  top: 68px;
  left: 0;
  right: 0;
  z-index: 99;
  background-color: var(--color-white);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding: 12px var(--space-lg);
  transform: translateY(-100%);
  transition: transform 0.25s ease;
}

.geo-search-bar:not([hidden]) {
  transform: translateY(0);
}

/* Forzar visibilidad cuando JS remueve el atributo hidden */
.geo-search-bar[hidden] { display: none; }
.geo-search-bar.is-open  { display: block; transform: translateY(0); }

.geo-search-bar form {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 1761px;
  margin: 0 auto;
}

.geo-search-bar input[type="search"] {
  flex: 1;
  height: var(--input-height);
  padding: 0 16px;
  background-color: var(--color-gray-light);
  border: 1px solid var(--color-gray-stroke);
  border-radius: var(--input-radius);
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  color: var(--color-black);
  outline: none;
}

.geo-search-bar button[type="submit"] {
  display: flex;
  align-items: center;
  color: var(--color-black);
  opacity: 0.6;
  transition: opacity 0.2s;
}
.geo-search-bar button[type="submit"]:hover { opacity: 1; }

/* ----------------------------------------------------------
   Compensar altura del nav fijo
   ---------------------------------------------------------- */
.geo-nav-spacer { height: 68px; }

/* ----------------------------------------------------------
   Off-canvas MENÚ — VALORES EXACTOS Figma
   (ver partials/offcanvas-menu.php para el mapeo de nodos)
   - Backdrop  Rect 259: full-screen, fill #000000 @ 70%
   - Panel     Rect 258: 626 × 100vh, fill #fff, anclado DERECHA
   - Items: Montserrat Medium 22 / 26.818 px, ls -0.44, color #000
            padding-left 102 px · top primer item 140 px
            row-gap top-to-top 37 px ⇒ con lh 26.818 → row-gap 10 px
   - Close: Ellipse 31×31 fill #000 con X Montserrat ExtraLight 22 #fff,
            anclado top:25 px / right:32 px
   - Entrada/salida con GSAP (no usar transition CSS aquí).
   ---------------------------------------------------------- */
.geo-offcanvas {
  position: fixed;
  inset: 0;
  z-index: 9999;                 /* alto: por encima de cualquier capa con transform/blur */
  pointer-events: none;          /* GSAP activa pointer cuando abre */
}
.geo-offcanvas:not([hidden]) {
  pointer-events: auto;
}

/* Backdrop — Rect 259: 1818×1002 @ 70% black */
.geo-offcanvas__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.70);    /* Figma exact: #000 @ 70% */
  opacity: 0;                                /* GSAP anima */
  will-change: opacity;
}

/* Panel blanco — Rect 258: 626 × 1002 (web: 626 × 100vh) anclado derecha.
   Slide controlado por CSS transition + .is-open en el contenedor (no GSAP).
   El overlay e items SÍ animan con GSAP. */
.geo-offcanvas__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;                                /* asegura pintar SOBRE el overlay */
  width: 626px;                              /* Figma exact */
  max-width: 92vw;                           /* fallback en viewports angostos */
  background-color: #ffffff;                 /* Figma fill */
  padding: 140px 28px 48px 102px;            /* top=primer item · left=102 (Figma local x) */
  box-sizing: border-box;
  overflow-y: auto;
  transform: translateX(100%);               /* estado cerrado por defecto */
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}
/* Estado abierto: slide a 0. Disparado por JS al toggear .is-open. */
.geo-offcanvas.is-open .geo-offcanvas__panel {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .geo-offcanvas__panel { transition: transform 0.2s ease; }
}

/* Botón cerrar — círculo negro 31×31 con X blanca ExtraLight 22 */
.geo-offcanvas__close {
  position: absolute;
  top: 25px;
  right: 32px;
  width: 31px;
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000;                        /* Figma Ellipse 73 fill */
  color: #ffffff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  line-height: 0;
  transition: transform 0.25s cubic-bezier(.2,.7,.2,1),
              background 0.2s ease;
}
.geo-offcanvas__close:hover { transform: scale(1.08); background: #1a1a1a; }
.geo-offcanvas__close:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}
.geo-offcanvas__close-glyph {
  font-family: 'Montserrat', sans-serif;
  font-weight: 200;                            /* ExtraLight (Figma 22 px ExtraLight) */
  font-size: 22px;
  line-height: 1;                              /* glyph centrado verticalmente en el círculo */
  letter-spacing: -0.44px;
  color: #ffffff;
  display: inline-block;
  transform: translateY(-1px);                 /* micro-ajuste óptico del × en el círculo */
}

/* Lista de navegación — Montserrat Medium 22 / 26.818 ls=-0.44 #000 */
.geo-offcanvas__nav {
  width: 100%;
}
.geo-offcanvas__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;                                   /* Figma: top-to-top 37 − lh 26.818 ≈ 10 */
  margin: 0;
  padding: 0;
}
.geo-offcanvas__item { margin: 0; padding: 0; }
.geo-offcanvas__link {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;                            /* Medium */
  font-size: 22px;
  line-height: 26.818px;                       /* Figma exact */
  letter-spacing: -0.44px;                     /* Figma: -2% × 22 */
  color: #000000;
  text-decoration: none;
  display: inline-block;
  padding: 0;
  transition: opacity 0.2s ease,
              transform 0.25s cubic-bezier(.2,.7,.2,1);
}
.geo-offcanvas__link:hover { opacity: 0.6; transform: translateX(4px); }
.geo-offcanvas__link:focus-visible {
  outline: 2px solid #000;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .geo-offcanvas__close,
  .geo-offcanvas__link { transition: opacity 0.2s ease !important; transform: none !important; }
}

@media (max-width: 480px) {
  .geo-offcanvas__panel {
    padding: 100px 24px 32px 32px;
  }
}

/* ============================================================
   HEADER responsive — 1100 / 768 / 480
   - 1100: reduce gaps y padding del nav
   - 768: oculta "PAGA FACTURAS" (queda CONTACTO + lupa | logo | MENÚ)
   - 480: logo más compacto, ocultar CONTACTO también (queda lupa | logo | MENÚ)
   El menú off-canvas absorbe TODA la navegación en mobile (ya es full-screen via panel slide).
   ============================================================ */
@media (max-width: 1100px) {
  .geo-nav { padding: 0 24px; }
  .geo-nav__right { gap: 16px; }
  .geo-nav__right-menu ul,
  .geo-nav__left-menu ul { gap: 16px; }
}

@media (max-width: 768px) {
  .geo-nav { padding: 0 16px; }
  /* "PAGA FACTURAS" se va: en mobile va dentro del menú off-canvas. */
  .geo-nav__right-menu,
  .geo-nav__right .geo-nav__link--bold { display: none; }
  .geo-nav__logo-img { height: 28px; }
  .geo-nav__right { gap: 14px; }
}

@media (max-width: 480px) {
  .geo-nav { padding: 0 12px; }
  /* También ocultamos CONTACTO en muy chico — el botón de búsqueda + logo + MENÚ alcanza. */
  .geo-nav__left-menu { display: none; }
  .geo-nav__logo-img { height: 24px; }
  .geo-nav a,
  .geo-nav .geo-nav__menu-btn { font-size: 13px !important; }
}

/* ----------------------------------------------------------
   Defensa anti-Elementor — tipografía del nav en PX fijos.
   Elementor (activo en páginas no reconstruidas) puede filtrar
   estilos al header global vía su kit CSS. Este bloque resetea
   TODOS los links y botones del .geo-nav con especificidad
   suficiente (doble clase) y valores en px, inmunes a herencia
   o variables sobreescritas.
   ---------------------------------------------------------- */

/* Base: todos los <a> dentro del nav — font Inter 15px 400 */
.geo-nav a,
.geo-nav .menu-item a {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-decoration: none;
  color: inherit;
}

/* CONTACTO (header-left) → bold */
.geo-nav .geo-nav__left-menu a,
.geo-nav .geo-nav__left-menu .menu-item a {
  font-weight: 700 !important;
}

/* Botón MENÚ y botón de búsqueda — reset anti-Elementor */
.geo-nav button,
.geo-nav .geo-nav__menu-btn,
.geo-nav .geo-nav__search-btn {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ============================================================
   HEADER OVER DARK HERO
   Cuando el body tiene .geo-nav-over-dark (JS lo agrega cuando
   un [data-dark-hero] está detrás de la franja del header):
   - Fondo del nav: TRANSPARENTE (sin franja blanca encima de la foto)
   - Logo: versión BLANCA (display block, oculta la negra)
   - Texto / botones / icons: BLANCO
   ============================================================ */
body.geo-nav-over-dark .geo-nav {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-bottom: none !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}
body.geo-nav-over-dark .geo-nav .geo-nav__logo-img--white { display: block !important; }
body.geo-nav-over-dark .geo-nav .geo-nav__logo-img--black { display: none  !important; }
body.geo-nav-over-dark .geo-nav .geo-nav__link,
body.geo-nav-over-dark .geo-nav .geo-nav__btn,
body.geo-nav-over-dark .geo-nav .geo-nav__menu-btn,
body.geo-nav-over-dark .geo-nav .geo-nav__search-btn,
body.geo-nav-over-dark .geo-nav a {
  color: #ffffff !important;
}
body.geo-nav-over-dark .geo-nav .geo-nav__search-btn svg path,
body.geo-nav-over-dark .geo-nav .geo-nav__search-btn svg circle {
  stroke: #ffffff !important;
}
/* Sombra muy suave bajo el texto para legibilidad sobre fotos claras */
body.geo-nav-over-dark .geo-nav .geo-nav__link,
body.geo-nav-over-dark .geo-nav .geo-nav__menu-btn {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}