/* ═══════════════════════════════════════════════════════════════════════════
   CARNEIRO · Diretor — V2
   Built from the client's design comp of 17 Aug 2026 (see reference/README.md):
   a dark, high-contrast corporate brochure with a personal-brand hero.
     · deep navy ground for nav, hero, "Sobre a Cury", contact band and footer;
       pale grey-blue for the search, listings and "Seja um corretor" bands
     · one accent blue for every filled pill, link, badge and icon; a lighter
       blue for the highlighted word in a heading and for eyebrows on navy
     · uppercase, letter-spaced eyebrows above every section heading
     · large display type in the hero; hierarchy by size AND weight
     · white cards with a soft drop shadow and a pinned status pill
   This is deliberately NOT the Modern Realty Showcase discipline the sibling
   build (../cury-carneiro) follows — see CLAUDE.md, "What is different".

   Carried over from the sibling, unchanged in behaviour: the three glow
   effects (assets/css/glow-*.css), the search bar's markup contract and the
   listing-filter classes (.filters .chip .count .no-results), the gallery tabs,
   the simulator (.sim-*), the PF/PJ switcher and the form fields.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── colour ─────────────────────────────────────────────────────────── */
  --navy-950:#07111F;        /* footer, deepest ground */
  --navy-900:#0A1A2F;        /* nav, hero, dark bands */
  --navy-800:#0F2340;        /* raised panels on navy: stat strip, dark cards */
  --navy-700:#193556;        /* hairlines and hover on navy */
  --blue:#146CE4;            /* every filled control, link, badge, icon.
                                4.89:1 as text on white, 4.55:1 on --sky-50,
                                and 4.89:1 for white text ON it — one token has
                                to clear AA in both directions because it is used
                                as a foreground AND as a button fill. #2F80ED,
                                the comp's blue, measured 3.87:1 and failed both. */
  --blue-deep:#1260CA;       /* hover / pressed — 5.91:1 with white */
  --blue-light:#6FB1FF;      /* highlighted heading word, eyebrows on navy */
  --blue-tint:#E4EEFC;       /* icon tiles on light bands */
  --sky-50:#F4F7FB;          /* light bands */
  --sky-100:#E8EEF6;         /* light-band alt, borders on light */
  --white:#FFFFFF;
  --ink:#12213A;             /* headings on light */
  --ink-body:#3B4B63;        /* body on light */
  --ink-muted:#647287;       /* captions on light — 4.89:1 on white, 4.55:1 on
                                --sky-50. The previous #6B7A90 measured 4.36 and
                                4.06, so every card's neighbourhood line, every
                                form note and the listing count sat under AA. */
  --on-dark:#FFFFFF;
  --on-dark-muted:#B9C7DA;   /* body copy on navy */
  --on-dark-faint:#7F92AC;   /* captions on navy */
  /* WhatsApp's own darker brand teal rather than its light green: white
     on #25D366 measures 1.98:1, which fails even the 3:1 floor for a
     graphical element, and the floating button carries text elsewhere on
     the site. #118577 is 4.52:1 and still reads unmistakably as WhatsApp
     because the glyph, not the hue, is what is recognised. */
  --whatsapp:#118577;
  --whatsapp-deep:#0F7468;
  --danger:#D64545;

  /* ── shape ──────────────────────────────────────────────────────────── */
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-pill:999px;
  --shadow-card:0 12px 32px rgba(10,26,47,.10),0 2px 6px rgba(10,26,47,.06);
  --shadow-card-hover:0 18px 44px rgba(10,26,47,.16),0 4px 10px rgba(10,26,47,.08);
  --shadow-pill:0 8px 20px rgba(20,108,228,.28);

  /* ── space ──────────────────────────────────────────────────────────── */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --s-7:48px; --s-8:64px; --s-9:96px;

  --container:1200px;
  --nav-h:76px;
  --font:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:calc(var(--nav-h) + 12px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

body{
  font-family:var(--font);font-size:16px;line-height:1.6;font-weight:400;
  color:var(--ink-body);background:var(--white);
  padding-top:var(--nav-h);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%}
a{color:var(--blue)}
button,input,select,textarea{font:inherit;color:inherit}
strong{font-weight:700}

.container{max-width:var(--container);margin:0 auto;padding:0 24px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* ═══ SHARED TYPE ═══════════════════════════════════════════════════════════
   The eyebrow is the one thing the sibling build forbids and this design is
   built on. Small, uppercase, tracked, accent-coloured, always above an h2. */
.eyebrow{
  display:block;font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue);margin-bottom:var(--s-3);
}
/* Every dark ground, enumerated once. A dark band that forgets to opt in
   renders navy-on-navy — which is exactly what .talk did before this list
   replaced a two-class version of it. Add a dark band, add it here. */
.on-dark .eyebrow,.dark .eyebrow,.band-dark .eyebrow,.band-darkest .eyebrow,.talk .eyebrow,.hero .eyebrow,.pagehead .eyebrow,.detail-head .eyebrow{color:var(--blue-light)}
.section-title{
  font-size:clamp(26px,3.1vw,38px);font-weight:700;line-height:1.15;
  letter-spacing:-.015em;color:var(--ink);
}
.section-title .hl{color:var(--blue)}
.section-title--sm{font-size:24px}
.on-dark .section-title,.dark .section-title,.band-dark .section-title,.band-darkest .section-title,.talk .section-title,.hero .section-title,.pagehead .section-title,.detail-head .section-title{color:var(--on-dark)}
.on-dark .section-title .hl,.dark .section-title .hl,.band-dark .section-title .hl,.band-darkest .section-title .hl,.talk .section-title .hl,.hero .section-title .hl,.pagehead .section-title .hl,.detail-head .section-title .hl{color:var(--blue-light)}
.lede{font-size:17px;line-height:1.65;color:var(--ink-body);max-width:56ch}
.on-dark .lede,.dark .lede,.band-dark .lede,.band-darkest .lede,.talk .lede,.hero .lede,.pagehead .lede,.detail-head .lede{color:var(--on-dark-muted)}
.sec-head{margin-bottom:var(--s-6)}
.sec-head .lede{margin-top:var(--s-3)}
.sec-head .lede + .lede{margin-top:var(--s-4)}
.sec-head--split{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-6);flex-wrap:wrap}
.sec-head--mt{margin-top:var(--s-8)}
/* a source or qualifier note under a band's figures — where a number comes
   from, or what it does not claim. Both grounds, because these notes sit on
   navy as often as on white. */
.band-note{font-size:13px;line-height:1.6;color:var(--ink-muted);margin-top:var(--s-5);max-width:80ch}
.band-note a{color:var(--blue)}
.on-dark .band-note,.dark .band-note,.band-dark .band-note,.band-darkest .band-note{color:var(--on-dark-faint)}
.on-dark .band-note a,.dark .band-note a,.band-dark .band-note a,.band-darkest .band-note a{color:var(--on-dark-muted)}
/* copy on one side, a list or a second column of copy on the other — the
   .about-cury shape without its middle photograph column. Unlike .two-col it
   sets no colours, so it works on a dark band as well as a light one. */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-7);align-items:start}

/* ═══ BUTTONS ═══════════════════════════════════════════════════════════════
   Filled blue pills carrying an arrow or a WhatsApp glyph, outline pills on
   dark, and a quiet text button. The comp has many filled pills; that is the
   design, not a slip. */
