/* ==========================================================================
   AUGE MORUMBI — landing page de captura
   Direção "Reboco e fresta" · tokens do guia (design/guia-de-design.html)
   ========================================================================== */

:root{
  /* cor — amostrada do BOOK AUGE MORUMBI */
  --carmim:#BF263B;
  --vinho:#A42C3E;
  --vinho-escuro:#8A2334;   /* derivada: botão sobre a parede de carmim */
  --ameixa:#463840;
  --ameixa-escura:#241C21;
  --concreto:#E4E2DF;
  --cal:#F7F6F4;
  --tinta:#241C21;
  --tinta-2:#6B5C63;

  --linha:rgba(70,56,64,.20);
  --linha-clara:rgba(247,246,244,.22);
  --foco:var(--ameixa-escura);

  /* tipografia */
  --display:"Archivo",-apple-system,"Segoe UI",system-ui,sans-serif;
  --corpo:"Montserrat",-apple-system,"Segoe UI",system-ui,sans-serif;
  --headline:"Poppins",-apple-system,"Segoe UI",system-ui,sans-serif;
  --track-rotulo:.22em;

  --t-h1:clamp(1.95rem,3.95vw,3.05rem);
  --t-h2:clamp(1.65rem,3.8vw,2.8rem);
  --t-lede:clamp(1.05rem,1.45vw,1.3rem);
  --t-corpo:1.0625rem;

  /* forma */
  --raio-superficie:0;
  --raio-campo:2px;
  --raio-mini:10px;         /* miniaturas e fotos em grade */
  --raio-card:14px;         /* cards de formulário */
  --raio-pill:999px;
  --grao-op:.14;
  --grao:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");

  /* espaço */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --container:1240px;
  --gutter:20px;
  --respiro:clamp(64px,9vw,128px);
  --corte-altura:clamp(42px,9vw,150px);
}
@media (min-width:1024px){ :root{ --gutter:40px } }

/* --------------------------------------------------------- base --------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--concreto);
  color:var(--tinta);
  font-family:var(--corpo);
  font-size:var(--t-corpo);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{margin:0;font-family:var(--display);text-wrap:balance}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}
a{color:inherit}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--foco);outline-offset:2px}

.pular{
  position:absolute;left:-9999px;top:0;z-index:50;
  background:var(--cal);color:var(--tinta);padding:14px 20px;
  font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
}
.pular:focus{left:12px;top:12px}

/* ------------------------------------------------------ utilitários ----- */
.container{width:min(var(--container),100% - var(--gutter)*2);margin-inline:auto}

.secao{padding-block:var(--respiro);position:relative}

.secao--carmim{background:var(--carmim);color:#fff;--linha:var(--linha-clara);--foco:#fff}
.secao--escura{background:var(--ameixa-escura);color:var(--cal);--linha:var(--linha-clara);--foco:#fff}
.secao--concreto{background:var(--concreto);color:var(--tinta)}
.secao--cal{background:var(--cal);color:var(--tinta)}

.grao::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--grao);opacity:var(--grao-op);mix-blend-mode:overlay;
}
.grao > *{position:relative;z-index:1}

/* a seção anterior reserva a altura da cunha, senão o corte come o conteúdo */
.secao--antes-do-corte{padding-bottom:calc(var(--respiro) + var(--corte-altura))}
.secao--corte{
  --corte:var(--corte-altura);
  clip-path:polygon(0 0,100% var(--corte),100% 100%,0 100%);
  margin-top:calc(var(--corte) * -1);
  padding-top:calc(var(--respiro) + var(--corte));
}

.eyebrow{
  font-size:.7rem;font-weight:600;text-transform:uppercase;
  letter-spacing:var(--track-rotulo);color:var(--carmim);
  margin-bottom:var(--s4);
}
.eyebrow--claro{color:rgba(255,255,255,.9)}

