/*
 * Cabecera, menú de navegación principal y botón CTA compartidos por TODAS las
 * páginas del sitio LEPAS (home, modelos, legales y blog).
 *
 * El contenido del <nav data-site-nav> se genera dinámicamente por includes/site-nav.js;
 * este archivo es la ÚNICA fuente de verdad para su apariencia (antes existían copias
 * duplicadas e inconsistentes de estas reglas dentro de cada HTML).
 *
 * Depende de las variables definidas en el :root de cada página:
 * --text, --muted, --brand, --brand-strong, --maxw, --line
 */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
  background: rgba(15, 17, 19, 0.75);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 74px;
  gap: 24px;
}

.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--text); }
.brand img { width: 108px; height: auto; }

.nav { display: flex; align-items: center; gap: 26px; }
.nav a {
  display: inline-flex;
  align-items: center;
  height: 18px;
  text-decoration: none;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color .2s ease;
}

.nav a:hover,
.nav summary:hover { color: var(--brand); }

/* Marca visualmente el elemento del menú que corresponde a la página en la
   que está el usuario (enlace de nivel superior, "MODELOS" en el
   desplegable, o el modelo concreto dentro de él).
   Nota: se marca SOLO con color, deliberadamente sin font-weight, sin
   position:relative y sin pseudo-elementos: cualquiera de esos, aunque en
   teoría no debería afectar al layout, es una vía posible de que el
   elemento activo (p. ej. "Inicio" en la home) se desplace verticalmente
   respecto al resto del menú. Con solo un cambio de color no hay forma de
   que la caja del elemento cambie de tamaño o posición. */
.nav a[aria-current="page"],
.nav summary.is-active {
  color: var(--brand-strong);
}

.nav-dropdown__menu a[aria-current="page"] {
  color: var(--brand-strong);
  background: rgba(255, 255, 255, 0.05);
}

.nav summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  height: 18px;
  gap: 8px;
  text-decoration: none;
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color .2s ease;
}

.nav summary::-webkit-details-marker { display: none; }

.nav-dropdown {
  /* El <details> en sí (no solo el <summary> de dentro) es el elemento
     flex real dentro de .nav, así que necesita la misma caja exacta
     (mismo display/altura) que sus hermanos <a> para quedar a la misma
     altura. Sin esto, el navegador le da a <details> su tamaño de bloque
     por defecto, que no siempre coincide con el de un <a> de una línea. */
  display: inline-flex;
  align-items: center;
  height: 18px;
  position: relative;
}

.nav-dropdown__menu {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 220px;
  padding: 10px;
  background: rgba(15, 17, 19, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  z-index: 20;
}

.nav-dropdown[open] .nav-dropdown__menu { display: grid; gap: 6px; }
.nav-dropdown__menu a {
  padding: 10px 12px;
  border-radius: 12px;
  text-transform: none;
  letter-spacing: 0.03em;
}
.nav-dropdown__menu a:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--brand-strong);
}

.nav-phone {
  display: inline-flex;
  align-items: center;
  height: 18px;
  gap: 6px;
  color: var(--text);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: none;
  white-space: nowrap;
}

.nav-phone__icon {
  flex-shrink: 0;
  color: var(--brand);
  transition: color .2s ease;
}

.nav-phone:hover { color: var(--brand); }
.nav-phone:hover .nav-phone__icon { color: var(--brand); }

.cta-link {
  text-decoration: none;
  border: 0;
  border-radius: 999px;
  background: var(--brand);
  color: #000000;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 16px;
  transition: background .2s ease, box-shadow .25s ease, transform .25s ease;
  animation: navCtaPulse 1.6s ease-out infinite;
}

.cta-link:hover {
  background: var(--brand-strong);
}

.nav .cta-link,
.nav .cta-link:visited,
.nav .cta-link:hover {
  color: #000000;
}

.nav .cta-link:hover {
  animation-play-state: paused;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 30px rgba(201, 138, 46, 0.55);
}

@keyframes navCtaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 138, 46, 0.00); }
  35% { box-shadow: 0 0 0 10px rgba(201, 138, 46, 0.18); }
  65% { box-shadow: 0 0 0 20px rgba(201, 138, 46, 0.00); }
}

/* Botón hamburguesa: lo inserta includes/site-nav.js justo antes de .nav.
   En escritorio permanece oculto (display:none) y no afecta nada; en móvil
   controla la clase .is-open de .nav (ver media query más abajo). */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  flex-shrink: 0;
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform .2s ease, opacity .2s ease;
}

.nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 760px) {
  .site-header__inner { flex-wrap: wrap; padding: 10px 0; min-height: auto; }

  .nav-toggle { display: inline-flex; }

  /* Oculto por defecto: solo se muestra como panel a pantalla completa con
     .is-open, que alterna el botón .nav-toggle. Así el menú deja de
     desbordar/apelotonarse en móvil, que era el problema original. */
  .nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 14px 0 10px;
  }

  .nav.is-open { display: flex; }

  .nav a,
  .nav summary,
  .nav-phone {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 6px;
    font-size: 13px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
  }

  .nav-dropdown {
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: stretch;
  }
  .nav-dropdown__menu {
    position: static;
    display: none;
    min-width: 0;
    margin-top: 0;
    padding: 0 0 0 14px;
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
  }
  .nav-dropdown[open] .nav-dropdown__menu { display: grid; }
  .nav-dropdown__menu a { border-top: 1px solid rgba(255, 255, 255, 0.05); border-radius: 0; }

  .cta-link { width: 100%; text-align: center; margin-top: 8px; }
}

/*
 * Pie de página compartido por TODAS las páginas del sitio.
 * El contenido de <footer data-site-footer> se genera dinámicamente por
 * includes/site-nav.js, tomando como única fuente de verdad el footer de index.html.
 */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 30px 0;
  color: #8d98a3;
  font-size: 13px;
  text-align: center;
}

.site-footer .container {
  line-height: 1.7;
}

.site-footer a {
  color: inherit;
  text-decoration: none;
}

.site-footer__note {
  font-size: 8px;
}