/* ============================================
   NAV — Floating glass pill · Premium 2025
   Desktop: pill flotante (dark sobre hero · cream scrolled)
   Mobile: drawer derecho con backdrop blur · estándares Apple HIG/Material
   ============================================ */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  padding: 0.85rem var(--space-gutter);
  /* Safe area para iPhone notch/dynamic island */
  padding-top: max(0.85rem, env(safe-area-inset-top));
  padding-left: max(var(--space-gutter), env(safe-area-inset-left));
  padding-right: max(var(--space-gutter), env(safe-area-inset-right));
  pointer-events: none;
  transition: padding var(--dur-mid) var(--ease-out);
}

.site-header[data-nav-state="scrolled"] {
  padding-top: max(0.6rem, env(safe-area-inset-top));
  padding-bottom: 0.6rem;
}

.nav { width: 100%; }

/* ────────── PILL FLOTANTE ────────── */
/* Rejilla de tres zonas en vez de flex + space-between.
   Con flex, `.nav__menu { margin: 0 auto }` centraba el menú dentro del
   espacio SOBRANTE, no de la píldora: como el logo (84px) y el CTA (215px)
   tenían anchos muy distintos, el menú quedaba 62px descentrado. Con
   `minmax(0,1fr) auto minmax(0,1fr)` las bandas laterales son simétricas y
   el menú cae en el eje real de la píldora, sea cual sea el ancho de los
   botones. */
.nav__inner {
  pointer-events: all;
  max-width: var(--container-max);
  margin-inline: auto;
  /* Padding simétrico para que el grid centre la columna del medio
     respecto al eje real de la píldora. El aire extra que pide el logo por
     la izquierda se da en el propio logo, no aquí: si se metiera como
     padding del contenedor, descentraría el menú. */
  padding-block: 0.5rem;
  padding-inline: 0.55rem;
  min-height: 70px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-l);

  background: rgba(10, 16, 26, 0.55);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 9999px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.30),
    0 1px 0 rgba(255, 255, 255, 0.05) inset;

  transition:
    background var(--dur-mid) var(--ease-out),
    backdrop-filter var(--dur-mid) var(--ease-out),
    border-color var(--dur-mid) var(--ease-out),
    min-height var(--dur-mid) var(--ease-out),
    box-shadow var(--dur-mid) var(--ease-out);
}

/* Scrolled → pill crema y más compacta */
.site-header[data-nav-state="scrolled"] .nav__inner {
  min-height: 62px;
  background: rgba(245, 239, 229, 0.90);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-color: rgba(13, 36, 56, 0.08);
  box-shadow:
    0 4px 24px rgba(13, 36, 56, 0.10),
    0 1px 0 rgba(255, 255, 255, 0.70) inset;
}

/* ────────── LOGO ────────── */
.nav__logo {
  display: flex;
  align-items: center;
  justify-self: start;
  /* Aire del logo: el botón de la derecha ya trae relleno propio y forma
     de píldora, así que ópticamente pide menos margen que la marca. */
  padding-left: 0.95rem;
  color: var(--color-cream-off);
  flex-shrink: 0;
  transition:
    color var(--dur-mid) var(--ease-out),
    padding var(--dur-mid) var(--ease-out);
}
.site-header[data-nav-state="scrolled"] .nav__logo {
  color: var(--color-primary);
}

/* Logo de marca · CSS mask sobre logo.svg real.
   El color sigue a `currentColor` del padre (.nav__logo) → cream sobre hero
   transparente y primary sobre nav scrolled. URL relativa al CSS = portable
   entre staging (/Cobs/...) y producción sin necesidad de inyectar BASE_URL. */
.logo {
  display: inline-block;
  /* 84px hinchaban la píldora a 107px de alto. A 48px la barra queda en
     70px, dentro del rango de un nav flotante profesional (64–76px). */
  width: clamp(42px, 3.4vw, 48px);
  aspect-ratio: 1;
  background-color: currentColor;
  -webkit-mask: url('../logos/logo.svg') center / contain no-repeat;
          mask: url('../logos/logo.svg') center / contain no-repeat;
  transition: transform var(--dur-mid) var(--ease-out),
              width var(--dur-mid) var(--ease-out),
              background-color var(--dur-mid) var(--ease-out);
  opacity: 0;
  animation: logo-fade-in 700ms var(--ease-out) 100ms forwards;
}
.nav__logo:hover .logo { transform: rotate(-4deg); }

