/* ==========================================================================
   LANDING PAGE — CONSÓRCIO DE IMÓVEIS E AUTOMÓVEIS
   CSS único, sem framework. Organizado em camadas:
   1. Tokens · 2. Reset · 3. Tipografia · 4. Layout · 5. Componentes
   6. Seções · 7. Cabeçalho e rodapé · 8. Utilitários · 9. Movimento
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root{
  /* --- cor --- */
  --branco:#FFFFFF;
  --areia:#F6F4F1;
  --preto:#000000;
  --tinta:#1C1C1C;
  --cinza:#6B6B6B;
  --laranja:#EA580C;          /* grafismo: números, ícones, filetes */
  --laranja-escuro:#C2410C;   /* fundo do botão primário (contraste AA) */
  --laranja-hover:#9A3412;    /* hover do botão primário */
  --laranja-claro:#FB923C;    /* acento sobre fundo preto (rodapé) */
  --cinza-claro:#B8B8B8;      /* texto secundário sobre fundo preto (rodapé) */
  --linha:#E7E3DE;            /* filetes sobre branco e areia */
  --linha-preto:#333333;      /* filetes sobre fundo preto (rodapé) */
  --erro:#B91C1C;

  /* --- tipografia --- */
  --f-display:"Archivo","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-texto:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;

  --fs-h1:clamp(2rem, 1.35rem + 2.8vw, 3.5rem);            /* 32 -> 56 */
  --fs-h2:clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);          /* 28 -> 40 */
  --fs-h3:clamp(1.25rem, 1.2rem + .2vw, 1.375rem);         /* 20 -> 22 */
  --fs-texto:clamp(1.0625rem, 1.03rem + .15vw, 1.125rem);  /* 17 -> 18 */
  --fs-lead:clamp(1.1875rem, 1.11rem + .33vw, 1.3125rem);  /* 19 -> 21 */
  --fs-num:clamp(2.25rem, 1.7rem + 2.3vw, 3rem);           /* 36 -> 48 */
  --fs-mini:clamp(.875rem, .85rem + .1vw, .9375rem);       /* 14 -> 15 */

  /* --- espaço (base 4px) --- */
  --e1:.25rem; --e2:.5rem;  --e3:.75rem; --e4:1rem;
  --e6:1.5rem; --e8:2rem;   --e12:3rem;  --e16:4rem;
  --e24:6rem;

  --pad-secao:clamp(4rem, 2rem + 8.5vw, 7rem);           /* 64 -> 112 */

  /* --- raio: cresce junto com o tamanho do elemento --- */
  --r-campo:6px;
  --r-botao:8px;
  --r-card:14px;
  --r-media:20px;

  /* --- outros --- */
  --largura:1120px;
  --gutter:clamp(1.25rem, .8rem + 1.8vw, 2rem);
  --header-h:56px;
  --sombra:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --t:180ms ease;
}
@media (min-width:1024px){ :root{ --header-h:72px } }

/* ==========================================================================
   2. RESET
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body,h1,h2,h3,h4,p,ul,ol,li,figure,figcaption,blockquote,dl,dd{ margin:0; padding:0 }
ul,ol{ list-style:none }
img,svg,picture{ display:block; max-width:100% }
button,input,select,textarea{ font:inherit; color:inherit }
button{ background:none; border:0; cursor:pointer }
a{ color:inherit }
table{ border-collapse:collapse; width:100% }

body{
  font-family:var(--f-texto);
  font-size:var(--fs-texto);
  font-weight:400;
  line-height:1.6;
  color:var(--tinta);
  background:var(--branco);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Foco de teclado sempre visível, em todo elemento interativo. */
:where(a,button,input,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--laranja-escuro);
  outline-offset:2px;
  border-radius:2px;
}
.rodape :where(a,button,[tabindex]):focus-visible{ outline-color:var(--laranja-claro) }

/* ==========================================================================
   3. TIPOGRAFIA
   ========================================================================== */
h1,h2,h3{ font-family:var(--f-display); color:var(--preto); text-wrap:balance }
h1{ font-size:var(--fs-h1); font-weight:700; line-height:1.08; letter-spacing:-.02em }
h2{ font-size:var(--fs-h2); font-weight:700; line-height:1.14; letter-spacing:-.015em }
h3{ font-size:var(--fs-h3); font-weight:600; line-height:1.25; letter-spacing:-.01em }

