/**
 * landing-nav.css — Header público compartido por las páginas de landing
 * (home, cómo funciona, fundamentos, acceso, preguntas). Un solo archivo
 * para que el nav/burger/menú mobile se vean y se comporten IDÉNTICO en
 * todo el sitio. Depende de las variables --text, --text-2, --blue,
 * --blue-ink, --ease, --spring, --font-d, --surface ya definidas en el
 * :root de cada página. Ver plan de sesión del 2026-07-25.
 */

/* ── NAVBAR: píldora flotante ── */
.nav {
  position:fixed; z-index:100; top:14px; left:50%; transform:translateX(-50%);
  width:min(1140px, calc(100% - 28px));
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; column-gap:16px;
  padding:10px 10px 10px 22px;
  border-radius:980px;
  background:#fff;
  box-shadow:0 10px 40px rgba(16,24,40,.09);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  transition:box-shadow .3s var(--ease), width .5s var(--spring), top .5s var(--spring),
    left .5s var(--spring), transform .5s var(--spring), border-radius .5s var(--spring), padding .5s var(--spring);
}
.nav.scrolled {
  top:0; left:0; transform:none;
  width:100%;
  border-radius:0;
  padding:14px 32px;
  box-shadow:0 14px 46px rgba(16,24,40,.12);
}
.nav__logo { justify-self:start; font-family:var(--font-d); font-size:22px; font-weight:800; letter-spacing:-.03em; color:var(--text); }
.nav__logo b { color:var(--blue); font-weight:800; }
.nav__links { justify-self:center; display:flex; align-items:center; gap:6px; }
.nav__link {
  font-size:14px; font-weight:600; color:var(--text-2);
  padding:9px 15px; border-radius:980px; transition:color .25s var(--ease), background .25s var(--ease);
}
.nav__link:hover { color:var(--text); background:var(--surface); }
.nav__end { justify-self:end; display:flex; align-items:center; gap:10px; }
.nav__cta {
  font-size:14px; font-weight:700; color:#fff;
  padding:11px 22px; border-radius:980px;
  background:var(--blue);
  transition:transform .25s var(--spring), box-shadow .25s var(--ease), background .25s var(--ease);
  box-shadow:0 10px 26px rgba(40,103,240,.28);
}
.nav__cta:hover { transform:translateY(-1px); background:var(--blue-ink); box-shadow:0 14px 34px rgba(40,103,240,.36); }

/* Burger + menú mobile */
.burger { display:none; flex-direction:column; justify-content:center; gap:5px; width:42px; height:42px; padding:0; border:none; background:transparent; cursor:pointer; z-index:210; }
.burger span { display:block; width:22px; height:2px; margin:0 auto; background:var(--text); border-radius:2px; transition:transform .3s var(--ease), opacity .2s var(--ease); }
.burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu { position:fixed; inset:0; z-index:200; background:#fff; opacity:0; visibility:hidden; transition:opacity .25s var(--ease), visibility .25s var(--ease); }
.mobile-menu.open { opacity:1; visibility:visible; }
.mm-close { position:absolute; top:16px; right:18px; z-index:4; width:44px; height:44px; display:flex; align-items:center; justify-content:center; border:none; border-radius:50%; background:var(--surface); color:var(--text); font-size:24px; line-height:1; cursor:pointer; }
html[dir="rtl"] .mm-close { right:auto; left:18px; }
.mobile-menu__inner { position:relative; z-index:2; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:80px 24px 40px; }
.mm-link { color:var(--text); font-family:var(--font-d); font-size:23px; font-weight:700; letter-spacing:-.02em; padding:11px 20px; text-align:center; opacity:0; transform:translateY(12px); transition:opacity .35s var(--ease), transform .35s var(--ease); }
.mobile-menu.open .mm-link { opacity:1; transform:none; }
.mm-cta { margin-top:18px; color:#fff; background:var(--blue); font-family:var(--font-d); font-size:18px; font-weight:700; padding:14px 38px; border-radius:12px; border:none; cursor:pointer; opacity:0; transform:translateY(12px); transition:opacity .35s var(--ease), transform .35s var(--ease); }
.mobile-menu.open .mm-cta { opacity:1; transform:none; }

/* Rango intermedio: la píldora ya no tiene ancho para 6 links + logo + CTA
   a tamaño completo, pero todavía no pasa al burger (eso recién a 760px) —
   sin esto, el texto queda desproporcionadamente grande para el espacio
   comprimido. */
@media(max-width:1024px){
  .nav__links{ gap:2px; }
  .nav__link{ padding:8px 10px; font-size:13px; }
  .nav__cta{ padding:9px 16px; font-size:13px; }
}

@media(max-width:760px){
  .nav{ top:16px; padding:8px 8px 8px 18px; grid-template-columns:1fr auto; }
  .nav__links{ display:none; }
  .nav__end{ display:none; }
  .burger{ display:flex; }
}