/* ==========================================================================
   Rentabilidade Contábil — site institucional (v4)
   Desenvolvido por Souza Soluções Digitais
   Tipografia: Poppins (títulos) + Inter (textos), auto-hospedadas.
   Paleta: preto, vermelho e branco.
   ========================================================================== */

/* -------- 1. Fontes ------------------------------------------------------ */
@font-face{font-family:"Poppins RC";src:url("../fontes/poppins-500.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins RC";src:url("../fontes/poppins-700.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter RC";src:url("../fontes/inter-400.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter RC";src:url("../fontes/inter-500.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter RC";src:url("../fontes/inter-600.woff") format("woff");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter RC";src:url("../fontes/inter-700.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}

/* -------- 2. Variáveis --------------------------------------------------- */
:root{
  --ink:#0A0A0C;
  --ink-2:#121216;
  --ink-3:#1A1A20;
  --linha-esc:rgba(255,255,255,.12);
  --red:#C81B23;
  --red-2:#E22630;
  --red-deep:#981016;
  --red-rotulo:#961218;
  --red-rotulo-esc:#F2474F;
  --paper:#FFFFFF;
  --bone:#F5F3F1;
  --linha-clara:rgba(10,10,12,.13);
  --texto:#141419;
  --texto-2:#5C5C68;
  --inv:#F4F2F0;
  --inv-2:#9C9CA6;

  --display:"Poppins RC",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --sans:"Inter RC",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* Largura de conteúdo única: toda seção usa .wrap, nada escapa dela. */
  --gutter:1.35rem;
  --wrap:1200px;
  --topo-h:76px;
  --sec:clamp(4rem,7.4vw,6.8rem);
  --r:14px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --saida:cubic-bezier(.16,1,.3,1);
}

/* -------- 3. Base -------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:calc(var(--topo-h) + 14px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;font-family:var(--sans);font-size:1.0625rem;line-height:1.6;
  color:var(--texto);background:var(--paper);overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:3px solid var(--red-2);outline-offset:3px;border-radius:3px}
.escuro :focus-visible,.lupa :focus-visible{outline-color:#fff}
[hidden]{display:none!important}

.wrap{width:min(100% - (var(--gutter) * 2),var(--wrap));margin-inline:auto}
.oculto-visual{position:absolute!important;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:1rem;top:-100px;z-index:200;background:var(--red);color:#fff;padding:.85rem 1.25rem;font-weight:600;border-radius:8px;transition:top .25s var(--ease)}
.pular:focus{top:1rem}

/* -------- 4. Tipografia -------------------------------------------------- */
.display{font-family:var(--display);font-weight:700;line-height:1.05;letter-spacing:-.03em}
.display em{font-style:normal;color:var(--red)}
.escuro .display em{color:var(--red-2)}
.t-hero{font-size:clamp(2.35rem,4.9vw,4.15rem)}
.t-sec{font-size:clamp(1.75rem,3.2vw,2.7rem);line-height:1.08}
.t-med{font-size:clamp(1.55rem,2.7vw,2.15rem);line-height:1.1}
.rotulo{
  display:inline-flex;align-items:center;align-self:flex-start;
  padding:.5rem 1rem;border:1px solid rgba(150,18,24,.42);border-radius:999px;
  font-size:.655rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red-rotulo);margin-bottom:1.05rem;
}
.escuro .rotulo{color:var(--red-rotulo-esc);border-color:rgba(242,71,79,.46);background:rgba(226,38,48,.08)}
.apoio{font-size:clamp(1rem,1.3vw,1.1rem);line-height:1.6;color:var(--texto-2)}
.escuro{color:var(--inv)}
.escuro .apoio{color:var(--inv-2)}

/* Cabeçalho de seção: título à esquerda, apoio à direita, alinhados. */
.cabeca{
  display:grid;grid-template-columns:minmax(0,1fr);gap:.85rem 2.5rem;
  margin-bottom:clamp(2rem,3.4vw,3rem);
}
.cabeca__apoio{font-size:1.02rem;line-height:1.6;color:var(--texto-2);max-width:40ch}
.escuro .cabeca__apoio{color:var(--inv-2)}
@media (min-width:860px){
  .cabeca{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:end}
  .cabeca__apoio{justify-self:end;text-align:right}
}
/* Cabeçalho centralizado: continua numa coluna só em qualquer largura —
   não pode herdar as duas colunas da regra acima. */
.cabeca--centro{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
.cabeca--centro .rotulo{align-self:center}

/* -------- 5. Botões ------------------------------------------------------ */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
  min-height:54px;padding:1rem 1.65rem;font-size:.95rem;font-weight:600;
  border-radius:9px;overflow:hidden;isolation:isolate;text-align:center;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.btn svg{flex:none;width:18px;height:18px}
.ico-wa{flex:none}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;transform:translateY(101%);transition:transform .45s var(--saida)}
.btn:hover{transform:translateY(-2px)}
.btn:hover::after{transform:translateY(0)}
.btn:active{transform:translateY(0)}
.btn--p{background:var(--red);color:#fff;box-shadow:0 12px 30px -16px rgba(200,27,35,.95)}
.btn--p::after{background:var(--red-deep)}
.btn--l{border:1px solid rgba(255,255,255,.34);color:#fff}
.btn--l::after{background:#fff}
.btn--l:hover{color:var(--ink);border-color:#fff}

.seta{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;font-size:.92rem;font-weight:600}
.escuro .seta{color:#fff}
.seta i{font-style:normal;transition:transform .4s var(--saida);display:inline-block}
.seta:hover i{transform:translateX(6px)}
.seta u{text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .4s var(--saida)}
.seta:hover u{background-size:0% 1px;background-position:100% 100%}

/* -------- 6. Cabeçalho --------------------------------------------------- */
.topo{position:fixed;inset:0 0 auto;z-index:100;transition:background .4s var(--ease)}
.topo::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--linha-esc);opacity:0;transition:opacity .4s var(--ease)}
.topo.rolou{background:rgba(10,10,12,.9);backdrop-filter:saturate(1.3) blur(16px);-webkit-backdrop-filter:saturate(1.3) blur(16px)}
.topo.rolou::after{opacity:1}
.progresso{position:absolute;left:0;bottom:0;height:2px;background:var(--red-2);width:0;z-index:2;transition:width .12s linear}
.topo__in{
  display:flex;align-items:center;gap:1.6rem;min-height:var(--topo-h);
  width:min(100% - (var(--gutter) * 2),var(--wrap));margin-inline:auto;
  padding-block:.6rem;transition:min-height .4s var(--ease);
}
.topo.rolou .topo__in{min-height:62px}

.marca{display:flex;align-items:center;gap:.7rem;margin-right:auto;flex:none;color:#fff}
.marca img{width:auto;height:38px;transition:height .4s var(--ease)}
.topo.rolou .marca img{height:32px}
.marca span{display:flex;flex-direction:column;line-height:1.08;font-family:var(--display);font-size:.95rem}
.marca b{font-weight:700;letter-spacing:-.01em}
.marca i{font-style:normal;font-weight:500;font-size:.78rem;letter-spacing:.17em;text-transform:uppercase;color:var(--red-2)}

.nav{display:none;gap:1.9rem;font-size:.93rem;font-weight:500}
.nav a{position:relative;color:rgba(255,255,255,.82);padding-block:.4rem;transition:color .28s var(--ease)}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;background:var(--red-2);transform:scaleX(0);transform-origin:100% 50%;transition:transform .4s var(--saida)}
.nav a:hover{color:#fff}
.nav a:hover::after{transform:scaleX(1);transform-origin:0 50%}
.topo__cta{display:none;min-height:46px;padding:.7rem 1.25rem;font-size:.88rem}
@media (min-width:980px){.nav{display:flex}.topo__cta{display:inline-flex}}

/* Botão do menu (celular) */
.menu-bt{position:relative;width:46px;height:46px;flex:none;border-radius:9px;border:1px solid rgba(255,255,255,.22)}
.menu-bt span,.menu-bt span::before,.menu-bt span::after{position:absolute;left:50%;height:1.8px;width:20px;background:#fff;border-radius:2px;transition:transform .4s var(--saida),opacity .2s linear}
.menu-bt span{top:50%;transform:translate(-50%,-50%)}
.menu-bt span::before,.menu-bt span::after{content:"";left:0;transform-origin:50% 50%}
.menu-bt span::before{transform:translateY(-6px)}
.menu-bt span::after{transform:translateY(6px)}
.menu-on .menu-bt span{background:transparent}
.menu-on .menu-bt span::before{transform:translateY(0) rotate(45deg)}
.menu-on .menu-bt span::after{transform:translateY(0) rotate(-45deg)}
@media (min-width:980px){.menu-bt{display:none}}

/* Painel do celular */
.painel{
  position:fixed;inset:0;z-index:99;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;gap:2rem;
  padding:calc(var(--topo-h) + 2rem) var(--gutter) 2.5rem;
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .35s var(--ease),transform .45s var(--saida),visibility .35s;
}
.menu-on .painel{opacity:1;visibility:visible;transform:none}
.painel nav{display:flex;flex-direction:column;gap:.2rem}
.painel nav a{
  font-family:var(--display);font-size:clamp(1.7rem,8vw,2.3rem);font-weight:700;
  letter-spacing:-.025em;color:#fff;padding-block:.45rem;
  opacity:0;transform:translateY(14px);
  transition:opacity .4s var(--ease),transform .5s var(--saida);
  transition-delay:calc(var(--i) * 55ms + 80ms);
}
.menu-on .painel nav a{opacity:1;transform:none}
.painel__pe{display:flex;flex-direction:column;gap:1.1rem;padding-top:1.6rem;border-top:1px solid var(--linha-esc)}
.painel__tel{display:flex;flex-direction:column;gap:.15rem;color:#fff}
.painel__tel small{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--inv-2)}
.painel__tel span{font-size:1.12rem;font-weight:600}
.painel .seta{color:var(--inv-2)}

/* -------- 7. Seções ------------------------------------------------------ */
.sec{position:relative;padding-block:var(--sec)}
.sec--clara{background:var(--paper)}
.sec--bone{background:var(--bone)}
.sec--esc,.escuro.sec{background:var(--ink)}
.sec--esc{background:
  radial-gradient(70% 90% at 82% 8%,rgba(200,27,35,.14),transparent 62%),
  var(--ink);
}

/* -------- 8. Abertura ---------------------------------------------------- */
.hero{
  background:
    radial-gradient(62% 78% at 78% 22%,rgba(200,27,35,.17),transparent 64%),
    linear-gradient(180deg,var(--ink) 0%,var(--ink-2) 100%);
  /* altura vem do conteúdo — nada de 100vh forçando vazio */
  padding-top:calc(var(--topo-h) + clamp(1.6rem,3.6vw,2.9rem));
  padding-bottom:clamp(2.2rem,4vw,3.4rem);
  overflow:hidden;
}
.hero__in{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(1.9rem,4vw,3.4rem);align-items:center;
}
.hero__txt{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.hero .linha{display:block;overflow:hidden}
.hero .linha>span{display:block}
.hero__apoio{
  margin-top:1.15rem;max-width:34ch;
  font-size:clamp(1.02rem,1.35vw,1.14rem);line-height:1.58;color:var(--inv-2);
}
.hero__acoes{display:flex;flex-wrap:wrap;align-items:center;gap:.85rem 1.6rem;margin-top:1.8rem}
.hero__acoes .btn{flex:0 1 auto}

.hero__foto{position:relative;min-width:0;justify-self:center;width:100%;max-width:440px}
.hero__foto picture{display:block;border-radius:var(--r);overflow:hidden;box-shadow:0 36px 80px -40px rgba(0,0,0,.85);background:var(--ink-3)}
/* 4:5 deixa a foto perto da altura do texto: as duas colunas ficam
   equilibradas e some o vazio que havia acima do título. */
.hero__foto img{width:100%;aspect-ratio:4/5;object-fit:cover;will-change:transform}
.hero__selo{position:absolute;right:-14px;bottom:-14px;width:84px;height:84px;pointer-events:none}
.hero__selo svg{width:100%;height:100%;fill:none;stroke:var(--red-2);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1;opacity:.9}

.hero__barra{
  display:grid;grid-template-columns:minmax(0,1fr);gap:.6rem 2rem;
  margin-top:clamp(1.9rem,3.6vw,2.9rem);padding-top:1.5rem;
  border-top:1px solid var(--linha-esc);
  font-size:.875rem;color:var(--inv-2);
}
/* alinhado pelo topo: quando um item ocupa duas linhas, o ponto
   continua na primeira linha em vez de flutuar no meio */
.hero__barra li{display:flex;align-items:flex-start;gap:.6rem;min-width:0}
.hero__barra b{font-weight:600;color:var(--inv)}
.hero__barra a{transition:color .28s var(--ease)}
.hero__barra a:hover{color:#fff}
.pt{flex:none;width:6px;height:6px;margin-top:.52rem;border-radius:50%;background:var(--red-2)}

@media (min-width:900px){
  .hero__in{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)}
  .hero__barra{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* -------- 9. Como podemos ajudar ---------------------------------------- */
/* Faixa curta entre a abertura e os serviços: respiro menor que o das
   seções grandes, para não abrir um vazio logo depois do topo. */
.ajuda{padding-block:clamp(2.8rem,5vw,4.4rem)}
.opcoes{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem}
@media (min-width:620px){.opcoes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1020px){.opcoes{grid-template-columns:repeat(4,minmax(0,1fr))}}
.opc{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;height:100%;
  min-height:76px;padding:1.1rem 1.25rem;border:1px solid var(--linha-clara);
  border-radius:var(--r);background:var(--paper);
  font-size:.98rem;font-weight:600;line-height:1.35;
  transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.opc:hover{border-color:rgba(200,27,35,.5);transform:translateY(-3px);box-shadow:0 16px 34px -22px rgba(10,10,12,.5)}
.opc__t{min-width:0}
.opc__s{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--bone);color:var(--red);transition:background .3s var(--ease),transform .4s var(--saida)}
.opc__s svg{width:16px;height:16px}
.opc:hover .opc__s{background:var(--red);color:#fff;transform:translateX(3px)}

/* -------- 10. Serviços --------------------------------------------------- */
.cards{display:grid;grid-template-columns:minmax(0,1fr);gap:.9rem}
@media (min-width:640px){.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}}
@media (min-width:1000px){.cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem}}
.card{
  position:relative;display:flex;flex-direction:column;height:100%;
  padding:1.65rem 1.5rem 1.4rem;border:1px solid var(--linha-esc);border-radius:var(--r);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  overflow:hidden;isolation:isolate;
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.card::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 90% at 50% 0%,rgba(200,27,35,.22),transparent 68%);
  opacity:0;transition:opacity .4s var(--ease);
}
.card::after{
  content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:var(--red-2);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--saida);
}
.card:hover{transform:translateY(-5px);border-color:rgba(226,38,48,.42);box-shadow:0 26px 50px -30px rgba(0,0,0,.9)}
.card:hover::before{opacity:1}
.card:hover::after{transform:scaleX(1)}
.card__ico{
  display:grid;place-items:center;width:46px;height:46px;margin-bottom:1.1rem;
  border-radius:11px;border:1px solid var(--linha-esc);background:rgba(255,255,255,.04);
  color:var(--red-2);transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.card__ico svg{width:22px;height:22px}
.card:hover .card__ico{background:var(--red);color:#fff;border-color:transparent}
.card h3{font-family:var(--display);font-size:1.055rem;font-weight:700;line-height:1.25;letter-spacing:-.016em;color:#fff;text-wrap:balance}
.card p{margin-top:.5rem;font-size:.93rem;line-height:1.55;color:var(--inv-2)}
.card__cta{
  display:inline-flex;align-items:center;gap:.45rem;margin-top:auto;padding-top:1.2rem;
  font-size:.86rem;font-weight:600;color:var(--red-2);
}
.card__cta i{font-style:normal;transition:transform .4s var(--saida)}
.card:hover .card__cta i{transform:translateX(5px)}

/* -------- 11. O escritório ----------------------------------------------- */
.esc{border-top:1px solid var(--linha-clara)}
.esc__in{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.8rem,3.6vw,3.2rem);align-items:center}
@media (min-width:1000px){
  .esc__in{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
}
.esc__foto{border-radius:var(--r);overflow:hidden;background:var(--bone);box-shadow:0 28px 60px -40px rgba(10,10,12,.6)}
.esc__foto img{width:100%;aspect-ratio:4/3;object-fit:cover;will-change:transform}
.esc__col{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.esc__col .apoio{margin-top:1rem;max-width:46ch}

.dados{
  display:grid;grid-template-columns:minmax(0,1fr);gap:0;width:100%;
  margin-top:clamp(1.6rem,2.6vw,2.2rem);border-top:1px solid var(--linha-clara);
}
@media (min-width:560px){.dados{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dado{padding:.95rem 0;border-bottom:1px solid var(--linha-clara);min-width:0}
@media (min-width:560px){
  .dado:nth-child(odd){padding-right:1.4rem}
  .dado:nth-child(even){padding-left:1.4rem;border-left:1px solid var(--linha-clara)}
  /* o e-mail atravessa as duas colunas e volta a ter padding de coluna 1 */
  .dado--largo{grid-column:1 / -1;padding-left:0!important;padding-right:0!important;border-left:0!important}
}
.dado dt{font-size:.665rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--red-rotulo)}
.dado dd{margin-top:.35rem;font-size:.97rem;line-height:1.5;overflow-wrap:anywhere}
/* Linha do CRC: fica escondida por completo se mostrarCrc for false. */
.dado__crc{display:contents}
.dado a{background-image:linear-gradient(var(--red),var(--red));background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .4s var(--saida),color .3s var(--ease)}
.dado a:hover{color:var(--red);background-size:100% 1px}

/* -------- 12. Galeria ---------------------------------------------------- */
.gal{border-top:1px solid var(--linha-clara)}
.gal__grade{display:grid;grid-template-columns:minmax(0,1fr);gap:.85rem}
@media (min-width:620px){.gal__grade{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}}
@media (min-width:960px){.gal__grade{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem}}
.gal__item{
  position:relative;display:block;width:100%;padding:0;overflow:hidden;
  border-radius:var(--r);background:var(--ink-3);cursor:zoom-in;
  box-shadow:0 20px 44px -32px rgba(10,10,12,.7);
}
/* Proporção igual nas três fotos: nenhuma coluna estreita no meio do vazio. */
.gal__item img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .7s var(--saida),filter .45s var(--ease)}
.gal__item:hover img,.gal__item:focus-visible img{transform:scale(1.045)}
.gal__pe{
  position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:2.6rem 1.05rem .95rem;text-align:left;
  background:linear-gradient(to top,rgba(10,10,12,.88),rgba(10,10,12,.45) 45%,transparent);
  color:#fff;font-size:.9rem;font-weight:600;
}
.gal__pe i{
  flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  border:1px solid rgba(255,255,255,.35);background:rgba(10,10,12,.35);
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .4s var(--saida);
}
.gal__pe i svg{width:14px;height:14px}
.gal__item:hover .gal__pe i,.gal__item:focus-visible .gal__pe i{background:var(--red);border-color:transparent;transform:scale(1.08)}

/* -------- 13. Como começar ----------------------------------------------- */
.etapas{margin-top:clamp(3rem,5.4vw,4.6rem)}
.etapas__lista{display:grid;grid-template-columns:minmax(0,1fr);gap:1.6rem;counter-reset:e}
@media (min-width:760px){.etapas__lista{grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}}
.etapa{position:relative;padding-top:1.4rem;border-top:2px solid var(--linha-clara);min-width:0;transition:border-color .45s var(--ease)}
.etapa:hover{border-top-color:var(--red)}
.etapa__n{display:block;font-family:var(--display);font-size:.8rem;font-weight:700;letter-spacing:.12em;color:var(--red)}
.etapa h3{margin-top:.5rem;font-family:var(--display);font-size:1.12rem;font-weight:700;letter-spacing:-.015em}
.etapa p{margin-top:.4rem;font-size:.95rem;line-height:1.55;color:var(--texto-2)}

/* -------- 14. Dúvidas ---------------------------------------------------- */
.duv{margin-top:clamp(3rem,5.4vw,4.6rem);max-width:820px}
.duv__item{border-bottom:1px solid var(--linha-clara)}
.duv__item:first-of-type{border-top:1px solid var(--linha-clara)}
.duv__bt{
  display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  width:100%;padding:1.2rem 0;text-align:left;
  font-family:var(--display);font-size:1.03rem;font-weight:700;letter-spacing:-.012em;
  transition:color .3s var(--ease);
}
.duv__bt:hover{color:var(--red)}
.sinal{position:relative;flex:none;width:20px;height:20px}
.sinal::before,.sinal::after{content:"";position:absolute;left:50%;top:50%;background:var(--red);border-radius:2px;transform:translate(-50%,-50%);transition:transform .4s var(--saida),opacity .3s var(--ease)}
.sinal::before{width:14px;height:1.8px}
.sinal::after{width:1.8px;height:14px}
.duv__item.aberto .sinal::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.duv__r{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--saida)}
.duv__item.aberto .duv__r{grid-template-rows:1fr}
.duv__r>div{overflow:hidden}
.duv__r p{padding-bottom:1.3rem;font-size:.97rem;line-height:1.6;color:var(--texto-2);max-width:62ch}

/* -------- 15. Contato ---------------------------------------------------- */
.fecho{background:linear-gradient(180deg,var(--ink-2) 0%,var(--ink) 100%);overflow:hidden}
.anel{position:absolute;right:-180px;top:-120px;width:min(560px,70vw);aspect-ratio:1;pointer-events:none;opacity:.5}
.anel svg{width:100%;height:100%;fill:none;stroke:rgba(226,38,48,.5);stroke-width:.35;stroke-dasharray:1;stroke-dashoffset:1;transition:transform .2s linear}

.fecho__in{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,4vw,3.4rem);align-items:start}
@media (min-width:900px){.fecho__in{grid-template-columns:minmax(0,1fr) minmax(0,.86fr)}}
.fecho__col{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.fecho__col .apoio{margin-top:1rem;max-width:36ch}
.fecho__acoes{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.9rem}

.fecho__dados{display:grid;grid-template-columns:minmax(0,1fr);gap:0;border-top:1px solid var(--linha-esc)}
@media (min-width:520px) and (max-width:899px){.fecho__dados{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fecho__dados>div{padding:1rem 0;border-bottom:1px solid var(--linha-esc);min-width:0}
@media (min-width:520px) and (max-width:899px){
  .fecho__dados>div:nth-child(odd){padding-right:1.3rem}
  .fecho__dados>div:nth-child(even){padding-left:1.3rem;border-left:1px solid var(--linha-esc)}
}
.fecho__dados dt{font-size:.665rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--red-rotulo-esc)}
.fecho__dados dd{margin-top:.35rem;font-size:.97rem;line-height:1.5;color:var(--inv);overflow-wrap:anywhere}
.fecho__dados a{transition:color .3s var(--ease)}
.fecho__dados a:hover{color:var(--red-2)}
.dd-acao{margin-top:.5rem!important}
.dd-acao .seta{min-height:36px;font-size:.87rem;color:var(--red-2)}

.mapa{position:relative;margin-top:clamp(2.4rem,4.4vw,3.6rem)}
.mapa__quadro{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--linha-esc);background:var(--ink-3);aspect-ratio:21/9;min-height:260px}
.mapa__quadro iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.3) contrast(1.05)}
.mapa__fallback{
  position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;justify-content:center;gap:.3rem;
  padding:1.6rem;color:var(--inv-2);font-size:.95rem;
}
.mapa__abrir{margin-top:.5rem;font-weight:600;color:var(--red-2)}

/* -------- 16. Rodapé ----------------------------------------------------- */
.rodape{background:var(--ink);color:var(--inv-2);padding-block:clamp(2.6rem,4.4vw,3.6rem);border-top:1px solid var(--linha-esc)}
.rodape__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.6rem}
.rodape__links{display:flex;flex-wrap:wrap;gap:.9rem 1.5rem;font-size:.92rem}
.rodape__links a{transition:color .28s var(--ease)}
.rodape__links a:hover{color:#fff}
.rodape__contato{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin-top:1.5rem;font-size:.93rem}
.rodape__contato a{color:var(--inv);overflow-wrap:anywhere;transition:color .28s var(--ease)}
.rodape__contato a:hover{color:var(--red-2)}
.rodape__base{
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;
  margin-top:1.5rem;padding-top:1.4rem;border-top:1px solid var(--linha-esc);font-size:.84rem;
}
.rodape__base a{color:var(--inv);transition:color .28s var(--ease)}
.rodape__base a:hover{color:var(--red-2)}

/* -------- 17. WhatsApp flutuante ----------------------------------------- */
.wa{
  position:fixed;right:1.1rem;bottom:1.1rem;z-index:90;
  display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:#25D366;color:#0A0A0C;box-shadow:0 14px 30px -12px rgba(0,0,0,.6);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);
  transition:opacity .35s var(--ease),transform .45s var(--saida),visibility .35s;
}
.wa.on{opacity:1;visibility:visible;transform:none}
.wa:hover{transform:scale(1.07)}
.wa svg{width:28px;height:28px}
@media (min-width:980px){.wa{right:1.6rem;bottom:1.6rem}}

/* -------- 18. Ampliação das fotos (lupa) --------------------------------- */
.lupa{
  position:fixed;inset:0;z-index:150;display:grid;place-items:center;
  padding:clamp(1rem,4vw,3rem);background:rgba(8,8,10,.94);
  opacity:0;transition:opacity .3s var(--ease);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.lupa.on{opacity:1}
.lupa__quadro{display:flex;flex-direction:column;align-items:center;gap:.9rem;max-width:100%;max-height:100%}
.lupa__quadro img{
  max-width:min(100%,900px);max-height:76vh;width:auto;height:auto;object-fit:contain;
  border-radius:10px;box-shadow:0 30px 70px -30px rgba(0,0,0,.9);
  transform:scale(.97);opacity:0;transition:transform .4s var(--saida),opacity .35s var(--ease);
}
.lupa.on .lupa__quadro img{transform:none;opacity:1}
.lupa__quadro figcaption{font-size:.92rem;color:var(--inv-2);text-align:center;max-width:52ch}
.lupa__fechar,.lupa__nav{
  position:absolute;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.06);color:#fff;
  transition:background .28s var(--ease),transform .3s var(--ease),border-color .28s var(--ease);
}
.lupa__fechar:hover,.lupa__nav:hover{background:var(--red);border-color:transparent;transform:scale(1.06)}
.lupa__fechar svg,.lupa__nav svg{width:20px;height:20px}
.lupa__fechar{top:clamp(.8rem,2.4vw,1.6rem);right:clamp(.8rem,2.4vw,1.6rem)}
.lupa__nav{top:50%;margin-top:-23px}
.lupa__nav--ant{left:clamp(.5rem,2vw,1.6rem)}
.lupa__nav--prox{right:clamp(.5rem,2vw,1.6rem)}
@media (max-width:600px){
  .lupa__nav{top:auto;bottom:clamp(.8rem,3vw,1.4rem);margin-top:0}
  .lupa__quadro img{max-height:66vh}
}

/* ==========================================================================
   19. ANIMAÇÕES
   Regras: nada some para sempre, nada trava a rolagem, nada pesa.
   Sem JavaScript ou com "movimento reduzido", tudo aparece normalmente.
   ========================================================================== */

/* --- Entrada coordenada da abertura: rótulo, título, texto, botões, foto --- */
.js .hero .rotulo,
.js .hero__apoio,
.js .hero__acoes,
.js .hero__barra{opacity:0;transform:translateY(16px)}
.js .hero .linha>span{transform:translateY(105%)}
.js .hero__foto{opacity:0;transform:translateY(26px) scale(.985)}

.hero.ativo .rotulo,
.hero.ativo .hero__apoio,
.hero.ativo .hero__acoes,
.hero.ativo .hero__barra{
  opacity:1;transform:none;
  transition:opacity .7s var(--ease) var(--d,0ms),transform .9s var(--saida) var(--d,0ms);
}
.hero.ativo .linha>span{transform:none;transition:transform 1s var(--saida) var(--d,0ms)}
.hero.ativo .hero__foto{
  opacity:1;transform:none;
  transition:opacity .9s var(--ease) var(--d,0ms),transform 1.1s var(--saida) var(--d,0ms);
}
.hero.ativo .hero__selo svg{animation:tracar 1.5s var(--saida) .9s forwards}
@keyframes tracar{to{stroke-dashoffset:0}}

/* --- Revelação das seções ao rolar --- */
.js .r-sobe,.js .r-dir,.js .r-escala,.js .r-img{will-change:opacity,transform}
.js .r-sobe{opacity:0;transform:translateY(22px)}
.js .r-dir{opacity:0;transform:translateY(22px)}
.js .r-escala{opacity:0;transform:translateY(18px) scale(.985)}
.js .r-img{opacity:0;transform:translateY(24px) scale(.99)}
.js .r-masc>span{display:inline-block;transform:translateY(105%)}
.js .r-masc{overflow:hidden;display:block}

.r-sobe.vis,.r-dir.vis{
  opacity:1;transform:none;
  transition:opacity .7s var(--ease) var(--d,0ms),transform .85s var(--saida) var(--d,0ms);
}
.r-escala.vis{
  opacity:1;transform:none;
  transition:opacity .6s var(--ease) var(--d,0ms),transform .8s var(--saida) var(--d,0ms);
}
.r-img.vis{
  opacity:1;transform:none;
  transition:opacity .8s var(--ease) var(--d,0ms),transform 1.05s var(--saida) var(--d,0ms);
}
.r-masc.vis>span{transform:none;transition:transform .95s var(--saida) var(--d,0ms)}
.r-anel.vis svg{animation:tracar 2.2s var(--saida) .2s forwards}

/* Depois de aparecer, solta o will-change (não deixa camada presa na GPU). */
.vis{will-change:auto}

@media (min-width:900px){
  .js .r-dir{transform:translateX(26px)}
  .r-dir.vis{transform:none}
}

/* --- Sem JavaScript: tudo visível, nada escondido --- */
html:not(.js) .hero .linha>span,
html:not(.js) .r-masc>span{transform:none}

/* --- Movimento reduzido: sem deslocamento, sem parallax, sem traços --- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .js .hero .rotulo,.js .hero__apoio,.js .hero__acoes,.js .hero__barra,
  .js .hero__foto,.js .r-sobe,.js .r-dir,.js .r-escala,.js .r-img{opacity:1;transform:none}
  .js .hero .linha>span,.js .r-masc>span{transform:none}
  .hero__selo svg,.anel svg{stroke-dashoffset:0}
  .parallax{transform:none!important}
  .gal__item img{transition:none}
}

/* --- Impressão --- */
@media print{
  .topo,.painel,.wa,.lupa,.mapa,.menu-bt,.pular{display:none!important}
  body{background:#fff;color:#000}
  .sec,.hero{padding-block:1.5rem;background:#fff!important;color:#000!important}
  .escuro,.escuro .apoio,.card h3,.card p,.fecho__dados dd{color:#000!important}
}