/* ==========================================================================
site.css — Ricardo Salazar, REALTOR® · design system
Contract: docs/DESIGN.md (§2 tokens, §3 component catalogue). Class names match it exactly.
Order: 0 tokens · 1 base · 2 utilities · 3 foundations · 4 chrome · 5 story & trust ·
6 property search · 7 listing detail · 8 calculator · 9 leads & people ·
10 layouts · 11 motion / print.
Rules: mobile-first, breakpoints 640 / 980 / 1200 only; components use semantic tokens;
components never set their own outer margin (parents own spacing).
========================================================================== */
/* ==========================================================================
0. TOKENS (DESIGN.md §2.1, verbatim — the dark selector list is extended, see 0.2)
========================================================================== */
:root{
color-scheme: light;
/* ---- Raw palette (never referenced inside components) ---- */
/* Navy & brass (2026-10-26 rebrand): private-bank feel; no orange anywhere. */
--ink-900:#0D1B2E; --ink-800:#15263F; --ink-700:#22385A; /* navy ink: text, dark sections */
--navy-50:#EAEFF6; --navy-100:#D6DFEC; --navy-700:#1B3358; --navy-800:#132845; /* brand navy: buttons, links */
--sand-100:#F1EEE7; --sand-200:#E4DFD4; --sand-300:#CEC6B6; /* warm stone */
--paper:#F8F7F3; --white:#FFFFFF; /* ivory */
--brass-50:#F4EEE3; --brass-300:#D4B884; --brass-500:#A98950; --brass-600:#7E612F; --brass-700:#6B5228; /* brass accent */
--steel-50:#E9EEF4; --steel-300:#8FA3BF; --steel-500:#4A6385; --steel-600:#3B5172; /* steel blue: icons, focus */
--stone-300:#A7AEB8; --stone-500:#5A6474; --stone-600:#7A8392;
--green-50:#E3F3EA; --green-300:#5FD39A; --green-600:#1E7A4C;
--amber-50:#FBF0D9; --amber-300:#E9B95A; --amber-700:#8A5A00;
--brick-50:#F8E4DF; --brick-300:#FF8A73; --brick-600:#A33A2A;
--wa-500:#25D366; --wa-600:#1EBE5A; /* WhatsApp */
/* ---- Semantic: light (default) ---- */
--bg:var(--paper); --bg-alt:var(--sand-100);
--surface:var(--white); --surface-2:#F3F1EC; --surface-inverse:var(--ink-900);
--text:var(--ink-900); --text-2:#3A4658; --muted:var(--stone-500);
--line:rgba(13,27,46,.12); --line-strong:rgba(13,27,46,.28); --line-input:var(--stone-600);
--accent:var(--brass-600); /* accent words in headings, rules, decorative icons */
--accent-strong:var(--navy-700);/* button fills, links (AA on paper, white and sand) */
--accent-hover:var(--navy-800);
--accent-ink:var(--white); /* foreground placed ON an accent fill */
--accent-soft:var(--navy-50);
--secondary:var(--steel-500); --secondary-ink:var(--white); --secondary-soft:var(--steel-50);
--highlight:var(--brass-300); /* dark surfaces only; never text on light */
--positive:var(--green-600); --positive-soft:var(--green-50);
--warning:var(--amber-700); --warning-soft:var(--amber-50);
--negative:var(--brick-600); --negative-soft:var(--brick-50);
--focus:var(--steel-600);
--wa:var(--wa-500); --wa-hover:var(--wa-600); --wa-ink:var(--ink-900);
--placeholder-bg:rgba(169,137,80,.14); --placeholder-line:var(--brass-600); --placeholder-text:var(--brass-700);
--scrim:linear-gradient(90deg,rgba(13,27,46,.78) 0%,rgba(13,27,46,.40) 48%,rgba(13,27,46,0) 75%);
--scrim-bottom:linear-gradient(to top,rgba(13,27,46,.72),rgba(13,27,46,0) 60%);
/* chart series (stacked cost bar, donut) */
--c-pi:var(--ink-900); --c-tax:var(--brass-500); --c-ins:var(--steel-500); --c-hoa:var(--stone-300); --c-ops:var(--steel-300);
/* ---- Type ---- */
--font-display:"Newsreader",Georgia,"Times New Roman",serif; /* headings */
--font-serif:"Newsreader",Georgia,"Times New Roman",serif; /* italic accent words, big stat numerals */
--font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--font-mono:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; /* labels/eyebrows: Inter caps, tabular (no monospace face) */
--fs-display:clamp(2.5rem, 1.6rem + 4.2vw, 5rem); /* 40 -> 80 home H1 */
--fs-h1:clamp(2.125rem, 1.5rem + 2.8vw, 3.75rem); /* 34 -> 60 */
--fs-h2:clamp(1.75rem, 1.3rem + 2vw, 3rem); /* 28 -> 48 */
--fs-h3:clamp(1.25rem, 1.1rem + .6vw, 1.5rem); /* 20 -> 24 */
--fs-h4:1.125rem; /* 18 */
--fs-lede:clamp(1.0625rem, 1rem + .35vw, 1.25rem); /* 17 -> 20 */
--fs-body:1rem; --fs-sm:.875rem; --fs-xs:.8125rem; --fs-micro:.75rem; /* 16 / 14 / 13 / 12 (12 is the floor) */
--fs-label:.75rem; /* eyebrow (Inter caps) */
--fs-stat-xl:clamp(4rem, 2rem + 9vw, 9rem); /* 64 -> 144 Newsreader */
--fs-stat-lg:clamp(2.5rem, 1.8rem + 3vw, 4rem); /* 40 -> 64 */
--fs-stat-md:clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); /* 28 -> 40 */
--fs-price:clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); /* 28 -> 40 Inter 700 tabular */
--fs-kpi:clamp(1.5rem, 1.3rem + .8vw, 1.75rem); /* 24 -> 28 */
--lh-tight:1.02; --lh-snug:1.15; --lh-heading:1.2; --lh-body:1.6;
--tracking-display:-.015em; --tracking-tight:-.01em; --tracking-label:.12em;
/* ---- Space (4px base) ---- */
--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;
--section-y:clamp(4rem, 2.75rem + 5.5vw, 7rem); /* 64 -> 112 */
--section-y-tight:clamp(3rem, 2.25rem + 3vw, 4.5rem); /* 48 -> 72 */
--gutter:16px; /* 24px >=640, 32px >=1200 */
/* ---- Shape & depth ---- */
--radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:24px; --radius-pill:999px;
--shadow-1:0 1px 2px rgba(13,27,46,.06);
--shadow-2:0 1px 2px rgba(13,27,46,.06),0 8px 24px rgba(13,27,46,.08);
--shadow-3:0 2px 6px rgba(13,27,46,.08),0 18px 48px rgba(13,27,46,.16); /* popovers, dialogs */
--shadow-up:0 -6px 18px rgba(13,27,46,.10); /* sticky bottom bars */
--ring:0 0 0 2px var(--bg),0 0 0 4px var(--focus);
/* ---- Layout ---- */
/* Content runs up to 1680 px (wide screens use the full width); text keeps its own ch-based measures. */
--container:1680px; --container-wide:1760px; --container-narrow:760px;
--measure:66ch; --measure-head:18ch;
--header-h:64px; /* 72px >=980 */ --tabs-h:48px; --filterbar-h:64px; --mobile-cta-h:72px; --rail-w:360px;
--control-h:48px; --control-h-sm:40px; --tap:44px;
--icon-sm:16px; --icon-md:20px; --icon-lg:24px;
--z-sticky:20; --z-fab:40; --z-mobile-cta:45; --z-header:50; --z-toast:60;
/* ---- Motion ---- */
--ease:cubic-bezier(.2,.7,.2,1); --dur-fast:150ms; --dur:250ms; --dur-slow:400ms;
}
@media (min-width:640px){ :root{ --gutter:24px; } }
@media (min-width:980px){ :root{ --header-h:72px; } }
@media (min-width:1200px){ :root{ --gutter:clamp(32px,3.2vw,64px); } }
@media (prefers-reduced-motion:reduce){ :root{ --dur-fast:0ms; --dur:0ms; --dur-slow:0ms; } }
/* ---- Dark and sand re-theming (any element can opt in) ----
DESIGN §2.1 list plus the components the catalogue describes as dark:
.hero--area (white copy on photo), .marquee (ink band), .spotlight, .agent-card--band,
.channel-card--list, .lightbox and the default .cta-band panel. */
.section--dark,.site-footer,.calc__results,.trust-grid,[data-theme="dark"],
.hero--area,.marquee,.spotlight,.agent-card--band,.channel-card--list,.lightbox,
.cta-band:not(.cta-band--sand) .cta-band__panel:not([data-theme]){
color-scheme: dark;
--bg:var(--ink-900); --bg-alt:var(--ink-800); --surface:var(--ink-800); --surface-2:#1C2F4B;
--text:#F3F1EC; --text-2:#CBD2DC; --muted:#9AA5B5;
--line:rgba(243,241,236,.14); --line-strong:rgba(243,241,236,.30); --line-input:rgba(243,241,236,.55);
--accent:var(--brass-300); --accent-strong:var(--brass-300); --accent-hover:#E3CFA4; --accent-ink:var(--ink-900); --accent-soft:rgba(212,184,132,.14);
--positive:var(--green-300); --positive-soft:rgba(95,211,154,.14);
--warning:var(--amber-300); --warning-soft:rgba(233,185,90,.14);
--negative:var(--brick-300); --negative-soft:rgba(255,138,115,.14);
--focus:var(--brass-300);
--placeholder-bg:rgba(212,184,132,.16); --placeholder-line:var(--brass-300); --placeholder-text:#EADBB9;
background:var(--bg); color:var(--text);
}
.section--sand,[data-theme="sand"]{ --bg:var(--sand-100); --surface:var(--paper); --surface-2:var(--white); background:var(--bg); }
/* ---- 0.2 Semantic extensions (design-system additions; please mirror in DESIGN.md §2.1) ----
A custom property that references another one is resolved where it is declared, so every
token built from a re-themed token (--ring, --em, --link…) is re-declared in each theme. */
:root{
--em:#977640; /* accent word inside headings: brass italic, AA for large text (3.9:1 paper, 3.6:1 sand) */
--em-small:var(--brass-700); /* the same accent word when it renders below 24px (AA for small text) */
--eyebrow:var(--brass-600); /* eyebrows, caps labels */
--link:var(--accent-strong); --link-hover:var(--accent-hover);
--text-inverse:var(--sand-100); /* text placed on --surface-inverse */
--icon-accent:var(--secondary); /* trust-bar / tile icons */
--seg-on-bg:var(--navy-50); --seg-on-line:var(--navy-700); --seg-on-text:var(--ink-900);
--hatch-a:var(--sand-200); --hatch-b:var(--sand-100); /* .placeholder--media hatch */
--placeholder-solid:var(--brass-50); /* placeholder fill over photos */
--map-land:var(--sand-300);
--header-bg:rgba(248,247,243,.9);
--brand-grad:linear-gradient(135deg,var(--ink-900),var(--navy-700));
--place-grad:linear-gradient(135deg,var(--navy-50),var(--sand-100));
}
.section--dark,.site-footer,.calc__results,.trust-grid,[data-theme="dark"],
.hero--area,.marquee,.spotlight,.agent-card--band,.channel-card--list,.lightbox,
.cta-band:not(.cta-band--sand) .cta-band__panel:not([data-theme]){
--ring:0 0 0 2px var(--bg),0 0 0 4px var(--focus);
--em:var(--highlight); --em-small:var(--highlight); --eyebrow:var(--highlight);
--link:var(--brass-300); --link-hover:var(--white);
--surface-inverse:var(--sand-100); --text-inverse:var(--ink-900);
--secondary-soft:rgba(74,99,133,.40);
--icon-accent:var(--highlight);
--seg-on-bg:var(--sand-100); --seg-on-line:var(--sand-100); --seg-on-text:var(--ink-900);
--hatch-a:var(--ink-800); --hatch-b:#1C2F4B;
--placeholder-solid:#2E3340;
--map-land:var(--ink-700);
--c-pi:var(--sand-100);
--place-grad:linear-gradient(135deg,#1E3354,var(--ink-800));
}
.section--sand,[data-theme="sand"]{ --ring:0 0 0 2px var(--bg),0 0 0 4px var(--focus); }
/* ==========================================================================
1. BASE
========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{
-webkit-text-size-adjust:100%; text-size-adjust:100%;
scroll-behavior:smooth;
scroll-padding-top:calc(var(--header-h) + var(--tabs-h) + 16px);
}
body{
margin:0; min-height:100vh; overflow-x:clip;
background:var(--bg); color:var(--text);
font:400 var(--fs-body)/var(--lh-body) var(--font-sans);
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,pre,fieldset{ margin:0; }
fieldset{ border:0; padding:0; min-width:0; }
legend{ padding:0; }
ul[class],ol[class]{ list-style:none; margin:0; padding:0; }
img,video,picture,canvas{ display:block; max-width:100%; height:auto; }
iframe{ display:block; max-width:100%; border:0; }
svg{ max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; letter-spacing:inherit; }
button{ cursor:pointer; }
table{ border-collapse:collapse; font-variant-numeric:tabular-nums; }
hr{ border:0; border-top:1px solid var(--line); margin:0; }
[hidden]{ display:none !important; }
::selection{ background:var(--accent-soft); color:var(--text); }
h1,h2,h3{
font-family:var(--font-display); font-weight:500; color:inherit;
letter-spacing:var(--tracking-display); text-wrap:balance; hyphens:manual;
}
h1{ font-size:var(--fs-h1); line-height:1.05; }
h2{ font-size:var(--fs-h2); line-height:1.1; }
h3{ font-size:var(--fs-h3); line-height:var(--lh-heading); letter-spacing:var(--tracking-tight); }
h4,h5,h6{ font-family:var(--font-sans); font-weight:600; font-size:var(--fs-h4); line-height:1.3; letter-spacing:0; }
:is(h1,h2,h3,h4) em{
font-family:var(--font-serif); font-style:italic; font-weight:400;
font-size:1em; line-height:1; letter-spacing:-.01em; color:var(--em);
}
/* --accent (brass #7E612F) on paper is AA for large text only (DESIGN §2.4: accent words >= 24px). The rendered size
decides, whatever class sized the heading (h3 and --fs-h3 h2s on phones, h4): sign(1em - 23.9px) is -1 below
24px, so the mix is 100% --em-small there and 0% from 24px up. 1em in `color` is the accent word's own size
(1.08x the heading) per spec, and the heading's size in Chrome, which resolves color before font-size: that
only moves 22-24px words to the darker, AA-safe colour. Browsers without sign(): by heading level. */
@supports (color:color-mix(in srgb, red calc(50% - sign(1em - 24px) * 50%), blue)){
:is(h1,h2,h3,h4) em{ color:color-mix(in srgb, var(--em-small) calc(50% - sign(1em - 23.9px) * 50%), var(--em)); }
}
@supports not (color:color-mix(in srgb, red calc(50% - sign(1em - 24px) * 50%), blue)){
:is(h2,h3,h4) em{ color:var(--em-small); }
@media (min-width:980px){ :is(h2,h3) em{ color:var(--em); } }
}
b,strong{ font-weight:600; }
small{ font-size:var(--fs-xs); }
cite{ font-style:normal; }
abbr[title]{ text-decoration:underline dotted; cursor:help; }
a{
color:var(--link); text-decoration-line:underline; text-decoration-thickness:1px;
text-underline-offset:.2em; transition:color var(--dur-fast) var(--ease);
}
a:hover{ color:var(--link-hover); }
a[href^="mailto:"],a[href^="tel:"]{ overflow-wrap:anywhere; }
code,kbd{ font-family:var(--font-mono); font-size:.9em; }
/* Focus: one visible ring everywhere (re-themes on dark through --ring). */
:focus{ outline:none; }
:focus-visible{ outline:2px solid transparent; outline-offset:2px; box-shadow:var(--ring); border-radius:var(--radius-xs); }
main:focus{ box-shadow:none; }
/* Icons: (sprite inlined by layout/main.php) */
.icon{
display:inline-block; flex:none; vertical-align:middle;
width:var(--icon-md); height:var(--icon-md);
fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
/* ==========================================================================
2. UTILITIES (the only ones allowed: §0.2)
========================================================================== */
.container{ width:100%; max-width:calc(var(--container) + 2*var(--gutter)); margin-inline:auto; padding-inline:var(--gutter); }
.container--wide{ max-width:calc(var(--container-wide) + 2*var(--gutter)); }
.container--narrow{ max-width:calc(var(--container-narrow) + 2*var(--gutter)); }
.flow > * + *{ margin-top:var(--flow,1em); }
.nowrap{ white-space:nowrap; }
.sr-only{
position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.skip-link{
position:absolute; left:var(--space-4); top:-200px; z-index:calc(var(--z-toast) + 10);
padding:12px 18px; border-radius:var(--radius-sm);
background:var(--surface-inverse); color:var(--text-inverse);
font-weight:600; text-decoration:none; box-shadow:var(--shadow-3);
}
.skip-link:focus{ top:var(--space-3); color:var(--text-inverse); }
/* ==========================================================================
3. FOUNDATIONS (§3.1)
========================================================================== */
/* ---- 3.1 Eyebrow ---- */
.eyebrow{
display:flex; align-items:center; gap:10px;
font:500 var(--fs-label)/1.2 var(--font-mono); letter-spacing:var(--tracking-label);
text-transform:uppercase; color:var(--eyebrow);
}
.eyebrow__dot{
flex:none; width:8px; height:8px; border-radius:50%; background:var(--accent);
box-shadow:0 0 0 4px var(--accent-soft);
}
/* ---- 3.2 Section + pacing ---- */
.section{ padding-block:var(--section-y); }
.section--tight{ padding-block:var(--section-y-tight); }
.section--flush{ padding-top:0; }
/* Two same-background sections in a row get a hairline (§1 pacing rule). */
.section:not(:is(.section--dark,.section--sand,.trust-grid,[data-theme])) + .section:not(:is(.section--dark,.section--sand,.trust-grid,[data-theme])),
.section--sand + .section--sand{ border-top:1px solid var(--line); }
/* ---- 3.3 Section head ---- */
.section-head{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-4); margin-bottom:var(--space-7); }
.section-head__main,.section-head > div:first-child{ display:grid; grid-template-columns:minmax(0,1fr); gap:14px; align-content:start; }
.section-head__title{ font-size:var(--fs-h2); line-height:1.08; max-width:22ch; }
.section-head__lede{ font-size:var(--fs-lede); line-height:1.5; color:var(--text-2); max-width:56ch; }
.section-head__link{ justify-self:start; }
.section-head--center{ justify-items:center; text-align:center; }
.section-head--center .section-head__title,.section-head--center .section-head__lede{ margin-inline:auto; }
.section-head--center .eyebrow{ justify-content:center; }
.section-head--center .section-head__link{ justify-self:center; }
@media (min-width:980px){
.section-head--split{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:var(--space-7); align-items:end; }
.section-head--split > :first-child{ grid-row:1 / span 2; align-self:end; }
.section-head--split .section-head__lede{ grid-column:2; }
.section-head--split .section-head__link{ grid-column:2; }
}
/* ---- 3.4 Buttons ---- */
.btn{
position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
min-height:var(--control-h); padding:8px 22px;
border:1px solid transparent; border-radius:var(--radius-pill);
font:600 15px/1.2 var(--font-sans); letter-spacing:0; text-align:center; text-decoration:none;
white-space:normal; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent;
background:transparent; color:var(--text);
transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);
}
.btn:focus-visible{ border-radius:var(--radius-pill); }
.btn:active{ transform:translateY(1px); }
.btn__icon{ width:var(--icon-md); height:var(--icon-md); }
.btn__icon--end{ transition:transform var(--dur-fast) var(--ease); }
.btn:hover .btn__icon--end{ transform:translateX(2px); }
.btn--primary{ background:var(--accent-strong); color:var(--accent-ink); }
.btn--primary:hover{ background:var(--accent-hover); color:var(--accent-ink); }
.btn--whatsapp{ background:var(--wa); color:var(--wa-ink); }
.btn--whatsapp:hover{ background:var(--wa-hover); color:var(--wa-ink); }
.btn--secondary{ background:var(--surface-inverse); color:var(--text-inverse); }
.btn--secondary:hover{ background:var(--accent-hover); color:var(--white); }
.btn--ghost{ border-color:var(--line-strong); color:var(--text); }
.btn--ghost:hover{ border-color:var(--text); background:var(--surface-2); color:var(--text); }
.btn--link{
min-height:var(--tap); padding:0; border:0; border-radius:var(--radius-xs);
color:var(--link); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em;
}
.btn--link:hover{ color:var(--link-hover); background:none; }
.btn--sm{ min-height:var(--control-h-sm); padding:6px 16px; font-size:14px; gap:8px; }
.btn--sm .btn__icon{ width:var(--icon-sm); height:var(--icon-sm); }
.btn--lg{ min-height:56px; padding:10px 28px; font-size:16px; }
.btn--block{ display:flex; width:100%; }
.btn--icon{ width:var(--control-h); min-width:var(--control-h); padding:0; }
.btn--icon.btn--sm{ width:var(--control-h-sm); min-width:var(--control-h-sm); }
.btn--link.btn--sm,.btn--link.btn--lg{ padding:0; }
.btn:disabled,.btn[aria-disabled="true"]{ opacity:.5; cursor:not-allowed; pointer-events:none; }
.btn.is-loading{ pointer-events:none; }
.btn.is-loading .btn__icon{ visibility:hidden; }
.btn.is-loading::after{
content:""; width:18px; height:18px; flex:none; border-radius:50%;
border:2px solid currentColor; border-right-color:transparent;
animation:rs-spin .7s linear infinite;
}
@keyframes rs-spin{ to{ transform:rotate(360deg); } }
/* Hero and CTA band actions stack full-width below 640 (§3.1 responsive). */
.hero__actions,.cta-band__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.hero__actions > .btn:not(.btn--link),.cta-band__actions > .btn:not(.btn--link){ width:100%; }
@media (min-width:640px){
.hero__actions > .btn:not(.btn--link),.cta-band__actions > .btn:not(.btn--link){ width:auto; }
}
/* ---- 3.5 Badges ---- */
.badge{
display:inline-flex; align-items:center; gap:6px; min-height:24px; max-width:100%;
padding:2px 10px; border-radius:var(--radius-pill);
font:600 var(--fs-micro)/1.2 var(--font-sans); letter-spacing:0; white-space:nowrap;
background:var(--surface-2); color:var(--text);
}
.badge .icon{ width:14px; height:14px; }
.badge--type{ background:var(--surface-inverse); color:var(--text-inverse); }
.badge--status{ background:rgba(255,255,255,.92); color:var(--ink-900); }
.badge--status::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--green-600); flex:none; }
.badge--status.is-negative::before{ background:var(--amber-700); }
.badge--new{ background:var(--secondary); color:var(--secondary-ink); }
.badge--price-drop{ background:var(--warning-soft); color:var(--warning); }
.badge--income{ background:var(--positive-soft); color:var(--positive); }
.badge--estimate{ background:transparent; border:1px dashed var(--line-strong); color:var(--muted); font-weight:500; }
.badge--verified{ background:var(--positive-soft); color:var(--positive); }
.badge--verified:not(:has(.icon))::before{
content:""; width:9px; height:5px; margin-top:-3px; flex:none;
border:solid currentColor; border-width:0 0 2px 2px; transform:rotate(-45deg);
}
.badge--strategy{ background:var(--highlight); color:var(--ink-900); }
.badge--demo{
background:var(--placeholder-solid); color:var(--placeholder-text);
border:1px dashed var(--placeholder-line); font-family:var(--font-mono); font-weight:500; letter-spacing:.02em;
}
/* ---- 3.6 Chips ---- */
.chip{
position:relative; display:inline-flex; align-items:center; gap:6px; flex:none;
min-height:32px; padding:0 12px; border:1px solid var(--line-strong); border-radius:var(--radius-pill);
font:600 13px/1.2 var(--font-sans); white-space:nowrap; text-decoration:none;
background:transparent; color:var(--text);
transition:border-color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease);
}
a.chip::after,button.chip::after{ content:""; position:absolute; inset:-6px -2px; } /* 44px tap area */
a.chip:hover,button.chip:hover{ border-color:var(--text); color:var(--text); }
.chip:focus-visible{ border-radius:var(--radius-pill); }
.chip--on{ background:var(--surface-inverse); border-color:var(--surface-inverse); color:var(--text-inverse); }
a.chip--on:hover{ background:var(--accent-hover); border-color:var(--accent-hover); color:var(--white); }
.chip__remove{ width:14px; height:14px; }
.chip--suggest{ border-style:solid; color:var(--text-2); }
.chip--static{ background:var(--surface-2); border-color:transparent; font-weight:500; color:var(--text); }
.chip-row{
display:flex; align-items:center; gap:8px; min-width:0;
overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; -webkit-overflow-scrolling:touch;
padding:6px 4px; scroll-padding-inline:4px;
}
.chip-row::-webkit-scrollbar{ display:none; }
.chip-row > *{ scroll-snap-align:start; flex:none; }
.chip-row__label{ font-size:var(--fs-xs); color:var(--muted); white-space:nowrap; }
.chip-row__clear{ min-height:32px; font-size:var(--fs-xs); }
@media (min-width:980px){ .chip-row{ flex-wrap:wrap; overflow:visible; } }
/* ---- 3.7 Segmented (radio-backed) ---- */
.segmented{ display:inline-flex; max-width:100%; overflow-x:auto; scrollbar-width:none; padding:2px; margin:-2px; }
.segmented::-webkit-scrollbar{ display:none; }
.segmented__option{
position:relative; display:inline-flex; align-items:center; justify-content:center; flex:1 0 auto;
min-height:var(--tap); padding:0 16px; margin-left:-1px;
border:1px solid var(--line-input); background:var(--surface); color:var(--text);
font:500 var(--fs-sm)/1.2 var(--font-sans); white-space:nowrap; cursor:pointer;
transition:background-color var(--dur-fast) var(--ease);
}
.segmented__option:first-of-type{ margin-left:0; border-radius:var(--radius-sm) 0 0 var(--radius-sm); }
.segmented__option:last-of-type{ border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.segmented__option:only-of-type{ border-radius:var(--radius-sm); }
.segmented__option:hover{ background:var(--surface-2); }
.segmented__input:checked + .segmented__option{
z-index:1; background:var(--seg-on-bg); border-color:var(--seg-on-line); color:var(--seg-on-text); font-weight:600;
}
.segmented__input:focus-visible + .segmented__option{ z-index:2; box-shadow:var(--ring); }
.segmented__input:disabled + .segmented__option{ opacity:.5; cursor:not-allowed; }
.segmented--sm .segmented__option{ min-height:32px; padding:0 12px; font-size:var(--fs-xs); }
.segmented--sm .segmented__option::after{ content:""; position:absolute; inset:-6px 0; } /* 44px tap area */
/* ---- 3.8 Switch ---- */
.switch{ position:relative; display:inline-flex; align-items:center; gap:12px; min-height:var(--tap); cursor:pointer; }
.switch__input{ position:absolute; left:0; top:50%; width:44px; height:26px; margin:-13px 0 0; opacity:0; cursor:pointer; }
.switch__track{
position:relative; flex:none; width:44px; height:26px; border-radius:var(--radius-pill);
background:var(--line-input); transition:background-color var(--dur) var(--ease);
}
.switch__track::after{
content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
background:var(--white); box-shadow:var(--shadow-1); transition:transform var(--dur) var(--ease);
}
.switch__input:checked + .switch__track{ background:var(--secondary); }
.switch__input:checked + .switch__track::after{ transform:translateX(18px); }
.switch__input:focus-visible + .switch__track{ box-shadow:var(--ring); }
.switch__input:disabled + .switch__track{ opacity:.5; }
.switch__label{ font-size:15px; line-height:1.4; }
/* ---- 3.9 Term + tip (definitions) ---- */
.term{
display:inline; padding:0; margin:0; border:0; background:none; font:inherit; color:inherit; cursor:help;
text-decoration:underline dotted 1px; text-underline-offset:3px;
}
.term[aria-expanded="true"]{ text-decoration-style:solid; }
.tip{ font-size:var(--fs-xs); line-height:1.5; color:var(--muted); }
html:not(.js) .tip::before{ content:" ("; }
html:not(.js) .tip::after{ content:")"; }
.js .tip{
position:fixed; z-index:var(--z-toast); width:min(280px,calc(100vw - 32px));
padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-sm);
background:var(--surface); color:var(--text); box-shadow:var(--shadow-3);
font-weight:400; text-align:left; text-transform:none; letter-spacing:0;
}
.js .tip:not(.is-open){ display:none; }
/* ---- 3.10 Placeholders (§6) ---- */
.placeholder{
display:inline; padding:0 .3em; border-radius:3px 3px 0 0;
font:500 .85em/inherit var(--font-mono); letter-spacing:0; text-transform:none;
background:var(--placeholder-bg); color:var(--placeholder-text);
border-bottom:1px dashed var(--placeholder-line);
overflow-wrap:anywhere; -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.placeholder--block{
display:block; padding:16px 20px; border:1.5px dashed var(--placeholder-line); border-radius:var(--radius-sm);
font:500 var(--fs-sm)/1.55 var(--font-mono); background:var(--placeholder-bg);
}
.placeholder--media{
display:grid; grid-template-columns:minmax(0,1fr); place-items:center; align-content:center; gap:10px; width:100%; height:auto;
aspect-ratio:var(--ratio,4/3); padding:16px; text-align:center; border-radius:inherit;
background:repeating-linear-gradient(135deg,var(--hatch-a) 0 14px,var(--hatch-b) 14px 28px);
border:1.5px dashed var(--placeholder-line); color:var(--placeholder-text);
font:500 var(--fs-micro)/1.5 var(--font-mono); letter-spacing:.06em; text-transform:uppercase;
}
.placeholder--place{ background:var(--place-grad); border:0; color:var(--secondary); }
.section--dark .placeholder--place,[data-theme="dark"] .placeholder--place{ color:var(--text-2); }
.placeholder__icon{ width:40px; height:40px; stroke-width:1.25; opacity:.8; }
.placeholder__label{ display:block; max-width:28ch; }
.placeholder--avatar{
display:inline-grid; place-items:center; flex:none; width:var(--avatar,56px); height:var(--avatar,56px);
aspect-ratio:1; padding:0; border:0; border-radius:50%;
background:var(--brand-grad); color:var(--sand-100);
font:600 calc(var(--avatar,56px) * .34)/1 var(--font-display); letter-spacing:-.02em; text-transform:none;
}
/* ---- 3.11 Notices ---- */
.notice{
display:flex; align-items:flex-start; gap:12px; padding:12px 16px;
border-radius:var(--radius-sm); border-left:3px solid var(--line-strong);
background:var(--surface-2); color:var(--text-2); font-size:var(--fs-xs); line-height:1.55;
}
.notice__icon{ flex:none; width:20px; height:20px; margin-top:-1px; color:var(--muted); }
.notice__text{ flex:1; min-width:0; }
.notice__text strong{ color:var(--text); }
.notice__text a{ color:var(--link); }
.notice__text > * + *{ margin-top:.5em; }
.notice--info{ border-left-color:var(--secondary); }
.notice--info .notice__icon{ color:var(--icon-accent); }
.notice--warning{ border-left-color:var(--warning); background:var(--warning-soft); }
.notice--warning .notice__icon,.notice--fraud .notice__icon{ color:var(--warning); }
.notice--fraud{ border-left-color:var(--warning); }
.notice--mls,.notice--disclaimer{
background:none; border-left:0; border-top:1px solid var(--line); border-radius:0;
padding:16px 0 0; color:var(--muted);
}
.notice--disclaimer{ font-size:var(--fs-micro); }
.notice--demo{ background:var(--placeholder-bg); border-left-color:var(--placeholder-line); color:var(--placeholder-text); }
.notice--demo .notice__icon{ color:var(--placeholder-line); }
.notice--demo .notice__text strong{ color:inherit; }
.notice--lang{
align-items:center; justify-content:center; flex-wrap:wrap; gap:4px 12px;
border-radius:0; border-left:0; border-bottom:1px solid var(--line);
padding:10px var(--gutter); background:var(--secondary-soft); color:var(--text); font-size:var(--fs-sm);
}
.notice--lang .notice__text{ flex:0 1 auto; text-align:center; }
.notice--lang a{ font-weight:600; white-space:nowrap; }
.notice__dismiss{
display:inline-grid; place-items:center; flex:none; width:var(--tap); height:var(--tap); margin:-10px -8px -10px 0;
border:0; border-radius:50%; background:transparent; color:var(--text);
}
.notice__dismiss:hover{ background:rgba(13,27,46,.08); }
/* Launch-blocker counter (APP_ENV=local only, §8). */
.notice--blockers{
position:fixed; left:12px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:var(--z-toast);
display:block; max-width:min(340px,calc(100vw - 96px)); max-height:60vh; overflow:auto;
padding:10px 14px; box-shadow:var(--shadow-3); font-size:var(--fs-micro);
}
.notice--blockers summary{ cursor:pointer; font-weight:600; color:var(--text); }
.notice--blockers ul{ margin:8px 0 0; padding-left:1.1em; }
body:has(.mobile-cta) .notice--blockers{ bottom:calc(var(--mobile-cta-h) + 16px + env(safe-area-inset-bottom)); }
/* ==========================================================================
4. GLOBAL CHROME (§3.2)
========================================================================== */
/* ---- 4.1 Header ---- */
.site-header{
position:sticky; top:0; z-index:var(--z-header);
background:var(--header-bg); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
border-bottom:1px solid var(--line); transition:box-shadow var(--dur) var(--ease);
}
.site-header.is-scrolled{ box-shadow:var(--shadow-1); }
.site-header__inner{ display:flex; align-items:center; gap:12px; min-height:var(--header-h); }
.site-header__brand{
display:flex; align-items:center; gap:10px; min-width:0; flex:0 1 auto; margin-right:auto;
color:var(--text); text-decoration:none; border-radius:var(--radius-sm);
}
.site-header__brand:hover{ color:var(--text); }
.site-header__mark{
display:grid; grid-template-columns:minmax(0,1fr); place-items:center; flex:none; width:40px; height:40px; border-radius:var(--radius-md);
background:var(--surface-inverse); color:var(--text-inverse);
font:600 15px/1 var(--font-display); letter-spacing:-.02em;
}
/* Ricardo's face crop in place of the monogram (round, brass ring). */
.site-header__avatar{
display:block; flex:none; width:44px; height:44px; border-radius:50%; object-fit:cover;
box-shadow:0 0 0 2px var(--bg, #fff), 0 0 0 3px var(--accent);
}
.site-header__brand > span:last-child{ display:block; min-width:0; }
.site-header__name{ display:block; font:600 18px/1.1 var(--font-display); letter-spacing:-.005em; white-space:nowrap; }
/* TREC: the brokerage line is never hidden and stays >= half the name size (§3.2, §8.4). */
.site-header__brokerage{
display:block; margin-top:3px; font:500 12px/1.3 var(--font-mono); letter-spacing:.03em; color:var(--text-2);
overflow-wrap:anywhere;
}
/* Brokerage logo (official RCR artwork): beside the personal lockup, separated by a hairline; clear space >= the logo's "R" height. */
.site-header__broker{ display:none; flex:none; align-items:center; padding-left:18px; border-left:1px solid var(--line); }
.site-header__broker img{ display:block; width:auto; height:46px; }
@media (min-width:640px){ .site-header__brokerage{ white-space:nowrap; } }
/* Shown only where the row has room for lockup + logo + nav/actions in both languages (ES nav is longer):
980-1199 (burger layout) and >= 1360 (inline nav, header widened to --container-wide). The text brokerage line
in the lockup is always visible, so TREC's broker-name rule never depends on the logo. */
@media (min-width:980px) and (max-width:1199px), (min-width:1360px){
.site-header__broker{ display:flex; margin-right:auto; }
.site-header__brand:has(+ .site-header__broker){ flex:none; margin-right:0; }
}
@media (min-width:1360px){ .site-header__inner{ max-width:var(--container-wide); } }
.site-footer__broker-logo{ display:block; width:auto; height:64px; max-width:100%; margin-top:var(--space-5); }
.site-header__nav{ display:none; }
.site-header__list{ display:flex; flex-direction:column; }
.site-header__link{
display:flex; align-items:center; min-height:56px; padding:0 2px;
border-bottom:1px solid var(--line); color:var(--text); text-decoration:none;
font:500 18px/1.2 var(--font-sans);
}
.site-header__link:hover{ color:var(--link); }
.site-header__link[aria-current]{
text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:2px; text-underline-offset:6px;
}
.site-header__actions{ display:flex; align-items:center; gap:8px; flex:none; }
.site-header__actions > .lang-switch{ display:none; }
.site-header__cta{ display:none; }
.site-header__panel-actions{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px; padding-top:var(--space-5); }
.site-header__panel-actions > .lang-switch{ justify-self:start; }
.site-header__burger{
position:relative; display:none; place-items:center; flex:none; width:var(--tap); height:var(--tap);
padding:0; border:1px solid var(--line-strong); border-radius:var(--radius-md); background:transparent; color:var(--text);
}
.site-header__burger-bar{
position:absolute; left:12px; width:18px; height:2px; border-radius:2px; background:currentColor;
transition:transform var(--dur) var(--ease),opacity var(--dur-fast) var(--ease);
}
.site-header__burger-bar:nth-child(1){ top:15px; }
.site-header__burger-bar:nth-child(2){ top:20px; }
.site-header__burger-bar:nth-child(3){ top:25px; }
.site-header__burger[aria-expanded="true"] .site-header__burger-bar:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.site-header__burger[aria-expanded="true"] .site-header__burger-bar:nth-child(2){ opacity:0; }
.site-header__burger[aria-expanded="true"] .site-header__burger-bar:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }
/* With JS (< 1200): the nav is a panel under the header, toggled by the burger. */
.js .site-header__burger{ display:grid; grid-template-columns:minmax(0,1fr); }
.js .site-header__nav{
position:absolute; top:100%; left:0; right:0;
height:calc(100vh - var(--header-h)); height:calc(100dvh - var(--header-h));
overflow-y:auto; overscroll-behavior:contain;
padding:8px var(--gutter) calc(32px + env(safe-area-inset-bottom));
background:var(--bg); border-top:1px solid var(--line);
}
.js .site-header.is-open .site-header__nav{ display:block; }
.js .site-header__nav .site-header__list,.js .site-header__panel-actions{ max-width:var(--container-narrow); margin-inline:auto; }
/* Without JS (< 1200): the nav is a scrollable row under the brand. */
html:not(.js) .site-header__inner{ flex-wrap:wrap; }
html:not(.js) .site-header__actions > .lang-switch{ display:inline-flex; }
html:not(.js) .site-header__nav{ display:block; order:5; width:100%; overflow-x:auto; scrollbar-width:none; }
html:not(.js) .site-header__list{ flex-direction:row; gap:20px; }
html:not(.js) .site-header__link{ min-height:var(--tap); border:0; font-size:15px; white-space:nowrap; }
html:not(.js) .site-header__panel-actions{ display:none; }
@media (min-width:640px){
.site-header__actions > .lang-switch{ display:inline-flex; }
.site-header__cta{ display:inline-flex; }
.site-header__panel-actions .lang-switch{ display:none; }
}
@media (min-width:1200px){
.site-header__inner{ gap:20px; }
.site-header__brand{ margin-right:0; }
.js .site-header__burger,.site-header__burger{ display:none; }
.site-header__nav,.js .site-header__nav,html:not(.js) .site-header__nav{
position:static; display:block; order:0; width:auto; height:auto; margin-inline:auto;
padding:0; overflow:visible; background:none; border:0;
}
.site-header__list,html:not(.js) .site-header__list{ flex-direction:row; align-items:center; gap:22px; }
.site-header__link,html:not(.js) .site-header__link{ min-height:var(--tap); padding:0; border:0; font-size:15px; white-space:nowrap; }
.site-header__panel-actions,.js .site-header__panel-actions{ display:none; }
}
/* ---- 4.2 Language switch (ES always first) ---- */
.lang-switch{
display:inline-flex; align-items:center; gap:2px; padding:2px;
border:1px solid var(--line-strong); border-radius:var(--radius-pill);
}
.lang-switch__option{
position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;
min-width:40px; height:32px; padding:0 10px; border-radius:var(--radius-pill);
font:500 var(--fs-micro)/1 var(--font-mono); letter-spacing:.08em;
color:var(--muted); text-decoration:none;
}
.lang-switch__option::after{ content:""; position:absolute; inset:-6px -1px; } /* 44px tap area */
.lang-switch__option:hover{ color:var(--text); }
.lang-switch__option:focus-visible{ border-radius:var(--radius-pill); }
.lang-switch__option[aria-current]{ background:var(--surface-inverse); color:var(--text-inverse); }
.lang-switch--footer{ flex-wrap:wrap; justify-self:start; gap:4px; padding:0; border:0; border-radius:0; }
.lang-switch--footer .lang-switch__option{
height:36px; padding:0 12px; border:1px solid var(--line-strong); border-radius:var(--radius-pill);
font:500 var(--fs-sm)/1 var(--font-sans); letter-spacing:0; color:var(--text-2);
}
.lang-switch--footer .lang-switch__option[aria-current]{ border-color:transparent; color:var(--text-inverse); }
.lang-switch--footer .lang-switch__option::after{ inset:-4px -1px; }
.lang-switch__globe{ width:var(--icon-sm); height:var(--icon-sm); margin-right:4px; color:var(--muted); }
/* ---- 4.3 Breadcrumb ---- */
.breadcrumb{ padding-top:var(--space-5); font-size:var(--fs-xs); color:var(--muted); }
.breadcrumb__list{
display:flex; align-items:center; flex-wrap:nowrap; white-space:nowrap;
overflow-x:auto; scrollbar-width:none; padding-block:4px;
}
.breadcrumb__list::-webkit-scrollbar{ display:none; }
.breadcrumb__item{ display:flex; align-items:center; flex:none; }
.breadcrumb__item + .breadcrumb__item::before{ content:"/"; padding-inline:8px; color:var(--line-strong); }
.breadcrumb__item a{ color:var(--muted); text-decoration:none; }
.breadcrumb__item a:hover{ color:var(--text); text-decoration:underline; }
.breadcrumb__item[aria-current]{ color:var(--text); max-width:32ch; overflow:hidden; text-overflow:ellipsis; display:block; }
.breadcrumb + .hero--page{ padding-top:var(--space-6); }
@media (min-width:640px){
.breadcrumb__list{ flex-wrap:wrap; white-space:normal; overflow:visible; }
.breadcrumb__item[aria-current]{ max-width:none; }
}
/* ---- 4.4 Footer (dark theme) ---- */
.site-footer{ padding:72px 0 32px; font-size:var(--fs-sm); }
.site-footer__grid{ display:grid; gap:8px 40px; grid-template-columns:minmax(0,1fr); }
.site-footer__brand{ display:grid; grid-template-columns:minmax(0,1fr); gap:18px; align-content:start; padding-bottom:var(--space-6); }
.site-footer__lockup{ display:flex; align-items:center; gap:12px; color:var(--text); text-decoration:none; }
.site-footer__lockup:hover{ color:var(--text); }
.site-footer__lockup .site-header__mark{ width:44px; height:44px; background:var(--accent-strong); color:var(--white); }
.site-footer__avatar{ width:52px; height:52px; }
.site-footer__tagline{ color:var(--text-2); max-width:40ch; line-height:1.55; }
.site-footer__contact{ display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
.site-footer__contact li{ display:grid; grid-template-columns:20px minmax(0,1fr); gap:10px; align-items:start; }
.site-footer__contact .icon{ width:18px; height:18px; margin-top:2px; color:var(--muted); }
.site-footer__contact a{ color:var(--text); text-decoration:none; }
.site-footer__contact a:hover{ text-decoration:underline; color:var(--link-hover); }
.site-footer__social{ display:flex; flex-wrap:wrap; gap:8px; }
.site-footer__social a{
display:grid; grid-template-columns:minmax(0,1fr); place-items:center; width:var(--tap); height:var(--tap); border-radius:50%;
border:1px solid var(--line-strong); color:var(--text);
}
.site-footer__social a:hover{ border-color:var(--text); color:var(--text); }
.site-footer__col{ border-top:1px solid var(--line); }
.site-footer__summary{
display:flex; align-items:center; justify-content:space-between; min-height:52px; cursor:pointer; list-style:none;
}
.site-footer__summary::-webkit-details-marker{ display:none; }
.site-footer__summary::after{
content:""; width:8px; height:8px; margin-right:6px; border:solid var(--muted); border-width:0 1.5px 1.5px 0;
transform:rotate(45deg) translate(-2px,-2px); transition:transform var(--dur) var(--ease);
}
.site-footer__details[open] > .site-footer__summary::after{ transform:rotate(-135deg) translate(-2px,-2px); }
.site-footer__heading{
font:500 11px/1.2 var(--font-mono); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--muted);
}
.site-footer__links{ display:grid; grid-template-columns:minmax(0,1fr); gap:4px; padding-bottom:16px; }
.site-footer__links a{
display:inline-flex; align-items:center; min-height:36px; color:var(--text-2); text-decoration:none; font-size:var(--fs-sm);
}
.site-footer__links a:hover{ color:var(--text); text-decoration:underline; }
.site-footer__legal{
display:grid; grid-template-columns:minmax(0,1fr); gap:20px; margin-top:var(--space-7); padding-top:var(--space-6); border-top:1px solid var(--line);
}
.site-footer__trec{ font-size:var(--fs-sm); line-height:1.7; color:var(--text-2); } /* TREC links >= 14px, always visible */
.site-footer__trec a{ color:var(--text); }
.site-footer__trec a:hover{ color:var(--link); }
.site-footer__trec-sep{ padding-inline:6px; color:var(--muted); }
.site-footer__gloss{ color:var(--muted); }
.site-footer__badges{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; color:var(--text-2); font-size:var(--fs-xs); }
.site-footer__badge{ display:inline-flex; align-items:center; gap:10px; }
.site-footer__eho{ width:32px; height:32px; flex:none; }
.site-footer__realtor{ font:700 15px/1 var(--font-sans); letter-spacing:.06em; color:var(--text); }
.site-footer__disclaimer{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px; font-size:var(--fs-micro); line-height:1.6; color:var(--muted); max-width:110ch; }
.site-footer__bottom{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; }
@media (min-width:640px){
.site-footer__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.site-footer__brand{ grid-column:1 / -1; }
.site-footer__col{ border-top:0; }
.site-footer__summary{ cursor:default; min-height:0; padding-bottom:14px; pointer-events:none; }
.site-footer__summary::after{ display:none; }
}
@media (min-width:980px){
.site-footer__grid{ grid-template-columns:1.4fr repeat(3,minmax(0,1fr)); }
.site-footer__brand{ grid-column:auto; padding-bottom:0; }
}
/* ---- 4.5 WhatsApp FAB ---- */
.whatsapp-fab{
position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:var(--z-fab);
display:grid; grid-template-columns:minmax(0,1fr); place-items:center; width:56px; height:56px; border-radius:50%;
background:var(--wa); color:var(--wa-ink); box-shadow:var(--shadow-3); text-decoration:none;
transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur) var(--ease),background-color var(--dur-fast);
}
.whatsapp-fab:hover{ background:var(--wa-hover); color:var(--wa-ink); }
.whatsapp-fab:focus-visible{ border-radius:50%; }
.whatsapp-fab .icon{ width:28px; height:28px; }
.js .whatsapp-fab:not(.is-visible){ opacity:0; visibility:hidden; transform:translateY(8px); }
body:has(.mobile-cta) .whatsapp-fab,body:has(dialog[open]) .whatsapp-fab{ display:none; }
/* ---- 4.6 Marquee (ink band, decorative) ---- */
.marquee{ overflow:hidden; padding-block:18px; border-block:1px solid var(--line); }
.marquee__track{
display:flex; width:max-content; animation:rs-marquee 40s linear infinite;
font:500 var(--fs-sm)/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;
}
.marquee__item,.marquee__sep{ padding-inline:24px; }
.marquee__sep{ color:var(--highlight); }
.marquee:hover .marquee__track,.marquee.is-paused .marquee__track{ animation-play-state:paused; }
@keyframes rs-marquee{ to{ transform:translateX(-50%); } }
/* ==========================================================================
5. STORY, PROOF AND TRUST (§3.3)
========================================================================== */
/* ---- 5.1 Hero ---- */
.hero{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-7); padding-block:var(--section-y-tight) var(--section-y); }
.hero__content{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-5); align-content:start; min-width:0; }
.hero__content > .eyebrow + .hero__title{ margin-top:-4px; }
.hero__title{ font-size:var(--fs-h1); line-height:1.05; max-width:22ch; }
.hero__lede{ font-size:var(--fs-lede); line-height:1.55; color:var(--text-2); max-width:60ch; }
.hero__media{ position:relative; margin-inline:auto; }
.hero__media > img,.hero__media > picture img,.hero__media > .placeholder{
width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius-xl);
}
/* Hero facts: below 640 one row per fact (figure | text over source), so three facts never squeeze into ~110px
columns that hyphenate every other word; from 640 side by side with hairline separators. No auto-hyphenation. */
.hero__facts{
display:grid; grid-template-columns:max-content minmax(0,1fr); column-gap:16px;
margin-top:var(--space-4); border-top:1px solid var(--line);
}
.hero__fact{
display:grid; grid-column:1 / -1; grid-template-columns:subgrid; align-content:start; gap:4px 16px; padding:12px 0;
font-size:var(--fs-xs); color:var(--text-2); line-height:1.4; hyphens:manual; overflow-wrap:break-word;
}
.hero__fact + .hero__fact{ border-top:1px solid var(--line); }
.hero__fact b{ grid-row:1 / span 2; }
.hero__fact cite{ grid-column:2; }
@supports not (grid-template-columns:subgrid){ .hero__fact{ grid-template-columns:6.5rem minmax(0,1fr); } }
@media (min-width:640px){
.hero__facts{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); column-gap:0; }
.hero__fact{ grid-column:auto; grid-template-columns:minmax(0,1fr); gap:4px; padding:16px 16px 0 0; font-size:var(--fs-sm); }
.hero__fact + .hero__fact{ padding-left:16px; border-top:0; border-left:1px solid var(--line); }
.hero__fact b{ grid-row:auto; }
.hero__fact cite{ grid-column:auto; }
}
.hero__fact b{ display:block; font:400 var(--fs-stat-md)/.95 var(--font-serif); letter-spacing:-.02em; color:var(--text); font-variant-numeric:lining-nums; }
.hero__fact cite{ display:block; font:500 var(--fs-micro)/1.4 var(--font-mono); color:var(--muted); }
.hero__fact cite a{ color:inherit; }
.hero__card{
display:grid; grid-template-columns:minmax(0,1fr); gap:16px; align-content:start; padding:var(--space-6); border-radius:var(--radius-lg);
background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-2);
}
/* home */
.hero--home .hero__title{ font-size:var(--fs-display); line-height:var(--lh-tight); max-width:var(--measure-head); }
@media (min-width:640px){
.hero__media > img,.hero__media > picture img,.hero__media > .placeholder{ aspect-ratio:4/3; }
}
@media (min-width:980px){
.hero--home .hero__media > img,.hero--home .hero__media > picture img,.hero--home .hero__media > .placeholder{ aspect-ratio:16/7; }
.hero--home .hero__facts{
position:absolute; left:var(--gutter); right:var(--gutter); bottom:0; margin:0; border:0;
grid-template-columns:repeat(3,minmax(0,220px)); gap:0;
padding:96px 32px 28px; border-radius:0 0 var(--radius-xl) var(--radius-xl);
background:var(--scrim-bottom); color:var(--white);
}
.hero--home .hero__fact{ color:rgba(255,255,255,.88); padding-top:0; }
.hero--home .hero__fact + .hero__fact{ border-left-color:rgba(255,255,255,.3); }
.hero--home .hero__fact b{ color:var(--white); }
.hero--home .hero__fact cite{ color:rgba(255,255,255,.72); }
}
/* split (invest hub, guide) */
.hero--split > .container{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-7); align-items:center; }
.hero--split .hero__media{ width:100%; }
@media (min-width:980px){
.hero--split > .container{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:var(--space-8); }
}
/* area: full-bleed photo, white copy on --scrim */
.hero--area{
position:relative; isolation:isolate; min-height:min(88svh,760px); align-content:end;
padding-block:var(--section-y) var(--space-7); color:var(--white);
--text:var(--white); --text-2:rgba(255,255,255,.86);
}
.hero--area .hero__media{ position:absolute; inset:0; z-index:-2; margin:0; max-width:none; padding:0; }
.hero--area .hero__media > img,.hero--area .hero__media > picture img,.hero--area .hero__media > .placeholder{
width:100%; height:100%; aspect-ratio:auto; border-radius:0; object-fit:cover;
}
.hero--area::after{ content:""; position:absolute; inset:0; z-index:-1; background:var(--scrim-bottom); }
.hero--area .hero__title{ font-size:var(--fs-display); line-height:var(--lh-tight); max-width:16ch; }
.hero--area .hero__facts{ border-top-color:rgba(255,255,255,.3); }
.hero--area .hero__fact + .hero__fact{ border-color:rgba(255,255,255,.3); }
.hero--area .hero__fact b{ color:var(--white); }
.hero--area .hero__fact cite{ color:rgba(255,255,255,.72); }
@media (min-width:980px){
.hero--area{ align-content:center; }
.hero--area::after{ background:var(--scrim); }
/* With a photo, the facts rail sits on the right: keep that side dark too so white text stays readable. */
.hero--area:has(.hero__media > img)::after{
background:linear-gradient(90deg,rgba(13,27,46,.82) 0%,rgba(13,27,46,.52) 48%,rgba(13,27,46,.58) 70%,rgba(13,27,46,.80) 100%);
}
.hero--area .hero__content{ max-width:640px; }
.hero--area .hero__facts{
position:absolute; right:6vw; top:50%; transform:translateY(-50%);
grid-template-columns:minmax(0,1fr); grid-auto-flow:row; gap:16px; max-width:260px; margin:0; padding-left:20px;
border-top:0; border-left:1px solid rgba(255,255,255,.4);
}
.hero--area .hero__fact,.hero--area .hero__fact + .hero__fact{ padding:0; border:0; font-size:var(--fs-sm); }
}
/* page (search, collections, about, contact, calculator, 404) */
.hero--page{ padding-block:var(--section-y-tight) var(--space-6); gap:var(--space-5); }
.hero--page .hero__title{ max-width:22ch; }
/* ---- 5.2 Trust bar ---- */
.trust-bar{
display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-4) var(--space-6);
padding-block:var(--space-5); border-block:1px solid var(--line); font-size:var(--fs-sm); color:var(--text-2);
}
.trust-bar__item{ display:flex; align-items:flex-start; gap:10px; min-width:0; line-height:1.5; }
.trust-bar__icon{ width:var(--icon-md); height:var(--icon-md); margin-top:1px; color:var(--icon-accent); }
.trust-bar--inline{ display:flex; flex-wrap:wrap; gap:10px 20px; padding:0; border:0; }
.trust-bar--inline .trust-bar__item{ align-items:center; }
.trust-bar--inline .trust-bar__icon{ width:var(--icon-sm); height:var(--icon-sm); margin:0; }
@media (min-width:640px){ .trust-bar:not(.trust-bar--inline){ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:980px){ .trust-bar:not(.trust-bar--inline){ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); } }
/* ---- 5.3 Stats ---- */
.stat-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-5); }
.stat{ display:flex; flex-direction:column; gap:var(--space-2); min-width:0; }
.stat__label{
font:500 var(--fs-label)/1.3 var(--font-mono); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--eyebrow);
}
.stat__value{
font-family:var(--font-serif); font-weight:400; font-size:var(--fs-stat-md); line-height:.9; letter-spacing:-.02em;
font-variant-numeric:lining-nums; color:var(--text); overflow-wrap:anywhere;
}
.stat__unit{ margin-left:.12em; font-size:.4em; letter-spacing:0; }
/* No automatic hyphenation in stats: narrow columns produced "be-came", "in-come", "te-rreno". Words wrap whole;
only a word longer than the column breaks. */
.stat__caption{ font-size:var(--fs-sm); line-height:1.5; color:var(--text-2); hyphens:manual; overflow-wrap:break-word; }
/* second line under the label: the context sentence of a sourced figure (home strip, invest hero) */
.stat__caption--note{ font-size:var(--fs-xs); color:var(--muted); }
.stat__source{ font:500 var(--fs-micro)/1.45 var(--font-mono); color:var(--muted); }
.stat__source a{ color:inherit; }
.stat__source a:hover{ color:var(--text); }
/* hero: intro left (5fr), hero stat + 2x2 right (7fr) */
.stat-grid--hero{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-6) var(--space-5); }
.stat-grid--hero > .stat-grid__intro,.stat-grid--hero > .stat--hero{ grid-column:1 / -1; }
.stat-grid__intro{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-5); align-content:start; }
.stat--hero .stat__value{ font-size:var(--fs-stat-xl); }
.stat-grid--hero > .stat:not(.stat--hero){ padding-top:16px; border-top:1px solid var(--line); }
@media (min-width:980px){
.stat-grid--hero{ grid-template-columns:5fr 3.5fr 3.5fr; column-gap:var(--space-7); }
.stat-grid--hero > .stat-grid__intro{ grid-column:1; grid-row:1 / span 3; }
.stat-grid--hero > .stat--hero{ grid-column:2 / span 2; }
}
/* strip: 4-up, 2x2 below 640, hairline separators */
.stat-grid--strip{
grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line);
border-block:1px solid var(--line);
}
.stat-grid--strip > .stat{ background:var(--bg); padding:20px 16px 20px 0; }
.stat-grid--strip > .stat:nth-child(even){ padding-left:16px; }
@media (min-width:640px){
.stat-grid--strip{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.stat-grid--strip > .stat{ padding:24px 20px; }
.stat-grid--strip > .stat:first-child{ padding-left:0; }
}
/* rows (Metalab) */
.stat-grid--rows{ gap:0; }
.stat-grid--rows > .stat{ display:grid; grid-template-columns:minmax(0,1fr); gap:10px; padding-block:var(--space-6); border-top:1px solid var(--line); }
.stat-grid--rows .stat__value{ font-size:var(--fs-stat-lg); }
@media (min-width:640px){
.stat-grid--rows > .stat{
grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); grid-template-areas:"label value caption" "label value source";
column-gap:var(--space-6); align-items:center; padding-block:var(--space-7);
}
.stat-grid--rows .stat__label{ grid-area:label; }
.stat-grid--rows .stat__value{ grid-area:value; }
.stat-grid--rows .stat__caption{ grid-area:caption; align-self:end; }
.stat-grid--rows .stat__source{ grid-area:source; align-self:start; }
}
/* tiles (listing market snapshot) */
.stat-grid--tiles{ grid-template-columns:repeat(auto-fill,minmax(min(180px,100%),1fr)); gap:var(--space-2); }
.stat-grid--tiles > .stat{ padding:16px; border-radius:var(--radius-sm); background:var(--surface-2); }
/* one-time fade-up (site.js sets data-reveal; never under reduced motion) */
[data-reveal="pending"]{ opacity:0; transform:translateY(12px); }
[data-reveal="done"]{ transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease); }
/* ---- 5.4 Chart card (pure CSS bars) ---- */
.chart-card{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-4); padding:var(--space-5); border-radius:var(--radius-md); background:var(--surface); box-shadow:var(--shadow-2); min-width:0; }
.chart-card__title{ font:600 var(--fs-h4)/1.3 var(--font-sans); }
.chart-card__bars{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
.chart-card__row{ display:grid; grid-template-columns:56px minmax(0,1fr) auto; align-items:center; gap:12px; font-size:var(--fs-sm); }
.chart-card__year{ font:500 var(--fs-xs)/1 var(--font-mono); color:var(--muted); }
.chart-card__bar{ display:block; height:12px; width:var(--w,0%); min-width:4px; border-radius:var(--radius-pill); background:var(--secondary); opacity:.55; }
.chart-card__row:last-child .chart-card__bar,.chart-card__bar.is-active{ background:var(--accent); opacity:1; }
.chart-card__value{ font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.chart-card__source{ font:500 var(--fs-micro)/1.45 var(--font-mono); color:var(--muted); }
/* ---- 5.5 Trust grid (dark) ---- */
.trust-grid > .container{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-8); }
.trust-grid__title{ font-size:var(--fs-h2); line-height:1.1; text-align:center; max-width:24ch; margin-inline:auto; }
.trust-grid__title-2{ display:block; color:var(--muted); }
.trust-grid__list{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-7) 40px; }
.trust-grid__item{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding-top:20px; border-top:1px solid var(--line); }
.trust-grid__icon{ width:var(--icon-lg); height:var(--icon-lg); color:var(--icon-accent); }
.trust-grid__item-title{ font:600 17px/1.35 var(--font-sans); letter-spacing:0; }
.trust-grid__body{ font-size:var(--fs-sm); line-height:1.6; color:var(--muted); }
.trust-grid__body a{ color:var(--link); }
.trust-grid__badges{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; opacity:.8; }
.trust-grid__badges img,.trust-grid__badges svg{ height:24px; width:auto; }
.trust-grid__item > .btn--link{ margin-top:auto; }
@media (min-width:640px){ .trust-grid__list{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:980px){ .trust-grid__list{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
/* ---- 5.6 Steps ---- */
.steps{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-6); min-width:0; }
.steps__head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; }
.steps__head h2,.steps__head h3{ font-size:var(--fs-h3); }
.steps__list{ position:relative; display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-6); }
.step{ position:relative; display:grid; grid-template-columns:minmax(0,1fr); gap:8px; align-content:start; min-width:0; }
.step__marker{ display:none; }
.step__tag{ display:flex; align-items:stretch; font:500 var(--fs-micro)/1.3 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }
.step__num{ flex:none; }
.step__name{ min-width:0; }
.step__num,.step__name{ padding:2px 6px; border:1px solid var(--line-strong); }
.step__name{ border-left:0; }
.step__title{ font:600 17px/1.35 var(--font-sans); letter-spacing:0; }
.step__text{ font-size:var(--fs-sm); line-height:1.6; color:var(--text-2); hyphens:auto; }
.step__duration{ font-size:var(--fs-xs); color:var(--muted); }
/* track: card with a line + square markers */
.steps--track{ padding:var(--space-5); border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow-1); }
.steps--track .steps__list::before{ content:""; position:absolute; left:3.5px; top:6px; bottom:6px; width:1px; background:var(--line-strong); }
.steps--track .step{ padding-left:24px; }
.steps--track .step__marker{ display:block; position:absolute; left:0; top:4px; width:8px; height:8px; background:var(--accent); }
@media (min-width:640px){ .steps--track{ padding:40px; } }
@media (min-width:980px){
.steps--track .steps__list{ grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:var(--space-5); }
.steps--track .steps__list::before{ left:0; right:0; top:3.5px; bottom:auto; width:auto; height:1px; }
.steps--track .step{ padding:28px 0 0; }
.steps--track .step__marker{ top:0; }
}
/* grid: numbered 3-column (About) */
.steps--grid .steps__list{ grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); gap:var(--space-6); }
.steps--grid .step{ padding-top:20px; border-top:1px solid var(--line); }
.steps--grid .step__tag{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px; }
.steps--grid .step__num{ padding:0; border:0; font:400 var(--fs-stat-md)/.9 var(--font-serif); letter-spacing:-.02em; color:var(--em); text-transform:none; }
.steps--grid .step__name{ padding:0; border:0; color:var(--eyebrow); }
/* ---- 5.7 FAQ ---- */
.faq{ display:flex; flex-direction:column; gap:var(--space-5); min-width:0; }
.faq__aside{ display:contents; }
.faq__aside > *{ order:-1; }
.faq__aside > .btn{ order:1; align-self:flex-start; }
.faq__aside h2{ font-size:var(--fs-h2); }
.faq__aside p{ color:var(--text-2); }
.faq__groups{ order:0; display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-7); min-width:0; }
.faq__note{ order:2; }
.faq__group{ display:grid; grid-template-columns:minmax(0,1fr); }
.faq__group-title{ font:600 18px/1.3 var(--font-sans); letter-spacing:0; padding-bottom:12px; border-bottom:2px solid var(--text); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{
display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0;
font:600 16px/1.45 var(--font-sans); cursor:pointer; list-style:none; border-radius:var(--radius-xs);
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__q:hover{ color:var(--link); }
.faq__chev{ position:relative; flex:none; width:28px; height:28px; border:1px solid var(--line-strong); border-radius:6px; transition:transform var(--dur) var(--ease); }
.faq__chev::before{
content:""; position:absolute; left:50%; top:50%; width:7px; height:7px; margin:-5px 0 0 -3.5px;
border:solid currentColor; border-width:0 1.5px 1.5px 0; transform:rotate(45deg);
}
.faq__item[open] .faq__chev{ transform:rotate(180deg); }
.faq__a{ padding-bottom:20px; max-width:62ch; font-size:15px; line-height:1.7; color:var(--text-2); }
.faq__a > * + *{ margin-top:.8em; }
.faq__a a{ color:var(--link); }
.faq--compact{ display:block; }
@media (min-width:980px){
.faq:not(.faq--compact){ display:grid; grid-template-columns:4fr 8fr; column-gap:var(--space-8); row-gap:var(--space-6); align-items:start; }
.faq__aside{ display:grid; grid-template-columns:minmax(0,1fr); gap:16px; align-content:start; position:sticky; top:calc(var(--header-h) + 24px); }
.faq__note{ grid-column:1 / -1; }
}
/* ---- 5.8 Strategy cards ---- */
.strategy-grid{
display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
margin-inline:calc(-1 * var(--gutter)); padding:4px var(--gutter); scroll-padding-inline:var(--gutter);
}
.strategy-grid::-webkit-scrollbar{ display:none; }
.strategy-grid > *{ flex:0 0 78%; scroll-snap-align:start; }
@media (min-width:640px){ .strategy-grid > *{ flex-basis:calc((100% - 32px) / 2.4); } }
@media (min-width:980px){
/* one row, equal columns: 5 strategies read as a set (no 4 + 1 orphan) */
.strategy-grid{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); overflow:visible; margin:0; padding:0; }
}
.strategy-card{ display:flex; flex-direction:column; gap:12px; color:var(--text); text-decoration:none; border-radius:var(--radius-md); }
.strategy-card:hover{ color:var(--text); }
.strategy-card__label{ padding-top:12px; border-top:1px solid var(--line); font:600 16px/1.3 var(--font-sans); }
.strategy-card__media{ position:relative; aspect-ratio:3/4; overflow:hidden; border-radius:var(--radius-md); background:var(--surface-2); }
.strategy-card__media > img,.strategy-card__media > .placeholder{ width:100%; height:100%; object-fit:cover; aspect-ratio:auto; transition:transform var(--dur-slow) var(--ease); }
.strategy-card__arrow{
position:absolute; right:12px; bottom:12px; display:grid; grid-template-columns:minmax(0,1fr); place-items:center; width:36px; height:36px; border-radius:50%;
background:rgba(13,27,46,.45); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:var(--white);
transition:transform var(--dur) var(--ease);
}
.strategy-card__arrow .icon{ width:18px; height:18px; }
.strategy-card__caption{ font-size:var(--fs-sm); line-height:1.55; color:var(--text-2); hyphens:auto; }
.strategy-card__caption strong{ color:var(--text); }
.strategy-card:hover .strategy-card__media > img,.strategy-card:focus-visible .strategy-card__media > img{ transform:scale(1.03); }
.strategy-card:hover .strategy-card__arrow,.strategy-card:focus-visible .strategy-card__arrow{ transform:translateX(2px); }
/* ---- 5.9 Area cards + map ---- */
.area-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr)); gap:var(--space-5); }
.area-card{
display:flex; flex-direction:column; overflow:hidden; border-radius:var(--radius-md);
background:var(--surface); box-shadow:var(--shadow-1); color:var(--text); text-decoration:none;
transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.area-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); color:var(--text); }
.area-card:focus-visible{ border-radius:var(--radius-md); }
.area-card__media{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--place-grad); }
.area-card__media > img{ width:100%; height:100%; object-fit:cover; }
.area-card__monogram{
display:grid; grid-template-columns:minmax(0,1fr); place-items:center; width:100%; height:100%;
font:600 48px/1 var(--font-display); letter-spacing:-.03em; color:var(--text); opacity:.3;
}
.area-card__body{ display:grid; grid-template-columns:minmax(0,1fr); gap:6px; padding:18px 20px 20px; }
.area-card__name{ display:flex; align-items:baseline; gap:6px; font:600 var(--fs-h4)/1.3 var(--font-sans); letter-spacing:0; }
.area-card__name > span{ color:var(--accent); transition:transform var(--dur) var(--ease); }
.area-card:hover .area-card__name > span{ transform:translateX(2px); }
.area-card__thesis{ font-size:15px; line-height:1.5; color:var(--text-2); hyphens:auto; }
.area-card__meta{ font-size:var(--fs-xs); color:var(--muted); }
.area-card__status{ display:flex; align-items:center; gap:8px; font-size:var(--fs-xs); color:var(--text-2); }
.area-card__dot{ width:8px; height:8px; border-radius:50%; background:var(--muted); flex:none; }
.area-card__status.is-positive .area-card__dot,.area-card__dot.is-positive{ background:var(--positive); box-shadow:0 0 0 3px var(--positive-soft); }
.area-card--compact{ border-radius:0; box-shadow:none; background:transparent; border-top:1px solid var(--line); }
.area-card--compact:hover{ transform:none; box-shadow:none; }
.area-card--compact .area-card__media{ display:none; }
.area-card--compact .area-card__body{ padding:16px 0; }
.area-card.is-active .area-card__name{ color:var(--link); }
.area-map{ position:relative; min-width:0; }
.area-map svg{ display:block; width:100%; height:auto; }
.area-map__land{ fill:var(--map-land); }
.area-map__mx{ opacity:.4; }
.area-map__label{ font:500 12px var(--font-mono); letter-spacing:.06em; fill:var(--text-2); }
.area-map__tag{ font:500 11px var(--font-mono); letter-spacing:.14em; text-transform:uppercase; fill:var(--muted); }
.area-map__pin{ cursor:pointer; outline:none; }
.area-map__pin circle{ fill:var(--accent); stroke:var(--bg); stroke-width:3; transition:r var(--dur) var(--ease); }
.area-map__pin:focus-visible circle,.area-map__pin.is-active circle{ stroke:var(--focus); stroke-width:4; }
.area-map__callout{ padding:12px; border:1px solid var(--accent); border-radius:var(--radius-sm); background:var(--surface); font-size:var(--fs-sm); }
/* ---- 5.10 Timeline (P1 static) ---- */
.timeline{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-4); }
.timeline__step{
display:grid; grid-template-columns:minmax(0,1fr); gap:12px; padding:var(--space-5); border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface);
}
.timeline__year{ font:400 var(--fs-stat-md)/.9 var(--font-serif); letter-spacing:-.02em; color:var(--em); font-variant-numeric:lining-nums; }
.timeline__title{ font:600 var(--fs-h4)/1.3 var(--font-sans); letter-spacing:0; }
.timeline__body{ font-size:15px; line-height:1.6; color:var(--text-2); }
.timeline__source{ font:500 var(--fs-micro)/1.45 var(--font-mono); color:var(--muted); }
.timeline__source a{ color:inherit; }
.timeline__media{ aspect-ratio:16/10; overflow:hidden; border-radius:var(--radius-sm); }
.timeline__media > img,.timeline__media > .placeholder{ width:100%; height:100%; object-fit:cover; }
/* P2 sticky scrubber (only >= 980, never under reduced motion; enabled by page JS) */
.timeline__stage{ display:none; }
.timeline__years{ display:none; }
@media (min-width:980px) and (prefers-reduced-motion:no-preference){
.timeline.is-active{ position:relative; }
.timeline.is-active .timeline__stage{
display:block; position:sticky; top:var(--header-h); height:calc(100vh - var(--header-h)); overflow:hidden; border-radius:var(--radius-md);
}
.timeline.is-active .timeline__stage > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity var(--dur-slow) var(--ease); }
.timeline.is-active .timeline__stage > img.is-active{ opacity:1; }
.timeline.is-active .timeline__years{ display:grid; gap:12px; position:sticky; top:calc(var(--header-h) + 48px); }
.timeline__years > li{ font:400 var(--fs-stat-md)/1 var(--font-serif); color:var(--text); opacity:.25; transition:opacity var(--dur) var(--ease); }
.timeline__years > li.is-active,.timeline__years > li[aria-current]{ opacity:1; font-size:32px; color:var(--white); }
}
@media (min-width:980px){
.timeline__step{ grid-template-columns:140px minmax(0,1fr) 280px; column-gap:var(--space-6); align-items:start; padding:var(--space-6); }
.timeline__step > .timeline__year{ grid-row:1 / span 3; }
.timeline__step > .timeline__media{ grid-column:3; grid-row:1 / span 3; }
/* steps without a photo (milestones have no images yet): two columns, body stays in the text column */
.timeline__step:not(:has(.timeline__media)){ grid-template-columns:140px minmax(0,1fr); row-gap:8px; }
.timeline__step:not(:has(.timeline__media)) > :not(.timeline__year){ grid-column:2; }
}
.timeline__step:not(:has(.timeline__media)) .timeline__body{ max-width:68ch; }
/* ---- 5.11 Chapters (center spine) ---- */
.chapters{ position:relative; display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-8); }
.chapters::before{ content:""; position:absolute; left:12px; top:0; bottom:0; width:1px; background:var(--line-strong); }
.chapters__item{ position:relative; display:grid; grid-template-columns:minmax(0,1fr); gap:20px; padding-left:32px; }
.chapters__figure{ aspect-ratio:16/10; overflow:hidden; border-radius:var(--radius-sm); background:var(--surface-2); }
.chapters__figure > img,.chapters__figure > .placeholder{ width:100%; height:100%; object-fit:cover; }
.chapters__dot{ position:absolute; left:7px; top:6px; width:11px; height:11px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--bg); }
.chapters__text{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px; align-content:start; justify-items:start; }
.chapters__text h3{ font-size:var(--fs-h3); }
.chapters__text p:not(.eyebrow){ color:var(--text-2); max-width:56ch; }
@media (min-width:980px){
.chapters::before{ left:50%; }
.chapters__item{ grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr); align-items:center; gap:0; padding-left:0; }
.chapters__figure{ grid-column:1; grid-row:1; }
.chapters__dot{ position:relative; left:auto; top:auto; grid-column:2; grid-row:1; justify-self:center; }
.chapters__text{ grid-column:3; grid-row:1; padding-left:var(--space-5); }
.chapters__item:nth-child(even) .chapters__figure{ grid-column:3; }
.chapters__item:nth-child(even) .chapters__text{ grid-column:1; padding:0 var(--space-5) 0 0; }
}
/* ---- 5.12 Compare table (services only) ---- */
.compare{
width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed;
padding:28px 12px 32px; border-radius:var(--radius-lg); background:var(--bg-alt); font-size:var(--fs-xs);
}
.compare th,.compare td{ height:52px; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
.compare th[scope="row"]{ text-align:left; font-weight:500; line-height:1.35; width:46%; }
.compare thead th{ font:600 var(--fs-xs)/1.3 var(--font-sans); border-bottom:0; }
.compare td{ text-align:center; color:var(--muted); }
.compare tbody tr:last-child > *{ border-bottom:0; }
.compare .icon{ width:22px; height:22px; }
.compare .compare__hl{ background:var(--navy-700); color:var(--white); border-bottom-color:rgba(255,255,255,.2); text-align:center; }
.compare thead .compare__hl{ background:linear-gradient(160deg,#2A4775,var(--navy-700)); border-radius:14px 14px 0 0; padding-top:20px; }
.compare tbody tr:last-child .compare__hl{ border-radius:0 0 14px 14px; box-shadow:0 14px 0 0 var(--navy-700); }
@media (min-width:640px){ .compare{ padding:28px 24px 36px; font-size:15px; } .compare th,.compare td{ padding:8px 16px; } .compare thead th{ font-size:15px; } }
/* ---- 5.13 Spotlight + carousel (gated: only with real testimonials) ---- */
.carousel{ display:grid; grid-template-columns:minmax(0,1fr); gap:20px; min-width:0; }
.carousel__track{
display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain;
}
.carousel__track::-webkit-scrollbar{ display:none; }
.carousel__controls{ display:flex; align-items:center; gap:12px; }
.carousel__prev,.carousel__next{
display:grid; grid-template-columns:minmax(0,1fr); place-items:center; width:40px; height:40px; padding:0; border-radius:50%;
border:1px solid var(--line-strong); background:var(--surface); color:var(--text);
}
.carousel__prev:hover,.carousel__next:hover{ border-color:var(--text); }
.carousel__prev:focus-visible,.carousel__next:focus-visible{ border-radius:50%; }
.carousel__prev:disabled,.carousel__next:disabled{ opacity:.4; cursor:default; }
.carousel__dots{ display:flex; gap:8px; }
.carousel__dot{ position:relative; width:32px; height:24px; padding:0; border:0; background:none; }
.carousel__dot::before{ content:""; position:absolute; left:0; right:0; top:11px; height:2px; background:var(--line-strong); }
.carousel__dot[aria-current="true"]::before,.carousel__dot.is-active::before{ background:var(--text); }
.spotlight{
flex:0 0 min(88%,1040px); scroll-snap-align:start; display:grid; grid-template-columns:minmax(0,1fr); gap:20px; align-content:start;
padding:var(--space-5); border-radius:var(--radius-md);
}
.spotlight:nth-child(even){ --bg:var(--navy-800); --surface-2:rgba(255,255,255,.08); }
.spotlight__tag{ justify-self:start; background:var(--surface-2); color:var(--text); }
.spotlight__name{ font-size:var(--fs-h3); }
.spotlight__quote{ margin:0; font:400 clamp(1.375rem,1.1rem + 1vw,1.875rem)/1.3 var(--font-serif); }
.spotlight__portrait{ width:160px; aspect-ratio:3/4; object-fit:cover; border-radius:var(--radius-pill); }
.spotlight__details{ display:flex; flex-wrap:wrap; gap:16px 32px; }
.spotlight__details dt{ font:500 11px/1.3 var(--font-mono); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--muted); }
.spotlight__details dd{ margin:4px 0 0; font-weight:500; }
@media (min-width:640px){ .spotlight{ padding:40px; } }
@media (min-width:980px){
.spotlight{ grid-template-columns:minmax(0,1fr) 240px; column-gap:var(--space-6); }
.spotlight > :not(.spotlight__portrait){ grid-column:1; }
.spotlight__portrait{ grid-column:2; grid-row:1 / span 4; justify-self:end; }
}
/* ---- 5.14 Guide card ---- */
.guide-card{
position:relative; isolation:isolate; display:flex; flex-direction:column; justify-content:space-between; gap:16px;
aspect-ratio:4/5; overflow:hidden; padding:20px; border-radius:10px; background:var(--ink-900); color:var(--white);
}
.guide-card__img{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; }
.guide-card::before{
content:""; position:absolute; inset:0; z-index:-1;
background:linear-gradient(to bottom,rgba(13,27,46,.72),rgba(13,27,46,0) 42%,rgba(13,27,46,0) 58%,rgba(13,27,46,.78));
}
.guide-card__title{ max-width:80%; font:700 18px/1.3 var(--font-sans); letter-spacing:0; }
.guide-card__lang{
position:absolute; top:16px; right:16px; display:grid; grid-template-columns:minmax(0,1fr); place-items:center; width:28px; height:28px; border-radius:50%;
background:var(--white); color:var(--ink-900); font:500 11px/1 var(--font-mono);
}
.guide-card__cta{ align-self:flex-start; }
.guide-card--mini{
aspect-ratio:auto; display:grid; grid-template-columns:minmax(0,120px) minmax(0,1fr); align-items:center; gap:16px; padding:12px;
background:var(--surface-2); color:var(--text);
}
.guide-card--mini::before{ display:none; }
.guide-card--mini .guide-card__img{ position:static; z-index:auto; aspect-ratio:4/5; height:auto; border-radius:var(--radius-sm); }
.guide-card--mini .guide-card__title{ max-width:none; }
.guide-card--mini .guide-card__lang{ top:8px; right:8px; }
@media (min-width:640px){ .guide-card--mini{ grid-template-columns:160px minmax(0,1fr); } }
/* ---- 5.15 CTA band ---- */
.cta-band{ padding-block:var(--section-y); }
.cta-band__panel{
position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr); gap:20px; justify-items:start;
padding:clamp(32px,5vw,64px) clamp(20px,5vw,64px); border-radius:var(--radius-xl);
background-color:var(--bg); background-image:radial-gradient(120% 90% at 100% 0%,rgba(212,184,132,.12),transparent 55%);
}
.cta-band__panel[data-theme="sand"]{ background-image:radial-gradient(120% 90% at 100% 0%,rgba(27,51,88,.06),transparent 55%); }
.cta-band__panel > *{ position:relative; max-width:100%; }
.cta-band__title{ font-size:var(--fs-h2); line-height:1.1; max-width:22ch; }
.cta-band__text{ font-size:var(--fs-lede); line-height:1.55; color:var(--text-2); max-width:56ch; }
.cta-band__actions{ width:100%; padding-top:8px; }
.cta-band__tabs{ max-width:100%; }
/* Strategy tabs: the canonical Spanish names are long ("Terrenos en corredores de crecimiento"), so below 640px the
options wrap as separate pills instead of hiding the last one behind a scroll area with no visible scrollbar. */
@media (max-width:639.98px){
.cta-band__tabs.segmented{ display:flex; flex-wrap:wrap; gap:6px; min-inline-size:0; overflow:visible; margin:0; padding:0; }
.cta-band__tabs .segmented__option{ flex:0 1 auto; margin-left:0; border-radius:var(--radius-pill); white-space:normal; text-align:center; }
.cta-band__tabs .segmented__option:first-of-type,
.cta-band__tabs .segmented__option:last-of-type{ border-radius:var(--radius-pill); }
}
.cta-band__note{ font-size:var(--fs-xs); color:var(--muted); }
.cta-band--inline{ padding-block:0; }
.cta-band--inline .cta-band__panel{ padding:var(--space-5); border-radius:var(--radius-lg); gap:12px; }
.cta-band--inline .cta-band__title{ font-size:var(--fs-h3); }
.cta-band--inline .cta-band__text{ font-size:15px; }
@media (min-width:640px){ .cta-band--inline .cta-band__panel{ padding:28px 32px; } }
/* ---- 5.16 Card, collection card ---- */
.card-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr)); gap:var(--space-5); }
.card{
position:relative; display:flex; flex-direction:column; min-width:0; overflow:hidden;
border-radius:var(--radius-md); background:var(--surface); box-shadow:var(--shadow-2); color:var(--text);
transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.card__media{ aspect-ratio:16/9; overflow:hidden; background:var(--surface-2); }
.card__media > img,.card__media > .placeholder{ width:100%; height:100%; object-fit:cover; aspect-ratio:auto; border-radius:0; }
.card__body{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; flex:1; padding:20px 22px 24px; }
.card__title{
font:600 var(--fs-h4)/1.3 var(--font-sans); letter-spacing:0;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card__text{ font-size:15px; line-height:1.6; color:var(--text-2); hyphens:auto; }
.card__link{ margin-top:auto; }
.card--link{ text-decoration:none; }
a.card--link:hover,.card--link:has(.card__link:hover){ box-shadow:var(--shadow-3); transform:translateY(-2px); color:var(--text); }
.card--link .card__link::after{ content:""; position:absolute; inset:0; }
.card--link:has(.card__link:focus-visible){ box-shadow:var(--ring); }
.card--link .card__link:focus-visible{ box-shadow:none; }
.card--flat{ box-shadow:none; border:1px solid var(--line); }
.card--flat .card__body{ padding:22px; }
.collection-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr)); gap:var(--space-5); }
.collection-card{
position:relative; display:flex; flex-direction:column; overflow:hidden; border-radius:var(--radius-md);
background:var(--surface); box-shadow:var(--shadow-1); color:var(--text); text-decoration:none;
transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.collection-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); color:var(--text); }
.collection-card:focus-visible{ border-radius:var(--radius-md); }
.collection-card__media{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--place-grad); }
.collection-card__media > img,.collection-card__media > .placeholder{ width:100%; height:100%; object-fit:cover; aspect-ratio:auto; border-radius:0; }
.collection-card__strategy{ position:absolute; top:10px; left:10px; }
.collection-card__body{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px; padding:18px 20px 20px; }
.collection-card__title{ font:600 var(--fs-h4)/1.3 var(--font-sans); letter-spacing:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.collection-card__text{ font-size:15px; line-height:1.5; color:var(--text-2); hyphens:auto; }
.collection-card__criteria{ font:500 var(--fs-xs)/1.45 var(--font-mono); color:var(--muted); }
.collection-card__count{ display:flex; align-items:center; gap:8px; font-size:var(--fs-xs); color:var(--text-2); }
.collection-card__count::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--positive); }
/* ==========================================================================
6. PROPERTY SEARCH (§3.4)
========================================================================== */
/* ---- 6.1 Filter bar ---- */
.filter-bar{
position:sticky; top:var(--header-h); z-index:var(--z-sticky);
display:flex; align-items:center; gap:8px; min-height:var(--filterbar-h); padding:12px var(--gutter);
background:var(--surface); border-bottom:1px solid var(--line);
}
.filter-bar__search{
flex:1 1 200px; min-width:0; height:var(--control-h-sm); padding:0 14px 0 40px;
border:1px solid var(--line-input); border-radius:var(--radius-pill); background-color:var(--surface); color:var(--text);
font-size:16px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E6B66' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:14px center; background-size:18px;
}
.filter-bar__search::placeholder{ color:var(--muted); opacity:1; }
.filter-bar__search:focus{ border-color:var(--focus); box-shadow:var(--ring); }
.filter-bar__pill{ position:relative; display:none; flex:none; }
.filter-bar__summary{
display:inline-flex; align-items:center; gap:8px; height:var(--control-h-sm); padding:0 14px;
border:1px solid var(--line-input); border-radius:var(--radius-pill); background:var(--surface);
font:600 var(--fs-sm)/1 var(--font-sans); white-space:nowrap; cursor:pointer; list-style:none;
}
.filter-bar__summary::-webkit-details-marker{ display:none; }
.filter-bar__summary::after{
content:""; width:7px; height:7px; margin:-3px 0 0 2px; border:solid currentColor; border-width:0 1.5px 1.5px 0;
transform:rotate(45deg); transition:transform var(--dur-fast) var(--ease);
}
.filter-bar__pill[open] > .filter-bar__summary{ border-color:var(--text); }
.filter-bar__pill[open] > .filter-bar__summary::after{ transform:rotate(-135deg); margin-top:3px; }
.filter-bar__summary:focus-visible{ border-radius:var(--radius-pill); }
.filter-bar__summary.is-active{ background:var(--secondary-soft); border-color:var(--secondary); }
.filter-bar__panel{
position:absolute; top:calc(100% + 8px); left:0; z-index:calc(var(--z-sticky) + 1);
display:grid; grid-template-columns:minmax(0,1fr); gap:12px; min-width:280px; padding:16px;
border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface); box-shadow:var(--shadow-3);
}
.filter-bar__alerts{ flex:none; }
.filter-bar__alerts-label{ display:none; }
@media (min-width:980px){
.filter-bar__pill{ display:block; }
.filter-bar__alerts{ margin-left:auto; }
.filter-bar__alerts-label{ display:inline; }
}
/* Saved-listings strip under the bar (site.js shows it once a listing is hearted): count + "send to Ricardo". */
.saved-strip{
display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px;
padding:10px max(var(--gutter), calc((100% - var(--container)) / 2));
border-bottom:1px solid var(--line); background:var(--accent-soft);
}
.saved-strip__text{ display:flex; align-items:center; gap:8px; min-width:0; font-size:var(--fs-sm); font-weight:600; color:var(--text); }
.saved-strip__icon{ flex:none; width:var(--icon-sm); height:var(--icon-sm); color:var(--accent-strong); fill:currentColor; }
/* ---- 6.2 Filter sheet (native ) ---- */
.filter-sheet{ flex:none; }
.filter-sheet__trigger{ list-style:none; }
.filter-sheet__trigger::-webkit-details-marker{ display:none; }
.filter-sheet__count{ font-variant-numeric:tabular-nums; }
.filter-sheet__panel{
position:fixed; inset:0; z-index:calc(var(--z-header) + 5); display:flex; flex-direction:column;
height:100vh; height:100dvh; background:var(--surface); color:var(--text);
}
.filter-sheet__header{
position:sticky; top:0; display:flex; align-items:center; justify-content:space-between; gap:12px;
min-height:56px; padding:0 8px 0 16px; border-bottom:1px solid var(--line); background:var(--surface);
}
.filter-sheet__header h2{ font:600 var(--fs-h4)/1.2 var(--font-sans); letter-spacing:0; }
.filter-sheet__body{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding:0 16px; }
.filter-sheet__section{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px; padding-block:20px; border-bottom:1px solid var(--line); }
.filter-sheet__section:last-child{ border-bottom:0; }
.filter-sheet__section h3,.filter-sheet__legend{ font:600 15px/1.3 var(--font-sans); letter-spacing:0; }
.filter-sheet__footer{
position:sticky; bottom:0; padding:12px 16px calc(12px + env(safe-area-inset-bottom));
border-top:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow-up);
}
@media (min-width:980px){
.filter-sheet[open]::before{ content:""; position:fixed; inset:0; z-index:calc(var(--z-header) + 4); background:rgba(13,27,46,.45); }
.filter-sheet__panel{ left:auto; width:560px; max-width:100%; box-shadow:var(--shadow-3); }
}
/* ---- 6.3 Results head ---- */
.results-head{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px; padding-block:var(--space-5) var(--space-4); }
.results-head__title{ font-size:var(--fs-h3); line-height:1.2; max-width:none; }
.results-head__bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
.results-head__meta{ font-size:var(--fs-sm); color:var(--muted); }
.results-head__meta strong{ color:var(--text); font-variant-numeric:tabular-nums; }
/* The label + select may shrink to the bar (a select sizes itself to its longest option: 320px phones overflowed). */
.results-head__sort{ display:inline-flex; align-items:center; gap:8px; min-width:0; max-width:100%; font-size:var(--fs-sm); color:var(--text-2); }
.results-head__sort select{
flex:1 1 auto; min-width:0; max-width:100%; text-overflow:ellipsis;
height:var(--control-h-sm); padding:0 36px 0 12px; border:1px solid var(--line-input); border-radius:var(--radius-sm);
background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E6B66' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center/16px;
appearance:none; font-size:15px; color:var(--text);
}
@media (min-width:980px){ .results-head__title{ font-size:28px; } }
/* ---- 6.4 Results, map (P2) ---- */
.results{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-5); min-width:0; }
.map{ position:relative; overflow:hidden; aspect-ratio:16/7; border-radius:var(--radius-md); background:var(--surface-2); }
.map-pin{
display:inline-flex; align-items:center; height:24px; padding:0 8px; border-radius:var(--radius-pill);
background:var(--white); color:var(--ink-900); box-shadow:var(--shadow-2); font:700 12px/1 var(--font-sans); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.map-pin.is-active{ background:var(--ink-900); color:var(--white); }
.map-pin--anchor{ background:var(--accent-strong); color:var(--white); }
@media (min-width:1200px){
.results--split{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:start; }
.results--split .map{ position:sticky; top:calc(var(--header-h) + var(--filterbar-h)); aspect-ratio:auto; height:calc(100vh - var(--header-h) - var(--filterbar-h)); border-radius:0; }
}
/* ---- 6.5 Listing grid + card ---- */
.listing-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr)); grid-auto-flow:row dense; gap:20px 16px; }
.listing-grid > li:not(.feed-card){ display:flex; min-width:0; }
.listing-card{
position:relative; display:flex; flex-direction:column; flex:1; min-width:0; overflow:hidden;
border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface); color:var(--text);
transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.listing-card:hover{ box-shadow:var(--shadow-2); transform:translateY(-2px); }
.listing-card:has(.listing-card__link:focus-visible){ box-shadow:var(--ring); }
.listing-card__link{ display:flex; flex-direction:column; flex:1; color:inherit; text-decoration:none; }
.listing-card__link:hover{ color:inherit; }
.listing-card__link:focus-visible{ box-shadow:none; }
.listing-card__media{ position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--surface-2); }
.listing-card__img,.listing-card__media > .placeholder{ width:100%; height:100%; object-fit:cover; aspect-ratio:auto; border-radius:0; transition:transform var(--dur-slow) var(--ease); }
.listing-card:hover .listing-card__img{ transform:scale(1.03); }
.listing-card__badges{ position:absolute; top:8px; left:8px; right:52px; display:flex; flex-wrap:wrap; gap:6px; }
.listing-card__save{
position:absolute; top:8px; right:8px; z-index:1; display:grid; grid-template-columns:minmax(0,1fr); place-items:center; width:36px; height:36px; padding:0;
border:0; border-radius:50%; background:var(--white); color:var(--ink-900); box-shadow:var(--shadow-1);
}
.listing-card__save::after{ content:""; position:absolute; inset:-4px; }
.listing-card__save:focus-visible{ border-radius:50%; }
.listing-card__save .icon{ width:18px; height:18px; transition:fill var(--dur-fast); }
.listing-card__save[aria-pressed="true"] .icon{ fill:var(--brass-500); stroke:var(--brass-500); }
html:not(.js) .listing-card__save{ display:none; }
.listing-card__body{ display:grid; grid-template-columns:minmax(0,1fr); gap:6px; padding:14px 16px 16px; }
.listing-card__price-row{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 8px; }
.listing-card__price{ font:700 22px/1.1 var(--font-sans); letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.listing-card__ppsf{ font-size:var(--fs-xs); color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.listing-card__facts{ font-size:var(--fs-sm); color:var(--text-2); font-variant-numeric:tabular-nums; }
.listing-card__facts b{ color:var(--text); }
.listing-card__address{ font:500 15px/1.35 var(--font-sans); letter-spacing:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.listing-card__invest{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:var(--fs-xs); color:var(--text-2); font-variant-numeric:tabular-nums; }
.listing-card__invest.is-positive::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--positive); flex:none; }
.listing-card__mxn{ font-size:var(--fs-micro); color:var(--muted); font-variant-numeric:tabular-nums; }
.listing-card__actions{ display:flex; gap:8px; padding:0 16px 14px; }
.listing-card__actions > .btn{ flex:1; }
.listing-card__attribution{ padding:10px 16px 12px; border-top:1px solid var(--line); }
.listing-card--compact .listing-card__actions,.listing-card--compact .listing-card__mxn{ display:none; }
/* ---- 6.6 Feed cards (in-grid inserts) ---- */
.feed-card{ display:grid; grid-template-columns:minmax(0,1fr); gap:16px; align-items:center; min-width:0; padding:20px; border-radius:var(--radius-md); }
.feed-card h3{ font:600 var(--fs-h4)/1.3 var(--font-sans); letter-spacing:0; }
.feed-card p:not([class]){ font-size:var(--fs-sm); color:var(--text-2); }
.feed-card__icon{ width:var(--icon-lg); height:var(--icon-lg); color:var(--icon-accent); }
.feed-card__actions{ display:flex; flex-wrap:wrap; gap:8px; }
.feed-card--alert{
grid-template-columns:auto minmax(0,1fr); min-height:56px; padding:12px 16px;
border:1px solid var(--line); background:var(--surface);
}
.feed-card--alert > .feed-card__actions,.feed-card--alert > .btn{ grid-column:1 / -1; }
.feed-card--advisor{ grid-column:1 / -1; background:var(--accent-soft); padding:var(--space-5); }
.feed-card--insight{ grid-column:1 / -1; background:var(--surface-2); }
@media (min-width:640px){
.feed-card--alert{ grid-template-columns:auto minmax(0,1fr) auto; }
.feed-card--alert > .feed-card__actions,.feed-card--alert > .btn{ grid-column:auto; }
.feed-card--advisor{ grid-template-columns:auto minmax(0,1fr) auto; gap:var(--space-5); }
}
/* ---- 6.7 Empty state ---- */
.empty-state{ display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; gap:16px; max-width:480px; margin-inline:auto; padding:64px 16px; text-align:center; }
.empty-state__icon{ width:96px; height:96px; stroke-width:1; color:var(--muted); }
.empty-state__title{ font-size:var(--fs-h3); }
.empty-state__text{ color:var(--text-2); }
.empty-state__relaxers,.empty-state__popular{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.empty-state__concierge{
display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; gap:12px; width:100%; padding:20px; border-radius:var(--radius-md); background:var(--surface-2);
}
.empty-state--error .empty-state__icon{ color:var(--warning); }
/* ---- 6.8 Pagination ---- */
.pagination{ display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; gap:12px; padding-block:var(--space-6); }
.pagination__summary{ font-size:var(--fs-sm); color:var(--muted); font-variant-numeric:tabular-nums; }
.pagination__list{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; }
.pagination__link{
display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:40px; height:40px; padding:0 12px;
border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--text);
font:600 var(--fs-sm)/1 var(--font-sans); font-variant-numeric:tabular-nums; text-decoration:none; white-space:nowrap;
}
a.pagination__link:hover{ border-color:var(--text); color:var(--text); }
.pagination__link:focus-visible{ border-radius:10px; }
.pagination__link[aria-current]{ background:var(--accent-strong); border-color:var(--accent-strong); color:var(--accent-ink); }
.pagination__link[aria-disabled="true"]{ opacity:.4; pointer-events:none; }
.pagination__page,.pagination__ellipsis{ font-size:var(--fs-sm); color:var(--muted); padding-inline:4px; }
/* < 640 (and --compact): prev · current · next only */
.pagination__list > li:where(:not(:has(> [rel])):not(:has(> [aria-current])):not(:has(> [aria-disabled])):not(:has(> .pagination__page))){ display:none; }
@media (min-width:640px){
.pagination:not(.pagination--compact) .pagination__list > li{ display:block; }
}
/* ---- 6.9 IDX attribution (always visible, >= 12px) ---- */
/* IDX rules want the listing office/agent credit "reasonably prominent": body-adjacent size and --text-2, never micro type. */
.idx-attribution{ font-size:var(--fs-sm); line-height:1.5; color:var(--text-2); }
.idx-attribution--block{ display:grid; grid-template-columns:minmax(0,1fr); gap:4px; padding-top:16px; border-top:1px solid var(--line); font-size:15px; }
.idx-attribution--block strong{ color:var(--text-2); }
/* ==========================================================================
7. LISTING DETAIL (§3.5)
========================================================================== */
.detail{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-6); }
.detail__main{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-7); min-width:0; }
.detail__rail{ display:none; min-width:0; }
@media (min-width:980px){
.detail{ grid-template-columns:minmax(0,1fr) var(--rail-w); gap:32px; align-items:start; }
.detail__rail{ display:block; position:sticky; top:calc(var(--header-h) + var(--tabs-h) + 16px); }
}
/* ---- 7.1 Gallery + lightbox ---- */
.gallery{
position:relative; display:flex; gap:6px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
border-radius:var(--radius-lg); background:var(--surface-2);
}
.gallery::-webkit-scrollbar{ display:none; }
.gallery > img,.gallery__main,.gallery__thumb{ flex:0 0 100%; width:100%; aspect-ratio:4/3; object-fit:cover; scroll-snap-align:start; }
.gallery__status{ position:absolute; top:12px; left:12px; }
.gallery__count{ position:absolute; right:12px; bottom:12px; background:var(--white); color:var(--ink-900); box-shadow:var(--shadow-2); }
.gallery__count:hover{ background:var(--sand-100); color:var(--ink-900); }
@media (min-width:980px){
.gallery{
display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:1fr 1fr;
height:clamp(320px,48vw,520px); overflow:hidden; scroll-snap-type:none;
}
.gallery > img,.gallery__main,.gallery__thumb{ height:100%; aspect-ratio:auto; min-width:0; }
.gallery__main{ grid-row:1 / span 2; }
.gallery__status{ top:16px; left:16px; }
.gallery__count{ right:16px; bottom:16px; }
/* fewer than 5 photos: one full-width image at 16/9 */
.gallery:not(:has(> img:nth-of-type(5))){ display:block; height:auto; }
.gallery:not(:has(> img:nth-of-type(5))) > img:not(:first-of-type){ display:none; }
.gallery:not(:has(> img:nth-of-type(5))) > img:first-of-type{ aspect-ratio:16/9; height:auto; }
}
.lightbox{
width:100%; max-width:100%; height:100%; max-height:100%; margin:0; padding:0; border:0;
background:rgba(13,27,46,.92); color:var(--sand-100);
}
.lightbox[open]{ display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto; }
.lightbox::backdrop{ background:rgba(13,27,46,.6); }
.lightbox__bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; }
.lightbox__counter{ font:500 var(--fs-sm)/1 var(--font-mono); font-variant-numeric:tabular-nums; }
.lightbox__stage{ position:relative; display:grid; grid-template-columns:minmax(0,1fr); place-items:center; min-height:0; padding:0 8px; }
.lightbox__img{ max-width:100%; max-height:100%; object-fit:contain; }
.lightbox__prev,.lightbox__next,.lightbox__close{
display:grid; grid-template-columns:minmax(0,1fr); place-items:center; width:48px; height:48px; padding:0; border-radius:50%;
border:1px solid var(--line-strong); background:rgba(13,27,46,.5); color:var(--sand-100);
}
.lightbox__prev,.lightbox__next{ position:absolute; top:50%; transform:translateY(-50%); }
.lightbox__prev{ left:12px; } .lightbox__next{ right:12px; }
.lightbox__prev:focus-visible,.lightbox__next:focus-visible,.lightbox__close:focus-visible{ border-radius:50%; }
.lightbox__caption{ padding:12px 16px calc(12px + env(safe-area-inset-bottom)); font-size:var(--fs-sm); color:var(--muted); text-align:center; }
body:has(dialog.lightbox[open]) .mobile-cta{ display:none; }
/* ---- 7.2 Price block, invest chip, fact tiles ---- */
.price-block{ display:grid; grid-template-columns:minmax(0,1fr); gap:20px; min-width:0; }
.price-block__main{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; min-width:0; }
.price-block__price{ font:700 var(--fs-price)/1.1 var(--font-sans); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.price-block__address{
flex-basis:100%; max-width:none; font:500 clamp(1rem,.95rem + .3vw,1.125rem)/1.4 var(--font-sans);
letter-spacing:0; color:var(--text-2); text-wrap:pretty;
}
.price-block__stats{ display:flex; flex-wrap:wrap; gap:16px 28px; }
.price-block__stats > div{ display:flex; flex-direction:column-reverse; gap:4px; }
.price-block__stats dd{ margin:0; font:700 28px/1 var(--font-sans); font-variant-numeric:tabular-nums; }
.price-block__stats dt{ font-size:var(--fs-xs); color:var(--muted); }
.price-block > .idx-attribution,.price-block > .invest-chip,.price-block > .fact-tiles{ grid-column:1 / -1; }
@media (min-width:980px){
.price-block{ grid-template-columns:minmax(0,1fr) auto; align-items:start; }
.price-block__stats{ grid-column:2; grid-row:1; padding-top:6px; }
}
.invest-chip{
justify-self:start; display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px 12px; max-width:100%;
min-height:var(--tap); padding:8px 18px; border-radius:var(--radius-pill);
background:var(--secondary-soft); color:var(--text); font:600 var(--fs-sm)/1.35 var(--font-sans);
font-variant-numeric:tabular-nums; text-decoration:none;
}
.invest-chip > span{ color:var(--secondary); font-weight:600; }
.invest-chip:hover{ color:var(--text); box-shadow:inset 0 0 0 1px var(--secondary); }
.invest-chip:focus-visible{ border-radius:var(--radius-pill); }
.fact-tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(180px,100%),1fr)); gap:8px; }
.fact-tiles__tile{
display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:10px; row-gap:2px;
padding:12px 14px; border-radius:var(--radius-sm); background:var(--surface-2);
}
.fact-tiles__tile > .icon{ grid-row:1 / span 2; color:var(--muted); }
.fact-tiles__label{ font-size:var(--fs-xs); color:var(--muted); }
.fact-tiles__value{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-weight:600; font-variant-numeric:tabular-nums; }
/* ---- 7.3 Section tabs ---- */
.section-tabs{
position:sticky; top:var(--header-h); z-index:var(--z-sticky); display:flex; height:var(--tabs-h);
overflow-x:auto; scrollbar-width:none; background:var(--surface); border-bottom:1px solid var(--line);
}
.section-tabs::-webkit-scrollbar{ display:none; }
.section-tabs__link{
display:inline-flex; align-items:center; flex:none; padding:0 16px; color:var(--muted);
font:500 15px/1 var(--font-sans); text-decoration:none; white-space:nowrap;
}
.section-tabs__link:hover{ color:var(--text); }
.section-tabs__link[aria-current]{ color:var(--text); box-shadow:inset 0 -2px 0 var(--accent); }
.section-tabs__link:focus-visible{ box-shadow:inset 0 0 0 2px var(--focus); border-radius:0; }
/* ---- 7.4 Facts (definition rows) ---- */
.facts{ display:grid; grid-template-columns:minmax(0,1fr); min-width:0; }
.facts__row{
display:flex; align-items:baseline; justify-content:space-between; gap:16px;
padding-block:16px; border-bottom:1px solid var(--line);
}
.facts__row > dt{ font-size:15px; font-weight:600; }
.facts__row > dd{ margin:0; font-size:15px; text-align:right; font-variant-numeric:tabular-nums; display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:6px; }
.facts--operators .facts__row{ position:relative; padding-left:32px; }
.facts--operators .facts__row[data-op]::before,.facts__op{
content:attr(data-op); position:absolute; left:0; top:50%; transform:translateY(-50%);
display:grid; grid-template-columns:minmax(0,1fr); place-items:center; width:20px; height:20px; border:1px solid var(--line-strong); border-radius:50%;
font:600 12px/1 var(--font-mono); color:var(--text-2);
}
.facts__row--total{ border-top:2px solid var(--text); border-bottom:0; }
.facts__row--total > dt,.facts__row--total > dd{ font-weight:700; }
/* ---- 7.5 Data table ---- */
.data-table{ overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; border-radius:var(--radius-xs); }
.data-table table{ width:100%; font-size:var(--fs-sm); font-variant-numeric:tabular-nums; }
.data-table caption{ padding-bottom:12px; text-align:left; font:600 var(--fs-h4)/1.3 var(--font-sans); }
.data-table th,.data-table td{ padding:12px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; }
.data-table thead th{ font:500 var(--fs-micro)/1.2 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.data-table :is(th,td):not(:first-child){ text-align:right; }
.data-table :is(th,td):first-child{ padding-left:0; }
.data-table :is(th,td):last-child{ padding-right:0; }
.data-table .is-positive{ color:var(--positive); }
.data-table .is-negative{ color:var(--negative); }
.data-table__footer{ padding-top:12px; font-size:var(--fs-sm); }
/* ---- 7.6 Travel times ---- */
.travel-times{ display:grid; grid-template-columns:minmax(0,1fr); }
.travel-times__row{
display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:12px;
padding-block:12px; border-bottom:1px solid var(--line); font-size:15px;
}
.travel-times__key{
display:grid; grid-template-columns:minmax(0,1fr); place-items:center; width:24px; height:24px; border-radius:50%;
background:var(--surface-inverse); color:var(--text-inverse); font:600 var(--fs-micro)/1 var(--font-mono);
}
.travel-times__name{ min-width:0; }
.travel-times__time{ display:inline-flex; align-items:center; gap:6px; color:var(--text-2); white-space:nowrap; font-variant-numeric:tabular-nums; }
.travel-times__time .icon{ width:18px; height:18px; color:var(--muted); }
.travel-times__time b{ color:var(--text); }
/* ---- 7.7 Contact card (rail) ---- */
.contact-card{
display:grid; grid-template-columns:minmax(0,1fr); gap:12px; padding:var(--space-5); border:1px solid var(--line); border-radius:var(--radius-md);
background:var(--surface); min-width:0;
}
.contact-card__agent{
display:grid; grid-template-columns:56px minmax(0,1fr); align-items:center; gap:12px;
padding-bottom:14px; margin-bottom:2px; border-bottom:1px solid var(--line); font-size:var(--fs-sm); line-height:1.4;
}
.contact-card__agent > img,.contact-card__agent > .placeholder--avatar{ width:56px; height:56px; border-radius:50%; object-fit:cover; }
.contact-card__agent b,.contact-card__agent strong{ display:block; font:600 16px/1.3 var(--font-sans); }
.contact-card__agent small{ display:block; color:var(--muted); }
.contact-card__sub{ font-size:var(--fs-xs); color:var(--muted); text-align:center; }
.contact-card__micro{ font-size:var(--fs-micro); color:var(--muted); text-align:center; }
.contact-card > .btn--link{ justify-self:center; }
.contact-card__success{ padding:16px; border-radius:var(--radius-sm); background:var(--positive-soft); color:var(--positive); font-weight:600; }
.contact-card:not(.is-success) .contact-card__success{ display:none; }
.contact-card.is-success .contact-card__agent{ display:none; }
/* ---- 7.8 Mobile CTA bar (< 980, listing + calculator) ---- */
.mobile-cta{
position:fixed; inset:auto 0 0 0; z-index:var(--z-mobile-cta);
display:flex; align-items:center; gap:10px; min-height:var(--mobile-cta-h);
padding:12px 16px calc(12px + env(safe-area-inset-bottom));
background:var(--surface); border-top:1px solid var(--line); box-shadow:var(--shadow-up);
}
.mobile-cta__price{ display:grid; grid-template-columns:minmax(0,1fr); flex:1; min-width:0; line-height:1.25; }
.mobile-cta__price b{ font:700 18px/1.2 var(--font-sans); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mobile-cta__live{ font-size:var(--fs-xs); color:var(--text-2); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mobile-cta__wa{ flex:none; }
body:has(.mobile-cta){ padding-bottom:calc(var(--mobile-cta-h) + env(safe-area-inset-bottom)); }
@media (min-width:980px){
.mobile-cta{ display:none; }
body:has(.mobile-cta){ padding-bottom:0; }
}
/* ==========================================================================
8. INVESTOR CALCULATOR (§3.6)
========================================================================== */
.calc{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-5); min-width:0; }
.calc__head{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; }
.calc__head > :is(h2,h3){ flex:1 1 100%; font-size:var(--fs-h2); }
.calc__head > .eyebrow{ flex-basis:100%; }
.calc__mode,.calc__currency{ flex:none; }
.calc__status{ font-size:var(--fs-xs); }
.calc__inputs{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-4); min-width:0; }
.calc__group{
display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-4); min-width:0; padding:20px;
border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface);
}
.calc__group-head{ float:left; width:100%; display:flex; align-items:center; gap:10px; font:600 16px/1.3 var(--font-sans); }
.calc__num{
display:grid; grid-template-columns:minmax(0,1fr); place-items:center; flex:none; width:24px; height:24px; border-radius:50%;
background:var(--surface-inverse); color:var(--text-inverse); font:600 var(--fs-micro)/1 var(--font-mono);
}
.calc__row{ display:grid; grid-template-columns:minmax(0,1fr); gap:6px; min-width:0; }
.calc__row--range{ grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:12px; }
.calc__row--range > .calc__range,.calc__row--range > .calc__hint{ grid-column:1 / -1; }
.calc__row--split{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:12px; }
.calc__label{ font:500 var(--fs-sm)/1.35 var(--font-sans); color:var(--text); }
.calc__field{
display:flex; align-items:center; gap:6px; height:var(--control-h); padding:0 14px;
border:1px solid var(--line-input); border-radius:var(--radius-sm); background:var(--surface);
transition:border-color var(--dur-fast) var(--ease);
}
.calc__field:focus-within{ border-color:var(--focus); box-shadow:var(--ring); }
.calc__field input{
flex:1; min-width:0; height:100%; padding:0; border:0; background:transparent; color:var(--text);
font:500 16px/1 var(--font-sans); font-variant-numeric:tabular-nums; outline:none; box-shadow:none;
}
.calc__field input:focus-visible{ box-shadow:none; }
.calc__prefix,.calc__suffix{ color:var(--muted); font-size:var(--fs-sm); white-space:nowrap; }
.calc__output{ font:600 15px/1 var(--font-sans); font-variant-numeric:tabular-nums; }
.calc__range{
-webkit-appearance:none; appearance:none; width:100%; height:28px; margin:0; background:transparent; cursor:pointer;
--track:linear-gradient(to right,var(--secondary) 0 var(--fill,50%),var(--line-strong) var(--fill,50%) 100%);
}
.calc__range::-webkit-slider-runnable-track{ height:6px; border-radius:var(--radius-pill); background:var(--track); }
.calc__range::-moz-range-track{ height:6px; border-radius:var(--radius-pill); background:var(--track); }
.calc__range::-webkit-slider-thumb{
-webkit-appearance:none; appearance:none; width:18px; height:18px; margin-top:-6px; border-radius:50%;
background:var(--secondary); border:2px solid var(--white); box-shadow:var(--shadow-2);
}
.calc__range::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:var(--secondary); border:2px solid var(--white); box-shadow:var(--shadow-2); }
.calc__range:focus-visible{ box-shadow:none; }
.calc__range:focus-visible::-webkit-slider-thumb{ box-shadow:var(--ring); }
.calc__range:focus-visible::-moz-range-thumb{ box-shadow:var(--ring); }
.calc__row.is-invalid .calc__field{ border-color:var(--negative); }
.calc__error{ display:flex; gap:6px; font-size:var(--fs-xs); color:var(--negative); }
.calc__hint{ font-size:var(--fs-xs); line-height:1.5; color:var(--muted); }
.calc__foreign{ padding:4px 4px 0; }
.calc__results{
display:grid; grid-template-columns:minmax(0,1fr); gap:16px; align-content:start; min-width:0; padding:var(--space-5); border-radius:var(--radius-lg);
}
.calc__results .calc__label{ color:var(--muted); font-size:var(--fs-sm); }
.calc__hero-metric{
display:flex; align-items:baseline; gap:10px; font:700 clamp(2.25rem,1.8rem + 2vw,2.75rem)/1.05 var(--font-sans);
letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.calc__hero-metric > span[aria-hidden]{ font-size:.5em; }
.calc__hero-metric.is-positive{ color:var(--positive); }
.calc__hero-metric.is-negative{ color:var(--negative); }
.calc__kpis{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.calc__kpi{ display:grid; grid-template-columns:minmax(0,1fr); gap:4px; padding:12px 14px; border-radius:var(--radius-sm); background:var(--surface-2); }
.calc__kpi > span{ font-size:var(--fs-xs); color:var(--muted); }
.calc__kpi > b{ font:700 var(--fs-kpi)/1.1 var(--font-sans); font-variant-numeric:tabular-nums; }
.calc__stack{ display:flex; height:10px; overflow:hidden; border-radius:var(--radius-pill); background:var(--line); }
.calc__seg{ flex:0 0 calc(var(--pct,0) * 1%); min-width:0; transition:flex-basis var(--dur) var(--ease); }
.calc__seg--pi{ background:var(--c-pi); } .calc__seg--tax{ background:var(--c-tax); } .calc__seg--ins{ background:var(--c-ins); }
.calc__seg--hoa{ background:var(--c-hoa); } .calc__seg--ops{ background:var(--c-ops); }
.calc__legend{ display:flex; flex-wrap:wrap; gap:6px 16px; font-size:var(--fs-xs); color:var(--text-2); font-variant-numeric:tabular-nums; }
.calc__legend > li{ display:inline-flex; align-items:center; gap:6px; }
.calc__legend > li::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--c,var(--muted)); }
.calc__legend [data-series="pi"]{ --c:var(--c-pi); } .calc__legend [data-series="tax"]{ --c:var(--c-tax); }
.calc__legend [data-series="ins"]{ --c:var(--c-ins); } .calc__legend [data-series="hoa"]{ --c:var(--c-hoa); }
.calc__legend [data-series="ops"]{ --c:var(--c-ops); }
.calc__lines{ display:grid; grid-template-columns:minmax(0,1fr); }
.calc__line{ display:flex; justify-content:space-between; gap:12px; padding-block:10px; border-bottom:1px solid var(--line); font-size:var(--fs-sm); }
.calc__line > dt{ color:var(--text-2); }
.calc__line > dd{ margin:0; font-weight:600; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.calc__line--total{ border-top:2px solid var(--text); border-bottom:0; font-size:15px; }
.calc__line--total > dt,.calc__line--total > dd{ color:var(--text); font-weight:700; }
.calc__cta{ margin-top:4px; }
.calc__note{ font-size:var(--fs-micro); line-height:1.55; color:var(--muted); }
.calc--teaser .calc__results{ position:static; }
@media (min-width:640px){ .calc__results{ padding:32px; } .calc__group{ padding:24px; } }
@media (min-width:980px){
.calc:not(.calc--teaser){ grid-template-columns:minmax(0,1.4fr) minmax(320px,1fr); align-items:start; }
.calc:not(.calc--teaser) > .calc__head{ grid-column:1 / -1; }
.calc:not(.calc--teaser) > .calc__results{ position:sticky; top:calc(var(--header-h) + var(--tabs-h) + 16px); }
}
.fx-note{ font:500 var(--fs-micro)/1.5 var(--font-mono); color:var(--muted); overflow-wrap:anywhere; }
/* ==========================================================================
9. LEADS AND PEOPLE (§3.7)
========================================================================== */
/* ---- 9.1 Agent card ---- */
.agent-card{ display:grid; grid-template-columns:minmax(0,1fr); gap:16px; align-content:start; min-width:0; }
.agent-card__photo{ min-width:0; }
.agent-card__photo > img,.agent-card__photo > .placeholder--media{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius-md); }
.agent-card__photo > .placeholder--avatar{ --avatar:100%; width:100%; height:auto; border-radius:var(--radius-md); font-size:clamp(1.5rem,5vw,2.5rem); }
.agent-card__eyebrow{ flex-wrap:wrap; }
.agent-card__name{ font-size:var(--fs-h3); line-height:1.15; }
/* TREC: brokerage at no less than half the name size (§8.4). */
.agent-card__brokerage{ font-size:15px; line-height:1.4; color:var(--text-2); }
.agent-card__langs{ display:flex; flex-wrap:wrap; gap:8px; }
.agent-card__meta{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px; font-size:var(--fs-sm); }
.agent-card__meta > div{ display:grid; grid-template-columns:minmax(0,1fr); gap:2px; }
.agent-card__meta dt{ font:500 11px/1.3 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.agent-card__meta dd{ margin:0; }
.agent-card__actions{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px; }
.agent-card__status{
display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:var(--radius-sm);
background:var(--positive-soft); color:var(--positive); font:600 var(--fs-xs)/1.3 var(--font-sans);
}
.agent-card__status::before{ content:""; width:8px; height:8px; border-radius:50%; background:currentColor; flex:none; }
.agent-card__legal{ font-size:var(--fs-sm); line-height:1.6; color:var(--muted); }
.agent-card__legal a{ color:var(--text-2); }
.agent-card--full{ padding:var(--space-5); border-radius:var(--radius-lg); background:var(--surface-2); }
.agent-card--compact{ grid-template-columns:88px minmax(0,1fr); column-gap:16px; row-gap:8px; }
.agent-card--compact > *{ grid-column:2; }
.agent-card--compact > .agent-card__photo{ grid-column:1; grid-row:1 / span 4; }
.agent-card--compact .agent-card__photo > img,.agent-card--compact .agent-card__photo > .placeholder{ aspect-ratio:1; border-radius:var(--radius-md); }
.agent-card--compact .agent-card__photo > .placeholder--avatar{ --avatar:88px; width:88px; height:88px; font-size:30px; }
.agent-card--compact > .agent-card__actions,.agent-card--compact > .agent-card__legal{ grid-column:1 / -1; }
.agent-card--compact .agent-card__name{ font-size:var(--fs-h4); font-family:var(--font-sans); letter-spacing:0; }
.agent-card--band{
max-width:960px; margin-inline:auto; padding:clamp(28px,4vw,48px); border-radius:var(--radius-xl);
justify-items:center; text-align:center; column-gap:var(--space-6);
}
.agent-card--band .agent-card__photo{ position:relative; width:160px; }
.agent-card--band .agent-card__photo > img,.agent-card--band .agent-card__photo > .placeholder{ width:160px; height:160px; aspect-ratio:1; border-radius:50%; }
.agent-card--band .agent-card__photo > .placeholder--avatar{ --avatar:160px; font-size:52px; }
.agent-card--band .agent-card__photo::after{
content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--accent); transform:translate(6px,-4px); pointer-events:none;
}
/* Full portrait instead of the round avatar (home "Meet Ricardo"): the whole 4:5 photo, never cropped. */
.agent-card--portrait .agent-card__photo{ width:min(100%,300px); }
.agent-card--portrait .agent-card__photo > img{ width:100%; height:auto; aspect-ratio:4/5; border-radius:var(--radius-lg); }
.agent-card--portrait .agent-card__photo::after{ border-radius:var(--radius-lg); transform:translate(10px,-10px); }
.agent-card--band .agent-card__actions{ display:flex; flex-wrap:wrap; justify-content:center; }
.agent-card--band .eyebrow{ justify-content:center; }
@media (min-width:640px){
.agent-card--band{ grid-template-columns:160px minmax(0,1fr); justify-items:start; text-align:left; align-items:center; }
.agent-card--band.agent-card--portrait{ grid-template-columns:minmax(220px,300px) minmax(0,1fr); }
.agent-card--band > .agent-card__photo{ grid-row:1 / span 6; }
.agent-card--band > :not(.agent-card__photo){ grid-column:2; }
.agent-card--band .agent-card__actions{ justify-content:flex-start; }
.agent-card--band .eyebrow{ justify-content:flex-start; }
}
@media (min-width:980px){
.agent-card--full{ width:320px; position:sticky; top:calc(var(--header-h) + 24px); }
.profile > .agent-card--full,.profile > :first-child{ width:auto; }
}
/* ---- 9.2 Lead form, fields, choice tiles ---- */
.lead-form{ display:grid; grid-template-columns:minmax(0,1fr); gap:20px; min-width:0; }
.lead-form__heading{ font-size:var(--fs-h3); }
.lead-form--card{ padding:22px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow-2); }
.lead-form--dark{
padding:24px; border:1px solid var(--line); border-radius:var(--radius-lg);
background:rgba(255,255,255,.06); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.lead-form--inline{ padding:0; }
.lead-form__errors{
padding:12px 16px; border:1px solid var(--negative); border-radius:var(--radius-sm);
background:var(--negative-soft); color:var(--negative); font-size:var(--fs-sm);
}
.lead-form__errors:focus-visible{ box-shadow:var(--ring); }
.lead-form__errors a{ color:inherit; font-weight:600; }
.lead-form__errors ul{ margin:6px 0 0; padding-left:1.1em; }
.lead-form__grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px; min-width:0; }
.lead-form__grid > .field--full,.lead-form__grid > .field--tel,.lead-form__grid > fieldset,.lead-form__grid > .field:has(textarea){ grid-column:1 / -1; }
.lead-form__consent{ font-size:var(--fs-sm); }
.lead-form__actions{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px; }
.lead-form__micro{ font-size:var(--fs-xs); color:var(--muted); text-align:center; }
.lead-form__success{
display:grid; grid-template-columns:minmax(0,1fr); gap:12px; justify-items:start; padding:24px; border-radius:var(--radius-md);
background:var(--positive-soft); color:var(--text);
}
.lead-form__success:focus-visible{ box-shadow:var(--ring); }
@media (min-width:640px){
.lead-form--card{ padding:32px; }
.lead-form__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.field{ display:grid; grid-template-columns:minmax(0,1fr); gap:6px; align-content:start; min-width:0; }
legend.field__label{ float:left; width:100%; margin-bottom:6px; }
legend.field__label + *{ clear:both; }
.field__label{ font:500 var(--fs-sm)/1.4 var(--font-sans); color:var(--text); }
.field__optional{ font-weight:400; color:var(--muted); }
.field__control{
display:block; width:100%; min-height:var(--control-h); padding:0 14px;
border:1px solid var(--line-input); border-radius:var(--radius-sm); background-color:var(--surface); color:var(--text);
font:400 16px/1.4 var(--font-sans); transition:border-color var(--dur-fast) var(--ease);
}
.field__control::placeholder{ color:var(--muted); opacity:1; }
.field__control:hover{ border-color:var(--text-2); }
.field__control:focus,.field__control:focus-visible{ outline:2px solid transparent; border-color:var(--focus); box-shadow:var(--ring); border-radius:var(--radius-sm); }
textarea.field__control{ min-height:120px; padding:12px 14px; resize:vertical; line-height:1.5; }
select.field__control{
appearance:none; padding-right:40px; cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237D8580' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 14px center; background-size:16px;
}
.field__group{ display:grid; grid-template-columns:minmax(0,7.5rem) minmax(0,1fr); gap:8px; }
.field__cc{ padding-right:32px; background-position:right 10px center; }
.field.is-invalid .field__control,.field__control[aria-invalid="true"]{ border-color:var(--negative); }
.field__error{ display:flex; align-items:flex-start; gap:6px; font-size:var(--fs-xs); line-height:1.45; color:var(--negative); }
.field__error .icon{ width:16px; height:16px; margin-top:1px; }
.field__hint{ font-size:var(--fs-xs); line-height:1.45; color:var(--muted); }
.field--check{ display:flex; align-items:flex-start; gap:10px; font-size:var(--fs-sm); line-height:1.5; cursor:pointer; }
.field--check input{ flex:none; width:20px; height:20px; margin:1px 0 0; accent-color:var(--secondary); cursor:pointer; }
.field--check input:focus-visible{ box-shadow:var(--ring); border-radius:4px; }
.field--check a{ color:var(--link); }
.choice-tiles{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.choice-tiles--lg .choice-tile{ min-height:120px; }
.choice-tile{
position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:12px; min-height:96px; min-width:0;
padding:16px; border:1px solid var(--line-input); border-radius:var(--radius-md); background:var(--surface);
font:600 var(--fs-sm)/1.3 var(--font-sans); cursor:pointer; hyphens:auto;
transition:border-color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease);
}
.choice-tile:hover{ border-color:var(--text); }
.choice-tile > input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.choice-tile > .icon{ width:var(--icon-lg); height:var(--icon-lg); color:var(--icon-accent); }
.choice-tile small{ display:block; font-weight:400; color:var(--muted); font-size:var(--fs-xs); }
.choice-tile:has(> input:checked){
padding:15px; border:2px solid var(--secondary); background:var(--secondary-soft); box-shadow:inset 0 -3px 0 var(--secondary);
}
.choice-tile:has(> input:checked)::after{
content:""; position:absolute; top:10px; right:10px; width:20px; height:20px; border-radius:50%;
background:var(--secondary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/12px no-repeat;
}
.choice-tile:has(> input:focus-visible){ box-shadow:var(--ring); }
.choice-tile:has(> input:checked:focus-visible){ box-shadow:inset 0 -3px 0 var(--secondary),var(--ring); }
@media (min-width:980px){ .choice-tiles{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
/* ---- 9.3 Channel cards ---- */
.channel-card{
position:relative; display:grid; grid-template-columns:minmax(0,1fr); gap:12px; align-content:start; justify-items:start; min-width:0;
padding:var(--space-6) var(--space-5); border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface);
}
.channel-card h2,.channel-card h3{ font:600 var(--fs-h4)/1.3 var(--font-sans); letter-spacing:0; }
.channel-card > p:not([class]),.channel-card__text{ font-size:15px; color:var(--text-2); }
.channel-card--primary{ background:var(--accent-soft); border-color:transparent; }
.channel-card__badge{
position:absolute; top:-12px; left:24px; padding:5px 10px; border-radius:var(--radius-pill);
background:var(--surface-inverse); color:var(--text-inverse);
font:700 11px/1.2 var(--font-mono); letter-spacing:.1em; text-transform:uppercase;
}
.channel-card--list{ padding:8px var(--space-5); border:0; justify-items:stretch; gap:0; }
.channel-card__rows{ display:grid; grid-template-columns:minmax(0,1fr); }
.channel-card__row{
display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:2px 16px; padding-block:16px;
border-bottom:1px solid var(--line);
}
.channel-card__row:last-child{ border-bottom:0; }
.channel-card__label{ grid-column:1; font:500 11px/1.3 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.channel-card__value{ grid-column:1; font-size:15px; color:var(--text); overflow-wrap:anywhere; }
.channel-card__note{ grid-column:1; font-size:var(--fs-xs); color:var(--muted); }
.channel-card__action{ grid-column:2; grid-row:1 / span 3; }
@media (min-width:640px){ .channel-card{ padding:var(--space-6); } .channel-card--list{ padding:8px var(--space-6); } }
/* ---- 9.4 Booking ---- */
.booking{ display:grid; grid-template-columns:minmax(0,1fr); overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface); }
.booking__summary{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px; align-content:start; padding:var(--space-5); border-bottom:1px solid var(--line); }
.booking__embed{ display:grid; grid-template-columns:minmax(0,1fr); place-items:center; gap:16px; min-height:320px; padding:var(--space-5); }
.booking__tz{ grid-column:1 / -1; padding:12px var(--space-5); border-top:1px solid var(--line); font-size:var(--fs-xs); color:var(--muted); }
@media (min-width:980px){
.booking{ grid-template-columns:280px minmax(0,1fr); }
.booking__summary{ border-bottom:0; border-right:1px solid var(--line); }
}
/* ---- 9.5 Dialog (bottom sheet below 640) ---- */
.dialog{
width:100%; max-width:100%; max-height:calc(100dvh - 24px); margin:auto 0 0; padding:0;
border:0; border-radius:var(--radius-lg) var(--radius-lg) 0 0;
background:var(--surface); color:var(--text); box-shadow:var(--shadow-3);
}
.dialog[open]{ display:flex; flex-direction:column; }
.dialog::backdrop{ background:rgba(13,27,46,.6); }
.dialog__header{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 12px 12px 20px; border-bottom:1px solid var(--line); }
.dialog__title{ font:600 var(--fs-h4)/1.3 var(--font-sans); letter-spacing:0; }
.dialog__close{
display:grid; grid-template-columns:minmax(0,1fr); place-items:center; flex:none; width:var(--tap); height:var(--tap); padding:0;
border:0; border-radius:50%; background:transparent; color:var(--text);
}
.dialog__close:hover{ background:var(--surface-2); }
.dialog__close:focus-visible{ border-radius:50%; }
.dialog__body{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding:20px; }
.dialog__footer{
display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px;
padding:12px 20px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--line);
}
@media (min-width:640px){
.dialog{ width:min(520px,calc(100% - 48px)); max-height:calc(100dvh - 48px); margin:auto; border-radius:var(--radius-lg); }
.dialog__footer{ padding-bottom:12px; }
}
/* ==========================================================================
10. PAGE LAYOUTS (§3.7 page layouts)
========================================================================== */
.profile{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-7); }
.profile__main{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-7); min-width:0; }
@media (min-width:980px){ .profile{ grid-template-columns:320px minmax(0,1fr); align-items:start; } }
.area-layout{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-6); }
.area-layout__main{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-6); min-width:0; align-content:start; }
.area-layout__map{ min-height:320px; overflow:hidden; border-radius:var(--radius-md); background:var(--surface-2); }
@media (min-width:980px){ .area-layout{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-7); align-items:start; } }
@media (min-width:1200px){
.area-layout__map{ position:sticky; top:calc(var(--header-h) + 16px); height:calc(100vh - var(--header-h) - 32px); }
}
.guide-layout{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-6); }
.guide-layout__main{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-8); min-width:0; }
@media (min-width:980px){ .guide-layout{ grid-template-columns:240px minmax(0,1fr); gap:var(--space-8); align-items:start; } }
.toc{ border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface); }
.toc__summary,.toc__title{
display:flex; align-items:center; justify-content:space-between; min-height:52px; padding:0 16px;
font:500 var(--fs-label)/1.2 var(--font-mono); letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--eyebrow);
cursor:pointer; list-style:none;
}
.toc__summary::-webkit-details-marker{ display:none; }
.toc__summary::after{ content:""; width:7px; height:7px; border:solid currentColor; border-width:0 1.5px 1.5px 0; transform:rotate(45deg); }
.toc[open] > .toc__summary::after{ transform:rotate(-135deg); }
.toc__list{ display:grid; grid-template-columns:minmax(0,1fr); gap:2px; padding:0 8px 12px; }
.toc__link{
display:block; padding:8px 8px 8px 12px; border-left:2px solid transparent; border-radius:0 var(--radius-xs) var(--radius-xs) 0;
color:var(--text-2); font-size:var(--fs-sm); line-height:1.4; text-decoration:none;
}
.toc__link:hover{ color:var(--text); background:var(--surface-2); }
.toc__link[aria-current]{ border-left-color:var(--accent); color:var(--text); font-weight:600; }
@media (min-width:980px){
.toc{ position:sticky; top:calc(var(--header-h) + 24px); border:0; background:transparent; }
.toc__summary{ cursor:default; padding:0 0 8px; min-height:0; pointer-events:none; }
.toc__summary::after{ display:none; }
.toc__list{ padding:0; }
}
.prose{ max-width:var(--measure); font-size:17px; line-height:1.7; color:var(--text-2); }
.prose > * + *{ margin-top:1em; }
.prose :is(h2,h3,h4){ color:var(--text); }
.prose h2{ font-size:var(--fs-h3); line-height:1.25; margin-top:2em; }
.prose h3{ font:600 var(--fs-h4)/1.35 var(--font-sans); letter-spacing:0; margin-top:1.6em; }
.prose :is(h2,h3) + *{ margin-top:.6em; }
.prose > :first-child{ margin-top:0; }
.prose ul,.prose ol{ padding-left:1.3em; }
.prose li + li{ margin-top:.4em; }
.prose li::marker{ color:var(--accent); }
.prose strong{ color:var(--text); }
.prose a{ color:var(--link); }
.prose blockquote{ padding-left:20px; border-left:2px solid var(--accent); font:italic 400 1.35em/1.4 var(--font-serif); color:var(--text); }
.prose img,.prose figure{ border-radius:var(--radius-md); }
.prose figcaption{ margin-top:8px; font-size:var(--fs-xs); color:var(--muted); }
.prose table{ width:100%; font-size:15px; }
.prose th,.prose td{ padding:10px 8px; border-bottom:1px solid var(--line); text-align:left; }
.prose hr{ margin-block:2em; }
.error-page{ display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; gap:20px; padding-block:var(--section-y); text-align:center; }
.error-page__code{ font:400 var(--fs-stat-xl)/.9 var(--font-serif); letter-spacing:-.02em; color:var(--accent); font-variant-numeric:lining-nums; }
.error-page__title{ font-size:var(--fs-h2); max-width:22ch; }
.error-page__text{ color:var(--text-2); max-width:52ch; }
.error-page__search{ display:flex; gap:8px; width:100%; max-width:480px; }
.error-page__search .field__control{ flex:1; min-width:0; border-radius:var(--radius-pill); }
.error-page__links{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
/* ==========================================================================
11. MOTION + PRINT
========================================================================== */
@media (prefers-reduced-motion:reduce){
html{ scroll-behavior:auto; }
*,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
.marquee__track{ animation:none; }
[data-reveal="pending"]{ opacity:1; transform:none; }
.listing-card:hover,.area-card:hover,.collection-card:hover,a.card--link:hover{ transform:none; }
.listing-card:hover .listing-card__img,.strategy-card:hover .strategy-card__media > img,.strategy-card:focus-visible .strategy-card__media > img{ transform:none; }
}
@media print{
.site-header,.whatsapp-fab,.mobile-cta,.notice--lang,.notice--blockers,.filter-bar,.section-tabs,.skip-link{ display:none !important; }
.section--dark,.site-footer,.trust-grid,.calc__results,[data-theme="dark"]{ background:#fff !important; color:#000 !important; }
a{ color:#000; }
}