/* Macias Bienes Raíces — esquema claro de marca: crema, gris carbón y dorado del logo.
   :root:root gana a styles.css sin importar el orden de carga. Las rampas van invertidas
   (100 = tono más oscuro) para que los pasos usados en las páginas sigan leyendo bien. */
:root:root {
  --color-bg: #fbfaf7;
  --color-surface: #ffffff;
  --color-text: #2f333d;
  --color-accent: #e9c445;
  --color-accent-2: #c9a227;
  --color-divider: color-mix(in srgb, #2f333d 14%, transparent);

  --color-neutral-100: #2f333d;
  --color-neutral-200: #3a3e48;
  --color-neutral-300: #575c68;
  --color-neutral-400: #6b7080;
  --color-neutral-500: #8a8f9b;
  --color-neutral-600: #a9adb7;
  --color-neutral-700: #d9d4c6;
  --color-neutral-800: #ebe7dc;
  --color-neutral-900: #f2efe7;

  --color-accent-100: #4a3c10;
  --color-accent-200: #7a6115;
  --color-accent-300: #86690f;
  --color-accent-400: #a8851d;
  --color-accent-500: #e9c445;
  --color-accent-600: #c9a227;
  --color-accent-700: #e9c445;
  --color-accent-800: #f6e7ae;
  --color-accent-900: #fbf4da;

  --color-accent-2-100: #4a3c10;
  --color-accent-2-200: #7a6115;
  --color-accent-2-300: #86690f;
  --color-accent-2-400: #a8851d;
  --color-accent-2-500: #e9c445;
  --color-accent-2-600: #c9a227;
  --color-accent-2-700: #e9c445;
  --color-accent-2-800: #f6e7ae;
  --color-accent-2-900: #fbf4da;

  --color-section: #f2efe7;
  --color-section-glow: #ebe7dc;
  --color-section-ghost: #d9d4c6;

  --shadow-sm: 0 0 0 1px #e7e3d8;
  --shadow-md: 0 0 0 1px #e7e3d8, 0 14px 30px rgba(47,51,61,0.08);
  --shadow-lg: 0 0 0 1px #d9d4c6, 0 18px 44px rgba(47,51,61,0.14);
}
html { background: var(--color-bg); scroll-behavior: smooth; }
a { color: var(--color-accent-300); }
a:hover { color: var(--color-accent-200); }
.lighten { mix-blend-mode: normal; }

/* Botón principal: carbón sólido, dorado al pasar el cursor (como en el sitio original). */
.btn-primary { background: var(--color-text); border-color: var(--color-text); color: #fbfaf7; }
.btn-primary:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-text); }
.btn-primary:active { background: var(--color-accent-600); border-color: var(--color-accent-600); color: var(--color-text); }
.btn-secondary { border-color: var(--color-text); color: var(--color-text); }
.btn-secondary:hover { background: var(--color-text); color: #fbfaf7; }
.btn-ghost { color: var(--color-text); }
.btn, .seg-opt { border-radius: 999px; }
.btn-icon { border-radius: 50%; }

.seg { border-radius: 999px; }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-text); box-shadow: none; }

.nav a[aria-current='page'] { color: var(--color-text); box-shadow: inset 0 -2px 0 var(--color-accent); }
.nav a:hover { color: var(--color-accent-300); }
.input:focus-visible { border-color: var(--color-accent-600); }