/* O FECHAMENTO INVERTIDO (Hotsite 1.43, 27/out/2026): as peças da página que o dono escolheu — as cinco perguntas antes do
   resto, as perguntas de passagem, o espelho, a economia antes do preço e o resumo. O plano e as decisões estão em
   `Planos da IA/ANALISE-HOTSITE-FECHAMENTO-INVERTIDO.md` */

/* ANTES DAS CINCO RESPOSTAS (pedido do dono, 27/out): o herói e as perguntas. O resto da página, o menu e o «Quero
   começar» do topo aparecem depois da última. O «Entrar» fica: é de quem já comprou. O texto do herói esperava a quinta
   resposta até o Hotsite 1.45, quando o dono pediu que ele aparecesse antes das perguntas */
html.diag-pendente body > section:not(.heroi),
html.diag-pendente body > footer,
html.diag-pendente .topo .menu,
html.diag-pendente .topo .bt-topo{display:none!important}
/* sem o menu, quem empurra os botoes para a direita e o sol (Hotsite 1.48); antes, no computador, o «Entrar» ficava colado a marca */
html.diag-pendente .topo .tema-bt{margin-left:auto}

/* S1 — as perguntas, uma por vez, no herói */
.pp{max-width:640px;margin:30px 0 0;background:var(--branco);border:1px solid var(--linha);border-radius:var(--raio-g);
  box-shadow:var(--sombra);padding:26px clamp(18px,4vw,32px)}
.pp-intro{font-size:15px;color:var(--tinta-suave);margin:0 0 18px}
.pp-cab{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.pp-n{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--roxo);white-space:nowrap}
.pp-barra{flex:1;height:6px;border-radius:99px;background:var(--papel-2);overflow:hidden}
.pp-barra i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--roxo),var(--azul));
  transition:width .3s ease}
.pp-q h3{font-size:clamp(20px,2.4vw,25px);color:var(--tinta);margin:0 0 16px}
.pp-q[hidden]{display:none}
.diag-ops{display:flex;flex-wrap:wrap;gap:9px}
.diag-ops button,.pp-alt{font:600 15px/1.2 var(--fonte);color:var(--tinta-2);background:var(--papel);
  border:1px solid var(--linha);border-radius:999px;padding:12px 19px;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s,transform .15s}