.h2{
  font-size:var(--t-h2);
  font-variation-settings:"wdth" 116,"wght" 700;
  line-height:1.04;letter-spacing:-.012em;
}
.lede{font-size:var(--t-lede);font-weight:300;line-height:1.5;max-width:46ch}
.remate{
  font-size:clamp(1.05rem,1.7vw,1.35rem);font-weight:500;line-height:1.4;
  border-top:2px solid var(--carmim);padding-top:var(--s4);margin-top:var(--s6);
  max-width:44ch;
}
.remate--claro{border-top-color:#fff}
.legal-img{
  font-size:.72rem;line-height:1.5;color:var(--tinta-2);
  margin-top:var(--s5);max-width:78ch;
}
.secao--escura .legal-img{color:rgba(247,246,244,.55)}

/* fichas — lista em fios finos, no formato da ficha técnica do book */
.fichas{border-bottom:1px solid var(--linha)}
.fichas li{
  padding:var(--s4) 0;border-top:1px solid var(--linha);
  font-size:.98rem;line-height:1.5;
}
.fichas--duas{display:grid;column-gap:clamp(32px,5vw,72px)}
.fichas--claras li{color:rgba(247,246,244,.82)}

/* -------------------------------------------------------- botões -------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  border:1px solid transparent;border-radius:var(--raio-pill);
  padding:16px 30px;cursor:pointer;text-decoration:none;
  font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  transition:background-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.btn--carmim{background:var(--carmim);color:#fff}
/* mesmo salto do botão do cabeçalho: inverte para branco e sobe */
.btn--carmim:hover,
.btn--carmim:focus-visible{
  background:#fff;color:var(--carmim);
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(36,28,33,.32);
}
.btn--carmim:active{transform:translateY(-1px);box-shadow:0 5px 14px rgba(36,28,33,.28)}
/* sobre superfície clara o botão branco sumiria: um fio de carmim segura a borda.
   No repouso ele encosta no próprio fundo e some; no hover vira o contorno. */
.cadastro .btn--carmim,
.plantas__acao .btn--carmim{border:2px solid var(--carmim)}
.btn--bloco{width:100%}
.btn__balao{flex:0 0 auto;width:18px;height:18px;margin-top:-1px}
.btn--mini{padding:12px 18px;font-size:.66rem;letter-spacing:.08em}

/* --------------------------------------------------------- chips -------- */
.chip{
  display:inline-block;align-self:flex-start;
  font-size:.58rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  padding:5px 9px;border-radius:var(--raio-superficie);
}
.chip--esgotado{background:rgba(70,56,64,.14);color:var(--tinta-2)}
.chip--espera{background:transparent;color:var(--tinta-2);box-shadow:inset 0 0 0 1px var(--linha)}
.chip--disponivel{background:var(--carmim);color:#fff}
.secao--escura .chip--esgotado{background:rgba(247,246,244,.16);color:rgba(247,246,244,.82)}

/* ============================================ BARRA FIXA DO TOPO ======== */
/* No topo da página a barra é carmim sólido, sem efeito nenhum.
   O vidro só entra depois que a rolagem começa — ver [data-preso]. */
.topo{
  position:sticky;top:0;z-index:40;
  background:var(--carmim);color:#fff;--foco:#fff;
  -webkit-backdrop-filter:blur(0) saturate(1);
  backdrop-filter:blur(0) saturate(1);
  box-shadow:0 0 0 rgba(36,28,33,0);
  transition:background-color .3s ease,box-shadow .3s ease,
             -webkit-backdrop-filter .3s ease,backdrop-filter .3s ease;
}
.topo__interna{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  padding-block:clamp(10px,1.1vw,14px);
}
.topo__marca{width:clamp(112px,11.5vw,164px);height:auto}
/* rolou: o carmim fica translúcido, o conteúdo passa borrado por baixo
   e as duas linhas claras viram o brilho da borda do vidro */
.topo[data-preso]{
  background:rgba(191,38,59,.74);
  -webkit-backdrop-filter:blur(18px) saturate(1.7);
  backdrop-filter:blur(18px) saturate(1.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),
             inset 0 -1px 0 rgba(255,255,255,.18),
             0 6px 26px rgba(36,28,33,.26);
}
/* navegador sem backdrop-filter fica no carmim sólido, só com a sombra */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .topo[data-preso]{background:var(--carmim)}
}

/* faixa de localização — o respiro branco entre a barra e a parede */
.faixa-local{
  background:var(--cal);color:var(--tinta);text-align:center;
  padding:clamp(15px,2.1vw,24px) var(--gutter);
  font-size:clamp(.76rem,1vw,.9rem);font-weight:600;text-transform:uppercase;
  letter-spacing:.18em;line-height:1.5;
}
/* a fresta de luz da página, agora atravessando o texto:
   um clarão em carmim varre as letras e depois descansa */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .faixa-local__texto{
    background-image:linear-gradient(100deg,
      var(--tinta) 0%,var(--tinta) 33%,
      var(--carmim) 44%,#E8536A 50%,var(--carmim) 56%,
      var(--tinta) 67%,var(--tinta) 100%);
    background-size:300% 100%;
    background-position:150% 0;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
    animation:faixa-fresta 5s cubic-bezier(.45,0,.25,1) .8s infinite;
  }
}
@keyframes faixa-fresta{
  0%       {background-position:150% 0}
  34%,100% {background-position:-50% 0}
}

