/* ObraSim — folha de estilo do hotsite.
   Paleta e tipografia herdadas do produto, de propósito: quem clica no botão cai
   numa tela que já parece a mesma casa. */

:root{
  --tinta:#0B1020; --tinta-2:#141A33; --tinta-suave:#5B6585; --tinta-fraca:#98A2BF;
  --papel:#F4F6FD; --papel-2:#E9EEFC; --branco:#FFFFFF; --linha:#DDE4F6;
  --roxo:#6C4DF6; --roxo-esc:#4B2DD4; --roxo-cl:#8B72F9;
  --azul:#0EA5E9; --azul-cl:#38BDF8;
  --verde:#00B894; --ambar:#FF9F1C; --vermelho:#FF4D6D; --lima:#A3E635;
  --sombra-s:0 1px 2px rgba(11,16,32,.05), 0 6px 16px -8px rgba(11,16,32,.14);
  --sombra:0 2px 8px rgba(11,16,32,.06), 0 22px 48px -22px rgba(11,16,32,.30);
  --sombra-g:0 40px 90px -40px rgba(76,45,212,.45);
  --fonte:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --disp:'Outfit',var(--fonte);
  --raio:16px; --raio-g:24px;
  --larg:1160px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--fonte);color:var(--tinta-2);background:var(--papel);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* `max-width:100%` sozinho encolhe a LARGURA e deixa a altura no valor do
   atributo: num celular de 375 px, a planta de 607x458 virava 293x458 — achatada.
   `height:auto` devolve a proporcao. Nos icones, que ja estao no tamanho natural,
   nao muda nada. */
img,svg{max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--disp);line-height:1.08;letter-spacing:-.025em;margin:0}
h1{font-weight:800;font-size:clamp(34px,5.6vw,62px)}
h2{font-weight:800;font-size:clamp(27px,3.7vw,43px)}
h3{font-weight:700;font-size:clamp(18px,2vw,22px);letter-spacing:-.015em}
/* O DESTAQUE COLORIDO DE TITULO, NUM LUGAR SO. Ele existia duas vezes, escrito igual e
   preso a um seletor cada (`.heroi h1 .g` e `.mini-cab h3 em`); uma terceira copia seria a
   terceira chance de uma delas ficar para tras no dia em que a paleta mudar. O `<em>` so
   aparece dentro de titulo nesta pagina, e o `.g` do heroi vem junto pelo mesmo bloco.
   O `font-style:normal` porque o que se quer e cor, e nao italico. */
h1 em,h2 em,h3 em,.heroi h1 .g{font-style:normal;
  background:linear-gradient(100deg,var(--roxo),var(--azul) 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
p{margin:0 0 16px}
.env{width:min(var(--larg),100% - 40px);margin-inline:auto}
/* A LARGURA DOS BLOCOS QUE ABREM, a pedido do dono, e é uma só para os três: a lista de
   recursos, os cartões da área externa e os temas da IA têm de ter a mesma coluna do FAQ.
   Uma linha que abre e fecha é para ser LIDA de ponta a ponta, e linha de 1160 px de largura
   faz o olho perder a volta; é o mesmo motivo de um jornal ter colunas. Mora aqui, com um
   nome, porque agora são quatro lugares — e quatro `760px` soltos divergem no primeiro dia
   em que alguém mudar um. */
:root{--larg-abre:760px}
.centro{text-align:center}

/* ---------- topo ---------- */
.topo{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);
  background:rgba(244,246,253,.82);border-bottom:1px solid transparent;
  transition:border-color .25s, box-shadow .25s}
.topo.colado{border-bottom-color:var(--linha);box-shadow:0 6px 24px -18px rgba(11,16,32,.5)}
.topo-in{display:flex;align-items:center;gap:22px;padding:12px 0}
.marca{display:flex;align-items:center;gap:10px;font-family:var(--disp);
  font-weight:800;font-size:19px;letter-spacing:-.02em;text-decoration:none}
.marca svg{flex-shrink:0}
.menu{display:flex;gap:22px;margin-left:auto;font-size:14.5px;font-weight:600;
  color:var(--tinta-suave)}
.menu a{text-decoration:none;transition:color .18s}
.menu a:hover{color:var(--roxo)}
/* O «ENTRAR» (Hotsite 1.19): botao secundario, contornado, da mesma altura do «Quero começar». Quem ja
   comprou procura a porta no canto de cima, e ela nao pode competir com a chamada de compra. */
.entrar{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;white-space:nowrap;
  font-family:var(--fonte);font-weight:700;font-size:14.5px;text-decoration:none;color:var(--roxo);
  padding:10px 18px;border-radius:13px;border:1.5px solid rgba(108,77,246,.42);
  background:rgba(255,255,255,.6);transition:border-color .18s, background .18s, color .18s}
.entrar:hover{border-color:var(--roxo);background:#fff;color:var(--roxo-esc)}
/* `.bt.bt-topo`, e nao `.bt-topo`: o `.bt` vem depois no arquivo, e com o mesmo peso ele venceria */
.bt.bt-topo{padding:11px 20px;font-size:14.5px;white-space:nowrap;flex-shrink:0}
/* NA FAIXA EM QUE O MENU AINDA APARECE MAS NAO CABE COM OS DOIS BOTOES, ele se aperta, em vez de quebrar
   «Designer de planta» em duas linhas e engordar o topo */
@media (max-width:1120px){
  .topo-in{gap:16px}
  .menu{gap:15px;font-size:14px}
}
/* ABAIXO DE 1000 O MENU SAI, e nao so abaixo de 960: com o «Entrar» os seis itens precisam de 540 px, e entre
   961 e 999 sobravam 525, com «Designer de planta» quebrando em duas linhas. Sem o menu, quem empurra os dois
   botoes para a direita e o «Entrar». */
@media (max-width:1000px){
  .menu{display:none}
  .entrar{margin-left:auto}
}

/* ---------- botões ---------- */
.bt{display:inline-flex;align-items:center;justify-content:center;text-align:center;
  gap:9px;
  font-family:var(--fonte);font-weight:700;font-size:16px;text-decoration:none;
  padding:14px 26px;border-radius:13px;border:0;cursor:pointer;
  background:linear-gradient(135deg,var(--roxo),var(--roxo-esc));color:#fff;
  box-shadow:0 10px 26px -12px rgba(76,45,212,.8);
  transition:transform .14s cubic-bezier(.2,.8,.3,1.2), box-shadow .2s, filter .2s}
.bt:hover{transform:translateY(-2px);box-shadow:0 18px 40px -16px rgba(76,45,212,.9);
  filter:saturate(1.1)}
.bt:active{transform:translateY(0)}
.bt.g{font-size:18px;padding:18px 38px;border-radius:15px}
/* O BOTAO NO MEIO DO TEXTO, ao fim de cada secao que fecha um argumento. Ele nao entra no
   FAQ nem nos depoimentos: ali o leitor ainda procura motivo para NAO comprar, e um botao
   interrompe a duvida em vez de responde-la. */
.cta-meio{text-align:center;margin-top:44px}
.sob-bt{font-size:13px;color:var(--tinta-fraca);margin-top:12px}
.sob-bt b{color:var(--tinta-suave)}

/* ---------- selo ---------- */
.selo{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);
  font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--roxo-esc);background:rgba(108,77,246,.1);
  border:1px solid rgba(108,77,246,.22);padding:6px 13px;border-radius:99px}