@keyframes logo-fade-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .logo { animation: none; opacity: 1; }
  .nav__logo:hover .logo { transform: none; }
}

/* Al compactarse la píldora, la marca acompaña */
.site-header[data-nav-state="scrolled"] .logo { width: clamp(38px, 3vw, 42px); }

/* ────────── MENÚ DESKTOP ────────── */
.nav__menu {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: clamp(var(--space-l), 2.2vw, var(--space-xl));
  margin: 0;
}

.nav__link {
  position: relative;
  font-family: var(--font-body);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
  color: rgba(250, 246, 238, 0.80);
  padding-block: var(--space-xs);
  transition: color var(--dur-fast) var(--ease-out);
}

.site-header[data-nav-state="scrolled"] .nav__link {
  color: var(--color-primary);
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background-color: var(--color-coffee-light);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur-mid) var(--ease-out);
}
.site-header[data-nav-state="scrolled"] .nav__link::after {
  background-color: var(--color-coffee);
}

.nav__link:hover { color: var(--color-cream-off); }
.site-header[data-nav-state="scrolled"] .nav__link:hover { color: var(--color-coffee-dark); }
.nav__link:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* Estado activo: scroll-spy en la landing (aria-current="true") y
   página actual en las internas (aria-current="page") */
.nav__link[aria-current] { color: var(--color-cream-off); }
.site-header[data-nav-state="scrolled"] .nav__link[aria-current] {
  color: var(--color-coffee-dark);
}
.nav__link[aria-current]::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* ────────── DROPDOWN DESKTOP (Sedes → Usaquén / Chía) ────────── */
.nav__has-dropdown { position: relative; display: flex; align-items: center; }

.nav__dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.32em;
  background: none;
  border: none;
  cursor: pointer;
}
.nav__dropdown-chevron {
  width: 0.72em;
  height: 0.72em;
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav__has-dropdown:hover .nav__dropdown-chevron,
.nav__has-dropdown:focus-within .nav__dropdown-chevron,
.nav__has-dropdown[data-open="true"] .nav__dropdown-chevron { transform: rotate(180deg); }

.nav__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 184px;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(10, 16, 26, 0.85);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 10;
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    visibility 0s linear var(--dur-fast);
}
/* Puente invisible para que el hover no se pierda en el gap trigger→menú */
.nav__dropdown::before {
  content: '';
  position: absolute;
  top: -0.85rem; left: 0; right: 0;
  height: 0.85rem;
}
.nav__has-dropdown:hover .nav__dropdown,
.nav__has-dropdown:focus-within .nav__dropdown,
.nav__has-dropdown[data-open="true"] .nav__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
.site-header[data-nav-state="scrolled"] .nav__dropdown {
  background: rgba(245, 239, 229, 0.96);
  border-color: rgba(13, 36, 56, 0.08);
  box-shadow: 0 12px 32px rgba(13, 36, 56, 0.14);
}

/* Anclado al borde derecho: el dropdown cuelga del último botón de la
   píldora, así que centrarlo lo sacaría fuera del contenedor. */
.nav__dropdown--end {
  left: auto;
  right: 0;
  transform: translateX(0) translateY(-6px);
  min-width: 232px;
}
.nav__has-dropdown:hover .nav__dropdown--end,
.nav__has-dropdown:focus-within .nav__dropdown--end,
.nav__has-dropdown[data-open="true"] .nav__dropdown--end {
  transform: translateX(0) translateY(0);
}

.nav__dropdown-link {
  display: block;
  padding: 0.58rem 0.9rem;
  border-radius: 9px;
  font-family: var(--font-body);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-medium);
  color: rgba(250, 246, 238, 0.85);
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
/* Dos líneas: la dirección corta permite elegir sede sin entrar a la página */
.nav__dropdown-link strong {
  display: block;
  font-weight: var(--fw-semibold);
  line-height: 1.3;
}
.nav__dropdown-link small {
  display: block;
  margin-top: 1px;
  font-size: 0.78em;
  font-weight: var(--fw-regular);
  color: rgba(250, 246, 238, 0.55);
}
.site-header[data-nav-state="scrolled"] .nav__dropdown-link small {
  color: rgba(13, 36, 56, 0.55);
}
.nav__dropdown-link:hover { background: rgba(184, 132, 47, 0.20); color: var(--color-cream-off); }
.site-header[data-nav-state="scrolled"] .nav__dropdown-link { color: var(--color-primary); }
.site-header[data-nav-state="scrolled"] .nav__dropdown-link:hover {
  background: rgba(184, 132, 47, 0.14);
  color: var(--color-coffee-dark);
}

