/* ============================================================
   Landing pages de SEO (tipos de atestado)
   Reaproveita os tokens do styles.css + componentes do home.css
   ============================================================ */

/* Hero da página */
.lp-hero{
    position:relative; padding:112px 0 44px; overflow:hidden;
    background:
        radial-gradient(60% 55% at 85% 0%, rgba(46,92,130,.14), transparent 60%),
        linear-gradient(180deg, var(--mint-soft), var(--surface) 78%);
}
/* Mesma grade do hero da home (.hero-grid), para que a borda esquerda do texto
   não pule de posição quando o visitante navega da home para uma landing. */
.lp-hero-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:center; column-gap:56px; row-gap:0 }
.lp-hero-grid .breadcrumb{ grid-column:1 / -1 }
.lp-hero-copy{ min-width:0 }
.lp-hero-copy .pill{ margin-bottom:18px }
.lp-hero-visual{ position:relative; min-width:0 }
.breadcrumb{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:.84rem; color:var(--text-muted); margin-bottom:14px }
.breadcrumb a{ color:var(--primary); text-decoration:none }
.breadcrumb a:hover{ text-decoration:underline }
.breadcrumb i{ font-size:.6rem; opacity:.6 }
/* No empilhado a trilha ocupava três linhas de respiro antes do H1 e empurrava
   o título para fora da primeira tela. Este arquivo é o último da cascata, e é
   por isso que a regra do mobile precisa morar aqui, não no home.css. */
@media(max-width:760px){
    /* A trilha é uma linha própria da grade: a margem dela soma com o row-gap
       e o conjunto empurrava o H1 para fora da primeira tela. */
    .breadcrumb{ font-size:.78rem; gap:5px; margin-bottom:0 }
    .lp-hero-grid{ row-gap:20px }
    .lp-hero{ padding-top:92px }
}
.lp-hero h1{ font-size:clamp(2rem,4.6vw,2.95rem); line-height:1.1; letter-spacing:-.02em; color:var(--primary-deep); margin:0 0 1rem }
/* Mesmo destaque do hero da home: o <em> marca a segunda metade do título em
   azul, não em itálico. Sem esta regra o navegador aplica o itálico padrão. */
.lp-hero h1 em{ font-style:normal; color:var(--primary) }
.lp-hero .lead{ font-size:1.14rem; color:var(--text-muted); max-width:640px; margin:0 0 1.6rem }
.lp-hero .lead strong{ color:var(--text-main) }
.lp-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-bottom:1.5rem }

/* Ritmo vertical: as seções destas páginas têm bem menos conteúdo que as da
   home, e com os mesmos 84px de respiro os blocos ficavam boiando no vazio.
   Este arquivo é o último da cascata, então basta redefinir. */
.sec{ padding:64px 0 }
.sec-head{ margin-bottom:38px }
.lp-hero + .sec{ padding-top:44px }
/* A prosa fecha com margem do último parágrafo; sem isto o corte para a
   próxima faixa fica com quase 100px de branco. */
.prose > :last-child{ margin-bottom:0 }

/* Conteúdo em prosa */
.prose{ max-width:760px; margin:0 auto }
.prose h2{ font-size:1.55rem; color:var(--primary-deep); letter-spacing:-.01em; margin:0 0 .55em }
.prose h3{ font-size:1.12rem; color:var(--primary-dark); margin:1.5em 0 .4em }
.prose p{ margin:0 0 1em; color:var(--text-muted); font-size:1.02rem }
.prose strong{ color:var(--text-main); font-weight:600 }
.prose ul{ margin:.2em 0 1.3em; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px }
.prose li{ position:relative; padding-left:28px; color:var(--text-muted) }
.prose li::before{ content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; left:0; top:3px; color:var(--primary); font-size:.82rem }
.prose a{ color:var(--primary); font-weight:600 }

/* Cards (quando usar / o que inclui) */
.lp-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:920px; margin:0 auto }
.lp-card{ background:var(--surface); border:1px solid var(--border-light); border-radius:var(--radius); padding:22px 20px; box-shadow:var(--shadow-card) }
.lp-card .ic{ font-size:1.35rem; color:var(--primary); background:var(--mint); width:48px; height:48px; border-radius:12px; display:grid; place-items:center; margin-bottom:12px }
.lp-card h3{ font-size:1.04rem; color:var(--primary-deep); margin:0 0 6px }
.lp-card p{ font-size:.9rem; color:var(--text-muted); margin:0 }
@media(max-width:760px){ .lp-cards{ grid-template-columns:1fr } }

/* ── Passo a passo ──────────────────────────────────────────
   Antes esta seção reusava .lp-cards, que é grade de 3 colunas: com 4 passos
   o quarto card sobrava sozinho numa segunda linha. Agora tem grade própria,
   sempre com tantas colunas quantos forem os passos.               */
