:root{
  --laranja:#F76E39;
  --laranja-fundo:#D85F31;
  --amarelo:#F5BF43;
  --magenta:#AE29C2;
  --roxo:#8F1EAC;
  --roxo-rodape:#9C06B2;
  --branco:#FFFFFF;
  --tinta:#3A1B3D;
  --campo:#F3EEF4;

  --display:"sofia-pro","Trebuchet MS",sans-serif;
  --corpo:"sofia-pro","Segoe UI",sans-serif;

  --raio:22px;
  --borda-max:1240px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--laranja);
  color:var(--branco);
  font-family:var(--corpo);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.wrap{max-width:var(--borda-max);margin:0 auto;padding:0 24px}

/* ---------- tipografia ---------- */
.logo-hero{height:40px;width:auto;display:block}
h1{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2.9rem,6.4vw,4.9rem);
  line-height:.96;
  letter-spacing:-.03em;
  color:var(--amarelo);
  margin:22px 0 20px;
  text-wrap:balance;
}
h2{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2rem,4vw,3.1rem);
  line-height:1.02;
  letter-spacing:-.025em;
  text-wrap:balance;
}
h3{font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:-.01em;text-wrap:balance}
.lead{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.3rem,2.2vw,1.7rem);
  line-height:1.22;
  color:var(--roxo);
  max-width:15ch;
  text-wrap:balance;
}
.corpo-texto{max-width:34ch;font-size:1.02rem;line-height:1.62;color:#fff;opacity:.95}

/* ---------- selo de localizacao ---------- */
.local{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--roxo);
  border-radius:999px;
  padding:10px 20px 10px 15px;
  margin:0 0 22px;
  box-shadow:0 12px 26px -16px rgba(59,20,50,.9);
}
.local svg{width:20px;height:20px;flex:0 0 20px}
.local span{
  font-family:var(--display);font-weight:400;
  font-size:clamp(.95rem,1.3vw,1.08rem);
  line-height:1.15;color:#fff;letter-spacing:-.005em;
}
.local b{font-weight:700;color:var(--amarelo)}

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:center;
  padding:40px 0;
  background-image:url("../img/bg-hero.webp");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.hero .wrap{width:100%}
