/* ═══════════════════════════════════════════════════════════════════════
   CJR Financas, folha principal.
   Carregar depois de tokens.css e fontes.css, antes de efeitos.css.
   Componente so usa token semantico, nunca primitiva.
   Construido em 375px primeiro.
   ═══════════════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* Troca de tema muda cor em cada elemento na hora, sem transicao, seria
   duro. Regra de especificidade minima (universal), entao qualquer
   componente com sua propria transition (botao, card) usa a dele, nao
   esta. So pega quem nao declarou nada. */
*{transition:background-color .28s ease,color .28s ease,border-color .28s ease}
@media (prefers-reduced-motion:reduce){*{transition:none}}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  background:var(--fundo);
  color:var(--texto);
  font-family:var(--f-texto);
  font-size:var(--t-base);
  line-height:var(--lh-texto);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
a{color:var(--acento-texto);text-decoration-thickness:1px;text-underline-offset:3px}

h1,h2,h3,h4{
  font-family:var(--f-titulo);
  font-weight:600;
  line-height:var(--lh-titulo);
  letter-spacing:var(--ls-titulo);
  text-wrap:balance;
}
p{text-wrap:pretty}

/* Defeito 11 do MVP: havia outline:none em todo input, select e textarea,
   trocado so por 1px de borda. Quem usa teclado perdia a posicao no unico
   formulario do site. Duas cores porque ameixa sobre ameixa mede 1,83:1. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--foco);
  outline-offset:2px;
  border-radius:var(--r-selo);
}
.secao--escura :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible,
.topo :where(a,button):focus-visible,
.gaveta :where(a,button):focus-visible{
  outline-color:var(--foco-inverso);
}

.pular{
  position:absolute;left:var(--e-4);top:-100px;z-index:200;
  background:var(--acento);color:#fff;padding:var(--e-3) var(--e-5);
  border-radius:var(--r-btn);font-weight:500;text-decoration:none;
  transition:top var(--dur-1) ease;
}
.pular:focus{top:var(--e-4)}

.env{width:100%;max-width:var(--env);margin-inline:auto;padding-inline:var(--e-5)}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}


/* ── chapeu e cabecalho de secao ─────────────────────────────────────────
   Sem tracinho decorativo antes do rotulo. Linha mais uppercase antes de
   um h2 le como cara de IA, entao o chapeu e so o texto.               */

.chapeu{
  display:block;
  font-size:var(--t-xs);
  font-weight:600;
  letter-spacing:var(--ls-chapeu);
  text-transform:uppercase;
  color:var(--acento-texto);
  margin-bottom:var(--e-3);
}
.secao--escura .chapeu{color:var(--destaque-inverso)}
/* O hero e sempre escuro (fundo-escuro fixo, nao muda com o tema), mas
   nao carrega a classe secao--escura, entao o chapeu dele escapava da
   regra acima e ficava com --acento-texto, que so foi calibrado pra
   sentar sobre superficie clara. */
.hero .chapeu{color:var(--destaque-inverso)}

.cab{max-width:var(--env-texto);margin-bottom:var(--e-6)}
.cab h2{font-size:var(--t-2xl)}
.cab .intro{margin-top:var(--e-4);color:var(--texto-suave);font-size:var(--t-md)}
.secao--escura .cab .intro{color:var(--texto-inverso-suave)}
.cab--centro{margin-inline:auto;text-align:center}


/* ── botoes ─────────────────────────────────────────────────────────────── */

