/* ===========================================================================
   HOME — capa, posicionamento, faixa "Gestão Administrativa", serviços,
   depoimentos e contato.

   TODO VALOR AQUI FOI MEDIDO NO SITE NO AR com o Chrome sem janela, em 1440,
   1200, 992, 768, 480 e 390. O ritmo vertical da referência, de cima para
   baixo, é este — e é o que as regras abaixo repetem:

     capa            altura da janela menos o cabeçalho
     #sobre          80px de respiro, frase, traço, 50px
     faixa escura    60px de distância, 80px de respiro por dentro
     #servicos       80px + 80px, título, 80px, cartões, divisor a 80px
     #depoimentos    60px de distância, 200px de respiro por dentro
     #contato        80px, título, 50px, formulário e mapa, 50px, cartões
     rodapé          80px depois do último cartão

   ⚠ IMAGEM TROCADA PEDE `?v=` NOVO. As URLs de `url(...)` aqui levam
   `?v=<mtime>` na mão: o CSS e o JS ganham versão sozinhos (`samiSiteAsset()`),
   mas o que está DENTRO do CSS, não — e o servidor manda `max-age=14400`, com
   Cloudflare na frente. Sem trocar o número, a imagem antiga fica no ar por até
   4 horas. Rodar `stat -c %Y public/img/<arquivo>` e usar o número.

   ⚠ NÃO "ARREDONDE" ESTES NÚMEROS. Cada um deles foi lido do site que a
   cliente tem hoje na tela; mexer em um empurra tudo o que vem depois.
   ========================================================================= */

/* ---- CAPA --------------------------------------------------------------- */
/* MEDIDO no site no ar, e é mais do que "uma foto de tela cheia":

   1. a ALTURA é a da janela menos o cabeçalho (800px numa janela de 900, 1100
      numa de 1200), cravada em PIXEL pelo `site.js` e refeita a cada `resize`;
   2. o miolo da capa — foto, legenda e seta — é `position: fixed`, logo abaixo
      do cabeçalho: ele NÃO rola. Quem rola é o resto do site, que passa por
      cima dele;
   3. e esse miolo ainda desliza para cima a 0,4 da velocidade da rolagem, até
      travar quando a capa já foi coberta.

   É a soma dos três que dá o efeito de "o banner vai diminuindo" quando se
   desce a tela. Sem o `fixed`, a capa sobe junto com a página e o efeito some.

   ⚠ SEM VÉU ESCURO: a foto já é uma cidade à noite, e a referência não põe
   camada nenhuma sobre ela. */
.capa {
    position: relative;
    height: calc(100vh - 100px);
}

/* O MIOLO FIXO. `top` acompanha a altura do cabeçalho (100px, ou 60px depois
   que ele encolhe); quem ajusta os dois — altura, `top` e o deslizar — é o
   `site.js`, com os valores medidos. Os daqui são o ponto de partida, para a
   capa já nascer certa antes de o JS rodar. */
.capa__fundo {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 100px;
    left: 0;
    right: 0;
    height: calc(100vh - 100px);
    overflow: hidden;
    /* ⚠ SÓ A COR DE FUNDO. A foto vem das camadas `.capa__foto`, montadas com
       os banners do painel (ver `pages/home.php`).

       Aqui havia uma foto local (`img/hero-adicon.webp`), de quando a capa não
       vinha do painel. O ARQUIVO NÃO EXISTE MAIS na pasta — conferido em
       2026-09-21: 404 no sandbox — e ninguém notou, porque o `style` inline da
       própria `.capa__fundo` sempre o substituía. Ao mover a foto daqui para
       as camadas, ele passaria a ser pedido de verdade: um 404 em toda visita
       à home. Fundo sem foto cadastrada é a cor escura, e só. */
    background: #282828;
    color: var(--cor-clara);
    text-align: center;
    will-change: transform;
}

/* O `top` ACOMPANHA O CABEÇALHO, e por CSS: assim ele desliza junto com o
   encolher/crescer da barra (mesmos 0,4s), sem depender de evento de rolagem. */
.capa__fundo {
    transition: top .4s ease;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .capa,
    .capa__fundo {
        height: calc(100vh - 200px);
    }

    .capa__fundo {
        top: 200px;
    }
}

.cabecalho--fixo + main .capa__fundo {
    top: 60px;
}

/* ⚠ NO CELULAR NÃO EXISTE EFEITO NENHUM NA CAPA. Medido: abaixo de 992 o
   `.slider-parallax-inner` da referência sai de `fixed` para `relative`, a
   foto sobe junto com a página, a legenda não desliza nem desbota e o
   `slider-parallax-visible` some da classe. É a MESMA largura em que o
   cabeçalho deixa de grudar — no celular o tema não anima o topo.
   Quem apaga o `transform`/`opacity` que o JS escreveu é o próprio site.js. */
@media (max-width: 991px) {
    .capa,
    .capa__fundo {
        /* 101 = 100 do cabeçalho + a borda, que abaixo de 992 soma na altura
           (ver `.cabecalho` em style.css). O JS crava o pixel; isto é só o
           ponto de partida. */
        height: calc(100vh - 101px);
    }

    .capa__fundo {
        position: relative;
        top: auto;
        transition: none;
    }
}

/* O RESTO DO SITE PASSA POR CIMA DA CAPA FIXA — é o `#content` da referência,
   que tem fundo branco e vem depois do slider. Sem este fundo, a capa fixa
   apareceria por trás das seções que não têm cor de fundo própria. */
.miolo {
    position: relative;
    z-index: 1;
    background: var(--cor-branco);
}

/* MEDIDO: no site no ar o `.container` da capa ocupa a ALTURA INTEIRA dela
   (1170x787 numa janela de 887), e a legenda é que fica centrada dentro dele. */
.capa__fundo > .container {
    display: flex;
    align-self: stretch;
    align-items: center;
    height: 100%;
}

/* ---- CAMADAS DE FOTO DA CAPA (banners do painel) ------------------------ */
/* CADA BANNER É UMA CAMADA EMPILHADA dentro de `.capa__fundo`, e não o
   `background` dele — é o que permite o rodízio sem tocar na peça que o
   parallax move. Absolutas, saem do fluxo: o `display: flex` do pai continua
   valendo só para a legenda, que é o que o centraliza. */
