/* ===========================================================================
   sobre.css — /sobre (pages/sobre.php)
   ---------------------------------------------------------------------------
   MEDIDO NA REFERÊNCIA (empresa.php, 2026-08-21, viewport 1440):

     faixa ............. padding-top 50; fundo é o da página. A referência
                         pinta `var(--bg-page)` na seção, variável que ela
                         nunca declara — fica transparente e o #fafafa do body
                         aparece
     título ............ 20px/500 #4f4f4f, linha 22, margem 12px em cima e 15
                         embaixo, recuado 7px. É o mesmo título miúdo da
                         página de contato
     cartão ............ 1320x527: fundo #fefefe, raio 13, borda 1px #dedede e
                         um fio de 3px em DEGRADÊ no topo (#c19800 → #fae002),
                         respiro 32px 32px 28px. Sem sombra — o
                         `var(--shadow-soft)` dela também não existe
     subtítulo ......... 22,4px/700 em #c19800, 16px até o texto
     parágrafo ......... 15,68px, linha 1,6, 10px de margem embaixo
     grade ............. 1.2fr / 1fr (674 e 562 medidos), gap 18, 20px depois
                         do último parágrafo; uma coluna abaixo de 768
     bloco ............. fundo #fafafa, raio 12, respiro 18px 18px 16px, borda
                         1px rgba(0,0,0,.03)
     título do bloco ... 16px/600 #222, recuado 10px, com um fio de 3x18
                         arredondado em #c19800 encostado à esquerda (top 4)
     item da lista ..... 15,04px, linha 1,5, 8px entre itens, recuado 18px,
                         com marcador redondo de 6px em #fae002 (left 4, top 8)

   O cabeçalho com banner e migalha é o componente compartilhado
   `.cabecalho--interno` (seção 4 do style.css), ligado por $migalhaHeader.

   O QUE SAIU DAQUI: `.sobre-texto`, `.sobre-valores`, `.sobre-equipe`,
   `.sobre-corretor*` e `.sobre-chamada` — blocos da Imofar que a referência
   não tem. Nenhum outro arquivo usava essas classes (só comentários em
   institucional.css e style.css, que ficam como referência histórica).
   =========================================================================== */
.empresa {
    padding-top: 50px;
}

.empresa__titulo {
    margin: 12px 0 15px;
    padding-left: 7px;
    font-size: 20px;
    font-weight: 500;
    line-height: 22px;
    color: #4f4f4f;
}

.empresa__cartao {
    position: relative;
    overflow: hidden;
    padding: 32px 32px 28px;
    background: var(--cor-fundo-alt);
    border: 1px solid #dedede;
    border-radius: var(--raio);
}

/* Fio de 3px no topo, em degradê do amarelo escuro para o amarelo da marca.
   Vai por dentro da borda (daí o `overflow: hidden` acima), como na
   referência. */
.empresa__cartao::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--cor-primaria-escura), var(--cor-primaria));
}

.empresa__subtitulo {
    margin: 0 0 16px;
    font-size: 22.4px;
    font-weight: 700;
    line-height: 24.64px;
    color: var(--cor-primaria-escura);
}

.empresa__cartao p {
    margin: 0 0 10px;
    font-size: 15.68px;
    line-height: 1.6;
    color: var(--cor-texto);
}

.empresa__grade {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 20px;
}

/* MEDIDO: 674 e 562 dentro dos 1254 úteis do cartão — é o 1.2fr/1fr dela,
   que entra a partir de 768. */
@media (min-width: 768px) {
    .empresa__grade {
        grid-template-columns: 1.2fr 1fr;
    }
}

/* SOBROU UM BLOCO SÓ (o "Compromisso com você" saiu a pedido do cliente em
   2026-08-31): sem isto, o `1.2fr 1fr` acima deixava "Por que escolher" com
   55% da largura e uma coluna vazia ao lado. Fica como regra e não como
   mudança no grid porque a grade continua servindo dois blocos se um dia
   voltar a ter dois. */
.empresa__bloco:only-child {
    grid-column: 1 / -1;
}

.empresa__bloco {
    padding: 18px 18px 16px;
    background: var(--cor-fundo-pagina);
    border: 1px solid rgba(0, 0, 0, .03);
    border-radius: 12px;
}

.empresa__bloco h3 {
    position: relative;
    margin: 0 0 10px;
    padding-left: 10px;
    font-size: var(--fs-base);
    font-weight: 600;
    line-height: 1.1;
    color: #222;
}

.empresa__bloco h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 3px;
    height: 18px;
    border-radius: var(--raio-pill);
    background: var(--cor-primaria-escura);
}


.empresa__bloco ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A margem de 8px fica NO ÚLTIMO ITEM TAMBÉM, como na referência — zerar ali
   (e no último parágrafo do bloco ao lado) deixava o cartão 10px mais curto
   que o do site no ar. */
.empresa__bloco li {
    position: relative;
    margin-bottom: 8px;
    padding-left: 18px;
    font-size: 15.04px;
    line-height: 1.5;
    color: var(--cor-texto);
}


/* Marcador redondo amarelo, no lugar do `disc` do navegador. */
.empresa__bloco li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cor-primaria);
}

@media (max-width: 575px) {
    .empresa__cartao {
        padding: 20px;
    }
}