/* nav.css — SPEC-v7 §3 floating menu (partials/nav.php + nav.js), loaded on every page.
   No JS: a plain list in the page flow. html.js: fixed bar, transparent until scrolled (gradient + blur, solid fallback).
   < 860 px: hamburger → full-height overlay. Home ([data-home]): shown only in the descent and closing phases (phases.js). */
:root { --nav-h: 64px; --z-nav: 45; } /* above --z-float (40), below the consent bar (50) and the skip link (60) */

.topnav { position: relative; z-index: var(--z-nav); font-family: var(--font-body); color: var(--bone-100); }
.topnav__bar {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  max-width: calc(var(--container) + 2 * var(--gutter)); min-height: var(--nav-h); margin-inline: auto; padding: 0 var(--gutter); /* = .wrap */
}
.topnav ul { margin: 0; padding: 0; list-style: none; }

/* brand: the fingerprint mark (logo-mask.webp) painted with the ember gradient, as in the hero */
.topnav__brand { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-pill); }
.topnav__mark {
  display: block; width: 21px; height: 36px;
  background: linear-gradient(180deg, var(--fire-9) 0%, var(--fire-7) 40%, var(--fire-5) 78%, var(--fire-4) 100%);
  -webkit-mask: url(/assets/img/brand/logo-mask.webp) center / 100% 100% no-repeat;
  mask: url(/assets/img/brand/logo-mask.webp) center / 100% 100% no-repeat;
  transition: filter var(--d-s) var(--ease-stroke);
}
.topnav__brand:hover .topnav__mark, .topnav__brand:focus-visible .topnav__mark { filter: drop-shadow(0 0 6px rgba(240, 122, 34, .7)); }

.topnav__panel { flex: 1 1 auto; }
.topnav__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .25rem 1.25rem; }
.topnav__item { position: relative; display: flex; align-items: center; }

.topnav__link {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  color: var(--bone-100); font-weight: 500; font-size: 1rem; letter-spacing: .02em; text-decoration: none; white-space: nowrap;
  text-shadow: 0 1px 2px rgba(5, 3, 2, .9);
  transition: color var(--d-xs) var(--ease-stroke), text-shadow var(--d-s) var(--ease-stroke);
}
/* ember underline: hover, the current page (aria-current) and its section */
.topnav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(217, 84, 26, 0), var(--fire-6) 20%, var(--fire-8) 50%, var(--fire-6) 80%, rgba(217, 84, 26, 0));
  transform: scaleX(0); transition: transform var(--d-s) var(--ease-reveal);
}
.topnav__link:hover, .topnav__link:focus-visible { color: var(--fire-9); text-shadow: 0 0 .9em rgba(240, 122, 34, .45), 0 1px 2px rgba(5, 3, 2, .9); }
.topnav__link:hover::after, .topnav__link:focus-visible::after, .topnav__link[aria-current="page"]::after, .topnav__link.is-section::after { transform: scaleX(1); }
.topnav__link[aria-current="page"], .topnav__link.is-section { color: var(--fire-9); }

/* «Aplicar / Agendar»: the highlighted button */
.topnav__cta {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px;
  border-radius: var(--r-pill); background-image: var(--grad-btn); color: var(--ink-on-fire);
  font-weight: 600; font-size: .9375rem; letter-spacing: .02em; text-decoration: none; white-space: nowrap;
  box-shadow: 0 6px 22px -10px rgba(217, 84, 26, .7);
  transition: box-shadow var(--d-xs) var(--ease-stroke), transform var(--d-xs) var(--ease-stroke);
}
.topnav__cta:hover, .topnav__cta:focus-visible { background-image: var(--grad-btn-hover); box-shadow: var(--sh-btn-hover); transform: translateY(-1px); }
.topnav__cta:focus-visible { box-shadow: var(--sh-btn-hover), var(--focus-ring); }

/* (2026-11-03: the «Servicios» dropdown is gone: every menu item is a plain link) */
.topnav-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 8px; pointer-events: none; }

/* hamburger: only with JS, on narrow screens */
.topnav__burger { display: none; }