/* ================================================== 1 · HERO ============= */
.hero{padding-bottom:clamp(52px,6.5vw,96px)}
.btn--visita{
  background:var(--vinho-escuro);color:#fff;
  padding:15px 28px;font-size:.7rem;flex:0 0 auto;
  box-shadow:0 0 0 rgba(36,28,33,0);
  transition:background-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.btn--visita:hover,
.btn--visita:focus-visible{
  background:#fff;color:var(--carmim);
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(36,28,33,.32);
}
.btn--visita:active{transform:translateY(-1px);box-shadow:0 5px 14px rgba(36,28,33,.28)}
.hero__grade{display:grid;gap:clamp(32px,4vw,64px);align-items:start}
.hero__titulo{
  font-family:var(--headline);font-size:var(--t-h1);
  line-height:1.06;letter-spacing:-.028em;display:grid;gap:.14em;
}
.hero__t1{font-weight:500;color:rgba(255,255,255,.9)}
.hero__t2{font-weight:700}
/* faixa de tinta mais fechada atrás do nome do programa */
.hero__realce{
  background:var(--vinho-escuro);
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
  padding:.02em .16em .08em;border-radius:5px;
}
.hero__sub{
  font-weight:300;font-size:clamp(1rem,1.35vw,1.2rem);line-height:1.5;
  max-width:44ch;margin-top:var(--s5);color:rgba(255,255,255,.94);
}
.hero__prova{
  display:inline-block;margin-top:var(--s6);padding-top:var(--s3);
  border-top:1px solid rgba(255,255,255,.35);
  font-size:.7rem;font-weight:500;text-transform:uppercase;letter-spacing:.15em;
  color:rgba(255,255,255,.9);
}

/* mosaico de miniaturas — as áreas comuns, duas linhas de seis */
.mosaico{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(8px,1vw,14px);
  margin-top:clamp(44px,6vw,80px);
}
.mini{
  position:relative;overflow:hidden;margin:0;
  aspect-ratio:3/2;border-radius:var(--raio-mini);background:var(--ameixa);
  box-shadow:0 2px 5px rgba(28,14,18,.2),0 10px 24px rgba(28,14,18,.26);
}
.mini img{width:100%;height:100%;object-fit:cover}
/* véu de baixo: a legenda precisa ler igual sobre foto clara e escura */
.mini::after,
.abertura::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:56%;z-index:1;
  background:linear-gradient(to top,rgba(18,9,12,.76),rgba(18,9,12,.34) 46%,rgba(18,9,12,0));
  pointer-events:none;
}
.mini{transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease}
.mini__zoom{
  position:absolute;inset:0;z-index:3;
  border:0;background:transparent;cursor:zoom-in;padding:0;
}
@media (hover:hover) and (min-width:700px){
  .mini:has(.mini__zoom:hover),
  .mini:has(.mini__zoom:focus-visible){
    transform:scale(1.16);z-index:4;
    box-shadow:0 6px 16px rgba(28,14,18,.3),0 22px 48px rgba(28,14,18,.36);
  }
}
.mini figcaption{
  position:absolute;z-index:2;left:10px;right:10px;bottom:9px;
  font-size:.55rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  color:#fff;
}
.legal-img--topo{color:rgba(255,255,255,.72);margin-top:var(--s4)}

/* fotos em grade nas seções internas */
.abertura{position:relative;overflow:hidden;background:var(--ameixa);margin:0;border-radius:var(--raio-mini)}
.abertura img{width:100%;height:100%;object-fit:cover}
.abertura figcaption{
  position:absolute;z-index:2;left:10px;bottom:9px;right:10px;
  font-size:.55rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;
  color:#fff;
}
.abertura--fixa{width:100%;aspect-ratio:3/4}

/* ================================================== 2 · BAIRRO ========== */
.bairro{display:grid;gap:clamp(36px,4vw,64px);align-items:start}
/* mapa do Google com o cartão de endereço por cima */
.mapa{
  position:relative;margin-top:var(--s7);
  aspect-ratio:4/3;overflow:hidden;
  border-radius:var(--raio-mini);background:var(--cal);
  box-shadow:inset 0 0 0 1px var(--linha);
}
.mapa iframe{width:100%;height:100%;border:0;display:block}
.mapa__cartao{
  position:absolute;z-index:1;right:14px;bottom:14px;
  max-width:min(290px,calc(100% - 28px));
  padding:13px 16px;background:var(--cal);border-radius:12px;
  box-shadow:0 2px 6px rgba(28,14,18,.18),0 10px 26px rgba(28,14,18,.22);
}
.mapa__rotulo{
  display:flex;align-items:center;gap:8px;margin-bottom:5px;
  font-size:.62rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  color:var(--carmim);
}
.mapa__ponto{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--carmim)}
.mapa__endereco{font-size:.82rem;line-height:1.4;color:var(--tinta)}
/* mesmo botão do cabeçalho, sobre superfície clara: o fio segura o branco do hover */
.mapa__link{margin-top:var(--s5);border:2px solid var(--vinho-escuro)}
.mapa__link:hover,
.mapa__link:focus-visible{border-color:var(--carmim)}
.tempos li{
  display:flex;align-items:baseline;gap:var(--s4);
  padding:11px 0;border-bottom:1px solid var(--linha);
}
.tempos li:first-child{border-top:1px solid var(--linha)}
.tempos span{flex:1;font-size:.97rem}
.tempos b{
  font-family:var(--display);font-variation-settings:"wdth" 120,"wght" 700;
  font-size:1.02rem;font-variant-numeric:tabular-nums;color:var(--carmim);white-space:nowrap;
}
.tempos__fonte{font-size:.72rem;color:var(--tinta-2);margin-top:var(--s3)}

