/* ===========================================================================
   Nutrisaude / lp.css
   Estilos da landing page do guia de benefícios.

   Fonte da verdade: tools/design/handoff/design/LP Nutrisaude E-book v3.dc.html
   (Claude Design). Cada bloco abaixo corresponde a uma seção do design, com as
   mesmas medidas; os dois breakpoints (≤1180px e ≤640px) reproduzem o bloco
   @media do próprio arquivo de design. Tokens de cor e fontes vêm de base.css.
   =========================================================================== */

/* --- Ajustes globais do design -------------------------------------------- */

::placeholder {
    color: var(--cinza-placeholder);
    opacity: 1;
}

.pagina-lp input:focus,
.pagina-lp select:focus {
    outline: 2px solid var(--verde);
    outline-offset: 0;
}

/* ===========================================================================
   1. HERO + FORMULÁRIO
   =========================================================================== */

.hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(150deg, var(--verde-ink-topo) 0%, var(--verde-ink) 60%);
}

/* Textura de marca (bg-gradiente-verde) a 35% sobre todo o hero */
.hero__textura {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: url('../img/bg-gradiente-verde.webp') left center / cover no-repeat;
    opacity: 0.35;
}

/* Foto ocupa a metade direita, atrás do card */
.hero__foto {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%;
}

.hero__foto picture,
.hero__foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__grid {
    position: relative;
    max-width: var(--largura-max);
    margin: 0 auto;
    padding: 88px 64px;
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: 72px;
    align-items: center;
}

.hero__texto {
    color: var(--branco);
}

.hero__logo {
    height: 72px;
    width: auto;
    margin-bottom: 64px;
}

.hero__titulo {
    margin: 0 0 26px;
    font-family: var(--fonte-titulo);
    font-weight: 400;
    font-size: 46px;
    line-height: 1.13;
    letter-spacing: 0;
    color: var(--branco);
}

.hero__sublinhado {
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 2px;
}

.hero__sub {
    margin: 0 0 34px;
    max-width: 510px;
    font-weight: 500;
    font-size: 18px;
    line-height: 25px;
    letter-spacing: -0.02em;
    color: var(--branco);
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    max-width: 560px;
    margin-bottom: 8px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 22px 12px 14px;
    border: 1px solid rgba(0, 165, 100, 0.35);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
}

.chip__ok {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--verde);
    color: var(--verde-ink);
    font-size: 13px;
    font-weight: 700;
}

.chip__texto {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.3;
    color: var(--branco);
}

/* --- Card do formulário --------------------------------------------------- */

.form-col {
    justify-self: center;
    width: 100%;
    max-width: 480px;
}

.form-card {
    background: var(--branco);
    border-radius: var(--raio-card);
    padding: 38px 38px 30px;
    box-shadow: var(--sombra-card-desk);
}

.form-card__titulo {
    margin: 0 0 8px;
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: 26px;
    line-height: 1.15;
    letter-spacing: 0;
    color: var(--verde-ink);
}

.form-card__texto {
    margin: 0 0 22px;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: var(--verde-medio);
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 12px;
}

.campo {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.campo--largo {
    grid-column: 1 / -1;
}

.campo__rotulo {
    font-size: 12.5px;
    font-weight: 600;
    line-height: normal;
    color: var(--verde-medio);
}

.campo__controle {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 13px 15px;
    border: 1px solid var(--borda-campo);
    border-radius: var(--raio-campo);
    background: var(--branco);
    font-family: var(--fonte-texto);
    font-weight: 400;
    font-size: 15px;
    line-height: normal;
    color: var(--verde-ink);
    appearance: auto;
}

select.campo__controle {
    padding: 13px 12px;
}

.campo__controle[aria-invalid='true'] {
    border-color: var(--erro);
}

.consentimento {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
    cursor: pointer;
}

.consentimento input {
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    flex-shrink: 0;
    accent-color: var(--verde);
}

.consentimento span {
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--cinza);
}

.consentimento a {
    color: var(--verde-medio);
    text-decoration: underline;
}

.consentimento a:hover {
    color: var(--verde);
}

.form-card__erro {
    display: none;
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--erro);
}

.form-card__erro[data-visivel='true'] {
    display: block;
}

/* Botão do card: largura total, Manrope 19px, padding 20px 24px */
.btn.btn--form {
    width: 100%;
    min-height: 0;
    margin-top: 18px;
    padding: 20px 24px;
    font-size: 19px;
    line-height: normal;
}