p{ max-width:62ch }                  /* nenhuma linha passa de ~70 caracteres */
.lead{ font-size:var(--fs-lead); line-height:1.55 }
.mini{ font-size:var(--fs-mini); line-height:1.55 }
.cinza{ color:var(--cinza) }
strong,b{ font-weight:500 }

/* Título de seção: preto, com barra laranja ao lado. Nunca palavra colorida. */
.titulo-secao{ position:relative; padding-left:var(--e4); margin-bottom:var(--e6) }
.titulo-secao::before{
  content:""; position:absolute; left:0; top:.12em; bottom:.12em;
  width:4px; background:var(--laranja);
}
/* Subtítulo logo abaixo do título de seção: fica colado no título e abre
   espaço antes do conteúdo, para o par ler como uma coisa só. */
.titulo-secao + .lead{ margin-top:calc(var(--e6) * -1 + var(--e3)); margin-bottom:var(--e12) }

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */
.container{ width:100%; max-width:var(--largura); margin-inline:auto; padding-inline:var(--gutter) }
.secao{ padding-block:var(--pad-secao) }

.sec--branco{ background:var(--branco) }
.sec--areia { background:var(--areia)  }
.sec--laranja{ background:var(--laranja); color:var(--tinta) }
.sec--laranja h2{ color:var(--preto) }

/* ==========================================================================
   5. COMPONENTES
   ========================================================================== */

/* --- 5.1 Imagem com placeholder -------------------------------------------
   O SVG de reserva fica como fundo do contêiner. Quando o cliente colocar o
   arquivo .webp com o nome certo na pasta /img, a foto aparece por cima.
   Se o arquivo não existir, a <img> se remove e o placeholder continua ali,
   sem quebrar o layout. */
.media{
  position:relative; overflow:hidden;
  background-color:var(--areia);
  background-position:center; background-repeat:no-repeat; background-size:contain;
  border-radius:var(--r-media);
}
.media img{ width:100%; height:100%; object-fit:cover }
.media--hero-imovel{ background-image:url("../img/ph-hero-imovel.svg") }
.media--hero-auto  { background-image:url("../img/ph-hero-auto.svg") }
.media--card-imovel{ background-image:url("../img/ph-card-imovel.svg") }
.media--card-auto  { background-image:url("../img/ph-card-auto.svg") }
.media--mockup     { background-image:url("../img/ph-mockup-whatsapp.svg") }
.media--equipe     { background-image:url("../img/ph-equipe.svg") }
.media--ciclo      { background-image:url("../img/ph-ciclo.svg") }
.media--depoimento-1{ background-image:url("../img/ph-depoimento-1.svg") }
.media--depoimento-2{ background-image:url("../img/ph-depoimento-2.svg") }
.media--depoimento-3{ background-image:url("../img/ph-depoimento-3.svg") }
.media--depoimento-4{ background-image:url("../img/ph-depoimento-4.svg") }
.media--depoimento-5{ background-image:url("../img/ph-depoimento-5.svg") }
.media--depoimento-6{ background-image:url("../img/ph-depoimento-6.svg") }

/* --- 5.2 Botões ----------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--e2);
  min-height:56px; padding:var(--e3) var(--e6);
  font-family:var(--f-texto); font-size:1.125rem; font-weight:700; line-height:1.2;
  text-align:center; text-decoration:none;
  border-radius:var(--r-botao);
  transition:background-color var(--t), color var(--t), border-color var(--t);
}
.btn--principal{ background:var(--laranja-escuro); color:var(--branco) }
.btn--principal:hover{ background:var(--laranja-hover) }
.btn--secundario{ background:var(--branco); color:var(--tinta); border:1.5px solid var(--tinta) }
.btn--secundario:hover{ background:var(--tinta); color:var(--branco) }
/* Sobre o fundo laranja o botão inverte para preto: laranja sobre laranja
   não teria contraste suficiente. */
.btn--preto{ background:var(--preto); color:var(--branco) }
.btn--preto:hover{ background:var(--tinta) }
/* Botão de largura total: um pouco menor para o rótulo longo caber
   numa linha só onde houver espaço. */
