/* ===========================================================================
   institucional.css — /politica-de-privacidade e /area-do-cliente.

     .privacidade-*  MEDIDO na referência (politica-de-privacidade.php)
     .portais-*      /area-do-cliente, ainda não medida
   ===========================================================================

   ===========================================================================
   POLÍTICA DE PRIVACIDADE + TERMOS DE USO — MEDIDO NA REFERÊNCIA
   (politica-de-privacidade.php, 2026-08-21, viewport 1440):

     hero ........ 1440x277,6, fundo #e3e3e3, respiro 80px em cima e 40 embaixo
     h1 .......... 40px/700 #505050, linha 44, 24px de margem embaixo, com um
                   fio de 60x4 (raio 2) 10px abaixo — inline-block porque o fio
                   acompanha a largura do texto
     apoio ....... 19,2px PESO 300 (mais leve que o corpo do site), linha 28,8,
                   máximo de 800px, 32px de margem embaixo
     faixa ....... padding-top 60, sem respiro embaixo (o `pb-0` dela)
     cartão ...... 1320, fundo BRANCO (não o #fefefe do resto do site), raio
                   10, respiro 30, 30px entre cartões, borda 1px #dedede e a da
                   ESQUERDA 4px #505050
     h2 .......... 28,8px/700 #505050, respiro de 10px embaixo e um fio de 40x3
     h3 .......... 20,8px/700, recuado 15px, com um ponto de 6px em #efc425
                   (o amarelo médio da paleta)
     parágrafo ... 16px, linha 24, 16px de margem embaixo
     entrada ..... cartão sobe 20px e aparece em 0,6s, em cascata de 0,1s a
                   0,6s pelo `nth-child`. É animação de CSS puro na referência
                   (não o AOS), e aqui também
   =========================================================================== */
.privacidade-hero {
    padding: 80px 0 40px;
    background: #e3e3e3;
}

.privacidade-hero__titulo {
    position: relative;
    display: inline-block;
    margin: 0 0 24px;
    font-size: 40px;
    font-weight: 700;
    line-height: 44px;
    color: #505050;
}

.privacidade-hero__titulo::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 60px;
    height: 4px;
    border-radius: 2px;
    background: #505050;
}

.privacidade-hero__apoio {
    max-width: 800px;
    margin: 0 0 32px;
    font-size: 19.2px;
    font-weight: 300;
    line-height: 28.8px;
    color: var(--cor-texto);
}

.privacidade-secao {
    padding-top: 60px;
}

.privacidade-cartao {
    margin-bottom: 30px;
    padding: 30px;
    background: var(--cor-branco);
    border: 1px solid #dedede;   /* MEDIDO; a borda da esquerda vem logo abaixo */
    border-left: 4px solid #505050;
    border-radius: 10px;
    animation: privacidade-entra .6s ease forwards;
    opacity: 0;
}

/* Cascata: 0,1s a mais por cartão, como na referência. */
.privacidade-cartao:nth-child(1) { animation-delay: .1s; }
.privacidade-cartao:nth-child(2) { animation-delay: .2s; }
.privacidade-cartao:nth-child(3) { animation-delay: .3s; }
.privacidade-cartao:nth-child(4) { animation-delay: .4s; }
.privacidade-cartao:nth-child(5) { animation-delay: .5s; }
.privacidade-cartao:nth-child(6) { animation-delay: .6s; }

@keyframes privacidade-entra {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
}

/* Quem pediu menos movimento vê os cartões no lugar, sem animação. */
@media (prefers-reduced-motion: reduce) {
    .privacidade-cartao {
        animation: none;
        opacity: 1;
    }
}

.privacidade-cartao h2 {
    position: relative;
    margin: 0 0 16px;
    padding-bottom: 10px;
    font-size: 28.8px;
    font-weight: 700;
    line-height: 31.68px;
    color: #505050;
}

.privacidade-cartao h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    border-radius: 3px;
    background: #505050;
}