.btn,.btn-outline,.btn-ghost,.btn-quiet{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:600;font-size:15px;line-height:1.2;text-decoration:none;
  border-radius:var(--r-pill);padding:14px 24px;cursor:pointer;
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease,box-shadow .25s ease;
  white-space:nowrap;
}
.btn{background:var(--blue);color:#fff;border:1px solid var(--blue);box-shadow:var(--shadow-pill)}
.btn:hover{background:var(--blue-deep);border-color:var(--blue-deep);transform:translateY(-1px)}
.btn svg,.btn-outline svg,.btn-ghost svg,.btn-quiet svg{width:18px;height:18px;fill:currentColor;flex:none}
.arr{width:16px;height:16px;fill:currentColor;flex:none;
  vertical-align:-2px;display:inline-block}
/* white outline on navy */
.btn-outline{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55)}
.btn-outline:hover{background:#fff;color:var(--navy-900);border-color:#fff}
/* navy outline on light */
.btn-ghost{background:transparent;color:var(--ink);border:1px solid rgba(18,33,58,.35)}
.btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-quiet{background:transparent;color:var(--ink-muted);border:1px solid transparent;padding:14px 12px}
.btn-quiet:hover{color:var(--ink)}
.btn-wa{background:var(--whatsapp);border-color:var(--whatsapp);box-shadow:0 8px 20px rgba(17,133,119,.28)}
.btn-wa:hover{background:var(--whatsapp-deep);border-color:var(--whatsapp-deep)}
.btn-lg{font-size:17px;padding:18px 30px}
/* the arrow-link idiom on cards and section heads */
.more{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--blue);text-decoration:none}
.more svg{width:16px;height:16px;fill:currentColor;transition:transform .25s ease}
.more:hover svg{transform:translateX(3px)}
.on-dark .more,.dark .more,.band-dark .more,.band-darkest .more,.talk .more,.hero .more,.pagehead .more,.detail-head .more{color:var(--blue-light)}

/* ═══ NAV ══════════════════════════════════════════════════════════════════
   Fixed, dark, unchanged on scroll — the comp's bar. Wordmark left, six links,
   one filled CTA. Same rules as the sibling on width: the bar has no flex-wrap
   and its links are nowrap, so the row fits or it pushes the pill off the edge.
   Two squeeze steps (1200 / 1110) run before the hamburger takes over at 992.

   ⚠ EVERY SELECTOR IN THIS SECTION IS `header nav`, NOT `nav`. Unscoped, they
   claimed every <nav> on the site: the jump list on sobre-a-cury.html came
   out position:absolute under the header, navy-backgrounded and stacked in a
   column, because the mobile-menu block below sets exactly that on `nav`. The
   scoping raises every rule here by one element uniformly, so their order
   among themselves is unchanged. Keep new rules scoped. */
header{
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:50;
  background:var(--navy-900);border-bottom:1px solid rgba(255,255,255,.06);
}
header .container{height:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s-4)}
/* the CARNEIRO wordmark — cut out of the brand artwork (build/markbuild.py),
   sitting straight on the bar as the comp shows it. glow-img lights it as the
   cursor crosses. line-height:0 kills the inline descender gap the effect's
   README warns about. */
/* The official lockups replaced the old wordmark on 25 Aug 2026, and they are
   a different SHAPE: the horizontal one is 401x140 (2.86:1) where the old
   wordmark was 640x124 (5.16:1). Sized by width at the old 172px it stood
   60px tall inside a 76px bar. The header therefore sizes the logo by HEIGHT
   and lets the width follow; the footer, which carries the taller VERTICAL
   lockup, still sizes by width. */
.brand{display:block;line-height:0;flex:none}
.brand img{width:100%;height:auto;display:block}
/* ⚠ Size the header logo by WIDTH, never by height. glow-img wraps the <img>
   in <span class="glow-img-base">, so the image's parent is an auto-height
   span: `height:100%` has nothing definite to resolve against, silently falls
   back to auto, and the logo renders at its intrinsic 401x140 — overflowing a
   76px bar. Same family as the glow-text span trap in the nav.
   126px on a 401x140 lockup is 44px tall, which is what the bar allows. */
header .brand{width:126px}
/* ── the "shiny" the client asked to keep, on a near-white mark ──────────
   glow-img works by masking a BRIGHTENED copy over the base, which is the
   right model for a photograph but does almost nothing to white letterforms:
   #FFF cannot get brighter, so at the library default (--dim:1, lift 1.55)
   the effect was mounted and running but produced no visible light.
   That reasoning applied to the OLD wordmark, which was near-white: white
   cannot brighten, so the base was dimmed to .82 and the pointer restored it.

   The official lockup replaced it on 25 Aug 2026 and the tuning is undone:
   --dim is back to 1. Two reasons. It is real brand artwork from a manual,
   and dimming a logo by 18% whenever a pointer is absent is altering it.
   And it no longer needs the trick — the mark is GOLD, which has somewhere
   to go, so the lift alone reads. Touch and reduced-motion are unaffected;
   the library forces --dim:1 there anyway. */
.brand[data-glow-img]{--glow-radius:120px;--glow-lift:1.22;--glow-sat:1.25;--dim:1;--glow-fade:.3s}

header nav{display:flex;align-items:center;gap:2px}
header nav a{
  color:rgba(255,255,255,.86);text-decoration:none;font-size:15px;font-weight:500;
  padding:10px;border-radius:var(--r-sm);white-space:nowrap;
  transition:color .25s ease;position:relative;
}
header nav a:hover{color:#fff}
/* ── glow-text on the labels: the same light that crosses the wordmark ──
   --dim raised from the effect's .55: these are 15px interactive labels and
   .55 white on #0A1A2F still clears 3:1, but .8 keeps the resting bar reading
   as one row rather than a row of dimmed items. Radius tightened to a label's
   width so the pool travels between links instead of lighting three at once. */
header nav a[data-glow-text]{--dim:.8;--glow-radius:80px;--glow-fade:.28s}
header nav a[data-glow-text] .glow-text-lit{padding:inherit}
header nav a[data-glow-text]:hover{color:var(--glow-color)}
/* current page — a short blue rule under the label, as the comp draws Início */
header nav a[aria-current]::after{
  content:"";position:absolute;left:10px;right:10px;bottom:4px;height:2px;
  border-radius:2px;background:var(--blue-light);
}
header nav a.cta{
  margin-left:var(--s-2);background:var(--blue);color:#fff;font-weight:600;
  font-size:14.5px;padding:11px 16px;border-radius:var(--r-pill);
  display:inline-flex;align-items:center;gap:7px;
  box-shadow:0 6px 16px rgba(20,108,228,.3);
}
header nav a.cta:hover{background:var(--blue-deep)}
header nav a.cta svg{width:17px;height:17px;fill:currentColor}
header nav a.cta[aria-current]::after{display:none}
.nav-toggle{
  display:none;background:transparent;border:1px solid rgba(255,255,255,.35);
  border-radius:var(--r-sm);color:#fff;width:44px;height:44px;font-size:20px;cursor:pointer;
}

/* ═══ HERO ═════════════════════════════════════════════════════════════════
   Navy over a São Paulo skyline, with a stat strip overlapping the foot.
   Single column: the portrait and its placeholder were both removed on
   25 Aug 2026 at the client's instruction. The skyline is a Cury
   development's own rooftop view. */
.hero{
  position:relative;background:var(--navy-900) center/cover no-repeat;
  color:var(--on-dark);overflow:hidden;
  padding:72px 0 120px;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(10,26,47,.96) 0%,rgba(10,26,47,.88) 42%,rgba(10,26,47,.55) 70%,rgba(10,26,47,.7) 100%),
    linear-gradient(180deg,rgba(10,26,47,.2) 0%,rgba(10,26,47,.85) 100%);
}
/* ONE column: there is no portrait and no placeholder (client, 25 Aug 2026).
   This was a 1.05fr/.95fr two-column grid with the figure on the right; left
   as-is after removing the figure it pinned the copy to ~52% and left a hole.
   The copy is capped instead of running the full 1200, both for measure and
   so it clears .hero-side, which is absolutely positioned at the right. */
.hero .container{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-7);align-items:center}
.hero .hero-copy{max-width:760px}
.hero .hero-copy .eyebrow{color:var(--on-dark-faint);line-height:1.9;letter-spacing:.2em}
.hero h1{
  font-size:clamp(38px,5vw,60px);font-weight:800;line-height:1.05;letter-spacing:-.02em;
  margin:var(--s-4) 0 var(--s-5);color:#fff;
}
.hero h1 .hl{color:var(--blue-light)}
.hero .lede{color:var(--on-dark-muted);font-size:17px;max-width:44ch}
.hero-actions{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-6)}
.hero-side{
  position:absolute;right:0;top:8%;font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--on-dark-faint);line-height:1.9;text-align:left;
}

