/* Estilos de las guias (/guias y /guia-*).
   Se carga DESPUES de base.css y servicios.css: nav, botones, ficha, nota, caja,
   otros y pie vienen de ahi. Aqui solo va lo propio de las guias: la columna
   lateral y el indice. Los huecos de anuncio estan en anuncios.css. */

/* ---------- Maqueta: articulo + columna lateral ----------
   En ordenador ancho, el texto va a la izquierda con el ancho de lectura de
   siempre (74ch) y a la derecha una columna de 300px que acompana al bajar.
   En movil y tablet la columna desaparece. */
.guia{max-width:calc(74ch + 300px + 56px + 2 * var(--pad));margin:0 auto;
  padding:clamp(40px,7vh,72px) var(--pad) clamp(60px,10vh,110px);
  display:grid;grid-template-columns:minmax(0,1fr);gap:56px}
.guia main{max-width:74ch;margin:0;padding:0}
.lateral{display:none}
@media (min-width:1100px){
  .guia{grid-template-columns:minmax(0,74ch) 300px}
  .lateral{display:block}
  .lateral .pega{position:sticky;top:96px;display:grid;gap:16px}
}
.lateral .tarjeta{background:var(--panel);border-radius:16px;padding:20px}
.lateral .tarjeta b{display:block;font-family:var(--display);font-size:1.05rem;margin-bottom:6px}
.lateral .tarjeta p{font-size:.92rem;color:var(--ink-2);margin:0 0 14px}
.lateral .tarjeta .btn{width:100%}

.meta{font-size:.85rem;color:var(--ink-2);margin:6px 0 0}

/* ---------- Indice de guias ---------- */
.lista-guias{display:grid;gap:14px;margin:26px 0 0}
.lista-guias a{display:block;background:var(--panel);border-radius:16px;padding:20px 22px;text-decoration:none;color:var(--ink)}
.lista-guias a:hover{background:var(--accent-muted)}
.lista-guias b{display:block;font-family:var(--display);font-size:1.12rem;line-height:1.25;margin-bottom:6px}
.lista-guias span{display:block;font-size:.94rem;color:var(--ink-2)}
.lista-guias em{display:block;font-style:normal;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}