.diag-ops button:hover,.pp-alt:hover{border-color:var(--roxo-cl);transform:translateY(-1px)}
.diag-ops button[aria-pressed="true"]{background:var(--roxo);border-color:var(--roxo);color:#fff}
.pp-valor{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pp-valor input{font:600 17px var(--fonte);width:220px;max-width:100%;padding:12px 16px;border-radius:12px;
  border:1px solid var(--linha);background:var(--papel);color:var(--tinta)}
.pp-valor input:focus{outline:2px solid var(--roxo-cl);outline-offset:1px}
.pp-valor .bt{font-size:15.5px;padding:12px 22px;border-radius:12px}
.pp-aviso{min-height:20px;margin:8px 0 0;font-size:13.5px;color:var(--vermelho)}
.pp-pe{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;min-height:22px}
.pp-voltar{background:none;border:0;padding:0;font:600 14px var(--fonte);color:var(--tinta-suave);cursor:pointer}
.pp-voltar:hover{color:var(--roxo)}
.pp-voltar[hidden]{display:none}
/* respondidas as cinco, as perguntas somem (pedido do dono, 27/out: sem a linha «Pronto» e sem refazer as perguntas) */
.pp.feito{display:none}
/* a caixa só existe enquanto a página espera as respostas: sem JavaScript (ou sem o `diagnostico.js`) ninguém responderia
   aos botões dela, e a página já aparece inteira (revisão do Hotsite 1.43) */
html:not(.diag-pendente) .pp{display:none}

/* S2 — a pergunta de passagem, no fim das seções */
/* em destaque (pedido do dono, 27/out): o degradê do «Para por falta de plano.» do título */
.passagem{max-width:760px;margin:44px auto 0;text-align:center;font-family:var(--disp);font-weight:800;
  font-size:clamp(21px,2.5vw,28px);line-height:1.3;letter-spacing:-.015em;
  background:linear-gradient(100deg,var(--roxo),var(--azul) 70%);-webkit-background-clip:text;background-clip:text;
  color:transparent}
.escuro .passagem{background:linear-gradient(100deg,var(--roxo-cl),var(--azul-cl) 70%);-webkit-background-clip:text;
  background-clip:text;color:transparent}

/* S3 — o espelho: a linha que devolve a resposta da pessoa */
.espelho{max-width:760px;margin:22px auto 0;padding:13px 18px;border-left:3px solid var(--roxo);
  background:rgba(108,77,246,.08);border-radius:0 12px 12px 0;font-size:15px;color:var(--tinta)}
.espelho[hidden],[data-se][hidden]{display:none!important}

/* S4 — o resumo do que a pessoa marcou. Morava na seção «Fazendo as contas», logo antes do preço; desde o Hotsite 1.44
   (pedido do dono, 28/out) fica em «O que tem dentro», logo depois do título, e a seção saiu. Na cor do texto, e não no
   cinza da frase de baixo: é a pessoa lendo o que ela mesma disse */
.sec-cab p.resumo{font-size:clamp(17px,1.9vw,19px);line-height:1.6;color:var(--tinta)}

/* S5 — a tabela da economia. O desenho é o da tabela das oito partes de antes do Hotsite 1.44 (a `.tab-valor`, que virou
   os painéis `.parte`), com duas linhas por item: o problema e o que a conta evita */
.tab-eco td{vertical-align:top;padding:16px 10px}
.tab-eco td b{display:block;font-size:15.5px;margin-bottom:3px}
.tab-eco td span{display:block;font-size:13px;line-height:1.5;color:var(--tinta-suave)}
.tab-eco td:last-child{font-size:16px;padding-top:17px}
/* o número do preço na última linha não é a linha de texto (bloco, 13 px, cinza) */
.tab-eco td:last-child span{display:inline;font-size:inherit;line-height:inherit;color:inherit}
/* a linha da situação da pessoa em verde (pedido do dono, 27/out: o âmbar «amarelado» não agradou). O verde é o da economia,
   e o da garantia logo acima */
.tab-eco tr.sua td{background:rgba(0,184,148,.09)}
.tab-eco tr.sua td:first-child{border-radius:12px 0 0 12px}
.tab-eco tr.sua td:last-child{border-radius:0 12px 12px 0}
.tab-eco tr.sua td:first-child b::after{content:"a sua situação";display:inline-block;margin-left:8px;vertical-align:2px;
  font:700 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#00775F;
  background:rgba(0,184,148,.18);border-radius:999px;padding:4px 8px}
/* no telefone, a coluna do valor (letra mono, sem quebra) espremia o texto: cada linha vira o valor em cima e o texto
   embaixo, na largura toda */
@media (max-width:600px){
  .tab-eco tr{display:flex;flex-direction:column;border-bottom:1px solid var(--linha)}
  .tab-eco td{display:block;border-bottom:0}
  .tab-eco td:last-child{order:-1;text-align:left;padding:14px 10px 0;font-size:15px}
  .tab-eco tr.sua td,.tab-eco tr.nos td{border-radius:0!important}
  .tab-eco tr.sua,.tab-eco tr.nos{border-radius:12px;overflow:hidden;margin:4px 0}
}
/* a última linha, sem o preço (a economia vem antes dele): uma frase só, centrada, sem a letra de número da coluna do valor */
.tab-eco tr.nos td[colspan]{text-align:center;font-family:var(--disp);font-weight:800;font-size:clamp(17px,1.9vw,20px);
  color:var(--roxo-esc);padding:18px 14px;border-radius:12px;white-space:normal}
.eco-nota{max-width:640px;margin:12px auto 0;text-align:center;font-size:12.5px;color:var(--tinta-fraca)}

/* o cartão do preço, destino do «Quero começar» do topo: o topo fixo não cobre o contador. A entrada dele só esmaece, sem
   descer: os 26 px do `.sobe` mudavam o lugar dele depois da rolagem, e ele encostava no topo */
#oferta{scroll-margin-top:96px}
#oferta.sobe{transform:none}

/* A FRASE DA VIRADA («E se o preço aparecesse enquanto você desenha?») EM METADE DO TEMPO (pedido do dono, 27/out: «está
   demorando muito para aparecer»). No `estilo.css`, cada linha leva 1,15 s, as esperas são de 0,45, 0,85 e 1,25 s, e a
   frase fica pronta em 2,4 s; o brilho atrás dela leva 1,9 s, depois de 0,3 s. Aqui, tudo pela metade: pronta em 1,2 s */
.sacada::before{transition:transform .95s cubic-bezier(.16,1,.3,1) .15s, opacity .75s ease .15s}
.sacada-frase .sl{transition:opacity .575s cubic-bezier(.16,1,.3,1),
  transform .575s cubic-bezier(.16,1,.3,1),
  filter .575s cubic-bezier(.16,1,.3,1),
  letter-spacing .575s cubic-bezier(.16,1,.3,1)}
.sacada.vis .s1{transition-delay:.225s}
.sacada.vis .s2{transition-delay:.425s}
.sacada.vis .s3{transition-delay:.625s}
/* O TEMA ESCURO (Hotsite 1.47; o desenho dele mora no fim da `estilo.css`): o botao escolhido leva o roxo cheio de antes,
   com a letra branca, e os verdes e roxos claros de fundo ganham corpo para aparecer na noite. Desde o 1.48 ele liga pela
   marca `data-tema` do `<html>`, que o `tema.js` poe (o sistema, ou o botao do sol) */
@media screen{
  :root[data-tema="claro"]{color-scheme:only light}
  :root[data-tema="escuro"]{color-scheme:dark}
  :where(:root[data-tema="escuro"]) .diag-ops button[aria-pressed="true"]{background:#6C4DF6;border-color:#8B72F9}
  :where(:root[data-tema="escuro"]) .espelho{background:rgba(160,140,255,.12)}
  :where(:root[data-tema="escuro"]) .tab-eco tr.sua td{background:rgba(0,184,148,.14)}
  :where(:root[data-tema="escuro"]) .tab-eco tr.sua td:first-child b::after{color:#5EE6C0;background:rgba(0,184,148,.2)}
}