/* CJC Imóveis — estilos da página inicial.
   Portados de index.html do protótipo. Base compartilhada em cjc.css. */
/* ---------- Hero ---------- */
.hero{min-height:100svh;position:relative;background:#111;color:#fff;overflow:hidden;padding:0}
.hero-media{position:absolute;inset:0;background-image:url('https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=2400&q=90');background-size:cover;background-position:center;transform:scale(1.035);will-change:transform}
/* A parada de 88% mantém a faixa de baixo escura por 12% da altura,
   e não só no último pixel: é onde moram a barra de busca e o
   “Role para descobrir”. */
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.28) 18%,rgba(0,0,0,.06) 38%,rgba(0,0,0,.14) 55%,rgba(0,0,0,.58) 88%,rgba(0,0,0,.8) 100%)}
/* 46px de fundo deixavam a barra de busca dentro da faixa do botão
   flutuante do WhatsApp e por cima do “Role para descobrir”: o
   “Buscar”, que é a ação principal da home, ficava coberto. Agora a
   barra sobe e a faixa de baixo é só do rodapé da capa. */
.hero-inner{position:relative;z-index:2;min-height:100svh;padding-top:128px;padding-bottom:104px;display:flex;flex-direction:column;justify-content:flex-end}
.hero-copy{max-width:1020px}
.hero h1{font-size:clamp(56px,7.6vw,118px);line-height:.88;letter-spacing:-.066em;margin:14px 0 22px}
.hero-lead{font-size:clamp(18px,1.7vw,24px);line-height:1.45;max-width:620px;color:rgba(255,255,255,.84);margin:0 0 34px}
.hero-search{width:min(1080px,100%);background:rgba(250,250,248,.95);border:1px solid rgba(255,255,255,.45);border-radius:24px;color:var(--ink);padding:8px;display:grid;grid-template-columns:.9fr 1.1fr .95fr .8fr auto;gap:6px;box-shadow:0 24px 70px rgba(0,0,0,.24);backdrop-filter:blur(20px)}
.search-cell{padding:10px 16px;min-width:0;border-right:1px solid rgba(0,0,0,.08)}
.search-cell:nth-child(5){border-right:0}
.search-cell label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:#8b8a84;font-weight:700;margin-bottom:4px}
.search-cell input,.search-cell select{border:0;outline:0;background:transparent;width:100%;font-size:15px;font-weight:620;color:#161614;appearance:none}
/* O seletor desenhado do catálogo (catalogo.css + select.js), vestido
   como a célula da capa: sem pílula, sem borda, só o valor em negrito
   com a setinha à direita — e a bandeira antes do nome do país. Marcado,
   não vira botão preto: aqui o preto é do "Buscar". */
.search-cell .fsel{height:auto;border:0;border-radius:0;background:transparent;padding:0 22px 0 0;font-size:15px;max-width:none}
.search-cell .fsel-caixa{display:block}
.search-cell .fsel-botao{display:block;width:100%;max-width:none;height:auto;padding:0 22px 0 0;border:0;border-radius:0;background-color:transparent;background-position:right 2px center;font:620 15px/1.35 var(--font);letter-spacing:-.01em;color:#161614;text-align:left}
.search-cell .fsel-caixa.on .fsel-botao{background-color:transparent;color:#161614;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
.search-cell .fsel-botao:hover{color:var(--ouro)}
.search-cell .fsel-botao:focus-visible{outline:2px solid var(--ouro);outline-offset:4px;border-radius:6px}
/* O painel abre para cima: a barra mora no rodapé da capa, e a capa
   corta o que passa da borda (overflow:hidden). */
.search-cell .fsel-painel{top:auto;bottom:calc(100% + 18px);left:-16px;min-width:240px;transform:translateY(6px)}
.search-cell .fsel-caixa.aberta .fsel-painel{transform:none}
.search-cell .fsel-botao .bandeira{width:20px;height:14px;margin-right:9px;vertical-align:-2px}
/* Era uma seta de 21px: bonita e muda. Com a palavra, o campo de busca
   passa a dizer o que faz — e ganha a cor da ação principal. */
/* Ação principal da home, em preto: sobre a barra quase branca é o
   maior contraste que o site tem, e é a mesma cor do botão principal
   de todas as outras páginas. O ouro fica para o toque de cima. */
.search-go{min-width:132px;padding:0 26px;border:0;border-radius:18px;background:var(--ink);color:#fff;font:660 15px/1 var(--font);letter-spacing:-.01em;box-shadow:0 8px 22px rgba(0,0,0,.26);transition:.25s var(--ease);cursor:pointer}
.search-go:hover{background:var(--ouro);color:#fff}
/* Branco a 64% sumia: o degradê da capa escurece o rodapé, mas uma
   foto de interior com piso claro devolve tudo. Opacidade cheia,
   branco puro e uma sombra que segura a linha em qualquer foto. */
.hero-foot{position:absolute;right:var(--pad);bottom:34px;z-index:2;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.65);display:flex;align-items:center;gap:12px}
.hero-foot:after{content:"";width:58px;height:1px;background:#fff;box-shadow:0 1px 8px rgba(0,0,0,.5)}
.hero-stats{position:absolute;z-index:2;left:var(--pad);top:calc(var(--header-h) + 34px);display:flex;gap:28px;font-size:12px;color:rgba(255,255,255,.7)}
.hero-stats b{display:block;font-size:22px;color:#fff;letter-spacing:-.03em;font-weight:620}

/* ---------- Imóveis por localização ---------- */
.location-section{padding-top:120px}
.location-selector{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:34px;border-bottom:1px solid var(--line);padding-bottom:16px}
.location-tabs{display:flex;gap:8px;overflow:auto;scrollbar-width:none;padding-bottom:2px}
.location-tabs::-webkit-scrollbar{display:none}
.loc-right{display:flex;align-items:center;gap:18px;white-space:nowrap}
.loc-count{font-size:13px;color:var(--muted)}
.location-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

/* ---------- Seleções (editorial escuro) ---------- */
.editorial{background:var(--deep);color:#fff;margin:0 18px;border-radius:40px;overflow:hidden;padding:0}
.editorial .wrap{padding-top:clamp(90px,9vw,130px);padding-bottom:clamp(90px,9vw,130px)}
.editorial-head{display:flex;justify-content:space-between;gap:80px;align-items:end;margin-bottom:42px}
.editorial-head h2{font-size:clamp(46px,6vw,88px);line-height:.94;letter-spacing:-.06em;margin:10px 0 0;max-width:850px}
.editorial-head p{color:#a7a7a2;font-size:17px;line-height:1.55;max-width:440px}
.editorial-grid{display:grid;grid-template-columns:1.3fr .7fr;grid-template-rows:1fr 1fr;gap:16px;height:min(760px,70vw)}
.edit-card{position:relative;overflow:hidden;border-radius:28px;background:#222;display:block}
.edit-card:first-child{grid-row:1/3}
.edit-card img{transition:transform .8s var(--ease)}
.edit-card:hover img{transform:scale(1.03)}
.edit-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.72))}
.edit-copy{position:absolute;z-index:2;left:26px;right:26px;bottom:24px}
.edit-copy span{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:#c2c2bd}
.edit-copy h3{font-size:clamp(28px,3.7vw,52px);letter-spacing:-.045em;margin:8px 0 8px}
.edit-card:not(:first-child) .edit-copy h3{font-size:clamp(24px,2.4vw,34px)}
.edit-copy p{color:rgba(255,255,255,.75);font-size:14px;max-width:520px}

/* ---------- Empreendimentos ---------- */
/* O destaque ocupa a coluna larga em duas fileiras; os dois menores
   sobem na estreita. Antes isso vinha de um invólucro .dev-stack no
   HTML, que atrapalhava o carrossel do celular — agora os cards são
   irmãos e quem monta o desenho é a grade. */
/* 331 por fileira davam um destaque de 788x680 — quase quadrado, razão
   1,16. As incorporadoras entregam foto 16:9 (1,78), e cobrir uma caixa
   dessas joga fora 35% da largura da imagem: some um terço da fachada.
   290 por fileira dão 788x598 (1,32) no destaque e 504x290 (1,74) nos
   menores — estes praticamente não cortam mais nada. */
.development-grid{display:grid;grid-template-columns:1.22fr .78fr;grid-auto-rows:290px;gap:18px}
.development-grid .dev-feature{grid-row:span 2}
/* A home mostra uma seleção; o acervo inteiro está no catálogo, a um
   clique no botão logo abaixo. No celular esta regra é desfeita. */
.development-grid .dev-card:nth-child(n+4){display:none}
/* Praça com um ou dois empreendimentos: sem destaque de duas fileiras,
   que deixaria metade da largura vazia. */
.development-grid.n-1{grid-template-columns:1fr;grid-auto-rows:440px}
.development-grid.n-2{grid-template-columns:1fr 1fr;grid-auto-rows:420px}
.development-grid .dev-card:not(.dev-feature) .dev-copy h3{font-size:30px}
.development-grid .dev-card:not(.dev-feature) .dev-meta span:nth-child(n+3){display:none}
.location-grid .prop-card:nth-child(n+7){display:none}

/* ---------- Estilo de vida ---------- */
.life-controls{display:flex;justify-content:flex-end;gap:10px;margin-bottom:20px}
.life-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px}
.life-track::-webkit-scrollbar{display:none}
.life-card{position:relative;flex:0 0 min(34vw,440px);height:620px;border-radius:30px;overflow:hidden;scroll-snap-align:start;background:#d9d9d4;display:block;color:#fff}
.life-card.wide{flex-basis:min(44vw,560px)}
.life-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.68))}
.life-card img{transition:transform .8s var(--ease)}
.life-card:hover img{transform:scale(1.03)}
.life-copy{position:absolute;z-index:2;left:28px;right:24px;bottom:26px}
.life-copy span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.15em;opacity:.72}
.life-copy h3{font-size:clamp(28px,3.5vw,46px);letter-spacing:-.045em;margin:8px 0 10px}
.life-copy p{opacity:.84;max-width:34ch;line-height:1.45}
.chips-row{margin-top:28px}

/* ---------- Intelligence ---------- */
.intelligence{background:var(--sand-2)}
.intel-top{display:grid;grid-template-columns:1.1fr .9fr;gap:80px;align-items:end}
.intel-top h2{font-size:clamp(46px,6vw,88px);line-height:.94;letter-spacing:-.06em;margin:10px 0 0}
.intel-top p{font-size:18px;line-height:1.6;color:var(--muted)}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:58px}
.metric{background:rgba(255,255,255,.72);border:1px solid rgba(0,0,0,.06);border-radius:24px;padding:26px;min-height:190px;display:flex;flex-direction:column;justify-content:space-between}
.metric strong{font-size:clamp(34px,4vw,58px);letter-spacing:-.055em;line-height:1}
.metric span{color:var(--muted);font-size:13px;line-height:1.35}
.chart-card{margin-top:12px;background:#141412;color:#fff;border-radius:30px;padding:34px;display:grid;grid-template-columns:1fr 1.35fr;gap:44px;align-items:center}
.chart-card h3{font-size:36px;letter-spacing:-.04em;margin:8px 0 12px}
.chart-card p{color:#aaa9a3;line-height:1.5}
.chart-city{display:flex;gap:6px;flex-wrap:wrap;margin-top:22px}
.chart-city button{border:1px solid rgba(255,255,255,.18);background:transparent;color:#ccc;border-radius:999px;padding:8px 12px;font-size:12px;transition:.2s}
.chart-city button.active,.chart-city button:hover{background:#fff;color:#111;border-color:#fff}
.bars{height:230px;display:flex;align-items:end;gap:14px;padding:30px 0 30px}
.bar{flex:1;background:linear-gradient(#fff,#777);border-radius:10px 10px 3px 3px;opacity:.9;position:relative;transition:height .7s var(--ease)}
.bar:after{content:attr(data-y);position:absolute;bottom:-26px;left:50%;transform:translateX(-50%);font-size:10px;color:#85847f;white-space:nowrap}
.bar:before{content:attr(data-v);position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:10px;color:#ddd;white-space:nowrap}

/* ---------- Mapa ---------- */
.map-section{background:#f7f7f4}
.map-shell{border-radius:32px;overflow:hidden;background:#ddd;position:relative;isolation:isolate;height:720px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
/* Sem isto o mapa nasce com altura zero dentro da casca. */
.map-shell #homeMap{position:absolute;inset:0}
#propertyMap{height:100%;width:100%;z-index:1}
.map-panel{position:absolute;z-index:500;left:24px;top:24px;width:min(430px,calc(100% - 48px));background:rgba(250,250,248,.94);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.7);box-shadow:0 20px 50px rgba(0,0,0,.14);border-radius:24px;padding:20px}
.map-panel h3{font-size:28px;letter-spacing:-.04em;margin:5px 0 8px}
.map-panel p{font-size:13px;line-height:1.5;color:var(--muted);margin:0 0 16px}
.map-search{display:flex;gap:8px}
.map-search input{flex:1;min-width:0;height:46px;border:1px solid var(--line);border-radius:14px;background:#fff;padding:0 13px;outline:0}
.map-search button{width:46px;border:0;border-radius:14px;background:#111;color:#fff;font-size:18px}
.map-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;font-size:11px;color:#696862}
.legend-item{display:flex;align-items:center;gap:7px}
.dot{width:10px;height:10px;border-radius:50%;background:#111}
.logo-dot{width:24px;height:16px;border-radius:4px;background:#fff;border:1px solid #bdbcb7;display:grid;place-items:center;font-size:7px;font-weight:800;font-style:normal}
.map-cities{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.map-cities button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 11px;font-size:11px;font-weight:600;color:#555;transition:.2s}
.map-cities button:hover,.map-cities button.active{background:#111;color:#fff;border-color:#111}
.map-cities button .n{margin-left:6px;font-size:10px;font-weight:700;color:var(--muted-2);font-variant-numeric:tabular-nums}
.map-cities button:hover .n,.map-cities button.active .n{color:rgba(255,255,255,.6)}

/* ---------- Journal ---------- */
.journal-grid{display:grid;grid-template-columns:1.3fr .85fr .85fr;gap:18px}
.article{border-top:1px solid var(--line);padding-top:18px;display:block}
.article-media{height:330px;border-radius:24px;overflow:hidden;margin-bottom:20px}
.article:first-child .article-media{height:430px}
.article img{transition:transform .8s var(--ease)}
.article:hover img{transform:scale(1.03)}
.article small{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.article h3{font-size:26px;line-height:1.06;letter-spacing:-.038em;margin:10px 0 10px}
.article p{font-size:14px;line-height:1.55;color:var(--muted)}

/* ---------- Anuncie (banda) ---------- */
.sell-band-section{padding:0 0 28px}
.sell-band{display:flex;justify-content:space-between;align-items:center;gap:40px;padding:clamp(28px,3.5vw,46px);border:1px solid var(--line);border-radius:32px;background:#fff;transition:.3s var(--ease)}
.sell-band:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.sell-band h3{font-size:clamp(26px,3vw,40px);letter-spacing:-.045em;line-height:1.02;margin:10px 0 10px;max-width:22ch}
.sell-band p{color:var(--muted);max-width:56ch;line-height:1.5}
.sell-band .btn{flex:0 0 auto}

/* ---------- Advisor ---------- */
.concierge{padding-top:0}
.concierge-card{background:#111;color:#fff;border-radius:36px;padding:clamp(34px,6vw,76px);display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}
.concierge-card h2{font-size:clamp(42px,5.4vw,76px);line-height:.94;letter-spacing:-.055em;margin:10px 0 20px}
.concierge-card p{color:#aaa9a4;line-height:1.55;font-size:17px}
.prompt-box{background:#f8f8f6;border-radius:24px;padding:14px;color:#111}
.prompt-box textarea{width:100%;height:150px;resize:none;border:0;outline:0;background:transparent;padding:10px;font-size:16px;line-height:1.5}
.prompt-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px}
.prompt-tip{font-size:11px;color:#898883}
.prompt-suggest{display:flex;gap:6px;flex-wrap:wrap;padding:0 8px 6px}
.prompt-suggest button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 11px;font-size:11px;color:#555}
.prompt-suggest button:hover{background:#111;color:#fff;border-color:#111}
.advisor-result{display:grid;gap:14px}
.advisor-result .mini{display:grid;grid-template-columns:120px 1fr auto;gap:16px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:18px;color:inherit;transition:.2s}
.advisor-result .mini:hover{background:#f5f5f2}
.advisor-result .mini .th{width:120px;height:84px;border-radius:12px;overflow:hidden}
.advisor-result .mini b{display:block;font-size:16px;letter-spacing:-.02em}
.advisor-result .mini small{color:var(--muted);font-size:12px}
.advisor-result .why{font-size:12px;color:#3f3e3a;margin-top:6px;line-height:1.4}

@media(max-width:1000px){
  .hero-search{grid-template-columns:1fr 1fr}.search-cell{border-right:0}.search-go{grid-column:1/-1;height:52px}
  .search-cell .fsel-painel{left:0}
  .hero-stats{display:none}
  .intel-top{grid-template-columns:1fr;gap:24px}
  .location-grid{grid-template-columns:1fr 1fr}
  .editorial-head{display:block}.editorial-head p{margin-top:22px}
  /* subiu de 1000 para 1100: em 1024 o h2 ficava com 371px e seis linhas
     de onze caracteres ao lado de um parágrafo fixo em 440. */
  .development-grid{grid-template-columns:1fr 1fr;grid-auto-rows:auto}.development-grid .dev-feature{grid-column:1/-1;grid-row:auto;height:600px}.development-grid .dev-card{min-height:360px}
  .metrics{grid-template-columns:1fr 1fr}.chart-card{grid-template-columns:1fr}
  .life-card{flex-basis:min(78vw,360px);height:520px}.life-card.wide{flex-basis:min(84vw,420px)}
  .journal-grid{grid-template-columns:1fr 1fr}.journal-grid .article:first-child{grid-column:1/-1}
  .concierge-card{grid-template-columns:1fr;gap:34px}
}
@media(max-width:680px){
  .hero-inner{padding-top:110px;padding-bottom:86px}
  /* 15vw davam quatro linhas de titulo que subiam ate o trecho claro da
     foto, onde o veu tem 6% de preto. Menor, o bloco de texto cabe na
     metade de baixo — que e onde o veu de fato cobre. */
  .hero h1{font-size:clamp(44px,12.4vw,64px);max-width:96%;text-shadow:0 1px 24px rgba(0,0,0,.34)}
  .hero-lead{font-size:17px;max-width:92%;color:rgba(255,255,255,.93);text-shadow:0 1px 18px rgba(0,0,0,.4)}
  /* Medido: no celular o bloco de texto ocupa de 19% a 52% da altura do
     hero — o formulario de busca empurra a copy para cima. E ali que o
     veu do desktop e mais claro, 6% de preto, porque no desktop o texto
     mora no rodape.
     Escurecer a foto inteira resolveria e mataria a imagem. Entao o veu
     geral fica leve e a sombra vai atras do texto, so onde ele esta. */
  .hero:after{background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.24) 20%,rgba(0,0,0,.18) 40%,rgba(0,0,0,.30) 58%,rgba(0,0,0,.86) 100%)}
  .hero-copy{position:relative}
  /* Sangra dos dois lados e morre nas duas pontas: assim nao sobra
     nenhuma quina do retangulo aparecendo na foto. O corte fica por
     conta do overflow:hidden do proprio hero. */
  .hero-copy:before{content:"";position:absolute;inset:-64px -100vw -44px -100vw;z-index:-1;
    background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.60) 20%,rgba(0,0,0,.62) 76%,rgba(0,0,0,0) 100%)}
  .hero-search{grid-template-columns:1fr;padding:7px;border-radius:20px}.search-cell{padding:9px 12px;border-bottom:1px solid rgba(0,0,0,.07)}.search-cell:nth-child(5){border-bottom:0}.search-go{grid-column:auto;height:48px}.hero-foot{display:none}
  .search-cell .fsel-painel{left:-12px;max-width:calc(100vw - 2 * var(--pad) - 14px)}
  /* Sem o “Role para descobrir”, a folga de baixo volta ao normal. */
  .hero-inner{padding-bottom:30px}
  .location-selector{display:block}.loc-right{margin-top:12px;justify-content:space-between}
  /* Carrossel, não grade: no celular a grade obriga a rolar meia
     página para ver o segundo imóvel, e o card cortado na direita é o
     que avisa que a seleção continua. */
  .location-grid{display:flex;grid-template-columns:none;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);scrollbar-width:none;margin-inline:calc(-1 * var(--pad));padding-inline:var(--pad);padding-bottom:4px}
  .location-grid::-webkit-scrollbar{display:none}
  .location-grid>*{flex:0 0 78%;max-width:300px;scroll-snap-align:start}
  .location-grid .prop-card:last-child{display:block}
  .location-grid .prop-media{height:auto;aspect-ratio:4/3}
  .editorial{margin:0 8px;border-radius:30px}.editorial-grid{height:auto;grid-template-columns:1fr;grid-template-rows:auto}.edit-card:first-child{grid-row:auto}.edit-card{height:520px}.edit-card:not(:first-child){height:360px}.editorial-head{margin-bottom:30px}
  /* Mesma faixa deitada para os empreendimentos. O destaque some como
     bloco separado e entra na fila, do mesmo tamanho dos outros. */
  .development-grid{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);scrollbar-width:none;margin-inline:calc(-1 * var(--pad));padding-inline:var(--pad);padding-bottom:4px}
  .development-grid::-webkit-scrollbar{display:none}
  .development-grid .dev-card{flex:0 0 78%;max-width:300px;scroll-snap-align:start}
  /* Aqui o acervo inteiro entra na fila: o destaque perde o tamanho
     especial e vira mais um da fita, e a regra que corta do quarto em
     diante — boa para a seleção do desktop — é desfeita. */
  .development-grid .dev-card{aspect-ratio:3/4;height:auto;margin:0;min-height:0}
  .development-grid .dev-card:nth-child(n+4){display:block}
  .development-grid .dev-feature{grid-row:auto}
  .location-grid .prop-card:nth-child(n+7){display:block}
  .life-controls{justify-content:flex-start}.life-card{flex-basis:84vw;height:480px}.life-card.wide{flex-basis:88vw}
  .metrics{grid-template-columns:1fr}.metric{min-height:150px}.chart-card{padding:26px}.bars{gap:8px}
  /* No celular o painel deixa de flutuar: empilhado acima do mapa, ele
     não disputa espaço com o controle de zoom nem cobre metade do
     Brasil — e os filtros de cidade voltam a caber. */
  .map-shell{height:auto;border-radius:24px;display:flex;flex-direction:column;background:transparent;box-shadow:none}
  /* No HTML o mapa vem antes do painel, porque no desktop o painel
     flutua por cima dele. Voltando os dois ao fluxo, a ordem do
     documento apareceria na tela — mapa em cima, pergunta embaixo. O
     `order` inverte só o desenho. */
  .map-panel{position:static;order:-1;width:auto;left:auto;top:auto;padding:18px;border-radius:22px;margin-bottom:10px;box-shadow:none;border:1px solid var(--line)}
  .map-panel h3{font-size:23px}
  .map-cities{display:flex}
  .map-cities button{padding:10px 14px;font-size:12px}
  /* Precisa ser `.map-shell #homeMap` e nao so `#homeMap`: a regra do
     desktop tem id + classe e ganharia da minha, deixando o mapa
     `position:absolute` dentro de uma moldura que virou coluna. O
     resultado era o mapa desenhado a partir do topo da moldura, por
     cima do painel, vazando 233px para fora dela.
     `isolation` prende a numeracao do Leaflet — zoom 1000, marcador
     600 — dentro do mapa, para nao subir por cima do cabecalho (100)
     nem do botao do WhatsApp (88). */
  .map-shell #homeMap{position:relative;inset:auto;height:min(62svh,520px);border-radius:22px;overflow:hidden;isolation:isolate}
  .journal-grid{display:block}.article{margin-bottom:38px}.article-media,.article:first-child .article-media{height:330px}
  .concierge-card{border-radius:28px;padding:30px 22px}.prompt-actions{align-items:flex-end}.prompt-tip{display:none}
  .sell-band{flex-direction:column;align-items:flex-start;border-radius:26px;gap:22px}.sell-band .btn{width:100%}
  .advisor-result .mini{grid-template-columns:90px 1fr}.advisor-result .mini .th{width:90px;height:70px}.advisor-result .mini .price{grid-column:2}
}

/* Ajustes de WordPress */
.sem-imagem{position:absolute;inset:0;display:grid;place-items:center;background:var(--sand);color:var(--muted);font-size:13px}
.edit-card .sem-imagem,.life-card .sem-imagem,.article-media .sem-imagem{background:#2a2a28;color:#8a8984}
.article-media .sem-imagem{background:var(--sand);color:var(--muted)}
.hero.sem-capa{min-height:auto;background:var(--deep)}
.hero.sem-capa .hero-inner{min-height:auto;padding-top:calc(var(--header-h) + 70px);padding-bottom:60px}
.hero.sem-capa:after{background:none}
.hero.sem-capa .hero-foot{display:none}
.location-grid[hidden],.loc-count[hidden]{display:none}
.search-cell select{cursor:pointer}
.chips-row .chip{text-decoration:none}

/* ── A porta no fim da fita e o fio de posição ────────────────────────
   Uma fita que acaba num card cortado parece ter travado. Terminando
   num destino, a rolagem tem para onde ir.
   Os dois ficam apagados por padrão e são acesos por quem é fita de
   verdade: a seleção por cidade em qualquer tela, e a vitrine de
   empreendimentos só no celular — no desktop ela é grade editorial e já
   tem o botão logo abaixo. */
.fita-fim{display:none;align-items:flex-end;justify-content:space-between;gap:12px;
  background:var(--deep);color:#fff;border-radius:26px;padding:22px;
  font-size:14px;line-height:1.3;scroll-snap-align:start}
.fita-fim b{display:block;font-size:19px;letter-spacing:-.03em;margin-top:3px}
.fita-fim .arrow{font-size:20px;line-height:1}

.fita-trilho{display:none;height:2px;margin-top:18px;border-radius:2px;background:var(--line);position:relative;overflow:hidden}
.fita-trilho.mudo{display:none}
.fita-trilho i{position:absolute;left:0;top:0;bottom:0;width:20%;background:var(--ink);border-radius:2px;transition:transform .1s linear}

/* ── A seleção por cidade é fita em qualquer tela ─────────────────────
   Numa grade de três colunas o quarto imóvel cai abaixo da dobra e o
   acervo parece menor do que é. Deitada, a fila mostra que continua. */
.location-grid{display:flex;grid-template-columns:none;gap:16px;overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px}
.location-grid::-webkit-scrollbar{display:none}
.location-grid>*{scroll-snap-align:start}
.location-grid .fita-fim{display:flex}
/* A largura do card só vale da faixa larga para cima. Esta regra mora
   depois do bloco de celular no arquivo, e sem a barreira ela venceria
   por ordem: os cards iam a 300px numa tela de 375 e a espiada do
   próximo caía de 78 para 42px. */
@media(min-width:681px){
  .location-grid>*{flex:0 0 clamp(300px,31%,430px)}
  .location-grid .fita-fim{flex:0 0 clamp(210px,19%,270px)}
}
.location-grid+.fita-trilho{display:block}
.location-grid+.fita-trilho.mudo{display:none}

@media(max-width:680px){
  .development-grid .fita-fim{display:flex}
  .development-grid+.fita-trilho{display:block}
  .development-grid+.fita-trilho.mudo{display:none}
  .fita-fim{flex:0 0 58%;max-width:216px}

  /* Um card sozinho numa fita deixa um vazio à direita que parece falha
     de carregamento; dois cabem inteiros, empilhados. A fita começa a
     valer a pena no terceiro. */
  .location-grid.n-1,.location-grid.n-2{display:block;overflow:visible;margin-inline:0;padding-inline:0;scroll-snap-type:none}
  .location-grid.n-1>*,.location-grid.n-2>*{flex:none;max-width:none;width:auto}
  .location-grid.n-2>*+*{margin-top:14px}

  /* O bairro sai: a linha do lugar pede 300–350px e o card tem ~232
     úteis. Produto e cidade são o que orienta de longe. A marca da
     incorporadora encolhe na mesma proporção da caixa. */
  .dev-card .eb-bairro{display:none}
  .developer-logo.tem-marca,.developer-logo.tem-marca img{width:120px;height:40px}
  .developer-logo.tem-marca{top:18px}

  /* ── O mapa ──────────────────────────────────────────────────────
     Título 70 + painel 262 + mapa 503 = 835px, para 748 úteis: a seção
     não cabia numa tela. E o retrato desperdiçava oceano — o Brasil é
     quase quadrado, 4.320 por 4.395 km.
     Quadrado, e a metade do tamanho, a seção inteira fica em ~540px.
     Quem faz o voo são os chips: no zoom nacional, Ribeirão e
     Sertãozinho ficam a 1,6px um do outro — separá-los na pinça exige
     cinco níveis dentro de uma página que rola. */
  .map-shell #homeMap{aspect-ratio:1;height:auto;min-height:0}
  .map-panel{margin-bottom:14px}
  .map-panel p,.map-legend{display:none}
  .map-cities{flex-wrap:wrap;overflow:visible;margin-top:12px}
  .map-cities button{padding:9px 13px;font-size:12px}

  /* O espaço diz o que pertence a quem: o título encosta na fita que
     ele apresenta, e a fronteira entre seções continua com 80. */
  .section-head{margin-bottom:24px}

  .fita-trilho{margin-top:14px}
  /* Sem setas no celular: o dedo arrasta, e 44px de botão cobririam o
     logo da incorporadora e o selo de estágio do card. */
  .fita-setas{display:none}
}

/* As setas moram na linha das abas, à direita, junto do "Ver todos".
   A regra fica presa à faixa larga: escrita solta, ela venceria por
   ordem de fonte a que as esconde no celular — foi o que aconteceu na
   primeira tentativa, e elas apareceram em cima dos cards no telefone. */
@media(min-width:681px){
  .fita-setas{display:flex;gap:8px}
  .fita-setas .carousel-btn{width:40px;height:40px;font-size:17px}
}

/* O editorial vira bloco antes: em 1024 o título ficava com 371px de
   largura e seis linhas de onze caracteres, espremido ao lado de um
   parágrafo de largura fixa. */
@media (max-width: 1100px) {
  .editorial-head { display: block; }
  .editorial-head p { margin-top: 22px; max-width: 60ch; }
}