.capa__fotos {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.capa__foto {
    position: absolute;
    inset: 0;
    background-image: var(--foto);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1s ease;
}

.capa__foto--ativa {
    opacity: 1;
}

/* NO CELULAR VALE A ARTE DE CELULAR, quando a cliente cadastrou uma. A troca é
   aqui, no CSS, e não no JavaScript: assim o navegador baixa só a que vale
   para esta largura. Sem `--foto-cel`, a de desktop serve as duas. */
@media (max-width: 767px) {
    .capa__foto {
        background-image: var(--foto-cel, var(--foto));
    }
}

/* QUEM PEDE "MENOS ANIMAÇÃO" NÃO VÊ A TROCA DESLIZAR — a foto muda seca. */
@media (prefers-reduced-motion: reduce) {
    .capa__foto {
        transition: none;
    }
}

/* ---- SETAS E BOLINHAS DA CAPA (só com 2 ou mais banners) ----------------- */
/* DESENHO DA `casa-vale-imobiliaria`: círculo branco a 85% com a seta na cor da
   marca. Fundo próprio porque a arte vem da cliente e pode ser clara ou escura
   — seta branca sobre foto clara some. */
.capa__nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    color: var(--cor-acento);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background var(--transicao);
}

.capa__nav:hover,
.capa__nav:focus-visible {
    background: var(--cor-branco);
}

.capa__nav svg {
    height: 18px;
    width: auto;
}

/* NA PONTA DA FILA A SETA FICA APAGADA — as setas NÃO dão a volta (o rodízio
   automático, sim). O `:hover` é neutralizado junto: sem isso o fundo ainda
   clarearia, prometendo um clique que não acontece. */
.capa__nav:disabled {
    opacity: .55;
    cursor: default;
}

.capa__nav:disabled:hover {
    background: rgba(255, 255, 255, .85);
}

.capa__nav--anterior {
    left: 18px;
}

.capa__nav--proxima {
    right: 18px;
}

/* AS BOLINHAS FICAM ACIMA DA SETA DE ROLAR, que é do site no ar e mora a 20px
   do pé da capa, com 32px de altura. 64px deixa as duas sem encostar. */
.capa__pontos {
    position: absolute;
    left: 50%;
    bottom: 64px;
    z-index: 3;
    display: flex;
    gap: 8px;
    transform: translateX(-50%);
}

.capa__ponto {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .5);
    cursor: pointer;
    transition: background var(--transicao), transform var(--transicao);
}

.capa__ponto.ativo {
    background: var(--cor-branco);
    transform: scale(1.25);
}

/* NO CELULAR AS SETAS ENCOLHEM e chegam mais perto da borda — em 310px de
   container, duas de 44px comiam um terço da foto. */
@media (max-width: 767px) {
    /* BANNER SEM ARTE DE CELULAR SAI DA PISTA AQUI, e a bolinha dele vai
       junto — senão sobraria bolinha levando a lugar nenhum. Ver a nota em
       `pages/home.php`: a regra só vale quando existe alguma arte de celular
       cadastrada. */
    .capa__foto--so-desktop,
    .capa__ponto--so-desktop {
        display: none;
    }

    /* SOBROU UM BANNER SÓ NO CELULAR: não há carrossel aqui, então setas e
       bolinhas somem. No desktop tudo continua. */
    .capa__fotos--celular-unico ~ .capa__nav,
    .capa__fotos--celular-unico ~ .capa__pontos {
        display: none;
    }

    .capa__nav {
        width: 34px;
        height: 34px;
    }

    .capa__nav svg {
        height: 14px;
    }

    .capa__nav--anterior {
        left: 8px;
    }

    .capa__nav--proxima {
        right: 8px;
    }

    .capa__pontos {
        bottom: 58px;
    }
}

/* A LEGENDA FICA ACIMA DAS FOTOS. `position: relative` sem deslocamento não
   move nada; só cria o contexto de empilhamento. */
.capa__fundo > .container {
    position: relative;
    z-index: 1;
}

/* A SETA NÃO PRECISA DE REGRA AQUI: ela já é `position: absolute` com
   `z-index: 3` mais abaixo, e 3 é maior que a camada das fotos. */

/* MEDIDO: a legenda é uma caixa de no máximo 800px, centrada na horizontal e
   na vertical, com sombra de texto em preto a 15%. */
.capa__conteudo {
    width: 100%;
    max-width: 800px;
    margin-inline: auto;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
}

/* MEDIDO: Raleway 64/64, peso 700, CAIXA ALTA, 2px entre letras, 30px até o
   nome da empresa. A quebra depois de "ao" é um <br> no HTML da referência —
   está no `home.php`, e não aqui, porque é onde a frase é escrita. */
.capa__saudacao {
    margin: 0 0 30px;
    font-family: var(--fonte-titulo);
    font-size: 64px;
    font-weight: 700;
    line-height: 64px;
    letter-spacing: 2px;
    color: var(--cor-clara);
    text-transform: uppercase;
}

/* MEDIDO: Raleway 30/45 no peso 300 (é o mais leve da página). */
.capa__titulo {
    margin: 0;
    font-family: var(--fonte-titulo);
    font-size: 30px;
    font-weight: 300;
    line-height: 45px;
    color: var(--cor-clara);
}

@media (max-width: 767px) {
    .capa__saudacao {
        margin-bottom: 0;
        font-size: 36px;
        line-height: 36px;
    }
}

@media (max-width: 479px) {
    .capa__saudacao {
        font-size: 28px;
        line-height: 28px;
    }
}

/* MEDIDO: a seta que convida a rolar fica a 20px do pé da capa, com 32px de
   traço em branco, e repete a animação `fadeInDown` do animate.css sem parar —
   ou seja, ela reaparece caindo de cima a cada segundo. */
.capa__seta {
    position: absolute;
    left: 50%;
    bottom: 20px;
    z-index: 3;
    width: 32px;
    height: 32px;
    margin-left: -16px;
    line-height: 48px;
    text-align: center;
    color: var(--cor-branco);
}

.capa__seta svg {
    height: 32px;
    width: auto;
    animation: capa-seta 1s ease infinite;
}

