/* Correa Realtor — redesign 2026-10
   Direction: "The split stage" (tasteskill, seed 452774333), brand palette and
   faces kept. One ground, one ink, one accent; the accent only on the action.  */

:root {
  --bg:      #0e0e0f;   /* the reading column */
  --stage:   #17171a;   /* the fixed half, one tone step off the ground */
  --ink:     #eeedea;   /* bone, low chroma */
  --muted:   #a49d93;   /* 7.3:1 on --bg */
  --accent:  #c9a227;   /* the brand gold: the action, and nothing else */
  --accent-ink: #0e0e0f;

  /* Five steps, no more. */
  --small:   clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --body:    clamp(1.0625rem, 1.01rem + 0.24vw, 1.1875rem);
  --lead:    clamp(1.3125rem, 1.16rem + 0.66vw, 1.625rem);
  --head:    clamp(2rem, 1.5rem + 2.1vw, 2.75rem);
  --display: clamp(2.75rem, 1.9rem + 3.9vw, 5.25rem);

  --display-face: "Cormorant Garamond", Georgia, serif;
  --text-face: "Poppins", system-ui, -apple-system, sans-serif;

  --gutter: clamp(1.25rem, 3.2vw, 3.5rem);
  --rhythm: clamp(5rem, 9vw, 9.5rem);   /* between sections */
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--text-face);
  font-size: var(--body);
  line-height: 1.6;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--display-face);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--display); }
h2 { font-size: var(--head); }
h3 { font-size: var(--lead); line-height: 1.15; }
p  { margin: 0; max-width: 62ch; }

a { color: inherit; }
img, svg, video { display: block; max-width: 100%; }

::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- the split ---------- */

.split { display: block; }

@media (min-width: 62rem) {
  /* On the split the panel hangs on the page's right margin; stacked below
     62rem it centres, so neither half is left empty. */
  .stage__inner { margin-left: auto; margin-right: 0; }
  /* A coluna da direita media 42% da tela, mas o painel so ocupa 22rem:
     sobravam ~150px de preto entre o texto e a conta. Agora a coluna mede
     exatamente o conteudo mais os dois respiros — nada de vazio, e o que
     sobra vai para a coluna de leitura. */
  .split { display: grid; grid-template-columns: 1fr calc(22rem + 2 * var(--gutter)); align-items: start; }
  .split__read  { min-width: 0; }
  .split__stage {
    position: sticky; top: 0;
    height: 100svh;
    background: var(--stage);
    /* Alinhado ao TOPO, nao centralizado. No inicio da pagina esta coluna
       comeca abaixo do cabecalho, e centralizar empurrava o rodape do
       painel 40-70px para fora da tela: a pessoa via a conta cortada antes
       de rolar. Com start, cabe inteira desde a primeira olhada. */
    display: grid; align-content: start;
    /* The panel must never clip: on a short viewport it scrolls inside itself. */
    overflow-y: auto;
    padding: 2.25rem var(--gutter);
  }
}

.read-col { padding: 0 var(--gutter); }
.read-col > * + * { margin-top: var(--rhythm); }

@media (min-width: 62rem) {
  .read-col { padding-left: clamp(3rem, 5vw, 6rem); padding-right: clamp(1.75rem, 3vw, 3.25rem); }
}

/* ---------- masthead ---------- */

.masthead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  padding: 1.75rem var(--gutter) 0;
}
/* O recorte "pisa" na mesma linha de base da logo, por isso flex-end. */
.masthead__mark { display: flex; align-items: flex-end; gap: 0.6rem; }
.masthead__mark img { width: clamp(108px, 13vw, 148px); height: auto; max-width: none; }
/* Foto recortada, sem fundo: nao e mais um disco, entao manda a ALTURA e
   deixa a largura seguir a silhueta. Precisa ganhar de ".masthead__mark img",
   que e mais especifico que uma classe sozinha. */
.masthead__mark img.masthead__face {
  height: clamp(84px, 8.2vw, 116px); width: auto;
  flex: none; align-self: flex-end;
  display: block;
}
.masthead nav { display: flex; gap: clamp(0.9rem, 2vw, 1.75rem); flex-wrap: wrap; align-items: center; }
.masthead nav a { font-size: var(--small); text-decoration: none; color: var(--muted); }
.masthead nav a:hover, .masthead nav a[aria-current="page"] { color: var(--ink); }
.lang { display: flex; gap: 0.4rem; font-size: var(--small); color: var(--muted); }
.lang button {
  background: none; border: 0; padding: 0 0.15rem; cursor: pointer;
  font: inherit; color: var(--muted);
}
.lang button[aria-pressed="true"] { color: var(--accent); }

/* ---------- hero ---------- */