.botao{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e-2);
  min-height:50px;padding:14px 26px;
  border-radius:var(--r-btn);
  font-family:var(--f-texto);font-weight:500;font-size:var(--t-sm);
  text-decoration:none;text-align:center;
  background:var(--acento);color:#fff;
  box-shadow:var(--el-1);
  transition:transform var(--dur-1) ease,background var(--dur-1) ease,
             box-shadow var(--dur-1) ease;
}
@media (hover:hover){
  .botao:hover{background:var(--acento-forte);transform:translateY(-2px);
    box-shadow:var(--el-2)}
}
.botao--linha{
  background:transparent;color:var(--acento-texto);
  border:1.5px solid var(--borda-forte);box-shadow:none;
}
@media (hover:hover){
  .botao--linha:hover{background:var(--acento-fraco);color:var(--acento-forte);
    border-color:var(--acento-texto);transform:translateY(-2px);box-shadow:none}
}
.secao--escura .botao--linha{color:var(--destaque-inverso);border-color:var(--borda-inversa)}
@media (hover:hover){
  .secao--escura .botao--linha:hover{background:rgba(255,255,255,.08);
    color:var(--destaque-inverso);border-color:var(--destaque-inverso)}
}
.botao--claro{background:var(--destaque-inverso);color:var(--pl-900)}
@media (hover:hover){
  .botao--claro:hover{background:var(--ar-100);color:var(--pl-900)}
}
.botao--grande{min-height:56px;padding:16px 32px;font-size:var(--t-base)}
.botao .ic{width:19px;height:19px;flex-shrink:0}


/* ── topo ────────────────────────────────────────────────────────────────
   Nada de backdrop-filter, filter, transform nem will-change aqui.
   Qualquer um deles cria containing block e quebra a gaveta fixed.
   A gaveta tambem nao e descendente deste header, ver .gaveta.         */

.topo{
  position:sticky;top:0;z-index:80;
  background:var(--fundo);
  padding-block:12px;
}
.topo__int{display:flex;align-items:center;justify-content:space-between;gap:var(--e-4)}

/* Marca. So wordmark, sem icone.
   O arco desenhado antes nao era a logo real da cliente, entao saiu do
   site inteiro (header, rodape, gaveta, og-image, favicon). */
.marca{
  display:inline-flex;align-items:center;
  text-decoration:none;flex-shrink:0;
}
.marca__nome{
  font-family:var(--f-titulo);font-weight:600;font-size:1.25rem;
  line-height:1;letter-spacing:-.01em;color:var(--texto);
}
.marca__nome em{font-style:normal;font-weight:400;color:var(--texto-suave)}
.rodape .marca__nome,.gaveta .marca__nome{color:var(--texto-inverso)}
.rodape .marca__nome em,.gaveta .marca__nome em{color:var(--texto-inverso-suave)}

.menu{display:none}
.hamburguer{
  width:44px;height:44px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:4px;
  border-radius:var(--r-btn);flex-shrink:0;
}
.hamburguer span{
  display:block;width:19px;height:2px;background:var(--texto);
  border-radius:2px;transition:transform var(--dur-1) ease,opacity var(--dur-1) ease;
}
body.menu-aberto .hamburguer span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-aberto .hamburguer span:nth-child(2){opacity:0}
body.menu-aberto .hamburguer span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}


/* ── gaveta mobile ───────────────────────────────────────────────────────
   Filho direto de <body>, NAO do header. Sticky nao cria containing block
   pra fixed, entao o markup antigo funcionava por sorte: estava a um
   transform de quebrar, e ja quebrou em producao duas vezes.
   Contencao de foco por inert em main, rodape e cta, feita no JS.      */

.gaveta{
  position:fixed;inset:0;z-index:100;
  background:var(--fundo-escuro);
  display:flex;flex-direction:column;
  padding:var(--e-8) var(--e-5) var(--e-6);
  transform:translateX(100%);
  visibility:hidden;
  transition:transform var(--dur-2) var(--ease-saida),visibility 0s linear var(--dur-2);
}
body.menu-aberto .gaveta{
  transform:none;visibility:visible;
  transition:transform var(--dur-2) var(--ease-saida),visibility 0s;
}
.gaveta__fechar{
  position:absolute;top:var(--e-4);right:var(--e-4);
  width:44px;height:44px;display:grid;place-items:center;
  color:var(--texto-inverso);border-radius:var(--r-btn);
}
.gaveta__fechar svg{width:22px;height:22px}
.gaveta__nav{display:flex;flex-direction:column;gap:var(--e-1);margin-top:var(--e-6)}
.gaveta__nav a{
  font-family:var(--f-titulo);font-size:var(--t-xl);font-weight:400;
  color:var(--texto-inverso);text-decoration:none;
  padding:var(--e-3) 0;border-bottom:1px solid var(--borda-inversa);
}
.gaveta__nav a.is-atual{color:var(--destaque-inverso)}
.gaveta__zap{margin-top:auto;padding-top:var(--e-6)}
.gaveta__zap .botao{width:100%}