@keyframes capa-seta {
    from { opacity: 0; transform: translate3d(0, -100%, 0); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .capa__seta svg { animation: none; }
}

/* MEDIDO: abaixo de 768 a referência ESCONDE a seta (`display: none`). De 768
   para cima ela aparece, e no mesmo lugar dos dois lados (361/748 numa janela
   de 768x800). */
@media (max-width: 767px) {
    .capa__seta {
        display: none;
    }
}

/* ---- FRASE DE POSICIONAMENTO -------------------------------------------- */
/* MEDIDO: 80px de respiro depois da capa (é o respiro do miolo do site, que
   também dá os 80px entre o último cartão e o rodapé) e 50px depois da frase,
   antes da faixa escura. Os 50px estão como RESPIRO da seção, e não como
   margem do bloco de título, porque margem do último filho escaparia do
   container e se somaria à da faixa — dando 60px em vez de 110px. */
.sobre {
    padding: 80px 0 50px;
}

.sobre .titulo-bloco {
    margin-bottom: 0;
}

/* MEDIDO: Lato 29px com linha de 43,5px, peso 500 (a família não tem 500, e
   tanto lá como aqui o navegador desenha em 400), preto, numa caixa de 700px
   centrada, 10px abaixo do topo do bloco. */
.chamada {
    display: block;
    max-width: 700px;
    margin: 10px auto 0;
    font-size: 29px;
    font-weight: 500;
    line-height: 43.5px;
    color: #000;
}

/* ---- FAIXAS ESCURAS ----------------------------------------------------- */
/* MEDIDO: fundo #282828 com a foto POR CIMA em tamanho natural, centrada na
   horizontal e SEM repetir — a foto não cobre a faixa inteira, e é o #282828
   que aparece no resto. `background-attachment: fixed` é o que faz a foto ficar
   parada enquanto a faixa passa.

   ⚠ NÃO É `cover`, e não tem véu.

   O `50% 50%` daqui é só o valor de partida: quem posiciona a foto é o
   `site.js`, com a MESMA conta do parallax da referência
   (`0.3 * topo_da_faixa - 51.15`). É essa conta que decide qual pedaço do
   prédio aparece em cada altura da rolagem — sem ela a faixa mostra um trecho
   mais claro da foto que o do site no ar. */
.faixa {
    position: relative;
    margin-top: 60px;
    padding: 80px 0;
    background-color: var(--cor-escura);
    background-image: url('../img/gestao-administrativa.webp?v=1788982814');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--cor-clara);
    overflow: hidden;
}

/* MEDIDO: na faixa escura o bloco de título ganha sombra de texto em preto a
   10%, o h2 sai em branco e o traço embaixo dele em branco a 40%. */
.faixa .titulo-bloco {
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .1);
}

.faixa .titulo-bloco__titulo {
    color: var(--cor-branco);
}

.faixa .titulo-bloco::after {
    border-top-color: rgba(255, 255, 255, .4);
}

.faixa .titulo-bloco__subtitulo {
    color: var(--cor-clara);
}

/* MEDIDO: a lista fica 24,5px para dentro, com o texto CENTRALIZADO em
   Lato 17px/22,1px e 5px entre itens; 30px até o traço. É a centralização que
   faz as frases longas quebrarem no meio — e é assim no site no ar. */
.faixa__lista {
    margin: 0 0 30px 24.5px;
    padding: 0;
    list-style: none;
    font-size: 17px;
    line-height: 22.1px;
}

.faixa__lista li {
    margin: 5px 0;
}

/* O MARCADOR É UM ● NA FRENTE DO TEXTO, como na referência — só que aqui ele
   é CSS, e não um caractere digitado dentro da frase. Desenha igual; a
   diferença é que o leitor de tela não fala "bolinha" e o copiar-e-colar não
   leva o símbolo junto. */
.faixa__lista li::before {
    content: '● ';
}

/* MEDIDO no "Solicite um orçamento": a caixa é METADE da largura do container
   (`.call_to_action` do site no ar tem `width: 50%`), centrada — 570px em 1440,
   470px em 992, 360px em 768. Borda de 2px em branco a 40%, canto de 3px,
   respiro 24/34, Raleway 22/22 no peso 600 com 1px entre letras, CAIXA ALTA, e
   o texto em branco a 50% — sim, meio transparente, é o que a referência
   desenha. */
.botao-cta {
    display: block;
    width: 50%;
    margin: 0 auto 5px;
    padding: 24px 34px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-radius: 3px;
    background: transparent;
    color: rgba(255, 255, 255, .5);
    font-family: var(--fonte-titulo);
    font-size: 22px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    transition: border-color var(--transicao), color var(--transicao);
}

.botao-cta:hover {
    border-color: var(--cor-branco);
    color: var(--cor-branco);
}

.botao-cta__rotulo {
    display: inline-block;
}

/* MEDIDO: o texto de apoio é a ÚNICA aplicação da Crete Round no site — 14px
   com 1px entre letras e 10px de respiro em cima. Ela é uma serifada
   inclinada, e é isso que dá o ar "escrito à mão" da linha.

   ⚠ `text-transform: none` NÃO É ENFEITE: sem ele o texto herda a caixa alta do
   botão, fica 53px mais largo e deixa de ser o desenho da referência.
   E o `font-style` fica NORMAL de propósito: o arquivo que servimos já é o
   itálico da família (é o único que existe), então pedir itálico aqui faria o
   navegador inclinar de novo o que já está inclinado. */
.botao-cta__apoio {
    display: block;
    margin-top: 10px;
    font-family: var(--fonte-destaque);
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    line-height: 14px;
    letter-spacing: 1px;
    text-transform: none;
}

/* MEDIDO: abaixo de 768 o site no ar ESCONDE este botão (`hidden-xs`). No
   celular quem quer orçamento usa o menu ou desce até o formulário. */
@media (max-width: 767px) {
    .botao-cta {
        display: none;
    }
}

/* ---- SERVIÇOS ----------------------------------------------------------- */
/* MEDIDO: 80px de distância da faixa escura + 80px de respiro interno antes do
   título, e 80px do título até os cartões. */
.servicos-secao {
    margin-top: 80px;
    padding-top: 80px;
}

/* MEDIDO: nestas duas seções o bloco de título fica FORA do container, na
   largura da janela — é o que faz o subtítulo quebrar em 375px no celular, e
   não em 280. E o respiro até o conteúdo é diferente em cada uma: 80px em
   "Serviços", 50px em "Contato". */
.servicos-secao > .titulo-bloco {
    margin-bottom: 80px;
}