.privacidade-cartao h3 {
    position: relative;
    margin: 24px 0 16px;
    padding-left: 15px;
    font-size: 20.8px;
    font-weight: 700;
    line-height: 22.88px;
    color: var(--cor-texto);
}

.privacidade-cartao h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cor-primaria-media);
}

.privacidade-cartao p {
    margin: 0 0 16px;
    font-size: var(--fs-base);
    line-height: 24px;
    color: var(--cor-texto);
}

/* SEM `p:last-child { margin-bottom: 0 }` DE PROPÓSITO: a referência deixa os
   16px do último parágrafo dentro do cartão, e o cartão fecha 183,7 em vez de
   168. É a mesma armadilha da lista do /sobre — arrumar aqui encurta o bloco
   em relação ao site no ar. */

/* MEDIDO: 2rem no título e 20px de respiro no cartão abaixo de 768. */
@media (max-width: 768px) {
    .privacidade-hero__titulo {
        font-size: 32px;
        line-height: 1.2;
    }

    .privacidade-cartao {
        padding: 20px;
    }
}

/* ===========================================================================
   PORTAIS DE LOGIN (pages/area-do-cliente.php)
   ---------------------------------------------------------------------------
   A página inteira existe pra uma decisão só: qual dos logins abrir. Por
   isso os dois vão como cartões grandes de "portal de acesso" — não a lista
   fina de "soluções" da home (que faz sentido pra listar vários serviços em
   sequência, não pra apresentar 1-2 destinos com peso igual). Fio vermelho
   no topo = crachá/cartão de acesso, não decoração. `max-width` no grid
   evita que 1 cartão sozinho estique feio até a borda do container.
   =========================================================================== */
.portais-cliente {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--gap-md);
    max-width: 880px;
    margin-inline: auto;
}

.portal-cliente {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    padding: var(--gap-lg) var(--gap-md) var(--gap-md);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-lg);
    background: var(--cor-branco);
    overflow: hidden;
    transition: transform var(--transicao), box-shadow var(--transicao), border-color var(--transicao);
}

/* Fio no topo, não moldura inteira: é o "crachá" do cartão, discreto até o hover. */
.portal-cliente::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--cor-primaria);
    opacity: .55;
    transition: opacity var(--transicao);
}

.portal-cliente:hover {
    transform: translateY(-4px);
    box-shadow: var(--sombra-lg);
    border-color: var(--cor-primaria);
}

.portal-cliente:hover::before {
    opacity: 1;
}

.portal-cliente__icone {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--cor-primaria-suave);
    color: var(--cor-primaria);
}

.portal-cliente__icone svg {
    width: 26px;
    height: 26px;
}

.portal-cliente__titulo {
    margin: 0;
    font-size: var(--fs-xl);
    color: var(--cor-escura);
}

.portal-cliente__texto {
    margin: 0 0 var(--gap-xs);
    font-size: var(--fs-sm);
    color: var(--cor-texto-suave);
    /* Empurra o CTA pro rodapé do cartão mesmo quando um texto é mais curto
       que o outro — os dois botões ficam alinhados na mesma linha. */
    flex: 1;
}

.portal-cliente__cta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--cor-primaria);
}

.portal-cliente__cta svg {
    width: 16px;
    height: 16px;
    transition: transform var(--transicao);
}

.portal-cliente:hover .portal-cliente__cta svg {
    transform: translateX(3px);
}

.portais-cliente__ajuda {
    margin: var(--gap-lg) 0 0;
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--cor-texto-suave);
}

.portais-cliente__ajuda a {
    font-weight: 700;
    color: var(--cor-primaria);
}

.portais-cliente__vazio {
    max-width: 60ch;
    margin-inline: auto;
    padding: var(--gap-lg);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-lg);
    background: var(--cor-fundo-alt);
    text-align: center;
    color: var(--cor-texto-suave);
}

.portais-cliente__vazio a {
    font-weight: 700;
    color: var(--cor-primaria);
}

@media (max-width: 480px) {
    .portais-cliente {
        grid-template-columns: 1fr;
    }
}