/* ============================================================
   Murillo Bacchi — páginas internas
   Só o que não existe no base.css. Header, footer, botão, grade,
   .section, .sec-head, .duas e .olho vêm de lá.
   ============================================================ */

/* ── HERO INTERNO ────────────────────────────────────────────
   Sem retrato: o retrato é assinatura da home. Aqui a página
   abre pelo argumento, não pela pessoa. ── */
.hero-interna{padding:140px 0 clamp(56px,7vw,96px);border-bottom:1px solid var(--linha-fina)}
.hero-interna h1{
  font-family:var(--display);font-weight:600;
  font-size:clamp(38px,6.4vw,84px);line-height:.96;
  letter-spacing:var(--track-cartaz);max-width:16ch;margin-top:18px;
}
.hero-interna .lead{margin-top:28px;max-width:56ch}

/* Migalha: existe pro leitor e pro BreadcrumbList do schema. */
.migalha{font-family:var(--mono);font-size:11px;letter-spacing:var(--track-micro);
  text-transform:uppercase;color:var(--texto-fraco);display:flex;gap:10px;align-items:center}
.migalha a:hover{color:var(--rosa)}
.migalha span[aria-hidden]{color:var(--linha)}

/* ── RESPOSTA DIRETA ─────────────────────────────────────────
   O bloco que motor de resposta cita. Fica alto na página, é curto
   e responde a pergunta do H1 sem rodeio. Não encher de link. ── */
.resposta{
  border-left:3px solid var(--rosa);padding:clamp(22px,3vw,34px) clamp(22px,3.4vw,40px);
  background:var(--carvao);margin-top:clamp(40px,5vw,64px);
}
.resposta p{font-size:clamp(18px,2vw,22px);line-height:1.5;max-width:62ch;
  letter-spacing:var(--track-display)}
.resposta p + p{margin-top:16px;font-size:17px;color:var(--texto-medio)}

/* ── PROSA ───────────────────────────────────────────────── */
.prosa{max-width:66ch}
.prosa h2{font-family:var(--display);font-weight:600;
  font-size:clamp(26px,3.4vw,42px);line-height:1.05;letter-spacing:var(--track-display);
  margin-top:clamp(48px,6vw,80px)}
.prosa h3{font-family:var(--display);font-weight:600;font-size:clamp(20px,2.2vw,26px);
  line-height:1.15;letter-spacing:var(--track-display);margin-top:36px}
.prosa p{margin-top:18px;color:var(--texto-medio)}
.prosa p strong{color:var(--texto);font-weight:700}
.prosa > h2 + p{color:var(--texto);font-size:18px}
.prosa ul{margin-top:20px}
.prosa li{position:relative;padding-left:26px;margin-top:12px;color:var(--texto-medio)}
.prosa li::before{content:'';position:absolute;left:0;top:11px;
  width:9px;height:1px;background:var(--rosa)}

/* ── LISTA NUMERADA (etapas) ─────────────────────────────── */
.etapas{counter-reset:etapa;margin-top:clamp(32px,4vw,48px);
  display:grid;gap:1px;background:var(--linha-fina)}
.etapas li{counter-increment:etapa;background:var(--preto);
  padding:clamp(24px,3vw,34px);display:grid;gap:6px;
  grid-template-columns:52px 1fr;align-items:start}
.etapas li::before{content:counter(etapa,decimal-leading-zero);
  font-family:var(--mono);font-size:12px;letter-spacing:var(--track-dado);
  color:var(--rosa);padding-top:5px}
.etapas h3{font-family:var(--display);font-weight:600;font-size:clamp(19px,2vw,24px);
  letter-spacing:var(--track-display);line-height:1.15}
.etapas p{grid-column:2;color:var(--texto-medio);margin-top:2px}

/* ── SINAIS (checklist de diagnóstico) ───────────────────── */
/* 380px trava em 3 colunas dentro do container de 1440: 6 sinais = 2 linhas
   cheias. Com 280px cabiam 4 e sobrava célula vazia no canto.
   O min() é obrigatório: minmax(380px) puro estoura os 350px úteis do 390px
   de viewport e faz a página rolar na horizontal. */