.contato-secao > .titulo-bloco {
    margin-bottom: 50px;
}

/* MEDIDO: 50px entre as fileiras E 50px depois da última — no site no ar cada
   coluna carrega uma margem de 50px embaixo, inclusive as da fileira de baixo,
   e é essa margem que separa os cartões do divisor com a estrela. */
.servicos {
    display: flex;
    flex-wrap: wrap;
    column-gap: 4%;
    row-gap: 50px;
    padding-bottom: 50px;
}

/* MEDIDO: três cartões de 30,63% na primeira fileira e dois de 43,33% na
   segunda — os dois de baixo NÃO chegam na borda direita, e isso é da grade do
   tema, não descuido. */
.servico {
    width: 30.63%;
    text-align: center;
}

.servico--largo {
    width: 43.33%;
}

@media (max-width: 767px) {
    .servico,
    .servico--largo {
        width: 100%;
    }
}

/* MEDIDO: círculo de 96px no vermelho #7A2B24 com o traço de 42px em branco, e
   30px até o título. No `:hover` o círculo vai para #333 e um anel de 2px
   cresce em volta (`fbox-effect` do tema). */
.servico__icone {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 96px;
    height: 96px;
    margin: 0 auto 30px;
    border-radius: 50%;
    background: var(--cor-acento);
    color: var(--cor-branco);
    transition: background-color .3s, color .3s;
}

.servico__icone::after {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    box-sizing: content-box;
    width: 100%;
    height: 100%;
    padding: 3px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--cor-titulo);
    opacity: 0;
    transform: scale(.8);
    transition: transform .3s, opacity .3s;
    pointer-events: none;
}

.servico:hover .servico__icone {
    background: var(--cor-titulo);
}

.servico:hover .servico__icone::after {
    opacity: 1;
    transform: scale(1);
}

.servico__icone svg {
    height: 42px;
    width: auto;
}

/* MEDIDO: título em Raleway 16/24 no peso 700, CAIXA ALTA, 1px entre letras,
   na cor #333; texto em Lato 15/21 na cor #999, 15px abaixo do título. */
.servico__titulo {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 1px;
    color: var(--cor-titulo);
    text-transform: uppercase;
}

.servico__texto {
    margin: 15px 0 0;
    font-size: 15px;
    line-height: 21px;
    color: var(--cor-suave);
}

/* ---- DIVISOR COM ESTRELA ------------------------------------------------ */
/* MEDIDO: 80px depois dos cartões, dois traços de 1px em #EEE ocupando 15% da
   janela cada um, com 20px de folga para a estrela de 18px em #E5E5E5 no meio. */
.divisor {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 80px;
    height: 22px;
    color: var(--cor-linha-cartao);
    overflow: hidden;
}

.divisor::before,
.divisor::after {
    content: '';
    width: 15%;
    height: 1px;
    border-top: 1px solid var(--cor-linha);
}

.divisor::before { margin-right: 20px; }
.divisor::after  { margin-left: 20px; }

.divisor svg {
    height: 18px;
    width: auto;
}

/* ---- DEPOIMENTOS -------------------------------------------------------- */
/* MEDIDO: faixa escura com 200px de respiro em cima e embaixo (é a seção mais
   "arejada" do site) e 60px de distância das vizinhas. */
.faixa--depoimentos {
    margin: 60px 0;
    padding: 200px 0;
    background-image: url('../img/depoimentos.webp?v=1788982820');
}

/* MEDIDO: aqui o título é MENOR que o das outras seções — 20/30 em vez de
   30/45 — e o subtítulo é Lato 20/30 no peso 300. */
.faixa--depoimentos .titulo-bloco__titulo {
    font-size: 20px;
    line-height: 30px;
}

.faixa--depoimentos .titulo-bloco__subtitulo {
    font-size: 20px;
    line-height: 30px;
}

@media (max-width: 767px) {
    .faixa--depoimentos .titulo-bloco__titulo {
        font-size: 19px;
        line-height: 28.5px;
    }

    .faixa--depoimentos .titulo-bloco__subtitulo {
        font-size: 17px;
        line-height: 25.5px;
    }
}

/* CARROSSEL. No site no ar é o flexslider do tema (jQuery): um depoimento por
   vez, na largura toda, trocando sozinho a cada 5s com 600ms de deslize,
   pontinhos embaixo, sem flechas, parando quando o ponteiro está em cima e com
   a altura acompanhando o slide ativo. O `site.js` repete esse
   comportamento — mesmos tempos, sem biblioteca. */
/* MEDIDO: o depoimento é CENTRALIZADO, como todo o resto da faixa. */
.depoimentos {
    position: relative;
    border-radius: 5px;
    text-align: center;
}

.depoimento {
    margin: 0;
}

/* SEM JAVASCRIPT os depoimentos ficam um embaixo do outro, todos visíveis —
   nenhum fica escondido esperando um slide que não vai virar. A classe
   `--carrossel` é posta pelo `site.js`, e é ela que liga o deslize. */
.depoimento + .depoimento {
    margin-top: 40px;
}

.depoimentos--carrossel {
    overflow: hidden;
}

/* ⚠ O `overflow: hidden` FICA NA CAIXA DE FORA, NUNCA NO TRILHO. O trilho é o
   elemento que se desloca (`translateX`), e a área de corte anda junto com ele:
   com o corte aqui, ao ir para o segundo depoimento a caixa de corte ia parar em
   cima do primeiro e o texto do segundo — que é o que aparece na tela — ficava
   inteiro FORA dela, invisível. E `getBoundingClientRect()` continua devolvendo
   a posição certa nesse caso, então o defeito não aparece em medição: só na
   tela. */
.depoimentos--carrossel .depoimentos__trilho {
    display: flex;
    align-items: flex-start;
    transition: transform .6s ease, height .6s ease;
}

.depoimentos--carrossel .depoimento {
    flex: 0 0 100%;
}

.depoimentos--carrossel .depoimento + .depoimento {
    margin-top: 0;
}

/* MEDIDO: Lato 18px com linha de 27px, centralizado, na cor #EEE. */
.depoimento__texto {
    margin: 0;
    font-size: 18px;
    line-height: 27px;
    color: var(--cor-clara);
}