/* ═══ STAT STRIP ═══════════════════════════════════════════════════════════ */
.stats-wrap{position:relative;z-index:2;margin-top:-72px}
.stats{
  background:var(--navy-800);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);
  display:grid;grid-template-columns:repeat(4,1fr);
  box-shadow:0 20px 50px rgba(7,17,31,.35);color:var(--on-dark);
}
.stat{display:flex;align-items:center;gap:var(--s-4);padding:26px 28px;border-left:1px solid rgba(255,255,255,.1)}
.stat:first-child{border-left:0}
.stat svg{width:40px;height:40px;fill:none;stroke:var(--blue-light);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.stat strong{display:block;font-size:22px;font-weight:700;line-height:1.1;letter-spacing:-.01em}
.stat span{display:block;font-size:14px;color:var(--on-dark-muted);margin-top:3px}
/* the fourth item is a claim, not a figure: same two-line shape, label size */
.stat--label strong{font-size:15px;font-weight:600}
.stat--label span{font-size:15px;font-weight:600;color:var(--on-dark);margin-top:0}

/* ═══ BANDS ════════════════════════════════════════════════════════════════ */
.band{padding:var(--s-9) 0}
.band-light{background:var(--sky-50)}

/* ── the Minha Casa Minha Vida mark beside the Vantagens heading ──────────
   The heading keeps its own measure and the mark sits to its right. The mark
   is a fixed, non-shrinking column: it is a government logo, so it must not
   be squashed to fit - below 780px the row stacks instead and the mark drops
   to a size that still reads on a phone.

   .sec-head already caps its own text width, so nothing here re-caps it. */
.vant-head{display:flex;align-items:center;gap:var(--s-7);justify-content:space-between;margin-bottom:var(--s-6)}
/* the 32px .sec-head normally puts under itself moves onto the row, or the
   cards below end up flush against the heading */
.vant-head .sec-head{margin-bottom:0}
.vant-mark{width:200px;height:auto;flex:none;display:block}
@media (max-width:780px){
  .vant-head{flex-direction:column;align-items:flex-start;gap:var(--s-4)}
  .vant-mark{width:150px}
}
.band-white{background:var(--white)}
.band-dark,.dark{background:var(--navy-900);color:var(--on-dark-muted)}
.band-darkest{background:var(--navy-950);color:var(--on-dark-muted)}
.band-tight{padding:var(--s-8) 0}
/* the faint chevron texture the comp puts on the right of its navy bands */
.band-dark.chevrons{position:relative;overflow:hidden}
.band-dark.chevrons::after{
  content:"";position:absolute;right:-6%;top:-10%;width:34%;height:120%;pointer-events:none;
  background:repeating-linear-gradient(-58deg,rgba(111,177,255,.06) 0 22px,transparent 22px 60px);
  mask-image:linear-gradient(90deg,transparent,#000 40%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 40%);
}
.band-dark.chevrons > .container{position:relative;z-index:1}

/* ═══ SEARCH BAND ══════════════════════════════════════════════════════════
   Copy left, the search card right. The bar is the sibling's exact contract:
   three selects named estado / regiao / dormitorios with data-key on every
   option, a JSON facets blob, cross-filtered by site.js §2c. Only the skin
   changed — labelled fields in a white card and a filled pill, per the comp. */
.search-band .container{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:var(--s-7);align-items:center}
.searchcard{
  background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow-card);
  padding:var(--s-5) var(--s-6);
}
.searchbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4) var(--s-3);align-items:end}
/* the pill spans the row beneath the selects: at three-across it was
   taking ~170px off controls that are the point of the band */
.searchbar > .btn{grid-column:1/-1;justify-self:start;padding-inline:32px}
.searchbar .field{margin:0}
.searchbar label{display:block;font-size:12px;font-weight:600;color:var(--ink-muted);margin-bottom:6px;letter-spacing:.02em}
.searchbar select{
  width:100%;height:46px;border:1px solid var(--sky-100);border-radius:var(--r-sm);
  background:var(--sky-50);color:var(--ink);font-size:15px;font-weight:500;padding:0 36px 0 14px;
  appearance:none;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='%2312213A' stroke-width='2.2' 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 12px center;background-size:16px 16px;
}
.searchbar select:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.searchbar button{height:46px}
/* the same bar on the listings page head sits on navy: card stays white */
.pagehead .searchcard{margin-top:var(--s-6);max-width:920px}

/* ═══ LISTINGS ═════════════════════════════════════════════════════════════ */
.tabs{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.tab{
  background:transparent;border:0;border-radius:var(--r-pill);padding:10px 16px;
  font-size:15px;font-weight:600;color:var(--ink-muted);cursor:pointer;
  transition:background .25s ease,color .25s ease;
}
.tab:hover{color:var(--ink)}
.tab.is-on{background:var(--white);color:var(--ink);box-shadow:0 2px 8px rgba(10,26,47,.08);position:relative}
.tab.is-on::after{content:"";position:absolute;left:16px;right:16px;bottom:5px;height:2px;border-radius:2px;background:var(--blue)}
.band-white .tab.is-on{background:var(--sky-50)}
.tabs .more{margin-left:var(--s-4)}

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-5)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.card{
  background:var(--white);border-radius:var(--r-md);overflow:hidden;
  box-shadow:var(--shadow-card);transition:box-shadow .3s ease,transform .3s ease;
  display:flex;flex-direction:column;
}
/* ⚠ THIS RULE IS LOAD-BEARING. site.js filters by setting card.hidden, and the
   UA's [hidden]{display:none} is a USER-AGENT rule — the author `display:flex`
   above beats it, so without this every "hidden" card kept rendering and the
   filters did nothing while the count claimed otherwise. Same trap as
   .gallery[hidden] below, and as the sibling build's CLAUDE.md records for it.
   Any element the JS hides needs this if an author rule sets its display. */
.card[hidden]{display:none}
.card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-3px)}
.card-link{display:flex;flex-direction:column;flex:1;color:inherit;text-decoration:none}
.card .shot{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--sky-100)}
.card .shot img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.card:hover .shot img{transform:scale(1.04)}
.badge{
  position:absolute;left:14px;top:14px;background:var(--blue);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 12px;border-radius:var(--r-pill);box-shadow:0 4px 12px rgba(10,26,47,.25);
}
/* Both carry 11px bold TEXT, which WCAG does not count as large, so they
   need 4.5:1 and not the 3:1 a purely graphical badge would. */
