/**
 * Theme: Melissa Jiménez - Bienes Raices GT
 * Design System (replica fiel de tailwind.config.ts del sitio Next.js)
 *
 * Tokens en CSS custom properties para usar en tema, templates y widgets.
 */

:root {
  /* Colores (de tailwind.config.ts extend.colors) */
  --primary: #0D223F;
  --azul-naval: #0D223F;
  --primary-container: #0d223f;
  --on-primary: #ffffff;
  --on-primary-container: #778aac;
  --primary-fixed: #d6e3ff;
  --primary-fixed-dim: #b4c7ec;
  --on-primary-fixed: #051b38;
  --on-primary-fixed-variant: #344766;
  --inverse-primary: #b4c7ec;

  --secondary: #675d4b;
  --secondary-container: #eee1c9;
  --on-secondary: #ffffff;
  --on-secondary-container: #6d6350;
  --secondary-fixed: #eee1c9;
  --secondary-fixed-dim: #d2c5ae;
  --on-secondary-fixed: #211b0c;
  --on-secondary-fixed-variant: #4e4635;

  --tertiary: #090c0c;
  --tertiary-container: #202222;
  --on-tertiary: #ffffff;
  --on-tertiary-container: #888989;
  --tertiary-fixed: #e2e2e2;
  --tertiary-fixed-dim: #c6c6c7;
  --on-tertiary-fixed: #1a1c1c;
  --on-tertiary-fixed-variant: #454747;

  --background: #fbf9fc;
  --on-background: #1b1b1e;
  --surface: #fbf9fc;
  --on-surface: #1b1b1e;
  --surface-variant: #e4e2e5;
  --on-surface-variant: #44474d;
  --surface-dim: #dbd9dc;
  --surface-bright: #fbf9fc;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f5f3f6;
  --surface-container: #efedf0;
  --surface-container-high: #e9e7ea;
  --surface-container-highest: #e4e2e5;
  --outline: #74777e;
  --outline-variant: #c4c6ce;

  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #93000a;

  --inverse-surface: #303033;
  --inverse-on-surface: #f2f0f3;
  --surface-tint: #4c5f7f;

  /* Colores extra usados en el sitio */
  --warm-beige: #F5F1EA;
  --muted-gold: #A68966;

  /* Tipografía */
  --font-playfair: "Playfair Display", serif;
  --font-montserrat: "Montserrat", sans-serif;

  /* Radios */
  --radius-sm: 0.125rem;   /* rounded-DEFAULT */
  --radius-md: 0.25rem;    /* rounded-lg */
  --radius-lg: 0.5rem;     /* rounded-xl */
  --radius-xl: 0.75rem;    /* rounded-full (en este tema los pill usan 9999px) */

  /* Spacing */
  --margin-desktop: 64px;
  --margin-mobile: 20px;
  --gutter: 24px;
  --container-max: 1280px;
  --section-gap: 100px;
}

/* ---------- Fuentes ---------- */
body,
.font-montserrat {
  font-family: var(--font-montserrat), sans-serif;
}
.font-playfair,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-playfair), serif;
}

/* ---------- Tipografía escalas (de tailwind fontSize) ---------- */
.text-body-md { font-size: 16px; line-height: 1.6; font-weight: 400; }
.text-body-lg { font-size: 18px; line-height: 1.6; font-weight: 400; }
.text-label-md { font-size: 14px; line-height: 1.4; letter-spacing: 0.1em; font-weight: 600; text-transform: uppercase; }
.text-label-sm { font-size: 12px; line-height: 1.4; letter-spacing: 0.05em; font-weight: 500; }
.text-headline-md { font-size: 32px; line-height: 1.3; font-weight: 500; }
.text-headline-lg { font-size: 48px; line-height: 1.2; font-weight: 600; }
.text-headline-xl { font-size: 64px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 700; }
.text-headline-lg-mobile { font-size: 32px; line-height: 1.2; font-weight: 600; }

/* ---------- Utilidades ---------- */
.mj-container {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--margin-mobile);
  padding-right: var(--margin-mobile);
}
@media (min-width: 768px) {
  .mj-container { padding-left: var(--margin-desktop); padding-right: var(--margin-desktop); }
}

.mj-section-gap { padding-top: var(--section-gap); padding-bottom: var(--section-gap); }

.glassmorphism {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.card-shadow { box-shadow: 0 20px 40px rgba(13, 34, 63, 0.05); }
.text-shadow-subtle { text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }

.mj-img { max-width: 100%; height: auto; }

/* ---------- Reset básico ---------- */
.mj *,
.mj *::before,
.mj *::after {
  box-sizing: border-box;
}
.mj {
  line-height: 1.5;
  color: var(--on-background);
}
.mj a { text-decoration: none; }
.mj p { margin: 0; }

/* Material Symbols */
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}