/* ── secoes ─────────────────────────────────────────────────────────────── */

.secao{padding-block:var(--secao-y)}
.secao--clara{background:var(--superficie)}
.secao--escura{background:var(--fundo-escuro);color:var(--texto-inverso)}
.secao--escura h2,.secao--escura h3{color:var(--texto-inverso)}
.secao--escura p{color:var(--texto-inverso-suave)}


/* ── hero ───────────────────────────────────────────────────────────────── */

.hero{
  background:var(--fundo-escuro);
  color:var(--texto-inverso);
  padding-block:var(--e-8) var(--e-9);
  position:relative;overflow:hidden;
}
.hero__int{display:grid;gap:var(--e-7);position:relative;z-index:1}
.hero h1{font-size:var(--t-4xl);font-weight:400;color:var(--texto-inverso);max-width:15ch}
.hero h1 em{font-style:normal;color:var(--destaque-inverso)}
.hero__sub{
  margin-top:var(--e-5);font-size:var(--t-md);
  color:var(--texto-inverso-suave);max-width:52ch;
}
.hero__acoes{display:flex;flex-wrap:wrap;gap:var(--e-3);margin-top:var(--e-6)}
.hero__retrato{
  width:min(300px,78vw);aspect-ratio:3/4;
  border-radius:var(--r-retrato);overflow:hidden;
  background:var(--pl-900);box-shadow:var(--el-3);
  justify-self:center;
}
.hero__retrato img{width:100%;height:100%;object-fit:cover}

.tira{background:var(--fundo-escuro-2);padding-block:var(--e-4)}
.tira__lista{
  display:flex;flex-wrap:wrap;gap:var(--e-3) var(--e-6);
  justify-content:center;list-style:none;
}
.tira__item{
  display:flex;align-items:center;gap:var(--e-2);
  font-size:var(--t-sm);color:var(--texto-inverso-suave);
}
.tira__item::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--destaque-inverso);flex-shrink:0;
}


/* ── grades e cards ─────────────────────────────────────────────────────── */

.grade{display:grid;gap:var(--e-4)}
.card{
  background:var(--superficie);
  border:1px solid var(--borda);
  border-radius:var(--r-card);
  padding:var(--e-5);
  box-shadow:var(--el-1);
}
.secao--escura .card{
  background:var(--fundo-escuro-2);
  border-color:var(--borda-inversa);
  box-shadow:none;
}
.card h3{font-size:var(--t-lg);margin-bottom:var(--e-2);color:var(--texto)}
.card p{font-size:var(--t-sm);color:var(--texto-suave)}
.secao--escura .card h3{color:var(--texto-inverso)}
.secao--escura .card p{color:var(--texto-inverso-suave)}

/* Cards de servico tem quantidade de texto diferente entre si; sem isso
   o botao de cada um fica numa altura diferente, dependendo do card. */
.card--servico{display:flex;flex-direction:column}
.card__cta{margin-top:auto;padding-top:var(--e-5)}
a.card{display:block;text-decoration:none}
@media (hover:hover){
  a.card:hover h3{color:var(--acento-texto)}
  .secao--escura a.card:hover h3{color:var(--destaque-inverso)}
}

.card__n{
  font-family:var(--f-num);font-size:var(--t-sm);font-weight:500;
  color:var(--destaque);display:block;margin-bottom:var(--e-3);
}
.secao--escura .card__n{color:var(--destaque-inverso)}

