/* ============================================================
   BECHARA INMOBILIARIA — Colors & Type  (Light / Warm edition)
   Empresa familiar · +60 años · Zona Sur, Buenos Aires

   Identidad Bechara: escudo ROJO + "B" AMARILLA sobre NEGRO.
   Look claro/editorial: base papel/beige cálido, acento DORADO
   cálido + ROJO de marca, tinta NEGRO cálido. Serif Cormorant
   Garamond + Inter + Archivo Black.

   Se conservan los NOMBRES de variables para que todo el sitio se
   re-skinee solo: la escala "gold" es DORADO/AMARILLO, la escala
   "onyx" es NEGRO cálido (tinta/bandas), y la escala "ocean" pasa
   a ser el ROJO de marca.
   ============================================================ */

/* --- Webfonts ----------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Inter:wght@300;400;500;600;700;800&display=swap");

:root {
  /* ---------- Negro cálido (ink, texto, bandas oscuras) --- */
  --color-onyx-0: #14100b;   /* negro cálido — banda más oscura (footer) */
  --color-onyx-1: #211a12;   /* ink — texto principal */
  --color-onyx-2: #2d241a;   /* negro-800 */
  --color-onyx-3: #4a3d2c;   /* negro-700 */
  --color-onyx-4: #6d5c44;   /* negro-600 */

  /* ---------- Rojo de marca (acento primario) — nombres "gold" */
  /* Toda la escala antes dorada ahora es ROJA: acentos, títulos,
     botones y detalles se vuelven rojos automáticamente. */
  --color-gold-100: #fbdcde;   /* rojo muy suave (highlights) */
  --color-gold-200: #f3a9ae;
  --color-gold-300: #ef5a5a;   /* rojo claro (para texto sobre fondos oscuros) */
  --color-gold-400: #d6182b;   /* ROJO Bechara primario */
  --color-gold-500: #b3121f;
  --color-gold-600: #8f0f19;   /* rojo profundo (texto sobre papel) */
  --color-gold-700: #5c0a12;

  /* ---------- Rojo de marca (acento secundario) — "ocean" - */
  --color-ocean:      #d6182b;   /* ROJO Bechara */
  --color-ocean-2:    #ef3b4d;
  --color-ocean-deep: #a5121f;
  --color-ocean-soft: #fdeaec;

  /* ---------- Terracota (toque Melba, alertas cálidas) ---- */
  --color-clay:   #c1640b;
  --color-clay-2: #e0584f;

  /* ---------- Papel / crema (superficies claras) --------- */
  --color-ivory-0: #fbfaf6;   /* fondo principal (papel cálido) */
  --color-ivory-1: #f5f0e6;   /* crema */
  --color-ivory-2: #ece4d4;   /* crema profunda */
  --color-sage:    #aac5bb;   /* verde salvia suave (Melba) */

  /* ---------- Grises ------------------------------------- */
  --color-slate-100: #f1f4f8;
  --color-slate-300: #d7deea;
  --color-slate-500: #647489;
  --color-slate-700: #3a4d64;
  --color-slate-900: #0f2742;

  /* ---------- Rojo señal --------------------------------- */
  --color-red-300: #f3b1ab;
  --color-red-500: #e0584f;
  --color-red-600: #c0392f;
  --color-red-700: #8f291f;

  /* ---------- Semántica ---------------------------------- */
  --bg-default: var(--color-ivory-0);   /* papel cálido */
  --bg-surface: #ffffff;                /* tarjetas */
  --bg-raised:  var(--color-ivory-1);   /* crema */
  --bg-light:   #ffffff;
  --bg-elevated: #ffffff;               /* tarjetas elevadas (login/CRM) */
  --bg-ink:     var(--color-onyx-1);    /* banda oscura intencional */

  --fg-default: var(--color-onyx-1);    /* ink */
  --fg-muted:   #5e6e84;
  --fg-subtle:  #8a99ab;
  --fg-on-light: var(--color-onyx-1);
  --fg-on-dark:  #eef4fb;

  --accent:        var(--color-gold-400);   /* dorado */
  --accent-strong: var(--color-gold-500);
  --accent-deep:   var(--color-gold-600);
  --accent-2:      var(--color-ocean);      /* teal */
  --accent-2-deep: var(--color-ocean-deep);

  --signal:        var(--color-red-500);

  --border-hairline: rgba(15, 39, 66, 0.09);
  --border-default:  rgba(15, 39, 66, 0.16);
  --border-strong:   var(--color-gold-400);

  /* ---------- Gradientes --------------------------------- */
  /* Texto de titulares: rojo brillante → rojo profundo */
  --gradient-gold-chrome: linear-gradient(100deg, #ef3b4d 0%, #a5121f 100%);
  --gradient-gold-frame:  linear-gradient(135deg, #ef3b4d 0%, #fbdcde 50%, #a5121f 100%);
  /* Botón rojo de marca */
  --gradient-gold-button:       linear-gradient(120deg, #d6182b 0%, #ef3b4d 50%, #b3121f 100%);
  --gradient-gold-button-hover: linear-gradient(120deg, #ef3b4d 0%, #f4626f 50%, #c8121f 100%);
  /* Banda negro cálido (para secciones/footer oscuros) */
  --gradient-navy: linear-gradient(165deg, #14100b 0%, #2a2016 70%, #3a2c1c 100%);
  /* Fondo claro suave para heros de páginas internas */
  --gradient-onyx-vignette: linear-gradient(180deg, #f5f0e6 0%, #fbfaf6 60%, #ffffff 100%);
  /* Rojo de marca */
  --gradient-ocean: linear-gradient(120deg, #a5121f 0%, #ef3b4d 100%);

  /* ---------- Tipografías -------------------------------- */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-heading: "Cormorant Garamond", Georgia, serif;
  --font-script:  "Cormorant Garamond", Georgia, serif;  /* se usa en itálica */
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-impact:  "Archivo Black", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Escala tipográfica ------------------------- */
  --fs-hero:    clamp(44px, 7vw, 92px);
  --fs-display: clamp(36px, 5.5vw, 72px);
  --fs-h1:      clamp(34px, 4.6vw, 60px);
  --fs-h2:      clamp(28px, 3.4vw, 46px);
  --fs-h3:      22px;
  --fs-h4:      18px;
  --fs-script:  clamp(26px, 3.4vw, 40px);
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-eyebrow: 12px;

  --lh-tight: 1.04;
  --lh-snug:  1.16;
  --lh-body:  1.65;
  --lh-loose: 1.8;

  --tracking-caps:  0.18em;
  --tracking-tight: -0.01em;

  /* ---------- Espaciado ---------------------------------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;

  /* ---------- Radios ------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-ojiva: 20px;
  --radius-pill: 999px;

  /* ---------- Sombras / glow ----------------------------- */
  --shadow-sm: 0 6px 22px -12px rgba(14, 39, 66, 0.30);
  --shadow-md: 0 18px 44px -22px rgba(14, 39, 66, 0.32);
  --shadow-lg: 0 50px 110px -46px rgba(14, 39, 66, 0.40);
  --shadow-card: 0 24px 60px -30px rgba(14, 39, 66, 0.22),
                 0 0 0 1px rgba(14, 39, 66, 0.05);
  --shadow-soft: 0 30px 80px -50px rgba(20, 58, 96, 0.45);

  --glow-gold: 0 0 0 1px rgba(214, 24, 43, 0.28), 0 18px 40px -20px rgba(214, 24, 43, 0.40);
  --glow-gold-soft: 0 10px 30px -16px rgba(214, 24, 43, 0.34);
  --glow-red: 0 0 0 1px rgba(214, 24, 43, 0.28), 0 16px 36px -18px rgba(214, 24, 43, 0.40);

  --border-gold-inset: inset 0 0 0 1px var(--color-gold-400);

  --maxw: 1280px;
}

/* ============================================================
   Tipografía semántica
   ============================================================ */
body {
  background-color: var(--bg-default);
  /* Papel cálido: dos tintes suaves (dorado/rojo) + grano fino de papel */
  background-image:
    radial-gradient(1200px 620px at 12% -12%, rgba(200,151,26,0.07), transparent 60%),
    radial-gradient(1000px 520px at 100% 0%, rgba(214,24,43,0.045), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  background-attachment: fixed, fixed, fixed;
  color: var(--fg-default);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Titular hero — serif elegante grande con relleno dorado→rojo animado */
.t-hero,
h1.t-hero {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: none;
  background: linear-gradient(100deg, #ef3b4d 0%, #f4626f 28%, #d6182b 62%, #8f0f19 100%);
  background-size: 220% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: bch-shine 9s ease-in-out infinite;
}
@keyframes bch-shine {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .t-hero, h1.t-hero { animation: none; }
}

/* Efecto para subtítulos / eyebrows: filete dorado con brillo */
.fx-eyebrow {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--accent-deep);
}
.fx-eyebrow::before, .fx-eyebrow::after {
  content: ""; width: 30px; height: 2px; border-radius: 2px;
  background: var(--gradient-ocean); opacity: .8;
}
/* Subrayado decorativo bajo un título de sección */
.fx-underline { position: relative; display: inline-block; }
.fx-underline::after {
  content: ""; position: absolute; left: 0; bottom: -.28em; height: 3px; width: 64px;
  border-radius: 3px; background: linear-gradient(90deg, #ef3b4d 0%, #8f0f19 100%);
}
.fx-underline.is-center::after { left: 50%; transform: translateX(-50%); }

.t-display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-display);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  text-transform: none;
  color: var(--fg-default);
}

h1, .t-h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  text-transform: none;
  color: var(--fg-default);
}

h2, .t-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  text-transform: none;
  color: var(--fg-default);
}

h3, .t-h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-default);
}

h4, .t-h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-default);
}

/* Subtítulo serif en itálica (toque editorial PFL/Melba) */
.t-script {
  font-family: var(--font-script);
  font-weight: 500;
  font-style: italic;
  font-size: var(--fs-script);
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--fg-muted);
}
.t-script--gold { color: var(--accent); }

