/* =========================================================
   PENSÃO ALIMENTÍCIA
   CSS COMPLEMENTAR
   Carregar após style.css e landingPage.css
========================================================= */


/* =========================================================
   BASE E ESPAÇAMENTO
========================================================= */

.ue-card,
.ue-split,
.ue-highlight {
    padding-top: 32px;
    padding-bottom: 38px;
}

.ue-card {
    background: #ffffff;
}

.ue-split {
    background: var(--fundo-claro);
}

.ue-highlight {
    background: var(--azul-profundo);
}


/* =========================================================
   LARGURA — PADRÃO AMPLO
========================================================= */

.ue-card > .container,
.ue-split > .container,
.ue-highlight > .container {
    width: min(1380px, calc(100% - 80px));
    max-width: 1380px;
    margin-inline: auto;
}


/* =========================================================
   TÍTULOS DAS SEÇÕES
========================================================= */

.ue-card .lp-titulo,
.ue-split .lp-titulo,
.ue-highlight .lp-titulo {
    max-width: 1120px;
    margin-bottom: 27px;
}

.ue-card .lp-titulo > span,
.ue-split .lp-titulo > span,
.ue-highlight .lp-titulo > span {
    display: block;
    width: fit-content;

    margin: 0 0 13px;

    font-family: "Montserrat", Arial, sans-serif;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: .17em;
    text-transform: uppercase;

    color: var(--azul-principal);
}

.ue-card .lp-titulo h2,
.ue-split .lp-titulo h2,
.ue-highlight .lp-titulo h2 {
    margin: 0;

    max-width: 1050px;

    padding: 0;

    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.75rem, 1.25rem + 1.4vw, 2.4rem);
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -.015em;

    color: var(--azul-profundo);
}

/* SEM RISCO ABAIXO DOS TÍTULOS */

.ue-card .lp-titulo h2::after,
.ue-split .lp-titulo h2::after,
.ue-highlight .lp-titulo h2::after {
    display: none !important;
    content: none !important;
}

.ue-card .lp-titulo > p,
.ue-split .lp-titulo > p,
.ue-highlight .lp-titulo > p {
    max-width: 1000px;

    margin: 17px 0 0;

    font-size: 15px;
    line-height: 1.8;

    color: var(--texto);
}


/* =========================================================
   SEÇÕES AZUIS
========================================================= */

.ue-highlight .lp-titulo > span {
    color: var(--azul-claro);
}

.ue-highlight .lp-titulo h2 {
    color: #ffffff;
}

.ue-highlight .lp-titulo > p {
    color: rgba(255,255,255,.76);
}


/* =========================================================
   RESPOSTAS / EXPLICAÇÕES
========================================================= */

.ue-resposta {
    max-width: 1120px;

    padding: 28px 30px;

    border: 1px solid var(--borda);
    border-left: 3px solid var(--azul-principal);

    background: #ffffff;

    box-shadow: 0 10px 26px rgba(6,43,74,.045);
}

.ue-resposta strong {
    display: block;

    margin-bottom: 11px;

    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.35;

    color: var(--azul-profundo);
}

.ue-resposta p {
    max-width: 1000px;

    margin: 10px 0 0;

    font-size: 15px;
    line-height: 1.78;

    color: var(--texto);
}


/* RESPOSTA EM FUNDO AZUL */

.ue-highlight .ue-resposta {
    border-color: rgba(255,255,255,.20);
    border-left-color: var(--azul-claro);

    background: rgba(255,255,255,.035);

    box-shadow: none;
}

.ue-highlight .ue-resposta strong {
    color: #ffffff;
}

.ue-highlight .ue-resposta p {
    color: rgba(255,255,255,.76);
}


/* =========================================================
   QUADROS PRINCIPAIS
   Ex.: necessidade / possibilidade / proporcionalidade
========================================================= */

.lp-grade-situacoes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 0;

    max-width: 1380px;

    margin-top: 28px;

    border: 1px solid var(--borda);

    background: #ffffff;
}

