/* ==========================================================================
   seo.css — componentes de las landings de país y ciudad (/argentina/,
   /chile/, /uruguay/ y /<pais>/salas-de-ensayo-en-<ciudad>/).

   Se apoya en /styles.css (mismo sistema visual que el home: .btn, .eyebrow,
   .sec-lede, .lp-header, .lp-footer, .search-answers, tokens…). Solo agrega los
   componentes propios de estas páginas, con prefijo .geo-*.

   Fuente de verdad: este archivo. Lo cargan las landings por <link>, no hay
   <style> embebido por página. Editar acá y bumpear ?v= en generar-landings.py.
   ========================================================================== */

/* ---- footer: navegación por zona (barrios / ciudades) -------------------- */
.geo-foot-nav{margin-top:clamp(28px,4vw,44px);padding-top:24px;border-top:1px solid var(--line)}
.geo-foot-nav h3{font-family:var(--font-display);font-weight:800;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--bone-faint);margin-bottom:14px}
.geo-foot-nav .geo-foot-list{display:flex;flex-wrap:wrap;gap:8px 22px}
.geo-foot-nav a{color:var(--bone-dim);font-size:13.5px;text-decoration:none;transition:color .2s ease}
.geo-foot-nav a:hover{color:var(--amber)}

/* ---- sección "directorio por zona" de la landing de país --------------- */
.geo-dir{padding:clamp(28px,4vw,44px) 0}
.geo-dir .sec-head{margin-bottom:22px}
.geo-dir h3{font-family:var(--font-display);font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--bone-faint);margin:26px 0 12px}
.geo-dir-all{margin:22px 0 0;font-size:14px}
.geo-dir-all a{color:var(--amber);text-decoration:none;font-weight:600}
.geo-dir-all a:hover{text-decoration:underline}

/* ---- grilla de zonas (barrios o ciudades) ----------------------------- */
.geo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.geo-cell{display:flex;flex-direction:column;gap:3px;padding:13px 15px;border:1px solid var(--line);border-radius:13px;background:var(--card);text-decoration:none;transition:transform .2s cubic-bezier(.16,1,.3,1),border-color .2s ease}
.geo-cell:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--amber) 42%,var(--line))}
.geo-cell b{font-family:var(--font-display);font-weight:700;font-size:14.5px;color:var(--bone);letter-spacing:-.01em}
.geo-cell:hover b{color:var(--amber)}
.geo-cell span{font-size:12px;color:var(--bone-faint)}

/* ---- tarjetas de ciudad (landing de país, sección #ciudades) ---------- */
.geo-cities .city-card{display:block;text-decoration:none;transition:transform .25s cubic-bezier(.16,1,.3,1),border-color .25s ease}
.geo-cities .city-card h3{transition:color .2s ease}
.geo-cities .city-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--amber) 40%,var(--line))}
.geo-cities .city-card:hover h3{color:var(--amber)}
.geo-cities .city-card p{margin-top:6px;color:var(--bone-faint);font-size:13px}
.geo-cities-all{margin-top:22px;text-align:center;font-size:14px}
.geo-cities-all a{color:var(--amber);text-decoration:none;font-weight:600}
.geo-cities-all a:hover{text-decoration:underline}

/* ---- landing de ciudad: prosa local + tags de zona ------------------- */
.geo-prose{max-width:70ch;color:var(--bone-dim);font-size:clamp(15px,1.5vw,17.5px);line-height:1.7}
.geo-prose p+p{margin-top:16px}
.geo-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.geo-tags span{font-family:var(--font-display);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--bone-dim);border:1px solid var(--line);border-radius:100px;padding:6px 12px}

/* ---- CTA al directorio (landing de ciudad -> /salas/<pais>/<tipo>/<ciudad>/) */
.geo-cta{margin-top:26px;padding:20px 22px;border:1px solid color-mix(in srgb,var(--amber) 30%,var(--line));border-radius:16px;background:color-mix(in srgb,var(--amber) 6%,transparent)}
.geo-cta p{margin:0 0 12px;color:var(--bone-dim);font-size:14px}
.geo-cta-links{display:flex;flex-wrap:wrap;gap:10px}
.geo-cta-links a{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--bone);text-decoration:none;border:1px solid var(--line);border-radius:100px;padding:9px 15px;background:var(--card);transition:border-color .2s ease,color .2s ease}
.geo-cta-links a:hover{border-color:var(--amber);color:var(--amber)}