.sinais{display:grid;gap:1px;background:var(--linha-fina);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));
  margin-top:clamp(32px,4vw,48px)}
.sinais li{background:var(--preto);padding:clamp(22px,2.6vw,30px);
  font-size:16.5px;color:var(--texto-medio);position:relative;padding-left:52px}
.sinais li::before{content:'';position:absolute;left:clamp(22px,2.6vw,30px);top:calc(clamp(22px,2.6vw,30px) + 10px);
  width:12px;height:12px;border:1.5px solid var(--rosa);border-radius:50%}

/* ── FAQ ─────────────────────────────────────────────────────
   <details> puro: abre sem JS e o texto já nasce no DOM, que é o
   que crawler e motor de resposta leem. Accordion em JS esconderia
   a resposta de quem mais precisa achar. ── */
.faq{margin-top:clamp(32px,4vw,48px);border-top:1px solid var(--linha-fina)}
.faq details{border-bottom:1px solid var(--linha-fina)}
.faq summary{
  list-style:none;cursor:pointer;padding:clamp(22px,2.6vw,28px) 44px clamp(22px,2.6vw,28px) 0;
  font-family:var(--display);font-weight:600;font-size:clamp(18px,2.1vw,23px);
  line-height:1.25;letter-spacing:var(--track-display);position:relative;
  transition:color .2s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--rosa)}
.faq summary::after{
  content:'';position:absolute;right:6px;top:50%;width:13px;height:13px;
  border-right:1.5px solid var(--rosa);border-bottom:1.5px solid var(--rosa);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s var(--mola);
}
.faq details[open] summary{color:var(--rosa)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq .faq-resposta{padding:0 clamp(0px,4vw,60px) clamp(26px,3vw,32px) 0;max-width:70ch}
.faq .faq-resposta p{color:var(--texto-medio)}
.faq .faq-resposta p + p{margin-top:14px}

/* ── CTA FINAL ───────────────────────────────────────────── */
.cta-final{border-top:1px solid var(--linha-fina)}
.cta-final h2{font-family:var(--display);font-weight:600;
  font-size:clamp(30px,4.6vw,60px);line-height:1;letter-spacing:var(--track-cartaz);
  max-width:18ch}
.cta-final p{margin-top:22px;color:var(--texto-medio);max-width:52ch}
.cta-final .btn{margin-top:32px}

/* ── PÁGINAS IRMÃS ───────────────────────────────────────── */
.irmas{display:grid;gap:1px;background:var(--linha-fina);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));margin-top:clamp(32px,4vw,48px)}
/* height:100% obriga o card curto a preencher a linha. Sem isso o fundo do
   <ul> (que é a linha de 1px) aparece como faixa cinza sob o menor. */
.irmas a{background:var(--preto);padding:clamp(24px,3vw,32px);display:block;
  height:100%;transition:background .25s}
.irmas a:hover{background:var(--carvao)}
.irmas h3{font-family:var(--display);font-weight:600;font-size:clamp(19px,2vw,24px);
  letter-spacing:var(--track-display);line-height:1.15}
.irmas p{margin-top:10px;color:var(--texto-medio);font-size:16px}
.irmas span{font-family:var(--mono);font-size:11px;letter-spacing:var(--track-micro);
  text-transform:uppercase;color:var(--rosa);display:block;margin-top:16px}

@media (max-width:640px){
  .hero-interna{padding-top:112px}
  .etapas li{grid-template-columns:40px 1fr}
}

/* ── PRINCÍPIOS (as 6 linhas do manifesto) ───────────────────
   A forma X over Y é do manifesto: escolhe lado sem xingar.
   O "over" fica apagado de propósito — o peso está nos dois
   extremos, e é a virada que carrega o golpe. ── */
.principios{display:grid;gap:1px;background:var(--linha-fina);
  margin-top:clamp(32px,4vw,48px)}
.principios li{background:var(--preto);padding:clamp(26px,3.2vw,40px)}
.principios__linha{font-family:var(--display);font-weight:600;
  font-size:clamp(23px,3.4vw,42px);line-height:1.02;
  letter-spacing:var(--track-display);text-transform:uppercase}
