/* ============================================================ 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 ─────────────────────────────────────────────────────
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