.depoimento p{
  font-family:var(--f-titulo);font-style:italic;font-size:var(--t-md);
  color:var(--texto);line-height:var(--lh-texto);
}
.secao--escura .depoimento p{color:var(--texto-inverso)}
.depoimento footer{
  margin-top:var(--e-4);font-size:var(--t-sm);font-weight:600;color:var(--texto);
}
.secao--escura .depoimento footer{color:var(--texto-inverso)}
.depoimento footer span{font-weight:400;color:var(--texto-suave)}
.secao--escura .depoimento footer span{color:var(--texto-inverso-suave)}

/* No mobile a pilha de depoimentos empilhados de um em um fica longa
   demais pra rolar. Mostra os 3 primeiros e um pedaco borrado do 4o,
   como indicio de que tem mais, atras de um botao "ver mais". No
   desktop a grade de 3 colunas ja fica curta o bastante, entao o
   recorte nem entra. */
[data-depoimentos-cortina],[data-depoimentos-btn]{display:none}
@media (max-width:759px){
  [data-depoimentos-grade]{overflow:hidden}
  [data-depoimentos-cortina]{
    display:block;height:110px;margin-top:-110px;position:relative;z-index:1;
    background:linear-gradient(to bottom,transparent,var(--fundo-escuro) 78%);
    filter:blur(1px);pointer-events:none;
  }
  [data-depoimentos-btn]{display:block;margin:var(--e-4) auto 0;position:relative;z-index:1}
  .depoimentos--aberto [data-depoimentos-grade]{overflow:visible}
  .depoimentos--aberto [data-depoimentos-cortina],
  .depoimentos--aberto [data-depoimentos-btn]{display:none}
}


/* ── abas de dor, padrao tablist de verdade ─────────────────────────────── */

.abas__botoes{
  display:flex;gap:var(--e-2);margin-bottom:var(--e-5);flex-wrap:wrap;
}
.abas__botao{
  padding:10px 20px;border-radius:var(--r-chip);
  border:1.5px solid var(--borda-forte);
  font-size:var(--t-sm);font-weight:500;color:var(--texto);
  transition:background var(--dur-1) ease,color var(--dur-1) ease,
             border-color var(--dur-1) ease;
}
.abas__botao[aria-selected="true"]{
  background:var(--acento);color:#fff;border-color:var(--acento);
}
.abas__painel[hidden]{display:none}


/* ── numeros ────────────────────────────────────────────────────────────── */

.numeros{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--e-6) var(--e-4);margin-top:var(--e-7);text-align:center;
}
@media (min-width:640px){
  .numeros{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));text-align:left;gap:var(--e-5)}
}
.num strong{
  display:block;font-family:var(--f-num);font-weight:500;
  font-size:var(--t-2xl);line-height:1;letter-spacing:-.02em;
  color:var(--destaque-inverso);font-variant-numeric:tabular-nums;
}
.num span{display:block;margin-top:var(--e-2);font-size:var(--t-sm);
  color:var(--texto-inverso-suave)}


/* ── faq ────────────────────────────────────────────────────────────────── */

.faq__lista{display:grid;gap:var(--e-3);max-width:var(--env-texto);margin-inline:auto}
/* O card do FAQ tem fundo claro mesmo dentro de .secao--escura, entao
   precisa fixar a cor do texto. Sem isto ele herda --texto-inverso da
   secao e vira branco sobre branco, que foi o que aconteceu em
   /calculadora/. Cor explicita aqui vale nos dois contextos. */
.faq details{
  background:var(--superficie);border:1px solid var(--borda);
  border-radius:var(--r-card);padding:var(--e-4) var(--e-5);
  color:var(--texto);
}
.faq summary{color:var(--texto)}
.secao--escura .faq details p,.faq details p{color:var(--texto-suave)}
.faq summary{
  font-family:var(--f-titulo);font-size:var(--t-md);font-weight:600;
  cursor:pointer;list-style:none;display:flex;
  justify-content:space-between;align-items:center;gap:var(--e-4);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex-shrink:0;width:12px;height:12px;
  border-right:2px solid var(--acento-texto);border-bottom:2px solid var(--acento-texto);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform var(--dur-1) ease;
}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.faq details p{margin-top:var(--e-3);color:var(--texto-suave);font-size:var(--t-sm)}