.badge--obras{background:#0B8483}   /* 4.52:1 with white */
.badge--pronto{background:#12883E}  /* 4.55:1 with white */
.card .body{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:18px;font-weight:700;line-height:1.25;color:var(--ink);letter-spacing:-.01em;transition:color .25s ease}
.card:hover h3{color:var(--blue)}
.card .where{font-size:13.5px;color:var(--ink-muted);margin-top:4px}
.card .facts{display:flex;flex-wrap:wrap;gap:6px 14px;margin:12px 0 0;padding:0;list-style:none;font-size:13px;color:var(--ink-body)}
.card .facts li{display:inline-flex;align-items:center;gap:6px}
.card .facts svg{width:15px;height:15px;fill:none;stroke:var(--blue);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card .tagline{font-size:14px;color:var(--ink-body);margin-top:10px;line-height:1.5}
.card .body .more{margin-top:auto;padding-top:14px;font-size:14px}
/* No price line, deliberately: no price data exists and Cury publishes none
   on cards. The comp's "A partir de R$" row is an open decision — see
   CLAUDE.md. */

/* a listing whose photography has not arrived: text on a flat field, never a
   stand-in image (it would read as that development's own photo) */
.shot-soon{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  background:var(--sky-50);color:var(--ink-muted);font-size:14px;
  border:1px dashed var(--sky-100);
}
.shot-empty{display:block;width:100%;height:100%;background:var(--sky-100)}

/* the listings-page filter row — the sibling's classes, restyled */
.filters{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;margin-bottom:var(--s-6)}
.filter-label{font-size:14px;font-weight:600;color:var(--ink-muted);margin-right:var(--s-1)}
.chip{
  border:1px solid rgba(18,33,58,.18);border-radius:var(--r-pill);background:var(--white);
  padding:8px 16px;font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.chip:hover{border-color:var(--blue);color:var(--blue)}
.chip.is-on{background:var(--blue);border-color:var(--blue);color:#fff}
.count{margin-left:auto;font-size:14px;color:var(--ink-muted)}
.filter-clear{font-size:14px;color:var(--ink-muted);text-decoration:underline;text-underline-offset:3px;margin-left:var(--s-2)}
.filter-clear:hover{color:var(--ink)}
.no-results{text-align:center;padding:var(--s-8) 0;color:var(--ink-body)}
.no-results a{color:var(--blue)}
.grid-foot{text-align:center;margin-top:var(--s-7)}

/* ═══ SOBRE A CURY ═════════════════════════════════════════════════════════ */
.about-cury .container{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr) minmax(0,.7fr);gap:var(--s-7);align-items:center}
.about-cury .lede{margin:var(--s-5) 0 var(--s-6)}
/* Cury's "Quem somos" copy runs to two paragraphs of one thought. The rule
   above spaces a lede against a heading and a button, which between two
   paragraphs reads as another band division — 32px where a paragraph break
   wants 12. */
.about-cury .lede:not(:last-of-type){margin-bottom:var(--s-3)}
.about-cury .lede + .lede{margin-top:0}
.about-shot{border-radius:var(--r-lg);overflow:hidden;box-shadow:0 20px 50px rgba(7,17,31,.45);aspect-ratio:1.28}
.about-shot img{width:100%;height:100%;object-fit:cover}
.pillars{list-style:none;display:flex;flex-direction:column}
.pillars li{display:flex;align-items:center;gap:var(--s-4);padding:16px 0;border-bottom:1px solid rgba(255,255,255,.1);color:var(--on-dark)}
.pillars li:last-child{border-bottom:0}
.pillars strong{display:block;font-size:15px;font-weight:600;line-height:1.3}
.pillars small{display:block;font-size:13.5px;color:var(--on-dark-muted);line-height:1.4}
.icon-tile{
  width:44px;height:44px;flex:none;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  background:rgba(111,177,255,.12);border:1px solid rgba(111,177,255,.25);
}
.icon-tile svg{width:22px;height:22px;fill:none;stroke:var(--blue-light);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.band-light .icon-tile,.band-white .icon-tile{background:var(--blue-tint);border-color:transparent}
.band-light .icon-tile svg,.band-white .icon-tile svg{stroke:var(--blue)}

/* ═══ SEJA UM CORRETOR ═════════════════════════════════════════════════════ */
.join .container{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr) minmax(0,.9fr);gap:var(--s-7);align-items:center}
.join .lede{margin:var(--s-4) 0 var(--s-6)}
.perks{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-5) var(--s-4)}
/* Modifiers, NOT inline styles. An inline grid-template-columns beats
   every media query below it, so a band overridden inline stays
   multi-column on a phone and pushes the page sideways — which is
   exactly what seja-um-corretor.html did at 375px before this. */
.perks.perks--4{grid-template-columns:repeat(4,1fr)}
.steps.steps--2{grid-template-columns:repeat(2,1fr)}
.perks li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.35}
.team-shot{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-card);aspect-ratio:1.25;background:var(--navy-800)}
.team-shot img{width:100%;height:100%;object-fit:cover}
/* the team-photo slot: sized like the comp's photograph */
.team-slot{
  aspect-ratio:1.25;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;
  /* --ink-body, not --ink-muted: this is the one place text sits on
     --sky-100, where muted measures 4.19:1 and fails AA. 7.58:1 here. */
  text-align:center;padding:var(--s-6);color:var(--ink-body);font-size:14px;background:var(--sky-100);
}

/* ═══ CONTACT BAND ═════════════════════════════════════════════════════════ */
.talk{position:relative;background:var(--navy-900) center/cover no-repeat;color:var(--on-dark)}
/* The same trap as .pagehead--photo, and this one was already shipping: a
   90deg scrim assumes the text sits in a left column, which stops being true
   the moment .talk stacks. Measured on a 390px phone the lede came out at
   4.12:1 and the eyebrow at 3.16:1, both under AA, on every page of the
   site. Flat below 1120, where the two columns become one. */
.talk::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,26,47,.95) 0%,rgba(10,26,47,.82) 55%,rgba(10,26,47,.7) 100%)}
@media (max-width:1120px){
  .talk::before{background:linear-gradient(180deg,rgba(10,26,47,.93),rgba(10,26,47,.95))}
}
.talk .container{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--s-7);flex-wrap:wrap}
.talk .lede{margin-top:var(--s-3)}
.talk-cta{text-align:right}
.talk-cta small{display:block;margin-top:var(--s-3);font-size:13px;color:var(--on-dark-muted)}

