/* Tokens and primitives shared by every page: the landing, /en/, privacy, terms, 404 and the 3D preview.
   This file is the only place colors are written as hex; pages use the tokens. */
:root {
  color-scheme: light;
  --teal: #0e3a40;
  --teal-2: #0a2a2e;
  --cream: #fef3c7;
  --sand: #f5ead1;
  --warm: #d97757;
  --warm-strong: #a8441f;
  --ink: #1a1a1a;
  --ink-2: #57534e;
  --line: #e7e5e4;
  --white: #fff;
  --warm-deep: #8f3a1a;
  --danger: #b91c1c;
  --amber: #fbbf24;
  --stone: #78716c;
  /* Lot status on the 3D preview (legend swatches and the lots in the scene read the same tokens). */
  --lot-available: #f6f1e4;
  --lot-soon: #efe3c9;
  --lot-reserved: #e9b48f;
  --lot-sold: #c9c4b8;
  /* The 2D plan of a lot on the 3D preview. */
  --plan-paper: #f7f4ec;
  --plan-ink: #1f2d2f;
  --plan-muted: #4a5553;
  --plan-street: #dedbd2;
  --plan-lot: #edf2e2;
  --plan-edge: #8a8f86;
  --plan-hatch: #b8b0a0;
  --plan-path: #d3cfc4;
  --plan-terrace: #f0e4c4;
  --plan-patio: #d9ebc9;
  --plan-garden: #dcebcc;
  --plan-pool: #9fd3e6;
  --plan-pool-edge: #4a9bb5;
  --plan-tree: #9ccb86;
  --plan-trunk: #4f8a4b;
  --plan-open: #f3efe4;
  --plan-window: #5fa8c4;
  --plan-frame: #c9d1cd;
  --plan-breeze: #2f7f86;
  /* The 3D preview's scene (sky, light, ground, streets and the four house palettes); vecindario-preview/colors.js reads them. */
  --scene-house-street: #8f8f89;
  --scene-house-cover: #d9d4c7;
  --scene-house-post: #8a8378;
  --scene-house-pool: #5cb8d6;
  --scene-house-deck: #e6dfcf;
  --scene-house-trunk: #7a5a3a;
  --scene-house-drive: #b9b4a8;
  --scene-house-line: #0e3a40;
  --scene-house-sel: #9ed2cf;
  --scene-house-patio: #cfe3bd;
  --scene-styles-caribe-wall-1: #f7f1e3;
  --scene-styles-caribe-wall-2: #ffffff;
  --scene-styles-caribe-wall-3: #efe3c9;
  --scene-styles-caribe-wall-4: #dfe8dc;
  --scene-styles-caribe-roof-1: #b9603f;
  --scene-styles-caribe-roof-2: #9e4f33;
  --scene-styles-caribe-roof-3: #6f6a62;
  --scene-styles-caribe-accent-1: #2f7f86;
  --scene-styles-caribe-accent-2: #6b4f3a;
  --scene-styles-caribe-accent-3: #3f5f8a;
  --scene-styles-caribe-glass: #8db7c4;
  --scene-styles-minimal-wall-1: #ffffff;
  --scene-styles-minimal-wall-2: #f4f1ea;
  --scene-styles-minimal-wall-3: #e8e6e1;
  --scene-styles-minimal-roof-1: #d8d2c4;
  --scene-styles-minimal-roof-2: #cfc9bd;
  --scene-styles-minimal-accent-1: #c07a4a;
  --scene-styles-minimal-accent-2: #2f7f86;
  --scene-styles-minimal-accent-3: #b89b4a;
  --scene-styles-minimal-glass: #6f9fb0;
  --scene-styles-patio-wall-1: #f1e6d0;
  --scene-styles-patio-wall-2: #faf5e8;
  --scene-styles-patio-wall-3: #e9dcc2;
  --scene-styles-patio-roof-1: #a65a3c;
  --scene-styles-patio-roof-2: #8f4a30;
  --scene-styles-patio-roof-3: #b9603f;
  --scene-styles-patio-accent-1: #5c6b4a;
  --scene-styles-patio-accent-2: #7a5a3a;
  --scene-styles-patio-accent-3: #2f7f86;
  --scene-styles-patio-glass: #8db7c4;
  --scene-styles-dos-wall-1: #e9e4da;
  --scene-styles-dos-wall-2: #f5f2ec;
  --scene-styles-dos-wall-3: #d9d4c9;
  --scene-styles-dos-roof-1: #6b6f72;
  --scene-styles-dos-roof-2: #4f5457;
  --scene-styles-dos-accent-1: #b9603f;
  --scene-styles-dos-accent-2: #2f7f86;
  --scene-styles-dos-accent-3: #8a7a5a;
  --scene-styles-dos-glass: #7fa8b8;
  --scene-leaves-1: #4f8a4b;
  --scene-leaves-2: #5d9a4f;
  --scene-leaves-3: #3f7a3a;
  --scene-palm-trunk: #8a6a48;
  --scene-palm-leaf: #3f7a3a;
  --scene-cars-1: #d8d8d8;
  --scene-cars-2: #2b2b2b;
  --scene-cars-3: #8a2f2f;
  --scene-cars-4: #2f4f8a;
  --scene-cars-5: #f0f0f0;
  --scene-wheel: #222222;
  --scene-sky: #cfe0ea;
  --scene-sky-gradient-1: #6fa3cf;
  --scene-sky-gradient-2: #cfe0ea;
  --scene-sky-gradient-3: #f1e9d8;
  --scene-fog: #dfe6e3;
  --scene-sky-light: #dfeeff;
  --scene-ground-light: #8a9a6a;
  --scene-sun: #fff4e0;
  --scene-ground: #7f9a6a;
  --scene-lawn: #9fbd86;
  --scene-sea: #3f86ad;
  --scene-sand: #e8dcb5;
  --scene-river: #5f9bbd;
  --scene-highway: #6f6f6a;
  --scene-town-street: #a8a59c;
  --scene-lane-mark: #f2eee4;
  --scene-town-block: #d9d2c3;
  --scene-sidewalk: #d9d4c7;
  --scene-curb: #a8a398;
  --scene-lot-edge: #8a9a8c;
  --scene-pole: #6b6f72;
  --scene-lamp: #fff1c0;
  --scene-lamp-glow: #ffe9a0;
  --scene-transformer: #7a8a7a;
  --scene-hydrant: #c0392b;
  --scene-grate: #3a3a3a;
  --scene-tank: #dcdcd4;
  --scene-tank-roof: #b9603f;
  --scene-label: rgba(21, 40, 43, 0.85);
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: ui-monospace, monospace;
  /* The wordmark is Georgia in every brand asset (marketing/brand/lockup.py), so the nav and footer match the logo. */
  --font-wordmark: Georgia, "Times New Roman", serif;
  /* One type scale for every page; nothing is set smaller than --text-xs. */
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.25rem;
  --text-display-sm: clamp(1.5rem, 2.5vw, 1.75rem);
  --text-display-md: clamp(1.75rem, 3.5vw, 2.5rem);
  --text-display-lg: clamp(2rem, 4vw, 3rem);
  --text-display-xl: clamp(2.5rem, 6vw, 5.25rem);
  /* One spacing scale (quarter-rem steps) for every padding, margin and gap. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --tap: 2.75rem;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
}
.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); }
.brand { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap); font-family: var(--font-wordmark); font-weight: 400; font-size: var(--text-2xl); letter-spacing: 0.01em; color: var(--teal); line-height: 1; text-decoration: none; }
.brand img { width: 40px; height: 40px; border-radius: 9px; }
/* Header and footer bar of the secondary pages (privacy, terms, 404): the brand home and the few exits a reader needs. */
.page-head { padding: var(--space-2) 0; border-bottom: 1px solid color-mix(in srgb, var(--teal) 10%, transparent); }
.page-head .container, .page-foot .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.page-foot { padding: var(--space-4) 0 calc(var(--space-4) + env(safe-area-inset-bottom)); background: var(--teal); color: color-mix(in srgb, var(--cream) 75%, transparent); font-size: var(--text-xs); letter-spacing: 0.03em; }
.page-foot a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--cream); }
.page-foot .links { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }
/* A standalone text link (not inside a sentence) gets a 44 px tap height. */
.tap-link { display: inline-flex; align-items: center; min-height: var(--tap); }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap);
  padding: var(--space-2) var(--space-5);
  background: var(--teal);
  color: var(--cream);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.4;
  border-radius: 999px;
  border: 1px solid var(--teal);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.btn:hover { background: var(--teal-2); }
