/* ── Shared nav styles — included by ALL pages ─────────── */

.nav {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: min(1200px, calc(100% - 32px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px 9px 18px;
  background: rgba(255,255,255,0.78);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border: 1px solid rgba(17,17,28,0.06);
  border-radius: 999px;
  box-shadow: 0 10px 30px -20px rgba(0,0,0,.3);
  transition: top .3s ease, box-shadow .3s ease, background .3s ease,
              transform .4s cubic-bezier(.4,0,.2,1), opacity .3s ease;
}
.nav.is-scrolled {
  top: 10px;
  box-shadow: 0 20px 50px -24px rgba(0,0,0,.3);
  background: rgba(255,255,255,0.92);
}
.nav.is-hidden {
  transform: translateX(-50%) translateY(-140%);
  opacity: 0;
  pointer-events: none;
}

.nav-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-display);
  font-size: 19px; line-height: 1;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-decoration: none;
}
.nav-brand img {
  width: 26px; height: 26px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.nav-links {
  display: flex; align-items: center; gap: 2px;
  list-style: none; margin: 0; padding: 0;
}
.nav-links a {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px; line-height: 1;
  color: var(--ink-soft);
  text-decoration: none;
  transition: background .2s, color .2s;
}
.nav-links a:hover,
.nav-links a.active { background: var(--bg-3); color: var(--ink); }

.nav-cta { display: flex; align-items: center; gap: 8px; }

.arrow-icon {
  width: 16px; height: 16px;
  flex-shrink: 0;
  transition: transform .25s ease;
}
.btn:hover .arrow-icon { transform: translate(3px, -3px); }

/* Shared button base — must be here so nav buttons are identical on all pages */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 700; font-size: 14px; line-height: 1;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  position: relative; overflow: hidden;
}
.btn-primary { background: var(--orange); color: #fff; box-shadow: 0 20px 40px -14px rgba(255,128,0,0.45); }
.btn-primary:hover { transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn-ghost:hover { background: var(--bg-3); border-color: var(--ink); }

/* ── Menú móvil ─────────────────────────────────────────── */
.nav-burger{display:none;place-items:center;align-content:center;gap:5px;width:42px;height:42px;flex-shrink:0;padding:0;border:1.5px solid var(--line);border-radius:999px;background:transparent;cursor:pointer;transition:border-color .2s,background .2s}
.nav-burger:hover{border-color:var(--ink)}
.nav-burger span{display:block;width:17px;height:2px;border-radius:2px;background:var(--ink);transition:transform .28s cubic-bezier(.4,0,.2,1)}
.nav-burger.is-open{background:var(--ink);border-color:var(--ink)}
.nav-burger.is-open span{background:#fff}
.nav-burger.is-open span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav-burger.is-open span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

.nav-scrim{position:fixed;inset:0;z-index:98;background:rgba(17,17,28,.45);opacity:0;pointer-events:none;transition:opacity .3s ease}
.nav-scrim.is-open{opacity:1;pointer-events:auto}

.nav-drawer{position:fixed;top:74px;left:50%;z-index:99;width:min(560px,calc(100% - 32px));padding:14px;background:rgba(255,255,255,.97);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border:1px solid rgba(17,17,28,.06);border-radius:26px;box-shadow:0 30px 70px -28px rgba(0,0,0,.4);opacity:0;pointer-events:none;transform:translateX(-50%) translateY(-14px) scale(.97);transition:opacity .26s ease,transform .34s cubic-bezier(.2,.8,.2,1)}
.nav-drawer.is-open{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0) scale(1)}
.nav-drawer-links{display:flex;flex-direction:column;gap:2px;list-style:none;margin:0;padding:0}
.nav-drawer-links a{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:14px 16px;border-radius:16px;font-family:var(--f-display);font-size:19px;line-height:1;color:var(--ink);text-decoration:none;transition:background .2s,color .2s}
.nav-drawer-links a::after{content:"→";font-family:var(--f-body);font-weight:700;font-size:15px;color:var(--ink-mute);transition:transform .2s}
.nav-drawer-links a:hover{background:var(--bg-3)}
.nav-drawer-links a:hover::after{transform:translateX(3px)}
.nav-drawer-links a.active{background:var(--orange);color:#fff}
.nav-drawer-links a.active::after{color:#fff}
.nav-drawer-cta{display:flex;flex-direction:column;gap:8px;margin-top:10px;padding-top:14px;border-top:1px solid var(--line)}
.nav-drawer-cta .btn{justify-content:center;min-height:50px;padding:15px 18px;font-size:15px}
html.nav-locked{overflow:hidden}
/* el banner de cookies no debe tapar el menú abierto */
html.nav-locked #cookieBanner{opacity:0!important;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility .2s ease}
.nav.has-open-menu.is-hidden{transform:translateX(-50%);opacity:1;pointer-events:auto}

@media (max-width:900px){
  .nav-links{display:none}
  .nav-burger{display:grid}
  .nav-cta .btn-ghost{display:none}
}
@media (min-width:901px){.nav-drawer,.nav-scrim,.nav-burger{display:none!important}}
@media (max-width:560px){
  .nav{top:12px;width:calc(100% - 20px);padding:8px 8px 8px 14px;gap:8px}
  .nav.is-scrolled{top:8px}
  .nav-brand{font-size:17px}
  .nav-brand img{width:24px;height:24px}
  .nav-cta{gap:6px}
  .nav-cta .btn-primary{padding:10px 14px!important;font-size:13px!important}
  .nav-burger{width:44px;height:44px}
  .nav-drawer{top:66px;border-radius:22px}
  .nav-drawer-links a{font-size:18px}
}