/* ==================================================
   Pagina Sobre da Show de Imoveis
   Segue a identidade do SITE, medida nas paginas que ja
   estao no ar, nao a do material impresso:
     fundo geral    #F7F8F9      secao de conteudo  #FFFFFF
     texto          #222222      Montserrat peso 300
     titulo secao   35px / 600 / #000 / centralizado / lh 42px
     titulo capa    52px / 600 / branco sobre foto
     subtitulo      16px / 300
     azul da marca  #024059      vermelho  #CE0101
     botao          cantos de 4px, 15px / 500
     largura        1140px
   Ordem: capa, Sobre a Show, Eduardo, visao e missao,
   valores, manifesto, selos, chamada.
   Tudo com prefixo sdi- pra nao esbarrar no tema.

   ATENCAO: as classes utilitarias (.sdi-sub, .sdi-texto,
   .sdi-citacao) levam .sdi-sobre na frente de proposito.
   Sem isso a regra generica ".sdi-sobre p" tem mais peso,
   zera o "margin: auto" e a caixa sai do eixo do titulo.
   ================================================== */

.sdi-sobre {
    --branco: #FFFFFF;
    --fundo: #F7F8F9;
    --texto: #222222;
    --texto-suave: #444B50;
    --vermelho: #CE0101;
    --azul: #024059;
    --azul-claro: #0A5876;
    --borda: #E4E8EB;

    background: var(--fundo);
    color: var(--texto);
    font-family: Montserrat, system-ui, sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.8;
}

.sdi-sobre *,
.sdi-sobre *::before,
.sdi-sobre *::after {
    box-sizing: border-box;
}

.sdi-largura {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 16px;
}

.sdi-secao {
    padding: 50px 0;
    background: var(--fundo);
}

.sdi-secao-branca { background: var(--branco); }

@media (min-width: 768px) {
    .sdi-secao { padding: 70px 0; }
}

/* ---------- tipografia, a mesma das secoes da home ---------- */

.sdi-h2 {
    margin: 0;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.25;
    color: #000;
    text-align: center;
    text-wrap: balance;
}

@media (min-width: 768px) {
    .sdi-h2 { font-size: 35px; line-height: 42px; }
}

.sdi-h3 {
    margin: 0 0 10px;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.35;
    color: #000;
}

.sdi-sobre .sdi-sub {
    max-width: 700px;
    margin: 12px auto 0;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--texto);
    text-align: center;
    text-wrap: balance;
}

.sdi-sobre p { margin: 0 0 16px; }
.sdi-sobre p:last-child { margin-bottom: 0; }

/* ---------- capa com foto, no espirito do hero da home ---------- */

.sdi-capa {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 340px;
    padding: 60px 0;
    background-color: #0B2B3C;
    background-size: cover;
    background-position: center;
    text-align: center;
}

@media (min-width: 768px) {
    .sdi-capa { min-height: 420px; padding: 80px 0; }
}

.sdi-capa h1 {
    margin: 0;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    text-wrap: balance;
}

@media (min-width: 768px) {
    .sdi-capa h1 { font-size: 52px; line-height: 62px; }
}

.sdi-sobre .sdi-capa .sdi-sub {
    margin-top: 16px;
    font-size: 18px;
    color: rgba(255, 255, 255, .88);
}

/* ---------- bloco de duas colunas (Show e Eduardo) ---------- */

.sdi-duas {
    display: grid;
    gap: 26px;
    margin-top: 34px;
    align-items: start;
}

@media (min-width: 900px) {
    .sdi-duas {
        grid-template-columns: 320px minmax(0, 1fr);
        gap: 46px;
    }
}

.sdi-coluna-texto {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.9;
    color: var(--texto);
}

/* a logo vermelha em png, sem fundo. O CRECI nao entra aqui,
   ele ja aparece na linha de numeros logo abaixo. */
.sdi-marca-bloco {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 0 14px;
}

@media (min-width: 900px) {
    .sdi-marca-bloco { align-self: center; padding: 0; }
}

.sdi-marca-bloco img {
    display: block;
    width: 100%;
    max-width: 260px;
    height: auto;
}

/* retrato do fundador */
.sdi-retrato {
    margin: 0;
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: 4px;
    overflow: hidden;
}

.sdi-retrato img {
    display: block;
    width: 100%;
    height: 340px;
    object-fit: cover;
}