/* MEDIDO: assinatura 15px abaixo do texto, Lato 13/19,5 no peso 700, CAIXA
   ALTA, precedida de um travessão; embaixo, a origem em 12/18 na cor #999. */
.depoimento__autor {
    margin: 15px 0 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 19.5px;
    color: var(--cor-clara);
    text-transform: uppercase;
}

.depoimento__autor::before {
    content: '– ';
}

.depoimento__autor span {
    display: block;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: var(--cor-suave);
    text-transform: none;
}

/* MEDIDO: os pontinhos ficam 30px abaixo, têm 8px, borda de 1px em branco, e o
   ativo é o único preenchido (os outros ficam com 50% de opacidade). */
.depoimentos__pontos {
    display: flex;
    justify-content: center;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}

.depoimentos__pontos li {
    margin: 0 3px;
}

.depoimentos__ponto {
    display: block;
    width: 8px;
    height: 8px;
    padding: 0;
    border: 1px solid var(--cor-branco);
    border-radius: 50%;
    background: transparent;
    opacity: .5;
    cursor: pointer;
    transition: opacity var(--transicao), background var(--transicao);
}

.depoimentos__ponto[aria-current="true"] {
    background: var(--cor-branco);
    opacity: 1;
}

/* ---- CONTATO ------------------------------------------------------------ */
/* MEDIDO: 80px de respiro antes do título e 80px depois do último cartão,
   antes do rodapé. */
.contato-secao {
    padding: 80px 0;
}

/* `flex-start`: no site no ar as duas colunas flutuam e cada uma tem a altura
   do próprio conteúdo. Sem isto a coluna do mapa estica para acompanhar a do
   formulário (que é mais alta), e sobra um vão embaixo do mapa. */
.contato {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 4%;
    margin-bottom: 50px;
}

.contato__formulario,
.contato__mapa {
    width: 48%;
}

@media (max-width: 767px) {
    .contato__formulario,
    .contato__mapa {
        width: 100%;
    }

    .contato__formulario {
        margin-bottom: 50px;
    }
}

/* MEDIDO: "Fale conosco" em Raleway 24/36 no peso 600 na cor #444, com uma
   linha pontilhada saindo dele até a borda da coluna — a linha é a imagem
   `dotted.png` (10x10) repetida na horizontal, e o fundo branco do título é o
   que a interrompe. Mesmo arquivo do site no ar, agora servido daqui. */
.fancy-titulo {
    margin: 0 0 30px;
    background: url('../img/dotted.png?v=1788975930') repeat-x 50% 50%;
}

.fancy-titulo h3 {
    display: inline-block;
    margin: 0;
    padding-right: 15px;
    background: var(--cor-branco);
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
    color: var(--cor-titulo-h);
}

@media (max-width: 767px) {
    .fancy-titulo h3 {
        font-size: 20px;
        line-height: 30px;
    }
}

/* MEDIDO: o formulário tem 30px de margem embaixo (é o que separa a coluna do
   formulário dos cartões, junto com os 50px da fileira). */
.form-lead {
    margin: 0 0 30px;
}

/* MEDIDO: 410px de altura, a mesma da referência. A div é o mapa em JavaScript
   (API do Google, com os botões "Mapa | Satélite" e o zoom); o iframe é a
   reserva de quando não há chave cadastrada. Ver `home.php` e `site.js`. */
.contato__mapa .mapa,
.contato__mapa iframe {
    display: block;
    width: 100%;
    height: 410px;
    border: 0;
}

/* ---- CARTÕES DE CONTATO ------------------------------------------------- */
/* MEDIDO: três cartões brancos de 30,63% com borda de 1px em #E5E5E5, canto de
   5px e respiro 68/30/30 — o respiro de cima é grande porque o ícone fica
   PARA FORA do cartão, 48px acima da borda. */
/* `flex-start` NÃO É DETALHE: sem ele os três cartões esticam até a altura do
   mais alto (o do telefone), e no site no ar cada um tem a altura do próprio
   conteúdo — 171px os das pontas, 262px o do meio. */
.cartoes {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 4%;
}

.cartao {
    position: relative;
    width: 30.63%;
    margin: 48px 0 50px;
    padding: 68px 30px 30px;
    border: 1px solid var(--cor-linha-cartao);
    border-radius: 5px;
    background: var(--cor-branco);
    text-align: center;
}

/* MEDIDO: empilhados, os cartões ficam a 50px UM DO OUTRO (e a 98px do mapa,
   como na fileira do desktop). No site no ar o respiro de 48px que abre espaço
   para o ícone se FUNDE com os 50px do cartão de cima — margens que se encostam
   colapsam —, e em `flex` isso não acontece: daí o 48 sair de todos menos do
   primeiro. O ícone do segundo cartão em diante cai dentro do vão de 50px. */
@media (max-width: 767px) {
    /* MEDIDO: empilhado, o bloco dos cartões ganha 50px embaixo — a classe
       `nobottommargin` do site no ar é desfeita pelo CSS responsivo dele. */
    .cartoes {
        margin-bottom: 50px;
    }

    .cartao {
        width: 100%;
        margin: 0 0 50px;
    }

    .cartao:first-child {
        margin-top: 48px;
    }
}

/* MEDIDO: o traço tem 84px de altura, na cor da marca, numa caixa de 96px com
   fundo branco — é o fundo branco que "abre" a borda do cartão. */
.cartao__icone {
    position: absolute;
    top: -48px;
    left: 50%;
    width: 96px;
    height: 84px;
    margin-left: -48px;
    background: var(--cor-branco);
    color: var(--cor-acento);
    line-height: 84px;
    text-align: center;
}

.cartao__icone svg {
    height: 84px;
    width: auto;
}

/* MEDIDO: título em Raleway 16/24 no peso 700, CAIXA ALTA, 1px entre letras,
   #333. */
.cartao__titulo {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 1px;
    color: var(--cor-titulo);
    text-transform: uppercase;
}

/* MEDIDO: no cartão do telefone o segundo título ("Whats") vem uma linha de
   21px depois do primeiro bloco — no site no ar essa linha é um <br> solto. */
.cartao__titulo--segundo {
    margin-top: 21px;
}

/* MEDIDO: as linhas do cartão são Raleway 16px com linha de 20,8px no peso
   300 e 1px entre letras, 5px abaixo do título; o texto é #444 e o link, o
   vermelho #7A2B24. */