/* ────────── ZONA DE ACCIONES ──────────
   Las dos intenciones principales del visitante de un restaurante: qué
   comen y dónde están. Jerarquía deliberada — "Ver menú" sólido, "Ver
   sedes" fantasma: dos botones sólidos competirían por la misma mirada. */
.nav__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-self: end;
}

.nav__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  /* 40px de alto: mismo módulo que el resto de controles del sistema */
  min-height: 40px;
  padding: 0 1.15rem;
  font-family: var(--font-body);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.005em;
  border-radius: 9999px;
  border: 1px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition:
    background-color var(--dur-mid) var(--ease-out),
    border-color var(--dur-mid) var(--ease-out),
    color var(--dur-mid) var(--ease-out),
    box-shadow var(--dur-mid) var(--ease-out),
    transform var(--dur-mid) var(--ease-out);
}

/* Primario — sobre el hero oscuro */
.nav__cta--primary {
  color: #0D1A22;
  background-color: var(--color-coffee);
  box-shadow: 0 2px 12px rgba(184, 132, 47, 0.25);
}
.nav__cta--primary:hover {
  background-color: var(--color-coffee-light);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(184, 132, 47, 0.38);
}

/* Secundario — contorno translúcido */
.nav__cta--ghost {
  color: rgba(250, 246, 238, 0.92);
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
}
.nav__cta--ghost:hover {
  color: var(--color-cream-off);
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(229, 183, 104, 0.55);
  transform: translateY(-1px);
}

/* Scrolled → la píldora es crema: se invierten ambos botones */
.site-header[data-nav-state="scrolled"] .nav__cta--primary {
  background-color: var(--color-primary);
  color: var(--color-cream-off);
  box-shadow: none;
}
.site-header[data-nav-state="scrolled"] .nav__cta--primary:hover {
  background-color: var(--color-primary-700);
  box-shadow: var(--shadow-m);
}
.site-header[data-nav-state="scrolled"] .nav__cta--ghost {
  color: var(--color-primary);
  background-color: transparent;
  border-color: rgba(13, 36, 56, 0.20);
}
.site-header[data-nav-state="scrolled"] .nav__cta--ghost:hover {
  color: var(--color-coffee-dark);
  background-color: rgba(184, 132, 47, 0.08);
  border-color: var(--color-coffee);
}

/* Ya estás aquí: el botón deja de invitar al clic sin desaparecer.
   No se deshabilita (seguiría siendo un destino legítimo y romper un enlace
   confunde más de lo que ayuda), solo se atenúa y se marca. */
.nav__cta--primary[aria-current="page"] {
  background-color: transparent;
  color: rgba(250, 246, 238, 0.55);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}
.nav__cta--primary[aria-current="page"]:hover {
  color: var(--color-cream-off);
  background-color: rgba(255, 255, 255, 0.08);
  transform: none;
}
.site-header[data-nav-state="scrolled"] .nav__cta--primary[aria-current="page"] {
  background-color: transparent;
  color: rgba(13, 36, 56, 0.45);
  border-color: rgba(13, 36, 56, 0.14);
}
.site-header[data-nav-state="scrolled"] .nav__cta--primary[aria-current="page"]:hover {
  color: var(--color-primary);
  background-color: rgba(13, 36, 56, 0.05);
}

/* Sede actual dentro del desplegable */
.nav__dropdown-link[aria-current="page"] {
  background: rgba(184, 132, 47, 0.18);
  color: var(--color-coffee-light);
}
.site-header[data-nav-state="scrolled"] .nav__dropdown-link[aria-current="page"] {
  background: rgba(184, 132, 47, 0.14);
  color: var(--color-coffee-dark);
}

/* El disparador del dropdown ya trae estilo de botón por .nav__cta:
   se neutraliza el reset heredado de .nav__dropdown-trigger. */
.nav__has-dropdown--action { display: flex; }
.nav__has-dropdown--action .nav__dropdown-trigger {
  background-color: rgba(255, 255, 255, 0.06);
}
.site-header[data-nav-state="scrolled"] .nav__has-dropdown--action .nav__dropdown-trigger {
  background-color: transparent;
}