@media (min-width: 900px) {
    .sdi-retrato img { height: 380px; }
}

.sdi-retrato figcaption {
    padding: 16px 18px;
    border-top: 1px solid var(--borda);
    font-size: 14px;
    line-height: 1.5;
}

.sdi-retrato strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #000;
}

.sdi-cargo {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--vermelho);
}

/* ---------- numeros ---------- */

.sdi-numeros {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 16px;
    margin-top: 44px;
    padding-top: 36px;
    border-top: 1px solid var(--borda);
    text-align: center;
}

@media (min-width: 900px) {
    .sdi-numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.sdi-numero strong {
    display: block;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--vermelho);
}

@media (min-width: 768px) {
    .sdi-numero strong { font-size: 38px; }
}

.sdi-numero span {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    font-weight: 400;
    color: var(--texto);
}

/* ---------- cartoes de visao e missao ---------- */

.sdi-grade-2 {
    display: grid;
    gap: 20px;
    margin-top: 36px;
}

@media (min-width: 900px) {
    .sdi-grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}

.sdi-cartao {
    padding: 28px 24px;
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
    font-size: 16px;
    line-height: 1.9;
}

@media (min-width: 768px) {
    .sdi-cartao { padding: 34px 32px; }
}

.sdi-tarja {
    display: block;
    width: 40px;
    height: 3px;
    margin-bottom: 18px;
    background: var(--vermelho);
}

/* ---------- valores ---------- */

.sdi-valores {
    display: grid;
    gap: 0;
    margin: 34px 0 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 900px) {
    .sdi-valores { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 30px; }
    /* sao sete, numero impar. O ultimo ocupa a linha inteira em vez
       de deixar um buraco na coluna da direita. */
    .sdi-valores li:last-child { grid-column: 1 / -1; }
}

.sdi-valores li {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin: 0;
    padding: 22px 0;
    border-top: 1px solid var(--borda);
}

/* no celular a lista e unica, entao so a primeira linha tem topo */
@media (max-width: 899px) {
    .sdi-valores li:first-child { border-top: 0; }
    .sdi-valores li:last-child { border-bottom: 1px solid var(--borda); }
}

.sdi-num {
    flex: 0 0 auto;
    min-width: 26px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--vermelho);
}

.sdi-valores h3 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: #000;
}

.sdi-valores p {
    margin: 0;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--texto-suave);
}

/* ---------- manifesto em forma de carta ---------- */

/* a secao escura faz a folha branca aparecer como papel.
   E o mesmo azul da marca, ja usado no rodape e nos botoes. */
.sdi-secao-carta {
    background: var(--azul);
}

.sdi-secao-carta .sdi-h2 {
    color: #fff;
}

.sdi-carta {
    max-width: 740px;
    margin: 36px auto 0;
    padding: 34px 26px;
    background: var(--branco);
    border-radius: 4px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.95;
    color: var(--texto);
    text-align: left;
}

@media (min-width: 768px) {
    .sdi-carta {
        margin-top: 44px;
        padding: 52px 54px;
    }
}

/* papel timbrado: marca de um lado, data do outro */
.sdi-carta-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--borda);
}

/* a proporcao vem travada porque o lazyload do tema troca a
   imagem por um gif de 1x1, e sem isso a caixa fica quadrada
   ate a marca real chegar */
.sdi-carta-marca {
    display: block;
    width: 120px;
    height: auto;
    aspect-ratio: 645 / 80;
    object-fit: contain;
}

.sdi-carta-data {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .06em;
    color: var(--texto-suave);
}

.sdi-carta-vocativo {
    margin: 0 0 22px;
    font-size: 17px;
    font-weight: 600;
    color: #000;
}

.sdi-carta p {
    margin: 0 0 20px;
}

.sdi-carta p:last-child {
    margin-bottom: 0;
}

.sdi-carta-citacao {
    margin: 30px 0;
    padding: 4px 0 4px 22px;
    border-left: 3px solid var(--vermelho);
}

.sdi-carta-citacao p {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
}

@media (min-width: 768px) {
    .sdi-carta-citacao p {
        font-size: 18px;
    }
}

.sdi-carta-grito {
    margin-bottom: 8px !important;
    font-weight: 600;
    color: #000;
}

.sdi-carta-assinatura {
    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px solid var(--borda);
    text-align: right;
}