.btn--largo{ width:100%; font-size:1.0625rem }
.btn[disabled]{ opacity:.7; cursor:progress }

/* --- 5.3 Formulário ------------------------------------------------------- */
.ficha{
  position:relative;
  background:var(--areia);
  border:1px solid var(--linha);
  border-radius:var(--r-card);
  padding:var(--e6);
  box-shadow:var(--sombra);
  scroll-margin-top:calc(var(--header-h) + var(--e4));
}
.ficha::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background:var(--laranja);
  border-radius:var(--r-card) var(--r-card) 0 0;
}
.ficha--branca{ background:var(--branco); border-color:transparent }
.ficha__titulo{ font-size:var(--fs-h3); margin-bottom:var(--e4) }

.campo{ margin-bottom:var(--e4) }
.campo__label{ display:block; font-weight:500; margin-bottom:var(--e2) }
.campo__control{
  width:100%; min-height:52px;
  padding:var(--e3) var(--e4);
  background:var(--branco);
  border:1.5px solid #D6D1CB;
  border-radius:var(--r-campo);
  color:var(--tinta);
  transition:border-color var(--t);
}
.campo__control:hover{ border-color:#B0A9A0 }
.campo__control:focus{ border-color:var(--laranja-escuro) }
.campo__control[aria-invalid="true"]{ border-color:var(--erro) }
select.campo__control{
  appearance:none; -webkit-appearance:none;
  padding-right:var(--e12);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1C1C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right var(--e4) center;
  background-size:20px 20px;
}
.campo__erro{
  margin-top:var(--e2);
  font-size:var(--fs-mini); font-weight:500; color:var(--erro);
}
.campo__erro:empty{ display:none }

/* Checkbox da LGPD: alvo de toque grande e rótulo sempre legível. */
.campo--check{ display:flex; align-items:flex-start; gap:var(--e3); margin-bottom:var(--e6) }
.campo--check input{
  flex:none; width:26px; height:26px; margin:2px 0 0;
  accent-color:var(--laranja-escuro); cursor:pointer;
}
.campo--check label{ font-size:var(--fs-mini); line-height:1.5; cursor:pointer }
.campo--check a{ color:var(--laranja-escuro); text-underline-offset:3px }
.campo--check a:hover{ color:var(--laranja-hover) }
.campo--check .campo__erro{ margin-top:var(--e1) }

.form__micro{ max-width:none; margin-top:var(--e3); font-size:var(--fs-mini); color:var(--cinza) }
.ficha--branca .form__micro{ color:#585858 }

/* --- 5.4 Faixa de credibilidade: filetes, nenhum card --------------------- */
.faixa{ display:grid; gap:0 }
.faixa__item{ padding-block:var(--e4); border-top:1px solid var(--linha) }
.faixa__item:first-child{ border-top:0; padding-top:0 }
.faixa__num{
  display:block;
  font-family:var(--f-display); font-weight:700;
  font-size:var(--fs-num); line-height:1;
  color:var(--laranja);
  letter-spacing:-.02em;
}
.faixa__rotulo{ display:block; margin-top:var(--e1); color:var(--cinza) }
.faixa__nota{ margin-top:var(--e6); color:var(--cinza) }

/* Os dois blocos que trazem nome em vez de número usam um corpo menor,
   senão a palavra estoura a coluna. */
.faixa__num--marca{ font-size:clamp(1.375rem,1.1rem + 1.1vw,1.75rem); line-height:1.15 }

/* Bloco da Categoria Diamante: o único com moldura, porque é o único
   reconhecimento formal que a empresa tem para mostrar. O seletor com dois
   nomes de classe vence as regras de .faixa__item dentro das media queries,
   sem precisar repetir a moldura em cada largura de tela. */
.faixa .faixa__item--destaque{
  padding:var(--e6);
  background:var(--branco);
  border:2px solid var(--laranja);
  border-radius:var(--r-card);
}
.faixa__selo{ display:block; margin-bottom:var(--e3) }
.faixa__selo img{ height:56px; width:auto }

/* --- 5.6 Cards de modalidade ---------------------------------------------- */
.cards{ display:grid; gap:var(--e6) }
.card{
  display:flex; flex-direction:column;
  background:var(--branco);
  border:1px solid var(--linha);
  border-radius:var(--r-card);
  overflow:hidden;
  box-shadow:var(--sombra);
}
.card .media{ border-radius:0; aspect-ratio:4/3 }
.card__corpo{ display:flex; flex-direction:column; gap:var(--e3); padding:var(--e6); flex:1 }
.card__corpo p{ flex:1 }
.card .btn{ margin-top:var(--e2) }

/* --- 5.7 Passos (única numeração da página) ------------------------------- */
.passos{ counter-reset:passo }
.passos li{
  counter-increment:passo;
  position:relative;
  padding:0 0 var(--e8) 3.75rem;
}
.passos li::before{
  content:counter(passo,decimal-leading-zero);
  position:absolute; left:0; top:-.12em;
  font-family:var(--f-display); font-weight:700;
  font-size:2.25rem; line-height:1; letter-spacing:-.02em;
  color:var(--laranja);
}
.passos li::after{                      /* filete que liga um passo ao outro */
  content:""; position:absolute; left:1.15rem; top:2.6rem; bottom:.6rem;
  width:1px; background:var(--linha);
}
.passos li:last-child{ padding-bottom:0 }
.passos li:last-child::after{ display:none }
.passos p{ margin-top:var(--e1); color:var(--cinza) }

/* --- 5.8 Lista de pontos (diferencial e objeção) -------------------------- */
.pontos{ display:grid; gap:var(--e6) }
.ponto{ padding-top:var(--e4); border-top:2px solid var(--laranja) }
.ponto p{ margin-top:var(--e2); color:var(--cinza) }

/* Variante de quatro blocos (as vantagens), com ícone de linha acima do
   título. O ícone é decorativo: o texto já diz tudo. */
.pontos--4{ gap:var(--e8) }
.ponto__icone{
  width:28px; height:28px; margin-bottom:var(--e3);
  fill:none; stroke:var(--laranja); stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}

/* --- 5.9 Selos e canal oficial (faixa de fundo areia) --------------------- */
.selos{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e4) }
.selo{
  display:flex; align-items:center; gap:var(--e3);
  padding:var(--e3) var(--e4);
  border:1px solid var(--linha);
  border-radius:var(--r-botao);
}
.selo img{ height:28px; width:auto }
.selo__texto{ font-size:var(--fs-mini); line-height:1.35; color:var(--cinza) }
.selo__texto b{ display:block; font-weight:500; color:var(--preto) }
.contato-oficial{ margin-top:var(--e6); color:var(--cinza) }
.contato-oficial a{ color:var(--laranja-escuro); text-underline-offset:3px }

/* --- 5.10 Depoimentos ------------------------------------------------------ */
.depoimentos{ display:grid; gap:var(--e6) }
.depoimento{
  display:flex; flex-direction:column;
  background:var(--areia);
  border-radius:var(--r-card);
  overflow:hidden;
}
/* Foto quadrada do cliente com o bem conquistado: é ela que faz o trabalho,
   não um retrato de rosto pequeno. */
.depoimento__media{ border-radius:0; aspect-ratio:1/1 }
.depoimento blockquote{ flex:1; padding:var(--e6) var(--e6) var(--e4); line-height:1.6 }
.depoimento figcaption{ padding:0 var(--e6) var(--e6) }
.depoimento__nome{ display:block; font-family:var(--f-display); font-weight:600; line-height:1.2 }
.depoimento__cidade{ display:block; font-size:var(--fs-mini); color:var(--cinza) }
.depoimento__tipo{
  display:inline-block; margin-top:var(--e3);
  padding:var(--e1) var(--e3);
  font-size:var(--fs-mini); font-weight:500;
  color:var(--laranja-escuro);
  border:1px solid var(--laranja);
  border-radius:999px;
}

/* No celular os depoimentos viram um carrossel que encaixa card a card.
   Sem JavaScript: é só rolagem horizontal com ponto de parada. */
@media (max-width:639px){
  .depoimentos{
    grid-auto-flow:column;
    grid-auto-columns:82%;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-bottom:var(--e2);
  }
  .depoimento{ scroll-snap-align:start }
}

/* --- 5.11 FAQ: <details> nativo, funciona sem JavaScript ------------------ */
.faq{ border-top:1px solid var(--linha) }
.faq__item{ border-bottom:1px solid var(--linha) }
.faq__item summary{
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--e4);
  padding-block:var(--e4);
  min-height:56px;
  font-family:var(--f-display); font-weight:600; font-size:1.0625rem; line-height:1.4;
  color:var(--preto);
  cursor:pointer;
  list-style:none;
}
.faq__item summary::-webkit-details-marker{ display:none }
.faq__item summary::after{
  content:""; flex:none;
  width:20px; height:20px; margin-top:.15em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EA580C' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform var(--t);
}
.faq__item[open] summary::after{ transform:rotate(45deg) }
.faq__item summary:hover{ color:var(--laranja-escuro) }
.faq__resposta{ padding:0 0 var(--e6) }
.faq__resposta p{ color:var(--cinza); max-width:66ch }

