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

     .privacidade-*  MEDIDO na referência (politica-de-privacidade.php)
     .cliente*       MEDIDO na referência (area-do-cliente.php)
   ===========================================================================

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

     hero ........ 1440x277,6, respiro 80px em cima e 40 embaixo. O fundo era
                   #e3e3e3 e passou a **#f5f5f5**, com um fio de 1px #dedede
                   no pé, a pedido do Sami (2026-08-28)
     h1 .......... 40px/700, 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. A tinta era #505050 e passou a
                   **--cor-primaria** a pedido do Sami (2026-08-28)
     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, respiro de 10px embaixo e um fio de 40x3. A tinta
                   era #505050 e passou a **--cor-primaria** (2026-08-28)
     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: #f5f5f5;
    border-bottom: 1px solid #dedede;
}

.privacidade-hero__titulo {
    position: relative;
    display: inline-block;
    margin: 0 0 24px;
    font-size: 40px;
    font-weight: 700;
    line-height: 44px;
    color: var(--cor-primaria);
}

.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: var(--cor-primaria);
}

.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);
}

.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;
    }
}

/* ===========================================================================
   ÁREA DO CLIENTE (pages/area-do-cliente.php)
   ---------------------------------------------------------------------------
   MEDIDO NA REFERÊNCIA (area-do-cliente.php, 2026-08-28, viewport 1440):

     faixa ......... respiro 90 em cima e 120 embaixo
     cabeçalho ..... 1260 dentro do container de 1290 (os 15px são o respiro da
                     coluna dela), centrado, 50px até os cartões
     h1 ............ 24px/700, linha 1,1, na TINTA FORTE (#ff5652)
     selo .......... 15px/600 #282828 sobre #d7d7d7, respiro 5, raio 7,
                     largura de conteúdo (225), centrado — e ABAIXO do título
     cartões ....... 400x227 em x=300 e 730, centrados na linha de 1290 (cada
                     um numa coluna de 430 com 15 de respiro), respiro
                     40/30/35, raio 10, fundo TRANSPARENTE, borda 2px
                     rgba(153,153,153,.35), borda de cima 4px, sombra
                     0 16px 32px rgba(7,28,31,.1), 30px de margem embaixo
     h3 ............ 20px/700 #282828, 15 embaixo
     texto ......... 14px/400 #272727, linha 21
     "ACESSAR" ..... 14px/700, 25px depois do texto, centrado

   ⚠ A TINTA DESTA PÁGINA É A FORTE (#ff5652), como na /contato — e não a
   --cor-primaria (#ff3d3a) do menu e dos botões do resto do site.
   =========================================================================== */

.cliente {
    padding: 90px 0 120px;
}

/* Os 15px são o respiro da coluna que envolve o cabeçalho na referência: com o
   container em 1290, o texto fecha 1260. */
.cliente__cabecalho {
    margin-bottom: 50px;
    padding-inline: 15px;
    text-align: center;
}

.cliente__titulo {
    margin: 0 0 15px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--cor-primaria-forte);
}

/* O SELO CINZA. Fica DEPOIS do título — é a ordem do HTML da referência. */
.cliente__selo {
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 5px;
    border-radius: 7px;
    background: #d7d7d7;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--cor-escura);
}

/* --- Os cartões ----------------------------------------------------------- */

/* CENTRADOS, não esticados: são duas colunas de 1/3 numa linha de 1290 com
   `justify-content: center` (a referência é `col-lg-4` num `row` centrado).
   `flex-start` porque os cartões NÃO têm a mesma altura quando um título quebra
   em duas linhas — medido: 249 e 227 em 1200. */
.cliente__grade {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}

.cliente-area {
    position: relative;
    display: block;
    /* CONTA INTEIRA, não porcentagem: `33.3333% - 30px` dá 399,98 e não 400, e
       o texto centrado dentro dele sai meio pixel fora do lugar em relação à
       referência. Os 90px são os 30 de margem de cada uma das três colunas. */
    flex: 0 0 calc((100% - 90px) / 3);
    /* SEM ISTO O CARTÃO NÃO ENCOLHE ATÉ A MEDIDA PEDIDA: `min-width: auto` é o
       padrão do item de flex e trava a largura no MIN-CONTENT do miolo — o
       título "Área do Locatário/Proprietário" empurrava o cartão para 299 em
       1199 e 256 em 576, contra os 280 e 238 da referência (lá o cartão está
       dentro de uma coluna, que é bloco e não item de flex). */
    min-width: 0;
    margin: 0 15px 30px;
    padding: 40px 30px 35px;
    border: 2px solid rgba(153, 153, 153, .35);
    /* A BORDA DE CIMA É 4px E MUDA DE COR NO DESTAQUE. */
    border-top-width: 4px;
    border-top-color: #d0d0d0;
    border-radius: 10px;
    box-shadow: 0 16px 32px rgba(7, 28, 31, .1);
    text-align: center;
    /* MEDIDO: 0,3s no cartão e 0,5s no fio do pé. */
    transition: border-top-color .3s;
}

