/* ═══════════════════════════════════════════════════════════
   guide.css — Estilos base de las 3 guías de contenido claras:
   guia-barrios-invertir-asuncion, guia-comprar-departamento-paraguay
   y precios-departamentos-asuncion (+ sus versiones en/ y ru/, hasta
   9 archivos). Cada una tenía su propio bloque <style>, y con el
   tiempo divergieron en dos sistemas: las españolas con Cormorant
   Garamond + Nunito Sans y dorado #b8924a, varias de en/ y ru/ con
   Playfair Display + Inter y dorado #C9A84C. La misma guía se veía
   distinta según el idioma.

   ⚠️ NO tocar investor-pass.php ni yulia-traidova-broker.php (ES/EN/RU):
   son un template propio, de tema oscuro, consistente entre los 3
   idiomas desde antes de este archivo. La primera versión de este CSS
   las incluyó por error (asumiendo que "misma familia de página" =
   "mismo sistema") y les rompió el diseño — el texto quedó invisible
   porque heredaban el tema claro sobre su propio fondo oscuro. Se
   revirtieron a su <style> bespoke y no deben volver a engancharse acá.
   ═══════════════════════════════════════════════════════════ */

:root{
  --g-ink:#1a1814;      /* fondo oscuro de hero, tablas y CTA */
  --g-ink2:#2a2318;     /* segundo tono del degradado */
  --g-gold:#b8924a;
  --g-gold-dark:#a8882e;
  --g-text:#444;
  --g-line:#f0e8d8;
  --g-ff:'Cormorant Garamond',Georgia,serif;   /* títulos */
  --g-fb:'Nunito Sans',system-ui,sans-serif;   /* cuerpo  */
}

*{box-sizing:border-box;margin:0;padding:0}

body{font-family:var(--g-fb);color:var(--g-ink);background:#fff;line-height:1.75}
a{color:var(--g-gold);text-decoration:none}
a:hover{text-decoration:underline}

/* ── Encabezados ─────────────────────────────────────────── */
h2{font-family:var(--g-ff);font-size:1.75rem;font-weight:700;color:var(--g-ink);
   margin:48px 0 16px;padding-top:48px;border-top:2px solid var(--g-line)}
h2:first-of-type{border-top:none;margin-top:0;padding-top:0}
h3{font-size:1.05rem;font-weight:700;color:var(--g-ink);margin-bottom:6px}
p{color:var(--g-text);margin-bottom:14px}

/* ── Barra superior ──────────────────────────────────────── */
.nav{background:var(--g-ink);padding:18px 40px;display:flex;justify-content:space-between;align-items:center}
.nav a{color:#fff;font-size:.9rem;margin-left:24px}
.nav .logo{color:var(--g-gold);font-family:var(--g-ff);font-size:1.1rem;font-weight:700;letter-spacing:.05em}

/* ── Hero ────────────────────────────────────────────────── */
.hero{background:linear-gradient(135deg,var(--g-ink) 0%,var(--g-ink2) 60%,var(--g-ink) 100%);
      color:#fff;padding:72px 40px;text-align:center}
.hero .tag{display:inline-block;background:rgba(184,146,74,.15);border:1px solid var(--g-gold);
           color:var(--g-gold);border-radius:4px;padding:5px 14px;font-size:.8rem;margin-bottom:20px}
.hero h1{font-family:var(--g-ff);font-size:2.3rem;font-weight:700;line-height:1.2;margin-bottom:16px}
.hero p{font-size:1.05rem;color:#ccc;max-width:640px;margin:0 auto}

.container{max-width:900px;margin:0 auto;padding:60px 24px}

/* ── Tablas ──────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;margin:24px 0}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th{background:var(--g-ink);color:var(--g-gold);padding:12px 14px;text-align:left;font-weight:600;white-space:nowrap}
td{padding:11px 14px;border-bottom:1px solid #eee;color:var(--g-text);vertical-align:top}
tr:nth-child(even) td{background:#f9f6f0}

/* ── Botones y CTA ───────────────────────────────────────── */
.btn{display:inline-block;background:var(--g-gold);color:#fff;padding:14px 32px;border-radius:6px;
     font-weight:600;font-size:1rem;transition:background .2s}
.btn:hover{background:var(--g-gold-dark);text-decoration:none}
.btn-outline{background:transparent;border:2px solid var(--g-gold);color:var(--g-gold);margin-left:12px}
.btn-outline:hover{background:var(--g-gold);color:#fff}

.cta-box{background:linear-gradient(135deg,var(--g-ink),var(--g-ink2));color:#fff;border-radius:12px;
         padding:48px 40px;text-align:center;margin-top:56px}
.cta-box h2{color:var(--g-gold);border-top:none;margin-top:0;padding-top:0}
.cta-box p{color:#ccc;margin-bottom:28px}

/* ── Tarjetas de zona / barrio (compartidas por las guías) ── */
.zona-card{border:1px solid #e8e0d0;border-radius:10px;padding:28px;margin-bottom:24px;border-top:4px solid var(--g-gold)}
.zona-card h3{font-size:1.2rem;margin-bottom:4px}
.zona-meta{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0}
.tag-pill{background:#f9f6f0;border:1px solid #e0d5c0;border-radius:20px;padding:4px 12px;font-size:.8rem;color:#666}

.barrio-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin:24px 0}
.barrio-link{display:flex;flex-direction:column;gap:3px;border:1px solid #e0d5c0;border-radius:10px;
             padding:14px 16px;background:#fff;text-decoration:none;transition:border-color .15s,box-shadow .15s}
.barrio-link:hover{border-color:var(--g-gold);box-shadow:0 2px 10px rgba(184,146,74,.13)}
.barrio-link .bl-nombre{color:var(--g-ink);font-weight:600;font-size:.92rem}
.barrio-link .bl-meta{color:#8a7f6d;font-size:.79rem}

@media (max-width:720px){
  .hero{padding:52px 22px}
  .hero h1{font-size:1.75rem}
  .container{padding:40px 20px}
  .nav{padding:14px 20px}
  .cta-box{padding:34px 22px}
  .btn-outline{margin-left:0;margin-top:10px}
}