.lp-steps{ list-style:none; margin:0 auto; padding:0; max-width:1080px; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:passo }
.lp-step{ position:relative; background:var(--surface); border:1px solid var(--border-light); border-radius:var(--radius); box-shadow:var(--shadow-card); padding:26px 22px 24px; display:flex; flex-direction:column }
/* Linha que costura um card ao seguinte; some no último e no empilhado. */
.lp-step::after{ content:""; position:absolute; top:48px; right:-18px; width:18px; height:2px; background:var(--border-color) }
.lp-step:last-child::after{ display:none }
.lp-step .num{ counter-increment:passo; position:absolute; top:-13px; left:22px; width:28px; height:28px; border-radius:50%; background:var(--primary); color:#fff; font-size:.8rem; font-weight:700; display:grid; place-items:center; box-shadow:0 2px 8px rgba(46,92,130,.35) }
.lp-step .num::before{ content:counter(passo) }
.lp-step .ic{ font-size:1.3rem; color:var(--primary); background:var(--mint); width:52px; height:52px; border-radius:14px; display:grid; place-items:center; margin:8px 0 14px }
.lp-step h3{ font-size:1.02rem; color:var(--primary-deep); margin:0 0 7px; line-height:1.3 }
.lp-step p{ font-size:.9rem; color:var(--text-muted); margin:0; line-height:1.55 }
@media(max-width:1000px){
    .lp-steps{ grid-template-columns:repeat(2,1fr); gap:26px 18px }
    /* Na grade 2x2 a linha horizontal só faria sentido nos pares da esquerda. */
    .lp-step:nth-child(2n)::after{ display:none }
}
/* Empilhado, o cartão vira ícone à esquerda e título+texto à direita. Numa
   coluna só de flex o título ficava espremido em três linhas. */
@media(max-width:620px){
    .lp-steps{ grid-template-columns:1fr; gap:14px }
    .lp-step::after{ display:none }
    .lp-step{ display:grid; grid-template-columns:46px 1fr; column-gap:14px; row-gap:5px; padding:20px }
    .lp-step .num{ top:-11px; left:18px }
    .lp-step .ic{ grid-row:1 / span 2; align-self:start; margin:2px 0 0; width:46px; height:46px; font-size:1.15rem }
    .lp-step h3{ align-self:center; margin:0 }
    .lp-step p{ grid-column:2 }
}



/* No empilhado o documento vem depois do texto, como na home. */
@media(max-width:980px){
    .lp-hero-grid{ grid-template-columns:1fr; row-gap:40px }
    .lp-hero-visual{ order:1 }
}
/* No empilhado o documento continua aparecendo, menor: ele é o que mostra o
   que a pessoa vai receber, e some justo onde a decisão acontece. */
@media(max-width:760px){
    .lp-hero-visual{ margin:0 auto; max-width:420px; transform:scale(.92); transform-origin:top center }
}
@media(max-width:420px){
    .lp-hero-visual{ transform:scale(.86) }
}

/* A faixa de selos agora é a mesma da home (.hero-trust, no home.css): larga,
   abaixo do hero. O carrossel do mobile é montado pelo ui.js. */
@media(max-width:640px){
    .lp-hero .hero-trust-marquee{ margin-top:4px }
}
@media(max-width:560px){
    .lp-hero{ padding-top:100px }
    .lp-actions .btn-cta, .lp-actions .btn-ghost{ width:100% }
}

/* No empilhado o hero das páginas de conteúdo passa a centralizar como o da
   home (.hero-copy no home.css faz o mesmo a partir de 980px): a pílula, o
   H1, a chamada e os botões no mesmo eixo. Antes ficavam à esquerda e a
   troca entre a home e uma landing parecia outra identidade. */
@media(max-width:980px){
    .lp-hero-copy{ text-align:center }
    .lp-hero-copy .lead{ margin-left:auto; margin-right:auto }
    .lp-actions{ justify-content:center }
    .lp-hero-grid .breadcrumb{ justify-content:center }
}

/* ── Botões do hero, no desktop ──
   Os dois quebravam para linhas separadas: a coluna de texto tem ~523px e o
   par (primário + "São 4 passos, tudo online. Entenda!") pedia ~580px. Em vez
   de encurtar o texto, a coluna ganha um pouco mais de largura e o botão
   secundário fica mais compacto — assim eles ficam lado a lado, que é o
   arranjo que o olho lê como um par de ações. */
@media(min-width:981px){
    .lp-hero-grid{ grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr); column-gap:44px }
    .lp-actions{ flex-wrap:nowrap; align-items:stretch }
    .lp-actions .btn-cta{ flex:0 0 auto; white-space:nowrap }
    .lp-actions .btn-ghost{
        flex:1 1 auto; min-width:0; white-space:nowrap;
        font-size:.9rem; padding:1rem 1.25rem;
    }
}