/* ═══ FOOTER ═══════════════════════════════════════════════════════════════ */
footer{background:var(--navy-950);color:var(--on-dark-muted);padding:var(--s-8) 0 var(--s-6);font-size:14px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr auto;gap:var(--s-7);align-items:start}
.fbrand .brand{width:150px;margin-bottom:var(--s-4)}   /* vertical lockup: 150px wide is ~106 tall */
.fbrand p{max-width:30ch;line-height:1.55}
.fcol h3{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-light);margin-bottom:var(--s-4)}
.fcol a{display:block;color:var(--on-dark-muted);text-decoration:none;padding:4px 0;transition:color .2s ease}
.fcol a:hover{color:#fff}
.fcol .row{display:flex;align-items:flex-start;gap:10px;padding:5px 0;color:var(--on-dark-muted)}
.fcol .row svg{width:16px;height:16px;flex:none;margin-top:3px;fill:none;stroke:var(--blue-light);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fcol .row a{display:inline;padding:0}
/* the Cury mark on the dark footer — SVG artwork, so it takes the glow-logo
   effect (dim base + lit overlay); on this dark ground the glow has room to
   read, unlike the sibling's white footer where it stood down */
.fcury{justify-self:end}
.fcury .glow-logo{width:150px;display:block}
.fcury .glow-logo svg{display:block;width:100%;height:auto}
.social{display:flex;gap:10px;margin-top:var(--s-4)}
.social a{
  width:36px;height:36px;border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;color:var(--on-dark-muted);
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.social svg{width:17px;height:17px;fill:currentColor}
/* the platform's own colour on hover — a recognised icon reads faster than a
   uniform one; at rest they sit quiet in the footer's grey */
.social a[data-net="instagram"]:hover{background:#E4405F;border-color:#E4405F;color:#fff}
.social a[data-net="tiktok"]:hover{background:#000;border-color:#000;color:#fff}
.social a[data-net="linkedin"]:hover{background:#0A66C2;border-color:#0A66C2;color:#fff}
.social a[data-net="whatsapp"]:hover{background:var(--whatsapp);border-color:var(--whatsapp);color:#fff}
.social a[data-net="facebook"]:hover{background:#1877F2;border-color:#1877F2;color:#fff}
.social a[data-net="youtube"]:hover{background:#FF0000;border-color:#FF0000;color:#fff}
.fbar{
  margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid rgba(255,255,255,.08);
  display:flex;justify-content:space-between;gap:var(--s-5);flex-wrap:wrap;align-items:flex-start;
}
.legal p{font-size:12.5px;line-height:1.6;color:var(--on-dark-faint)}
.legal a{color:var(--on-dark-muted)}
.legal a:hover{color:#fff}
.flinks{display:flex;gap:var(--s-4);font-size:12.5px;white-space:nowrap}
.flinks a{color:var(--on-dark-muted);text-decoration:none}
.flinks a:hover{color:#fff;text-decoration:underline}

/* ═══ FLOATING WHATSAPP ════════════════════════════════════════════════════
   Not in the comp; carried from the sibling because it is the persistent
   conversion path on a lead-generation site. Lower right, so it never sits on
   the hero's portrait or the footer's wordmark. */
.fab{
  position:fixed;right:24px;bottom:24px;width:58px;height:58px;z-index:40;
  display:flex;align-items:center;justify-content:center;border-radius:var(--r-pill);
  background:var(--whatsapp);color:#fff;text-decoration:none;
  box-shadow:0 8px 24px rgba(0,0,0,.28);transition:background .25s ease,transform .25s ease;
}
.fab:hover{background:var(--whatsapp-deep);transform:scale(1.06)}
.fab svg{width:30px;height:30px;fill:currentColor}
.fab-slot{display:contents}   /* must never become a positioned box of its own */
.fab:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* ═══ CONTENT SLOTS ════════════════════════════════════════════════════════
   data-slot="what" still marks anything awaiting real client content, but
   the dashed outline and the explanatory legend were removed at the
   client's instruction (19 Sep 2026) — visitors were seeing them. The
   attributes themselves stay in the markup as inert, grep-able markers. */

/* ── Real Estate Awards 2026, the client's three ceremony images ──────────
   A figure row under the award cards on Quem Somos. They are portrait-ish
   screenshots of very different proportions, so the row sizes by column and
   lets each image keep its own aspect rather than cropping - a cropped award
   card loses the text that IS the content.

   .premio-shots[hidden] is not needed, but the [data-slot] outline is: while
   any of the three is missing the row carries it, and _premio_shots() drops
   it by itself once all three are on disk. */
.premio-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5);margin-top:var(--s-6);align-items:start}
.premio-shots--empty{display:block}
.premio-shot{margin:0}
.premio-shot img{width:100%;height:auto;display:block;border-radius:var(--r-md);background:var(--navy-900);box-shadow:0 2px 12px rgba(10,26,47,.12)}
.premio-shot figcaption{margin-top:var(--s-2);font-size:13px;line-height:1.45;color:var(--ink-muted)}
@media (max-width:1120px){
  .premio-shots{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .premio-shots{grid-template-columns:1fr}
}

/* ═══ INNER PAGES ══════════════════════════════════════════════════════════ */
.pagehead{background:var(--navy-900);color:var(--on-dark);padding:var(--s-8) 0 var(--s-8);position:relative;overflow:hidden}
.pagehead h1{font-size:clamp(32px,4vw,46px);font-weight:800;line-height:1.1;letter-spacing:-.02em;margin-bottom:var(--s-3)}
.pagehead .lede{color:var(--on-dark-muted);max-width:60ch}
.pagehead .crumb{font-size:13px;color:var(--on-dark-faint);margin-bottom:var(--s-4)}
.pagehead .crumb a{color:var(--on-dark-muted);text-decoration:none}
.pagehead .crumb a:hover{color:#fff}
.pagehead .note{margin-top:var(--s-3);font-size:14px;color:var(--on-dark-muted)}
.pagehead .note a{color:#fff;text-underline-offset:3px}
.pagehead .badge{position:static;display:inline-block;margin-bottom:var(--s-3)}
/* ── a scenic band instead of flat navy ───────────────────────────────────
   The photograph is decorative, so it is a background rather than an <img>:
   it says nothing a screen reader needs, and it must not be read as the
   page's meaningful image.

   The scrim is NOT a taste decision. #FFFFFF, --on-dark-muted (#B9C7DA) and
   --blue-light (#6FB1FF) each have to clear 4.5:1 against the COMPOSITE of
   photo + scrim, and these are bright renders - open sky across exactly the
   strip the heading sits on. Measured over the eight images actually used,
   at 1920/1600/1440/1280/1200/1121/1120/900/600/390: the worst case is the
   eyebrow at 5.67:1, the lede at 7.37:1.

   TWO rules, because one gradient cannot hold both ends:

     >= 1121   a 90deg wash - heavy where the text is, opening to .70 on the
               right so the city is actually visible. This is ONLY safe
               because the text column is capped at 680px below and so never
               reaches the light end.
     <= 1120   the text spans the whole container, so there is no dark side
               left to hide in and the wash goes flat. Same width the nav
               drops to a hamburger at, for the same underlying reason: below
               it, content stops having a left column and a right column.

   The first attempt at this used a single 90deg gradient at every width and
   measured only the left 62% of the band. It read as passing and was not -
   at 1000px wide the text runs into the .70 end and the eyebrow falls to
   4.09:1. If this is retuned, sample the FULL width the text can occupy. */
.pagehead--photo{background-color:var(--navy-900);background-position:center;background-size:cover;background-repeat:no-repeat}
.pagehead--photo::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,26,47,.92),rgba(10,26,47,.94))}
.pagehead--photo > .container{position:relative}
/* the cap that makes the desktop gradient safe - do not remove it without
   re-measuring, and note .searchcard is deliberately exempt: it is an opaque
   white card, so it carries its own contrast wherever it lands */
.pagehead--photo h1,.pagehead--photo .lede,.pagehead--photo .note,.pagehead--photo .eyebrow{max-width:680px}
@media (min-width:1121px){
  .pagehead--photo::before{background:linear-gradient(90deg,rgba(10,26,47,.94) 0%,rgba(10,26,47,.89) 62%,rgba(10,26,47,.70) 100%)}
}

.detail-head{min-height:420px;display:flex;align-items:flex-end;background:var(--navy-900) center/cover no-repeat;padding-bottom:var(--s-7)}
/* The scrim opens at .60, not the .35 it used to. Measured, not chosen: the
   crumb sits high in the band where the wash is thinnest, and at .35 it was
   failing AA on EVERY ONE of the 90 photographed listing heroes - worst
   1.60:1, best 2.37:1, against the 4.5 a 13px label needs. That was live.

   --on-dark-faint (#7F92AC) is the cause: it measures 5.65:1 on flat navy,
   which is where it was calibrated, but these heroes are bright renders and
   the crumb was reading against sky, not navy. Two things fix it together -
   the crumb moves up to --on-dark-muted below, and the wash opens at .60.
   Either alone is not enough: muted at .35 still only reaches 2.97:1, and
   keeping faint would force the crumb to pure white, which flattens it into
   the h1. Worst case now is 4.81:1 across all 90.

   If this is retuned, measure at the CRUMB line (y 205-227 of a 420px band),
   not at the heading - the heading always passes and will hide the fault. */
.detail-head::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,26,47,.60),rgba(10,26,47,.94))}
/* not --on-dark-faint: see above. The hierarchy is carried by size (13px
   against a 46px h1), which survives the colour change. */
.detail-head .crumb,.detail-head .crumb a{color:var(--on-dark-muted)}
.detail-head .container{position:relative}
.detail-head .sub{color:var(--on-dark-muted);font-size:16px}
/* Says out loud that the header is a city view, not this development. These
   pages carry NO gallery band, so the header is the only picture on them and
   nothing else on the page would tell a visitor the difference. It sits at
   the very bottom of the band where the scrim is ~.92, so --on-dark-muted
   clears AA comfortably. It carries data-slot too: the real photography is
   still owed, and this is the map of what is owed. */
.detail-head .hero-note{margin-top:var(--s-3);font-size:13px;color:var(--on-dark-muted);max-width:52ch}

.prose{max-width:760px}
.prose p{margin-bottom:var(--s-4);color:var(--ink-body)}
.prose .lead{font-size:17px;font-weight:600;color:var(--ink)}
.prose h2{margin:var(--s-6) 0 var(--s-3)}
.prose ul,.prose ol{margin:0 0 var(--s-4) 22px}
.prose li{margin-bottom:6px}
.prose--legal h2.section-title{font-size:20px;margin-top:var(--s-6)}
.legal-sub{font-size:16px;font-weight:700;color:var(--ink);margin:var(--s-5) 0 var(--s-2)}
.legal-date{font-size:14px;color:var(--ink-muted);margin-bottom:var(--s-5)}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-7);align-items:start}
.two-col p{color:var(--ink-body)}
.two-col .lead{font-size:17px;color:var(--ink);font-weight:500}
.two-col p + p{margin-top:var(--s-3)}
.two-col .btn,.two-col .btn-ghost{margin-top:var(--s-5)}
.ticks{list-style:none}
.ticks li{padding:12px 0 12px 32px;position:relative;border-bottom:1px solid var(--sky-100);color:var(--ink-body)}
.ticks li::before{content:"";position:absolute;left:4px;top:19px;width:11px;height:6px;border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(-45deg)}
.facts-table{display:grid;grid-template-columns:auto 1fr;gap:0 var(--s-5)}
.facts-table dt{padding:10px 0;border-bottom:1px solid var(--sky-100);color:var(--ink-muted)}
.facts-table dd{padding:10px 0;border-bottom:1px solid var(--sky-100);text-align:right;color:var(--ink);font-weight:500}

.amenities{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4)}
.amenities li{display:flex;align-items:center;gap:12px;background:var(--white);border-radius:var(--r-sm);padding:12px 14px;box-shadow:var(--shadow-card);font-size:14px;color:var(--ink)}
.band-white .amenities li{background:var(--sky-50);box-shadow:none}
.amenities img{width:36px;height:36px;flex:none}

/* gallery + tabs — the sibling's contract (.gtabs .gtab .gallery .gallery-foot .gmore) */
.gtabs{display:flex;gap:var(--s-2);margin-bottom:var(--s-5)}
.gtab{background:var(--white);border:1px solid rgba(18,33,58,.18);border-radius:var(--r-pill);padding:8px 16px;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}
.gtab.is-on{background:var(--blue);border-color:var(--blue);color:#fff}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-3)}
.gallery[hidden]{display:none}
.tile{display:block;border-radius:var(--r-sm);overflow:hidden;aspect-ratio:4/3;background:var(--sky-100)}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.tile:hover img{transform:scale(1.04)}
.tile.is-more{display:none}
.gallery.show-all .tile.is-more{display:block}
.gallery[data-panel="plantas"] .tile{background:var(--white);aspect-ratio:1}
.gallery[data-panel="plantas"] .tile img{object-fit:contain}
.gallery-foot{text-align:center;margin-top:var(--s-5)}

.addr-row{display:flex;gap:var(--s-7);flex-wrap:wrap}
.addr{flex:1;min-width:260px}
.addr h3{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:6px}
.addr p{color:var(--ink-body);margin-bottom:var(--s-4)}
.prog-list{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2) var(--s-7)}
.prog{display:flex;align-items:center;gap:var(--s-3)}
.prog-label{flex:0 0 170px;font-size:14px;color:var(--ink-body)}
.prog-bar{flex:1;height:8px;background:var(--sky-100);border-radius:var(--r-pill);overflow:hidden}
.prog-bar span{display:block;height:100%;background:var(--blue);border-radius:var(--r-pill)}
.prog-pct{flex:0 0 44px;text-align:right;font-size:14px;color:var(--ink)}
.region .container{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-7);align-items:center}
.region-shot{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:1.5;background:var(--navy-800)}
.region-shot img,.region-shot .shot-empty{width:100%;height:100%;object-fit:cover}
.region-shot iframe{width:100%;height:100%;border:0;display:block}
.track{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}

/* ═══ FORMS ════════════════════════════════════════════════════════════════ */
.field{margin-bottom:var(--s-4)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.field label,.field-legend{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:6px}
.field .hint{font-weight:400;color:var(--ink-muted);margin-left:6px}
.field input,.field select,.field textarea{
  width:100%;border:1px solid rgba(18,33,58,.18);border-radius:var(--r-sm);background:var(--white);
  padding:11px 14px;font-size:15px;color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.field textarea{min-height:120px;resize:vertical}
.field input[type="range"]{padding:0;border:0;accent-color:var(--blue)}
.radio-row{display:flex;gap:var(--s-5)}
.radio-row label{display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--ink);cursor:pointer}
.radio-row input{accent-color:var(--blue);width:18px;height:18px}
.form-note{font-size:13px;color:var(--ink-muted);margin-top:var(--s-4);line-height:1.55}
.form-card{background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:var(--s-6)}
.form-card--narrow{max-width:760px;margin-inline:auto}
.form-intro{margin:var(--s-2) 0 var(--s-5);color:var(--ink-body)}
.band-white .form-card{background:var(--sky-50);box-shadow:none}
.contact-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s-7);align-items:start}
.who h2{font-size:24px;font-weight:700;color:var(--ink);margin-bottom:4px}
.who .role{color:var(--ink-muted);margin-bottom:var(--s-5)}
.who dl{display:grid;grid-template-columns:auto 1fr;gap:10px var(--s-4)}
.who dt{font-weight:600;color:var(--ink);font-size:14px}
.who dd{color:var(--ink-body);font-size:14px}
.who .actions{margin-top:var(--s-5);display:flex;gap:var(--s-3);flex-wrap:wrap}

/* ═══ SIMULATOR (Minha Casa Minha Vida) ════════════════════════════════════
   The sibling's three-step intake, restyled. Classes and ids are the JS
   contract (site.js §4) and are unchanged. */
.sim{background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:var(--s-6);max-width:860px;margin:0 auto}
.sim-head{margin-bottom:var(--s-5)}
.sim-head .section-title{font-size:24px}
.sim-head p{color:var(--ink-body);margin-top:var(--s-2)}
.sim-progress{list-style:none;display:flex;gap:var(--s-2);margin-bottom:var(--s-6);counter-reset:step}
.sim-progress li{
  flex:1;font-size:13px;font-weight:600;color:var(--ink-muted);padding:10px 0 10px 32px;position:relative;
  border-bottom:2px solid var(--sky-100);counter-increment:step;
}
.sim-progress li::before{
  content:counter(step);position:absolute;left:0;top:7px;width:24px;height:24px;border-radius:50%;
  background:var(--sky-100);color:var(--ink-muted);font-size:12px;display:flex;align-items:center;justify-content:center;
}
.sim-progress li.is-on{color:var(--ink);border-color:var(--blue)}
.sim-progress li.is-on::before,.sim-progress li.is-done::before{background:var(--blue);color:#fff}
.sim-step{border:0;padding:0;min-width:0}
.sim-step > legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.sim-step[hidden]{display:none}
.sim-sub{font-weight:700;color:var(--ink);margin:var(--s-5) 0 var(--s-3);font-size:15px}
.sim-nav{display:flex;gap:var(--s-3);align-items:center;flex-wrap:wrap;margin-top:var(--s-4)}
.sim-out{background:var(--sky-50);border-radius:var(--r-md);padding:var(--s-5)}
.sim-label{font-size:13px;font-weight:600;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.1em}
.sim-value{font-size:40px;font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1.1;margin:6px 0 var(--s-4)}
.sim-detail{display:grid;grid-template-columns:auto 1fr;gap:6px var(--s-4);font-size:14px}
.sim-detail dt{color:var(--ink-muted)}
.sim-detail dd{color:var(--ink);font-weight:600;text-align:right}
.sim-faixa{margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--sky-100)}
.sim-faixa-name{font-size:18px;font-weight:700;color:var(--blue)}
.sim-faixa-note{font-size:14px;color:var(--ink-body);margin-top:6px}
/* The locked readout. The blur is cosmetic only — the markup carries
   aria-hidden + inert so assistive tech is not read the text a sighted visitor
   is being denied, and user-select stops a drag-copy revealing it by accident.
   prefers-reduced-motion does NOT unblur: this is a static treatment, not
   motion, and dropping it there would leak the readout to exactly the visitors
   most likely to have the preference set. */
.sim-figures.is-locked{filter:blur(7px);opacity:.62;user-select:none;pointer-events:none}
.sim-figures.is-locked .sim-faixa{border-top-color:var(--sky-100)}

.sim-gate{margin-top:var(--s-5);padding:var(--s-5);text-align:center;
  background:#fff;border:1px solid var(--sky-100);border-radius:var(--r-md)}
.sim-gate-title{font-size:17px;font-weight:700;color:var(--ink)}
.sim-gate-note{font-size:14px;color:var(--ink-body);margin-top:6px;
  max-width:34em;margin-left:auto;margin-right:auto}
.sim-gate .sim-unlock{margin-top:var(--s-4)}
.sim-unlock{margin-top:var(--s-5)}
.sim-note{font-size:12.5px;color:var(--ink-muted);margin-top:var(--s-4);line-height:1.55}
.faixas{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4)}
.faixa-card{background:var(--white);border-radius:var(--r-md);padding:var(--s-5);box-shadow:var(--shadow-card);display:flex;flex-direction:column}
.faixa-name{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.faixa-renda{font-size:15px;color:var(--ink);margin:10px 0}
.faixa-renda strong{font-size:22px;display:block;letter-spacing:-.01em}
.faixa-note{font-size:13.5px;color:var(--ink-body);flex:1}
.faixa-link{margin-top:var(--s-4);font-weight:600;color:var(--blue);text-decoration:none;
  display:inline-flex;align-items:center;gap:8px}
.faixa-link:hover{text-decoration:underline}
.faixas-note{font-size:13.5px;color:var(--ink-muted);margin-top:var(--s-5);max-width:80ch}
.vantagens,.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
.steps{grid-template-columns:repeat(4,1fr);counter-reset:s}
.vantagens li,.steps li{background:var(--white);border-radius:var(--r-md);padding:var(--s-5);box-shadow:var(--shadow-card)}
.band-white .vantagens li,.band-white .steps li{background:var(--sky-50);box-shadow:none}
.vantagens strong,.steps strong{display:block;color:var(--ink);font-size:16px;margin-bottom:6px}
.vantagens span,.steps span{font-size:14px;color:var(--ink-body)}
.steps li{counter-increment:s;position:relative;padding-top:var(--s-6)}
.steps li::before{content:counter(s);position:absolute;top:14px;left:var(--s-5);font-size:12px;font-weight:700;color:var(--blue);letter-spacing:.14em}
.doclist{list-style:none}
.doclist li{padding:10px 0 10px 30px;position:relative;border-bottom:1px solid var(--sky-100);color:var(--ink-body)}
.doclist li::before{content:"";position:absolute;left:2px;top:17px;width:11px;height:6px;border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(-45deg)}

/* PF/PJ switcher — the sibling's contract ([data-pfpj] .ptabs .ptab .ppanel) */
.ptabs{display:flex;gap:var(--s-2);margin-bottom:var(--s-5)}
.ptab{background:var(--white);border:1px solid rgba(18,33,58,.18);border-radius:var(--r-pill);padding:10px 20px;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}
.ptab.is-on{background:var(--blue);border-color:var(--blue);color:#fff}
.ppanel{background:var(--white);border-radius:var(--r-lg);padding:var(--s-6);box-shadow:var(--shadow-card)}
.ppanel[hidden]{display:none}
.ptitle{font-size:20px;font-weight:700;color:var(--ink);margin-bottom:6px}
.pintro{color:var(--ink-body);margin-bottom:var(--s-5)}

/* stat row on inner pages (light) */
.numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4)}
.numbers.numbers--2{grid-template-columns:repeat(2,1fr)}   /* modifier, see .pcards--3 */
.numbers div{background:var(--white);border-radius:var(--r-md);padding:var(--s-5);box-shadow:var(--shadow-card)}
.numbers strong{display:block;font-size:30px;font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1.1}
.numbers span{font-size:14px;color:var(--ink-muted)}
.numbers small{display:block;font-size:13.5px;color:var(--ink-body);margin-top:var(--s-3);line-height:1.5}
.band-white .numbers div{background:var(--sky-50);box-shadow:none}
.pcards{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5)}
/* Modifier, NOT an inline grid-template-columns: an inline declaration beats
   every media query below and the band stays multi-column on a phone. Same
   trap, and the same fix, as .perks--4 / .steps--2. */