/* --- 5.12 Barra fixa de CTA (só no celular) -------------------------------
   Rola até o formulário: nunca tira a pessoa da página. */
.barra-fixa{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  padding:var(--e3) var(--gutter) calc(var(--e3) + env(safe-area-inset-bottom));
  background:var(--branco);
  border-top:1px solid var(--linha);
  box-shadow:0 -4px 20px rgba(0,0,0,.08);
  transform:translateY(110%);
  visibility:hidden;
  transition:transform var(--t), visibility var(--t);
}
.barra-fixa.is-visivel{ transform:translateY(0); visibility:visible }
.barra-fixa .btn{ min-height:52px; font-size:1.0625rem }
@media (min-width:768px){ .barra-fixa{ display:none } }

/* ==========================================================================
   6. SEÇÕES
   ========================================================================== */
.hero{ padding-top:calc(var(--header-h) + var(--e8)); padding-bottom:var(--pad-secao) }
.hero__texto{ max-width:36rem }
.hero .lead{ margin-top:var(--e4); color:var(--cinza) }
.hero__media{ margin-top:var(--e8); aspect-ratio:4/3 }
.hero__form{ margin-top:var(--e8) }

/* Administradoras parceiras, logo abaixo do formulário: presença discreta,
   em cinza, para dar respaldo sem competir com o botão. */