/* ── rodape ─────────────────────────────────────────────────────────────── */

.rodape{background:var(--fundo-escuro-2);color:var(--texto-inverso);
  padding-block:var(--e-8) var(--e-6)}
.rodape__int{display:grid;gap:var(--e-6)}
.rodape__marca svg{height:40px;width:auto;margin-bottom:var(--e-4)}
.rodape__marca p{color:var(--texto-inverso-suave);font-size:var(--t-sm);max-width:46ch}
.rodape__nav{display:grid;gap:var(--e-2)}
.rodape__nav a{color:var(--texto-inverso);text-decoration:none;font-size:var(--t-sm)}
@media (hover:hover){.rodape__nav a:hover{color:var(--destaque-inverso)}}
.rodape__base{
  margin-top:var(--e-6);padding-top:var(--e-5);
  border-top:1px solid var(--borda-inversa);
  display:flex;flex-wrap:wrap;gap:var(--e-2) var(--e-5);
  justify-content:space-between;
  font-size:var(--t-xs);color:var(--texto-inverso-suave);
}


/* ── cta fixo mobile ─────────────────────────────────────────────────────
   Altura medida, nao estimada: --cta-fixo-h alimenta o padding do body
   pra barra nao comer conteudo. Bug ja ocorrido em outro projeto.      */

.cta-fixo{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--superficie);
  border-top:1px solid var(--borda);
  padding:var(--e-2) var(--e-4);
  padding-bottom:calc(var(--e-2) + env(safe-area-inset-bottom));
}
.cta-fixo .botao{width:100%;min-height:48px}
body{padding-bottom:var(--cta-fixo-h)}
body.menu-aberto .cta-fixo{display:none}


/* ── subhero e trilha, paginas internas ─────────────────────────────────── */

.subhero{background:var(--fundo-escuro);color:var(--texto-inverso);
  padding-block:var(--e-7) var(--e-8)}
.subhero h1{font-size:var(--t-3xl);font-weight:400;color:var(--texto-inverso);
  max-width:18ch}
.subhero p{margin-top:var(--e-4);color:var(--texto-inverso-suave);max-width:54ch}
.trilha{font-size:var(--t-xs);color:var(--texto-inverso-suave);margin-bottom:var(--e-4)}
.trilha a{color:var(--destaque-inverso);text-decoration:none}
.trilha span{margin-inline:var(--e-2);opacity:.5}


/* ═══════════════════════════════════════════════════════════════════════
   DESKTOP
   ═══════════════════════════════════════════════════════════════════════ */

@media (min-width:760px){
  .hero__int{grid-template-columns:1.15fr .85fr;align-items:center;gap:var(--e-8)}
  .grade--2{grid-template-columns:repeat(2,1fr)}
  .grade--3{grid-template-columns:repeat(3,1fr)}
  .grade--4{grid-template-columns:repeat(4,1fr)}
  .rodape__int{grid-template-columns:1.5fr 1fr}
  .rodape__nav{grid-template-columns:repeat(2,1fr)}
}

@media (min-width:960px){
  /* a gaveta e a barra fixa sao so mobile */
  .hamburguer,.gaveta,.cta-fixo{display:none}
  body{padding-bottom:0}

  .menu{display:flex;align-items:center;gap:var(--e-5)}
  .menu a{
    font-size:var(--t-sm);font-weight:500;color:var(--texto);
    text-decoration:none;position:relative;padding-block:4px;
  }
  .menu a.is-atual{color:var(--acento-texto)}
  .menu a.is-atual::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
    background:var(--acento-texto);border-radius:2px;
  }
  @media (hover:hover){.menu a:hover{color:var(--acento-texto)}}
  .menu .botao{margin-left:var(--e-2)}
}


