/* ============================================================
   Todas las soluciones (/soluciones/, pages/soluciones/index.astro):
   salto rápido por ámbito y, por cada ámbito, sus soluciones en tarjetas.
   ============================================================ */

.sl { --sl-borde: rgba(255, 255, 255, 0.1); }
.sl svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sl .cc { margin-bottom: 0; }

/* salto rápido: fijo bajo el menú mientras se baja por la página */
.sl-saltos {
  position: sticky; top: calc(var(--banner-h) + 116px); z-index: 20; padding: 12px 0;
  background: rgba(16, 18, 17, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--sl-borde);
}
.sl-saltos ul { list-style: none; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.sl-saltos a {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 8px 14px; border-radius: 99px;
  border: 1px solid var(--sl-borde); background: rgba(255, 255, 255, 0.03);
  color: var(--text); text-decoration: none; font-size: 0.84rem; font-weight: 700;
}
.sl-saltos a:hover, .sl-saltos a.activo { border-color: var(--teal); color: var(--teal-bright); }
.sl-saltos svg { width: 17px; height: 17px; color: var(--teal-bright); }
.sl-saltos small { font-size: 0.7rem; color: var(--text-dim); font-weight: 600; }

/* cada ámbito: su cabecera a la izquierda y sus soluciones a la derecha */
.sl-ambito {
  display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 36px; align-items: start;
  padding: 44px 0; border-bottom: 1px solid var(--sl-borde); scroll-margin-top: calc(var(--banner-h) + 190px);
}
.sl-ambito:last-child { border-bottom: 0; }
.sl-ambito-cab { position: sticky; top: calc(var(--banner-h) + 200px); display: grid; gap: 6px; justify-items: start; }
.sl-ambito-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; border: 1px solid rgba(47, 214, 188, 0.45); color: var(--teal-bright); margin-bottom: 6px; box-shadow: 0 0 22px -8px rgba(47, 214, 188, 0.6); }
.sl-ambito-ico svg { width: 24px; height: 24px; }
.sl-ambito-cab small { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; color: var(--teal-bright); }
.sl-ambito-cab h2 { font-size: 1.45rem; font-weight: 800; line-height: 1.15; }
.sl-ambito-cab p { font-size: 0.88rem; color: var(--text-dim); line-height: 1.55; margin-bottom: 6px; }
.sl-mas { display: inline-flex; align-items: center; gap: 6px; color: var(--teal-bright); font-weight: 700; font-size: 0.84rem; text-decoration: none; }
.sl-mas svg { width: 15px; height: 15px; }
a.sl-mas:hover { text-decoration: underline; }

.sl-espacios { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sl-espacio {
  display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 12px;
  border: 1px solid var(--sl-borde); background: #121514; color: var(--text); text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.sl-espacio:hover { border-color: rgba(47, 214, 188, 0.55); transform: translateY(-3px); }
.sl-espacio img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 0.4s ease; }
.sl-espacio:hover img { transform: scale(1.03); }
.sl-espacio-txt { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 14px 16px 16px; }
.sl-espacio-txt b { font-size: 0.98rem; line-height: 1.3; }
.sl-espacio-txt > span:not(.sl-pie) { font-size: 0.82rem; line-height: 1.5; color: var(--text-dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sl-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 8px; }
.sl-pie small { font-size: 0.74rem; color: var(--text-dim); }

@media (max-width: 1100px) { .sl-espacios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .sl-ambito { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sl-ambito-cab { position: static; }
  /* la barra de ámbitos se pega justo bajo la cabecera móvil (64 px), y sube con ella
     cuando la barra superior se esconde (html.tb-oculta, TopBar.astro) */
  .sl-saltos { top: calc(var(--banner-h) + 104px); transition: top 0.25s ease; }
  html.tb-oculta .sl-saltos { top: calc(var(--banner-h) + 64px); }
  .sl-ambito { scroll-margin-top: calc(var(--banner-h) + 130px); }
}
@media (max-width: 560px) {
  /* las soluciones de cada ámbito en carrusel horizontal, como en el home */
  .sl-espacios {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -28px; padding: 4px 28px 8px; scroll-padding: 0 28px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .sl-espacios::-webkit-scrollbar { display: none; }
  .sl-espacios li { flex: 0 0 82%; scroll-snap-align: start; }
}