.pcards.pcards--3{grid-template-columns:repeat(3,1fr)}
.pcard{background:var(--white);border-radius:var(--r-md);padding:var(--s-5);box-shadow:var(--shadow-card)}
/* h4 as well as h3: a card inside a titled group ranks below that group's
   heading, so the level varies while the look does not */
.pcard h3,.pcard h4{font-size:18px;font-weight:700;color:var(--ink);margin-bottom:8px}
.pcard p{color:var(--ink-body);font-size:15px}
.pcard p + p{margin-top:var(--s-3)}
.pcard .icon-tile{margin-bottom:var(--s-4)}
.pcard .pnote{font-size:13px;color:var(--ink-muted)}
/* The real certificate seal or award logo, where .icon-tile would otherwise
   sit. A FIXED-HEIGHT box, not an intrinsically-sized image: sixteen
   third-party marks arrive at sixteen shapes and resolutions, and this is
   what keeps them on a common baseline across the grid and stops a card
   reflowing when a file is swapped. Nothing is stretched — the mark is
   contained and left-aligned, matching the icon it replaces. */
/* 48px, not 76: the client asked for the marks at "about the size of what the
   icons are now", and the .icon-tile they sit beside is 44x44. A couple of
   pixels taller because a wordmark badge like Prêmio Master Imobiliário is
   all type and goes illegible below this, where a round seal would not. The
   row keeps a fixed height so swapping a file never reflows the grid, and the
   mark is contained and left-aligned, matching the icon it replaces. */