.hero { padding-top: clamp(2rem, 4vw, 3.5rem); }
.hero h1 { margin-bottom: 1.75rem; }
.hero__lead { font-size: var(--lead); color: var(--ink); max-width: 46ch; line-height: 1.38; }
.hero__actions { margin-top: 2.5rem; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
/* A foto so aparece quando sobra largura ao lado do texto: abaixo disso o
   texto ocupa a coluna inteira e a foto ficaria espremida. */
.hero__photo { display: none; margin: 0; }
@media (min-width: 80rem) {
  /* narrower desktops: the headline keeps the full width (two lines), the photo sits beside the text below it */
  .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 34%); column-gap: clamp(2rem, 3.5vw, 3.5rem); align-items: start; }
  .hero > :not(.hero__photo) { grid-column: 1; }
  .hero > h1:not(.hero__photo) { grid-column: 1 / -1; grid-row: 1; }
  .hero__photo { display: block; grid-column: 2; grid-row: 2 / span 2; align-self: stretch; position: relative; min-height: 17rem; }
  .hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 60%; display: block; }
}
@media (min-width: 88rem) {
  /* wide screens: the text keeps what a two-line headline needs and the photo runs from the headline to the buttons */
  .hero { grid-template-columns: minmax(0, 38rem) minmax(14rem, 1fr); }
  .hero > h1:not(.hero__photo) { grid-column: 1; }
  .hero__photo { grid-row: 1 / span 3; }
}

.btn {
  display: inline-block;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--text-face); font-size: var(--body); font-weight: 500;
  padding: 0.95rem 1.9rem;
  text-decoration: none;
  border: 0; cursor: pointer;
  transition: transform .18s ease, background-color .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--plain { background: none; color: var(--ink); padding-left: 0; padding-right: 0; text-decoration: underline; text-underline-offset: 0.32em; }
.btn--plain:hover { color: var(--accent); transform: none; }

/* ---------- the fixed half: the cost of the house ---------- */

/* Compactado a pedido: o painel ocupava quase a tela inteira. Os numeros
   cairam um degrau, os espacos pela metade, e entrada/juros passaram a
   dividir uma linha — foi o que abriu espaco para cidade e tamanho. */
.stage__inner { max-width: 22rem; width: 100%; }
.stage h2 { font-size: var(--lead); margin-bottom: 0.35rem; }

.field { display: block; margin-bottom: 0.5rem; min-width: 0; }
.field > span { display: block; font-size: var(--small); color: var(--muted); margin-bottom: 0.15rem; }
.field input[type="range"] { width: 100%; accent-color: var(--accent); margin: 0; }
.field__value { font-family: var(--display-face); font-size: var(--body); font-variant-numeric: tabular-nums; }

/* Dois campos por linha; no telefone viram um so. */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
@media (max-width: 24rem) { .field-row { grid-template-columns: 1fr; } }