/* CTAs das seções 3 e 4: pill largo (26px 72px), Manrope 20px */
.btn.btn--cta {
    min-height: 0;
    padding: 26px 72px;
    font-size: 20px;
    line-height: normal;
    white-space: nowrap;
}

/* Campo isca contra robôs: fora da tela, sem display:none para o robô achar */
.iscas {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ===========================================================================
   2. CONTEXTO
   =========================================================================== */

.contexto {
    position: relative;
    overflow: hidden;
    padding: 110px 64px 150px;
    background: linear-gradient(119deg, var(--branco) 11%, var(--creme-100) 65%);
}

/* Grafismo de marca no canto inferior direito. O design desenha o PNG
   original (1984px) quase em tamanho natural e mostra só o canto: o arquivo
   detalhe-canto.webp já é esse recorte (756x136 px do original, região
   x 1228 / y 1092), então aqui ele só preenche a caixa de 769x138. */
.contexto__detalhe {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 769px;
    height: 138px;
    pointer-events: none;
    background: url('../img/detalhe-canto.webp') center / 100% 100% no-repeat;
}

.contexto__grid {
    position: relative;
    max-width: var(--largura-max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 132px;
    align-items: center;
}

/* Caixa que reserva o espaço da composição; a arte dentro escala nos breakpoints */
.contexto__fit {
    width: 698px;
    height: 420px;
    max-width: 100%;
}

.contexto__arte {
    position: relative;
    width: 698px;
    height: 420px;
    transform-origin: top left;
}

.contexto__circulo {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    width: 420px;
    height: 420px;
    padding: 40px;
    border-radius: 50%;
    background: var(--verde-ink);
}

.contexto__marca {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background: var(--verde);
}

.contexto__marca img {
    width: 40px;
    height: auto;
}

.contexto__frase {
    margin: 0;
    font-weight: 600;
    font-size: 25px;
    line-height: 1.25;
    text-align: center;
    color: var(--verde);
}

/* A foto circular sobrepõe o círculo verde (left 330px, top 26px) */
.contexto__foto {
    position: absolute;
    left: 330px;
    top: 26px;
    width: 368px;
    height: 368px;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: var(--sombra-card-desk);
}

.contexto__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contexto__textos {
    min-width: 0;
}

.contexto__titulo {
    margin: 0 0 26px;
    font-weight: 600;
    font-size: 44px;
    line-height: 1.13;
    letter-spacing: -0.04em;
    color: var(--verde-ink);
}

.contexto__titulo em {
    font-style: italic;
    font-weight: 500;
}

.contexto__texto {
    margin: 0;
    max-width: 620px;
    font-weight: 500;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: -0.02em;
    text-align: justify;
    color: var(--verde-ink);
}

/* ===========================================================================
   3. O QUE O GUIA RESPONDE
   =========================================================================== */

.guia {
    display: grid;
    grid-template-columns: minmax(0, 0.58fr) minmax(0, 0.42fr);
    background: var(--branco);
}

/* O texto alinha com o container de 1568px; a foto sangra até a borda */
.guia__conteudo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 110px 72px 110px max(64px, calc((100vw - 1568px) / 2 + 64px));
}

.guia__titulo {
    margin: 0 0 44px;
    font-weight: 600;
    font-size: 52px;
    line-height: 1.1;
    letter-spacing: -0.04em;
    color: var(--verde-ink);
}

.cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.card {
    padding: 28px 28px 30px;
    border-radius: var(--raio-bloco);
    background: var(--creme-card);
}

.card__ok {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: rgba(0, 165, 100, 0.1);
    color: var(--verde);
    font-size: 14px;
    font-weight: 700;
}

.card h3 {
    margin: 0 0 8px;
    font-family: var(--fonte-texto);
    font-weight: 600;
    font-size: 19px;
    line-height: normal;
    letter-spacing: 0;
    text-wrap: wrap;
    color: var(--verde-ink);
}

.card p {
    margin: 0;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.02em;
    color: var(--verde-ink);
    opacity: 0.85;
}

.guia__acao {
    display: flex;
    margin-top: 40px;
}

.guia__foto {
    position: relative;
    min-width: 0;
    min-height: 720px;
}

.guia__foto img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===========================================================================
   4. INSTITUCIONAL
   =========================================================================== */

.institucional {
    display: grid;
    grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr);
    min-height: 620px;
    background: var(--branco);
}

.institucional__foto {
    position: relative;
    min-width: 0;
    overflow: hidden;
}

