/* Mesma composição original; fotos enquadradas e tarifas atualizadas. */
.tcard{min-height:184px}
.tcard-foto{width:52%;height:100%;object-fit:cover;opacity:1}
.tcard-veu{background:linear-gradient(to right,var(--surface) 0,var(--surface) 43%,color-mix(in srgb,var(--surface) 94%,transparent) 49%,color-mix(in srgb,var(--surface) 40%,transparent) 58%,transparent 69%)}
.tcard-nome{max-width:calc(64% - 42px)}
.tcard-desc{max-width:58%;display:block;-webkit-line-clamp:unset;overflow:visible}
.tcard-val{background:var(--green);color:var(--green-ink);padding:3px 10px;border-radius:999px}
.tcard-val svg{fill:#fff;color:#fff;stroke:#fff}
.tcard-val small{color:var(--green-ink)}
.tcard-cat{max-width:48%}
#certc-horas{grid-template-columns:repeat(5,minmax(0,1fr))}
.planos-cert{display:grid;gap:10px;margin:20px 0}
.plano-cert{width:100%;align-items:center;gap:12px;text-align:left}
.plano-cert .plano-texto{display:flex;flex-direction:column;flex:1;min-width:0;gap:4px}
.plano-cert .plano-texto>b{font-size:17px}
.plano-cert small{font-size:12px;line-height:1.5;color:var(--fg-dim);display:block}
.plano-cert>strong{font-size:22px;white-space:nowrap;letter-spacing:-.02em;text-align:right}
.plano-selo{font-family:var(--mono);font-size:10px;color:var(--green-txt);text-transform:uppercase;letter-spacing:.04em}
#certc-plano-cta .btn{white-space:normal}
.of-titulo{font-size:clamp(25px,4.8vw,34px);line-height:1.13;letter-spacing:-.04em;margin:12px 0}
.of-kit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);margin:24px 0 0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--green-soft)}
.of-kit>img{width:100%;height:100%;min-height:230px;max-height:320px;object-fit:contain;object-position:center;background:#f6f3ea}
.of-kit figcaption{padding:22px 18px;align-self:center}
.of-kit figcaption .mono{font-size:10px;color:var(--green-txt)}
.of-kit figcaption b{font-size:23px;line-height:1.13;letter-spacing:-.03em;display:block}
.of-kit figcaption p{font-size:14px;margin:10px 0}
.of-kit figcaption small{display:block;color:var(--fg-dim);font-size:10px;line-height:1.4}
.of-kit-envio{font-size:12px!important}
.of-planos-titulo{font-size:22px;letter-spacing:-.025em;margin:28px 0 0}
.of-planos-sub{margin:8px 0 0!important}
@media(max-width:410px){.of-kit{grid-template-columns:1fr}.of-kit>img{height:auto;aspect-ratio:4/3;min-height:0;object-position:center}.of-kit figcaption{padding:18px}.of-kit figcaption b br{display:none}.of-kit figcaption b{font-size:23px}}
@media(max-width:699px){.tcard{min-height:184px}.tcard-nome{max-width:calc(66% - 42px)}.tcard-desc{max-width:58%}}
@media(max-width:360px){.tcard-val{font-size:18px;padding:3px 8px}.tcard-nome{font-size:15px}.tcard-desc{font-size:13px}.plano-cert{gap:8px}.plano-cert>strong{font-size:20px}}

/* 25/09: desenhos dos setores em duotone (Phosphor, MIT) e tema claro mais quente. */
svg.duo{fill:currentColor!important;stroke:none!important}
svg.duo .duo-f{opacity:.24}
.setor-ico{width:44px;height:44px;border-radius:12px;margin-bottom:14px;
  background:var(--green-soft);color:var(--green-txt);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--green-txt) 16%,transparent)}
.setor-ico svg{width:26px;height:26px}
/* o amarelo de aviso no setor travado brigava com o verde da marca */
.setor.travado .setor-ico{background:var(--green-soft);color:var(--green-txt)}
.tcard-ico svg.duo{width:19px;height:19px}