.btn-outline { background: transparent; color: var(--teal); }
.btn-outline:hover { background: color-mix(in srgb, var(--teal) 8%, transparent); color: var(--teal); }
.btn-outline[aria-pressed="true"] { background: var(--teal); color: var(--cream); }
.btn-warm { background: var(--warm-strong); border-color: var(--warm-strong); }
.btn-warm:hover { background: var(--warm-deep); border-color: var(--warm-deep); }
.btn-lg { padding: var(--space-3) var(--space-7); font-size: var(--text-base); }
.btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.btn-icon { padding: 0; width: var(--tap); }
.btn-ghost { background: color-mix(in srgb, var(--teal-2) 30%, transparent); border-color: color-mix(in srgb, var(--cream) 40%, transparent); color: var(--cream); }
.btn-ghost:hover { background: color-mix(in srgb, var(--teal-2) 50%, transparent); }
/* Text inputs and selects: 16 px so phones do not zoom, 44 px tall. */
.control { width: 100%; min-height: var(--tap); font: inherit; font-size: var(--text-base); padding: var(--space-2) var(--space-4); border: 1px solid var(--stone); border-radius: 10px; background: var(--cream); color: var(--ink); }
.control:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-color: var(--teal); }
.control[aria-invalid="true"] { border-color: var(--danger); }
.control::placeholder { color: var(--ink-2); opacity: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: var(--space-2) var(--space-4); background: var(--teal); color: var(--cream); border-radius: 8px; font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 1rem; }
main:focus { outline: none; }
a:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
/* Skeleton shimmer used by the live figures and the 3D preview while they load. */
@keyframes shimmer { to { background-position: -200% 0; } }
/* Pages in both languages: each block shows in the language html[lang] says. */
html[lang="en"] [data-lang="es"] { display: none !important; }
html[lang="es"] [data-lang="en"] { display: none !important; }
/* The two-button language switch of the pages outside the landing. */
.lang-switch { display: inline-flex; gap: var(--space-1); }
/* The bottom slot (js/offline.js): the consent question above the offline notice, never one over the other;
   the page is padded by the slot's height so the last content can still be scrolled into view. */
