/* =========================================================
   Header · submenús «Depilación láser» (Para mujer / Para hombre) y «Servicios» (las 5 páginas de servicio)
   Común a la home (index.html) y a las páginas internas. Se carga después de home-ui.css
   (y de depilacion-mujer.css en las internas). Comportamiento en js/nav-submenu.js.
   Escritorio (≥1101px): cajita blanca bajo el ítem (hover, foco y clic).
   Móvil (≤1100px): dentro del panel del menú, como subítems (acordeón abierto por defecto).
   ========================================================= */
.nav__sub { position: relative; display: flex; }
.nav__sub-btn { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.nav__sub-flecha { width: 15px; height: 15px; flex: none; transition: transform .25s var(--curva); }
.nav__sub.abierto .nav__sub-flecha { transform: rotate(180deg); }
.nav__sub-caja a { display: flex; align-items: center; gap: 10px; color: var(--texto); }
.nav__sub-caja .lucide { width: 17px; height: 17px; color: var(--acento-hondo); }
.nav__sub-caja a[aria-current="page"] { font-weight: 600; }
.nav__sub-caja a { white-space: nowrap; }

@media (min-width: 1101px) {
  /* El botón se ve igual que los demás enlaces de la píldora */
  .hv-c .nav__sub-btn { padding: 8px 12px 8px 16px; border-radius: var(--r-pildora); transition: background-color .2s var(--curva-hover), color .2s var(--curva-hover); }
  .hv-c .nav__sub-btn:hover, .hv-c .nav__sub.abierto .nav__sub-btn { background: var(--blanco); color: var(--texto); }
  .hv-c .nav__sub-btn.activo { background: rgba(255, 255, 255, .2); color: var(--blanco); }
  .hv-c.con-scroll .nav__sub-btn.activo, body.v5.hv-c.pg-int .nav__sub-btn.activo,
  body.v5.hv-c.pg-int .nav__sub-btn:hover, body.v5.hv-c.pg-int .nav__sub.abierto .nav__sub-btn { background: var(--blanco); color: var(--texto); }

  .nav__sub-caja { position: absolute; z-index: 5; top: calc(100% + 12px); left: 50%; min-width: 196px; padding: 6px; border-radius: 16px; background: var(--blanco); box-shadow: 0 0 0 1px rgba(31, 26, 21, .06), 0 18px 40px -12px rgba(31, 26, 21, .25); opacity: 0; visibility: hidden; transform: translate(-50%, -6px); transition: opacity .2s var(--curva), transform .2s var(--curva), visibility 0s linear .2s; }
  /* Puente invisible: el hover no se corta al bajar el mouse del botón a la caja */
  .nav__sub-caja::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
  .nav__sub.abierto .nav__sub-caja { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .2s var(--curva), transform .2s var(--curva), visibility 0s; }
  .hv-c .nav__links .nav__sub-caja a { height: 44px; padding: 0 16px 0 12px; border-radius: 11px; font-size: 14px; color: var(--texto); transition: background-color .2s var(--curva-hover); }
  .hv-c .nav__links .nav__sub-caja a:hover, .hv-c .nav__links .nav__sub-caja a:focus-visible,
  body.v5.hv-c.pg-int .nav__links .nav__sub-caja a:hover, body.v5.hv-c.pg-int .nav__links .nav__sub-caja a:focus-visible { background: var(--crema); color: var(--texto); }
  .nav__sub-caja :focus-visible { outline-color: var(--acento) !important; outline-offset: -2px; }
}

@media (max-width: 1100px) {
  .nav__sub { flex-direction: column; align-items: stretch; }
  .hv-c .nav .nav__sub-btn { justify-content: space-between; min-height: 48px; padding: 0 16px; border-radius: 12px; color: var(--texto); text-align: left; }
  .hv-c .nav .nav__sub-btn:hover { background: var(--crema); }
  .hv-c .nav .nav__sub-btn.activo { color: var(--acento-hondo); }
  .hv-c .nav .nav__sub-btn:focus-visible { outline-color: var(--acento); outline-offset: -2px; }
  .nav__sub-caja { display: none; padding: 0 0 4px 14px; }
  .nav__sub.abierto .nav__sub-caja { display: flex; flex-direction: column; gap: 2px; }
  .hv-c .nav .nav__links .nav__sub-caja a { min-height: 44px; padding: 0 16px; border-radius: 12px; font-size: 15px; color: var(--texto); }
  .hv-c .nav .nav__links .nav__sub-caja a[aria-current="page"] { background: var(--crema); color: var(--acento-hondo); }
}
@media (prefers-reduced-motion: reduce) {
  .nav__sub-caja, .nav__sub-flecha { transition: none !important; }
}

/* Header con 7 enlaces (se sumaron Blog y Contacto): una sola línea y algo más compacto en pantallas medianas */
@media (min-width: 1101px) {
  .hv-c .nav__links { white-space: nowrap; }
  .hv-c .nav__links > a, .hv-c .nav__links .nav__sub-btn { white-space: nowrap; }
}
@media (min-width: 1101px) and (max-width: 1320px) {
  .hv-c .nav__links > a, .hv-c .nav__links .nav__sub-btn { padding-inline: 12px; }
}