.lp-card-situacao {
    position: relative;

    min-width: 0;

    padding: 30px 28px;

    border: 0;
    border-right: 1px solid var(--borda);

    background: #ffffff;

    box-shadow: none;

    transition:
        background .2s ease,
        transform .2s ease;
}

.lp-card-situacao:last-child {
    border-right: 0;
}

.lp-card-situacao:hover {
    background: var(--fundo-claro);
    transform: translateY(-2px);
}

.lp-card-situacao > span {
    display: block;

    margin-bottom: 18px;

    font-size: .7rem;
    font-weight: 700;

    letter-spacing: .13em;

    color: var(--azul-principal);
}

.lp-card-situacao h3 {
    margin: 0 0 12px;

    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.27rem;
    font-weight: 600;
    line-height: 1.3;

    color: var(--azul-profundo);
}

.lp-card-situacao p {
    margin: 0;

    font-size: 14px;
    line-height: 1.72;

    color: var(--texto-claro);
}


/* =========================================================
   LISTAS DE DESPESAS / SITUAÇÕES
   FORMATO DE TABELA VISUAL
========================================================= */

.lp-checklist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));

    max-width: 1200px;

    margin-top: 26px;

    border-top: 1px solid var(--borda);
    border-left: 1px solid var(--borda);

    background: #ffffff;
}

.lp-checklist > div {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr);
    align-items: center;

    min-height: 66px;

    padding: 13px 20px;

    border-right: 1px solid var(--borda);
    border-bottom: 1px solid var(--borda);
}

.lp-checklist > div > span {
    font-family: "Montserrat", Arial, sans-serif;
    font-size: .67rem;
    font-weight: 700;

    letter-spacing: .08em;

    color: var(--azul-principal);
}

.lp-checklist p {
    margin: 0;

    font-size: 14px;
    line-height: 1.55;

    color: var(--texto);
}


/* =========================================================
   LISTAS SIMPLES
========================================================= */

.lp-lista-atuacao {
    max-width: 1200px;

    margin-top: 24px;

    border-top: 1px solid var(--borda);
}

.lp-lista-atuacao article {
    display: grid;
    grid-template-columns: 65px minmax(0,1fr);

    gap: 22px;

    padding: 23px 0;

    border-bottom: 1px solid var(--borda);
}

.lp-lista-atuacao article > span {
    padding-top: 4px;

    font-size: .69rem;
    font-weight: 700;
    letter-spacing: .12em;

    color: var(--azul-principal);
}

.lp-lista-atuacao h3 {
    margin: 0 0 9px;

    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.28rem;
    font-weight: 600;
    line-height: 1.3;

    color: var(--azul-profundo);
}

.lp-lista-atuacao p {
    max-width: 1000px;

    margin: 7px 0 0;

    font-size: 14px;
    line-height: 1.72;

    color: var(--texto);
}


/* =========================================================
   ETAPAS / PROCEDIMENTO
========================================================= */

.lp-etapas {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));

    gap: 1px;

    max-width: 1380px;

    margin-top: 28px;

    background: var(--borda);
}

.lp-etapas article {
    position: relative;

    min-width: 0;

    padding: 28px 25px;

    background: #ffffff;
}


/* NÚMERO CENTRALIZADO */

.lp-etapas article > span {
    display: flex;
    align-items: center;
    justify-content: center;

    position: static;

    width: 44px;
    height: 44px;

    margin: 0 0 19px;

    padding: 0;

    border: 1px solid var(--borda);
    border-radius: 50%;

    font-family: "Montserrat", Arial, sans-serif;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;

    letter-spacing: 0;

    color: var(--azul-principal);
}

.lp-etapas h3 {
    margin: 0 0 11px;

    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.18rem;
    font-weight: 600;
    line-height: 1.35;

    color: var(--azul-profundo);
}

.lp-etapas p {
    margin: 8px 0 0;

    font-size: 13.5px;
    line-height: 1.7;

    color: var(--texto);
}


/* ETAPAS EM FUNDO AZUL */

.ue-highlight .lp-etapas {
    background: rgba(255,255,255,.14);
}

.ue-highlight .lp-etapas article {
    background: var(--azul-profundo);
}

.ue-highlight .lp-etapas article > span {
    border-color: rgba(255,255,255,.28);
    color: var(--azul-claro);
}

