/* ===========================================================================
   SIMULADOR DE CRÉDITO — pages/simulador.php
   ---------------------------------------------------------------------------
   MEDIDO em 2026-09-22, no print do Sami (janela de ~1520 CSS px, escala 1,25)
   e na cadeia de CSS do legado.

   A migalha e o título são o componente compartilhado (bloco 2e do style.css);
   aqui só a vitrine de logos.

   RÉGUA VERTICAL MEDIDA (topo do cabeçalho = 0):

      117,6   topo da caixa cinza da migalha
      161,6   pé da caixa
      182,6   topo do título (20 de margem da caixa)
      285,6   topo da 1ª fileira (33 de linha + 30 do `.page-title` + 40 da caixa)
      398,4   pé do cartão mais alto da 1ª fileira (Caixa)
      415,2   topo da 2ª fileira
      508     pé da 2ª fileira
      530,4   topo da 3ª fileira
      661,6   pé do cartão do Itaú

   GEOMETRIA MEDIDA:

     cartão .... borda 1px #ddd, raio 4, respiro 4, fundo branco — é o
                 `.img-thumbnail` do Bootstrap 3, que embrulha cada logo
     coluna .... 3 por fileira (`col-sm-4`), goteira de 30; a última fileira é
                 de 2 (`col-sm-6`)
     1ª fileira  cartões de 112,8 · 110,4 · 105,6 — cada um do tamanho do SEU
                 logo, porque o cartão é a moldura da imagem, não uma caixa
     2ª fileira  os três com 92,8
     3ª fileira  Itaú 124x131 e UCI 204x127 — os dois logos são PEQUENOS
                 (120 e 200 px de largura natural) e o cartão encolhe até eles,
                 centrado na metade da linha

   ⚠ POR QUE A 2ª FILEIRA É PAREJA NO SITE NO AR, E COMO ISSO FOI FEITO AQUI.
   Lá o Banrisul e o Santander levam `style="height: 93px"` cravado no <img>,
   para emparelhar com o Bradesco — e o resultado é que **os dois saem
   ESTICADOS**: o Santander tem proporção 5,71 no arquivo e sai com 3,67 na
   tela, meio a mais de altura. Medido no print, logo por logo.
   Aqui o mesmo alinhamento sai de um `min-height` no cartão, com o logo
   centrado dentro: a fileira fica pareja e nenhuma marca é deformada.

   ⚠ O RESPIRO ENTRE FILEIRAS É 16,8 E 22,4 no print (o legado usa `<div
   class="row">` VAZIO com `margin-top` de 130 e 115 como calço, e quase nada
   disso chega à tela por causa dos floats). Aqui é um respiro só, de 20.
   =========================================================================== */

.simulador {
    /* O `.article-detail` do legado: caixa #fafafa com respiro de 40 — a mesma
       do /sobre e da página de condomínios, e igualmente INVISÍVEL, porque é o
       fundo da página. */
    padding: 40px;
    background: var(--cor-fundo-pagina);
}

/* ⚠ O TÍTULO DESTA PÁGINA NÃO É O DO COMPONENTE, nem no corpo nem nos degraus.
   Lá ele é um `<h2>`, e quem manda é o `bootstrap.css`: `h2 { font-size: 30px }`
   e `h1..h6 { line-height: 1.1 }`, os dois FORA de media query e depois do
   `styles.css` — então os 24/22/18 que o tema escreve para `h2` nunca chegam à
   tela. O corpo só muda abaixo de 701, onde a própria página crava
   `.h2Simulador { font-size: 17px }` num <style> inline.

   Sem estas regras o título herdaria os degraus do `<h1>` das outras internas
   (24 abaixo de 992, 20 abaixo de 768), que não são os desta página. */
.simulador__titulo {
    margin: 0;
    font-size: 30px;
    line-height: 1.1;
}

@media (max-width: 700px) {
    .simulador__titulo {
        font-size: 17px;
    }
}

.simulador__grade {
    display: grid;
    /* `align-items: start` para o cartão ficar DO TAMANHO do logo, como lá —
       sem isto o grid estica todos até a altura da fileira. */
    align-items: start;
    gap: 20px 30px;
}

.simulador__grade--trio {
    grid-template-columns: repeat(3, 1fr);
}

/* A ÚLTIMA FILEIRA É DE DOIS (`col-sm-6`), e leva o mesmo respiro de 20 que
   separa as outras. */
.simulador__grade--dupla {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 20px;
}

/* A CÉLULA CENTRALIZA O CARTÃO. Faz diferença na última fileira, onde os dois
   logos são menores que a coluna e o cartão encolhe até eles. */
.simulador__celula {
    display: flex;
    justify-content: center;
}

/* O `.img-thumbnail` do Bootstrap 3, medido: borda 1px #ddd, raio 4, respiro 4,
   fundo branco.

   `min-height: 93px` é o que emparelha a segunda fileira — ver a nota do
   esticamento no topo. Nas outras fileiras os cartões passam disso e o valor
   não morde. */
.simulador__cartao {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    min-height: 93px;
    padding: 4px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: var(--cor-branco);
    transition: border-color var(--transicao);
}

/* O SITE NO AR NÃO REAGE AO MOUSE nestes cartões — o `.img-thumbnail` do
   Bootstrap só muda de borda dentro de `a.thumbnail`, que não é o caso lá. Aqui
   a borda acende: é o mínimo para quem usa o site saber que o cartão é um link.
   Apagar estas três linhas devolve a igualdade literal. */
.simulador__cartao:hover {
    border-color: #3333ff;
}

.simulador__cartao img {
    max-width: 100%;
    height: auto;
}

/* MEDIDO no print: rgb(238,238,238). Mesmo fio do /sobre — o `styles.css`
   declara #e4e4e4 e o `bootstrap.css`, que vem depois, repõe #eee. */
.simulador__fio {
    margin: 20px 0 0;
    border: 0;
    border-top: 1px solid #eee;
}

/* ---------------------------------------------------------------------------
   RESPONSIVO — os degraus são os do legado: `col-sm-*` só vale de 768 para
   cima; abaixo disso as colunas são `col-xs-12` e viram linha inteira.
   --------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    .simulador {
        padding: 20px;
    }

    .simulador__grade--trio,
    .simulador__grade--dupla {
        grid-template-columns: 1fr;
    }
}