/* El grupo desplegable del menú público («Recursos»), scripts/generar-nav-publica.js.
   Va en el <head> y no en nav-publica.js para que los enlaces del grupo no
   aparezcan sueltos en la barra mientras carga la página. En el móvil (la
   barra se esconde por debajo de 1180 px) el panel clona estos mismos enlaces
   y los enseña en la lista: allí no hay desplegable. */
.nav-grupo { position: relative; display: inline-flex; align-items: center; }
.nav-grupo-btn {
  display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 4px 0;
  background: none; border: 0; cursor: pointer; white-space: nowrap;
  font: inherit; font-size: 13.5px; font-weight: 500; color: inherit;
}
.nav-grupo-btn svg { transition: transform .15s; opacity: .8; }
.nav-grupo-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-grupo-btn:focus-visible { outline: 2px solid #c9a55a; outline-offset: 4px; border-radius: 3px; }

.nav-grupo-menu {
  display: none; position: absolute; top: 100%; left: -14px; z-index: 120;
  min-width: 250px; padding: 8px; margin-top: 10px;
  background: #0f1729; border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  flex-direction: column;
}
/* Puente invisible: sin él el ratón «sale» del grupo al cruzar el hueco
   entre el botón y el panel, y el menú se cierra antes de llegar. */
.nav-grupo-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-grupo:hover .nav-grupo-menu,
.nav-grupo:focus-within .nav-grupo-menu,
.nav-grupo.abierto .nav-grupo-menu { display: flex; }
.nav-grupo.cerrado .nav-grupo-menu { display: none; }
.nav-grupo-menu a {
  display: block; padding: 10px 12px; border-radius: 8px;
  font-size: 14px; white-space: nowrap; color: #ccd5e8; text-decoration: none;
}
.nav-grupo-menu a:hover, .nav-grupo-menu a:focus-visible { background: rgba(255, 255, 255, .06); color: #fff; outline: none; }

/* Cabeceras claras (plantillas, LinkedIn): nav-publica.js añade .nav-claro. */
.nav-claro .nav-grupo-menu { background: #fff; border-color: rgba(15, 23, 42, .12); box-shadow: 0 18px 40px rgba(15, 23, 42, .14); }
.nav-claro .nav-grupo-menu a { color: #1e293b; }
.nav-claro .nav-grupo-menu a:hover, .nav-claro .nav-grupo-menu a:focus-visible { background: rgba(15, 23, 42, .05); color: #0f172a; }

@media (max-width: 1180px) { .nav-grupo-menu { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .nav-grupo-btn svg { transition: none; } }

/* Titulares sin palabras sueltas (scripts/titulares-equilibrados.js). Va aquí
   porque esta hoja la cargan TODAS las páginas públicas, también las que no
   usan paginas-seo.css (portada, precios, plantillas, LinkedIn). */
h1 .tl, h2 .tl { display: block; text-wrap: balance; }