.badge-mark{display:flex;align-items:center;justify-content:flex-start;height:48px;margin-bottom:var(--s-4)}
.badge-mark img{max-height:100%;max-width:150px;width:auto;height:auto;object-fit:contain}
/* white cards on a white band, like .vantagens and .amenities before them:
   the shadow is the only thing separating card from ground, which reads as a
   printing fault rather than as a card */
.band-white .pcard{background:var(--sky-50);box-shadow:none}
/* A .pcard on navy. Its white ground and --ink type are for light bands only;
   dropped on a dark band it renders as a white slab, so it takes the raised
   panel treatment the stat strip uses. Every dark ground is enumerated, for
   the same reason .eyebrow and .section-title enumerate them — add a dark
   band, add it to these lists. */
.band-dark .pcard,.band-darkest .pcard,.on-dark .pcard,.dark .pcard{
  background:var(--navy-800);border:1px solid rgba(255,255,255,.08);box-shadow:none}
.band-dark .pcard h3,.band-darkest .pcard h3,.on-dark .pcard h3,.dark .pcard h3,
.band-dark .pcard h4,.band-darkest .pcard h4,.on-dark .pcard h4,.dark .pcard h4{color:var(--on-dark)}
.band-dark .pcard p,.band-darkest .pcard p,.on-dark .pcard p,.dark .pcard p{color:var(--on-dark-muted)}
/* ⚠ AND THE LINKS. --blue is calibrated against white and --sky-50; on the
   --navy-800 card ground it measures 3.22:1 at 15px, under the 4.5 that body
   text needs. --blue-light is 7.4:1 there. This shipped once — the "Conheça a
   Diretoria Carneiro" link on the Modelo de negócios band — because a
   dark-band audit that only checks headings and paragraphs never looks at an
   anchor. Check anchors. */
.band-dark .pcard a,.band-darkest .pcard a,.on-dark .pcard a,.dark .pcard a{color:var(--blue-light)}
/* a photograph at the head of a card: the padding moves to .pbody so the
   image can run to the card's rounded edge */
.pcard--shot{padding:0;overflow:hidden;display:flex;flex-direction:column}
.pcard--shot img{width:100%;aspect-ratio:16/10;object-fit:cover}
.pcard--shot .pbody{padding:var(--s-5)}
.regions{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5)}
.region-card{background:var(--white);border-radius:var(--r-md);padding:var(--s-5);box-shadow:var(--shadow-card)}
.region-card h3{font-size:18px;color:var(--ink);margin-bottom:8px}
.region-card p{font-size:14.5px;color:var(--ink-body);margin-bottom:var(--s-4)}

