/* ============================================
   GUÍA DE LOMAS — guia-lomas-de-angelopolis.php
   Se carga después de que-es-somoslomas.css y reutiliza
   sus clases (.qs-*). Aquí solo va lo propio de la guía.
   ============================================ */

/* Las anclas del índice no deben quedar bajo el menú fijo */
.gl .qs-sec[id] { scroll-margin-top: calc(var(--nav-h) + 1rem); }

/* En esta página todas las fotos editoriales son 16:9 */
.gl .qs-foto img { aspect-ratio: 16 / 9; }

.qs-sec p.gl-fecha { font-size: 14px; color: var(--muted); }

/* ---- Cifras que salen del directorio ---- */
.gl-cifras {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem;
  list-style: none; margin: 1.75rem auto 0;
}
.gl-cifras li {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 1rem; text-align: center;
}
.gl-cifras strong {
  display: block; font-family: var(--font-d); font-size: 30px; line-height: 1.1; color: var(--red);
}
.gl-cifras span { font-size: 13px; color: var(--muted); line-height: 1.35; display: block; margin-top: .25rem; }

/* ---- Índice ---- */
.gl-indice {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem; margin-top: 2rem;
}
.gl-indice__titulo {
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .75rem;
}
.gl-indice ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem .5rem; }
.gl-indice a {
  display: inline-block; font-size: 14px; padding: 5px 12px; border-radius: var(--radius-full);
  background: var(--cream); color: var(--text);
}
.gl-indice a:hover { background: var(--red-light); color: var(--red); }

/* ---- Tarjetas (zonas y momentos para comer) ---- */
.gl-cards { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin: .5rem auto 1.5rem; }
.gl-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 1.15rem 1.25rem;
}
.gl-card h3 {
  font-family: var(--font-d); font-size: 20px; font-weight: 700; color: var(--dark);
  line-height: 1.2; margin-bottom: .5rem;
}
.gl-card p { font-size: 15px; line-height: 1.6; margin-bottom: .5rem; }
.gl-card p:last-child { margin-bottom: 0; }

/* ---- Listas enlazadas al directorio (plazas, parques, categorías) ---- */
.gl-links { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem auto 1.5rem; }
.gl-links a,
.gl-links span {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: 14px; padding: 6px 14px; border-radius: var(--radius-full);
  background: var(--white); border: 1px solid var(--border); color: var(--text);
}
.gl-links a:hover { border-color: var(--red); color: var(--red); }
.gl-links small {
  font-size: 12px; font-weight: 600; color: var(--red);
  background: var(--red-light); border-radius: var(--radius-full); padding: 1px 7px;
}

.qs-sec p.gl-dato { font-size: 15px; color: var(--muted); }
.gl-dato strong { color: var(--dark); }

.qs-sec p.gl-accion { margin: .5rem auto 0; }

/* ---- Cita ---- */
.gl-cita {
  margin: .25rem auto 1.25rem; padding: .25rem 0 .25rem 1.25rem; border-left: 3px solid var(--red);
  font-family: var(--font-d); font-style: italic; font-size: clamp(24px, 3vw, 30px);
  line-height: 1.3; color: var(--dark);
}

/* ---- Cierre ---- */
.gl-cierre { text-align: center; }
.gl-cierre p { margin-left: auto; margin-right: auto; }
.gl-cierre .gl-lema { font-family: var(--font-d); font-size: 22px; color: var(--white); }

@media (max-width: 768px) {
  .gl-cifras { grid-template-columns: 1fr 1fr; }
  .gl-cifras strong { font-size: 26px; }
  .gl-cards { grid-template-columns: 1fr; }
  .gl-indice { padding: 1rem 1.1rem; }
}