/* ============================================================
   GUIAS. Indice (/guias/) y guia. Solo se carga en el blog (ver inc/enqueue.php).
   ============================================================ */

/* ---------- INDICE ---------- */
.guias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-5); }
.guia-tarjeta { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--panel); overflow: hidden; transition: border-color .2s, transform .2s var(--curva); }
.guia-tarjeta:hover { border-color: var(--rojo); transform: translateY(-2px); }
.guia-tarjeta__img { aspect-ratio: 16 / 9; background: var(--panel-2); overflow: hidden; }
.guia-tarjeta__img img { width: 100%; height: 100%; object-fit: cover; }
.guia-tarjeta__vacia { display: block; width: 100%; height: 100%; background: var(--rejilla); background-size: 28px 28px; }
.guia-tarjeta__cuerpo { display: grid; gap: var(--e-2); align-content: start; padding: var(--e-5); }
.guia-tarjeta__cuerpo .dato { font-size: var(--t-xs); color: var(--rojo); letter-spacing: .12em; text-transform: uppercase; }
.guia-tarjeta h2 { font-size: var(--t-l); margin: 0; }
.guia-tarjeta p { margin: 0; color: var(--texto-suave); font-size: var(--t-s); }
.guia-tarjeta--destacada { grid-column: 1 / -1; grid-template-columns: 1.3fr 1fr; grid-template-rows: auto; }
.guia-tarjeta--destacada .guia-tarjeta__img { aspect-ratio: auto; min-height: 320px; }
.guia-tarjeta--destacada .guia-tarjeta__cuerpo { align-content: center; padding: var(--e-7); }
.guia-tarjeta--destacada h2 { font-size: var(--t-2xl); }

/* ---------- GUIA ---------- */
.guia { padding-top: var(--e-5); }
.guia__cab { max-width: 860px; }
.guia__cab h1 { font-size: var(--t-4xl); }
.guia__entradilla { font-size: var(--t-l); color: var(--texto); max-width: 70ch; }
.guia__meta { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); font-size: var(--t-xs); color: var(--texto-tenue); letter-spacing: .06em; padding-block: var(--e-4); border-block: 1px solid var(--linea-suave); margin-top: var(--e-5); }
.guia__imagen { margin: var(--e-6) 0 0; border-radius: var(--radio); overflow: hidden; background: var(--escenario); }
.guia__imagen img { width: 100%; max-height: 520px; object-fit: cover; }
.guia__cuerpo { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--e-7); margin-top: var(--e-7); align-items: start; }
.guia__indice { position: sticky; top: calc(var(--cabecera) + var(--e-5)); font-size: var(--t-s); }
.guia__indice .dato { display: block; font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-tenue); margin-bottom: var(--e-3); }
.guia__indice ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--linea); display: grid; gap: 2px; }
.guia__indice a { display: block; padding: 6px var(--e-4); color: var(--texto-suave); }
.guia__indice a:hover { color: var(--blanco); }
.guia__cuerpo:not(:has(.guia__indice)) { grid-template-columns: minmax(0, 1fr); }
.guia__texto { max-width: 72ch; font-size: 1.0625rem; }
.guia__texto h2 { font-size: var(--t-2xl); margin-top: var(--e-7); scroll-margin-top: calc(var(--cabecera) + var(--e-4)); }
.guia__texto table { max-width: 100%; }
.guia__texto td.num, .guia__texto th.num { text-align: right !important; }
.guia__texto .nota { border-left: 3px solid var(--rojo); padding: var(--e-3) var(--e-4); background: var(--panel); border-radius: 0 var(--radio-s) var(--radio-s) 0; color: var(--texto); }
.guia__piezas { margin-top: var(--e-8); }
.guia__ayuda { display: flex; justify-content: space-between; align-items: center; gap: var(--e-5); margin-top: var(--e-7); flex-wrap: wrap; }
.guia__ayuda p { margin: 4px 0 0; color: var(--texto-suave); }
.guia__ayuda b { color: var(--blanco); font-family: var(--f-titulo); font-size: var(--t-l); }

@media (max-width: 960px) {
    .guias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .guia-tarjeta--destacada { grid-template-columns: 1fr; }
    .guia-tarjeta--destacada .guia-tarjeta__img { min-height: 0; aspect-ratio: 16 / 9; }
    .guia-tarjeta--destacada .guia-tarjeta__cuerpo { padding: var(--e-5); }
    .guia__cuerpo { grid-template-columns: 1fr; gap: var(--e-5); }
    .guia__indice { position: static; }
}
@media (max-width: 600px) {
    .guias { grid-template-columns: 1fr; }
    .guia__texto { font-size: var(--t-m); }
}

/* sonidos dentro de la guia */
.guia__sonidos { margin-top: var(--e-8); }
.guia__sonidos-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--e-5); }
.guia__sonidos-rejilla > div { display: grid; gap: var(--e-2); }
.guia__sonidos-rejilla .enlace-flecha { font-size: var(--t-s); }
@media (max-width: 600px) { .guia__sonidos-rejilla { grid-template-columns: 1fr; } }