.sdi-carta-assinatura strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #000;
}

.sdi-carta-assinatura span {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--vermelho);
}

/* ---------- a palavra Show desenhada com a logo ---------- */

/* mesma receita da home: altura em em pra acompanhar o corpo do
   texto, largura automatica pela proporcao do arquivo.
   Os 10px a mais de altura sao divididos em 5 pra cima e 5 pra
   baixo: como a imagem se alinha pela linha de base, crescer a
   altura empurra tudo pra cima, entao o "top" desce 5px. */
.sdi-sobre .sdi-simbolo {
    display: inline-block;
    height: calc(.74em + 10px);
    width: auto;
    vertical-align: baseline;
    position: relative;
    top: calc(.03em + 5px);
    margin-right: .05em;
}

@media (max-width: 767px) {
    .sdi-sobre .sdi-simbolo {
        height: calc(.8em + 10px);
        top: calc(.02em + 5px);
    }
}

/* ---------- selos ---------- */

.sdi-selos-faixa {
    padding: 26px 0;
    background: var(--fundo);
    border-top: 1px solid var(--borda);
}

.sdi-selos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sdi-selos li {
    position: relative;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--texto-suave);
}

.sdi-selos li + li::before {
    content: "";
    position: absolute;
    left: -13px;
    top: 50%;
    width: 4px;
    height: 4px;
    margin-top: -2px;
    border-radius: 50%;
    background: var(--vermelho);
}

/* ---------- chamada final ---------- */

.sdi-faixa {
    padding: 60px 0;
    background-color: #0B2B3C;
    background-size: cover;
    background-position: center;
    text-align: center;
}

@media (min-width: 768px) {
    .sdi-faixa { padding: 80px 0; }
}

.sdi-faixa .sdi-h2 { color: #fff; }

.sdi-sobre .sdi-faixa .sdi-sub {
    color: rgba(255, 255, 255, .88);
    font-size: 18px;
}

.sdi-botoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
}

.sdi-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 30px;
    border: 1px solid #fff;
    border-radius: 4px;
    background: #fff;
    color: var(--azul);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.sdi-botao:hover,
.sdi-botao:focus-visible {
    background: var(--azul-claro);
    border-color: var(--azul-claro);
    color: #fff;
}

.sdi-botao-vazado { background: transparent; color: #fff; }

.sdi-botao-vazado:hover,
.sdi-botao-vazado:focus-visible {
    background: #fff;
    border-color: #fff;
    color: var(--azul);
}

.sdi-sobre a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .sdi-sobre * { transition: none !important; }
}


/* ---------- manifesto fiel a arte (v7) ---------- */
.sdi-sobre .sdi-carta .sdi-carta-honra {
    margin: 26px 0 0;
    padding-top: 18px;
    border-top: 2px solid var(--vermelho);
    display: inline-block;
    font-weight: 600;
    color: #000;
}

.sdi-sobre .sdi-carta .sdi-carta-citacao { margin: 34px 0; }
.sdi-sobre .sdi-carta .sdi-carta-citacao p { font-style: italic; }
.sdi-sobre .sdi-carta .sdi-carta-grito { margin-bottom: 10px !important; }
.sdi-sobre .sdi-carta .sdi-carta-grito-vermelho { font-weight: 500; color: var(--vermelho); }

.sdi-sobre .sdi-carta .sdi-carta-legado {
    padding: 4px 0 4px 22px;
    border-left: 3px solid var(--vermelho);
}

.sdi-sobre .sdi-carta .sdi-carta-legado p { margin: 0 0 6px; }
.sdi-sobre .sdi-carta .sdi-carta-legado-titulo { font-size: 19px; font-weight: 600; color: #000; }
.sdi-sobre .sdi-carta .sdi-carta-legado-destaque { font-size: 19px; font-weight: 600; color: var(--vermelho); margin-bottom: 12px !important; }
.sdi-sobre .sdi-carta .sdi-carta-legado-fecho { font-weight: 600; color: var(--vermelho); }

.sdi-sobre .sdi-carta .sdi-carta-assinatura {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px 24px;
}

.sdi-sobre .sdi-carta .sdi-carta-lema {
    margin: 0;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: #6B7378;
}

.sdi-sobre .sdi-carta .sdi-carta-lema span { margin: 0 6px; color: var(--vermelho); letter-spacing: 0; }

@media (max-width: 599px) {
    .sdi-sobre .sdi-carta .sdi-carta-assinatura { flex-direction: column-reverse; align-items: flex-end; }
}

/* acabamento do manifesto (v7.1) */
.sdi-sobre .sdi-carta .sdi-carta-honra {
    display: block;
    position: relative;
    border-top: 0;
    padding-top: 22px;
}

.sdi-sobre .sdi-carta .sdi-carta-honra::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 64px;
    height: 2px;
    background: var(--vermelho);
}