.institucional__foto img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Três camadas: véu de 15%, textura de marca e cor de base */
.institucional__bloco {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 96px 80px;
    background:
        linear-gradient(rgba(9, 45, 35, 0.15), rgba(9, 45, 35, 0.15)),
        url('../img/bg-gradiente-verde.webp') center / cover no-repeat,
        var(--verde-ink);
}

.institucional__interno {
    max-width: 680px;
}

.institucional__titulo {
    margin: 0 0 24px;
    font-weight: 600;
    font-size: 42px;
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--branco);
}

.institucional__texto {
    margin: 0 0 44px;
    font-weight: 500;
    font-size: 17.5px;
    line-height: 24px;
    letter-spacing: -0.02em;
    color: var(--branco);
}

.institucional .btn--cta {
    border-radius: 121px;
}

/* ===========================================================================
   5. NÚMEROS
   =========================================================================== */

.numeros {
    position: relative;
    overflow: hidden;
    padding: 96px 64px;
    background: linear-gradient(143deg, var(--branco) 15%, var(--creme-200) 97%);
}

.numeros__interno {
    position: relative;
    max-width: var(--largura-max);
    margin: 0 auto;
}

.numeros__cabecalho {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 64px;
    margin-bottom: 64px;
}

.numeros__titulo {
    margin: 0;
    flex: 0 1 auto;
    font-weight: 600;
    font-size: 40px;
    line-height: 1.14;
    letter-spacing: 0;
    color: var(--verde-ink);
}

.numeros__texto {
    margin: 0;
    flex: 0 1 440px;
    align-self: flex-end;
    font-weight: 500;
    font-size: 17px;
    line-height: 26px;
    letter-spacing: -0.02em;
    color: var(--cinza);
}

.numeros__grade {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--linha);
}

.numeros__item {
    padding: 40px 40px 0;
    border-left: 1px solid var(--linha);
}

.numeros__item:first-child {
    padding-left: 0;
    border-left: none;
}

.numeros__item:last-child {
    padding-right: 0;
}

.numeros__valor {
    margin: 0 0 8px;
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: 52px;
    line-height: 1;
    letter-spacing: -1px;
    white-space: nowrap;
    color: var(--verde-medio);
}

.numeros__item--destaque .numeros__valor {
    color: var(--verde);
}

.numeros__label {
    margin: 0;
    font-weight: 500;
    font-size: 16px;
    line-height: normal;
    color: var(--verde-medio);
}

/* ===========================================================================
   6. RODAPÉ
   =========================================================================== */

.rodape {
    padding: 64px 64px;
    background: var(--verde-rodape);
}

.rodape__interno {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 64px;
    max-width: var(--largura-max);
    margin: 0 auto;
}

.rodape__logo {
    height: 60px;
    width: auto;
}

.rodape__links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rodape__links a {
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    color: var(--branco);
}

.rodape__links a:hover {
    color: var(--verde);
}

.rodape__endereco {
    max-width: 280px;
}

.rodape__linha {
    display: block;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    color: var(--branco);
}

.rodape__endereco .rodape__linha {
    line-height: 1.55;
}

.rodape__rotulo {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--verde-apagado);
}

/* ===========================================================================
   BREAKPOINT 1 — até 1180px (tablet), igual ao design
   =========================================================================== */

@media (max-width: 1180px) {
    .hero__grid {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 56px 40px;
    }

    .hero__foto {
        display: none;
    }

    .hero__titulo {
        font-size: 38px;
    }

    .hero__titulo br {
        display: none;
    }

    .form-col {
        justify-self: stretch;
        max-width: 560px;
    }

    .contexto {
        /* 110px do design + altura do grafismo (138px), para o texto não
           ficar embaixo dele quando as colunas empilham */
        padding: 80px 40px 180px;
    }

    .contexto__grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .contexto__fit {
        width: 558px;
        height: 336px;
    }

    .contexto__arte {
        transform: scale(0.8);
    }

    .contexto__titulo,
    .guia__titulo,
    .institucional__titulo {
        font-size: 34px;
    }

    .guia {
        grid-template-columns: 1fr;
    }

    .guia__conteudo {
        padding: 72px 40px;
    }

    .guia__foto {
        min-height: 380px;
    }

    .institucional {
        grid-template-columns: 1fr;
    }

    .institucional__foto {
        position: relative;
        min-height: 340px;
    }

    .institucional__bloco {
        padding: 64px 40px;
    }

    .numeros {
        padding: 72px 40px;
    }

    .numeros__cabecalho {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 48px;
    }

    .numeros__titulo br {
        display: none;
    }

    .numeros__texto {
        align-self: flex-start;
        flex: 0 1 auto;
    }

    .numeros__grade {
        grid-template-columns: 1fr 1fr;
    }

    .numeros__item {
        padding: 32px 24px 0 0;
    }

    /* Segunda coluna: respiro entre o divisor e o número */
    .numeros__item:nth-child(even) {
        padding-left: 24px;
    }

    .numeros__item:nth-child(3) {
        border-left: none;
    }

    .rodape {
        padding: 56px 40px;
    }
}

