/* ============================================================
   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:118px 0 60px; 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%);
}
/* Bloco de conteúdo centralizado (mesma coluna da prosa abaixo); texto continua à esquerda */
.lp-hero .container{ max-width:808px; }
.breadcrumb{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:.84rem; color:var(--text-muted); margin-bottom:16px }
.breadcrumb a{ color:var(--primary); text-decoration:none }
.breadcrumb a:hover{ text-decoration:underline }
.breadcrumb i{ font-size:.6rem; opacity:.6 }
.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 }
.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 }
.lp-trust{ display:flex; flex-wrap:wrap; gap:10px 22px }
.lp-trust span{ display:inline-flex; align-items:center; gap:7px; font-size:.85rem; color:var(--text-muted); font-weight:500 }
.lp-trust i{ color:var(--primary) }

/* 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 } }

/* Preço */
.lp-price{ display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap; background:var(--mint-soft); border:1px solid var(--border-light); border-radius:var(--radius); padding:26px 30px; max-width:620px; margin:0 auto; text-align:center }
.lp-price .val{ font-size:2.5rem; font-weight:800; color:var(--primary-deep); line-height:1 }
.lp-price .val small{ display:block; font-size:.9rem; font-weight:600; color:var(--text-muted); margin-top:4px }

/* Páginas relacionadas (linkagem interna = bom p/ SEO) */
.lp-related{ display:flex; flex-wrap:wrap; gap:10px; max-width:760px; margin:0 auto }
.lp-related a{ font-size:.88rem; color:var(--primary-dark); background:var(--surface); border:1px solid var(--border-color); border-radius:999px; padding:8px 16px; text-decoration:none; transition:border-color .2s, color .2s }
.lp-related a:hover{ border-color:var(--primary); color:var(--primary) }

/* Mobile: a faixa de selos vira carrossel (a versão .hero-trust-marquee é
   injetada via JS e estilizada pelo home.css). Escondemos a versão em linha. */
@media(max-width:640px){
    .lp-trust{ display:none }
    .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% }
}