.selo.v{color:#04705C;background:rgba(0,184,148,.11);border-color:rgba(0,184,148,.28)}
.selo.r{color:#A81733;background:rgba(255,77,109,.1);border-color:rgba(255,77,109,.26)}

/* ---------- herói ---------- */
.heroi{position:relative;padding:64px 0 40px;overflow:hidden}
.heroi::before{content:'';position:absolute;inset:-40% -20% auto -20%;height:120%;
  background:
    radial-gradient(720px 420px at 18% 8%, rgba(108,77,246,.20), transparent 62%),
    radial-gradient(620px 380px at 88% 18%, rgba(14,165,233,.18), transparent 60%);
  pointer-events:none}
/* O HEROI TEM UMA COLUNA SO desde a v155.0, quando o painel da planta mudou para a secao
   do designer. Com duas, a coluna do texto ficaria com metade da largura e um vazio do
   lado; com uma, a frase precisa de um limite de leitura para nao virar uma faixa de
   oitenta caracteres. A grade fica declarada porque o `.heroi-grade` ainda posiciona o
   fundo, e voltar a duas colunas e trocar este `1fr`. */
.heroi-grade{display:grid;grid-template-columns:1fr;gap:52px;align-items:center;
  position:relative}
/* o limite de leitura vai no FILHO: no proprio `.heroi-grade`, que tambem e o `.env`,
   ele estreitaria o container inteiro, e como o `.env` se centraliza o heroi ganhava um
   recuo que nao batia com o resto da pagina */
.heroi-grade>div{max-width:54rem}
/* O SLOGAN ABRE O HEROI, acima do titulo. Ele e uma assinatura, e nao uma manchete: fica
   menor que o h1 e sem caixa alta, porque a capitalizacao da frase e escolhida: a
   maiuscula no segundo termo e o que a faz soar como assinatura, e nao como manchete.
   Ele nao disputa a primeira leitura com a frase que carrega o argumento. */
.slogan{font-size:14.5px;font-weight:700;letter-spacing:.02em;
  color:var(--roxo);margin-bottom:14px}
.heroi h1{margin:18px 0 18px}
.heroi .lead{font-size:clamp(16.5px,1.6vw,19px);color:var(--tinta-suave);max-width:33em}
.heroi-ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:26px}

.prova-linha{display:flex;gap:26px;flex-wrap:wrap;margin-top:34px;
  padding-top:22px;border-top:1px solid var(--linha)}
.prova-linha div{min-width:112px}
.prova-linha b{display:block;font-family:var(--disp);font-size:26px;font-weight:800;
  letter-spacing:-.02em;color:var(--tinta)}
.prova-linha span{font-size:12.5px;color:var(--tinta-fraca)}

/* ---------- painel de vidro ---------- */
.vidro{background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(255,255,255,.82));
  border:1px solid var(--linha);border-radius:var(--raio-g);padding:20px;
  box-shadow:var(--sombra-g)}
/* O `.vidro-cab` — tres pontos coloridos e o titulo, imitando a barra de uma janela de
   programa — saiu do heroi na v147.1. As regras dele saem junto: CSS de elemento que nao
   existe mais e o tipo de peso morto que ninguem remove depois, porque ninguem sabe se
   ainda serve a alguem. */
/* ---------- kpi ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.kpi{background:var(--papel);border:1px solid var(--linha);border-radius:12px;
  padding:10px 9px;min-width:0}
.kpi span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--tinta-fraca);margin-bottom:3px}
/* "R$ 1.110.906" tem de caber numa linha na celula de um quarto do cartao: fonte um
   ponto menor e sem quebra, senao o cifrao fica sozinho na linha de cima */
.kpi b{font-family:var(--mono);font-size:13.5px;font-weight:700;color:var(--tinta);
  font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.01em}
.kpi.neg b{color:var(--vermelho)}
.kpi.ok b{color:var(--verde)}

/* ---------- seções ---------- */
section{padding:84px 0}
.sec-cab{max-width:44rem;margin:0 auto 46px}
.sec-cab.esq{margin-left:0}
.sec-cab p{color:var(--tinta-suave);font-size:17px;margin-top:14px}
.olho{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--roxo);font-weight:700;margin-bottom:12px;
  display:block}

/* ---------- medos ---------- */
.escuro{background:
   radial-gradient(900px 500px at 12% 0%, rgba(108,77,246,.22), transparent 60%),
   radial-gradient(700px 420px at 92% 100%, rgba(255,77,109,.18), transparent 58%),
   var(--tinta);color:#E6EAF7}
.escuro h2{color:#fff}
.escuro .sec-cab p{color:#A9B3D0}
.escuro .olho{color:var(--azul-cl)}
/* tres cartoes numa linha no desktop (eram cinco ate a v107.4); no celular, um por linha */
/* O MINIMO CEDE QUANDO NAO CABE. Num telefone de 320 px sobram 280 depois do respiro do
   `.env`, e um `minmax(310px, 1fr)` planta uma coluna de 310: a pagina inteira passa a
   rolar de lado, e o culpado nao esta na secao onde se ve o defeito. O `min(..., 100%)`
   e o que faz o minimo ser um desejo, e nao uma exigencia. */
/* Hotsite 1.30: quatro medos, em duas colunas no computador (em tres, o quarto ficava sozinho embaixo) */
.medos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:16px}
.medo{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--raio);padding:22px 20px;position:relative;overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.3,1), border-color .3s, background .3s}
.medo:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.25);
  background:rgba(255,255,255,.075)}
.medo .n{font-family:var(--disp);font-size:44px;font-weight:800;line-height:1;
  color:rgba(255,255,255,.13);position:absolute;top:12px;right:16px}
/* O TITULO RESERVA O ESPACO DO NUMERO DO CANTO (Hotsite 1.32, pedido do dono). No telefone a primeira linha dos titulos
   longos passava por baixo do «01», do «02»: o numero e marca d'agua, em posicao absoluta, e o titulo nao sabia dele.
   O mais largo dos quatro tem 57 px, a 16 da borda; com a folga de 60 o titulo quebra antes dele em toda largura de 320
   a 1440 (medido de 8 em 8), e no computador os quatro continuam numa linha so. */