.ue-highlight .lp-etapas h3 {
    color: #ffffff;
}

.ue-highlight .lp-etapas p {
    color: rgba(255,255,255,.72);
}


/* =========================================================
   ALERTA IMPORTANTE
   Bom para inadimplemento / prisão / execução
========================================================= */

.lp-alerta-grande {
    display: grid;
    grid-template-columns: 56px minmax(0,1fr);

    gap: 26px;

    max-width: 1200px;

    padding: 32px;

    border: 1px solid rgba(255,255,255,.20);
}

.lp-alerta-grande__icone {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    border: 1px solid rgba(255,255,255,.45);
    border-radius: 50%;

    font-family: "Playfair Display", Georgia, serif;
    font-size: 1.2rem;

    color: #ffffff;
}

.lp-alerta-grande span {
    display: block;

    margin-bottom: 10px;

    font-size: .69rem;
    font-weight: 700;

    letter-spacing: .16em;
    text-transform: uppercase;

    color: var(--azul-claro);
}

.lp-alerta-grande h2 {
    margin: 0 0 16px;

    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.65rem,1.25rem + 1vw,2.15rem);
    font-weight: 600;
    line-height: 1.25;

    color: #ffffff;
}

.lp-alerta-grande p {
    max-width: 1000px;

    margin: 10px 0 0;

    font-size: 15px;
    line-height: 1.78;

    color: rgba(255,255,255,.76);
}


/* =========================================================
   OBSERVAÇÕES
========================================================= */

.lp-observacao {
    display: grid;
    grid-template-columns: 46px minmax(0,1fr);

    gap: 20px;
    align-items: start;

    max-width: 1120px;

    padding: 25px 28px;

    border: 1px solid var(--borda);

    background: var(--fundo-claro);
}

.lp-observacao > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    border: 1px solid var(--azul-principal);
    border-radius: 50%;

    font-family: "Playfair Display", Georgia, serif;
    font-weight: 600;

    color: var(--azul-principal);
}

.lp-observacao p {
    margin: 3px 0 0;

    font-size: 14px;
    line-height: 1.75;

    color: var(--texto);
}


/* =========================================================
   DOCUMENTOS
   QUADRO EM DUAS COLUNAS
========================================================= */

.documentos {
    padding-top: 42px;
    padding-bottom: 38px;

    background: var(--fundo-claro);
}

.documentos .container {
    width: min(1380px, calc(100% - 80px));
    max-width: 1380px;

    margin-inline: auto;
}

.documentos .lp-titulo {
    margin-bottom: 25px;
}

.documentos .lp-checklist {
    max-width: 1200px;

    box-shadow: 0 12px 30px rgba(6,43,74,.06);
}

.documentos .lp-checklist > div {
    transition: background .2s ease;
}

.documentos .lp-checklist > div:hover {
    background: var(--fundo-claro);
}


/* =========================================================
   NOTAS
========================================================= */

.lp-nota {
    max-width: 1200px;

    margin-top: 20px;

    padding: 18px 22px;

    border-left: 2px solid var(--azul-principal);

    background: rgba(12,68,116,.045);
}

.lp-nota p {
    margin: 0;

    font-size: 13.5px;
    line-height: 1.7;

    color: var(--texto-claro);
}


/* =========================================================
   FECHAMENTO
========================================================= */

.lp-fechamento {
    max-width: 1100px;

    padding-left: 28px;

    border-left: 3px solid rgba(232,241,247,.65);
}

.lp-fechamento h2 {
    margin: 0 0 18px;

    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.8rem,1.3rem + 1.2vw,2.4rem);
    font-weight: 600;
    line-height: 1.25;

    color: #ffffff;
}