.cartao__linhas {
    display: block;
    margin-top: 5px;
    font-family: var(--fonte-titulo);
    font-size: 16px;
    font-weight: 300;
    line-height: 20.8px;
    letter-spacing: 1px;
    color: var(--cor-titulo-h);
}

.cartao__linhas a {
    color: var(--cor-acento);
}

.cartao__linhas a:hover {
    color: var(--cor-titulo);
}

/* ===========================================================================
   SEÇÕES QUE VIVEM DO PAINEL
   ---------------------------------------------------------------------------
   Destaques, equipe, dúvidas, índices e redes sociais. NENHUMA delas existe no
   site no ar da cliente — não há o que medir contra. O desenho aqui reaproveita
   o que este site já tem (o `.titulo-bloco` com o traço embaixo, o cartão de
   contato, os dois vermelhos da marca, Lato no corpo e Raleway nos títulos),
   para que uma seção nova pareça deste site, e não colada de outro.

   Enquanto a cliente não ligar o recurso no painel, nada aqui desenha — o HTML
   correspondente nem chega ao navegador.
   ========================================================================= */

/* ---- DESTAQUES (faixa `Sliders` do painel) ------------------------------- */
/* DESENHO DA `casa-vale-imobiliaria` (pedido do Sami, 2026-09-18): uma imagem
   por vez, rolagem NATIVA com encaixe, seta em cada ponta e bolinhas embaixo.

   ⚠ QUEM ROLA É O NAVEGADOR. A pista é uma caixa de rolagem horizontal com
   `scroll-snap-type: x mandatory` — então o arrasto com o dedo já funciona no
   celular sem JavaScript, e as setas só empurram a mesma rolagem. É o que
   torna esta faixa utilizável com o JS desligado ou ainda carregando. */
.sliders-secao {
    padding: 60px 0 0;
}

.sliders__palco {
    position: relative;
}

.sliders__pista {
    display: flex;
    overflow-x: auto;
    /* `mandatory` (e não `proximity`): com proximity, o arrasto que para no
       meio deixa duas imagens cortadas na tela ao mesmo tempo. */
    scroll-snap-type: x mandatory;
    /* A BARRA DE ROLAGEM SOME (Firefox e WebKit): ela apareceria por cima da
       arte, e quem navega por teclado chega pelas setas, que são <button>. */
    scrollbar-width: none;
    border-radius: 5px;
}

.sliders__pista::-webkit-scrollbar {
    display: none;
}

.sliders__item {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
}

.sliders__link {
    display: block;
}

/* PROPORÇÃO FIXA, e não a altura natural de cada arquivo: a arte vem da
   cliente e duas campanhas com proporções diferentes fariam a faixa MUDAR DE
   ALTURA a cada troca, empurrando a página para cima e para baixo. Com a
   proporção travada, o que sobra é cortado (`cover`) e a faixa fica parada.

   TAMANHO A PEDIR PARA QUEM FIZER A ARTE: 1170x390 (desktop) e 768x432
   (celular). */
.sliders__imagem {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 1;
    border-radius: 5px;
    object-fit: cover;
}

/* IMAGEM ÚNICA: sem seta, sem bolinha e sem rolagem — não há para onde ir. */
.sliders__palco--unico .sliders__pista {
    overflow-x: visible;
}

/* AS SETAS FICAM POR DENTRO DA ARTE, uma em cada ponta. Círculo branco com
   sombra, e não o vermelho da marca: a arte vem da cliente e pode ser de
   qualquer cor — uma seta vermelha somiria numa campanha vermelha. */
.sliders__seta {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--cor-branco);
    color: var(--cor-acento);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background var(--transicao), color var(--transicao);
}

.sliders__seta:hover,
.sliders__seta:focus-visible {
    background: var(--cor-acento);
    color: var(--cor-branco);
}

.sliders__seta svg {
    height: 16px;
    width: auto;
}

/* NA PONTA DA FILA A SETA FICA APAGADA, e não some: sumir muda a posição do que
   está do lado e faz a barra "pular" a cada troca. */
.sliders__seta:disabled {
    opacity: .5;
    box-shadow: none;
    cursor: default;
}

.sliders__seta:disabled:hover {
    background: var(--cor-branco);
    color: var(--cor-acento);
}

.sliders__seta--anterior {
    left: 16px;
}

.sliders__seta--proxima {
    right: 16px;
}

.sliders__pontos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

/* A BOLINHA ATIVA ESTICA (vira um traço), em vez de só mudar de cor: numa
   faixa clara, duas bolinhas cinzas de 8px são quase indistinguíveis. */
.sliders__ponto {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: var(--cor-borda);
    cursor: pointer;
    transition: width var(--transicao), background var(--transicao);
}

.sliders__ponto.ativo {
    width: 26px;
    background: var(--cor-acento);
}

@media (max-width: 767px) {
    .sliders-secao {
        padding-top: 40px;
    }

    /* NO CELULAR A FAIXA FICA MAIS ALTA: a arte de celular do painel costuma
       ser mais quadrada que a de desktop.

       ⚠ QUEM CADASTROU SÓ A ARTE DE DESKTOP vai vê-la CORTADA NAS LATERAIS
       aqui — é o preço de manter a campanha visível no celular em vez de
       escondê-la. Cadastrar a versão de celular resolve. */
    .sliders__imagem {
        aspect-ratio: 16 / 9;
    }

    /* AS SETAS FICAM NO CELULAR (pedido do Sami, 2026-09-18). O arrasto é o
       gesto natural aqui, mas quem não arrasta não descobre que há outra
       imagem. Menores e mais perto da borda, para não cobrir o meio da arte. */
    .sliders__seta {
        width: 36px;
        height: 36px;
    }

    .sliders__seta svg {
        height: 13px;
    }

    .sliders__seta--anterior {
        left: 8px;
    }

    .sliders__seta--proxima {
        right: 8px;
    }

    .sliders__pontos {
        margin-top: 16px;
    }
}

/* ---- EQUIPE -------------------------------------------------------------- */
.equipe-secao {
    padding: 80px 0 30px;
}

.equipe__grupo {
    margin: 0 0 25px;
    font-family: var(--fonte-titulo);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--cor-titulo);
    text-align: center;
    text-transform: uppercase;
}

