/* ==========================================================================
   apoiadores.css — a faixa "Apoiadores" (controles/UC_APOIADORES.ascx)
   SDI26 · 21-out-2026

   Arte: Figma, quadro "RODAPÉ BRANCO" (node 303:167) — 3024 x 320, solto na
   página, fora das pranchetas. Fundo #BDBDBD de borda a borda (era o #C8CBD9 da
   arte; trocado a pedido do usuário em 22-out); o conteúdo vai
   no .container da página, como o resto do site (a arte é referência de
   PROPORÇÃO, não de medida — _docs/09, seção 3).

   Um arquivo só para as duas famílias de página: a landing (Bootstrap 5.3 +
   frontend.css) e a Aovivo (Bootstrap 4.6 + aovivo_sdi.css). Só usa tokens
   que as duas declaram: --sdi-preto e --sdi-fonte.
   ========================================================================== */

/* 1 px da arte na tela. A faixa foi desenhada com 3024 de largura, então
   1 px da arte = 100vw / 3024 — travado em 1440 (o teto dos títulos desta casa:
   o .sdi-titulo-display para de crescer perto de 1430) e com piso, para os
   logos não ficarem ilegíveis abaixo de ~1090. */
.sdi-apoiadores {
    --sdi-ap-px: clamp(.36px, 100vw / 3024, .47619px);
    background-color: #BDBDBD;   /* usuário, 22-out (a arte, node 303:167, diz #C8CBD9) — o SVG do Miro tem vazados nesta cor */
    color: var(--sdi-preto);
}

/* Na Aovivo a faixa é o último filho do .dContentPage, e o padding-bottom dele fica
   EMBAIXO dela (guarda o lugar do .rodape-pc) — sem isto ela encostaria no formulário
   de mensagens. A landing não tem .dContentPage: lá quem separa são as seções. */
.dContentPage > .sdi-apoiadores {
    margin-top: 3rem;
}

/* 320 de altura na arte, tudo centrado na vertical */
.sdi-apoiadores-faixa {
    display: flex;
    align-items: center;
    min-height: calc(var(--sdi-ap-px) * 320);
}

/* "Apoiadores": 90 na arte, Regular, -1,8 px (= -0,02em).
   Nas três versões da arte (PT, ENG e ESP) os logos começam no MESMO ponto, qualquer
   que seja o tamanho do título: 663 dos 2446 de largura útil = 27,11%. Por isso é o
   título que reserva a coluna (min-width), e não um vão depois dele — senão o
   "Con el apoyo de" empurraria os logos. O padding-right só segura um vão mínimo
   quando o título passa da coluna, em tela estreita. */
.sdi-apoiadores-titulo {
    flex: none;
    min-width: 27.11%;
    margin: 0;
    padding-right: 1.5rem;
    font-family: var(--sdi-fonte);
    font-size: calc(var(--sdi-ap-px) * 90);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: inherit;
}

/* Os logos: do fim da coluna do título até a margem direita, com os dois vãos iguais
   da arte (517 e 517) — é o space-between. O column-gap só segura um vão mínimo em
   tela estreita. */
.sdi-apoiadores-logos {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sdi-apoiadores-logos li {
    display: flex;
}

/* Cada logo com a ALTURA dele na arte; a largura sai da proporção do SVG.
   Centrar pela caixa da linha já deixa os logos um pouco abaixo do meio das
   maiúsculas do título, como na arte: medido a 1440, 4 px no site e 3,5 na arte. */
.sdi-apoiadores-logos img {
    display: block;
    width: auto;
    max-width: none;
}

.sdi-apoio-meetup {
    height: calc(var(--sdi-ap-px) * 38.97);   /* 314,6 x 38,97 */
}

.sdi-apoio-fullstory {
    height: calc(var(--sdi-ap-px) * 45);      /* 251 x 45 */
}

.sdi-apoio-miro {
    height: calc(var(--sdi-ap-px) * 55);      /* 183 x 55 */
}

/* Celular: o título sobe e os logos ficam numa linha embaixo dele, de borda a
   borda. Se a tela for estreita demais para os três (abaixo de ~330), o último
   desce para a linha seguinte em vez de estourar. */
@media (max-width: 767px) {
    .sdi-apoiadores-faixa {
        flex-direction: column;
        align-items: flex-start;
        row-gap: 1.5rem;
        min-height: 0;
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    .sdi-apoiadores-titulo {
        min-width: 0;
        padding-right: 0;
    }

    .sdi-apoiadores-logos {
        flex: none;
        align-self: stretch;
        flex-wrap: wrap;
        row-gap: 1rem;
    }
}