/* ===========================================================================
   BREAKPOINT 2 — até 640px (celular), igual ao design
   =========================================================================== */

@media (max-width: 640px) {
    .hero__grid {
        padding: 40px 20px 48px;
        gap: 36px;
    }

    .hero__logo {
        height: 48px;
        margin-bottom: 36px;
    }

    .hero__titulo {
        font-size: 30px;
    }

    .hero__sub {
        font-size: 16px;
        line-height: 1.5;
    }

    .chips {
        flex-direction: column;
    }

    .chip {
        width: 100%;
    }

    .form-card {
        padding: 26px 20px 22px;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .campo--largo {
        grid-column: auto;
    }

    .contexto {
        /* 56px de respiro após o texto + faixa do grafismo (76px) */
        padding: 56px 20px 132px;
    }

    /* No celular o grafismo vira uma faixa menor, alinhada à direita, na base
       da seção, sem passar por cima do texto */
    .contexto__detalhe {
        width: 82%;
        height: 76px;
        background-size: cover;
        background-position: right center;
    }

    /* Composição recomposta em vez de escalada: no design o scale(0.48)
       deixava a frase com 12px e a foto espremida contra a borda */
    .contexto__fit {
        width: 100%;
        max-width: none;
        height: 210px;
    }

    .contexto__arte {
        width: 100%;
        height: 210px;
        transform: none;
    }

    .contexto__circulo {
        width: 210px;
        height: 210px;
        padding: 20px 32px;
        gap: 12px;
    }

    .contexto__marca {
        width: 56px;
        height: 56px;
    }

    .contexto__marca img {
        width: 27px;
    }

    .contexto__frase {
        font-size: 15px;
        line-height: 1.25;
    }

    .contexto__frase br {
        display: none;
    }

    .contexto__foto {
        left: auto;
        right: 0;
        top: 21px;
        width: 168px;
        height: 168px;
    }

    .contexto__titulo,
    .guia__titulo,
    .institucional__titulo {
        font-size: 27px;
        line-height: 1.2;
    }

    .contexto__texto,
    .institucional__texto {
        font-size: 16px;
        text-align: left;
    }

    .guia__conteudo {
        padding: 56px 20px;
    }

    .cards {
        grid-template-columns: 1fr;
    }

    .guia__foto {
        min-height: 240px;
    }

    .guia__foto img {
        object-position: 50% 45%;
    }

    .btn.btn--cta,
    .btn.btn--form {
        width: 100%;
        padding: 19px 24px;
        font-size: 17px;
    }

    .institucional__bloco {
        padding: 56px 20px;
    }

    /* No celular a foto da seção 4 (outro prato) vinha colada na foto da
       seção 3: duas fotos de tela cheia em sequência. Fica só a da seção 3. */
    .institucional__foto {
        display: none;
    }

    .numeros {
        padding: 56px 20px;
    }

    .numeros__titulo {
        font-size: 26px;
    }

    .numeros__valor {
        font-size: 32px;
    }

    .numeros__label {
        font-size: 14px;
    }

    .rodape {
        padding: 48px 20px;
    }

    .rodape__interno {
        flex-direction: column;
        gap: 28px;
    }
}

/* ===========================================================================
   ANIMAÇÕES (assets/js/animacoes.js)
   Só valem com <html class="anima">, que o script põe quando o visitante não
   pediu prefers-reduced-motion. Sem JS a página aparece parada, como no design.
   =========================================================================== */

@keyframes ns-subir {
    from {
        opacity: 0;
        transform: translateY(26px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes ns-surgir {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes ns-card {
    from {
        opacity: 0;
        transform: translateY(34px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Entrada do hero: texto sobe em cascata, card chega logo depois, foto surge */
.anima .hero__logo,
.anima .hero__titulo,
.anima .hero__sub,
.anima .chips {
    animation: ns-subir 0.8s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.anima .hero__logo {
    animation-delay: 0.05s;
}

.anima .hero__titulo {
    animation-delay: 0.16s;
}

.anima .hero__sub {
    animation-delay: 0.27s;
}

.anima .chips {
    animation-delay: 0.38s;
}

.anima .form-card {
    animation: ns-card 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) 0.35s both;
}

.anima .hero__foto {
    animation: ns-surgir 1.4s ease both;
}

/* Revelação conforme o scroll (os filhos de um grupo ganham data-revelar
   pelo script; ficam ocultos desde já para não piscar) */
.anima [data-revelar],
.anima [data-revelar-grupo] > * {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.7s ease var(--atraso, 0ms),
        transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) var(--atraso, 0ms);
    will-change: opacity, transform;
}

.anima [data-revelar].revelado {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* Composição da seção 2: o círculo cresce e a foto entra por trás dele */
.anima .contexto__arte[data-revelar] {
    transform: none;
}

.anima .contexto__arte .contexto__circulo {
    opacity: 0;
    transform: scale(0.86);
    transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.anima .contexto__arte .contexto__foto {
    opacity: 0;
    transform: translateX(-40px) scale(0.92);
    transition: opacity 0.7s ease 0.25s, transform 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) 0.25s;
}

.anima .contexto__arte.revelado .contexto__circulo,
.anima .contexto__arte.revelado .contexto__foto {
    opacity: 1;
    transform: none;
}

/* Fotos de sangria: surgem sem deslocar */
.anima .guia__foto[data-revelar],
.anima .institucional__foto[data-revelar] {
    transform: none;
    transition: opacity 1s ease;
}

/* Números: algarismos tabulares enquanto contam, para não tremer */
.numeros__valor.contando {
    font-variant-numeric: tabular-nums;
}

/* Botões: leve resposta ao passar o mouse */
.anima .btn--cta,
.anima .btn--form {
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.25s ease;
}

.anima .btn--cta:hover,
.anima .btn--form:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.anima .btn--cta:active,
.anima .btn--form:active {
    transform: translateY(0);
    box-shadow: none;
}

/* ===========================================================================
   MODAL DAS POLÍTICAS (partials/politicas.php + assets/js/modal.js)
   =========================================================================== */

.modal {
    width: min(720px, calc(100vw - 32px));
    max-height: min(84vh, 860px);
    margin: auto;
    padding: 0;
    border: none;
    border-radius: var(--raio-card);
    background: var(--branco);
    color: var(--verde-ink);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.modal::backdrop {
    background: rgba(9, 45, 35, 0.72);
    backdrop-filter: blur(3px);
}

.modal-aberto {
    overflow: hidden;
}

.modal__caixa {
    display: flex;
    flex-direction: column;
    max-height: min(84vh, 860px);
}

.modal__cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 28px;
    border-bottom: 1px solid var(--linha);
}

.modal__titulo {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: 0;
}

.modal__fechar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: var(--creme-100);
    color: var(--verde-ink);
    font-size: 26px;
    line-height: 1;
    transition: background-color 0.18s ease;
}

.modal__fechar:hover {
    background: var(--creme-200);
}

.modal__corpo {
    overflow-y: auto;
    padding: 8px 28px 28px;
    font-weight: 400;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--verde-ink);
    overscroll-behavior: contain;
}

.modal__corpo h3 {
    margin: 26px 0 8px;
    font-family: var(--fonte-titulo);
    font-size: 18px;
    letter-spacing: 0;
    color: var(--verde-medio);
}

.modal__corpo p {
    margin: 0 0 12px;
    text-wrap: pretty;
}

.modal__corpo ul,
.modal__corpo ol {
    margin: 0 0 12px;
    padding-left: 22px;
}

.modal__corpo li {
    margin-bottom: 6px;
}

.modal__corpo a {
    color: var(--verde-medio);
    text-decoration: underline;
}

.modal__nota {
    margin-top: 20px !important;
    font-size: 13.5px;
    color: var(--cinza);
}

@media (max-width: 640px) {
    .modal {
        width: calc(100vw - 20px);
        max-height: 88vh;
    }

    .modal__caixa {
        max-height: 88vh;
    }

    .modal__cabecalho {
        padding: 16px 18px;
    }

    .modal__titulo {
        font-size: 19px;
    }

    .modal__corpo {
        padding: 4px 18px 20px;
        font-size: 15px;
    }
}