.medo h3{color:#fff;margin-bottom:9px;font-size:19px;padding-right:60px}
.medo p{color:#A9B3D0;font-size:14.5px;margin:0}
/* ---------- a sacada ----------
   A pergunta que vira o argumento, num painel so dela. O `.frase` que morava no rodape dos
   medos saiu junto: aquele quadro tinha 30 px de altura e lia como legenda.

   A ANIMACAO E DE FOCO, E NAO DE DESLIZE. Cada linha entra desfocada, larga e um pouco
   abaixo, e resolve: o `blur` some, o `letter-spacing` fecha de .12em para o negativo do
   titulo, a escala volta a 1. Deslizar e movimento; entrar em foco e uma coisa aparecendo
   — e e essa a diferenca entre dramatico e enfeite.

   Os tempos sao longos de proposito (1,15 s por linha, com 0,38 s entre elas): o painel
   tem uma frase so, e ela pode se dar ao luxo de demorar. */
/* O ESPACO DE CIMA E MARGEM, E NAO ENCHIMENTO. O observador dispara quando 12% da CAIXA
   entra na tela, e enchimento conta como caixa: os 56 px vazios que ficavam la dentro
   adiantavam o gatilho. Medido: com eles, a animacao comecava com 26% do texto na tela;
   com o vao virando margem — que fica FORA da caixa —, comeca com 51%. Somado a batida
   de espera abaixo, isso e a diferenca entre a frase resolver enquanto o leitor rola e
   ela resolver depois de ele parar. */
.sacada{margin-top:120px;padding:0 0 20px;position:relative}
/* O CORTE DE LADO MORA NA SECAO, e nao na sacada (Hotsite 1.35): antes da animacao as letras da frase vem largas (o
   `letter-spacing:.12em` e o `scale(1.045)` de baixo), e de 952 a ~1300 px elas passavam da borda da tela — achado pela
   varredura do cartao de preco. Na `.sacada` o `clip` cortava a propria primeira linha, a fracao visivel dela nunca
   chegava aos 0,98 do observador, e a frase ficava borrada para sempre. Na secao, que tem a largura da tela, ele so
   corta o que ja estava fora dela. `clip`, e nao `hidden`: nao cria caixa de rolagem. */
#medos{overflow-x:clip}
/* o `.sobe` do observador entrega o `.vis` aqui, mas quem anima sao as linhas: sem isto o
   painel inteiro subiria junto e as duas animacoes se embolariam */
.sacada.sobe{opacity:1;transform:none;transition:none}
/* o facho de luz que abre atras da frase */
.sacada::before{content:"";position:absolute;left:50%;top:50%;width:min(700px,88vw);
  height:330px;transform:translate(-50%,-50%) scaleX(.2);opacity:0;
  background:radial-gradient(closest-side,rgba(108,77,246,.5),transparent 72%);
  transition:transform 1.9s cubic-bezier(.16,1,.3,1) .3s, opacity 1.5s ease .3s;
  pointer-events:none}
.sacada.vis::before{transform:translate(-50%,-50%) scaleX(1);opacity:1}
.sacada-frase{position:relative;margin:0;text-align:center;font-family:var(--disp);
  font-weight:800;color:#fff;line-height:1.12;
  /* O TETO DE BAIXO E FISICO, e nao gosto. A maior palavra da frase, «aparecesse», nao
     quebra linha: passar da largura da coluna nao reparte a palavra, faz a TINTA vazar
     para fora da tela e a pagina inteira rolar de lado. Num telefone de 320 px a coluna
     tem 280 depois do respiro do `.env`, e a 34 px a palavra mede 239 px — medido, nao
     estimado. Dai para cima o `vw` manda.

     O TETO DE CIMA CAIU DE 99 PARA 72 PX (v1.4), a pedido do dono: a 99 a frase ocupava
     quase a altura util do desktop e lia como capa, e nao como a virada do argumento que
     ela e. O efeito de foco continua igual — quem faz a sacada e a animacao, e nao o
     tamanho. */
  font-size:clamp(34px,6.4vw,72px);letter-spacing:-.025em}
.sacada-frase .sl{display:block;opacity:0;
  transform:translateY(26px) scale(1.045);filter:blur(14px);letter-spacing:.12em;
  transition:opacity 1.15s cubic-bezier(.16,1,.3,1),
             transform 1.15s cubic-bezier(.16,1,.3,1),
             filter 1.15s cubic-bezier(.16,1,.3,1),
             letter-spacing 1.15s cubic-bezier(.16,1,.3,1)}
.sacada.vis .sl{opacity:1;transform:none;filter:blur(0);letter-spacing:-.025em}
/* A BATIDA DE ESPERA. Mesmo com o gatilho no lugar certo, comecar no instante em que a
   primeira letra encosta na borda da tela faz a frase resolver enquanto o leitor ainda
   rola. Os .45 s dao tempo de ele parar e olhar. */
.sacada.vis .s1{transition-delay:.45s}
.sacada.vis .s2{transition-delay:.85s}
.sacada.vis .s3{transition-delay:1.25s}
/* «desenha» e a palavra que carrega a promessa, e e a unica colorida */
.sacada-frase em{font-style:normal;
  background:linear-gradient(100deg,var(--roxo-cl),var(--azul-cl) 65%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- designer ---------- */
.duas{display:grid;grid-template-columns:1.04fr .96fr;gap:52px;align-items:center}
#heroi-planta svg,#fluxo-alvo svg{display:block;width:100%;
  height:auto;border-radius:14px;background:var(--papel)}
.legenda{font-family:var(--mono);font-size:11px;color:var(--tinta-fraca);
  text-align:center;margin-top:10px}

.lista-cheque{list-style:none;padding:0;margin:22px 0 0}
.lista-cheque li{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px;
  font-size:15.5px}
.lista-cheque svg{flex-shrink:0;margin-top:3px}
.lista-cheque b{color:var(--tinta)}

/* ---------- herói em movimento ---------- */
.heroi-cena{position:relative;border-radius:14px;overflow:hidden}
/* O VISOR DA PLANTA. Antes o desenho inteiro entrava reduzido a 80%, e isso so trocava o
   problema de lugar: uma tira de 1 para 2,3 continuava sendo uma tira, agora menor. Aqui o
   quadro mostra metade do lado comprido NO TAMANHO DE VERDADE, e o resto se alcanca
   arrastando.

   A ALTURA VEM DO `script.js`, que a le do proprio desenho. Escrever a proporcao aqui a
   congelaria nesta planta, e a proxima apareceria esticada ou sobrando. Enquanto o script
   nao mede, o `aspect-ratio` abaixo segura um quadro razoavel para nao haver salto. */
.planta-visor{position:relative;overflow:auto;border-radius:14px;aspect-ratio:1/1.15;
  cursor:grab;overscroll-behavior:auto;scrollbar-width:none}
/* `overscroll-behavior:auto`, e nao `contain`: no celular o dedo que rola a pagina
   comeca em cima da planta com frequencia, e `contain` prenderia o gesto dentro do
   visor. Com `auto`, a planta corre ate o fim e a pagina segue no mesmo movimento. */
.planta-visor::-webkit-scrollbar{display:none}
.planta-visor.arrastando{cursor:grabbing}
.planta-visor:focus-visible{outline:2px solid var(--roxo);outline-offset:2px}
.heroi-cena>#heroi-visor>#heroi-planta>svg,
.heroi-cena>#heroi-visor>#heroi-planta>.svg-plano-b{width:100%;display:block;
  border-radius:0}
/* A BORDA DE BAIXO DESBOTA, e e so isso que diz «tem mais coisa aqui». Uma barra de
   rolagem visivel resolveria, mas num heroi ela le como defeito de montagem; a sombra diz
   o mesmo sem parecer erro. Some quando o visor chega ao fim. */
.planta-visor::after{content:"";position:sticky;bottom:0;left:0;display:block;height:54px;
  margin-top:-54px;pointer-events:none;transition:opacity .3s;
  background:linear-gradient(transparent,rgba(11,16,32,.20))}
.planta-visor.no-fim::after{opacity:0}
/* uma faixa de luz varre a planta de tempos em tempos: e o "custo acompanhando" */
.varre{position:absolute;top:0;bottom:0;left:-30%;width:26%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(108,77,246,.16) 45%,rgba(14,165,233,.14) 55%,transparent);
  animation:varre 5.4s cubic-bezier(.4,0,.2,1) infinite}
@keyframes varre{0%{left:-30%}55%{left:110%}100%{left:110%}}
.dica{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:99px;background:rgba(11,16,32,.86);color:#fff;
  font-size:12.5px;font-weight:600;backdrop-filter:blur(6px);max-width:calc(100% - 24px);
  transition:opacity .4s, transform .4s;box-shadow:0 10px 24px -12px rgba(11,16,32,.7)}
.dica.some{opacity:0;transform:translateY(6px)}
.dica-ico{width:9px;height:9px;border-radius:50%;background:var(--lima);flex-shrink:0;
  box-shadow:0 0 0 0 rgba(163,230,53,.6);animation:pulsa 1.8s ease-out infinite}
@keyframes pulsa{0%{box-shadow:0 0 0 0 rgba(163,230,53,.6)}100%{box-shadow:0 0 0 9px rgba(163,230,53,0)}}

/* ---------- mini-designer ---------- */
.mini{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio-g);
  padding:34px 26px 26px;box-shadow:var(--sombra);margin-top:76px}
/* O CONVITE TEM PESO DE TITULO DE SECAO. Ele fica na escala do `h2` da pagina, e nao na
   do `h3`, porque e o unico lugar em que o visitante faz alguma coisa em vez de ler sobre
   ela. O elemento continua sendo `h3`: a demonstracao e parte da secao do designer, e
   promove-la de nivel daria dois titulos iguais na mesma secao. */
.mini-cab{text-align:center;max-width:40rem;margin:0 auto 26px}
.mini-cab h3{font-size:clamp(25px,3.4vw,38px);font-weight:800;letter-spacing:-.025em;
  line-height:1.08}
.mini-cab .selo{margin-bottom:14px}
.mini-sub{font-size:15.5px;color:var(--tinta-suave);margin:14px 0 0}
.mini-corpo{display:grid;grid-template-columns:1.5fr .9fr;gap:22px;align-items:start}
.mini-desenho{min-width:0}
/* A LINHA DO CUSTO NO ALTO DA PLANTA. Ela nao existe na tela larga: ali o painel de saida
   fica ao lado, e repetir o numero a dois palmos de distancia seria ruido. O `sticky` a
   segura enquanto a planta rola por baixo, e o `top` desce do topo fixo da pagina, que tem
   uns 62 px. */
.mini-topo{display:none}
@media (max-width:960px){
  .mini-topo{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    position:sticky;top:62px;z-index:5;margin-bottom:10px;padding:9px 14px;
    border-radius:12px;border:1px solid var(--linha);
    background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
    box-shadow:0 8px 22px -16px rgba(11,16,32,.5)}
  .mini-topo span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--tinta-fraca)}
  .mini-topo b{font-family:var(--disp);font-size:22px;font-weight:800;
    font-variant-numeric:tabular-nums;color:var(--tinta)}
}
#mini-svg{display:block;width:100%;height:auto;border:1px solid var(--linha);
  border-radius:12px;background:#F7F8FD;touch-action:none;cursor:grab;user-select:none;
  outline:none}
#mini-svg:focus-visible{box-shadow:0 0 0 3px rgba(108,77,246,.25)}
#mini-svg .mc-r{cursor:grab;transition:fill .15s}
#mini-svg .mc.sel .mc-r{filter:drop-shadow(0 4px 10px rgba(108,77,246,.35))}
#mini-svg .mc-n{font-family:var(--fonte);font-size:13px;font-weight:700;pointer-events:none}
#mini-svg .mc-a{font-family:var(--mono);font-size:11px;font-weight:600;pointer-events:none;opacity:.8}
#mini-svg .mc-alca{cursor:nwse-resize}
/* O `touch-action:none` FICA NO `<svg>`, e nao nos comodos. A v154.0 tentou passa-lo
   para `.mc`, para que o dedo no lote vazio rolasse a pagina e so o dedo no comodo o
   arrastasse. Nao funciona: `touch-action` so e honrado em elemento que gera caixa, e
   um `<g>` dentro de um SVG nao gera. A folha declarava `none` e o navegador ignorava,
   entao o gesto se dividia — no aparelho, o comodo andava meio metro e a pagina rolava
   80 px junto, que e a pior das duas coisas. O teste nao viu porque lia o estilo
   COMPUTADO, que dizia `none`, e nao o que o navegador fazia com ele.
   O preco disto e que o dedo sobre a planta nunca rola a pagina; ha o cartao inteiro
   em volta para isso, e arrastar parede e o que esta secao existe para deixar fazer. */