/* ============================================ 3 · A PORTA QUE FECHOU ==== */
.fechou{display:grid;gap:clamp(32px,4vw,64px);align-items:center}
.fechou__planta{margin:0;position:relative}
.fechou__planta img{
  width:100%;filter:grayscale(1) invert(1) brightness(1.35) contrast(1.2);opacity:.66;
}
.fechou__planta figcaption{position:absolute;left:0;top:0;z-index:1}
.fechou__dado{display:flex;align-items:baseline;gap:var(--s4);flex-wrap:wrap;margin:var(--s6) 0 var(--s5)}
.fechou__dado b{
  font-family:var(--display);font-variation-settings:"wdth" 124,"wght" 800;
  font-size:clamp(2.4rem,5.5vw,4rem);line-height:1;font-variant-numeric:tabular-nums;
  text-decoration:line-through;text-decoration-thickness:3px;text-decoration-color:var(--carmim);
}
.fechou__dado span{
  font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;
  color:rgba(247,246,244,.65);
}

/* ============================================= 4 · A PORTA QUE ABRE ===== */
.planta__cabeca{max-width:52ch}
.planta__cabeca .lede{margin-top:var(--s5)}


/* ---------------------------------------- cards de tipologia ----------- */
.tipos{display:grid;gap:clamp(16px,2vw,26px);margin-top:clamp(36px,4.5vw,60px);align-items:start}
.tipo{
  display:flex;flex-direction:column;margin:0;overflow:hidden;
  background:var(--cal);border-radius:var(--raio-card);
  box-shadow:inset 0 0 0 1px var(--linha);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease;
}
@media (hover:hover){
  .tipo:hover{
    transform:translateY(-8px);
    box-shadow:inset 0 0 0 1px var(--linha),0 10px 22px rgba(28,14,18,.14),0 26px 48px rgba(28,14,18,.16);
  }
}
.tipo__planta{
  position:relative;margin:0;overflow:hidden;
  aspect-ratio:4/3;background:#fff;
  display:grid;place-items:center;
}
.tipo__planta img{
  width:100%;height:100%;object-fit:contain;padding:clamp(10px,1.6vw,20px);
  transition:filter .5s ease,transform .5s ease;
}
/* o borrão é a fechadura: some quando o cadastro abre a planta */
.tipo__planta--travada img{filter:blur(10px) saturate(.85);transform:scale(1.08)}
.tipo__planta--travada::after{content:"";position:absolute;inset:0;background:rgba(70,56,64,.14)}
.tipo__carimbo{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-8deg);
  background:var(--ameixa-escura);color:var(--cal);
  padding:9px 20px;border-radius:2px;
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;
  box-shadow:0 6px 18px rgba(28,14,18,.3);
}
.tipo__carimbo--espera{background:var(--cal);color:var(--tinta-2);box-shadow:inset 0 0 0 1px var(--linha),0 6px 18px rgba(28,14,18,.14)}
.tipo__badge{
  position:absolute;top:12px;left:12px;z-index:2;
  background:var(--carmim);color:#fff;padding:7px 13px;border-radius:var(--raio-pill);
  font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;
}
.tipo__aviso{
  position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;gap:9px;
  background:var(--ameixa);color:#fff;padding:11px 18px;border-radius:var(--raio-pill);
  font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;
  box-shadow:0 8px 22px rgba(28,14,18,.34);
}
.tipo__corpo{display:flex;flex-direction:column;flex:1;padding:clamp(18px,2.2vw,26px);gap:var(--s3)}
.tipo__topo{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4)}
.tipo__nome{
  font-variation-settings:"wdth" 102,"wght" 700;font-size:1.02rem;line-height:1.25;
}
.tipo__area{
  flex:0 0 auto;font-family:var(--display);
  font-variation-settings:"wdth" 118,"wght" 700;font-size:1.05rem;
  font-variant-numeric:tabular-nums;color:var(--tinta-2);white-space:nowrap;
}
.tipo__area--on{color:var(--carmim)}
.tipo__estado{
  font-size:.64rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;
}
.tipo__estado--off{color:var(--tinta-2)}
.tipo__estado--on{color:var(--carmim)}
.tipo__texto{font-size:.92rem;line-height:1.55;color:var(--tinta-2)}
.tipo__itens{display:grid;gap:7px;margin-top:var(--s2)}
.tipo__itens li{
  position:relative;padding-left:16px;font-size:.88rem;line-height:1.45;
}
.tipo__itens li::before{
  content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;
  background:var(--linha);border-radius:50%;
}
.tipo__rodape{
  margin-top:auto;padding-top:var(--s4);
  font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;
  color:var(--tinta-2);
}
.tipo .btn{margin-top:auto}

