/* =====================================================================
   GUÍA (public_html/guia.php, includes/guia.php)
   Índice de artículos y artículo: texto largo y legible, con una columna
   de lectura de unos 70 caracteres. Las migas de pan vienen de ficha.css.
   ===================================================================== */

.guia { padding-block: 8px 72px; }
.guia__cabecera { max-width: 760px; margin: 12px 0 28px; }
.guia__intro { color: var(--texto-suave); font-size: 1.125rem; line-height: 1.6; }
.guia__meta { margin: 0; color: var(--texto-tenue); font-size: .875rem; }

/* ----- Índice de artículos ----- */
.guia__lista { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .guia__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* El h2 no es la etiqueta pequeña de .tarjeta h2 (mayúsculas y espaciada). */
.guia__tarjeta h2,
.guia__tarjeta h3 { margin-bottom: 8px; font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; text-transform: none; }
.guia__tarjeta h2 a,
.guia__tarjeta h3 a { color: var(--texto); text-decoration: none; }
.guia__tarjeta h2 a:hover,
.guia__tarjeta h3 a:hover { color: var(--acento); }
.guia__tarjeta p { color: var(--texto-suave); line-height: 1.55; }
.guia__tarjeta .guia__meta { margin-top: 12px; }
.guia__mas { margin-top: 56px; }
@media (min-width: 1000px) { .guia__mas .guia__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Índice por temas: los chips llevan a cada grupo. */
.guia__categorias { margin: -8px 0 8px; }
.guia__grupo { margin-top: 40px; }
.guia__grupo-titulo { margin-bottom: 16px; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); }

/* ----- Artículo ----- */
.articulo-guia { max-width: 760px; font-size: 1.0625rem; line-height: 1.7; }
/* :where(:not(.evento *)): ni margen ni color de texto largo en las tarjetas de
   fiesta de un apartado (agenda.css), sin cambiar la especificidad de estas reglas. */
.articulo-guia p:where(:not(.evento *)),
.articulo-guia ul,
.articulo-guia ol { margin: 0 0 1em; }
.articulo-guia ul,
.articulo-guia ol { padding-left: 1.3em; }
.articulo-guia li + li { margin-top: .35em; }
.articulo-guia strong { color: var(--texto); }
.articulo-guia p:where(:not(.evento *)),
.articulo-guia li { color: color-mix(in srgb, var(--texto) 88%, var(--texto-suave)); }

.articulo-guia__portada { margin: -8px 0 28px; aspect-ratio: 1200 / 630; overflow: hidden; border-radius: var(--radio); background: var(--superficie); }
.articulo-guia__portada img { display: block; width: 100%; height: auto; }

/* Fiestas a la venta de un apartado (fiestasGuia()): las tarjetas de agenda.css. */
.articulo-guia__fiestas { margin-top: 20px; }
.articulo-guia .articulo-guia__resumen-fiestas { margin: 18px 0 0; padding: 12px 16px; border-left: 3px solid var(--acento); background: var(--fondo-elevado); border-radius: 0 var(--radio) var(--radio) 0; }

.articulo-guia__resumen {
    margin-bottom: 24px;
    padding: 20px 22px 6px;
    background: color-mix(in srgb, var(--acento) 8%, var(--fondo-elevado));
    border: 1px solid color-mix(in srgb, var(--acento) 30%, var(--borde));
    border-radius: var(--radio);
}
.articulo-guia__resumen h2,
.articulo-guia__indice h2 { margin-bottom: 10px; color: var(--texto-tenue); font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

.articulo-guia__indice {
    margin-bottom: 40px;
    padding: 18px 22px 4px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    font-size: .9375rem;
}
.articulo-guia__indice a { color: var(--texto-suave); text-decoration: none; }
.articulo-guia__indice a:hover { color: var(--acento); }
@media (min-width: 720px) { .articulo-guia__indice ol { columns: 2; column-gap: 32px; } }
.articulo-guia__indice li { break-inside: avoid; }

.articulo-guia__seccion { margin-top: 44px; }
.articulo-guia__seccion h2 { font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); }
.articulo-guia__seccion h3:where(:not(.evento *)) { margin: 1.4em 0 .5em; font-size: 1.0625rem; }
.articulo-guia__seccion:target h2 { color: var(--acento); }

.tabla--guia { font-size: .9375rem; line-height: 1.5; }
.tabla--guia tbody th { white-space: nowrap; }
.tabla--guia tbody th a { color: var(--acento); }

.articulo-guia__salas-titulo { margin-top: 1.4em; color: var(--texto-suave); font-size: .9375rem; }
.articulo-guia__salas { margin-bottom: 0; padding-left: 0; }
.articulo-guia .articulo-guia__salas li { margin: 0; font-size: .875rem; }

.articulo-guia__pie { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--borde); }

/* ----- Páginas legales (includes/legal.php, public_html/legal/) -----
   Mismo cuerpo de lectura que un artículo, sin resumen ni índice. */
.legal .articulo-guia__seccion:first-child { margin-top: 0; }
.legal .articulo-guia__pie { max-width: 760px; }
.legal .legal__datos { margin: 0 0 1em; padding: 0; list-style: none; }
.legal > .aviso { max-width: 760px; }
.legal .legal__datos li { margin: 0; }
.legal__falta { padding: 0 .3em; border-radius: 4px; background: color-mix(in srgb, var(--error) 22%, transparent); color: var(--texto); }