.mini-ferramentas{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:12px}
.mini-add{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
  color:var(--tinta-suave)}
.mini-add select{font:inherit;font-size:13.5px;padding:7px 8px;border-radius:9px;
  border:1.5px solid var(--linha);background:var(--papel);color:var(--tinta)}
.mini-add button,.mini-ferramentas > button{font:inherit;font-size:13.5px;font-weight:700;
  padding:7px 12px;border-radius:9px;border:1.5px solid var(--linha);background:var(--papel);
  color:var(--roxo-esc);cursor:pointer;transition:all .18s}
.mini-add button{width:34px;font-size:18px;line-height:1;padding:5px 0}
.mini-add button:hover,.mini-ferramentas > button:hover{border-color:var(--roxo);
  background:rgba(108,77,246,.06)}
.mini-ferramentas > button[disabled]{opacity:.45;cursor:default;background:var(--papel);border-color:var(--linha)}
.mini-ferramentas .seg{min-width:220px}
/* O trio B/N/A nao se explica sozinho: tres palavras soltas ao lado de um desenho nao dizem
   de que elas sao o padrao. O rotulo entra acima delas, e os dois andam juntos no bloco —
   senao o rotulo fica na esquerda da fileira e os botoes na direita da linha seguinte. */
.seg-bloco{margin-left:auto;text-align:right}
.seg-rot{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tinta-fraca);margin:0 2px 5px}
.mini-saida{padding:20px;border-radius:var(--raio);
  background:linear-gradient(135deg,rgba(108,77,246,.09),rgba(14,165,233,.07));
  border:1px solid rgba(108,77,246,.2)}
.mini-total-rot{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinta-fraca)}
.mini-total{font-family:var(--disp);font-size:clamp(28px,3.4vw,38px);font-weight:800;
  letter-spacing:-.03em;color:var(--tinta);line-height:1.05;margin:4px 0 14px;
  font-variant-numeric:tabular-nums}
.mini-linha{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;
  color:var(--tinta-suave);padding:6px 0;border-top:1px solid rgba(108,77,246,.14)}
.mini-linha b{font-family:var(--mono);color:var(--tinta);font-variant-numeric:tabular-nums}
.mini-comodos-rot{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinta-fraca);margin-top:16px}
.mini-comodos{list-style:none;padding:0;margin:6px 0 0;max-height:190px;overflow:auto}
.mini-comodos li{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;
  padding:4px 0;color:var(--tinta-2)}
.mini-comodos li i{font-style:normal;font-family:var(--mono);color:var(--tinta-fraca);font-size:11px}
.mini-comodos li b{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums}
.sim-nota{font-size:12px;color:var(--tinta-fraca);margin-top:14px;line-height:1.5}
.seg{display:flex;gap:6px}
.seg button{flex:1;font-family:var(--fonte);font-size:13.5px;font-weight:600;
  padding:9px 6px;border-radius:10px;border:1.5px solid var(--linha);
  background:var(--papel);color:var(--tinta-suave);cursor:pointer;transition:all .18s}
.seg button.on{background:rgba(108,77,246,.1);border-color:var(--roxo);
  color:var(--roxo-esc);font-weight:700}
/* ---------- sua obra, personalizada (Hotsite 1.16) ---------- */
/* DOIS PAINEIS DE UMA LINHA POR ITEM, e nada para abrir (pedido do dono: «deixar mais enxuto»). Os sete
   cartoes fechados de antes eram uma lista de titulos que so dizia alguma coisa depois do clique; aqui cada
   linha ja diz o que importa: o numero de opcoes do acabamento, ou os materiais do item de fora da casa. Lado
   a lado no computador, um embaixo do outro no telefone. */
.pers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px;
  max-width:980px;margin-inline:auto}
.pers-bloco{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio-g);padding:20px 24px}
.pers-bloco h3{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--roxo);margin-bottom:4px}
.pers-lista{list-style:none;padding:0;margin:0}
.pers-lista li{display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:center;padding:11px 0;
  border-top:1px solid var(--linha);font-size:14.5px;line-height:1.4;color:var(--tinta-suave)}
.pers-lista li:first-child{border-top:0}
.pers-lista li b{color:var(--tinta)}
.pers-qt{text-align:center;line-height:1}
.pers-lista .pers-qt b{display:block;font-family:var(--disp);font-size:28px;font-weight:800;letter-spacing:-.02em;
  background:linear-gradient(135deg,var(--roxo),var(--azul));-webkit-background-clip:text;background-clip:text;
  color:transparent}
.pers-qt small{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tinta-fraca);margin-top:3px}
.pers-ico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;justify-self:center;
  background:linear-gradient(135deg,rgba(14,165,233,.14),rgba(108,77,246,.10))}
/* o ultimo cartao, com o texto do dono: o resto do programa, numa faixa so, sem abrir */
.pers-resto{max-width:980px;margin:16px auto 0;display:grid;grid-template-columns:40px 1fr;gap:16px;
  align-items:start;padding:18px 24px;border:1px dashed #C9D3EE;border-radius:var(--raio-g);background:var(--papel)}
.pers-resto h3{font-size:17px;margin-bottom:6px}
.pers-resto p{margin:0;font-size:14.5px;color:var(--tinta-suave)}
.pers-resto p b{color:var(--tinta)}
/* ---------- o m² do CUB e o da sua obra (Hotsite 1.26) ---------- */
/* PEDIDO DO DONO: os gastos que o CUB nao cobre, que quase todo mundo deixa de fora, e o custo por m2 real da obra,
   com tudo incluido. Dois paineis lado a lado no computador e um embaixo do outro no telefone, como os da secao de
   cima: a lista do que fica fora do CUB e entra na conta, e o numero do m2 com tudo dentro, no escuro do cartao do
   fluxo de caixa, para o numero ser o que o olho encontra primeiro. */
.cub{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px;
  max-width:980px;margin-inline:auto;align-items:start}
.cub-bloco{background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio-g);padding:20px 24px}
.cub-bloco h3{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--roxo);margin-bottom:4px}
.cub-lista{list-style:none;padding:0;margin:0}
.cub-lista li{position:relative;padding:10px 0 10px 24px;border-top:1px solid var(--linha);font-size:14.5px;
  line-height:1.45;color:var(--tinta-suave)}
.cub-lista li:first-child{border-top:0}
.cub-lista li::before{content:"";position:absolute;left:3px;top:16px;width:9px;height:9px;border-radius:50%;
  background:linear-gradient(135deg,var(--roxo),var(--azul))}
