/* ===========================================================================
   institucional.css — /area-do-cliente (os cartões do Cliente Online de locação e de condomínio).
   A página não existe no site antigo da Central: veio da Porto, aqui com as cores e as medidas da Central.
   =========================================================================== */

/* AS VARIÁVEIS QUE ESTA FOLHA USA, NA PALETA DA CENTRAL (O style.css NOVO NÃO TEM AS DA PORTO; ELA SÓ CARREGA NA
   ÁREA DO CLIENTE). */
:root {
    --cor-borda: #dedede;
    --cor-branco: #fff;
    --cor-escura: #2d2d2d;
    --cor-fundo-alt: #f5f5f5;
    --cor-primaria: #000066;
    --cor-primaria-forte: #750005;
    --cor-texto: #5b5b5b;
    --cor-texto-suave: #959595;
    --fs-base: 16px;
    --gap-lg: 30px;
    --raio-lg: 4px;
}

/* ===========================================================================
   Á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.
   =========================================================================== */

/* NO DESKTOP O CABEÇALHO É FIXO: O TÍTULO COMEÇA ABAIXO DELE (75px) COM O RESPIRO DAS INTERNAS. */
.cliente {
    padding: 40px 0 80px;
}

@media (min-width: 992px) {
    .cliente { padding-top: 135px; }
}

/* 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);
    }
}