[data-tema="claro"]{
  /* taupe quente no lugar do cinza neutro: mesma leitura de borda (3,2:1 ou mais nos tres fundos) */
  --line-alvo:#847a68;
}
[data-tema="claro"] .setor{border-color:rgba(90,72,40,.22);box-shadow:0 1px 2px rgba(60,45,20,.06)}
[data-tema="claro"] .setor:hover{border-color:#847a68}
[data-tema="claro"] .setor.aberto{border-color:var(--green-txt)}
[data-tema="claro"] .set-caixa{border-color:rgba(90,72,40,.14)}

/* 25/09: o `.sub{margin:0 0 28px}` da pagina zerava o margin-inline:auto do estilo.css, entao todo
   texto com max-width ficava encostado a esquerda com o texto centrado dentro: centro torto. */
.sub,.fine,.nota-dura,.preambulo,.res-base,.res-pre{margin-left:auto;margin-right:auto}

/* 25/09: faixa de programas de startup embaixo do grafico do mercado. Chips brancos nos dois
   temas porque os logos oficiais sao feitos pra fundo claro. */
.programas{margin:22px auto 0;text-align:center}
.programas .mono{display:block;font-size:11px;margin-bottom:10px}
.programas ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.programas li{display:flex;align-items:center;justify-content:center;height:52px;padding:0 16px;
  border:1px solid var(--line);border-radius:12px;background:#fff;min-width:0}
.programas img{display:block;height:auto;max-width:100%}
.programas li:nth-child(2) img{width:112px}
.programas li:nth-child(3) img{width:150px}
.programas .yc{display:flex;align-items:center;gap:7px;font:700 17px/1 var(--sans);color:#1a1a1a;letter-spacing:-.02em}
.programas .yc i{display:grid;place-items:center;width:24px;height:24px;background:#f26522;color:#fff;font:700 16px/1 var(--sans);font-style:normal}
@media(max-width:430px){
  .programas ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .programas li{height:46px;padding:0 6px}
  .programas li:nth-child(2) img{width:84px}
  .programas li:nth-child(3) img{width:96px}
  .programas .yc{font-size:12.5px;gap:4px}.programas .yc i{width:17px;height:17px;font-size:11.5px}
}

/* 25/09: botao fixo da entrada so depois de rolar (a classe vem do quiz-c.js) */
.cta-rola{transition:opacity .2s ease,transform .2s ease}
.cta-rola.cta-rola-oculto{opacity:0;transform:translateY(24px);pointer-events:none}
@media(prefers-reduced-motion:reduce){.cta-rola{transition:none}}

/* 25/09: comparacao sem/com vira tabela no celular (montada por pintaCmpM no quiz-c.js) */
.cmp-m{display:none}
@media(max-width:600px){
  .cmp{display:none}
  .cmp-m{display:block;margin:20px 0 0;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
  .cmp-m table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:14.5px}
  .cmp-m th,.cmp-m td{padding:12px 10px;text-align:left;vertical-align:top;line-height:1.35}
  .cmp-m thead th{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-dim);font-weight:500;padding-top:14px;padding-bottom:10px}
  .cmp-m thead th:first-child{width:31%}
  .cmp-m .com{background:var(--green-soft)}
  .cmp-m thead th.com{color:var(--green-txt);font-weight:700}
  .cmp-m tbody th{font-weight:500;font-size:13px;color:var(--fg-dim)}
  .cmp-m tbody tr{border-top:1px solid var(--line)}
  .cmp-m td{font-weight:600;font-variant-numeric:tabular-nums}
  .cmp-m td.com{color:var(--green-txt)}
  .cmp-m tbody tr:first-child td{font-size:17px;font-weight:800;letter-spacing:-.02em}
  .cmp-m small{display:block;margin-top:2px;font-size:11.5px;font-weight:400;color:var(--fg-dim)}
  .cmp-m-rod{margin:0;padding:12px 12px 14px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.5;color:var(--fg-dim);text-align:center}
}

/* 25/09: seletor de planos mais limpo; anel verde no foco (o padrao do sistema saia laranja). */
.planos-cert{gap:12px;margin:18px 0 10px}
.plano-cert{position:relative;padding:18px 18px;border-width:1.5px;border-color:var(--line-strong);background:var(--surface)}
.plano-cert[aria-pressed="true"]{border-width:2px;border-color:var(--green-txt);background:var(--green-soft)}
.plano-cert:focus{outline:none}
.plano-cert:focus-visible{outline:2px solid var(--green-txt);outline-offset:3px}
.plano-cert .plano-texto{gap:2px}
.plano-cert .plano-texto>b{font-size:18px;letter-spacing:-.015em}
.plano-cert .plano-texto small{font-size:13.5px}
.plano-cert>strong{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:24px;line-height:1.05}
.plano-cert>strong small{font-size:12.5px;font-weight:500;letter-spacing:0;color:var(--fg-dim)}
.plano-cert[aria-pressed="true"]>strong{color:var(--green-txt)}
.plano-selo{position:absolute;top:-10px;right:16px;padding:3px 9px;border-radius:999px;background:var(--green);color:var(--green-ink);font-size:9.5px;font-weight:700;letter-spacing:.06em;line-height:1.3}
.plano-resumo{text-align:center;font-size:13px;margin:0 0 6px}

/* 25/09: turbinadas antes dos setores no "com certificacao"; o rotulo so aparece se elas aparecem */
.cam-turbo[hidden] + .set-faixa-setores{display:none}
.set-faixa-setores{margin:26px 0 10px}
/* etiqueta "so com certificacao" saiu do amarelo de aviso, que brigava com o verde da marca */
.tcard-trava{background:var(--green-soft);color:var(--green-txt);border-color:color-mix(in srgb,var(--green-txt) 25%,transparent)}

/* 25/09: selos subiram pra logo abaixo do titulo, visiveis sem rolar */
.programas.programas-topo{margin:0 auto 18px}
@media(max-width:430px){.programas.programas-topo{margin-bottom:14px}}

/* 25/09 (dono): texto do botao cabe em uma linha. Nas telas estreitas a letra desce um pouco
   em vez de quebrar; os rotulos longos tambem foram encurtados no HTML. */
@media(max-width:380px){.btn,.acoes .btn,.hero-c-acoes .btn{font-size:14.5px;padding-left:12px;padding-right:12px;letter-spacing:-.02em}
  .acoes{gap:6px}.voltar{padding-left:4px;padding-right:4px}}
@media(max-width:340px){.btn,.acoes .btn,.hero-c-acoes .btn{font-size:13.5px;padding-left:8px;padding-right:8px}}
/* 25/09: sem a linha de categoria, o preco fica sozinho no pe do card, alinhado a direita */
.tcard-pe{justify-content:flex-end}
/* 25/09: parcela em destaque no plano; o numero cabe numa linha */
.plano-cert>strong{white-space:nowrap}
@media(max-width:380px){.plano-cert>strong{font-size:20px}}
/* cartao da previa quando mora no resultado */
[data-tela="resultado"] .gcard{margin:22px 0 8px;text-align:left}
.plano-cert .parc-linha{display:flex;align-items:baseline;gap:5px}
.plano-cert .parc-n{font-size:13px;font-weight:600;letter-spacing:0;color:var(--fg-dim)}
.plano-cert[aria-pressed="true"] .parc-n{color:var(--green-txt)}
@media(max-width:380px){.plano-cert .parc-n{font-size:12px}}
@media(max-width:480px){.plano-cert .parc-linha{flex-direction:column;align-items:flex-end;gap:0;line-height:1.05}}
@media(max-width:340px){.plano-cert{padding:16px 12px;gap:8px}.plano-cert .plano-texto>b{font-size:16px}.plano-cert>strong{font-size:18px}}

/* 25/09: preco de cada clipe na tela "Como fica" */
.clipes-faixa figcaption{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;min-width:0}
.clipe-preco{margin-left:auto;display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;
  padding:2px 8px;border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:.02em;
  border:1px solid var(--line);color:var(--fg-dim);background:var(--surface);white-space:nowrap}
.clipe-preco.com{background:var(--green-soft);color:var(--green-txt);border-color:color-mix(in srgb,var(--green-txt) 25%,transparent);font-weight:700}
.clipe-preco svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* 25/09: grafico do mercado mais legivel */
.g-svg.g2{display:block;width:100%;max-width:560px;margin:0 auto}
.g-svg.g2 .g-ano{font-size:12px}
.g-svg.g2 .g-val{font-size:13px;font-weight:600}
.g-svg.g2 .g-val-fim{font-size:16px}
.g-svg.g2 .g-proj{stroke-dasharray:6 5}
.g-svg.g2 .g-area-proj{opacity:.55}
.g-svg.g2 .g-proj-txt{font-family:var(--mono);font-size:11px;fill:var(--g-txt);font-style:italic;text-anchor:middle}
.comparacao{text-align:center}
/* aviso de simulacao no fim do resultado */
.res-importante-fim{margin:34px auto 0}

/* 25/09 (dono): legenda do grafico centralizada: traco + nome numa linha, valor embaixo */
.estimativa-legenda{justify-items:center;text-align:center}
.estimativa-legenda-linha{display:flex!important;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px 8px}
.estimativa-legenda-linha i{margin-top:0!important}
.estimativa-legenda-linha b{flex-basis:100%;text-align:center!important}
/* grafico do mercado: projecao no mesmo verde claro, so mais leve; tamanho contido no PC */
.g-svg.g2 .g-area-proj{opacity:1;fill:var(--green-soft)}
.g-svg.g2{max-width:460px}
.estimativa-legenda-linha i{align-self:center!important;grid-row:auto!important}
.estimativa-legenda-linha span{grid-row:auto!important}
#certc-horas{grid-template-columns:repeat(4,minmax(0,1fr))}
.clipe-preco.turbo{background:var(--green);color:var(--green-ink);border-color:var(--green);font-weight:700;font-family:var(--sans);font-size:12.5px;letter-spacing:-.01em;padding:3px 9px}
.clipe-preco.turbo svg{width:11px;height:11px;fill:currentColor;stroke:none}
.clipes-faixa figcaption{white-space:nowrap}
/* 25/09 (dono): bloco de valores do grafico de ganho centralizado */
.gcard .manchete{text-align:center;justify-items:center;align-items:center}
.gcard .manchete .gc-leitura,.gcard .manchete-num,.gcard .manchete-un,.gcard .manchete-outro{text-align:center;margin-left:auto;margin-right:auto}

/* 25/09: rodape juridico (entrada e resultado) */
.rodape-legal{margin:44px 0 0;padding:22px 0 8px;border-top:1px solid var(--line);text-align:center;font-size:12px;line-height:1.6;color:var(--fg-dim)}
.rodape-legal nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin-bottom:12px}
.rodape-legal nav a{color:var(--fg);font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong)}
.rodape-legal p{margin:0 auto 8px;max-width:62ch}
.rodape-legal .rl-id:empty{display:none}
.rodape-legal .rl-pendente{color:var(--perigo-txt);font-weight:600}
.rodape-legal .rl-copy{opacity:.8}
/* 25/09 (dono): rodape ocupa a largura toda da tela */
html,body{overflow-x:clip}
.rodape-legal{width:100vw;max-width:none;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  box-sizing:border-box;padding:26px 16px 18px;background:var(--bg-2);border-top:1px solid var(--line)}

/* 25/09 (dono): no celular o homem vai pra lateral direita e o texto fica a esquerda, por cima
   da parte apagada da foto. Botoes e valor em largura total embaixo. */
@media(max-width:559px){
  .hero-c{display:block;padding:24px 18px 20px;text-align:left}
  .hero-c-foto{position:absolute;top:34px;right:-128px;height:300px;width:345px;margin:0;z-index:0;
    -webkit-mask:linear-gradient(to right,transparent 0,rgba(0,0,0,.35) 22%,black 46%),linear-gradient(to bottom,black 78%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask:linear-gradient(to right,transparent 0,rgba(0,0,0,.35) 22%,black 46%),linear-gradient(to bottom,black 78%,transparent 100%);
    mask-composite:intersect}
  .hero-c-t{max-width:62%;font-size:clamp(30px,9vw,38px);text-align:left;margin:4px 0 0}
  .hero-c-sub{max-width:52%;font-size:15.5px;text-align:left;margin-top:12px}
  .hero-c-linha{margin-top:34px;max-width:none}
  .hero-c-acoes{max-width:none}
}
.x{}@media(max-width:360px){.hero-c-foto{height:270px;width:311px;right:-118px;top:40px}.hero-c-t{font-size:29px}}

/* 25/09 (dono): "Receba via" mais visivel, em verde com fundo proprio (fica em cima da foto no celular) */
.hero-c-via>span{display:inline-block;color:var(--green-txt);font-weight:700;background:var(--surface);
  padding:3px 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--green-txt) 22%,transparent)}
.hero-c-t .hero-c-verde{color:var(--green-txt)}
#certc-res-base:empty{display:block;margin:0;height:0}

/* 25/09: preco unico no lugar dos 3 planos */
.preco-unico{display:flex;flex-direction:column;align-items:center;gap:4px;margin:26px 0 14px;text-align:center}
.preco-unico b{font-size:clamp(44px,12vw,56px);line-height:1;font-weight:800;letter-spacing:-.04em;color:var(--green-txt)}
.preco-unico span{font-size:14px;color:var(--fg-dim)}
.of-aviso{text-align:center;font-size:12.5px}
.aprende-mais{margin:18px auto 0;max-width:46ch;text-align:center;font-size:15px;line-height:1.5;color:var(--fg);font-weight:500}