/* Proplync.mx · Navigation
   Redesigned: Architectural Editorial
   ──────────────────────────────────── */

header{
  position:sticky;top:0;z-index:50;
  background:rgba(10,22,40,.82);
  /* La barra es oscura, asi que declara su color de texto en vez de dejar que
     sus hijos hereden la tinta del body. Sin esto, cualquier elemento que no
     se pinte a si mismo cae en tinta sobre tinta. */
  color:var(--on-ink);
  backdrop-filter:blur(24px) saturate(1.5);
  -webkit-backdrop-filter:blur(24px) saturate(1.5);
  border-bottom:1px solid rgba(240,237,232,.05);
  transition:background var(--duration) ease,box-shadow var(--duration) ease,border-color var(--duration) ease;
}
header.scrolled{
  background:rgba(10,22,40,.96);
  box-shadow:0 1px 32px rgba(0,0,0,.18);
  border-bottom-color:rgba(240,237,232,.08);
}

nav{display:flex;align-items:center;gap:var(--sp-8);height:72px}

.brand{
  display:flex;align-items:center;gap:11px;
  color:var(--on-ink);
  font-family:var(--display);
  transition:opacity var(--duration) ease;
}
.brand:hover{opacity:.85}
.brand .mark{width:30px;height:30px;flex:none}

/* The name is ONE flex item. It used to be two -- a bare text node plus the
   .accent span -- so the container's gap landed between "Proplync" and ".mx"
   and tore the wordmark in half on every page. */
.brand .wordmark{
  display:flex;align-items:baseline;white-space:nowrap;
  font-size:1.16rem;font-weight:600;
  letter-spacing:-.015em;
}
.brand .accent{color:var(--gold)}

/* align-items:center so a child shorter than the row sits on the same axis
   instead of being stretched and top-aligning its own contents. */
.navlinks{display:flex;align-items:center;gap:4px;margin-left:auto}
.navlinks a{
  color:var(--on-ink-dim);
  font-size:.82rem;font-weight:500;
  letter-spacing:.01em;
  padding:8px 14px;
  border-radius:999px;
  /* Two-word labels ("Buscar propiedades", "Soy agente") broke onto a second
     line as soon as the row got tight, leaving the bar ragged. Let the row
     collapse to the hamburger instead of reflowing the labels. */
  white-space:nowrap;
  transition:color var(--duration) ease,background var(--duration) ease;
  position:relative;
}
.navlinks a:hover{color:var(--on-ink);background:rgba(240,237,232,.06)}
.navlinks a[style*="color:var(--aqua)"]{color:var(--gold)!important;background:rgba(201,169,110,.08)}

.navtools{display:flex;align-items:center;gap:14px}

.lang{
  display:inline-flex;
  border:1px solid rgba(240,237,232,.12);
  border-radius:999px;overflow:hidden;
  font-family:var(--mono);font-size:.68rem;
}
.lang button{
  background:transparent;color:var(--on-ink-dim);
  border:0;padding:7px 12px;cursor:pointer;
  letter-spacing:.06em;font-family:var(--mono);font-size:.68rem;
  transition:all var(--duration) ease;
}
.lang button.on{
  background:linear-gradient(160deg,var(--gold),var(--gold-deep));
  color:var(--ink);font-weight:700;
}
.lang button:hover:not(.on){color:var(--on-ink)}

/* Buttons — refined */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--body);font-weight:600;font-size:.88rem;
  padding:13px 26px;border-radius:999px;cursor:pointer;border:0;
  transition:transform var(--duration) var(--ease-out),box-shadow var(--duration) ease,background var(--duration) ease,color var(--duration) ease,border-color var(--duration) ease;
  white-space:nowrap;
  position:relative;overflow:hidden;
  letter-spacing:.01em;
}
.btn::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 60%);
  pointer-events:none;
  border-radius:inherit;
}
.btn:active{transform:scale(.97)!important}

.btn-gold{
  background:linear-gradient(160deg,var(--gold),var(--gold-deep));
  color:var(--ink);
  box-shadow:var(--shadow-gold);
}
.btn-gold:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-gold-lg);
}