/* ⚠ A COLUNA TEM LARGURA MÁXIMA (270px) E O CONJUNTO É CENTRADO — e não
   `1fr`, que estica a coluna até ocupar a largura toda. Com `1fr`, DUAS pessoas
   cadastradas viravam duas colunas de meia tela cada, com a foto de 270px
   perdida no meio de cada metade e um buraco no centro da seção. Assim o cartão
   tem sempre o mesmo tamanho, independente de quantas pessoas a cliente
   cadastrar, e a fileira se agrupa no meio: 4 por linha em 1170, 3 em 970,
   2 em 750, 1 no celular. */
.equipe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 270px));
    justify-content: center;
    gap: 40px 30px;
    margin-bottom: 50px;
}

.pessoa {
    text-align: center;
}

.pessoa__foto {
    display: block;
    width: 100%;
    max-width: 270px;
    height: auto;
    margin: 0 auto 18px;
    border-radius: 5px;
    aspect-ratio: 1;
    object-fit: cover;
}

/* SEM FOTO NO CADASTRO: caixa do mesmo tamanho, com o contorno de uma pessoa —
   a fileira continua alinhada. */
.pessoa__foto--vazia {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cor-linha);
    color: #bbbbbb;
}

.pessoa__foto--vazia svg {
    height: 64px;
    width: auto;
}

.pessoa__nome {
    margin: 0;
    font-family: var(--fonte-titulo);
    font-size: 18px;
    font-weight: 600;
    color: var(--cor-titulo);
}

.pessoa__cargo {
    margin: 4px 0 0;
    font-size: 15px;
    color: var(--cor-suave);
}

.pessoa__creci {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--cor-suave);
}

.pessoa__contatos {
    display: flex;
    gap: 14px;
    justify-content: center;
    margin: 12px 0 0;
}

.pessoa__contato {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--cor-linha);
    color: var(--cor-acento);
    transition: background var(--transicao), color var(--transicao);
}

.pessoa__contato svg {
    height: 16px;
    width: auto;
}

.pessoa__contato:hover {
    background: var(--cor-acento);
    color: var(--cor-branco);
}

/* ---- PERGUNTAS FREQUENTES ------------------------------------------------ */
.faq-secao {
    padding: 80px 0 30px;
}

.faq {
    max-width: 860px;
    margin: 0 auto 50px;
}

.faq__item {
    border: 1px solid var(--cor-linha-cartao);
    border-radius: 5px;
    margin-bottom: 12px;
    background: var(--cor-branco);
}

.faq__pergunta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    font-family: var(--fonte-titulo);
    font-size: 17px;
    font-weight: 600;
    color: var(--cor-titulo);
    cursor: pointer;
    list-style: none;
}

/* O TRIÂNGULO PADRÃO DO <details> SAI (aqui a seta é nossa, e gira). O
   ::-webkit-details-marker é o mesmo em Safari/iOS, que ignora o `list-style`. */
.faq__pergunta::-webkit-details-marker {
    display: none;
}

.faq__icone svg {
    height: 18px;
    width: auto;
    color: var(--cor-acento);
}

.faq__seta {
    margin-left: auto;
    line-height: 0;
    transition: transform var(--transicao);
}

.faq__seta svg {
    height: 16px;
    width: auto;
    color: var(--cor-suave);
}

.faq__item[open] .faq__seta {
    transform: rotate(180deg);
}

.faq__resposta {
    padding: 0 20px 18px 50px;
    font-size: 16px;
    line-height: 26px;
    color: var(--cor-texto);
}

/* ---- ÍNDICES ------------------------------------------------------------- */
/* UM CARTÃO POR ÍNDICE, como na Inova/casa-vale/Facilitta, com os tokens
   daqui: cartão branco de borda fina e canto de 5px, Raleway no nome e Lato
   nos números. A seção não existe no site no ar — não há o que medir contra. */
.indices-secao {
    padding: 80px 0 30px;
}

.indices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 330px));
    justify-content: center;
    gap: 30px;
    margin-bottom: 50px;
}

.indice {
    padding: 26px 24px;
    border: 1px solid var(--cor-linha-cartao);
    border-radius: 5px;
    background: var(--cor-branco);
    text-align: center;
}

.indice__icone {
    display: block;
    margin-bottom: 12px;
    line-height: 0;
    color: var(--cor-acento);
}

.indice__icone svg {
    height: 34px;
    width: auto;
}

.indice__nome {
    margin: 0;
    font-family: var(--fonte-titulo);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--cor-titulo);
    text-transform: uppercase;
}

.indice__ref {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--cor-suave);
}

.indice__desc {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--cor-suave);
}

/* O VALOR DO ÍNDICE (quando cadastrado) é o número grande do cartão — os
   percentuais embaixo são a leitura fina. */
.indice__valor {
    margin: 14px 0 0;
    font-family: var(--fonte-titulo);
    font-size: 26px;
    font-weight: 700;
    color: var(--cor-titulo);
}

.indice__numeros {
    display: flex;
    justify-content: center;
    gap: 6%;
    margin: 18px 0 0;
}

.indice__numeros dt {
    font-size: 12px;
    letter-spacing: .5px;
    color: var(--cor-suave);
    text-transform: uppercase;
}

.indice__numeros dd {
    margin: 4px 0 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--cor-texto);
    font-variant-numeric: tabular-nums;
}

/* ALTA E QUEDA EM CORES DIFERENTES — e não o vermelho da marca, que num site
   cuja cor principal já é vermelha não distinguiria nada. São os mesmos tons
   dos sites irmãos. */
.indice__numeros dd.is-positivo {
    color: #1c7c3f;
}

.indice__numeros dd.is-negativo {
    color: #b3261e;
}

/* ---- FEED DE INSTAGRAM / FACEBOOK ---------------------------------------- */
/* MECANISMO DA `inova-administracao-imobiliaria` (ver o partial e o
   redes-feed.js), com os tokens daqui. Até 3 posts, grade; de 4 em diante,
   carrossel de 3 por vez. */
.feed-secao {
    padding: 80px 0 30px;
}

/* DUAS REDES SEGUIDAS: sem isto os dois respiros se somam. */
.feed-secao + .feed-secao {
    padding-top: 0;
}

.feed {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 380px));
    justify-content: center;
    align-items: start;
    gap: 30px;
    margin-bottom: 20px;
}

.feed__palco {
    position: relative;
    max-width: 1170px;
    margin: 0 auto 20px;
}