p, .t-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-default);
}
.t-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body); }
.t-small   { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--fg-muted); }

/* Eyebrow — etiqueta en mayúsculas espaciada (Inter), dorada */
.t-eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent-strong);
}

.t-price {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--fs-body-lg);
  letter-spacing: 0;
  color: var(--accent-deep);
}

.t-phone {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h3);
  color: var(--accent-deep);
}

/* Número/dato grande estilo PFL (Archivo Black) */
.t-stat {
  font-family: var(--font-impact);
  font-weight: 400;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--fg-default);
}

a {
  color: var(--accent-deep);
  text-decoration: none;
  transition: color 160ms ease;
}
a:hover { color: var(--accent-2-deep); }

/* ============================================================
   Clases utilitarias de superficie
   ============================================================ */
.bg-onyx          { background: var(--bg-ink);            color: var(--fg-on-dark); }
.bg-onyx-deep     { background: var(--color-onyx-0);      color: var(--fg-on-dark); }
.bg-onyx-vignette { background: var(--gradient-onyx-vignette); color: var(--fg-default); }
.bg-navy          { background: var(--gradient-navy);     color: var(--fg-on-dark); }
.bg-ivory         { background: var(--color-ivory-0);     color: var(--fg-on-light); }
.bg-cream         { background: var(--color-ivory-1);     color: var(--fg-on-light); }
.bg-gold          { background: var(--accent);            color: #2c2206; }
.bg-red           { background: var(--signal);            color: #fff; }