/* Un boton fantasma vive sobre dos fondos distintos: la barra oscura y el
   papel del dashboard. Estaba escrito solo para el oscuro -- texto casi blanco
   y borde casi blanco -- asi que en el dashboard quedaba invisible sobre el
   papel. Ahora toma el color del texto que lo rodea y deriva de ahi borde y
   hover, de modo que un solo boton funciona en los dos sitios. */
.btn-ghost{
  background:transparent;
  color:inherit;
  border:1px solid rgba(92,101,119,.28);                       /* respaldo */
  border-color:color-mix(in srgb, currentColor 28%, transparent);
}
.btn-ghost::after{display:none}
.btn-ghost:hover{
  border-color:rgba(92,101,119,.55);                           /* respaldo */
  border-color:color-mix(in srgb, currentColor 55%, transparent);
  background:rgba(92,101,119,.08);
  background:color-mix(in srgb, currentColor 8%, transparent);
}

.btn-dark{
  background:var(--ink);color:var(--on-ink);
  box-shadow:var(--shadow-sm);
}
.btn-dark::after{background:linear-gradient(180deg,rgba(255,255,255,.06),transparent)}
.btn-dark:hover{transform:translateY(-1px);box-shadow:var(--shadow-md);background:var(--ink-2)}

.btn-outline{
  background:transparent;color:var(--ink);
  border:1.5px solid rgba(26,36,56,.14);
}
.btn-outline::after{display:none}
.btn-outline:hover{
  border-color:var(--ink);background:var(--ink);color:var(--on-ink);
  box-shadow:var(--shadow-md);
}

/* Mobile nav toggle */
.navtoggle{
  display:none;background:none;border:0;cursor:pointer;
  flex-direction:column;gap:5px;padding:8px;
  border-radius:8px;
  transition:background var(--duration) ease;
}
.navtoggle:hover{background:rgba(240,237,232,.06)}
.navtoggle span{
  width:22px;height:1.5px;background:var(--on-ink);border-radius:2px;
  transition:transform var(--duration) ease,opacity var(--duration) ease;
}

/* Mobile-only login button — always visible in header bar */
.nav-login-mobile{
  display:none;
  align-items:center;gap:6px;
  color:var(--on-ink);
  font-family:var(--body);font-weight:600;font-size:.78rem;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(240,237,232,.15);
  background:rgba(240,237,232,.05);
  transition:all var(--duration) ease;
  white-space:nowrap;
}
.nav-login-mobile:hover{
  border-color:var(--gold);background:rgba(201,169,110,.08);color:var(--gold);
}
.nav-login-mobile svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;flex:none}

/* Collapse to the hamburger at 1150px, not 900. The full link row plus the
   language toggle and the CTA needs about 1300px to lay out; between 900 and
   1150 it ran past the viewport, and because .wrap then sized itself against
   the wider scroll box it dragged the whole page into horizontal scroll and
   pushed the CTA off the right edge. */
@media (max-width:1150px){
  .navlinks{display:none}
  .navtoggle{display:flex}
  .navlinks.open{
    display:flex;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;
    background:rgba(10,22,40,.97);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    padding:16px 24px 24px;gap:4px;
    border-bottom:1px solid rgba(240,237,232,.06);
    margin:0;
    animation:navSlide .3s var(--ease-out);
  }
  .navlinks.open a{
    padding:14px 16px;
    border-radius:var(--radius-sm);
    font-size:.92rem;
  }
  .navlinks.open a:hover{background:rgba(240,237,232,.06)}
}

@media (max-width:900px){
  nav{height:64px}
  .nav-login-mobile{display:inline-flex}
  .navtools .btn-gold{display:none}
  .btn-gold{font-size:.82rem;padding:10px 18px}
}

/* Below this the header bar itself stops fitting: brand, language toggle,
   login and hamburger together exceed the viewport. Shed the login label and
   tighten spacing rather than let the page scroll sideways. */
@media (max-width:430px){
  .navtools{gap:8px}
  .nav-login-mobile{padding:8px 10px}
  .nav-login-mobile span{display:none}
}
@media (max-width:380px){
  .brand .wordmark{font-size:1rem}
  .brand .mark{width:26px;height:26px}
  .navtools{gap:6px}
  .lang button{padding:5px 8px}
}
@media (max-width:340px){
  header .wrap{padding:0 var(--gutter)}
  .navtools{gap:4px}
  .navtoggle{padding:6px}
}

@keyframes navSlide{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:none}
}