.parceiras{ margin-top:var(--e6) }
.parceiras__rotulo{ color:var(--cinza); margin-bottom:var(--e2) }
.parceiras__logos{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--e6) }
.parceiras__logos img{ height:26px; width:auto; filter:grayscale(1); opacity:.55 }

/* O width:100% é necessário: com margin-inline:auto e sem largura, o bloco
   encolhe até zero enquanto a foto de verdade ainda não existe na pasta. */
.comofunciona__media{ width:100%; margin-top:var(--e8); aspect-ratio:1/2; max-width:280px; margin-inline:auto }
.ciclo__media{ margin-top:var(--e8); aspect-ratio:4/3 }
.diferencial__media{ aspect-ratio:4/3; margin-bottom:var(--e8) }

/* Fechamento da seção "Como funciona": o passo prático, destacado do resto
   por um bloco branco sobre o fundo areia. */
.fechamento{
  margin-top:var(--e12);
  padding:var(--e8);
  background:var(--branco);
  border-left:4px solid var(--laranja);
  border-radius:0 var(--r-card) var(--r-card) 0;
}
.fechamento p{ margin-top:var(--e4); color:var(--cinza) }
.fechamento__acao{ margin-top:var(--e6) }

/* Faixa de selos: não é uma seção de conteúdo, é um respaldo. Por isso o
   respiro é bem menor que o das seções, senão a faixa parece vazia. */
.faixa-selos{ padding-block:var(--e12) }
.faixa-selos .container{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:var(--e6);
}
.faixa-selos .contato-oficial{ margin-top:0 }

.cta-final__texto p{ margin-top:var(--e4); font-size:var(--fs-lead); color:var(--tinta) }
.cta-final__form{ margin-top:var(--e8) }

/* ==========================================================================
   7. CABEÇALHO E RODAPÉ
   ========================================================================== */
