/**
 * HEADER / NAV — mapea a header.php en WordPress
 *
 * Dos estados reales, sin JS más allá del que ya existía (nav.js solo
 * decide CUÁNDO agregar/quitar `.is-scrolled`; todo el cambio visual
 * — fondo, logo, color de texto — lo resuelve este CSS):
 *
 *   1) Arriba (sin .is-scrolled): header transparente sobre el hero,
 *      logo BLANCO, texto de menú blanco — necesario porque el hero
 *      es una foto/video oscuro.
 *   2) Con scroll (.is-scrolled): header blanco sólido, logo a COLOR,
 *      texto de menú en tinta oscura.
 */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(255,255,255,0);
  transition:background var(--dur-base) ease, box-shadow var(--dur-base) ease, padding var(--dur-base) ease;
  padding:26px 0;
}
.site-header.is-scrolled{
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--color-line);
  padding:16px 0;
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; }

/* Logo corporativo GROÜ Inmobiliaria — dos versiones apiladas, se
   cruzan en opacidad. El proyecto actual (Casuarinas 339) se
   identifica dentro del hero, no en el header: así, cuando existan
   más proyectos, el header no necesita cambiar. */
.site-brand{ display:flex; align-items:center; position:relative; height:36px; }
.site-brand__logo{
  height:36px; width:auto; display:block;
  transition:opacity var(--dur-base) ease;
}
.site-brand__logo--color{ position:absolute; top:0; left:0; opacity:0; }
.site-header.is-scrolled .site-brand__logo--white{ opacity:0; }
.site-header.is-scrolled .site-brand__logo--color{ opacity:1; }
@media (max-width:640px){ .site-brand{ height:30px; } .site-brand__logo{ height:30px; } }

.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{
  font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:rgba(255,255,255,.94);
  text-shadow:0 1px 3px rgba(0,0,0,.25); /* legibilidad sobre fotografía, cualquiera sea su tono */
  position:relative;
  padding-bottom:4px;
  transition:color var(--dur-base) ease, text-shadow var(--dur-base) ease;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--color-amber-soft);
  transition:width var(--dur-fast) ease, background var(--dur-base) ease;
}
.nav-links a:hover::after, .nav-links a:focus-visible::after{ width:100%; }

.site-header.is-scrolled .nav-links a{ color:var(--color-ink); text-shadow:none; }
.site-header.is-scrolled .nav-links a::after{ background:var(--color-brand); }

.nav-links .nav-cta{ background:var(--color-brand); color:var(--color-bg) !important; padding:11px 20px; border-radius:var(--radius); font-size:12px !important; text-shadow:none !important; display:inline-flex; align-items:center; justify-content:center; }
.nav-cta::after{ display:none; }

.nav-toggle{ display:none; background:none; border:none; padding:8px; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:24px; height:2px; background:rgba(255,255,255,.94); position:relative; transition:.25s;
}
.site-header.is-scrolled .nav-toggle span,
.site-header.is-scrolled .nav-toggle span::before,
.site-header.is-scrolled .nav-toggle span::after{ background:var(--color-ink); }
/* El menú mobile abierto siempre vive sobre fondo claro (.nav-links),
   así que sus barras deben verse oscuras aunque el header siga
   transparente arriba de la página. */
.nav-toggle.is-open span{ background:transparent !important; }
.nav-toggle.is-open span::before,
.nav-toggle.is-open span::after{ background:var(--color-ink) !important; }
.nav-toggle span::before{ position:absolute; top:-8px; }
.nav-toggle span::after{ position:absolute; top:8px; }

@media (max-width:900px){
  .nav-links{
    position:fixed; inset:0 0 0 auto; height:100vh; width:min(78vw,340px);
    background:var(--color-bg); flex-direction:column; justify-content:center; align-items:flex-start;
    padding:40px; gap:26px; transform:translateX(100%); transition:transform var(--dur-base) ease;
    box-shadow:-8px 0 30px rgba(0,0,0,.12);
    /* visibility (no solo transform) evita que el panel siga siendo
       alcanzable por Tab mientras está fuera de pantalla — con solo
       translateX, los links seguían técnicamente enfocables aunque
       invisibles. Con display:flex el resto del bloque no cambia. */
    visibility:hidden;
  }
  .nav-links.is-open{ transform:translateX(0); visibility:visible; }
  .nav-links a{ font-size:16px; color:var(--color-ink) !important; text-shadow:none !important; }
  .nav-links a::after{ background:var(--color-brand) !important; }
  .nav-toggle{ display:block; z-index:101; }
  .nav-toggle.is-open span{ background:transparent; }
  .nav-toggle.is-open span::before{ top:0; transform:rotate(45deg); }
  .nav-toggle.is-open span::after{ top:0; transform:rotate(-45deg); }
}

/* ---------- Excepción: página Contacto ----------
   Contacto no tiene hero, así que el header no debe arrancar
   transparente (esa variante está pensada para ir sobre un hero
   oscuro). Reglas SCOPEADAS a .page-contacto — no afectan ninguna
   otra página. El header queda visualmente igual a su estado
   "scrolled" desde el primer render, sin depender del JS de scroll
   (que además se desactiva para esta página en nav.js). */
.page-contacto .site-header{
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--color-line);
  padding:16px 0;
}
.page-contacto .site-brand__logo--white{ opacity:0; }
.page-contacto .site-brand__logo--color{ opacity:1; }
.page-contacto .nav-links a{ color:var(--color-ink); text-shadow:none; }
.page-contacto .nav-links a::after{ background:var(--color-brand); }
.page-contacto .nav-toggle span,
.page-contacto .nav-toggle span::before,
.page-contacto .nav-toggle span::after{ background:var(--color-ink); }