.principios__linha .over{color:var(--texto-fraco);font-weight:400}
.principios p{margin-top:16px;color:var(--texto-medio);max-width:64ch}

/* O nome do método no H1 usa a mesma lógica: o "over" recua. */
.hero-interna h1 .over{color:var(--texto-fraco);font-weight:400}

/* ── FERRAMENTA (calculadora) ────────────────────────────────
   Formulário no escuro: o campo é o buraco, não a caixa. Fundo
   mais fundo que a página e borda só embaixo, pra linha ficar
   com a mesma gramática da grade. ── */
.ferramenta{display:grid;gap:clamp(28px,3vw,44px);margin-top:clamp(32px,4vw,48px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));align-items:start}
.campos{display:grid;gap:clamp(18px,2vw,26px)}
.campo{display:grid;gap:8px}
.campo label{font-family:var(--mono);font-size:11px;letter-spacing:var(--track-micro);
  text-transform:uppercase;color:var(--texto-medio)}
.campo .dica{font-size:13.5px;color:var(--texto-fraco);letter-spacing:0}
.campo-entrada{display:flex;align-items:center;gap:10px;
  background:var(--carvao);border:1px solid var(--linha-fina);border-radius:4px;
  padding:0 16px;transition:border-color .2s}
.campo-entrada:focus-within{border-color:var(--rosa)}
.campo-entrada .prefixo{font-family:var(--mono);font-size:13px;color:var(--texto-fraco)}
.campo-entrada input{flex:1;min-width:0;background:none;border:0;outline:none;
  color:var(--texto);font-family:var(--corpo);font-size:18px;font-weight:500;
  padding:15px 0;letter-spacing:var(--track-corpo)}
.campo-entrada input::-webkit-outer-spin-button,
.campo-entrada input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.campo-entrada input[type=number]{-moz-appearance:textfield}

/* ── RESULTADO ───────────────────────────────────────────────
   Nasce escondido e só aparece quando os campos obrigatórios
   existem: número pela metade engana mais que número nenhum. ── */
.resultado{border:1px solid var(--linha-fina);background:var(--carvao);
  padding:clamp(24px,3vw,36px);position:sticky;top:104px}
.resultado[hidden]{display:none}
.resultado__vazio{color:var(--texto-fraco);font-size:16px}
/* 190px empacota 2 colunas na largura do painel: 4 números viram 2x2 cheio.
   Com 150px cabiam 3 e sobrava célula vazia no canto. */
.numeros{display:grid;gap:1px;background:var(--linha-fina);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  border:1px solid var(--linha-fina)}
.numero{background:var(--carvao);padding:18px}
.numero dt{font-family:var(--mono);font-size:10.5px;letter-spacing:var(--track-micro);
  text-transform:uppercase;color:var(--texto-fraco)}
.numero dd{font-family:var(--display);font-weight:600;font-size:clamp(24px,3vw,34px);
  line-height:1;letter-spacing:var(--track-display);margin-top:8px}
.numero dd small{display:block;font-family:var(--corpo);font-size:12.5px;font-weight:400;
  letter-spacing:0;color:var(--texto-fraco);margin-top:7px;line-height:1.35}
.numero--alerta dd{color:var(--rosa)}

.veredito{margin-top:clamp(22px,2.6vw,30px);border-left:3px solid var(--rosa);
  padding-left:clamp(16px,2vw,22px)}
.veredito h3{font-family:var(--display);font-weight:600;font-size:clamp(20px,2.4vw,27px);
  line-height:1.1;letter-spacing:var(--track-display)}
.veredito p{margin-top:12px;color:var(--texto-medio)}
.veredito p + p{margin-top:10px}
.veredito__principio{display:block;margin-top:18px;font-family:var(--mono);font-size:11px;
  letter-spacing:var(--track-micro);text-transform:uppercase;color:var(--texto-fraco)}
.veredito__principio b{color:var(--rosa);font-weight:400}
.resultado .btn{margin-top:clamp(22px,2.6vw,28px)}
.aviso{margin-top:18px;font-size:13px;color:var(--texto-fraco);line-height:1.5}

@media (max-width:900px){ .resultado{position:static} }