.header{
  position:fixed; inset:0 0 auto 0; z-index:50;
  height:var(--header-h);
  background:var(--branco);
  border-bottom:1px solid var(--linha);
}
.header__inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--e4); height:100% }
.header__logo img{ height:32px; width:auto }
.header__marcas{ display:flex; align-items:center; gap:var(--e3) }
.header__marcas img{ height:24px; width:auto }
@media (min-width:1024px){
  .header__logo img{ height:40px }
  .header__marcas img{ height:30px }
}

.rodape{ background:var(--preto); color:var(--cinza-claro); padding-block:var(--pad-secao) }
.rodape__logo img{ height:40px; width:auto }
.rodape__grid{ display:grid; gap:var(--e8) }
.rodape__bloco h2,.rodape__bloco p{ color:var(--branco) }
.rodape__bloco{ font-size:var(--fs-mini) }
.rodape__nome{
  font-family:var(--f-display); font-weight:600; font-size:1.0625rem;
  color:var(--branco); margin-bottom:var(--e2);
}
.rodape__dados li + li{ margin-top:var(--e1) }
.rodape__links{ display:flex; flex-wrap:wrap; gap:var(--e4) }
.rodape__links a{ color:var(--laranja-claro); text-underline-offset:3px }
.rodape__legal{
  margin-top:var(--e12); padding-top:var(--e6);
  border-top:1px solid var(--linha-preto);
}
.rodape__legal p{ max-width:90ch; font-size:var(--fs-mini); color:var(--cinza-claro) }

/* ==========================================================================
   7B. PÁGINA DE OBRIGADO
   ========================================================================== */
.obrigado{
  display:flex; align-items:center;
  min-height:100vh; min-height:100svh;
  padding-top:calc(var(--header-h) + var(--e12));
  padding-bottom:var(--e16);
}
.obrigado__inner{ max-width:34rem }
.obrigado h1{ margin-top:var(--e4) }
.obrigado__texto{ margin-top:var(--e4); font-size:var(--fs-lead); color:var(--cinza) }
.obrigado .btn{ margin-top:var(--e8) }
.obrigado__prazo{ margin-top:var(--e4); font-size:var(--fs-mini); color:var(--cinza) }

/* Marca de confirmação: círculo laranja com um "certo" branco. */
.confirmado{
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:50%;
  background:var(--laranja-escuro);
}
.confirmado svg{ width:28px; height:28px }

.contato-salvar{
  margin-top:var(--e8); padding:var(--e6);
  background:var(--areia);
  border-left:4px solid var(--laranja);
  border-radius:0 var(--r-card) var(--r-card) 0;
}
.contato-salvar p{ max-width:none }
.contato-salvar__titulo{ font-family:var(--f-display); font-weight:600; font-size:var(--fs-h3); color:var(--preto) }
.contato-salvar__numero{
  display:block; margin-top:var(--e3);
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(1.5rem,1.2rem + 1.4vw,1.875rem);
  letter-spacing:-.01em; color:var(--preto);
}
.contato-salvar__horario{ margin-top:var(--e1); font-size:var(--fs-mini); color:var(--cinza) }

/* ==========================================================================
   7C. PÁGINAS LEGAIS
   ========================================================================== */
.legal{ padding-top:calc(var(--header-h) + var(--e12)); padding-bottom:var(--e24) }
.legal__inner{ max-width:44rem }
.legal h1{ font-size:clamp(1.75rem,1.4rem + 1.5vw,2.5rem) }
.legal__atualizacao{ margin-top:var(--e3); font-size:var(--fs-mini); color:var(--cinza) }
.legal__aviso{
  margin-top:var(--e8); padding:var(--e4) var(--e6);
  background:var(--areia); border-left:4px solid var(--laranja);
  border-radius:0 var(--r-campo) var(--r-campo) 0;
  font-size:var(--fs-mini);
}
.legal section{ margin-top:var(--e12) }
.legal h2{ font-size:var(--fs-h3); margin-bottom:var(--e4) }
.legal h3{ font-size:1.0625rem; margin:var(--e6) 0 var(--e2) }
.legal p + p{ margin-top:var(--e4) }
.legal ul{ margin-top:var(--e4) }
.legal li{ position:relative; padding-left:var(--e6); margin-bottom:var(--e3); max-width:62ch }
.legal li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:6px; height:6px; background:var(--laranja);
}
.legal a{ color:var(--laranja-escuro); text-underline-offset:3px }
.legal a:hover{ color:var(--laranja-hover) }
.legal__voltar{ display:inline-block; margin-top:var(--e12) }

