/* Estilos das landing pages montadas pelo painel. */

.lp-hero {
    padding: 4.5rem 0 3.5rem;
    background: linear-gradient(180deg, var(--jrm-light) 0%, #fff 100%);
}

.lp-hero h1 {
    font-size: clamp(2rem, 4vw, 3.1rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--jrm-primary-dark);
    margin-bottom: 1rem;
}

.lp-selo {
    display: inline-block;
    background: rgba(13, 58, 102, .08);
    color: var(--jrm-primary);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .02em;
    padding: .35rem .85rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}

.lp-lede {
    font-size: 1.15rem;
    color: #4b5563;
    max-width: 46ch;
    margin-bottom: 1.75rem;
}

.lp-hero .text-center .lp-lede { margin-inline: auto; }

.lp-section { padding: 4rem 0; }

.lp-bg-white   { background: #fff; }
.lp-bg-light   { background: var(--jrm-light); }
.lp-bg-dark    { background: var(--jrm-primary-dark); color: #e5e7eb; }
.lp-bg-primary { background: var(--jrm-primary); color: #fff; }

.lp-bg-dark .lp-titulo,
.lp-bg-primary .lp-titulo { color: #fff; }

.lp-bg-dark .lp-subtitulo,
.lp-bg-primary .lp-subtitulo { color: rgba(255, 255, 255, .82); }

.lp-titulo {
    font-size: clamp(1.6rem, 2.6vw, 2.25rem);
    font-weight: 700;
    color: var(--jrm-primary-dark);
    margin-bottom: .75rem;
}

.lp-subtitulo {
    font-size: 1.05rem;
    color: #6b7280;
    max-width: 60ch;
    margin-bottom: 1.5rem;
}

.text-center > .lp-subtitulo,
.lp-section .text-center.lp-subtitulo { margin-inline: auto; }

.lp-conteudo { color: inherit; line-height: 1.7; }
.lp-conteudo :last-child { margin-bottom: 0; }
.lp-conteudo img { max-width: 100%; height: auto; border-radius: .75rem; }

/* Uma captura de celular em pé chega com quase o dobro de altura da largura e
   estoura a seção inteira. O teto de altura mantém a imagem legível sem deixar
   o texto ao lado boiando num vazio. */
.lp-hero img,
.lp-section img {
    max-height: 520px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.lp-card {
    /* Coluna ancorada no topo: com h-100 os cards ficam da mesma altura, e o
       ícone, o título e o texto começam na mesma linha em todos eles. */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 1rem;
    padding: 1.75rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: transform .15s ease, box-shadow .15s ease;
}

.lp-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .09);
}

.lp-card-icone {
    font-size: 1.9rem;
    line-height: 1;
    color: var(--jrm-primary);
}

.lp-bg-dark .lp-card,
.lp-bg-primary .lp-card { color: #1f2a37; }

.lp-faq { max-width: 780px; }
.lp-faq .accordion-button:not(.collapsed) {
    color: var(--jrm-primary);
    background: rgba(13, 58, 102, .06);
}
.lp-faq .accordion-button:focus {
    box-shadow: 0 0 0 .2rem rgba(13, 58, 102, .18);
}

.lp-cta { max-width: 720px; }

@media (max-width: 991.98px) {
    .lp-hero { padding: 3rem 0 2.5rem; }
    .lp-section { padding: 3rem 0; }
}