/* ═══════════════════════════════════════════════════════════
   LAFF · las guías públicas.

   Se apoyan en styles.css: colores, tipografías, cabecera, pie,
   botones, `.nota` y las barritas de estela y duración ya están
   allí. Aquí solo va lo propio de una página de lectura larga.
   ═══════════════════════════════════════════════════════════ */

/* En la tienda la cabecera se vuelve opaca al bajar; aquí empieza
   así, porque debajo hay texto y no una foto a sangre. */
.pagina-guia .nav--guia { display: flex; gap: 24px; }

.btn--compacto { padding: 9px 18px; font-size: .84rem; }

.contenedor--guia { max-width: 820px; }

/* ─────────── Migas ─────────── */

.migas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding-top: 26px;
  font-size: .78rem;
  color: var(--texto-tenue);
}
.migas a { color: var(--texto-medio); text-decoration: none; }
.migas a:hover { color: var(--texto); text-decoration: underline; }

/* ─────────── Cabecera de la guía ─────────── */

.guia__cabecera { padding: 26px 0 8px; }

.guia__titulo {
  margin: 10px 0 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.95rem, 6vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -.015em;
}

.guia__intro {
  margin: 18px 0 0;
  font-size: 1.04rem;
  line-height: 1.68;
  color: var(--texto-medio);
}

/* ─────────── Índice ─────────── */

.guia-indice {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 0;
  padding: 14px 0;
  border-block: 1px solid var(--borde-suave);
}
.guia-indice a {
  padding: 7px 14px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  font-size: .82rem;
  color: var(--texto-medio);
  text-decoration: none;
  transition: border-color var(--trans), color var(--trans), background var(--trans);
}
.guia-indice a:hover {
  border-color: var(--oro);
  color: var(--texto);
  background: rgba(201,169,106,.07);
}

/* ─────────── Grupos y fichas ─────────── */

.guia-grupo { padding-top: 34px; scroll-margin-top: 80px; }

.guia-grupo__titulo {
  margin: 0 0 4px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.6rem;
  color: var(--oro-suave);
}

.guia-lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.guia-ficha {
  padding: 18px 20px;
  background: var(--superficie);
  border: 1px solid var(--borde-suave);
  border-radius: var(--r-md);
  transition: border-color var(--trans);
}
.guia-ficha:hover { border-color: var(--borde); }

.guia-ficha__nombre {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.16rem;
  line-height: 1.3;
}
.guia-ficha__nombre strong { font-weight: 700; }

.guia-ficha__tipo {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  font-family: var(--texto-ff);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  vertical-align: middle;
}

.guia-ficha__familia {
  margin: 7px 0 0;
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--oro);
}

.guia-ficha__porque {
  margin: 11px 0 0;
  font-size: .93rem;
  line-height: 1.62;
  color: var(--texto-medio);
}

.guia-ficha__notas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 13px 0 0;
}

.guia-ficha__medidas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 14px 0 0;
  padding-top: 13px;
  border-top: 1px solid var(--borde-suave);
}

/* ─────────── Llamada a la tienda ─────────── */

.guia-cta {
  margin-top: 46px;
  padding: 28px 24px;
  background:
    radial-gradient(90% 120% at 12% 0%, rgba(201,169,106,.12), transparent 62%),
    var(--superficie-2);
  border: 1px solid rgba(201,169,106,.24);
  border-radius: var(--r-lg);
}
.guia-cta h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.2;
}
.guia-cta p {
  margin: 12px 0 0;
  font-size: .95rem;
  color: var(--texto-medio);
  max-width: 54ch;
}
.guia-cta__botones { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 22px; }

/* ─────────── Otras guías ─────────── */

.guia-otras { margin: 44px 0 60px; }
.guia-otras h2 {
  margin: 0 0 14px;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  font-weight: 600;
}
.guia-otras ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.guia-otras a {
  font-size: .95rem;
  color: var(--texto-medio);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--trans), border-color var(--trans);
}
.guia-otras a:hover { color: var(--texto); border-bottom-color: var(--oro); }

/* ─────────── Portada de guías ─────────── */

.guia-tarjetas {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}

.guia-tarjeta {
  display: block;
  height: 100%;
  padding: 24px;
  background: var(--superficie);
  border: 1px solid var(--borde-suave);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: border-color var(--trans), transform var(--trans);
}
.guia-tarjeta:hover { border-color: var(--oro); transform: translateY(-2px); }
.guia-tarjeta h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.3rem;
}
.guia-tarjeta p { margin: 9px 0 0; font-size: .9rem; color: var(--texto-medio); }
.guia-tarjeta__ir {
  display: inline-block;
  margin-top: 15px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--oro);
}

@media (min-width: 700px) {
  .guia-tarjetas { grid-template-columns: repeat(2, 1fr); }
  .guia-cta { padding: 34px 32px; }
}

/* Aviso de «esto es una selección» en las páginas de ciudad. */
.guia__mas {
  margin: 16px 0 0;
  padding: 11px 15px;
  background: rgba(201,169,106,.07);
  border-left: 2px solid var(--oro);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: .89rem;
  color: var(--texto-medio);
}
.guia__mas a { color: var(--oro-suave); }