.hero-grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;
}
.selo{
  font-family:var(--display);font-weight:700;font-size:.78rem;
  letter-spacing:.02em;
  padding:9px 16px;border-radius:999px;
  background:var(--amarelo);color:var(--tinta);
}
.selo.roxo{background:var(--roxo);color:#fff}

/* ---------- formulario ---------- */
.card{
  background:var(--branco);
  border-radius:28px;
  padding:34px 32px 30px;
  color:var(--tinta);
  box-shadow:0 30px 70px -30px rgba(59,20,50,.55);
}
.card h3{font-size:1.62rem;font-weight:700;line-height:1.08;margin:10px 0 6px;color:var(--tinta)}
.card .ajuda{font-size:.94rem;color:#6D5A70;margin-bottom:22px}
.campos{display:grid;gap:14px}
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{display:block;font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:#7A6480;margin-bottom:6px}
input,select{
  width:100%;
  font-family:var(--corpo);font-size:1rem;color:var(--tinta);
  background:var(--campo);
  border:1.5px solid transparent;
  border-radius:14px;
  padding:13px 15px;
  transition:border-color .18s,background .18s;
}
select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><path d='M2 5l5 5 5-5' fill='none' stroke='%238F1EAC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 15px center;padding-right:42px}
input:focus,select:focus{outline:none;border-color:var(--magenta);background:#fff}
input::placeholder{color:#A697AB}
.consent{display:flex;gap:11px;align-items:flex-start;margin-top:4px}
.consent input{width:19px;height:19px;flex:0 0 19px;margin-top:2px;accent-color:var(--magenta);background:none;border-radius:5px;padding:0}
.consent span{font-size:.83rem;line-height:1.45;color:#6D5A70}
.botao{
  width:100%;margin-top:20px;
  font-family:var(--display);font-weight:700;font-size:1.06rem;letter-spacing:-.01em;
  color:#fff;background:var(--roxo);
  border:none;border-radius:16px;padding:17px 20px;cursor:pointer;
  transition:transform .16s,background .16s,opacity .16s;
}
.botao:hover{background:var(--magenta);transform:translateY(-2px)}
.botao:disabled{opacity:.7;cursor:wait;transform:none}
.botao:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--amarelo);outline-offset:3px}
.rodape-form{margin-top:14px;font-size:.78rem;color:#8A7690;text-align:center}
.erro{color:#B3164B;font-size:.8rem;margin-top:5px;display:none}
.campo-erro input,.campo-erro select{border-color:#B3164B}
.campo-erro .erro{display:block}
.erro-envio{color:#B3164B;font-size:.85rem;margin-top:14px;text-align:center;display:none}
.erro-envio.on{display:block}

/* ---------- tela de sucesso ---------- */
.tela-sucesso{
  display:none;
  position:fixed;inset:0;z-index:100;
  height:100vh;height:100dvh;
  overflow:hidden;
  background-image:url("../img/bg-sucesso.webp");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  flex-direction:column;align-items:center;justify-content:space-between;
  gap:24px;
  padding:40px 24px;
  text-align:center;
}
.tela-sucesso.on{display:flex}
.ts-corpo{display:flex;flex-direction:column;align-items:center;gap:22px;max-width:520px;margin:auto 0}
.icone-sucesso{width:280px;height:auto;display:block}
.ts-corpo h2{color:var(--amarelo)}
.ts-corpo p{color:#fff;opacity:.95;max-width:38ch}
.botao-whatsapp{
  display:inline-block;
  font-family:var(--display);font-weight:700;font-size:1.06rem;letter-spacing:-.01em;
  color:#fff;background:var(--roxo);
  border-radius:16px;padding:17px 32px;text-decoration:none;
  transition:transform .16s,background .16s;
}
.botao-whatsapp:hover{background:var(--magenta);transform:translateY(-2px)}
.ts-rodape{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.ts-rodape img{height:26px;width:auto;opacity:.95}
.ts-rodape p{font-size:.6rem;line-height:1.6;opacity:.85;color:#fff;max-width:900px;text-wrap:pretty}

/* ---------- bairro ---------- */
.bairro{position:relative;z-index:2;padding:20px 0 0}
.bairro-cabecalho{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:start;margin-bottom:18px}
.bairro-cabecalho h2{color:var(--branco);margin:10px 0 0}
.bairro-cabecalho h2 em{font-style:normal;color:var(--amarelo)}
.bairro-texto{color:#fff;opacity:.92;padding-top:6px;text-wrap:pretty}

.bairro-foto{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  aspect-ratio:2570/1250;
  overflow:hidden;
  background:var(--laranja);
}
.bairro-foto img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  object-position:center top;
  transform:scale(1.06);
  transform-origin:50% 0;
}
.bairro-foto .foto-legenda{
  position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;
  font-family:var(--display);font-weight:700;font-size:.95rem;color:#fff;opacity:.6;letter-spacing:.02em;
}

/* badges flutuantes sobre a foto do entorno */
.badges-flutuantes{position:absolute;inset:0}
.badge-local{
  position:absolute;
  font-family:var(--display);font-weight:700;font-size:.85rem;letter-spacing:.01em;
  color:#fff;background:var(--roxo);
  padding:10px 20px;border-radius:999px;white-space:nowrap;
  box-shadow:0 14px 26px -14px rgba(59,20,50,.65);
  transform:translate(-50%,-50%);
  animation:flutua-badge 6s ease-in-out infinite;
  transition:background .2s,color .2s;
}
.badge-local:hover{background:var(--amarelo);color:var(--tinta)}
@keyframes flutua-badge{
  0%,100%{transform:translate(-50%,-50%) translateY(0)}
  50%{transform:translate(-50%,-50%) translateY(-8px)}
}
.bl-pracas  {left:32%;top:18%;animation-delay:0s}
.bl-escolas {left:76%;top:22%;animation-delay:.4s}
.bl-hospital{left:20%;top:52%;animation-delay:1.6s}
.bl-igrejas {left:82%;top:52%;animation-delay:1.2s}
.bl-mercados{left:26%;top:82%;animation-delay:.8s}
.bl-cinema  {left:78%;top:82%;animation-delay:2s}

.rodape{background:var(--roxo-rodape);padding:20px 0}
.rodape p{font-size:.6rem;line-height:1.6;opacity:.85;width:100%;color:#fff;text-wrap:pretty}

/* ---------- entrada ---------- */
.sobe{opacity:0;transform:translateY(26px);animation:sobe .8s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes sobe{to{opacity:1;transform:none}}
.d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.25s}.d4{animation-delay:.35s}.d5{animation-delay:.45s}

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .bairro-cabecalho{grid-template-columns:1fr;gap:16px}
  .bairro-texto{max-width:100%}

  .hero-copy{text-align:center}
  .logo-hero{margin:0 auto}
  .lead,.corpo-texto{max-width:46ch;margin-left:auto;margin-right:auto}
}
@media (max-width:600px){
  .wrap{padding:0 18px}
  .hero{padding:36px 0 64px;background-image:url("../img/bg-hero-mobile.webp")}
  .card{padding:26px 22px;border-radius:24px}
  .cabecalho-form{text-align:center}
  .card h3{font-size:1.28rem;line-height:1.18}
  .card .ajuda{font-size:.86rem;margin-bottom:18px}
  .icone-sucesso{width:180px}
  .ts-corpo h2{font-size:2.6rem}
  .dupla{grid-template-columns:1fr}
  .badge-local{font-size:.72rem;padding:7px 14px}

  /* no mobile a foto cresce em altura (crop mais fechado, centralizado)
     pra dar mais presenca a secao */
  .bairro-foto{aspect-ratio:4/5}
  .bairro-foto img{transform:none;object-position:center}

  /* posicoes proprias pro mobile: mais pra baixo (fora do rosto do casal)
     e assimetricas, pra nao parecer um grid perfeito */
  .bl-pracas  {left:24%;top:40%}
  .bl-escolas {left:70%;top:36%}
  .bl-hospital{left:14%;top:58%}
  .bl-igrejas {left:84%;top:63%}
  .bl-mercados{left:30%;top:80%}
  .bl-cinema  {left:68%;top:89%}

  /* no mobile o conteudo pode ser mais alto que a tela (texto legal do
     rodape e' longo) - deixa rolar em vez de cortar */
  .tela-sucesso{height:auto;min-height:100vh;min-height:100dvh;overflow-y:auto;padding:32px 20px;gap:32px}
  .ts-rodape p{max-width:100%}
}
@media (max-width:380px){
  .wrap{padding:0 16px}
  .card{padding:22px 18px}
  .badge-local{font-size:.62rem;padding:6px 11px;letter-spacing:0}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .sobe{opacity:1;transform:none}
  html{scroll-behavior:auto}
}