/* O FIO NO PÉ DO CARTÃO: 2px na tinta forte, 30px para dentro de cada lado.
   Nasce invisível e aparece no destaque/hover. `visibility` entra na transição
   junto com a opacidade, senão ele some de uma vez. */
.cliente-area::before {
    content: '';
    position: absolute;
    right: 30px;
    bottom: 0;
    left: 30px;
    height: 2px;
    background: var(--cor-primaria-forte);
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s, visibility .5s;
}

.cliente-area--ativa,
.cliente-area:hover {
    border-top-color: var(--cor-primaria-forte);
}

.cliente-area--ativa::before,
.cliente-area:hover::before {
    opacity: 1;
    visibility: visible;
}

.cliente-area__titulo {
    margin: 0 0 15px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--cor-escura);
}

.cliente-area__texto {
    margin: 0;
    font-size: var(--fs-base);
    line-height: 21px;
    color: #272727;
}

/* MEDIDO: #202020 em repouso e a tinta forte no destaque/hover. A caixa alta é
   do CSS; no HTML o texto está em caixa baixa (ver a nota na página). */
.cliente-area__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin-top: 25px;
    font-size: 14px;
    font-weight: 700;
    line-height: 21px;
    text-transform: uppercase;
    color: #202020;
    transition: color .3s;
}

.cliente-area--ativa .cliente-area__cta,
.cliente-area:hover .cliente-area__cta {
    color: var(--cor-primaria-forte);
}

/* MEDIDO: a tinta da seta fecha 22x10 — ver 'seta-longa-dir' em icones.php. */
.cliente-area__cta svg {
    width: auto;
    height: 10px;
}

/* Nenhuma área ligada no painel. Não existe na referência (ela crava os dois
   cartões); aqui é a rede de segurança para a página nunca sair vazia. */
.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);
}

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

/* ---------------------------------------------------------------------------
   RESPONSIVO — MEDIDO em 1440 · 1200 · 1199 · 1100 · 1000 · 992 · 991 · 900 ·
   768 · 767 · 700 · 650 · 600 · 576 · 575 · 480 · 390.

   A largura dos cartões segue o `col-lg-4 col-sm-6 col-12`: 1/3 acima de 992,
   metade entre 576 e 991, linha inteira abaixo de 576.

   ⚠ O CORPO DO TÍTULO VAI E VOLTA, E ISSO É BUG DA FOLHA DELA — conferido
   janela por janela, não é erro de medição:

       ≥ 1200 .... 24px      992–1199 .... 30px      768–991 .... 26px
       576–767 ... 30px      ≤ 575 ....... 24px

   Ou seja: estreitar a janela AUMENTA o título duas vezes. O do cartão faz o
   mesmo caminho (20 · 22 · 20 · 18). Está replicado para a tela bater com a do
   site no ar; a versão sã seria 30 → 26 → 24, e é uma linha de mudança.
   --------------------------------------------------------------------------- */

@media (max-width: 1199px) {
    .cliente__titulo {
        font-size: 30px;
    }

    .cliente-area__titulo {
        font-size: 22px;
    }
}

@media (max-width: 991px) {
    .cliente__titulo {
        font-size: 26px;
    }

    .cliente-area__titulo {
        font-size: 20px;
    }

    .cliente-area {
        flex-basis: calc((100% - 60px) / 2);
    }
}

@media (max-width: 767px) {
    .cliente__titulo {
        font-size: 30px;
    }

    .cliente-area__titulo {
        font-size: 18px;
    }
}

@media (max-width: 575px) {
    .cliente__titulo {
        font-size: 24px;
    }

    .cliente-area {
        flex-basis: calc(100% - 30px);
    }
}