.lp-fechamento p {
    max-width: 950px;

    margin: 11px 0 0;

    font-size: 15px;
    line-height: 1.8;

    color: rgba(255,255,255,.76);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 980px) {

    .ue-card > .container,
    .ue-split > .container,
    .ue-highlight > .container,
    .documentos .container {
        width: calc(100% - 48px);
    }

    .lp-grade-situacoes {
        grid-template-columns: 1fr;
    }

    .lp-card-situacao {
        border-right: 0;
        border-bottom: 1px solid var(--borda);
    }

    .lp-card-situacao:last-child {
        border-bottom: 0;
    }

    .lp-etapas {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .ue-card,
    .ue-split,
    .ue-highlight,
    .documentos {
        padding-top: 30px;
        padding-bottom: 28px;
    }

    .ue-card > .container,
    .ue-split > .container,
    .ue-highlight > .container,
    .documentos .container {
        width: calc(100% - 32px);
    }

    .ue-card .lp-titulo,
    .ue-split .lp-titulo,
    .ue-highlight .lp-titulo {
        margin-bottom: 21px;
    }

    .ue-card .lp-titulo > span,
    .ue-split .lp-titulo > span,
    .ue-highlight .lp-titulo > span {
        margin-bottom: 10px;

        font-size: .65rem;
        letter-spacing: .14em;
    }

    .ue-card .lp-titulo h2,
    .ue-split .lp-titulo h2,
    .ue-highlight .lp-titulo h2 {
        font-size: 1.55rem;
    }

    .ue-card .lp-titulo > p,
    .ue-split .lp-titulo > p,
    .ue-highlight .lp-titulo > p {
        margin-top: 13px;

        font-size: 14px;
        line-height: 1.7;
    }

    .ue-resposta {
        padding: 22px 20px;
    }

    .lp-checklist {
        grid-template-columns: 1fr;
    }

    .lp-etapas {
        grid-template-columns: 1fr;
    }

    .lp-lista-atuacao article {
        grid-template-columns: 42px minmax(0,1fr);
        gap: 14px;
    }

    .lp-alerta-grande,
    .lp-observacao {
        grid-template-columns: 1fr;
        gap: 15px;

        padding: 22px 20px;
    }

    .lp-fechamento {
        padding-left: 19px;
    }
}


/* =========================================================
   TELAS PEQUENAS
========================================================= */

@media (max-width: 480px) {

    .ue-card,
    .ue-split,
    .ue-highlight,
    .documentos {
        padding-top: 26px;
        padding-bottom: 25px;
    }

    .ue-card > .container,
    .ue-split > .container,
    .ue-highlight > .container,
    .documentos .container {
        width: calc(100% - 24px);
    }

    .lp-card-situacao,
    .lp-etapas article {
        padding: 22px 19px;
    }

    .lp-checklist > div {
        min-height: 61px;
        padding: 11px 15px;
    }
}


/* =========================================================
   ACESSIBILIDADE
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .lp-card-situacao,
    .documentos .lp-checklist > div {
        transition: none;
    }

    .lp-card-situacao:hover {
        transform: none;
    }
}

/* =========================================================
   ALTURA DO HERO — PENSÃO ALIMENTÍCIA
========================================================= */

.lp-hero {
    min-height: auto;
    padding-top: 100px;
    padding-bottom: 60px;
}

.lp-hero__conteudo {
    margin-top: 0;
    padding-top: 0;
}

/* ABAIXA A FOTO DO HERO */
.lp-hero__visual {
    transform: translateY(35px);
}

/* =========================================================
   CORREÇÃO DOS BLOCOS DE TEXTO — PENSÃO ALIMENTÍCIA
========================================================= */

/* TÍTULOS DOS BLOCOS NORMAIS */
.ue-card .auxilio-conteudo h2,
.ue-split .auxilio-conteudo h2 {
    margin: 0 0 20px;

    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.65rem, 1.25rem + 1.15vw, 2.15rem);
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -0.015em;

    color: var(--azul-profundo);
}


/* PARÁGRAFOS NORMAIS */
.ue-card .auxilio-conteudo p,
.ue-split .auxilio-conteudo p {
    max-width: 1180px;

    margin: 0 0 14px;

    font-family: "Montserrat", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.78;

    color: var(--texto);
}


/* =========================================================
   BLOCOS AZUIS — CORREÇÃO IMPORTANTE
========================================================= */

.ue-highlight .auxilio-conteudo h2 {
    margin: 0 0 20px;

    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(1.65rem, 1.25rem + 1.15vw, 2.15rem);
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -0.015em;

    color: #ffffff !important;
}