/* ═══════════════════════════════════════════════════════════════════════
   CALCULADORA
   Seletor com fieldset + radio nativo, estilizado como chip. Radio nativo
   da teclado, leitor de tela e comportamento sem JS de graca; role="radio"
   na mao com roving tabindex e criadouro de bug por zero beneficio.
   ═══════════════════════════════════════════════════════════════════════ */

.calc{max-width:760px;margin-inline:auto}
.calc__grupo{border:0;margin-bottom:var(--e-5)}
.calc__legenda{
  font-size:var(--t-xs);font-weight:600;letter-spacing:var(--ls-chapeu);
  text-transform:uppercase;color:var(--texto-suave);margin-bottom:var(--e-3);
}
.calc__chips{display:flex;flex-wrap:wrap;gap:var(--e-2)}
.calc__chip input{position:absolute;opacity:0;width:1px;height:1px}
.calc__chip label{
  display:inline-block;padding:10px 18px;border-radius:var(--r-chip);
  border:1.5px solid var(--borda-forte);font-size:var(--t-sm);
  font-weight:500;cursor:pointer;
  transition:background var(--dur-1) ease,color var(--dur-1) ease,
             border-color var(--dur-1) ease;
}
.calc__chip input:checked + label{
  background:var(--acento);color:#fff;border-color:var(--acento);
}
.calc__chip input:focus-visible + label{
  outline:2px solid var(--foco);outline-offset:2px;
}

.calc__campos{display:grid;gap:var(--e-4);margin-bottom:var(--e-5)}
@media (min-width:640px){.calc__campos{grid-template-columns:1fr 1fr}}
.calc__campo{display:flex;flex-direction:column;gap:6px}
.calc__campo label{font-size:var(--t-sm);font-weight:500}
.calc__dica-campo{font-size:var(--t-xs);color:var(--texto-suave)}
.calc__moeda{
  display:flex;align-items:center;gap:var(--e-2);
  border:1.5px solid var(--borda-forte);border-radius:var(--r-campo);
  padding:0 var(--e-4);background:var(--superficie);
  transition:border-color var(--dur-1) ease;
}
.calc__moeda:focus-within{border-color:var(--acento-texto)}
.calc__moeda > span{font-family:var(--f-num);font-size:var(--t-sm);
  color:var(--texto-suave);flex-shrink:0}
.calc__moeda input{
  flex:1;min-width:0;border:0;background:none;padding:13px 0;
  font-family:var(--f-num);font-size:var(--t-md);
  font-variant-numeric:tabular-nums;
}
.calc__moeda input:focus{outline:none}
.calc__moeda:has(input[aria-invalid="true"]){border-color:var(--negativo)}
.calc__campo select{
  border:1.5px solid var(--borda-forte);border-radius:var(--r-campo);
  padding:13px var(--e-4);background:var(--superficie);
}

.frase{max-width:56ch;margin-inline:auto;display:flex;flex-direction:column;gap:var(--e-4)}
.frase textarea{
  border:1.5px solid var(--borda-forte);border-radius:var(--r-campo);
  padding:var(--e-4);background:var(--superficie);resize:vertical;
  font-family:var(--f-texto);font-size:var(--t-base);line-height:var(--lh-texto);
  transition:border-color var(--dur-1) ease;
}
.frase textarea:focus{outline:none;border-color:var(--acento-texto)}

.calc__acao{width:100%}
.calc__aviso{
  font-size:var(--t-xs);color:var(--texto-suave);
  text-align:center;margin-top:var(--e-3);
}

/* Escondido ate o primeiro clique em "quero descobrir". O placeholder
   "preencha os campos..." sempre pareceu uma caixa vazia sobrando na
   pagina, entao agora o painel so existe visualmente depois que ha algo
   pra mostrar, com entrada suave em vez de aparecer ou sumir seco. */
