/* ============================================================
   Navbar de Patio (2026-10-08) — compartida por todas las páginas.

   Dimensiones = las de Web JF (medidas renderizadas a 1440 de ancho):
   alto 64, logo de 34 de alto, 32px entre logo y botón, secciones a
   16px 500 separadas 32px, lupa de 20px. Márgenes laterales más
   anchos que en Web JF (2026-10-08): 96px del borde al logo y de la
   lupa al borde. El botón no copia el de Web JF (ver abajo).

   Estética de Patio:
   - Logo bicolor (el del hero, montado por js/navbar.js con
     montarLogoPatio, estático). Sin "Home": se llega con el logo.
   - Suscribirme (2026-10-08): sin ícono, 30 de alto, padding 0/13,
     radio 8; rojo de interacción con contenido blanco; hover =
     se vacía y queda contorno + texto rojo (mismo patrón que el CTA).
   - Secciones: hover = subrayado rojo de 1.5px que crece de izquierda a
     derecha y mide lo que mide la palabra (regla sitewide); la sección
     en la que se está queda en rojo.
   ============================================================ */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 14px 96px;
  background: var(--bg-base);
  border-bottom: 1px solid var(--border);
}
.nav-left {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-logo { display: block; height: 34px; }
.nav-logo svg { display: block; height: 34px; width: auto; }

.nav-subscribe {
  display: inline-flex;
  align-items: center;
  /* 34px (14/10; antes 30). */
  height: 34px;
  padding: 0 13px;
  border: 1.5px solid transparent;
  border-radius: 8px;
  /* Fondo rojo del logo (12/10, de js/logo-patio.js); letra blanca otra
     vez (14/10; la verde no convenció). */
  background: #C82E26;
  color: #FFFFFF;
  font: 700 12px 'Inter', sans-serif;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
/* Tipografía: Inter, la del cuerpo (opción A, elegida el 15/10). */
.nav-subscribe:hover {
  background: transparent;
  color: #C82E26;
  border-color: #C82E26;
}

.nav-right { display: flex; align-items: center; gap: 32px; }
.nav-item {
  font: 500 16px var(--font-body);
  color: var(--text-primary);
  transition: color 0.25s;
}
.nav-item span {
  padding-bottom: 4px;
  background: linear-gradient(var(--accent-interaction, #C7302A), var(--accent-interaction, #C7302A)) 0 100% / 0 1.5px no-repeat;
  transition: background-size 0.35s cubic-bezier(.22,1,.36,1);
}
.nav-item:hover span { background-size: 100% 1.5px; }
.nav-item.is-current { color: var(--accent-interaction, #C7302A); }

/* La lupa: js/search.js la envuelve en un botón. */
.nav-search { width: 20px; height: 20px; }
.nav-search-btn svg { width: 20px; height: 20px; }

/* Lupa + hamburguesa de celular: las arma js/navbar.js. Fuera del
   breakpoint no se ven. */
.nav-mobile-controls,
.nav-veil { display: none; }

/* Solo con mouse (16/10): en pantallas táctiles el hover queda "pegado"
   después de tocar (el botón vacío, la sección subrayada). */
@media (hover: none) {
  .nav-subscribe:hover { background: #C82E26; color: #FFFFFF; border-color: transparent; }
  .nav-item:hover span { background-size: 0 1.5px; }
}

/* ---------- Tablet (16/10) ----------
   Los 96px de margen de escritorio se comen el ancho. */
@media (max-width: 1100px) {
  .nav { padding: 14px 40px; }
}

/* ---------- Celular (16/10) ----------
   Misma estructura que Web JF (web-jf-site, sexta pasada mobile): logo y
   Suscribirme a la izquierda; lupa y hamburguesa a la derecha, siempre
   visibles. Las secciones son el mismo .nav-right de escritorio (estado
   is-current incluido) convertido en un panel que entra desde la derecha;
   no se duplica ningún link.

   Estética de Patio: panel en el fondo del sitio con la línea fina de la
   navbar; secciones a la derecha, más grandes, separadas por esa misma
   línea; la sección actual en rojo con su subrayado ya dibujado;
   hamburguesa de 3 barras que se cruzan en X. */
@media (max-width: 767px) {
  .nav { padding: 12px 16px; gap: 12px; }
  .nav-left { gap: 14px; min-width: 0; }
  .nav-logo, .nav-logo svg { height: 30px; }
  .nav-subscribe { height: 32px; padding: 0 11px; }

  .nav-mobile-controls {
    display: flex;
    align-items: center;
    /* Áreas táctiles de 44px; el margen negativo deja el dibujo
       alineado con el borde de 16px. */
    margin-right: -11px;
  }
  .nav-mobile-controls .nav-search-btn,
  .nav-burger {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: none;
    background: none;
    color: var(--text-primary);
    cursor: pointer;
  }
  .nav-mobile-controls .nav-search-btn svg { width: 22px; height: 22px; }

  .nav-burger-lines { position: relative; width: 22px; height: 16px; }
  .nav-burger-lines span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.3s cubic-bezier(.22,1,.36,1), opacity 0.2s ease, top 0.3s cubic-bezier(.22,1,.36,1);
  }
  .nav-burger-lines span:nth-child(1) { top: 0; }
  .nav-burger-lines span:nth-child(2) { top: 7px; }
  .nav-burger-lines span:nth-child(3) { top: 14px; }
  .nav-burger.is-open .nav-burger-lines span:nth-child(1) { top: 7px; transform: rotate(45deg); }
  .nav-burger.is-open .nav-burger-lines span:nth-child(2) { opacity: 0; }
  .nav-burger.is-open .nav-burger-lines span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

  /* El panel. La .nav es sticky (no fixed, sin transform): el panel se
     ancla al viewport con top = alto de la navbar. */
  .nav-right {
    position: fixed;
    top: 64px;
    right: 0;
    z-index: 9;
    width: min(70vw, 300px);
    height: calc(100dvh - 64px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 16px 16px 24px;
    background: var(--bg-base);
    border-left: 1px solid var(--border);
    box-shadow: -12px 0 30px -14px rgba(42, 22, 19, 0.3);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.4s cubic-bezier(.22,1,.36,1), visibility 0s linear 0.4s;
  }
  .nav-right.is-mobile-open {
    transform: none;
    visibility: visible;
    transition: transform 0.4s cubic-bezier(.22,1,.36,1), visibility 0s;
  }
  /* La lupa de escritorio vive en el panel: acá va la de afuera. */
  .nav-right > .nav-search-btn,
  .nav-right > .nav-search { display: none; }

  .nav-item {
    display: flex;
    justify-content: flex-end;
    padding: 16px 0;
    font-size: 20px;
    border-bottom: 1px solid var(--border);
  }
  .nav-item.is-current span { background-size: 100% 1.5px; }

  /* Velo sobre la página mientras el panel está abierto; tocarlo cierra. */
  .nav-veil {
    display: block;
    position: fixed;
    inset: 64px 0 0;
    z-index: 8;
    background: rgba(42, 22, 19, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
  }
  .nav-veil.is-open { opacity: 1; pointer-events: auto; }
  html.nav-mobile-locked { overflow: hidden; }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .nav-right, .nav-right.is-mobile-open, .nav-burger-lines span, .nav-veil { transition: none; }
}