/* ────────── HAMBURGUESA MOBILE · 48×48 hit area ────────── */
.nav__toggle {
  display: none;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: transparent;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast) var(--ease-out);
  flex-shrink: 0;
}
.nav__toggle:active { background-color: rgba(255, 255, 255, 0.08); }
.site-header[data-nav-state="scrolled"] .nav__toggle:active {
  background-color: rgba(13, 36, 56, 0.06);
}

.nav__toggle-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 22px;
  height: 22px;
}

.nav__toggle-line {
  display: block;
  width: 22px;
  height: 2px;
  background-color: rgba(250, 246, 238, 0.92);
  border-radius: 2px;
  transition:
    transform var(--dur-mid) var(--ease-spring),
    opacity var(--dur-fast) var(--ease-out),
    background-color var(--dur-mid) var(--ease-out);
}
.site-header[data-nav-state="scrolled"] .nav__toggle-line {
  background-color: var(--color-primary);
}

/* Estado abierto → X morph */
.nav__toggle[aria-expanded="true"] .nav__toggle-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
  background-color: var(--color-primary);
}
.nav__toggle[aria-expanded="true"] .nav__toggle-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav__toggle[aria-expanded="true"] .nav__toggle-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
  background-color: var(--color-primary);
}

/* ────────── BACKDROP (tappable) ────────── */
.nav__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(13, 36, 56, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  z-index: calc(var(--z-nav) - 1);
  pointer-events: none;
  transition:
    opacity var(--dur-mid) var(--ease-out),
    visibility 0s linear var(--dur-mid);
}
.nav__backdrop[data-open="true"] {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transition-delay: 0s;
}

/* ────────── DRAWER MOBILE · slide-in derecha ────────── */
.nav__drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(88vw, 420px);
  background: var(--color-cream-off);
  z-index: var(--z-nav);
  display: flex;
  flex-direction: column;
  transform: translate3d(100%, 0, 0);
  transition: transform var(--dur-mid) var(--ease-out);
  box-shadow: -24px 0 64px rgba(13, 36, 56, 0);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* Safe area iOS */
  padding-top: env(safe-area-inset-top);
  padding-bottom: max(var(--space-l), env(safe-area-inset-bottom));
}

.nav__drawer[data-open="true"] {
  transform: translate3d(0, 0, 0);
  box-shadow: -24px 0 64px rgba(13, 36, 56, 0.22);
}

/* ────────── DRAWER HEAD ────────── */
.nav__drawer-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding: 1.1rem 1.25rem;
  background: var(--color-cream-off);
  border-bottom: 1px solid rgba(13, 36, 56, 0.06);
}

.nav__drawer-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--fs-body-xs);
  color: var(--color-text-soft);
  letter-spacing: 0.02em;
}
.nav__drawer-status strong {
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
}
.nav__drawer-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 0 0 rgba(90, 138, 59, 0.5);
  animation: drawer-pulse 2.2s var(--ease-in-out) infinite;
}
@keyframes drawer-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(90, 138, 59, 0.50); }
  70%  { box-shadow: 0 0 0 8px rgba(90, 138, 59, 0); }
  100% { box-shadow: 0 0 0 0   rgba(90, 138, 59, 0); }
}

.nav__drawer-close {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid rgba(13, 36, 56, 0.10);
  background: transparent;
  color: var(--color-primary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast), transform var(--dur-fast);
}
.nav__drawer-close:active {
  background: rgba(13, 36, 56, 0.06);
  transform: scale(0.94);
}

/* ────────── DRAWER MENU ────────── */
.nav__drawer-menu {
  list-style: none;
  padding: var(--space-s) var(--space-s);
  margin: 0;
  display: flex;
  flex-direction: column;
}

