/* Las guías públicas por ciudad (/guias y /guias/<ciudad>, scripts/web_guias.py).
   Van encima de /l/landing.css: mismas fuentes, tokens, botones y pie. Esto solo
   suma lo propio de una página de lectura. Sin JS: nada arranca escondido. */

.guia-barra { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding-top: var(--s5); padding-bottom: var(--s5); }
.guia-barra nav { display: flex; gap: var(--s2); }
.guia-barra nav a { padding: 10px 14px; border-radius: 9999px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--tinta60); transition: background-color var(--toque), color var(--toque); }
.guia-barra nav a:hover { background: var(--hundido); color: var(--tinta); }

.migas ol { display: flex; flex-wrap: wrap; gap: var(--s2); font-size: 14px; line-height: 20px; color: var(--tinta40); }
.migas li + li::before { content: "/"; margin-right: var(--s2); color: var(--tinta20); }
.migas a { color: var(--tinta60); text-decoration: underline; text-decoration-color: var(--regla); text-underline-offset: 3px; }
.migas a:hover { color: var(--tinta); }

.guia-cabeza { display: flex; flex-direction: column; gap: var(--s4); padding-top: var(--s6); padding-bottom: var(--s8); }
.guia-cabeza h1 { font-size: 56px; line-height: 1; letter-spacing: -0.045em; }
.guia-cabeza h1 small { display: block; margin-top: var(--s2); font-size: 0.5em; line-height: 1.1; letter-spacing: -0.03em; color: var(--tinta60); }
@media (min-width: 768px) { .guia-cabeza h1 { font-size: 96px; } }
.guia-dias { max-width: 720px; font-size: 20px; line-height: 30px; color: var(--tinta60); }
.guia-dias strong { color: var(--tinta); font-weight: 600; }
.guia-actualizada { font-size: 14px; line-height: 20px; color: var(--tinta40); }
.guia-foto { margin-top: var(--s4); overflow: hidden; border-radius: 24px; background: var(--hundido); aspect-ratio: 3 / 2; }
.guia-foto img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .guia-foto { aspect-ratio: 21 / 9; } }

.guia-seccion { padding-top: var(--s9); padding-bottom: var(--s4); }
.guia-seccion > h2 { max-width: 900px; margin-bottom: var(--s3); font-size: 40px; line-height: 1.05; letter-spacing: -0.04em; }
@media (min-width: 768px) { .guia-seccion > h2 { font-size: 56px; } }
.guia-seccion > .seccion-bajada { margin-bottom: var(--s7); }

.esenciales { display: grid; gap: 0; max-width: 900px; counter-reset: esencial; }
.esenciales li { display: grid; grid-template-columns: 48px 1fr; gap: var(--s4); padding: var(--s5) 0; border-top: 1px solid var(--regla); }
.esenciales li:last-child { border-bottom: 1px solid var(--regla); }
.esenciales .n { font-size: 32px; line-height: 1; font-weight: 600; letter-spacing: -0.04em; color: var(--naranja-grande); font-variant-numeric: tabular-nums; }
.esenciales h3 { font-size: 22px; line-height: 28px; letter-spacing: -0.02em; }
.esenciales .meta { margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--tinta40); }
.esenciales p:last-child { margin-top: var(--s2); max-width: 680px; font-size: 17px; line-height: 26px; color: var(--tinta60); }
.en-la-app { max-width: 680px; margin-top: var(--s5); font-size: 16px; line-height: 24px; color: var(--tinta60); }

.barrios { display: grid; gap: var(--s5) var(--s7); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.barrios h3 { font-size: 18px; line-height: 26px; letter-spacing: -0.01em; }
.barrios p { margin-top: var(--s1); font-size: 15px; line-height: 22px; color: var(--tinta60); }

.epoca { max-width: 720px; font-size: 20px; line-height: 30px; }
.epoca strong { font-weight: 600; }
.criterio, .fuente-clima { max-width: 720px; margin-top: var(--s3); font-size: 14px; line-height: 20px; color: var(--tinta40); }
.clima-tabla { margin-top: var(--s6); overflow-x: auto; }
.clima-tabla table { width: 100%; max-width: 720px; border-collapse: collapse; font-size: 15px; line-height: 22px; font-variant-numeric: tabular-nums; }
.clima-tabla caption { text-align: left; padding-bottom: var(--s3); font-size: 14px; line-height: 20px; color: var(--tinta40); }
.clima-tabla th, .clima-tabla td { padding: var(--s2) 6px; text-align: right; border-bottom: 1px solid var(--regla); white-space: nowrap; }
@media (min-width: 768px) { .clima-tabla th, .clima-tabla td { padding: var(--s2) var(--s3); } }
.clima-tabla th[scope="row"], .clima-tabla thead th:first-child { text-align: left; font-weight: 500; }
.clima-tabla thead th { font-weight: 600; color: var(--tinta60); }
.clima-tabla tr.buena th[scope="row"]::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: var(--s2); border-radius: 50%; background: var(--verde); vertical-align: 1px; }

.guia-cta { margin-top: var(--s9); padding: var(--s8) var(--s6); border-radius: 32px; background: var(--tinta); color: var(--papel); }
.guia-cta h2 { max-width: 760px; font-size: 40px; line-height: 1.05; letter-spacing: -0.04em; }
@media (min-width: 768px) { .guia-cta h2 { font-size: 64px; } }
.guia-cta p { max-width: 640px; margin-top: var(--s4); font-size: 18px; line-height: 28px; color: rgba(251, 250, 246, 0.8); }
.guia-cta .acciones-fila { justify-content: flex-start; margin-top: var(--s6); }
.guia-cta .btn { background: var(--papel); color: var(--tinta); }
.guia-cta .btn:hover { background: #fff; }
.guia-cta .prueba { margin-top: var(--s4); color: rgba(251, 250, 246, 0.7); }

.otras { display: flex; flex-wrap: wrap; gap: var(--s2); }
.otras a { display: inline-block; padding: var(--s2) var(--s4); border-radius: 9999px; box-shadow: inset 0 0 0 1px var(--regla); font-size: 15px; line-height: 22px; font-weight: 500; transition: box-shadow var(--toque), background-color var(--toque); }
.otras a:hover { background: var(--hundido); box-shadow: inset 0 0 0 1px var(--tinta20); }
.todas { display: inline-block; margin-top: var(--s5); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* /guias: la grilla de las 38. */
.region { padding-top: var(--s8); }
.region h2 { margin-bottom: var(--s5); font-size: 32px; line-height: 1.1; letter-spacing: -0.03em; }
.tarjetas { display: grid; gap: var(--s5) var(--s4); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (min-width: 768px) { .tarjetas { gap: var(--s6) var(--s5); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }
.tarjeta a { display: block; }
.tarjeta-foto { overflow: hidden; border-radius: 16px; background: var(--hundido); aspect-ratio: 4 / 3; }
.tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.tarjeta a:hover .tarjeta-foto img { transform: scale(1.04); }
.tarjeta-foto.sin-foto { display: grid; place-items: center; background: var(--tinta); color: var(--papel); font-size: 28px; font-weight: 600; letter-spacing: -0.03em; }
.tarjeta h3 { margin-top: var(--s3); font-size: 20px; line-height: 26px; letter-spacing: -0.02em; }
.tarjeta p { font-size: 14px; line-height: 20px; color: var(--tinta40); }

@media (prefers-reduced-motion: reduce) {
  .tarjeta-foto img { transition: none; }
  .tarjeta a:hover .tarjeta-foto img { transform: none; }
}