.field select, .field input[type="number"], .field input[type="search"] {
  width: 100%; font: inherit; font-size: var(--small);
  color: var(--ink); background: #1f1f23;
  border: 1px solid #2e2e34; border-radius: 4px;
  padding: 0.4rem 0.5rem; margin-top: 0.1rem;
}
.field select:focus-visible, .field input[type="number"]:focus-visible, .field input[type="search"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.field input[type="search"]::placeholder { color: #6d6760; }

/* Resultado da consulta ao registro da prefeitura. */
.stage__found { font-size: var(--small); color: var(--muted); margin: 0 0 0.55rem; line-height: 1.45; }
.stage__found:empty { display: none; }
.stage__found--ok { color: var(--ink); }
/* Achou o endereco: o site ja sabe cidade e tamanho, entao a linha manual
   sai de cena. Volta sozinha se a busca falhar ou o campo for limpo. */
.stage--auto #linha-manual { display: none; }
.stage__found--nada { color: #c8a98f; }
.stage__pick {
  display: block; width: 100%; text-align: left;
  font: inherit; font-size: var(--small); color: var(--ink);
  background: #1f1f23; border: 1px solid #2e2e34; border-radius: 4px;
  padding: 0.3rem 0.5rem; margin-top: 0.25rem; cursor: pointer;
}
.stage__pick:hover { border-color: var(--accent); }

.result { margin-top: 0.6rem; }
.result__figure {
  font-family: var(--display-face);
  font-size: clamp(1.75rem, 2.8vw, 2.25rem);
  line-height: 1; font-variant-numeric: tabular-nums;
  display: block;
}
.result__caption { font-size: var(--small); color: var(--muted); margin-top: 0.35rem; max-width: 32ch; }
.result__break { margin-top: 0.8rem; font-size: var(--small); color: var(--muted); }
.result__break div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.15rem 0; }
.result__break span:last-child { color: var(--ink); font-variant-numeric: tabular-nums; }

/* De onde veio a aliquota: a pessoa precisa poder conferir. */
.result__src { font-size: var(--small); color: var(--muted); margin: 0.5rem 0 0; }
.result__src b { color: var(--ink); font-weight: 400; font-variant-numeric: tabular-nums; }

.stage__warn {
  font-size: var(--small); color: var(--muted);
  margin: 0.9rem 0 0;
}

@media (max-width: 61.99rem) {
  .stage__inner { margin-inline: auto; }
  .split__stage { background: var(--stage); padding: var(--rhythm) var(--gutter); margin-top: var(--rhythm); }
}

/* ---------- showcase: square plate, spare text ---------- */

/* Era um quadrado de meia coluna e virou o segundo bloco mais alto da pagina,
   empurrando para baixo o que interessa mais. Agora e uma FAIXA: imagem
   deitada, menor que o texto, e a secao inteira cabe em ~300px.            */
.plate { display: grid; gap: clamp(1.25rem, 3vw, 2.25rem); align-items: center; }
@media (min-width: 48rem) { .plate { grid-template-columns: 5fr 6fr; } }
/* height:auto e obrigatorio: o atributo height="800" do HTML entra como
   dica de apresentacao e, sem isto, VENCE o aspect-ratio — a foto saia
   esticada em 440x800 em vez de deitada. */
.plate img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.plate__body { display: flex; flex-direction: column; gap: 0.85rem; }
.plate__specs { display: flex; gap: 1.5rem; flex-wrap: wrap; font-size: var(--small); color: var(--muted); }
.plate__specs b { display: block; color: var(--ink); font-family: var(--display-face); font-size: var(--lead); font-weight: 500; }
.plate__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.35rem; }

/* ---------- list: two-ended rows ---------- */

.rows { max-width: 34rem; }
.rows li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  padding: 0.7rem 0;
}
.rows ul { list-style: none; margin: 0; padding: 0; }
.rows .row__name { font-size: var(--body); }
.rows .row__value { font-size: var(--small); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- features: pinned heading, passing rows ---------- */

/* The blueprint pins the heading beside the blocks, which assumes a full-width
   section. Inside the split's 46ch reading column that leaves the lists about
   200px wide and every line breaks after two words, so the heading sits above
   the blocks here and the column keeps its measure. */
.pinned { display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); }
.pinned__head { margin-bottom: 0.5rem; }
.pinned__blocks { display: grid; gap: clamp(2rem, 3.2vw, 2.75rem); }
.block { display: grid; gap: 1.25rem; }
@media (min-width: 34rem) { .block { grid-template-columns: 150px 1fr; align-items: start; gap: 1.5rem; } }
.block img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.block ul { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.6rem; color: var(--muted); font-size: var(--body); }

/* ---------- about: founder's letter ---------- */

.letter { max-width: 34rem; }
.letter img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; margin-bottom: 1.5rem; }
.letter p + p { margin-top: 1.2rem; }
.letter__sign { font-family: var(--display-face); font-style: italic; font-size: var(--lead); margin-top: 1.75rem; }
.letter__role { font-size: var(--small); color: var(--muted); }

/* ---------- faq: answers as reading text ---------- */

.faq__text { max-width: 38rem; }
.faq__text p { margin-bottom: 1.25rem; color: var(--muted); }
.faq__text b { color: var(--ink); font-weight: 500; }

/* ---------- contact: the phone number as display type ---------- */

.contact { background: var(--ink); color: var(--bg); padding: var(--rhythm) var(--gutter); }
.contact__intro { font-size: var(--lead); max-width: 26ch; }
.contact__line {
  display: block; margin: clamp(2.5rem, 7vw, 5rem) 0 0;
  font-family: var(--display-face); font-weight: 500;
  font-size: clamp(2.5rem, 12.6vw, 13rem); line-height: 0.92;
  letter-spacing: -0.03em; text-decoration: none; color: inherit;
  font-variant-numeric: tabular-nums;
}
.contact__line:hover { color: var(--accent); }
.contact__feet { display: flex; gap: 2rem; flex-wrap: wrap; margin-top: clamp(2rem, 5vw, 3.5rem); font-size: var(--small); }
.contact__feet a { color: inherit; }

/* ---------- footer: name across the last photograph ---------- */