.bottom-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom); }
.bottom-dock:empty { display: none; }
body { padding-bottom: var(--dock-h, 0); }
/* Asks once before the Meta pixel loads (js/consent.js). */
.consent { order: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4); background: var(--teal); color: var(--cream); font-size: var(--text-sm); }
.consent p { max-width: 60ch; }
.consent a { color: var(--cream); font-weight: 600; }
.consent-actions { display: flex; gap: var(--space-2); }
/* Shown by js/offline.js while the browser is offline. */
.offline-bar { order: 2; padding: var(--space-3) var(--space-4); background: var(--ink); color: var(--white); font-size: var(--text-sm); font-weight: 600; text-align: center; }
/* Reading pages (privacy, terms) and the 404. */
.doc { max-width: 68ch; margin: 0 auto; padding: var(--space-10) var(--space-5) var(--space-16); }
.doc h1 { font-family: var(--font-display); font-weight: 400; color: var(--teal); font-size: var(--text-3xl); line-height: 1.15; margin: 0 0 var(--space-1); }
.doc h2 { font-size: var(--text-lg); color: var(--teal); margin: var(--space-8) 0 var(--space-2); }
.doc p, .doc ul { margin: 0 0 var(--space-4); }
.doc ul { padding-left: var(--space-5); }
.doc a { color: var(--teal); }
.doc .meta { color: var(--ink-2); font-size: var(--text-sm); margin-bottom: var(--space-8); }
.doc .eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.15em; text-transform: uppercase; color: var(--warm-strong); margin: 0 0 var(--space-4); }
.doc .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.doc .aside { color: var(--ink-2); font-size: var(--text-sm); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}