.nav__drawer-menu > li {
  opacity: 0;
  transform: translateX(20px);
  transition:
    opacity var(--dur-mid) var(--ease-out),
    transform var(--dur-mid) var(--ease-out);
}
.nav__drawer[data-open="true"] .nav__drawer-menu > li { opacity: 1; transform: translateX(0); }
.nav__drawer[data-open="true"] .nav__drawer-menu > li:nth-child(1) { transition-delay:  80ms; }
.nav__drawer[data-open="true"] .nav__drawer-menu > li:nth-child(2) { transition-delay: 140ms; }
.nav__drawer[data-open="true"] .nav__drawer-menu > li:nth-child(3) { transition-delay: 200ms; }
.nav__drawer[data-open="true"] .nav__drawer-menu > li:nth-child(4) { transition-delay: 260ms; }
.nav__drawer[data-open="true"] .nav__drawer-menu > li:nth-child(5) { transition-delay: 320ms; }
.nav__drawer[data-open="true"] .nav__drawer-menu > li:nth-child(6) { transition-delay: 380ms; }

.nav__drawer-menu a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-m);
  min-height: 56px;             /* 48px+ hit target garantizado */
  padding: 0.85rem 1rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--fw-regular);
  line-height: 1.1;
  color: var(--color-primary);
  border-radius: 14px;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.nav__drawer-menu a:active {
  background-color: rgba(184, 132, 47, 0.10);
  transform: scale(0.985);
}
.nav__drawer-menu a:hover {
  background-color: rgba(184, 132, 47, 0.06);
  color: var(--color-coffee-dark);
}

.nav__drawer-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  color: var(--color-coffee);
  align-self: center;
  min-width: 24px;
}

.nav__drawer-label { font-weight: var(--fw-medium); }

.nav__drawer-arrow {
  font-size: 1.2rem;
  color: var(--color-text-muted);
  opacity: 0.5;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast);
}
.nav__drawer-menu a:hover .nav__drawer-arrow,
.nav__drawer-menu a:focus-visible .nav__drawer-arrow {
  transform: translateX(3px);
  opacity: 1;
  color: var(--color-coffee-dark);
}

/* Active section (scroll-spy) */
.nav__drawer-menu a[aria-current="true"] {
  background-color: rgba(184, 132, 47, 0.10);
  color: var(--color-coffee-dark);
}
.nav__drawer-menu a[aria-current="true"] .nav__drawer-num {
  color: var(--color-coffee-dark);
  font-weight: var(--fw-bold);
}
.nav__drawer-menu a[aria-current="true"] .nav__drawer-arrow {
  opacity: 1;
  color: var(--color-coffee-dark);
}

/* ────────── DRAWER ACORDEÓN (Sedes → Usaquén / Chía) ────────── */
.nav__drawer-acc-trigger {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-m);
  min-height: 56px;
  padding: 0.85rem 1rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--fw-regular);
  line-height: 1.1;
  color: var(--color-primary);
  text-align: left;
  background: none;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav__drawer-acc-trigger:hover { background-color: rgba(184, 132, 47, 0.06); color: var(--color-coffee-dark); }
.nav__drawer-acc-trigger:active { background-color: rgba(184, 132, 47, 0.10); transform: scale(0.985); }

.nav__drawer-acc-chevron {
  opacity: 0.55;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.nav__drawer-acc-trigger[aria-expanded="true"] .nav__drawer-acc-chevron { transform: rotate(180deg); opacity: 1; color: var(--color-coffee-dark); }

.nav__drawer-sub { list-style: none; margin: 0; padding: 2px 0 var(--space-xs); }
.nav__drawer-sub[hidden] { display: none; }
.nav__drawer-sub a {
  grid-template-columns: 1fr auto;
  min-height: 48px;
  padding-left: 2.7rem;
  font-size: 1.18rem;
  color: var(--color-text-soft);
}
.nav__drawer-sub a:hover { color: var(--color-coffee-dark); }
.nav__drawer-sublabel { font-weight: var(--fw-regular); }

/* ────────── DRAWER CTAS ────────── */
.nav__drawer-ctas {
  padding: var(--space-l) 1rem var(--space-s);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  border-top: 1px solid rgba(13, 36, 56, 0.06);
  margin-top: var(--space-s);
}

.nav__drawer-ctas-label {
  font-family: var(--font-body);
  font-size: var(--fs-body-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-xs) 0;
  padding-left: 0.25rem;
}

.nav__drawer-cta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-s);
  min-height: 64px;
  padding: 0.85rem 1rem;
  background: var(--color-cream);
  border: 1px solid rgba(13, 36, 56, 0.06);
  border-radius: 16px;
  color: var(--color-primary);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}
.nav__drawer-cta:active {
  transform: scale(0.98);
  background: var(--color-cream-light);
}
.nav__drawer-cta:hover {
  background: var(--color-cream-light);
  box-shadow: var(--shadow-s);
}

