/* LAS GUÍAS PARA BUSCAR GRUPO (13-10-2026, con el sistema): solo su maquetación. El color lo pone
   el juego: `main` lleva `tinte-<color>` y de ahí sale el resplandor de arriba, el filete de las
   tarjetas de rol y el punto del carrusel. */
.guia { position: relative; isolation: isolate; }
/* El resplandor del tinte arriba, como en la app (Fase 37): un degradado, sin `filter`. */
.guia::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: min(60vh, 36rem);
  z-index: -1;
  background: none; /* Lima: la mesa no brilla (era un degradado radial del tinte) */
  pointer-events: none;
}
.guia__cabeza {
  padding-top: clamp(1.5rem, 0.5rem + 3vw, 3.5rem);
  padding-bottom: var(--s-6);
}
@media (min-width: 60rem) {
  .guia__cabeza { padding-bottom: var(--s-7); }
}
.guia__cabeza .linea { max-width: 38rem; }

/* El carrusel va a sangre en el móvil: sale de `.contenedor` para que el dedo tenga toda la pantalla. */
.guia__capturas { margin-top: var(--s-2); }
.guia__capturas .pie-captura { font-weight: 600; color: var(--ink-bright); max-width: 18rem; }

.guia .accion { padding-top: var(--s-7); }
.guia .roles + .nota { max-width: 40rem; }
.guia .preguntas { margin-top: var(--s-5); }
.guia .juegos { margin-top: var(--s-5); }
.guia--indice .juegos--grandes { margin-top: var(--s-6); }
.guia--indice .guia__cabeza { padding-bottom: var(--s-4); }
.guia--indice .guia__capturas { margin-top: var(--s-6); }

@media (min-width: 60rem) {
  .guia .accion { padding-top: var(--s-8); }
}