/* nav.css — Phase 1 (no @layer) */
/* Superset of ALL nav CSS from all 11 pages. */
/* Three nav implementations exist in the source HTML: */
/*   System A — 7 product pages: fixed height 64px, always-visible bg, .drawer#drw */
/*   System B — coleccion/contacto/nosotros: transparent-to-scrolled, .nav__drawer#navDrawer */
/*   System C — index: same as B but openDrawer() function name differs */
/* All scroll-state classes (.scrolled, .at-top) belong HERE, not in page CSS. */
/* Phase 2 unifies these into a single nav component with conditional Nunjucks logic. */

/* ── Base nav (shared) ── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid transparent;
  transition:
    background-color 0.5s var(--ease-quart),
    border-color 0.5s,
    padding 0.4s var(--ease-quart);
}

/* System A: product pages — same padding as editorial for height consistency */
.nav--product {
  padding: 28px clamp(1.5rem, 5vw, 5rem);
  background: var(--c-bg);
  border-bottom-color: var(--c-rule);
  z-index: 100;
}

/* System B/C: editorial pages — transparent hero, scrolls to solid */
.nav--editorial {
  padding: 28px var(--gap-container);
  background-color: transparent;
}

/* System D: light-hero pages — nav starts over cream background, needs dark text immediately */
/* Uses combined selector (.nav--editorial.nav--light-hero) to beat the specificity of */
/* .nav--editorial .nav__logo (both are 2-class selectors; combined = 3-class = always wins) */
.nav--editorial.nav--light-hero .nav__logo { color: var(--c-text); }
.nav--editorial.nav--light-hero .nav__links a { color: var(--c-secondary); }
.nav--editorial.nav--light-hero .nav__links a:hover,
.nav--editorial.nav--light-hero .nav__links a[aria-current="page"] { color: var(--c-text); }
.nav--editorial.nav--light-hero .nav__toggle span { background-color: var(--c-text); }

/* ── Scroll state classes (belong in nav.css — apply to any page) ── */
.nav.scrolled {
  background-color: var(--c-bg);
  border-color: var(--c-rule);
  padding-top: 16px;
  padding-bottom: 16px;
}

/* .at-top is the inverted state: nav starts solid, becomes transparent at top */
.nav.at-top {
  padding-top: 28px;
  padding-bottom: 28px;
  border-color: transparent;
}

/* ── Logo ── */
.nav__logo {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  letter-spacing: 0.05em;
  line-height: 1;
  transition: color 0.5s var(--ease-quart), opacity 0.25s;
}
/* Editorial nav: logo is light on dark hero, darkens on scroll */
.nav--editorial .nav__logo {
  font-size: clamp(17px, 1.8vw, 21px);
  letter-spacing: 0.1em;
  color: var(--c-dark-text);
}
.nav--editorial.scrolled .nav__logo { color: var(--c-text); }
/* Product nav: logo always dark */
.nav--product .nav__logo { color: var(--c-text); }
/* Crystal dot on logo (product pages only — requires span in markup) */
.nav__logo:hover { opacity: 0.6; }
.nav__logo:focus-visible { outline: 1px solid var(--c-accent); outline-offset: 4px; }

/* ── Nav links ── */
.nav__links {
  display: flex;
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
  list-style: none;
}
/* Product page link style */
.nav__link {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-secondary);
  transition: color 0.25s;
}
.nav__link:hover { color: var(--c-text); }
/* Editorial link style */
.nav__links a {
  font-family: var(--ff-body);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 251, 244, 0.75);
  transition: color 0.5s var(--ease-quart);
}
.nav__links a[aria-current="page"],
.nav__links a:hover { color: var(--c-dark-text); }
.nav.scrolled .nav__links a { color: var(--c-secondary); }
.nav.scrolled .nav__links a:hover,
.nav.scrolled .nav__links a[aria-current="page"] { color: var(--c-text); }
.nav__links a:focus-visible { outline: 1px solid var(--c-accent); outline-offset: 4px; }
/* Product pages — cream bg, needs dark link colors */
.nav--product .nav__links a { color: var(--c-secondary); }
.nav--product .nav__links a:hover,
.nav--product .nav__links a[aria-current="page"] { color: var(--c-text); }

/* ── WhatsApp CTA (product nav only) ── */
.nav__cta {
  border: 1px solid var(--c-text);
  padding: 0 1.1rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--c-text);
  transition: background 0.3s, color 0.3s;
}
.nav__cta:hover { background: var(--c-text); color: var(--c-bg); }

/* ── Mobile toggle button ── */
.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
  margin: -8px;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--c-text);
}
.nav__toggle span {
  display: block;
  width: 22px;
  height: 1px;
  background-color: var(--c-dark-text);
  transition:
    background-color 0.5s var(--ease-quart),
    transform 0.35s var(--ease-expo),
    opacity 0.25s;
  transform-origin: center;
}
.nav--product .nav__toggle span { background-color: var(--c-text); }
.nav.scrolled .nav__toggle span { background-color: var(--c-text); }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav__toggle:focus-visible { outline: 1px solid var(--cx); outline-offset: 4px; }

/* ── Crystal bar (product pages only — uses per-page --cx) ── */
/* Rendered as ::after on the nav so it always tracks the nav's bottom edge,
   even when the nav shrinks on scroll. The .cbar div in the HTML is kept for
   backwards compatibility but hidden — the bar lives here instead. */
.cbar { display: none; }
.nav--product::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--cx);
  opacity: 0.75;
}

/* ── Product-page drawer (System A: id="drw", class="drawer") ── */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--c-bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0s 0.35s;
}
.drawer.open {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
  transition: opacity 0.35s var(--ease), visibility 0s;
}
.drawer .nav__link { font-size: 0.9rem; }

/* ── Editorial drawer (System B/C: id="navDrawer", class="nav__drawer") ── */
.nav__drawer {
  position: fixed;
  inset: 0;
  background-color: var(--c-dark-bg);
  z-index: 190;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--gap-container);
  padding-bottom: clamp(48px, 8vw, 72px);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s var(--ease-quart), visibility 0s 0.4s;
}
.nav__drawer.open {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.4s var(--ease-quart), visibility 0s;
}
.nav__drawer nav { display: flex; flex-direction: column; gap: 4px; }
.nav__drawer a {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(36px, 9vw, 56px);
  letter-spacing: 0.02em;
  color: var(--c-dark-text);
  line-height: 1.25;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.nav__drawer a:hover { opacity: 1; }
.nav__drawer a:focus-visible { outline: 1px solid var(--c-accent); outline-offset: 6px; }
.nav__drawer-foot {
  margin-top: auto;
  padding-top: 40px;
  border-top: 1px solid var(--c-rule-dark);
  width: 100%;
}
.nav__drawer-foot p {
  font-family: var(--ff-body);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 251, 244, 0.3);
}

/* ── Responsive: mobile breakpoint ── */
@media (max-width: 768px) {
  .nav__links { display: none; }
  .nav__toggle { display: flex; }
  .nav--product .nav__toggle { display: flex; font-size: 1.3rem; }
}