.cub-lista li b{color:var(--tinta)}
.cub-nota{margin:12px 0 0;padding-top:12px;border-top:1px dashed #C9D3EE;font-size:13.5px;color:var(--tinta-suave)}
.cub-m2{border-radius:var(--raio-g);padding:26px 26px 24px;color:#fff;align-self:center;
  background:linear-gradient(160deg,#141A33,#1B2342 60%,#151C36)}
.cub-m2-rot{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--azul-cl)}
/* o CUB riscado no alto do cartao, antes da frase «Seu custo por m²» (Hotsite 1.29, pedido do dono), em letra menor */
.cub-m2-de{display:block;font-family:var(--disp);font-size:clamp(17px,4.4vw,21px);font-weight:700;
  color:rgba(255,255,255,.55);margin-bottom:10px}
.cub-m2-de s{text-decoration-thickness:2px}
.cub-m2-val{display:block;font-family:var(--disp);font-size:clamp(36px,9vw,46px);font-weight:800;
  letter-spacing:-.02em;line-height:1.1;margin-top:8px;color:#fff}
.cub-m2-sub{display:block;font-size:14px;color:rgba(255,255,255,.72);margin-top:2px}
.cub-m2 p{margin:16px 0 0;font-size:14.5px;line-height:1.55;color:#A9B3D0}
.cub-m2 p b{color:#fff}

/* ---------- recursos ---------- */
/* OS NOVE RECURSOS EM LISTA, e nao em grade. Uma grade de nove cartoes pede que o olho
   escolha por onde comecar; numa lista a ordem e uma so, e e a de cima para baixo, que e
   como uma pagina de venda se le.

   O ICONE VAI PARA A ESQUERDA POR GRADE, e nao por um `<div>` em volta do texto: o `.ico`
   ocupa a coluna 1 e as duas linhas, o `h3` e o `<p>` empilham na coluna 2. Assim os nove
   blocos continuam com as tres partes de sempre, e o decimo tambem vai precisar so delas. */
.lista-rec{list-style:none;padding:0;margin:0;display:grid;gap:10px;
  max-width:var(--larg-abre);margin-inline:auto}
/* CADA ITEM ABRE, como no FAQ. A v159.1 deixou so o titulo e a lista virou indice; a
   descricao nao estava escondida, estava fora. Agora ela volta ATRAS do titulo, no mesmo
   `<details>` que o FAQ usa mais abaixo — o leitor que so quer a lista ve nove linhas, e o
   que parou num item abre aquele. Mesmo gesto nos dois lugares. */
.rec{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);
  overflow:hidden;transition:box-shadow .28s, border-color .28s}
.rec:hover{box-shadow:var(--sombra);border-color:var(--roxo-cl)}
/* o clique mira no BLOCO, e nao na palavra: o icone entra no `summary` junto do titulo */
.rec summary{cursor:pointer;list-style:none;display:grid;
  grid-template-columns:44px 1fr auto;gap:0 16px;align-items:center;
  padding:14px 20px;transition:background .18s}
.rec summary::-webkit-details-marker{display:none}
.rec summary:hover{background:var(--papel)}
/* o `+` que gira e o mesmo do FAQ; a regra abaixo so acrescenta o seletor daqui */
.rec summary::after{content:'+';font-family:var(--mono);font-size:22px;
  color:var(--roxo);flex-shrink:0;transition:transform .25s}
.rec details[open] summary::after,
.rec[open] summary::after{transform:rotate(45deg)}
.rec .ico{width:44px;height:44px;border-radius:12px;display:grid;
  place-items:center;margin:0;
  background:linear-gradient(135deg,rgba(108,77,246,.14),rgba(14,165,233,.12))}
.rec h3{margin-bottom:0;font-size:17.5px}
.rec .corpo{padding:0 20px 18px 80px;font-size:14.5px;color:var(--tinta-suave)}
/* `margin:0` foi escrito quando todo recurso tinha UM paragrafo. A IA de duvidas tem
   quatro, e eles saiam grudados num bloco unico: o `p + p` da o respiro sem mexer no
   espacamento de quem so tem um. */
.rec .corpo p{margin:0}
.rec .corpo p + p{margin-top:11px}
.rec .corpo i{color:var(--tinta);font-style:italic}
/* as seis ferramentas (Hotsite 1.16): o nome em negrito e o que ela faz, uma por linha */
.rec-ferr{list-style:none;padding:0;margin:10px 0;display:grid;gap:7px}
.rec-ferr li{padding-left:14px;border-left:2px solid rgba(108,77,246,.25)}
.rec-ferr b{color:var(--tinta);display:block}
/* O SELO «NOVO», no titulo do recurso. Ele mora no HTML, e nao numa data no CSS: recurso
   deixa de ser novo quando alguem apaga a palavra, e nao quando um `content:` com o mes
   escrito a mao envelhece sem ninguem notar. */
.rec h3 .novo{display:inline-block;margin-left:8px;vertical-align:2px;
  font-family:var(--disp);font-size:10.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--branco);background:var(--roxo);
  border-radius:999px;padding:3px 8px}
/* o BONUS fica FORA da soma das sete partes, e o tracejado diz isso sem precisar de
   legenda: ele nao fecha a conta de cima, ele entra por fora dela */
.tab-valor tr.bonus td{background:rgba(0,184,148,.07);border-bottom:none;
  border-top:1.5px dashed rgba(0,184,148,.45)}
.tab-valor tr.bonus td:first-child{border-radius:12px 0 0 12px}
.tab-valor tr.bonus td:last-child{border-radius:0 12px 12px 0;color:var(--verde);
  font-weight:700}

/* o primeiro item continua marcado, agora por cor e nao por tamanho: numa lista, «ocupar
   duas colunas» nao quer dizer nada */
.rec.destaque{background:
  linear-gradient(135deg,rgba(108,77,246,.07),rgba(14,165,233,.05)),var(--branco);
  border-color:rgba(108,77,246,.28)}

/* ---------- o especialista ----------
   A secao e ESCURA, e o que muda aqui e so o que ela tem de proprio: a conversa, os quatro
   temas e o bloco da prova. Cor, titulo e olho ja vem do `.escuro`. */
/* A FRASE DE EFEITO, e nao um paragrafo de abertura. Ela carrega a secao inteira ate a
   conversa comecar, entao vem em fonte de titulo e clara — no `.escuro`, o paragrafo comum
   e cinza-azulado (#A9B3D0) e a frase ficaria com peso de legenda.

   O SELETOR E ESPECIFICO DE PROPOSITO (`.escuro .sec-cab p.esp-frase`): `.escuro .sec-cab p`
   tem a mesma especificidade que `.sec-cab p.esp-frase`, e ai quem vence e a ordem no
   arquivo — mover este bloco para cima quebraria a cor sem erro nenhum aparecer. */
.escuro .sec-cab p.esp-frase{max-width:740px;margin:18px auto 0;font-family:var(--disp);
  /* 300, E A FOLHA DE FONTES TEM DE TRAZER O 300. A Outfit vinha so em 700 e 800: um
     `font-weight:400` aqui escolhia o 700 (o mais proximo que existe) e o traco continuava
     grosso — navegador engorda peso que falta, e nunca afina. Trocar o numero sem trocar o
     `<link>` no `index.html` nao muda um pixel, e e o tipo de ajuste que se da por feito. */
  font-size:clamp(18px,2.2vw,23px);line-height:1.42;font-weight:300;letter-spacing:-.012em;
  color:#EAEEFB}

.conversa{max-width:660px;margin:0 auto;display:grid;gap:14px}
/* O BALAO E O `.bolha`; o `.fala` virou a LINHA que junta o avatar a ele. Sem essa
   separacao o avatar entraria DENTRO do retangulo colorido, que e o contrario do que uma
   conversa parece. `align-items:flex-end` encosta o avatar na base do balao, como em todo
   aplicativo de mensagem: alinhado ao topo ele flutua longe do texto quando a resposta e
   comprida — e a do especialista tem dois paragrafos. */
.fala{display:flex;gap:10px;align-items:flex-end}
.fala .quem{flex-shrink:0;width:36px;height:36px;border-radius:50%;display:grid;
  place-items:center;margin-bottom:2px}
.fala .quem.pessoa{background:rgba(255,255,255,.12);color:#D7DEF4;
  border:1px solid rgba(255,255,255,.16)}
/* a casinha ja se pinta sozinha no SVG: aqui ela so ganha o cantinho arredondado e uma
   sombra que a descola do fundo escuro, para ficar do mesmo peso visual que o outro avatar */
.fala .quem.marca-icone{box-shadow:0 6px 18px -8px rgba(108,77,246,.9)}
.fala .quem.marca-icone svg{border-radius:11px;display:block}
.bolha{border-radius:16px;padding:16px 18px;font-size:15.5px;line-height:1.62;min-width:0}
/* SO O `b` DO ROTULO, e nao todo negrito da fala. Sem o `> :first-child`, esta regra pegava
   tambem os negritos DENTRO dos paragrafos: «mês a mês» e «saldo zero a pagar» viravam
   rotulos em caixa alta, em bloco, partindo a resposta ao meio. Nao aparece lendo o HTML,
   que esta certo — e a mesma familia do `<b>` que virava coluna no `.inclui li`. */
.bolha > b:first-child{display:block;font-family:var(--disp);font-size:11.5px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px;opacity:.72}
.bolha p{margin:0}
.bolha p + p{margin-top:10px}
/* a pergunta e do usuario: encostada a direita, mais estreita, como numa conversa */
.fala.eu{justify-self:end;max-width:92%}
.fala.eu .bolha{background:rgba(255,255,255,.10);color:#EAEEFB;
  border:1px solid rgba(255,255,255,.14);border-bottom-right-radius:5px}
.fala.ele{justify-self:start;max-width:97%}
.fala.ele .bolha{background:var(--branco);color:var(--tinta);
  border-bottom-left-radius:5px;box-shadow:0 18px 40px -22px rgba(0,0,0,.55)}
.fala.ele .bolha > b:first-child{color:var(--roxo);opacity:1}
/* a data-base e prova, e nao rodape: ela fica visivel, em mono, como no resto do programa */
.bolha .db{margin-top:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;
  color:var(--tinta-fraca)}

/* OS TEMAS ABREM, como a lista de recursos e o FAQ — e na MESMA largura deles. Quatro
   cartões lado a lado numa faixa de 1160 px viram quatro colunas estreitas de texto, e o
   olho não sabe por onde começar; em coluna única, fechados, eles são a lista do que dá
   para perguntar. */
.esp-temas{margin-top:54px;display:grid;gap:10px;max-width:var(--larg-abre);margin-inline:auto}
.esp-tema{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--raio);overflow:hidden;transition:border-color .22s,background .22s}
.esp-tema:hover{border-color:rgba(255,255,255,.26);background:rgba(255,255,255,.08)}
.esp-tema summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:center;gap:16px;padding:16px 20px}
.esp-tema summary::-webkit-details-marker{display:none}
.esp-tema summary::after{content:'+';font-family:var(--mono);font-size:22px;
  color:var(--azul-cl);flex-shrink:0;transition:transform .25s}
.esp-tema details[open] summary::after{transform:rotate(45deg)}
.esp-tema h3{color:#fff;font-size:16.5px;margin-bottom:0}
.esp-tema-corpo{padding:0 20px 18px}
.esp-tema p{margin:0;font-size:14.5px;color:#A9B3D0}
/* as duvidas de cada tema, em forma de pergunta (Hotsite 1.16, pedido do dono) */
.esp-perguntas{list-style:none;padding:0;margin:0;display:grid;gap:7px}
.esp-perguntas li{position:relative;padding-left:22px;font-size:14.5px;color:#A9B3D0}
.esp-perguntas li::before{content:'?';position:absolute;left:0;top:0;font-family:var(--mono);font-weight:700;color:var(--azul-cl)}

.esp-prova{max-width:760px;margin:54px auto 0;padding:26px 28px;border-radius:var(--raio-g);
  background:rgba(108,77,246,.14);border:1px solid rgba(139,114,249,.36)}
.esp-prova h3{color:#fff;margin-bottom:12px}
.esp-prova p{color:#C3CBE4;font-size:15px;margin:0}
.esp-prova ul{margin:14px 0 0;padding-left:20px;color:#C3CBE4;font-size:15px;line-height:1.66}
.esp-prova li + li{margin-top:9px}
.esp-prova b{color:#fff}
.esp-prova .esp-limite{margin-top:16px;padding-top:14px;font-size:14.5px;
  border-top:1px solid rgba(255,255,255,.14)}

/* ---------- gráfico do fluxo ---------- */
.fluxo-caixa{background:var(--branco);border:1px solid var(--linha);
  border-radius:var(--raio-g);padding:24px;box-shadow:var(--sombra)}
.fluxo-caixa h3{margin-bottom:4px}
.fluxo-caixa .sub{font-size:14px;color:var(--tinta-suave);margin-bottom:18px}

/* ---------- o cartao do grafico do fluxo, no escuro ----------
   O TEMA DO DESENHO MORA NO ARQUIVO, e nao aqui: o `hotsite/img/fluxo.svg` e um derivado
   gerado por `ferramentas/fluxo_para_hotsite.py`, como o `planta.svg` ja era. A primeira
   versao fazia isto por folha, aproveitando que atributo de apresentacao perde para regra de
   CSS — e so funcionava com o SVG INJETADO, o que exige servidor. Aberto o `index.html` do
   disco, o `fetch` do `porSvg` falha, o plano B poe um `<img>`, e regra externa nao entra
   dentro de um `<img>`: o grafico voltava claro justamente para quem abre o arquivo para
   conferir.

   O que fica aqui e o CARTAO em volta — fundo, titulo e o aviso vermelho. */
.fluxo-caixa.escuro{background:linear-gradient(160deg,#141A33,#1B2342 60%,#151C36);
  border-color:rgba(108,77,246,.35);
  box-shadow:0 18px 46px -22px rgba(20,26,51,.75)}
.fluxo-caixa.escuro h3{color:#fff}
.fluxo-caixa.escuro .sub{color:rgba(255,255,255,.62)}
/* o SVG herda `background:var(--papel)` da regra que divide com as caixas de planta, e um
   painel claro por baixo de um desenho escuro deixaria uma moldura clara em volta */
.fluxo-caixa.escuro #fluxo-alvo svg,
.fluxo-caixa.escuro #fluxo-alvo .svg-plano-b{background:transparent;border-radius:14px}
.fluxo-caixa.escuro .aviso-vermelho{background:rgba(255,77,109,.14);
  border-color:rgba(255,77,109,.42);color:#FFD9E1}
.fluxo-caixa.escuro .aviso-vermelho b{color:#fff}
.aviso-vermelho{margin-top:18px;padding:14px 16px;border-radius:12px;
  background:rgba(255,77,109,.07);border:1px solid rgba(255,77,109,.24);
  font-size:14.5px;color:#8E1230}
.aviso-vermelho b{color:#6E0C24}

/* Hotsite 1.11 — o antes e o depois do grafico do fluxo. Os botoes nascem escondidos (`hidden`) e o
   `script.js` os mostra so quando o SVG esta na pagina; o `display` daqui venceria o `hidden`,
   por isso a regra dele. O aviso do estado que esta na tela fica aceso e o outro esmaece — a
   65%, que ainda deixa o texto acima de 4,5:1 sobre o cartao. */
.fx-estados{display:inline-flex;gap:4px;margin:0 0 14px;padding:4px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.fx-estados[hidden]{display:none}
.fx-estados button{font:inherit;font-size:13.5px;font-weight:600;line-height:1.2;
  color:rgba(255,255,255,.72);background:transparent;border:0;border-radius:999px;
  padding:8px 14px;cursor:pointer;transition:background .25s,color .25s}
.fx-estados button[aria-pressed="true"]{background:#fff;color:#141A33}
.fx-estados button[data-fluxo="depois"][aria-pressed="true"]{background:#34D399;color:#062A1D}
.fx-estados button:focus-visible{outline:2px solid #38BDF8;outline-offset:2px}
.aviso-verde{margin-top:10px;padding:14px 16px;border-radius:12px;font-size:14.5px;
  background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.4);color:#D3F8EA}
.aviso-verde b{color:#fff}
.fluxo-caixa[data-estado] .aviso-vermelho,.fluxo-caixa[data-estado] .aviso-verde{transition:opacity .5s}
.fluxo-caixa[data-estado="depois"] .aviso-vermelho,
.fluxo-caixa[data-estado="antes"] .aviso-verde{opacity:.65}

/* ---------- prazo e caixa (Hotsite 1.8) ----------
   Logo depois do aviso vermelho, e com a cor da saida: o aviso mostra o buraco, este cartao
   mostra o que o painel faz com ele. Verde de margem, e nao roxo de destaque, para nao
   competir com o botao de compra. */
.prazo-caixa{margin-top:28px;padding:22px 24px;border-radius:var(--raio-g);
  background:linear-gradient(160deg,rgba(0,184,148,.08),rgba(0,184,148,.03));
  border:1px solid rgba(0,184,148,.32)}
.prazo-caixa h3{margin-bottom:10px;color:#0B5E4C}
.prazo-caixa p{color:var(--tinta-2);font-size:15.5px}
.prazo-caixa p+p{margin-top:10px}


/* ---------- depoimentos ---------- */
.deps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:18px}
.dep{background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio);
  padding:24px 22px;position:relative}
.dep .marca-ex{position:absolute;top:10px;right:12px;font-family:var(--mono);
  font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--ambar);
  border:1px dashed var(--ambar);border-radius:6px;padding:2px 6px}
.dep p{font-size:15px;margin-bottom:16px}
.dep .quem{display:flex;align-items:center;gap:11px}
/* O AVATAR VIROU FOTO. Ele cresceu de 38 para 46 px porque rosto em 38 px é uma mancha:
   a foto só vale a pena se der para ver quem é. O `object-fit:cover` é cinto de segurança
   — o recorte quadrado já vem pronto de `ferramentas/retratos_para_hotsite.py`, e sem ele
   um original fora do quadrado entraria espremido. */
.dep img.av{width:46px;height:46px;border-radius:50%;flex-shrink:0;object-fit:cover;
  background:var(--papel-2);border:1px solid var(--linha)}
.dep .av{width:38px;height:38px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--roxo-cl),var(--azul));color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:15px;
  font-family:var(--disp)}
.dep .quem b{display:block;font-size:14px}
.dep .quem span{font-size:12.5px;color:var(--tinta-fraca)}
.estrelas{color:var(--ambar);font-size:14px;letter-spacing:2px;margin-bottom:10px}

/* ---------- preço ---------- */
.tab-comp{width:100%;border-collapse:collapse;margin:0 auto;max-width:640px;
  font-size:15.5px}
.tab-comp td{padding:14px 10px;border-bottom:1px solid var(--linha)}
.tab-comp td:last-child{text-align:right;font-family:var(--mono);font-weight:600;
  white-space:nowrap}
.tab-comp tr.nos td{background:rgba(108,77,246,.07);font-weight:700;
  border-bottom-color:transparent}
.tab-comp tr.nos td:first-child{border-radius:12px 0 0 12px}
.tab-comp tr.nos td:last-child{border-radius:0 12px 12px 0;color:var(--roxo-esc)}

/* A PONTE entre o preco cheio e a oferta. Ela existe para o desconto nao aparecer antes
   de o valor ter sido construido: quem le «R$ 297» cedo demais nao volta atras para
   descobrir de onde saiu o R$ 1.997. A seta aponta para o painel de baixo. */
.ponte{max-width:560px;margin:46px auto 0;text-align:center;position:relative}
.ponte-olho{display:inline-block;font-family:var(--disp);font-size:12.5px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--roxo-esc);
  background:rgba(108,77,246,.1);border-radius:999px;padding:6px 16px;margin-bottom:12px}
.ponte p{font-size:17px;line-height:1.6;color:var(--tinta);margin:0}
.ponte-seta{display:block;width:14px;height:14px;margin:18px auto -6px;
  border-right:2.5px solid var(--roxo);border-bottom:2.5px solid var(--roxo);
  transform:rotate(45deg);opacity:.75}
@media (prefers-reduced-motion:no-preference){
  .ponte-seta{animation:desce 1.8s ease-in-out infinite}
  @keyframes desce{0%,100%{transform:rotate(45deg) translate(0,0)}
    50%{transform:rotate(45deg) translate(3px,3px)}}}

/* O RECORTE QUADRADO da segunda planta. A caixa manda no formato e o desenho preenche:
   no SVG injetado quem corta e o `preserveAspectRatio="xMidYMid slice"`, e no `<img>` do
   plano B e o `object-fit:cover`. Os dois recortam pelo CENTRO, que e o miolo da casa. */
.svg-plano-b{width:100%;display:block}

.oferta{max-width:520px;margin:44px auto 0;background:var(--branco);
  border:2px solid var(--roxo);border-radius:var(--raio-g);padding:36px 32px;
  text-align:center;box-shadow:var(--sombra-g);position:relative;overflow:hidden}
.oferta::before{content:'';position:absolute;inset:0 0 auto 0;height:5px;
  background:linear-gradient(90deg,var(--roxo),var(--azul),var(--lima))}
/* A FITA DIAGONAL COMPORTA UMA PALAVRA, e nao uma frase: a corda que ela cruza no canto
   arredondado da uns dez caracteres. «tempo limitado» tem catorze e ficou cortado em
   «o limitado» — pior que nao ter fita. Alargar a faixa nao resolve: quanto mais comprida,
   mais das pontas cai fora do `overflow:hidden` do cartao. Entao a fita diz «promocao», e
   o «por tempo limitado» fica na ponte e no rotulo do preco, onde ha linha inteira. */
.fita{position:absolute;top:16px;right:-38px;transform:rotate(38deg);
  background:var(--roxo);color:#fff;font-size:11px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;padding:5px 44px}
/* O CONTADOR. Ele so aparece quando o `/api/oferta` diz que ha janela aberta, e o numero
   que ele mostra e o tempo ate o preco mudar de verdade no checkout. */
/* AS MARGENS DE LADO (Hotsite 1.35): a fita do canto cruza a primeira linha do contador nos telefones estreitos — de 320 a
   336 px, medido —: o texto centrado ganha o mesmo respiro dos dois lados, e nos telefones desce um pouco, para baixo
   dela. */
.relogio{display:block;margin:0 auto 12px;padding:0 40px;font-family:var(--mono);font-size:13px;
  color:var(--tinta-suave);line-height:1.5}
@media(max-width:440px){.relogio{margin-top:22px}}
.relogio b{display:inline-block;font-family:var(--disp);font-size:26px;font-weight:800;
  color:var(--roxo-esc);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.relogio span{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tinta-fraca)}
.tabela-preco{display:inline-flex;align-items:center;gap:10px;padding:7px 16px;
  border-radius:999px;background:var(--papel-2);color:var(--tinta-suave);
  font-size:14px;font-weight:600;margin-bottom:14px}
.tabela-preco b{font-family:var(--disp);font-size:24px;font-weight:800;color:var(--tinta);
  text-decoration:line-through;text-decoration-thickness:2.5px;
  text-decoration-color:var(--roxo)}
.por-rot{font-size:12.5px;text-transform:uppercase;letter-spacing:.13em;
  color:var(--roxo-esc);font-weight:700;margin-bottom:6px}
.por-dia{font-size:13.5px;color:var(--tinta-fraca);margin-top:10px}
.por-dia b{color:var(--tinta-suave);font-weight:600}
.porque{font-size:14px;color:var(--tinta-suave);line-height:1.55;text-align:left;
  background:var(--papel-2);border-radius:12px;padding:14px 16px;margin:22px 0 0}
.porque b{color:var(--tinta)}
.erro-custa{font-size:15px;color:var(--tinta);margin:0 0 16px;line-height:1.45}
.erro-custa b{color:var(--roxo-esc)}
.tab-comp s{color:var(--tinta-fraca);font-weight:400;margin-right:6px}

/* A TABELA DO VALOR CHEIO tem duas linhas por item — o nome e o que ele faz —, e por isso
   o `white-space:nowrap` da coluna do preço vale mais aqui do que na tabela de comparação:
   sem ele «R$ 447» quebra ao lado de um texto de três linhas. */
.tab-valor td{vertical-align:top;padding:16px 10px}
.tab-valor td b{display:block;font-size:15.5px;margin-bottom:3px}
.tab-valor td span{display:block;font-size:13px;line-height:1.5;color:var(--tinta-fraca)}
.tab-valor td:last-child{font-size:16px;padding-top:17px}
.tab-valor tr.nos td{font-size:16.5px;padding:16px 10px}
.tab-valor tr.nos td:last-child{font-size:20px;font-family:var(--disp);font-weight:800}
.por{font-family:var(--disp);font-size:clamp(46px,7vw,68px);font-weight:800;
  letter-spacing:-.04em;line-height:1;color:var(--tinta)}
.por small{font-size:.42em;font-weight:700;color:var(--tinta-suave);
  letter-spacing:0;margin-right:4px}
/* O QUE SO VALE NUM DOS DIAS (Hotsite 1.35): o `script.js` alterna o `hidden` do que tem `data-dia`. Sem esta regra o
   `hidden` nao esconde nada aqui: o `display` das classes (`inline-flex` da tabela de preco, `block` do relogio) vence a
   regra do navegador para `[hidden]` — medido no Chrome. */
[data-dia][hidden],.oferta [hidden]{display:none!important}
/* A FORMA DO PRECO GRANDE: a lei pede o preco a vista discriminado (Decreto 5.903/2006, art. 3), e o «a vista» aqui vale
   para o Pix e para o cartao (o texto do dono, 4/out/2026: «à vista, no Pix ou no cartão»). */
.por-forma{font-size:14px;font-weight:700;color:var(--tinta-suave);margin-top:8px}
/* O PARCELADO, numa linha so com o texto do dono («ou parcelado em até 12x»), nunca abaixo de 12 px (Decreto 5.903, art. 9,
   I). O numero de parcelas, o valor de cada uma e os juros se escolhem na pagina /pagar do servidor; a gaveta das parcelas,
   o link do parcelado e a linha do preco de tabela embaixo do botao sairam do cartao com a decisao dele. */
.parcela{font-size:15px;color:var(--tinta-suave);margin:14px 0 0;line-height:1.55}
.inclui{list-style:none;padding:0;margin:26px 0;text-align:left}
.inclui li{display:flex;gap:10px;align-items:flex-start;font-size:15px;
  margin-bottom:11px}
.inclui svg{flex-shrink:0;margin-top:3px}

.garantia{max-width:560px;margin:44px auto 0;display:flex;gap:18px;align-items:center;
  padding:22px 24px;border-radius:var(--raio-g);background:rgba(0,184,148,.06);
  border:1px solid rgba(0,184,148,.24)}
.garantia p{margin:0;font-size:14.5px;color:var(--tinta-suave)}
.garantia b{color:#04705C}

/* ---------- faq ---------- */
.faq{max-width:var(--larg-abre);margin:0 auto}
.faq details{background:var(--branco);border:1px solid var(--linha);
  border-radius:14px;margin-bottom:10px;overflow:hidden}
.faq summary{cursor:pointer;padding:18px 22px;font-weight:700;font-size:16px;
  list-style:none;display:flex;justify-content:space-between;gap:16px;
  align-items:center;transition:background .18s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--papel)}
.faq summary::after{content:'+';font-family:var(--mono);font-size:22px;
  color:var(--roxo);flex-shrink:0;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .corpo{padding:0 22px 20px;font-size:15px;color:var(--tinta-suave)}
.faq .corpo p:last-child{margin-bottom:0}

/* ---------- rodapé ---------- */
/* ---------- paginas legais ----------
   Texto longo para ler, e nao para varrer: coluna estreita, entrelinha folgada e titulo
   que separa de verdade. Elas reusam a folha inteira do hotsite para nao virarem um site
   paralelo que envelhece sozinho. */
.legal{padding:120px 0 72px}
.legal .env{max-width:760px}
.legal h1{font-family:var(--disp);font-size:clamp(30px,4vw,42px);line-height:1.14;
  margin:0 0 6px}
.legal-data{font-family:var(--mono);font-size:12px;color:var(--tinta-fraca);
  margin:0 0 30px}
.legal h2{font-family:var(--disp);font-size:20px;margin:34px 0 10px}
.legal p,.legal li{font-size:16px;line-height:1.72;color:var(--tinta-suave)}
.legal p{margin:0 0 14px}
.legal ul{margin:0 0 14px;padding-left:22px}
.legal li{margin-bottom:8px}
.legal b{color:var(--tinta)}
.legal code{font-family:var(--mono);font-size:14px;background:var(--papel-2);
  padding:2px 6px;border-radius:6px;color:var(--tinta)}
.legal-aviso{background:rgba(255,159,28,.1);border:1px solid rgba(255,159,28,.4);
  border-radius:12px;padding:14px 16px;margin-bottom:28px !important;font-size:15px}
.legal-volta{margin-top:40px !important}
.legal-volta a{color:var(--roxo-esc);font-weight:700}

/* ---------- paginas de assunto ----------
   Elas reusam a folha do hotsite pelo mesmo motivo das paginas legais: um segundo conjunto
   de estilos viraria um site paralelo que envelhece sozinho. O que entra aqui e so o que
   elas tem e as legais nao: a migalha, a lista com marca propria, a chamada do fim e o
   bloco das irmas. */
.migalha{font-family:var(--mono);font-size:12px;color:var(--tinta-fraca);margin-bottom:18px}
.migalha a{color:var(--roxo-esc);font-weight:600;text-decoration:none}
.migalha a:hover{text-decoration:underline}
.legal-sub{font-size:18px !important;color:var(--tinta-suave);
  border-left:3px solid var(--roxo-cl);padding-left:16px;margin:0 0 30px !important}
/* o marcador vira um traço roxo: a lista aqui e argumento, e nao inventario */
.legal-lista{list-style:none;padding-left:0 !important}
.legal-lista li{position:relative;padding-left:22px}
.legal-lista li::before{content:"";position:absolute;left:0;top:.72em;width:11px;height:2px;
  border-radius:2px;background:var(--roxo-cl)}
ol.legal-lista{counter-reset:pa}
ol.legal-lista li::before{content:counter(pa);counter-increment:pa;
  background:none;width:auto;height:auto;top:0;font-family:var(--mono);font-size:12px;
  font-weight:700;color:var(--roxo)}
.legal-cta{margin-top:44px;padding:26px 24px;border-radius:var(--raio);
  background:linear-gradient(135deg,rgba(108,77,246,.07),rgba(14,165,233,.05)),var(--branco);
  border:1px solid rgba(108,77,246,.28);text-align:center}
.legal-cta p{margin-bottom:18px}
/* AS IRMAS NO PE DA PAGINA. Sao o que faz quatro textos soltos virarem um conjunto: quem
   chegou por uma consulta acha os outros tres, e o buscador ve que eles se citam. */
.irmas{margin-top:52px;border-top:1px solid var(--linha);padding-top:26px}
.irmas h2{margin-top:0 !important}
.irmas ul{list-style:none;padding:0;display:grid;gap:10px}
.irmas a{display:block;padding:15px 18px;border-radius:12px;border:1px solid var(--linha);
  background:var(--branco);text-decoration:none;transition:border-color .2s, box-shadow .2s}
.irmas a:hover{border-color:var(--roxo-cl);box-shadow:var(--sombra)}
.irmas b{display:block;font-size:16px;color:var(--tinta);margin-bottom:3px}
.irmas span{font-size:14px;color:var(--tinta-fraca)}
.legal-fim{font-size:14px !important;text-align:center;margin-bottom:6px !important}
.legal-fim a{color:var(--roxo-esc);font-weight:600;text-decoration:none}

.rodape{background:var(--tinta);color:#8E99BC;padding:54px 0 30px;font-size:13.5px}
.rodape .marca{color:#fff;margin-bottom:16px}
.rodape a{color:#B9C3E0;text-decoration:none}
.rodape a:hover{color:#fff}
.rodape-grade{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:36px;
  padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.09)}
.rodape h4{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:#fff;
  margin:0 0 12px}
.rodape ul{list-style:none;padding:0;margin:0}
.rodape li{margin-bottom:8px}
.rodape .fim{padding-top:22px;font-size:12.5px;color:#6E7899}

/* ---------- animação de entrada ---------- */
.sobe{opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1)}
.sobe.vis{opacity:1;transform:none}
.sobe.d1{transition-delay:.08s} .sobe.d2{transition-delay:.16s}
.sobe.d3{transition-delay:.24s} .sobe.d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sobe{opacity:1;transform:none;transition:none}
  /* a sacada inteira aparece de uma vez: quem pediu menos movimento nao quer a entrada
     em foco, e a frase se le igual sem ela */
  .sacada-frase .sl{opacity:1;transform:none;filter:none;letter-spacing:-.025em;
    transition:none}
  .sacada::before{opacity:1;transform:translate(-50%,-50%)}
  .bt:hover,.rec:hover,.medo:hover,.ext:hover{transform:none}
  /* Hotsite 1.11: o aviso do estado da vez acende de uma vez, sem esmaecer */
  .fluxo-caixa[data-estado] .aviso-vermelho,.fluxo-caixa[data-estado] .aviso-verde,
  .fx-estados button{transition:none}
  .varre,.dica-ico{animation:none}
  .varre{display:none}
}

/* ---------- telas menores ---------- */
@media (max-width:960px){
  .heroi-grade,.duas{grid-template-columns:1fr;gap:36px}
    .rec.destaque{grid-column:span 1}
  .rodape-grade{grid-template-columns:1fr;gap:26px}
  section{padding:62px 0}
  .mini-corpo{grid-template-columns:1fr}
  .seg-bloco{margin-left:0;width:100%;text-align:left}
  .mini-ferramentas .seg{width:100%}
}
/* O TOPO DO TELEFONE CABE A MARCA E OS DOIS BOTOES, numa linha so (Hotsite 1.19): letra e folga menores.
   No de 320 so o simbolo fica: o nome empurraria o «Quero começar» para fora da tela. O nome continua no
   HTML, escondido so dos olhos, para o leitor de tela. */
@media (max-width:440px){
  .topo-in{gap:8px}
  .topo .marca{font-size:16px;gap:7px}
  .topo .marca svg{width:26px;height:26px}
  .entrar{font-size:13.5px;padding:9px 11px;border-radius:11px}
  .bt.bt-topo{font-size:13.5px;padding:10px 13px;border-radius:11px}
}
@media (max-width:350px){
  .topo .marca-nome{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@media (max-width:640px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  /* O CORPO DO CARTÃO PERDE O RECUO DO ÍCONE. Alinhar com o título custa 80 px, e numa tela
     de 320 sobra uma coluna de 200 para o texto — o alinhamento bonito come a leitura. */
  .ext-corpo{padding-left:20px}
  /* SEM `padding-bottom` AQUI: ele existia para a barra fixa do celular nao cobrir o fim da
     pagina, e a barra saiu. Espaco reservado para quem nao esta mais la e uma faixa vazia no
     pe de toda tela estreita. */
  .oferta{padding:28px 20px}
}