/* ---------- with JS: floating bar ---------- */
html.js .topnav { position: fixed; top: 0; left: 0; right: 0; transition: transform .45s var(--ease-reveal), opacity .3s var(--ease-stroke); }
html.js .topnav::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(8, 5, 4, .9) 0%, rgba(8, 5, 4, .74) 100%);
  border-bottom: 1px solid rgba(192, 138, 62, .16);
  -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1);
  transition: opacity var(--d-s) var(--ease-stroke);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.js .topnav::before { background: rgba(8, 5, 4, .96); }
}
html.js .topnav.is-scrolled::before, html.js .topnav[data-home]::before { opacity: 1; }
html.js .topnav__bar { flex-wrap: nowrap; }

/* home: out of the way over the hero and the cave; keyboard focus brings it back */
html.js[data-phase] .topnav[data-home] { transform: translateY(-110%); opacity: 0; pointer-events: none; }
html.js[data-phase="descent"] .topnav[data-home], html.js[data-phase="closing"] .topnav[data-home],
html.js .topnav[data-home]:focus-within, html.js .topnav[data-home].is-open, html.js .topnav[data-home].is-foot { transform: none; opacity: 1; pointer-events: auto; }

/* inner pages: anchors land below the bar */
html.js:has(.topnav:not([data-home])) { scroll-padding-top: calc(var(--nav-h) + 16px); }

@media (min-width: 860px) and (max-width: 1099.98px) {
  .topnav__list { gap: .25rem .9rem; }
  .topnav__link { font-size: .9375rem; }
  .topnav__cta { padding: 0 16px; }
}

/* ---------- < 860 px with JS: hamburger + full-height overlay ---------- */
@media (max-width: 859.98px) {
  html.js .topnav__bar { justify-content: space-between; }
  html.js .topnav__burger {
    position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    margin-right: -6px; padding: 0; border: 1px solid rgba(192, 138, 62, .4); border-radius: var(--r-pill);
    background: rgba(8, 5, 4, .6); cursor: pointer;
  }
  html.js .topnav__burger:hover, html.js .topnav__burger:focus-visible { border-color: var(--fire-7); }
  .topnav__burger-box { position: relative; display: block; width: 20px; height: 14px; }
  .topnav__burger-box i { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--bone-100); transition: transform var(--d-s) var(--ease-reveal), opacity var(--d-xs); }
  .topnav__burger-box i:nth-child(1) { top: 0; }
  .topnav__burger-box i:nth-child(2) { top: 6px; }
  .topnav__burger-box i:nth-child(3) { top: 12px; }
  .topnav.is-open .topnav__burger-box i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .topnav.is-open .topnav__burger-box i:nth-child(2) { opacity: 0; }
  .topnav.is-open .topnav__burger-box i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  html.js .topnav__panel {
    position: fixed; inset: 0; z-index: 1; display: none; height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
    padding: calc(var(--nav-h) + 1.25rem) var(--gutter) calc(2rem + env(safe-area-inset-bottom, 0px));
    background: radial-gradient(90% 50% at 50% 0%, rgba(122, 26, 10, .35), rgba(122, 26, 10, 0) 70%), var(--stone-950);
  }
  html.js .topnav.is-open { z-index: 55; } /* over the consent bar (50) while open; the skip link (60) stays on top */
  html.js .topnav.is-open .topnav__panel { display: flex; flex-direction: column; }
  html.js .topnav__list { flex: 1 0 auto; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 0; }
  html.js .topnav__item { display: block; border-bottom: 1px solid rgba(192, 138, 62, .16); }
  html.js .topnav__link { display: flex; min-height: 56px; font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; letter-spacing: 0; }
  html.js .topnav__link::after { left: 0; right: auto; width: 2.5rem; bottom: 10px; }
  html.js .topnav__item--cta { margin-top: auto; padding-top: 1.75rem; border-bottom: 0; }
  html.js .topnav__cta { width: 100%; min-height: 56px; font-size: 1.0625rem; }
  html.nav-locked, html.nav-locked body { overflow: hidden; }
}

/* no JS, narrow: the list wraps under the mark */
@media (max-width: 859.98px) {
  html:not(.js) .topnav__list { justify-content: flex-start; gap: 0 1rem; padding-bottom: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html.js .topnav, .topnav__link::after { transition: none; }
}