.feed__pista {
    display: flex;
    align-items: flex-start;   /* CADA POST COM A SUA ALTURA, SEM ESTICAR */
    gap: 30px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.feed__pista::-webkit-scrollbar {
    display: none;
}

.feed__slide {
    flex: 0 0 calc((100% - 60px) / 3);
    min-width: 0;
    scroll-snap-align: start;
}

.feed__item {
    position: relative;
    container-type: inline-size;
    min-width: 0;
}

/* CARTÃO DE ALTURA FIXA — todos os posts da mesma rede com a mesma altura. A
   altura do iframe quem dá é a rede, varia de um post para outro e vem com
   sobra; aqui o cartão manda e o excesso é cortado.

   A ALTURA ACOMPANHA A LARGURA (`cqw` = 1% da largura do `.feed__item`, que é
   o container — por isso o cartão é um <div> dentro dele): 150px fixos mais a
   foto em 4:5, o retrato padrão do Instagram. */
.feed__post {
    height: calc(125cqw + 150px);
    overflow: hidden;
    border: 1px solid var(--cor-linha-cartao);
    border-radius: 5px;
    background: var(--cor-branco);
}

/* A BORDA É NOSSA: a do iframe do Instagram sai, senão ficaria dupla. */
.feed__post iframe {
    display: block;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* O EMBED TRAZ LARGURA E MARGEM NO `style` DO PRÓPRIO ELEMENTO
   (min-width:326px; margin:1px) — só `!important` vence. Sem isso ele passa da
   coluna no celular. */
.feed__post > *,
.feed__post iframe {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

/* CARREGANDO — altura reservada e um spinner no meio. O embed fica escondido
   até a rede desenhá-lo: o `<blockquote>` cru é uma caixa com o link "Ver
   post", que não é para ser visto enquanto o post ainda vem. */
.feed__item[data-carregando] {
    min-height: 460px;
    border-radius: 5px;
    background: #f7f7f7;
}

.feed__item[data-carregando] > * {
    visibility: hidden;
}

.feed__item[data-carregando]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid var(--cor-linha-cartao);
    border-top-color: var(--cor-acento);
    border-radius: 50%;
    animation: feed-girar .8s linear infinite;
    /* CADA SPINNER UM POUCO À FRENTE DO ANTERIOR (`--ordem` vem do HTML), para
       não girarem todos em uníssono. O atraso é NEGATIVO: todos já começam
       girando, só que em pontos diferentes da volta. */
    animation-delay: calc(var(--ordem, 0) * -.2s);
}

@keyframes feed-girar {
    to { transform: rotate(360deg); }
}

/* SETAS SEMPRE À VISTA (em tela de toque não há ponteiro para revelá-las),
   por fora dos cartões. Mesmo desenho das setas dos destaques. */
.feed__seta {
    position: absolute;
    top: calc(50% - 26px);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--cor-branco);
    color: var(--cor-acento);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    cursor: pointer;
    transition: background var(--transicao), color var(--transicao);
}

.feed__seta:hover,
.feed__seta:focus-visible {
    background: var(--cor-acento);
    color: var(--cor-branco);
}

.feed__seta svg {
    height: 16px;
    width: auto;
}

.feed__seta:disabled {
    opacity: .45;
    box-shadow: none;
    cursor: default;
}

.feed__seta:disabled:hover {
    background: var(--cor-branco);
    color: var(--cor-acento);
}

.feed__seta--anterior {
    left: -60px;
}

.feed__seta--proxima {
    right: -60px;
}

.feed__pontos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

.feed__pontos[hidden] {
    display: none;
}

.feed__ponto {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: var(--cor-borda);
    cursor: pointer;
    transition: width var(--transicao), background var(--transicao);
}

.feed__ponto.ativo {
    width: 26px;
    background: var(--cor-acento);
}

.feed__link {
    margin: 0 0 50px;
    text-align: center;
}

.feed__link a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--fonte-titulo);
    font-size: 15px;
    font-weight: 600;
    color: var(--cor-acento);
}

.feed__link svg {
    height: 16px;
    width: auto;
}

/* AS SETAS ENTRAM PARA DENTRO quando não há margem sobrando ao lado do palco. */
@media (max-width: 1300px) {
    .feed__seta--anterior {
        left: 6px;
    }

    .feed__seta--proxima {
        right: 6px;
    }
}

@media (max-width: 1024px) {
    .feed__slide {
        flex-basis: calc((100% - 30px) / 2);
    }
}

@media (max-width: 767px) {
    .feed__slide {
        flex-basis: 100%;
    }

    .feed {
        grid-template-columns: minmax(0, 380px);
        gap: 20px;
    }
}

/* ---- UNIDADES / FILIAIS -------------------------------------------------- */
/* CENTRADO, ao contrário dos cartões de contato (que são sempre três e ocupam
   a fileira inteira): a cliente pode ter UMA unidade, e um cartão sozinho
   encostado à esquerda parece bloco quebrado. */
.cartoes--unidades {
    justify-content: center;
}

.unidades__titulo {
    margin: 10px 0 0;
    font-family: var(--fonte-titulo);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--cor-titulo);
    text-align: center;
    text-transform: uppercase;
}

/* ---- POPUP --------------------------------------------------------------- */
.popup-painel {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.popup-painel[hidden] {
    display: none;
}

.popup-painel__fundo {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .65);
}

.popup-painel__caixa {
    position: relative;
    max-width: 700px;
    max-height: 90vh;
    overflow: auto;
    border-radius: 5px;
    background: var(--cor-branco);
}

.popup-painel__caixa img {
    display: block;
    width: 100%;
    height: auto;
}

.popup-painel__fechar {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: var(--cor-branco);
    cursor: pointer;
}

.popup-painel__fechar svg {
    height: 14px;
    width: auto;
}

@media (max-width: 767px) {
    .equipe-secao,
    .faq-secao,
    .indices-secao,
    .feed-secao {
        padding-top: 50px;
    }

    .faq__resposta {
        padding-left: 20px;
    }

    /* NO CELULAR OS TRÊS PERCENTUAIS FICAM MAIS APERTADOS, não empilhados:
       lado a lado eles se comparam, que é para isso que estão ali. */
    .indice__numeros {
        gap: 4%;
    }

    .indice__numeros dd {
        font-size: 16px;
    }
}