/* ═══ SOBRE A CURY — the institutional page ════════════════════════════════
   Cury's own institutional material is long: nine bands of copy plus the
   timeline, the certificates and the awards. Two things carry that length —
   a jump list at the top, and a timeline that reads as a story rather than a
   1920px-wide infographic. */

/* Jump links under the page head. They are .chip, so they are OPAQUE white
   pills and carry their own contrast wherever the pagehead photograph lands
   — the same exemption .searchcard has from the 680px text cap. */
.jump{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-5)}
.jump .chip{text-decoration:none}

/* ── Nossa trajetória ────────────────────────────────────────────────────
   The source draws this horizontally across a 1920px banner, with fifteen
   entries. Reproduced that way it is either a sideways scroll nobody finds
   or type too small to read, so it becomes a vertical list instead.

   The rule is a border on each <li>, not one absolute bar behind the list:
   a bar would have to know where a column starts and ends, and grid
   stretches each item to its row height, so the per-item borders meet on
   their own however the list reflows. */
.timeline{list-style:none;display:grid;gap:0}
.timeline li{
  position:relative;padding:0 0 var(--s-6) var(--s-6);
  border-left:2px solid var(--sky-100);
}
.timeline li::before{
  content:"";position:absolute;left:-8px;top:4px;width:14px;height:14px;
  border-radius:50%;background:var(--white);border:3px solid var(--blue);
}
/* the final node: stop the rule at the node rather than running it on into
   the band's padding */
.timeline li:last-child{border-left-color:transparent;padding-bottom:0}
.timeline li:last-child::before{left:-7px}
.timeline .yr{
  display:block;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue);margin-bottom:6px;
}
.timeline p{color:var(--ink-body);font-size:14.5px;line-height:1.6}
.timeline p + p{margin-top:6px}
/* Two columns once there is room. grid-auto-flow:column with a fixed row
   count is what makes them read DOWN each column (1-8, then 9-15); the
   default row flow would lay it out 1,2 / 3,4 — left to right across a
   timeline, which puts 1963 beside 1964 and reads as two parallel
   histories. ⚠ The row count and the :nth-child below are tied to the
   number of entries: fifteen over eight rows. Add a year, re-cut both. */
@media (min-width:900px){
  .timeline{grid-auto-flow:column;grid-template-rows:repeat(8,auto);gap:0 var(--s-8)}
  .timeline li:nth-child(8){border-left-color:transparent}
  .timeline li:nth-child(8)::before{left:-7px}
  .timeline li:last-child{padding-bottom:var(--s-6)}
}

/* ═══ RESPONSIVE ═══════════════════════════════════════════════════════════ */
/* 4-up is too tight below ~1200 with the card's 18px padding, so the
   catalogue steps down to 3-up here. This block must stay ABOVE the
   hamburger block: that one also sets .grid, and at equal specificity the
   later rule wins — authored the other way round, this step never rendered
   at any viewport at all. */
@media (max-width:1200px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .stat strong{font-size:19px}
  .stat{padding:20px 18px}
}
/* One squeeze step. The full-size bar needs a 1177px viewport; the squeezed
   one needs 1098px, and the hamburger takes over at 1120px — so every state
   has margin and none of them clips the CTA. Re-measure at 1177 and 1121 if a
   label is added or reworded. */
@media (max-width:1176px){
  header nav a{padding:10px 8px;font-size:14px}
  header nav a[aria-current]::after{left:8px;right:8px}
  header nav a.cta{font-size:14px;padding:10px 13px}
  header .brand{width:110px}   /* 38px tall — see the width-not-height note */
}
@media (max-width:1120px){
  .nav-toggle{display:block}
  /* ⚠ `header nav`, never bare `nav` — see the NAV section header. Unscoped,
     this block turned every other <nav> on the site into a copy of the mobile
     menu: absolutely positioned under the header, navy, stacked in a column. */
  header nav{
    display:none;position:absolute;top:var(--nav-h);left:0;right:0;
    background:var(--navy-900);flex-direction:column;align-items:stretch;
    padding:var(--s-4) 24px var(--s-6);gap:4px;border-bottom:1px solid rgba(255,255,255,.08);
    box-shadow:0 20px 40px rgba(0,0,0,.35);
  }
  header nav.open{display:flex}
  header nav a{font-size:17px;padding:12px 8px}
  header nav a[aria-current]::after{left:8px;right:auto;width:28px}
  header nav a.cta{margin:var(--s-3) 0 0;justify-content:center;font-size:16px;padding:13px 18px}
  .hero{padding:56px 0 110px}
  .hero .container{grid-template-columns:1fr;gap:var(--s-6)}
  .hero-side{display:none}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat{border-left:0;border-top:1px solid rgba(255,255,255,.1)}
  .stat:nth-child(-n+2){border-top:0}
  .stat:nth-child(2n){border-left:1px solid rgba(255,255,255,.1)}
  .search-band .container,.about-cury .container,.join .container,.two-col,.split,.region .container,.contact-grid{grid-template-columns:1fr}
  .searchbar{grid-template-columns:1fr 1fr}
  .searchbar > .btn{grid-column:1/-1;justify-self:stretch}
  .grid,.grid--3,.track{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:1fr 1fr}
  .fcury{justify-self:start}
  .amenities,.gallery{grid-template-columns:repeat(3,1fr)}
  .faixas,.steps,.steps.steps--2{grid-template-columns:repeat(2,1fr)}
  .perks.perks--4{grid-template-columns:repeat(2,1fr)}
  .vantagens{grid-template-columns:1fr}
  .numbers{grid-template-columns:repeat(2,1fr)}
  /* the modifier is a two-class selector, so it has to be repeated here:
     a bare .pcards rule cannot beat .pcards.pcards--3 on specificity */
  .pcards.pcards--3{grid-template-columns:repeat(2,1fr)}
  .about-shot{max-width:560px}
  .talk-cta{text-align:left}
}
@media (max-width:640px){
  .container{padding:0 18px}
  .band{padding:var(--s-8) 0}
  .hero h1{font-size:clamp(34px,10vw,44px)}
  .hero-actions .btn,.hero-actions .btn-outline{width:100%}
  .stats{grid-template-columns:1fr}
  .stat{border-left:0!important;border-top:1px solid rgba(255,255,255,.1)}
  .stat:first-child{border-top:0}
  .searchbar{grid-template-columns:1fr}
  .grid,.grid--3,.track{grid-template-columns:1fr}
  .tabs .more{margin-left:0;width:100%}
  .perks{grid-template-columns:1fr 1fr}
  .fgrid{grid-template-columns:1fr}
  .fbar{flex-direction:column}
  .field-row{grid-template-columns:1fr}
  .amenities{grid-template-columns:1fr 1fr}
  /* a 1fr track floors at min-content, and one long unbreakable
     amenity label plus its 36px icon overruns the fair share —
     which pushed the whole document sideways on a 360px phone */
  .amenities li span{overflow-wrap:anywhere}
  .gallery{grid-template-columns:1fr 1fr}
  .prog-list{grid-template-columns:1fr}
  .faixas,.steps,.steps.steps--2,.numbers,.numbers.numbers--2,
  .pcards,.pcards.pcards--3,.regions{grid-template-columns:1fr}
  .sim{padding:var(--s-5)}
  .sim-value{font-size:32px}
  .talk .container{flex-direction:column;align-items:flex-start}
  .talk-cta .btn{width:100%}
  .fab{right:16px;bottom:16px;width:52px;height:52px}
  /* Eight full-size chips stack one per row on a 360px phone — 428px of
     table of contents before the page's first band. Tightened they pack two
     to a row. Measured at 360: 428px -> 190px. Hiding them instead was the
     other option and is worse: this page is twelve bands long and the jump
     list is the only way past them. */
  .jump{gap:6px}
  .jump .chip{font-size:13px;padding:7px 11px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .card:hover,.btn:hover,.fab:hover{transform:none}
  .card:hover .shot img,.tile:hover img{transform:none}
}