/* ==========================================================================
   8. UTILITÁRIOS
   ========================================================================== */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.pular{
  position:absolute; left:var(--gutter); top:-100px; z-index:60;
  padding:var(--e3) var(--e4);
  background:var(--preto); color:var(--branco);
  border-radius:0 0 var(--r-botao) var(--r-botao);
  transition:top var(--t);
}
.pular:focus{ top:0 }

/* ==========================================================================
   9. RESPONSIVO
   ========================================================================== */
@media (min-width:640px){
  .faixa{ grid-template-columns:1fr 1fr; column-gap:var(--e8) }
  .faixa__item{ border-top:1px solid var(--linha) }
  .faixa__item:nth-child(-n+2){ border-top:0; padding-top:0 }
  .depoimentos{ grid-template-columns:repeat(2,1fr) }
  .cards{ grid-template-columns:repeat(2,1fr) }
  .pontos--4{ grid-template-columns:repeat(2,1fr) }
}

@media (min-width:1024px){
  .hero{ padding-top:calc(var(--header-h) + var(--e16)) }
  .hero__grid{ display:grid; grid-template-columns:1fr 420px; gap:0 var(--e16); align-items:start }
  .hero__texto{ max-width:none }
  .hero__media{ aspect-ratio:16/10 }
  .hero__form{ margin-top:0 }
  /* No celular a ordem do HTML é texto, formulário, imagem — o formulário
     precisa aparecer sem rolagem. Aqui a imagem volta para baixo do texto,
     na coluna da esquerda, e o formulário ocupa a direita inteira. */
  .hero__texto{ grid-column:1; grid-row:1 }
  .hero__form { grid-column:2; grid-row:1 / span 2 }
  .hero__media{ grid-column:1; grid-row:2 }

  .faixa{ grid-template-columns:repeat(4,1fr); column-gap:var(--e8) }
  .faixa__item{
    border-top:0; border-left:1px solid var(--linha);
    padding:0 0 0 var(--e6);
  }
  .faixa__item:first-child{ border-left:0; padding-left:0 }
  .faixa__nota{ margin-top:var(--e8) }

  .ciclo__grid{ display:grid; grid-template-columns:7fr 5fr; gap:var(--e16); align-items:start }
  .ciclo__media{ margin-top:0; position:sticky; top:calc(var(--header-h) + var(--e8)) }

  .fechamento{
    display:grid; grid-template-columns:1fr 240px;
    gap:var(--e12); align-items:center;
    padding:var(--e12);
  }
  .comofunciona__media{ margin-top:0; max-width:320px }

  .diferencial__grid{ display:grid; grid-template-columns:5fr 7fr; gap:var(--e16); align-items:start }
  .diferencial__media{ margin-bottom:0; position:sticky; top:calc(var(--header-h) + var(--e8)) }

  .pontos{ grid-template-columns:repeat(3,1fr); gap:var(--e8) }
  .pontos--4{ grid-template-columns:repeat(4,1fr) }
  .diferencial__grid .pontos{ grid-template-columns:1fr }

  .depoimentos{ grid-template-columns:repeat(3,1fr) }

  .faq__grid{ display:grid; grid-template-columns:4fr 8fr; gap:var(--e16); align-items:start }
  .faq__grid .titulo-secao{ margin-bottom:0 }
  .faq__item summary{ font-size:1.125rem }

  .cta-final__grid{ display:grid; grid-template-columns:1fr 480px; gap:var(--e16); align-items:center }
  .cta-final__form{ margin-top:0 }

  .rodape__grid{ grid-template-columns:1fr 1fr 1fr; gap:var(--e12) }
}

/* ==========================================================================
   10. MOVIMENTO — contido, e desligado para quem pediu menos animação
   ========================================================================== */
@keyframes entrada{
  from{ opacity:0; transform:translateY(12px) }
  to  { opacity:1; transform:none }
}
.hero__texto,.hero__form{ animation:entrada 500ms ease-out both }
.hero__form{ animation-delay:80ms }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* Impressão: sem elementos fixos. */
@media print{
  .header,.barra-fixa{ position:static }
  .barra-fixa{ display:none }
}