.tipo--destaque{
  background:var(--ameixa);box-shadow:0 3px 8px rgba(28,14,18,.2),0 18px 40px rgba(28,14,18,.28);
}
@media (hover:hover){
  .tipo--destaque:hover{
    transform:translateY(-10px);
    box-shadow:0 6px 16px rgba(28,14,18,.28),0 32px 62px rgba(28,14,18,.36);
  }
}
.tipo--destaque .tipo__nome{color:#fff}
.tipo--destaque .tipo__texto{color:rgba(255,255,255,.82)}
.tipo--destaque .tipo__itens li{color:rgba(255,255,255,.92)}
.tipo--destaque .tipo__itens li::before{background:var(--carmim)}
.tipo--destaque .tipo__area--on{color:#fff}
.tipo--destaque .tipo__estado--on{color:rgba(255,255,255,.86)}

.cofre{margin-top:clamp(24px,3vw,40px)}
.plantas{display:grid;gap:var(--s5)}
.plantas__item{margin:0;background:#fff;border-radius:var(--raio-card);padding:clamp(16px,2.5vw,32px);box-shadow:inset 0 0 0 1px var(--linha)}
.plantas__item img{width:100%}
.plantas__item figcaption{
  margin-top:var(--s4);font-size:.68rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;color:var(--tinta-2);
}
.plantas__acao{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s4);margin-top:var(--s5);
  border-top:2px solid var(--carmim);padding-top:var(--s5);
}
.plantas__ok{font-size:var(--t-lede);font-weight:500;max-width:40ch}

/* ============================================ 5 · DENTRO DO APARTAMENTO = */
.dentro{display:grid;gap:clamp(32px,4vw,64px);align-items:start}
.dentro .fichas{margin-top:var(--s6)}
.dentro__foto{margin:0}
.moldura{display:block;overflow:hidden;border-radius:var(--raio-mini)}
.dentro__foto img{width:100%}

/* zoom leve ao passar o mouse — só nas fotos desta seção */
.moldura img,
.dentro__trio .abertura img{transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.moldura:hover img,
.dentro__trio .abertura:hover img{transform:scale(1.06)}
.dentro__foto figcaption{
  margin-top:var(--s3);font-size:.66rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;color:var(--tinta-2);
}
.dentro__trio{display:grid;gap:var(--s3);margin-top:clamp(32px,4vw,56px)}

/* ================================================ 7 · CONTAS =========== */
.contas__cabeca{max-width:46ch;margin-bottom:clamp(32px,4vw,56px)}
.contas{display:grid;gap:0;border-top:1px solid var(--linha)}
.contas li{
  display:flex;gap:var(--s5);align-items:flex-start;
  padding:var(--s6) 0;border-bottom:1px solid var(--linha);
}
.contas svg{flex:0 0 auto;width:46px;height:46px;color:var(--carmim)}
.contas p{font-size:.98rem;line-height:1.5;max-width:44ch}

/* ============================================== 8 · QUEM CONSTRÓI ====== */
.quem{display:grid;gap:clamp(32px,4vw,64px);align-items:start}
.quem__foto{margin:0}
.quem__foto img{width:100%;aspect-ratio:3/4.4;object-fit:cover;border-radius:var(--raio-mini)}
.quem__foto figcaption{
  margin-top:var(--s3);font-size:.66rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;color:var(--tinta-2);
}
.numeros{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:var(--s5);
  margin:var(--s7) 0;
}
.numeros dt{
  font-family:var(--display);font-variation-settings:"wdth" 122,"wght" 800;
  font-size:clamp(1.6rem,2.7vw,2.45rem);line-height:1;font-variant-numeric:tabular-nums;
  color:var(--tinta);
}
.numeros dd{
  margin-top:var(--s2);font-size:.68rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:var(--tinta-2);
}

.depo__cabeca{max-width:min(100%,620px);margin-bottom:clamp(32px,4vw,56px)}
.depoimentos{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(20px,2.4vw,32px)}
.depoimentos blockquote{flex:1 1 min(100%,280px);max-width:400px}
.depoimentos blockquote{margin:0;border-left:2px solid var(--carmim);padding-left:var(--s5)}
.depoimentos p{font-size:1rem;font-weight:300;line-height:1.55}
.depoimentos footer{
  margin-top:var(--s4);font-size:.66rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.13em;color:rgba(247,246,244,.6);
}
.realizacao{margin-top:clamp(32px,4vw,52px);border-top:1px solid var(--linha);padding-top:var(--s6)}
.realizacao__logos{display:flex;align-items:center;gap:clamp(32px,5vw,64px);flex-wrap:wrap}
.realizacao__logos img{width:auto;height:clamp(40px,4.4vw,54px)}
.realizacao__logos img:last-child{height:clamp(54px,5.8vw,72px)}

/* ============================================== 10 · FECHAMENTO ======== */
.fim{display:grid;gap:clamp(32px,4vw,64px);align-items:start}
.fim__sub{
  font-size:clamp(1.05rem,1.6vw,1.3rem);font-weight:300;line-height:1.5;
  margin-top:var(--s5);max-width:40ch;
}
.fim__end{
  margin-top:var(--s7);padding-top:var(--s4);border-top:1px solid rgba(255,255,255,.35);
  font-size:.82rem;line-height:1.7;color:rgba(255,255,255,.86);
}
.fim__end a{font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.5)}

/* ============================================== FORMULÁRIO ============= */
.cadastro{
  background:var(--cal);color:var(--tinta);border-radius:var(--raio-card);
  padding:clamp(24px,3vw,36px);
  --linha:rgba(70,56,64,.32);--foco:var(--ameixa-escura);
}
/* sobre a parede de carmim o card salta: sombra em três camadas,
   da mais curta e fechada à mais longa e difusa */
.secao--carmim .cadastro{
  box-shadow:
    0 2px 6px rgba(28,14,18,.16),
    0 16px 34px rgba(28,14,18,.28),
    0 38px 76px rgba(28,14,18,.24);
}
.cadastro__titulo{
  font-family:var(--display);font-variation-settings:"wdth" 114,"wght" 700;
  font-size:.94rem;text-transform:uppercase;letter-spacing:.06em;
  margin-bottom:var(--s6);
}
.campo{margin-bottom:var(--s5)}
.campo label{
  display:block;font-size:.62rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;color:var(--tinta-2);margin-bottom:4px;
}
.campo input{
  width:100%;border:0;border-bottom:1px solid var(--linha);border-radius:var(--raio-campo);
  background:transparent;color:var(--tinta);
  font-family:var(--corpo);font-size:.95rem;padding:6px 0 8px;
  transition:border-color .16s ease;
}
.campo input::placeholder{color:rgba(36,28,33,.66)}
.campo input:focus{outline:0;border-bottom:2px solid var(--carmim);padding-bottom:7px}
.campo input:focus + .campo__erro,
.campo:focus-within label{color:var(--carmim)}
.campo__erro{font-size:.72rem;color:var(--carmim);margin-top:5px;display:none}
.campo--erro input{border-bottom:2px solid var(--carmim);padding-bottom:7px}
.campo--erro .campo__erro{display:block}
.cadastro__nota{font-size:.72rem;line-height:1.5;color:var(--tinta-2);margin-top:var(--s4)}

/* janela */
.janela{
  border:0;padding:0;background:transparent;color:inherit;
  width:min(430px,100% - 32px);
}
.janela::backdrop{background:rgba(36,28,33,.82)}
.cadastro--janela{position:relative;padding:clamp(28px,4vw,40px)}
.cadastro--janela .eyebrow{margin-bottom:var(--s2)}
.cadastro--janela .cadastro__titulo{margin-bottom:var(--s6)}
.janela__fechar{
  position:absolute;top:8px;right:10px;border:0;background:transparent;
  font-size:1.7rem;line-height:1;cursor:pointer;color:var(--tinta-2);padding:6px 10px;
}
.janela__fechar:hover{color:var(--carmim)}

/* barra fixa (mobile) */
.barra{
  position:fixed;inset:auto 0 0 0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:10px 16px;background:var(--ameixa-escura);color:var(--cal);--foco:#fff;
  box-shadow:0 -1px 0 rgba(247,246,244,.16);
  transform:translateY(110%);transition:transform .25s ease;
}
.barra[data-visivel]{transform:translateY(0)}
.barra span{font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em}

/* ---------------------------------------- aviso de sucesso ------------- */
.aviso{
  position:fixed;z-index:60;
  top:clamp(74px,7vw,94px);right:clamp(12px,2vw,26px);
  width:min(360px,calc(100vw - 24px));
  display:grid;grid-template-columns:auto 1fr auto;align-items:start;
  gap:14px;padding:16px 16px 18px;
  background:#0F7A45;color:#fff;
  border-radius:var(--raio-card);overflow:hidden;
  font-family:"Roboto",-apple-system,"Segoe UI",system-ui,sans-serif;
  box-shadow:0 4px 12px rgba(9,48,28,.28),0 18px 44px rgba(9,48,28,.34);
  opacity:0;transform:translateX(18px) scale(.98);
  transition:opacity .28s ease,transform .28s cubic-bezier(.2,.8,.3,1);
}
.aviso--visivel{opacity:1;transform:translateX(0) scale(1)}
.aviso__selo{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;background:#25D366;color:#0B5A32;
}
.aviso__selo svg{width:17px;height:17px}
.aviso__texto{display:grid;gap:3px;min-width:0}
.aviso__texto strong{font-weight:700;font-size:.95rem;line-height:1.3;letter-spacing:.01em}
.aviso__texto span{font-weight:400;font-size:.82rem;line-height:1.45;color:rgba(255,255,255,.9)}
.aviso__fechar{
  flex:0 0 auto;border:0;background:transparent;color:rgba(255,255,255,.75);
  font-size:1.4rem;line-height:1;cursor:pointer;padding:0 2px;margin-top:-2px;
}
.aviso__fechar:hover{color:#fff}
.aviso__barra{
  position:absolute;left:0;bottom:0;height:3px;width:100%;
  background:rgba(255,255,255,.85);transform-origin:left;
}
.aviso--visivel .aviso__barra{animation:aviso-conta 6.5s linear forwards}
@keyframes aviso-conta{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* ---------------------------------------------- lupa da galeria -------- */
.lupa{
  border:0;padding:0;background:transparent;color:#fff;
  width:min(1200px,94vw);max-width:none;max-height:94vh;overflow:visible;
}
.lupa::backdrop{
  background:rgba(20,10,13,.78);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  backdrop-filter:blur(16px) saturate(1.2);
}
.lupa__palco{margin:0;display:grid;justify-items:center;gap:var(--s4)}
.lupa__palco img{
  max-width:100%;max-height:74vh;width:auto;height:auto;
  border-radius:var(--raio-card);
  box-shadow:0 8px 24px rgba(0,0,0,.4),0 30px 70px rgba(0,0,0,.5);
  background:var(--ameixa);
}
.lupa__palco figcaption{
  display:flex;align-items:baseline;gap:var(--s4);flex-wrap:wrap;justify-content:center;
}
.lupa__legenda{
  font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;
}
.lupa__conta{
  font-family:var(--display);font-variation-settings:"wdth" 110,"wght" 600;
  font-size:.72rem;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.6);
}
.lupa__setas{display:flex;justify-content:center;gap:var(--s3);margin-top:var(--s5)}
.lupa__seta{
  width:52px;height:52px;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:var(--cal);color:var(--tinta);
  box-shadow:0 4px 14px rgba(0,0,0,.34);
  transition:transform .2s ease,background-color .2s ease,color .2s ease;
}
.lupa__seta svg{width:22px;height:22px}
.lupa__seta:hover,
.lupa__seta:focus-visible{background:var(--carmim);color:#fff;transform:translateY(-3px)}
.lupa__fechar{
  position:absolute;top:-14px;right:-6px;
  width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;
  background:var(--cal);color:var(--tinta);
  font-size:1.6rem;line-height:1;
  box-shadow:0 4px 14px rgba(0,0,0,.34);
  transition:background-color .2s ease,color .2s ease,transform .2s ease;
}
.lupa__fechar:hover,
.lupa__fechar:focus-visible{background:var(--carmim);color:#fff;transform:scale(1.06)}
@media (max-width:600px){
  .lupa__fechar{top:-8px;right:0;width:38px;height:38px;font-size:1.3rem}
  .lupa__palco img{max-height:62vh}
}

/* -------------------------------------- WhatsApp flutuante ------------- */
.zap-flutua{
  position:fixed;z-index:35;
  right:clamp(16px,2.2vw,28px);bottom:clamp(16px,2.2vw,28px);
  width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;
  background:#25D366;color:#fff;
  box-shadow:0 3px 8px rgba(28,14,18,.24),0 14px 32px rgba(28,14,18,.3);
  transition:transform .2s ease,box-shadow .2s ease;
}
.zap-flutua svg{width:30px;height:30px;fill:currentColor}
.zap-flutua:hover,
.zap-flutua:focus-visible{
  transform:translateY(-3px) scale(1.04);
  box-shadow:0 6px 14px rgba(28,14,18,.26),0 18px 40px rgba(28,14,18,.34);
}
.zap-flutua:active{transform:translateY(-1px) scale(1)}

/* ================================================== RODAPÉ ============= */
.rodape{padding-block:clamp(56px,7vw,88px) clamp(48px,6vw,72px)}
.rodape__miolo{
  display:grid;justify-items:center;text-align:center;
  gap:clamp(24px,3vw,34px);
}
.rodape__marca{width:clamp(118px,13vw,158px);height:auto;opacity:.9}
.rodape__links{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(14px,2vw,26px);
}
.rodape__links a{
  position:relative;text-decoration:none;
  font-size:.78rem;font-weight:500;letter-spacing:.02em;
  color:rgba(247,246,244,.72);
  padding-bottom:2px;border-bottom:1px solid transparent;
  transition:color .2s ease,border-color .2s ease;
}
.rodape__links a:hover,
.rodape__links a:focus-visible{color:var(--cal);border-bottom-color:var(--carmim)}
/* fio vertical separando um link do outro */
.rodape__links a + a::before{
  content:"";position:absolute;left:calc(clamp(14px,2vw,26px) / -2);top:.15em;bottom:.15em;
  width:1px;background:var(--linha-clara);
}
.rodape__assinatura{
  width:min(100%,760px);
  border-top:1px solid var(--linha-clara);padding-top:clamp(20px,2.6vw,28px);
  font-size:.76rem;line-height:1.6;color:rgba(247,246,244,.6);
}
.rodape__coracao{font-style:normal}

/* ================================================== RESPONSIVO ========= */
@media (max-width:819px){
  .faixa{
    justify-content:flex-start;overflow-x:auto;
    scroll-snap-type:x mandatory;padding-bottom:2px;
    margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
  }
  .abertura{scroll-snap-align:center}
  .fichas--duas{grid-template-columns:1fr}
  .btn--visita{padding:12px 16px;font-size:.62rem;letter-spacing:.08em}
  .btn--visita .btn__balao{width:15px;height:15px}
  .contas svg{width:32px;height:32px}
  .dentro__trio{grid-template-columns:repeat(2,1fr)}
  body{padding-bottom:64px}
  .zap-flutua{bottom:100px;width:52px;height:52px}
  .aviso{top:72px;padding:14px}
  .zap-flutua svg{width:27px;height:27px}
}
@media (min-width:700px){
  .tipos{grid-template-columns:repeat(2,1fr)}
  .tipo--destaque{grid-column:span 2}
}
@media (min-width:1000px){
  .tipos{grid-template-columns:1fr 1.18fr 1fr;align-items:stretch}
  .tipo--destaque{grid-column:auto}
}
@media (min-width:820px){
  .barra{display:none}
  .hero__grade{grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr)}
  .bairro{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  .mapa{margin-top:var(--s6)}
  .fechou{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .dentro{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
  .dentro__trio{grid-template-columns:repeat(4,1fr)}
  .contas{grid-template-columns:repeat(2,1fr);column-gap:clamp(32px,5vw,72px)}
  .fichas--duas{grid-template-columns:1fr 1fr}
  .quem{grid-template-columns:minmax(0,1.3fr) minmax(240px,.7fr)}
  .fim{grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr)}
  .plantas{grid-template-columns:1fr 1fr}
  .numeros{gap:var(--s6)}
}
/* no celular as duas linhas viram trilho lateral: 6 linhas empilhadas
   empurrariam o resto da página pra baixo demais */
@media (max-width:559px){
  .mosaico{
    grid-template-columns:none;grid-template-rows:repeat(2,auto);
    grid-auto-flow:column;grid-auto-columns:47%;
    overflow-x:auto;scroll-snap-type:x proximity;
    padding-bottom:4px;scrollbar-width:thin;
  }
  .mini{scroll-snap-align:start}
}
@media (min-width:560px){
  .mosaico{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:820px){
  .mosaico{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:1000px){
  /* três por linha, como na referência: a última linha centraliza sozinha */
  .depoimentos blockquote{flex:0 1 calc(33.333% - 22px);max-width:none}
}
@media (min-width:1100px){
  .contas{grid-template-columns:repeat(3,1fr)}
  .mosaico{grid-template-columns:repeat(6,1fr)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  html{scroll-behavior:auto}
  /* exceção: o clarão da faixa só troca cor, não move nada na tela,
     então não é gatilho de desconforto vestibular */
  .faixa-local__texto{
    animation-duration:5s!important;animation-iteration-count:infinite!important;
  }
}
html{scroll-behavior:smooth;scroll-padding-top:96px}