.calc__painel{
  background:var(--fundo-escuro);color:var(--texto-inverso);padding:0 var(--e-6);
  max-height:0;opacity:0;margin-top:0;overflow:hidden;
  transition:max-height .5s var(--ease-saida),opacity .4s ease,
             margin-top .5s var(--ease-saida),padding .5s var(--ease-saida);
}
.calc__painel--visivel{
  max-height:900px;opacity:1;margin-top:var(--e-6);padding:var(--e-6);
}
@media (prefers-reduced-motion:reduce){
  .calc__painel{transition:opacity .2s ease}
}
.calc__painel[data-estado="negativo"],
.calc__painel[data-estado="impossivel"]{background:var(--pl-900)}
.calc__saida{min-height:150px;display:flex;flex-direction:column;justify-content:center}
.calc__dica{color:var(--texto-inverso-suave);font-size:var(--t-sm);text-align:center}
.calc__erro{color:var(--ar-300);font-size:var(--t-sm)}
.calc__rotulo{
  font-size:var(--t-xs);font-weight:600;letter-spacing:var(--ls-chapeu);
  text-transform:uppercase;color:var(--destaque-inverso);
}
.calc__valor{
  font-family:var(--f-num);font-size:clamp(1.9rem,7vw,2.6rem);font-weight:500;
  line-height:1.05;letter-spacing:-.02em;margin:var(--e-2) 0 var(--e-3);
  font-variant-numeric:tabular-nums;
}
.calc__texto{color:var(--texto-inverso-suave);max-width:56ch}
.calc__borrado{filter:blur(14px);user-select:none}
.calc__desbloqueio{
  margin-top:var(--e-3);font-size:var(--t-sm);color:var(--destaque-inverso);
}
.calc__zap{margin-top:var(--e-5);width:100%}


/* ── tabela comparativa ─────────────────────────────────────────────────
   Rola sozinha dentro do proprio container em telas estreitas, pra pagina
   nunca rolar na horizontal. */
.compara{width:100%;border-collapse:collapse;min-width:560px;font-size:var(--t-sm)}
.compara th,.compara td{
  padding:var(--e-4);text-align:left;vertical-align:top;
  border-bottom:1px solid var(--borda);
}
.compara thead th{
  font-family:var(--f-titulo);font-size:var(--t-base);font-weight:600;
  color:var(--acento-texto);border-bottom:2px solid var(--borda-forte);
}
.compara tbody th{font-weight:600;color:var(--texto);white-space:nowrap}
.compara td{color:var(--texto-suave)}
.compara tbody tr:last-child th,.compara tbody tr:last-child td{border-bottom:0}


/* ═══════════════════════════════════════════════════════════════════════
   ALTERNADOR DE TEMA
   Botao unico, sempre visivel (fora de .menu), entao funciona igual em
   mobile e desktop sem duplicar markup na gaveta. O sol e a lua sao dois
   SVG empilhados que trocam de opacidade e giro; a cor de tudo no site
   muda porque so a camada semantica do design system e redefinida em
   css/tema-escuro.css, nao porque este botao sabe pintar nada.
   ═══════════════════════════════════════════════════════════════════════ */

.alterna-tema{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  border:1.5px solid var(--borda-forte);
  display:grid;place-items:center;position:relative;
  color:var(--texto);
  transition:background var(--dur-1) ease,border-color var(--dur-1) ease;
}
@media (hover:hover){
  .alterna-tema:hover{background:var(--acento-fraco);border-color:var(--acento-texto)}
}
.alterna-tema svg{
  position:absolute;width:19px;height:19px;
  transition:opacity var(--dur-2) ease,transform var(--dur-2) var(--ease-saida);
}
.alterna-tema__sol{opacity:1;transform:rotate(0deg) scale(1)}
.alterna-tema__lua{opacity:0;transform:rotate(-90deg) scale(.5)}
:root[data-theme="dark"] .alterna-tema__sol{opacity:0;transform:rotate(90deg) scale(.5)}
:root[data-theme="dark"] .alterna-tema__lua{opacity:1;transform:rotate(0deg) scale(1)}
@media (prefers-reduced-motion:reduce){
  .alterna-tema svg{transition:opacity .15s ease;transform:none!important}
}