/* ============================================================
   Inmobiliaria Doña Isidora — Tokens de diseño y base
   Paleta cálida y tradicional: verde campo, dorado cosecha,
   crema y carbón. Tipografía: Fraunces (display) + Inter (texto).
   ============================================================ */

:root {
  /* Verdes (campo / confianza) */
  --green-900: #1b2c20;
  --green-800: #244a2e;
  --green-700: #2f5d3a;   /* primario */
  --green-600: #3c7a4b;
  --green-400: #7aa886;
  --green-200: #cfe0d2;
  --green-50:  #eef3ec;

  /* Dorados (cosecha / acento) */
  --gold-700: #9c7727;
  --gold-600: #b78a32;
  --gold-500: #c9a24b;    /* acento */
  --gold-300: #e3cd8f;

  /* Terracota (secundario, uso puntual) */
  --terracotta: #b5653f;

  /* Neutros cálidos */
  --cream: #f7f4ec;       /* fondo general */
  --paper: #fffdf8;       /* tarjetas / superficies */
  --bone:  #efece1;
  --ink:   #23291f;       /* texto principal */
  --ink-soft: #545b4b;    /* texto secundario */
  --muted: #8a9080;       /* texto tenue */
  --line:  #e4e0d2;       /* bordes */
  --line-strong: #d4cfbe;

  /* Tipografía */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Radios */
  --radius-sm: 9px;
  --radius: 16px;
  --radius-lg: 26px;
  --radius-pill: 999px;

  /* Sombras (cálidas, suaves) */
  --shadow-sm: 0 1px 2px rgba(31, 51, 38, .06), 0 2px 6px rgba(31, 51, 38, .05);
  --shadow-md: 0 6px 18px rgba(31, 51, 38, .09), 0 2px 6px rgba(31, 51, 38, .06);
  --shadow-lg: 0 22px 50px rgba(31, 51, 38, .16), 0 8px 18px rgba(31, 51, 38, .08);

  /* Layout */
  --container: 1200px;
  --container-narrow: 880px;
  --nav-h: 76px;

  /* Movimiento */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 560;
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--green-900);
  margin: 0 0 .4em;
  font-optical-sizing: auto;
}

h1 { font-size: clamp(2.4rem, 5.2vw, 4.1rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }

p { margin: 0 0 1rem; }

a { color: var(--green-700); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--gold-600); }

img { max-width: 100%; display: block; }

ul { margin: 0; padding: 0; }

:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--gold-300); color: var(--green-900); }

/* Utilidades de layout */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2.2rem);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--cream { background: var(--cream); }
.section--paper { background: var(--paper); }
.section--bone { background: var(--bone); }
.section--dark {
  background: radial-gradient(120% 140% at 80% 0%, var(--green-800), var(--green-900));
  color: #eaefe6;
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }

/* Encabezado de sección */
.eyebrow {
  font-family: var(--font-sans);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin: 0 0 .9rem;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1.5px;
  background: var(--gold-500);
  display: inline-block;
}
.section--dark .eyebrow { color: var(--gold-300); }

.section-head { max-width: 720px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.lead { font-size: 1.12rem; color: var(--ink-soft); }
.section--dark .lead { color: #c7d3c4; }

/* Texto largo con párrafos */
.prose p { margin-bottom: 1.05rem; color: var(--ink-soft); }
.prose p:last-child { margin-bottom: 0; }