.site-foot { position: relative; min-height: 78svh; display: grid; align-content: space-between; overflow: hidden; }
.site-foot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.28); z-index: 0; }
.site-foot > * { position: relative; z-index: 1; }
.site-foot__top { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; padding: 2.25rem var(--gutter) 0; font-size: var(--small); }
.site-foot__top a { color: var(--ink); text-decoration: none; display: block; padding: 0.15rem 0; }
.site-foot__top a:hover { color: var(--accent); }
.site-foot__name { padding: 0 var(--gutter) 2.25rem; }
.site-foot__name img { position: static; width: clamp(190px, 28vw, 330px); height: auto; filter: none; max-width: none; margin-bottom: 1.25rem; }
.site-foot__legal { font-size: var(--small); color: #cfcac2; margin: 0; max-width: 60ch; }

/* ---------- motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  .rise { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
  .rise.is-in { opacity: 1; transform: none; }
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ---------- the floating WhatsApp button ---------- */

.wa-float {
  position: fixed; right: clamp(0.9rem, 2vw, 1.4rem); bottom: clamp(0.9rem, 2vw, 1.4rem);
  z-index: 50;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: #1f9d55; color: #fff;
  border-radius: 50%;
  text-decoration: none;
  transition: transform .18s ease;
}
.wa-float:hover { transform: translateY(-2px); }
.wa-float svg { width: 28px; height: 28px; }

/* On a phone the masthead must not eat the first screen: the language pair
   rides beside the wordmark and the links wrap under them. */
@media (max-width: 48rem) {
  .masthead { align-items: flex-start; gap: 0.9rem 1rem; padding-top: 1.25rem; }
  .masthead__mark img { width: 92px; }
  .lang { order: -1; margin-left: auto; }
  .masthead nav { gap: 0.75rem 1.1rem; order: 1; flex-basis: 100%; }
}

/* Telefone no topo: visivel em todas as telas */
.lang { align-items: center; }
.masthead__tel {
  margin-right: 0.9rem; color: var(--accent); text-decoration: none;
  font-weight: 500; white-space: nowrap; letter-spacing: 0.01em;
}
.masthead__tel:hover { color: var(--ink); }
/* Em telas medias o menu quebra por dentro, sem empurrar telefone/idiomas para baixo */
@media (min-width: 48.01rem) {
  .masthead { flex-wrap: nowrap; }
  .masthead nav { flex: 1 1 0; min-width: 0; justify-content: center; }
  .lang { flex: none; }
}
/* Hero: foto recortada do Hugo (fundo transparente) apontando para a calculadora */
.hero__photo img.hero__hugo { object-fit: contain; object-position: center bottom; }
/* Botao da calculadora: manda a simulacao no WhatsApp */
.btn--wa { display: block; text-align: center; margin-top: 1.25rem; background: #25d366; color: #0b0b0b; }
.btn--wa:hover { background: #1fb457; color: #0b0b0b; }

/* ---------- paginas internas (2026-11-10) ---------- */

/* Titulo em cima, foto e texto embaixo: dentro do .plate o titulo de 44px
   quebrava em tres linhas na meia coluna. */
.story > h2 { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.story .plate__body p { color: var(--muted); }
.story .plate__body p:first-child { color: var(--ink); }

/* O que me diferencia: quatro afirmacoes em duas colunas, sem icone nem cartao. */
.points { max-width: 46rem; }
.points__grid { display: grid; gap: 2rem 2.75rem; margin-top: 2rem; }
@media (min-width: 40rem) { .points__grid { grid-template-columns: 1fr 1fr; } }
.points__grid p { color: var(--muted); margin-top: 0.6rem; }

/* Passo a passo: lista ordenada de verdade, com o numeral do proprio <ol>. */
.steps__body { display: grid; gap: 2.25rem; margin-top: 2rem; align-items: start; }
@media (min-width: 44rem) { .steps__body { grid-template-columns: minmax(0, 1fr) minmax(11rem, 32%); gap: clamp(2rem, 4vw, 3.5rem); } }
.steps ol { margin: 0; padding-left: 1.6em; display: grid; gap: 1.6rem; max-width: 36rem; }
/* No telefone a foto vai deitada: em pe ela tomava uma tela inteira. */
.steps__body img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 18%; }
@media (min-width: 44rem) { .steps__body img { aspect-ratio: 3 / 4; object-position: center top; position: sticky; top: 2rem; } }
.faq__photo { width: min(100%, 22rem); height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 20%; margin-top: 2rem; }
.steps li::marker { font-family: var(--display-face); font-size: var(--lead); font-weight: 500; }
.steps li p { color: var(--muted); margin-top: 0.45rem; }

/* Pagina de texto corrido (privacidade). */
.legal { padding: clamp(2.5rem, 6vw, 5rem) var(--gutter) var(--rhythm); }
@media (min-width: 62rem) { .legal { padding-left: clamp(3rem, 5vw, 6rem); } }
.legal > * { max-width: 44rem; }
.legal h1 { margin-bottom: 1rem; }
.legal h2 { margin-top: 3rem; }
.legal p { margin-top: 1rem; }
.legal__date { color: var(--muted); font-size: var(--small); }