.nav__drawer-cta-icon {
  color: var(--color-coffee-dark);
  flex-shrink: 0;
}

.nav__drawer-cta-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.25;
  min-width: 0;
}
.nav__drawer-cta-text strong {
  font-family: var(--font-body);
  font-size: var(--fs-body-m);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
}
.nav__drawer-cta-text small {
  font-family: var(--font-body);
  font-size: var(--fs-body-xs);
  color: var(--color-text-muted);
  font-weight: var(--fw-regular);
}

.nav__drawer-cta-whats {
  color: var(--color-whatsapp);
  flex-shrink: 0;
}

/* ────────── DRAWER FOOT ────────── */
.nav__drawer-foot {
  margin-top: auto;
  padding: var(--space-l) 1.25rem var(--space-s);
  border-top: 1px solid rgba(13, 36, 56, 0.06);
}
.nav__drawer-foot p {
  font-family: var(--font-body);
  font-size: var(--fs-body-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}
.nav__drawer-foot p:first-child {
  color: var(--color-text-soft);
  font-weight: var(--fw-medium);
  margin-bottom: 2px;
}

/* ────────── RESPONSIVE ────────── */
@media (max-width: 1023px) {
  .nav__menu,
  .nav__actions { display: none; }

  .nav__toggle { display: inline-flex; }

  /* Móvil: dos zonas (logo + hamburguesa), no tres.
     Las medidas replican exactamente el nav móvil previo — el rediseño de
     esta tanda es solo de escritorio. */
  .nav__inner {
    grid-template-columns: 1fr auto;
    padding-block: 0.55rem;
    padding-inline: 0.4rem;
    min-height: 0;
    gap: var(--space-m);
  }
  .nav__logo { padding-left: 0.6rem; }
  .site-header[data-nav-state="scrolled"] .nav__inner { min-height: 0; }

  /* El logo de escritorio bajó a 48px para desinflar la píldora; en móvil
     la marca conserva su tamaño original, que es parte de lo que hace que
     ese nav funcione. */
  .logo,
  .site-header[data-nav-state="scrolled"] .logo {
    width: clamp(60px, 6.75vw, 84px);
  }
  .nav__toggle { justify-self: end; }
}

/* Entre 1024 y 1180px el contenido va justo: se aprieta el ritmo lateral
   antes que dejar que la píldora empuje los botones contra el borde. */
@media (min-width: 1024px) and (max-width: 1180px) {
  .nav__inner { gap: var(--space-m); }
  /* Se recorta el aire del logo, no el padding del contenedor: ese debe
     seguir siendo simétrico o el menú se descentra. */
  .nav__logo { padding-left: 0.5rem; }
  .nav__menu { gap: var(--space-m); }
  .nav__cta { padding-inline: 0.9rem; }
}

@media (min-width: 1024px) {
  .nav__drawer,
  .nav__backdrop { display: none !important; }
}

/* ────────── BODY SCROLL LOCK (iOS-safe) ────────── */
body[data-nav-locked="true"] {
  position: fixed;
  left: 0;
  right: 0;
  overflow: hidden;
  width: 100%;
}

/* Motion reduction */
@media (prefers-reduced-motion: reduce) {
  .nav__inner,
  .nav__logo,
  .nav__link,
  .nav__cta,
  .nav__drawer,
  .nav__backdrop,
  .nav__drawer-menu li,
  .nav__toggle-line {
    transition-duration: 1ms !important;
    animation: none !important;
  }
}

/* ────────── FOCUS VISIBLE (keyboard a11y) ────────── */
.nav__link:focus-visible,
.nav__cta:focus-visible,
.nav__toggle:focus-visible,
.nav__drawer-close:focus-visible,
.nav__drawer-menu a:focus-visible,
.nav__dropdown-link:focus-visible,
.nav__drawer-acc-trigger:focus-visible,
.nav__drawer-cta:focus-visible {
  outline: 2px solid var(--color-coffee-light);
  outline-offset: 3px;
  border-radius: 9999px;
}
.nav__dropdown-link:focus-visible,
.nav__drawer-acc-trigger:focus-visible { border-radius: 10px; }
.nav__drawer-menu a:focus-visible,
.nav__drawer-cta:focus-visible {
  border-radius: 14px;
}