.ue-highlight .auxilio-conteudo p {
    max-width: 1180px;

    margin: 0 0 14px;

    font-family: "Montserrat", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.78;

    color: rgba(255, 255, 255, 0.78) !important;
}


/* LISTAS NO FUNDO AZUL */

.ue-highlight .auxilio-conteudo ul {
    max-width: 1180px;

    margin: 20px 0 0;
    padding: 0;

    list-style: none;
}

.ue-highlight .auxilio-conteudo li {
    position: relative;

    padding: 11px 0 11px 22px;

    border-bottom: 1px solid rgba(255,255,255,.15);

    font-size: 14px;
    line-height: 1.65;

    color: rgba(255,255,255,.82) !important;
}

.ue-highlight .auxilio-conteudo li::before {
    position: absolute;

    left: 0;
    top: 21px;

    width: 8px;
    height: 2px;

    content: "";

    background: var(--azul-claro);
}


/* =========================================================
   LISTAS NOS BLOCOS BRANCO E CLARO
========================================================= */

.ue-card .auxilio-conteudo ul,
.ue-split .auxilio-conteudo ul {
    max-width: 1180px;

    margin: 20px 0 0;
    padding: 0;

    list-style: none;
}


.ue-card .auxilio-conteudo li,
.ue-split .auxilio-conteudo li {
    position: relative;

    padding: 11px 0 11px 22px;

    border-bottom: 1px solid var(--borda);

    font-size: 14px;
    line-height: 1.65;

    color: var(--texto);
}

.ue-card .auxilio-conteudo li::before,
.ue-split .auxilio-conteudo li::before {
    position: absolute;

    left: 0;
    top: 21px;

    width: 8px;
    height: 2px;

    content: "";

    background: var(--azul-principal);
}


/* =========================================================
   RETIRA QUALQUER RISCO DOS TÍTULOS
========================================================= */

.auxilio-conteudo h2::before,
.auxilio-conteudo h2::after {
    display: none !important;
    content: none !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .ue-card .auxilio-conteudo h2,
    .ue-split .auxilio-conteudo h2,
    .ue-highlight .auxilio-conteudo h2 {
        margin-bottom: 16px;

        font-size: 1.5rem;
        line-height: 1.25;
    }

    .ue-card .auxilio-conteudo p,
    .ue-split .auxilio-conteudo p,
    .ue-highlight .auxilio-conteudo p {
        margin-bottom: 12px;

        font-size: 14px;
        line-height: 1.72;
    }
}

/* =========================================================
   ETIQUETAS — PADRÃO FAMÍLIA E SUCESSÕES
   REGRA FINAL
========================================================= */

section.ue-card .auxilio-conteudo > span.ue-etiqueta,
section.ue-split .auxilio-conteudo > span.ue-etiqueta,
section.ue-highlight .auxilio-conteudo > span.ue-etiqueta {
    display: block !important;

    width: max-content !important;
    max-width: 100% !important;

    margin: 0 0 14px 0 !important;
    padding: 0 !important;

    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    transform: none !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;

    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;

    color: var(--azul-principal) !important;
}


/* ETIQUETA NO FUNDO AZUL */

section.ue-highlight .auxilio-conteudo > span.ue-etiqueta {
    color: var(--azul-claro) !important;
}


/* TÍTULO LOGO ABAIXO DA ETIQUETA */

section.ue-card .auxilio-conteudo > span.ue-etiqueta + h2,
section.ue-split .auxilio-conteudo > span.ue-etiqueta + h2,
section.ue-highlight .auxilio-conteudo > span.ue-etiqueta + h2 {
    margin-top: 0 !important;
}


/* MOBILE */

@media (max-width: 767px) {

    section.ue-card .auxilio-conteudo > span.ue-etiqueta,
    section.ue-split .auxilio-conteudo > span.ue-etiqueta,
    section.ue-highlight .auxilio-conteudo > span.ue-etiqueta {
        margin-bottom: 10px !important;

        font-size: 0.65rem !important;
        letter-spacing: 0.14em !important;
    }
}