.sdi-sobre .sdi-carta .sdi-carta-lema span {
    display: inline;
    margin: 0 6px;
    font-size: inherit;
    letter-spacing: 0;
    text-transform: none;
}

.sdi-sobre .sdi-carta p { text-wrap: pretty; }
.sdi-sobre .sdi-carta .sdi-carta-honra,
.sdi-sobre .sdi-carta .sdi-carta-legado p { text-wrap: balance; }

@media (max-width: 599px) {
    .sdi-sobre .sdi-carta .sdi-carta-grito-vermelho br { display: none; }
    .sdi-sobre .sdi-carta .sdi-carta-grito-vermelho { text-wrap: balance; }
    .sdi-sobre .sdi-carta .sdi-carta-legado-titulo,
    .sdi-sobre .sdi-carta .sdi-carta-legado-destaque { font-size: 17px; }
    .sdi-sobre .sdi-carta .sdi-carta-lema { letter-spacing: .2em; }
}
.sdi-sobre .sdi-carta .sdi-carta-lema { white-space: nowrap; }
@media (max-width: 400px) {
    .sdi-sobre .sdi-carta .sdi-carta-lema { letter-spacing: .12em; font-size: 10px; }
}

/* sem palavra sozinha na ultima linha dos textos longos (Sobre a Show e Eduardo) */
.sdi-sobre .sdi-coluna-texto p { text-wrap: pretty; }

/* ---------- "Sobre a Show": so texto, coluna de leitura justificada ----------
   A logo saiu do bloco. O texto fica centralizado em ate 820px e, do tablet pra
   cima, justificado (reto dos dois lados), igual a secao da home. No celular a
   coluna e estreita e o justificado abriria buracos, entao fica a esquerda. */
.sdi-sobre .sdi-texto-unico {
    max-width: 820px;
    margin: 34px auto 0;
}

.sdi-sobre .sdi-texto-unico .sdi-coluna-texto { max-width: none; }

@media (min-width: 768px) {
    .sdi-sobre .sdi-texto-unico .sdi-coluna-texto p {
        text-align: justify;
        text-align-last: left;
        hyphens: auto;
        -webkit-hyphens: auto;
        text-wrap: wrap;
    }
}

/* ---------- valores em cartao grande (mesma pegada de visao e missao) ---------- */
.sdi-sobre .sdi-cartao-valores { margin-top: 24px; }
@media (min-width: 768px) { .sdi-sobre .sdi-cartao-valores { margin-top: 30px; } }

.sdi-sobre .sdi-cartao-valores > p { margin: 0; color: var(--texto); }

.sdi-sobre .sdi-cartao-valores .sdi-valores { margin-top: 18px; }

.sdi-sobre .sdi-cartao-valores .sdi-valores h4 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: #000;
}

/* dentro do cartao a primeira linha nao precisa de traco em cima */
.sdi-sobre .sdi-cartao-valores .sdi-valores li { padding: 20px 0; }
.sdi-sobre .sdi-cartao-valores .sdi-valores li:last-child { border-bottom: 0; padding-bottom: 0; }
@media (min-width: 900px) {
    .sdi-sobre .sdi-cartao-valores .sdi-valores li:nth-child(-n+2) { border-top: 0; }
}
@media (max-width: 899px) {
    .sdi-sobre .sdi-cartao-valores .sdi-valores li:first-child { border-top: 0; }
}

/* manifesto sem papel timbrado e sem assinatura: o texto comeca direto */
.sdi-sobre .sdi-carta > :first-child { margin-top: 0; }
.sdi-sobre .sdi-carta .sdi-carta-legado { margin-bottom: 0; }

/* sem palavra sozinha na ultima linha dos cartoes (visao, missao e valores) */
.sdi-sobre .sdi-cartao p { text-wrap: pretty; }