/* ==========================================================================
   frontend.css — Semana do Design Itaú 2026 (SDI26)
   --------------------------------------------------------------------------
   ESTRUTURA EM CINZA (2026-09-10): layout neutro enquanto a arte não chega.
   Nada aqui é o visual final. O que vale é a estrutura (seções, grid,
   componentes) e as CORES EM VARIÁVEIS: a arte entra trocando tokens,
   não reescrevendo regras.

   Base = desktop; as correções por faixa ficam em to767 / 768to991 /
   992to1199 / 1200to (decisão em _docs/03_css_e_idiomas.md).
   Carregado depois do Bootstrap 5.3.8.

   SEÇÃO CLARA x ESCURA: atributo data-bs-theme="light" | "dark" na <section>.
   O mesmo atributo troca os componentes do Bootstrap e os tokens --sdi-*.
   ========================================================================== */


/* ---------- 1. Fontes ----------
   Pesos lidos do OS/2 de cada .ttf (_docs/03): Black é a mais pesada (900).
   A Heavy declara 850, que navegador antigo descarta no @font-face — por isso
   ela tem família própria, usada via var(--sdi-fonte-heavy). */

@font-face {
    font-family: 'Itau Display Pro';
    src: url('fonts/ItauDisplayPro-Light.eot');
    src: url('fonts/ItauDisplayPro-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/ItauDisplayPro-Light.woff2') format('woff2'),
        url('fonts/ItauDisplayPro-Light.woff') format('woff'),
        url('fonts/ItauDisplayPro-Light.ttf') format('truetype'),
        url('fonts/ItauDisplayPro-Light.svg#ItauDisplayPro-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Itau Display Pro';
    src: url('fonts/ItauDisplayPro-Regular.eot');
    src: url('fonts/ItauDisplayPro-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/ItauDisplayPro-Regular.woff2') format('woff2'),
        url('fonts/ItauDisplayPro-Regular.woff') format('woff'),
        url('fonts/ItauDisplayPro-Regular.ttf') format('truetype'),
        url('fonts/ItauDisplayPro-Regular.svg#ItauDisplayPro-Regular') format('svg');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Itau Display Pro';
    src: url('fonts/ItauDisplayPro-Bold.eot');
    src: url('fonts/ItauDisplayPro-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/ItauDisplayPro-Bold.woff2') format('woff2'),
        url('fonts/ItauDisplayPro-Bold.woff') format('woff'),
        url('fonts/ItauDisplayPro-Bold.ttf') format('truetype'),
        url('fonts/ItauDisplayPro-Bold.svg#ItauDisplayPro-Bold') format('svg');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Itau Display Pro';
    src: url('fonts/ItauDisplayPro-XBold.eot');
    src: url('fonts/ItauDisplayPro-XBold.eot?#iefix') format('embedded-opentype'),
        url('fonts/ItauDisplayPro-XBold.woff2') format('woff2'),
        url('fonts/ItauDisplayPro-XBold.woff') format('woff'),
        url('fonts/ItauDisplayPro-XBold.ttf') format('truetype'),
        url('fonts/ItauDisplayPro-XBold.svg#ItauDisplayPro-XBold') format('svg');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Itau Display Pro';
    src: url('fonts/ItauDisplayPro-Black.eot');
    src: url('fonts/ItauDisplayPro-Black.eot?#iefix') format('embedded-opentype'),
        url('fonts/ItauDisplayPro-Black.woff2') format('woff2'),
        url('fonts/ItauDisplayPro-Black.woff') format('woff'),
        url('fonts/ItauDisplayPro-Black.ttf') format('truetype'),
        url('fonts/ItauDisplayPro-Black.svg#ItauDisplayPro-Black') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Itau Display Pro Heavy';
    src: url('fonts/ItauDisplayPro-Heavy.eot');
    src: url('fonts/ItauDisplayPro-Heavy.eot?#iefix') format('embedded-opentype'),
        url('fonts/ItauDisplayPro-Heavy.woff2') format('woff2'),
        url('fonts/ItauDisplayPro-Heavy.woff') format('woff'),
        url('fonts/ItauDisplayPro-Heavy.ttf') format('truetype'),
        url('fonts/ItauDisplayPro-Heavy.svg#ItauDisplayPro-Heavy') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* ---------- 2. Tokens ----------
   Laranja Itaú = #FF6200 (nunca #EC7000). Só como ACENTO (filetes, elementos
   gráficos): sobre branco o contraste é ~3:1, não serve para texto pequeno. */

:root {
    --sdi-preto: #000;
    --sdi-branco: #fff;
    --sdi-acento: #FF6200;

    /* trilhas — cor sólida do fim de cada nome no print do design (2026-09-11),
       lida a olho: confirmar os hex com o design (_docs/04). Amarelo e laranja
       sobre branco ficam em ~2:1 — só em marcador/filete, nunca em texto. */
    --sdi-trilha-fazer: #0033FF;
    --sdi-trilha-tecnologias: #FFB800;
    --sdi-trilha-marcas: #FF8A00;
    --sdi-trilha-carreiras: #008A20;

    /* papéis — é isto que o data-bs-theme="dark" troca */
    --sdi-fundo: var(--sdi-branco);
    --sdi-texto: var(--sdi-preto);
    --sdi-texto-suave: #666;
    --sdi-linha: #d6d6d6;
    --sdi-linha-media: #BDBDBD;  /* borda da cápsula das abas de dia (arte, node 4:105) */
    --sdi-cinza-arte: #B3B3B3;   /* aba de dia ativa (arte, node 4:105) */
    --sdi-cinza-claro: #D9D9D9;  /* pílula da frase na seção de vídeo (arte, node 4:75) */
    --sdi-superficie: #f2f2f2;   /* caixas de foto vazias, blocos neutros */
    --sdi-erro: #b00020;

    --sdi-fonte: 'Itau Display Pro', 'Open Sans', Arial, sans-serif;
    --sdi-fonte-heavy: 'Itau Display Pro Heavy', 'Itau Display Pro', Arial, sans-serif;
    /* rótulos técnicos ("FIG. 01 / LIVE") pedem mono — fonte a confirmar com o design */
    --sdi-fonte-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --sdi-secao-pad: 5rem;
}

/* ---------- A LARGURA DO CONTAINER, COMO VARIÁVEL (2026-09-23) ----------

   POR QUE ISTO EXISTE. Os vídeos da tipografia viva (hero, rodapé e seção de vídeo)
   sangram para fora do quadro e eram medidos em % da SEÇÃO — ou seja, da janela. Só que
   o `.container` do Bootstrap TRAVA em 1320px. Abaixo de 1400 os dois crescem juntos e o
   desenho se comporta; a partir dali o container para e o vídeo continua crescendo, então
   a tipografia se descola do texto. Medido (achado do usuário, 23/09, em
   _docs/Testes/alinhamento_viva.html): a 1440 o vídeo do hero vale 1,576 containers; a
   2000 já vale 2,189 e a 2472, 2,706 — 72% maior do que a 1440, com o "S" e o "6" saindo
   da tela.

   Com a largura do container numa variável, os vídeos passam a ser medidos NELA. Quando o
   container trava, eles travam junto.

   Os valores repetem as faixas do `.container` do Bootstrap 5.3 — se um dia a versão
   mudar, é aqui que se acerta. Abaixo de 576 o container ocupa a largura toda, e aí
   `100vw` é a medida certa. */
:root {
    --sdi-container: 100vw;
}
@media (min-width:  576px) { :root { --sdi-container:  540px; } }
@media (min-width:  768px) { :root { --sdi-container:  720px; } }
@media (min-width:  992px) { :root { --sdi-container:  960px; } }
@media (min-width: 1200px) { :root { --sdi-container: 1140px; } }
@media (min-width: 1400px) { :root { --sdi-container: 1320px; } }

[data-bs-theme="dark"] {
    --sdi-fundo: var(--sdi-preto);
    --sdi-texto: var(--sdi-branco);
    --sdi-texto-suave: #a3a3a3;
    --sdi-linha: #333;
    --sdi-superficie: #1a1a1a;
    --sdi-erro: #ff6b81;
}


/* ---------- 3. Base ---------- */

html {
    scroll-behavior: smooth;
    /* A BARRA DO TOPO É FIXA e cobre o alto da tela. Sem descontar a altura dela, a
       âncora do menu para o título exatamente embaixo da barra — encostado, às vezes
       escondido. O `scroll-padding-top` avisa o navegador para parar mais cedo, e vale
       para toda âncora da página (menu, links internos, foco pelo teclado).
       A altura vem do js/topo.js, que a publica em --sdi-topo-altura; o valor de reserva
       cobre o instante antes de o JS rodar. Mais 1,5rem de respiro. */
    scroll-padding-top: calc(var(--sdi-topo-altura, 88px) + 1.5rem);
}

body {
    font-family: var(--sdi-fonte);
    font-size: 16px; /* campo com menos de 16px faz o iPhone dar zoom ao focar */
    line-height: 1.5;
    color: var(--sdi-texto);
    background-color: var(--sdi-fundo);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-weight: 700;
    line-height: 1.1;
}

a {
    color: inherit;
    text-underline-offset: .2em;
}

a:hover {
    color: inherit;
}


/* ---------- 4. Peças comuns ----------

   REGRA DE FORMA (a arte não tem um canto reto em lugar nenhum):
     · PÍLULA (999px) — o que se clica ou se digita: botões, campos, etiquetas,
       abas de dia, a frase do vídeo, selos. Num elemento quadrado vira círculo,
       como o botão de som do hero (44px) e o "+" da sessão.
     · 16px — painéis que flutuam: modal, balão do "Agendar", popup de mini-bio,
       menus suspensos, caixas de estado.
     · 12px — cartões de conteúdo: fotos das edições, cartões de escolha do
       formulário, foto do carrossel.
   Quem for criar peça nova escolhe uma das três; não há quarta. */

.sdi-secao {
    padding-block: var(--sdi-secao-pad);
    background-color: var(--sdi-fundo);
    color: var(--sdi-texto);
}

.sdi-secao + .sdi-secao {
    border-top: 1px solid var(--sdi-linha);
}

.sdi-secao-titulo {
    font-size: 2.5rem;
    font-weight: 900;
    letter-spacing: -.01em;
    margin-bottom: 2rem;
}

/* rótulo técnico, caixa alta espaçada (referência: print "FIG. 01 / LIVE") */
.sdi-rotulo {
    font-family: var(--sdi-fonte-mono);
    font-size: .75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sdi-texto-suave);
    margin-bottom: .75rem;
}

/* filete laranja vertical (referência: print do key visual) */
.sdi-filete {
    display: inline-block;
    width: 3px;
    height: 1em;
    margin-right: .6em;
    vertical-align: -.1em;
    background-color: var(--sdi-acento);
}

/* Mesmo filete, mas como ::before — para texto de 2 linhas, sem <span> no meio.
   É a marca de seção da arte: traço laranja colado à esquerda do bloco (Figma, `09`). */
/* Traço laranja + título: o componente que marca as seções (Figma, Line 22/23/28).
   Na arte é um FIO de 1,4 numa prancheta de 2048 — na nossa escala dá ~1,26px, então
   fica em 1px, que é o único jeito de sair nítido. (Era 3px, grosso demais.)
   A altura: no rodapé o fio tem exatamente a altura do texto (58 para 57,2) e no hero
   tem 82% dela (58 para 70,4). A arte não é consistente, então adotamos a altura do
   texto nos dois — é o que a borda faz sozinha. `09` 7b.1 */
.sdi-com-filete {
    border-inline-start: 1px solid var(--sdi-acento);
    padding-inline-start: 1.25rem;
}

/* ÁREA QUE DEPENDE DA ARTE: contorno tracejado + etiqueta com o que falta.
   Tirar a classe quando a arte daquela área entrar. */
.sdi-placeholder {
    position: relative;
    outline: 1px dashed var(--sdi-linha);
    outline-offset: 12px;
}

.sdi-placeholder::after {
    content: attr(data-rotulo);
    position: absolute;
    top: -2.1rem;
    right: 0;
    font: .6875rem/1 var(--sdi-fonte-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sdi-texto-suave);
}

/* botão principal — nome de sempre da casa; inverte sozinho em seção escura */
.bt_padrao {
    display: inline-flex;
    align-items: center;
    gap: .6em;
    padding: .85rem 1.6rem;
    font-family: var(--sdi-fonte);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--sdi-fundo);
    background-color: var(--sdi-texto);
    border: 1px solid var(--sdi-texto);
    /* PILULA EM TODO BOTAO (usuario, 2026-09-19): e o componente "Main button" do Itau
       Design System, que na arte aparece sempre com raio = metade da altura. 999px
       resolve em qualquer altura, inclusive quando o texto quebra em duas linhas. */
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.bt_padrao:hover,
.bt_padrao:focus-visible {
    color: var(--sdi-texto);
    background-color: transparent;
}

/* ÍCONE DENTRO DO BOTÃO: o flex centra a CAIXA do ícone, e medindo dá quase zero de
   diferença (0,6px) — mas ele PARECE baixo, porque a caixa do texto tem sobra de
   ascendente e descendente e a massa visual das letras fica acima do centro dela.
   A correção é óptica, não conserto de layout.

   Vai em `em`, não em px, de propósito: o mesmo `.bt_padrao` aparece a 16px, a 17px no
   celular e a 24px no "Entre na conversa" do save the date — um `-5px` fixo acerta num
   tamanho e erra nos outros. Em `em` o empurrão acompanha o corpo do texto.
   (−0,15em dá, a 16px, os mesmos ~2,5px que o `margin-top: -5px` dava.) */
.bt_padrao i {
    transform: translateY(-.15em);
}

.bt_padrao:focus-visible {
    outline: 2px solid var(--sdi-acento);
    outline-offset: 3px;
}

/* secundário (ex.: Voltar do formulário): contorno, sem fundo; inverte no hover */
.bt_padrao.bt_secundario {
    color: var(--sdi-texto);
    background-color: transparent;
}

.bt_padrao.bt_secundario:hover,
.bt_padrao.bt_secundario:focus-visible {
    color: var(--sdi-fundo);
    background-color: var(--sdi-texto);
}

/* foto do palestrante: quadrada. Sem foto = img/thumb_vazio.png; o texto de
   iniciais dentro da caixa fica só como reserva.
   Moldura/recorte da foto = decisão do design (pendência em _docs/pendencias.md). */
.sdi-pal-foto {
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: var(--sdi-superficie);
    color: var(--sdi-texto-suave);
    font-size: 2.5rem;
    font-weight: 300;
}

.sdi-pal-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* com foto, sem o fundo cinza: as fotos provisórias têm moldura com cantos
   transparentes, e o fundo vazaria como um halo nos cantos */
.sdi-pal-foto:has(img) {
    background-color: transparent;
}


/* ---------- 5. HEADER ---------- */

/* Barra do topo (controles/UC_TOPO.ascx) — vale nas duas fases.
   Nasce fixa e transparente sobre o hero preto; o js/topo.js põe .rolagem
   depois de 10px de rolagem, e aí ela ganha fundo e desfoque.
   O mesmo js publica --sdi-topo-altura, para a primeira seção não ficar por baixo. */

.dHeadPage {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 1030;
    padding-block: 1.25rem;
    background-color: transparent;
    /* o data-bs-theme="dark" só troca as variáveis; quem aplica a cor é esta linha */
    color: var(--sdi-texto);
    transition: background-color .3s ease, backdrop-filter .3s ease;
}

.dHeadPage.rolagem {
    background-color: rgb(0 0 0 / .92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.sdi-topo {
    display: flex;
    align-items: center;
    gap: 2rem;
}

/* logo: SVG embutido, em currentColor — acompanha o data-bs-theme da barra */
.sdi-logo {
    display: block;
    flex: none;
    width: 48px;
    height: 48px;
    color: var(--sdi-texto);
    text-decoration: none;
}

/* O logo virou LINK para itau.com.br em 25/09, e isto não é enfeite: o <svg> pinta com
   `currentColor`, e o `a:hover` do Bootstrap (0,1,1) ganha da classe (0,1,0) — sem estas
   regras a marca do Itaú MUDA DE COR ao passar o mouse. A afordância fica na opacidade. */
.sdi-logo:hover,
.sdi-logo:focus-visible {
    color: var(--sdi-texto);
    opacity: .82;
}

.sdi-logo:focus-visible {
    outline: 2px solid var(--sdi-acento);
    outline-offset: 4px;
    border-radius: 4px;
    opacity: 1;
}

.sdi-logo svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* âncoras de seção — só na fase 2 (MostrarMenu="true") */
.sdi-menu {
    display: flex;
    flex: 1;
    justify-content: center;
    gap: clamp(1.5rem, 4vw, 4rem);
}

.sdi-menu a {
    font-size: .875rem;
    font-weight: 700;
    color: var(--sdi-texto);
    text-decoration: none;
    opacity: .85;
    transition: opacity .15s;
}

.sdi-menu a:hover,
.sdi-menu a:focus-visible {
    opacity: 1;
}

.sdi-topo-acoes {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-inline-start: auto;
}

/* o botão da barra é menor que o .bt_padrao das seções */
.sdi-bt-inscrever {
    padding: .75rem 1.5rem;
    border-radius: 40px;
    font-size: .9375rem;
    white-space: nowrap;
}

/* seletor de idioma: mostra o idioma atual e abre os outros dois */
.sdi-idiomas .sdi-idioma-atual {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .2rem;
    font-family: inherit;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--sdi-texto);
    background: none;
    border: 0;
    cursor: pointer;
}

.sdi-idiomas .sdi-idioma-atual i {
    font-size: .625rem;
}

.sdi-idiomas-lista {
    --bs-dropdown-min-width: 10.5rem;
    --bs-dropdown-font-size: .875rem;
    /* mesmo cuidado do menu de trilha: sem isto o realce do item vaza pelo canto */
    overflow: hidden;
}

/* as três bandeiras têm proporções diferentes (Brasil 10:7, EUA 19:10, Espanha 3:2):
   caixa fixa + cover para elas alinharem em coluna sem dançar */
.sdi-bandeira {
    flex: none;
    width: 1.25rem;
    height: .875rem;
    object-fit: cover;
    border-radius: 2px;
    /* contorno tênue: a faixa branca do Brasil e da Espanha some no fundo preto */
    box-shadow: 0 0 0 1px rgb(255 255 255 / .25);
}

.sdi-idiomas-lista .dropdown-item {
    display: flex;
    align-items: center;
    gap: .6rem;
}

/* Primeira seção da página: reserva a altura da barra fixa (o js/topo.js publica
   --sdi-topo-altura). O valor de reserva cobre o instante antes do JS rodar. */
.dHero {
    padding-block-start: calc(var(--sdi-topo-altura, 88px) + var(--sdi-secao-pad));
}

/* HERO DA FASE 2 — o vídeo da tipografia viva é o FUNDO e sangra para fora do quadro.
   Medidas da prancheta (node 4:22, página de 2048 x hero de 731): vídeo com 2960 de
   largura (144,5%) em x=-742 (-36,2%) e y=-251 (-34,3% da altura do hero).
   Como o vídeo e o hero têm a mesma proporção de referência, as porcentagens valem em
   qualquer largura de tela. O piso de 22rem é para o celular, que a arte não desenhou. */
/* A ALTURA TAMBÉM É MEDIDA NO CONTAINER (2026-09-23, GE-008) — antes era `35.7vw`.
   Enquanto o vídeo travou no container (ver `.sdi-hero-kv`) e a faixa continuou em `vw`,
   a faixa crescia sozinha: a 2472 ela ia a 883px com a tipografia congelada em cima,
   deixando 136px de preto sobrando embaixo. Medido e visto lado a lado em
   _docs/Testes/ge008_altura_faixa.html.
   O coeficiente reproduz o valor de hoje a 1440 (35,7% de 1440 = 514px = 0,38945 de um
   container de 1320) e congela dali para cima. O piso de 22rem é para o celular, que a
   arte não desenhou, e continua igual. */
.dHero-video {
    position: relative;
    overflow: hidden;
    min-height: max(calc(var(--sdi-container) * 0.38945), 22rem);
}

/* caixa dos dois vídeos: é ela que recorta o sangramento */
.sdi-hero-kvs {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* São DOIS vídeos sobrepostos, um por palavra. Os dois têm fundo preto opaco, então o
   de cima tapa o de baixo: o `screen` faz o preto sumir (preto + qualquer coisa = a
   outra coisa) e deixa passar só as listras brancas de cada um. Funciona porque o fundo
   da seção também é preto — num fundo claro o efeito seria outro.

   MEDIDO NO CONTAINER, NÃO NA JANELA (2026-09-23 — ver `--sdi-container` lá em cima).
   Os coeficientes reproduzem EXATAMENTE o que estava na tela a 1440, que é a largura em
   que o desenho foi aprovado: 144,5% de 1440 = 2081px = 1,5764 containers de 1320. Daí
   `157,64%`. O recuo sai da mesma conta: -36,2% de 1440 = -521, que fica a -581 da borda
   do container, ou -0,4404 container — e como a borda do container é `50% - C/2`, o
   `left` vira `50% - 0,94036·C`. O `top` segue o mesmo caminho: -34,3% da altura do hero
   (514 a 1440) = -176px = -0,13358 container.
   Resultado: até 1400 quase nada muda (a diferença fica em ±6%); acima, o vídeo PARA de
   crescer junto com o container, em vez de fugir do alinhamento do texto.

   ⚠️ A arte, se seguida ao pé da letra, pediria 2,012 containers (2960/1471) — 28% maior
   do que isto em toda largura. Não foi seguida de propósito: mudaria o hero a 1440, que
   já está aprovado. Se um dia for para valer, é trocar os coeficientes aqui. */

/* 🟠 UM VÍDEO SÓ DESDE 24/09. Eram dois (`viva_sdi` + `viva_26`), um por palavra,
   somados com `screen`. Mediram-se durações DIFERENTES — 18,417 e 18,049 s — e, com `loop`,
   eles saíam de sincronia 368 ms a cada volta: em ~15 min de página aberta dá uma volta
   inteira de defasagem, e nada garantia que começassem juntos (cada um baixava por conta).
   O `img/sdi_hero_all.mp4` (2314x1246) traz as duas palavras já compostas.
   AS MEDIDAS MUDARAM EM DUAS: a largura passou de 1,57636 para 1,93614 container (o novo
   canvas é a UNIÃO dos dois antigos) e o `top` passou do valor do "SDI" para o do "26",
   que era o mais alto dos dois. O `left` NÃO muda: o "SDI" já era a borda esquerda.
   O `screen` FICA: o vídeo tem fundo preto opaco e assim ele some sobre qualquer fundo. */
.sdi-hero-kv {
    position: absolute;
    top: calc(var(--sdi-container) * -0.27184);
    left: calc(50% - var(--sdi-container) * 0.94036);
    width: calc(var(--sdi-container) * 1.93614);
    height: auto;
    pointer-events: none;
    mix-blend-mode: screen;
}

/* (Saiu em 24/09 a regra `.sdi-hero-kv--26`, que reposicionava a segunda camada.
   Não há mais segunda camada.) */

/* o conteúdo fica por cima do vídeo */
.sdi-hero-conteudo {
    position: relative;
}

/* A MARCA PRECISA DE FUNDO AQUI. As listras do vídeo passam por trás do texto e, em
   certos quadros, comem a leitura. Preto a 55% com um leve desfoque: escurece o
   suficiente para o texto respirar, mas deixa o vídeo aparecer atrás — preto sólido
   apagaria a tipografia viva justamente onde ela está viva.
   Só no hero da fase 2: a mesma classe é usada no save the date e na coluna branca da
   seção "sobre", onde não há vídeo nenhum atrás. */
.dHero-video .sdi-sd-marca {
    display: inline-block;
    padding: .55rem 1.1rem .6rem 1.25rem;
    background-color: rgba(0, 0, 0, .55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* sem desfoque disponível, o preto precisa segurar a leitura sozinho */
@supports not ((backdrop-filter: blur(3px)) or (-webkit-backdrop-filter: blur(3px))) {
    .dHero-video .sdi-sd-marca {
        background-color: rgba(0, 0, 0, .72);
    }
}

/* quem pede menos movimento não recebe o vídeo (é decorativo) */
@media (prefers-reduced-motion: reduce) {
    .sdi-hero-kv {
        display: none;
    }
}


/* ---------- 5b. SAVE THE DATE (fase 1) ----------
   Página inteira preta, sem a alternância claro/escuro da versão final
   (Figma, prancheta 4:324 — _docs/09 seção 7b). */

.sdi-savedate {
    background-color: var(--sdi-preto);
}

.sdi-savedate .sdi-secao + .sdi-secao {
    border-top: 0;
}

/* Na arte o manifesto NASCE POR BAIXO DO HERO: a rampa de preto que apaga as linhas de
   cima começa exatamente na borda de baixo do hero, sem vão. Por isso a seção do
   manifesto não leva respiro no topo — quem dá o espaço é o padding de baixo do hero,
   que na prancheta são os ~102px de preto entre a onda e o fim do hero. */
.sdi-savedate .dManifesto {
    padding-block-start: 0;
}

/* ⚠️ DAQUI ATÉ O FIM DO MANIFESTO: REGRAS FORA DE USO DESDE 2026-09-23.
   `.sdi-sd-hero`, `.sdi-sd-lado`, `.sdi-onda` e toda a família `.sdi-manifesto` serviam ao
   hero de duas colunas + teleprompter da prancheta ANTIGA (4:324). A prancheta nova
   (88:346) trocou os dois pelo vídeo `img/vozes_reatividade_V2.mp4`, e nenhuma das três
   Default*.aspx referencia mais estas classes — quem vale agora é a seção 5c, abaixo.
   Guardadas de propósito, e não apagadas, porque a fase 1 ainda está EM APROVAÇÃO no
   cliente (SD-019): se o manifesto em texto voltar, volta inteiro. `.sdi-sd-marca`,
   `.sdi-sd-data`, `.sdi-com-filete` e `.sdi-bt-grande` CONTINUAM EM USO — não mexer.
   Decisão em _docs/pendencias_20260922.md, SD-017. */

/* Hero em duas colunas (prancheta 4:324, página de 2048): a coluna da esquerda vai
   até x=593 (20,7% do container de 1471) e a onda ocupa 734 (49,9%) a partir dali.
   Na vertical elas se sobrepõem: marca em y=173, onda em 199, data em 489. */
.sdi-sd-hero {
    display: flex;
    align-items: flex-start;
    gap: 0;
}

.sdi-sd-lado {
    flex: 0 0 20.7%;
}

/* Corpo 32 na prancheta de 2048, entrelinha 1,1 e tracking −0,64 (= −0,02em) —
   nodes 4:363 e 4:369, medidos em 19/09. */
.sdi-sd-marca,
.sdi-sd-data {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -.02em;
}

/* 246 de distância ENTRE OS BLOCOS numa página de 2048 = 12vw. (Na arte a marca começa
   em y=173 e a data em y=489: são 316 de topo a topo, menos os 70 de altura da marca.
   Conferido em 19/09 — o valor está certo, não "corrigir" para 15,4vw.) */
.sdi-sd-data {
    margin-block-start: clamp(2rem, 12vw, 15rem);
}

/* ONDA SONORA — hoje é SIMULAÇÃO em canvas (js/onda.js); o arquivo de vídeo do
   Design ainda não chegou. Medidas da prancheta (node 4:370, página de 2048):
   734 x 430 começando em x=593 — relativo ao container, 50% de largura e 21% de recuo.
   Sem JS o bloco fica vazio e não ocupa espaço. */
.sdi-onda {
    flex: 0 0 49.9%;
    aspect-ratio: 734 / 430;
    color: var(--sdi-texto);
}

.sdi-onda:empty {
    display: none;
}

.sdi-onda-canvas,
.sdi-onda video {
    display: block;
    width: 100%;
    height: 100%;
}

/* MANIFESTO — teleprompter casado com o vídeo da onda (decisão do usuário, 2026-09-18).
   O texto corre sozinho, no tempo dele; a rolagem da página não entra na conta.
   Enquanto o vídeo não chega, quem marca o tempo é um relógio no js/manifesto.js.

   Por padrão (sem JS) o bloco mostra TUDO, legível e sem janela: quem recorta e
   apaga é o script, acrescentando .sdi-manifesto--janela e .apagado. */

/* Medidas do node 4:336, agora lidas no Figma e não estimadas no PNG (19/09):
   corpo 61 numa página de 2048 = 2.98vw · entrelinha 75/61 = 1.23 · SEM tracking
   (o tracking de −0,02em é da marca do hero, não daqui) · bloco de 1154 começando
   em 469 → 78% de largura e 12% de recuo, relativos ao container.
   É a largura limitada que dá a quebra de linha do desenho — sem ela o texto ocupa
   a página toda e parece muito maior do que é. */
.sdi-manifesto {
    max-width: 78%;
    margin-inline-start: 12%;
    font-size: clamp(1.125rem, 2.98vw, 3.5rem);
    line-height: 1.23;
}

/* A JANELA DO TELEPROMPTER, como a arte faz (nodes 4:338 e 4:339):
   o texto não é cortado por uma borda seca — ele DESMANCHA no preto em cima e embaixo.
   Na prancheta a região de texto tem 445px (= 7,3 vezes o corpo de 61) e dentro dela:
   rampa de 195 no topo (43,8%), faixa limpa até 72,4% e rampa de 173 até o fim.
   Só ~1 linha fica 100% legível; as outras vão sumindo. Daí os números da máscara.

   Altura: 5 linhas (decisão de 18/09) × (1,23 de texto + 0,25 de respiro) = 7,4em,
   praticamente os 7,3em da arte. O corte continua existindo (overflow) porque a
   máscara só apaga o pixel, não impede o trilho de transbordar. */
.sdi-manifesto--janela {
    height: 7.4em;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0, #000 44%, #000 72%, transparent 100%);
    mask-image: linear-gradient(to bottom,
        transparent 0, #000 44%, #000 72%, transparent 100%);
}

.sdi-manifesto-trilho {
    transition: transform .55s cubic-bezier(.4, 0, .2, 1);
}

/* .25em de respiro entre as linhas (era .5em): com 1,23 de entrelinha, cada linha passa
   a custar 1,48em e a janela de 7,4em mostra as 5 linhas decididas. */
.sdi-manifesto p {
    margin: 0 0 .25em;
    font-size: inherit;
    font-weight: 400;
    line-height: inherit;
    transition: color .35s ease;
}

.sdi-manifesto p.apagado {
    color: #b4b4b4;
}

/* quem pede menos movimento lê o texto parado, inteiro */
@media (prefers-reduced-motion: reduce) {
    .sdi-manifesto--janela {
        height: auto;
        overflow: visible;
        /* sem a máscara: aqui o texto fica inteiro e legível, não em janela */
        -webkit-mask-image: none;
        mask-image: none;
    }

    .sdi-manifesto-trilho {
        transition: none;
        transform: none !important;
    }

    .sdi-manifesto p.apagado {
        color: inherit;
    }
}

.sdi-manifesto-acao {
    margin-block-start: 5rem;
    text-align: center;
}

/* Botão grande do save the date — node 4:337, medido em 19/09: 384 x 102 na prancheta
   de 2048, raio 85 (= metade da altura, pílula), rótulo 34/51 e padding 51 x 25,5.
   Convertido pelo rótulo (34 na arte → 24 aqui): padding 2.25rem x 1.125rem e altura
   final de ~72px. O raio vira 999px, que é pílula em qualquer altura.
   Obs.: o `.bt_padrao` do site é de canto reto; na arte TODO botão é pílula — item
   em aberto na `pendencias.md` para a fase 2. */
.sdi-bt-grande {
    padding: 1.125rem 2.25rem;
    border-radius: 999px;
    font-size: 1.5rem;
}

/* ---------- 5c. SAVE THE DATE — O VÍDEO DO MANIFESTO (2026-09-23) ----------

   A prancheta nova (node 88:346) trocou o hero de duas colunas + manifesto por uma peça
   só: o VÍDEO SANGRA a largura inteira da página (node 88:347 — 2048 x 1550 começando em
   y=0) e marca, data e botão de som ficam POR CIMA dele. O manifesto em teleprompter
   deixou de existir: o texto é legenda queimada dentro do vídeo (SD-017).

   As três caixas da arte foram conferidas contra os quadros do arquivo, em
   _docs/Testes/quadros_video.html: NENHUMA cai em cima da onda (que ocupa 36-64% da
   largura e 13-32% da altura) nem da legenda (de 55% da altura para baixo).

   HORIZONTAL segue o `.container` do site, não a medida da arte — é a decisão de 19/09
   ("a arte vale como proporção, não como medida"). Assim marca e data ficam alinhadas com
   o logo do cabeçalho, como na prancheta, em qualquer largura.
   VERTICAL segue a arte, em % da altura do vídeo: 173/1550 = 11,16% (marca),
   489/1550 = 31,55% (data), 553/1550 = 35,68% (botão de som). */

/* O vídeo sangra até o topo da página, por baixo da barra fixa (que nasce transparente
   sobre o hero) — por isso, aqui, nada do padding-block-start do `.dHero`. O respiro de
   baixo, esse, continua sendo o da seção. */
.sdi-savedate .dHero-manifesto {
    padding-block-start: 0;
}

/* O BOTÃO DA PÁGINA, centralizado entre o vídeo e o rodapé (node 88:404). Na arte são 202
   de folga numa página de 2048; pelo fator da casa (0,70), 8,75rem. */
.sdi-sd-acao {
    margin-block-start: 8.75rem;
    text-align: center;
    /* Precisa subir de camada: no fim do vídeo a margem negativa põe este bloco DENTRO da
       caixa do palco, e ali os elementos posicionados (o quadro do vídeo, a sobreposição da
       marca, o botão de som) pintam por cima de conteúdo estático. Sem isto o `<video>`
       cobre o botão — ele some da tela e deixa de receber clique. */
    position: relative;
    z-index: 4;
}

/* HOVER COM FUNDO PRETO, não transparente. O `.bt_padrao` da casa se inverte no hover e
   fica só com o fio e o rótulo; aqui o botão está POR CIMA da tipografia viva, e as
   listras apareciam por dentro dele. */
.sdi-sd-acao .bt_padrao:hover,
.sdi-sd-acao .bt_padrao:focus-visible {
    background-color: var(--sdi-preto);
}

/* O PALCO — a caixa do vídeo, na proporção do arquivo (2048 x 1550), que é exatamente a
   do node 88:347 (2048 x 1550).

   O TETO DE ALTURA existe por causa da legenda: ela mora entre 55% e 100% da altura do
   vídeo, então numa tela baixa (1440 x 900) o fim do manifesto cairia abaixo da dobra e a
   pessoa teria de rolar para ler a peça principal da página. Com o teto, o vídeo encolhe
   até caber inteiro; o `contain` deixa faixa preta nas laterais — invisível, porque a
   página é preta. Sem o teto o desenho é o da arte, letra por letra. */
.sdi-sd-palco {
    position: relative;
    /* a altura muda quando o vídeo acaba (ver "O FIM DO VÍDEO", abaixo);
       quem escreve o valor em px é o js/video_manifesto.js */
    transition: height .9s cubic-bezier(.4, 0, .2, 1);
    width: 100%;
    aspect-ratio: 2048 / 1550;
    max-block-size: calc(100vh - var(--sdi-topo-altura, 88px));
    max-block-size: calc(100svh - var(--sdi-topo-altura, 88px));
    background-color: var(--sdi-preto);
}

.sdi-sd-quadro {
    position: absolute;
    inset: 0;
}

/* `contain`, nunca `cover`: a legenda encosta nas bordas do arquivo e qualquer recorte
   comeria o texto do manifesto. */
.sdi-sd-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity .9s ease;   /* desmancha no fim */
}

/* MARCA E DATA por cima do vídeo, dentro do container. O bloco não pode capturar clique
   no vazio — só os filhos voltam a ser clicáveis. */
.sdi-sd-sobre {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.sdi-sd-sobre > * {
    pointer-events: auto;
}

.sdi-sd-sobre .sdi-sd-marca,
.sdi-sd-sobre .sdi-sd-data {
    position: absolute;
    margin: 0;
    inset-inline-start: calc(var(--bs-gutter-x, 1.5rem) * .5);
}

/* 11,16% da altura do vídeo — mas nunca por baixo da barra fixa: abaixo de ~1200px de
   largura o vídeo fica baixo o bastante para que 11,16% caia dentro do cabeçalho. */
.sdi-sd-sobre .sdi-sd-marca {
    inset-block-start: max(11.16%, calc(var(--sdi-topo-altura, 88px) + 1.5rem));
}

.sdi-sd-sobre .sdi-sd-data {
    inset-block-start: 31.55%;
}

/* O BOTÃO DE SOM — node 88:392 (220 x 53): pílula escura, rótulo em duas linhas e o glifo
   `sound_off` num círculo cinza, encostado na borda direita do container (na arte o botão
   acaba em x=1752 e o container em 1760).

   ⚠️ UMA MEDIDA DA ARTE NÃO FOI SEGUIDA: o rótulo tem ~11px na prancheta de 2048, que pelo
   fator da casa (1440/2048 = 0,70) daria 7,7px — ilegível. Fica em 13px. O círculo segue a
   arte (44 x 0,70 = 31px). Com isso o botão dá ~48px de altura, acima do mínimo de 44 de
   alvo de toque — que é requisito, não gosto. */
.sdi-sd-som {
    position: absolute;
    inset-block-start: 35.68%;
    inset-inline: 0;
    z-index: 3;
}

/* GRID, e não flex, de propósito: na troca os dois botões convivem por 360ms (um
   desmancha, o outro já entra) e num flex eles ficariam LADO A LADO — o que entra nasce à
   esquerda do que sai e depois pula para a direita. Na mesma célula, ninguém se mexe. */
.sdi-sd-som > .container {
    display: grid;
    justify-items: end;
}

.sdi-sd-som > .container > .sdi-bt-som {
    grid-area: 1 / 1;
}

.sdi-bt-som {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: .5rem .5rem .5rem 1.5rem;
    border: 0;
    /* regra de forma da casa: o que se clica é pílula */
    border-radius: 999px;
    background-color: #2E2E2E;
    color: var(--sdi-branco);
    font-family: var(--sdi-fonte);
    font-size: .8125rem;
    font-weight: 400;
    line-height: 1.2;
    text-align: start;
    cursor: pointer;
    transition: opacity .35s ease, transform .35s ease, background-color .15s ease;
}

.sdi-bt-som:hover {
    background-color: #3a3a3a;
}

.sdi-bt-som:focus-visible {
    outline: 2px solid var(--sdi-acento);
    outline-offset: 3px;
}

.sdi-bt-som .sdi-bt-som-icone {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: #8C8C8C;
}

.sdi-bt-som .sdi-bt-som-icone svg {
    display: block;
    width: 58%;
    height: 58%;
}

/* entra e sai sem susto. O `hidden` do HTML é quem tira do fluxo; estas classes só
   desmancham o desenho antes e depois. */
.sdi-bt-som[hidden] {
    display: none;
}

.sdi-bt-som.saindo {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
}

.sdi-bt-som.entrando {
    animation: sdi-som-sobe .4s ease both;
}

@keyframes sdi-som-sobe {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .sdi-bt-som,
    .sdi-bt-som.entrando {
        transition: none;
        animation: none;
    }
}

/* BOTÃO SÓ-ÍCONE, em qualquer largura: é o liga/desliga do som, que não precisa de texto
   depois que a pessoa já usou o botão grande uma vez. O rótulo continua no DOM. */
.sdi-bt-som--so-icone {
    gap: 0;
    padding: .5rem;
}

.sdi-bt-som--so-icone .sdi-bt-som-rotulo {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* A pílula de duas linhas não cabe em tela estreita: vira só o círculo. O rótulo continua
   no DOM, para o leitor de tela — some da vista, não da leitura. */
@media (max-width: 560px) {
    .sdi-bt-som {
        gap: 0;
        padding: .5rem;
    }

    .sdi-bt-som .sdi-bt-som-rotulo {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

/* key visual: "SDI 26" em texto é só o lugar do SVG listrado que o design vai mandar */
.sdi-kv-marca {
    margin: 0 0 2.5rem;
    font-family: var(--sdi-fonte-heavy);
    font-weight: normal;
    font-size: 12rem;
    line-height: .85;
    letter-spacing: -.03em;
}

.sdi-kv-tema {
    margin: 0 0 .5rem;
    font-size: 2rem;
    font-weight: 700;
}

.sdi-kv-data {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 300;
}


/* ---------- 5d. SAVE THE DATE — O FIM DO VÍDEO (2026-09-23) ----------

   O PROBLEMA (achado do usuário): o manifesto termina num quadro quase vazio, o vídeo para
   ali e sobra um buraco preto enorme — e o botão "Quero receber novidades" fica abaixo da
   dobra, invisível sem rolar.

   A SAÍDA (aprovada em 23/09, depois de rodar na `default2.aspx`): no fim, a área faz um
   FADE para os dois vídeos da tipografia viva — os mesmos do hero da fase 2, que já são
   `loop` — e a faixa muda de altura para não cortar as letras.

   AS DUAS MEDIDAS QUE MANDAM AQUI:
     · a faixa vai até o FIM DO VÍDEO (0,77007 container: o `.sdi-sd-kv` começa em -0,13358
       e tem 0,90365 de altura), para nada ser cortado;
     · e o preto que sobra sob as letras é puxado de volta por uma MARGEM NEGATIVA
       (-0,33435 container) — senão o botão desceria ~440px e voltaria para baixo da dobra.
   As letras vivem entre 36% e 63% da altura do quadro (medido em 23/09), então o que a
   margem come é só fundo. Quem escreve os dois valores em px é o js/video_manifesto.js.

   ⚠️ Estas medidas e as do `.sdi-sd-kv` são em CONTAINER, não em janela — mesma correção
   do GE-007. Ver `--sdi-container` no topo do arquivo. */

/* a camada da tipografia viva, dentro do quadro do vídeo */
.sdi-sd-kvs {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .9s ease;
}

.sdi-sd-fim .sdi-sd-kvs {
    opacity: 1;
}

.sdi-sd-fim .sdi-sd-video {
    opacity: 0;
}

/* Os dois têm fundo preto opaco; o `screen` faz o preto sumir e deixa passar só as listras
   brancas. Só funciona sobre fundo preto — que é o caso da fase 1 inteira.
   Mesmos coeficientes do `.sdi-hero-kv` da fase 2: o enquadramento sai igual ao de lá. */
.sdi-sd-kv {
    position: absolute;
    top: calc(var(--sdi-container) * -0.27184);
    left: calc(50% - var(--sdi-container) * 0.94036);
    width: calc(var(--sdi-container) * 1.93614);
    height: auto;
    mix-blend-mode: screen;
}

/* (Saiu em 24/09 a regra `.sdi-sd-kv--26`. Um vídeo só — ver a nota do .sdi-hero-kv.) */

/* MARCA E DATA no estado "acabou": ficam nas MESMAS posições em pixel que tinham durante o
   vídeo (112 e 256 numa tela de 1440), então não se mexem um milímetro na transição. Em
   porcentagem elas se espalhariam junto com a faixa e a data cairia dentro das letras.
   O halo escuro é o mesmo problema que o hero da fase 2 tem (`.dHero-video .sdi-sd-marca`):
   as listras passam por trás do texto. Feito com `box-shadow` e não com `padding`, para
   escurecer em volta SEM mover o texto. */
.sdi-sd-sobre .sdi-sd-marca,
.sdi-sd-sobre .sdi-sd-data {
    transition: opacity .9s ease, inset-block-start .9s cubic-bezier(.4, 0, .2, 1);
}

.sdi-sd-fim .sdi-sd-sobre .sdi-sd-marca {
    inset-block-start: calc(var(--sdi-topo-altura, 88px) + 1.5rem);
}

.sdi-sd-fim .sdi-sd-sobre .sdi-sd-data {
    inset-block-start: calc(var(--sdi-topo-altura, 88px) + 10.5rem);
}

.sdi-sd-fim .sdi-sd-sobre .sdi-sd-marca,
.sdi-sd-fim .sdi-sd-sobre .sdi-sd-data {
    background-color: rgba(0, 0, 0, .55);
    box-shadow: 0 0 0 .6rem rgba(0, 0, 0, .55);
    transition: box-shadow .9s ease, background-color .9s ease,
                opacity .9s ease, inset-block-start .9s cubic-bezier(.4, 0, .2, 1);
}

/* O BOTÃO DE SOM DESCE, para sair de cima do grafismo. Durante o vídeo ele fica a 35,68%
   da faixa, que é a posição da arte; a faixa do fim é bem mais alta e 35,68% dela cairia no
   meio das letras. Aqui ele vai para logo abaixo delas — elas acabam em 0,43572 container. */
.sdi-sd-fim .sdi-sd-som {
    inset-block-start: calc(var(--sdi-container) * 0.4557);
}

/* quem pede menos movimento não recebe a troca (o script nem a dispara) nem as transições */
@media (prefers-reduced-motion: reduce) {
    .sdi-sd-palco,
    .sdi-sd-video,
    .sdi-sd-kvs,
    .sdi-sd-sobre .sdi-sd-marca,
    .sdi-sd-sobre .sdi-sd-data {
        transition: none;
    }
}


/* ---------- 6. SOBRE / INSCRIÇÃO (arte: node 4:48) ----------

   ESCALA DE TEXTO DA FASE 2. A prancheta tem 2048 de largura e vale como um desenho de
   1440, então o fator é 1440/2048 = 0,70 — o mesmo que já valia para a marca (32 na arte,
   22px aqui). Daí os corpos: 24 → 1.0625rem · 30 → 1.3125rem · 32 → 1.375rem ·
   57 → 2.5rem · 60 → 2.625rem · 71 → 3.125rem · 90 → 3.9375rem · 120 → 5.25rem.

   MEDIDA DAS COLUNAS EM `em`, não em px: na arte a coluna da direita tem 726 para um texto
   de 24, ou seja 30 vezes o corpo. `max-width: 30em` reproduz a MESMA quebra de linha do
   desenho em qualquer largura de container — que é justamente a decisão de 19/09 (a arte
   vale como proporção, não como medida). A da esquerda tem 384/24 = 16em. */

/* "Já reserva na sua agenda!" — 60/0.9 na prancheta */
.sdi-chamada {
    margin: 0 0 2.5rem;
    font-size: clamp(2rem, 4.1vw, 2.625rem);
    font-weight: 400;
    line-height: .9;
    letter-spacing: -.02em;
}

/* "05 _ / 06 nov" — 120 na prancheta, o maior corpo da página */
.sdi-data-grande {
    margin: 0;
    font-size: clamp(3rem, 8.2vw, 5.25rem);
    font-weight: 400;
    line-height: .95;
    letter-spacing: -.03em;
}

/* a marca com filete volta no meio da coluna da esquerda (node 4:52) */
.dAbout .sdi-sd-marca {
    margin-block: 5rem 1.5rem;
}

.sdi-texto-apoio {
    max-width: 16em;
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.5;
}

.sdi-lead {
    max-width: 30em;
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.5;
}

.sdi-social {
    max-width: 30em;
    margin: 2rem 0 0;
    font-size: 1.0625rem;
    line-height: 1.5;
}

.sdi-social a {
    font-weight: 700;
    color: inherit;
    text-decoration: none;
}

.sdi-social a:hover,
.sdi-social a:focus-visible {
    text-decoration: underline;
}

/* bloco de serviço: híbrido/gratuito, horário, local e hora de liberar o acesso */
.sdi-servico {
    max-width: 30em;
    margin-block-start: 4.5rem;
    font-size: 1.0625rem;
    line-height: 1.5;
}

.sdi-servico p {
    margin: 0 0 1rem;
}

.sdi-servico-titulo {
    font-weight: 700;
}

/* ícone laranja + texto, alinhados pelo topo (nodes 4:63 a 4:69).
   Os dois SVG vêm da arte e têm o laranja #FF6200 dentro do arquivo: como entram por
   <img>, o currentColor não chegaria neles. */
.sdi-servico-item {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
}

.sdi-servico-item img {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    margin-block-start: .1em;
}

.sdi-servico-destaque {
    margin-block-start: 1.5rem;
    font-weight: 700;
}

/* Panels de estado: só um aparece por vez. Na arte o estado normal é SÓ o botão, sem
   caixa — a caixa fica nos dois estados que a arte não desenhou (acesso e obrigado). */
.dPanels {
    margin-block-start: 2.5rem;
}

.sdi-painel-caixa {
    display: block;
    padding: 2rem;
    border: 1px solid var(--sdi-texto);
    border-radius: 16px;
}

.dPanels h3 {
    margin-bottom: .75rem;
    font-size: 1.5rem;
    font-weight: 900;
}

.dPanels p {
    color: var(--sdi-texto-suave);
}

.dPanels .sdi-link-secundario {
    display: inline-block;
    margin-top: 1.25rem;
    font-size: .9375rem;
}


/* ---------- 6b. VÍDEO (arte: node 4:71) ----------
   Seção preta, do tamanho da tela, com os vídeos da tipografia viva SANGRANDO para fora
   e a frase numa pílula cinza no centro. As camadas tocam em sequência (js/video_secao.js).

   Medidas da prancheta (seção de 2048 x 876), todas em % para valerem em qualquer tela:
     viva_conversas  2724 x 1562  em x=-338, y=-360   ->  133,0% de largura, -16,5%, -41,1%
     viva_evoluem    2354 x 1349  em x=-144, y=-258   ->  114,9% de largura,  -7,0%, -29,4%
     pílula da frase 310 x 63, raio 60, no centro     ->  #D9D9D9, texto preto de 32 */

.dVideo {
    padding-block: 0;   /* a faixa ocupa a seção inteira */
}

/* Mesma correção do hero (GE-008): a altura era `42.8vw` e crescia sozinha depois que as
   camadas travaram no container. 42,8% de 1440 = 616px = 0,46691 de um container de 1320. */
.sdi-video-faixa {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: max(calc(var(--sdi-container) * 0.46691), 18rem);
}

.sdi-video-camada {
    position: absolute;
    height: auto;
    pointer-events: none;
}

/* MEDIDAS NO CONTAINER, não na janela (2026-09-23) — mesma conta do hero, ancorada no que
   estava na tela a 1440. Antes: conversas 133% / -16,5% / -41,1% e evoluem 114,9% / -7% /
   -29,4%, todos em % da JANELA, que é o que fazia as camadas fugirem do alinhamento em
   tela grande. A altura de referência do `top` é a da faixa a 1440 (42,8vw = 616px). */
.sdi-video-camada--conversas {
    width: calc(var(--sdi-container) * 1.45091);
    left: calc(50% - var(--sdi-container) * 0.72545);
    top: calc(var(--sdi-container) * -0.19190);
}

.sdi-video-camada--evoluem {
    width: calc(var(--sdi-container) * 1.25345);
    left: calc(50% - var(--sdi-container) * 0.62182);
    top: calc(var(--sdi-container) * -0.13727);
}

.sdi-video-frase {
    position: relative;   /* por cima das camadas */
    margin: 0;
    padding: .5em 1.3em;
    border-radius: 999px;
    color: var(--sdi-preto);
    background-color: var(--sdi-cinza-claro);
    font-size: clamp(1rem, 1.6vw, 1.375rem);   /* 32 na prancheta */
    font-weight: 400;
    line-height: 1.1;
}


/* ---------- 7. PALESTRANTES: lista tipográfica + carrossel ----------
   Arte: nodes 4:77 (lista) e 4:97 (carrossel). A lista substituiu a grade de fotos de
   6 por linha (decisão do usuário, 2026-09-19). Os nomes vêm do agenda.json pelo
   js/agenda.js; a barra entre eles é uma borda, não caractere — assim ela não é lida
   em voz alta e some no fim de cada linha.

   As classes .sdi-pal-* logo abaixo continuam em uso: são os blocos de palestrante
   DENTRO das linhas da agenda (foto 91x91 + nome + empresa). */

/* nomes em 90 na prancheta = 3.9375rem; a lista centraliza e quebra sozinha */
.sdi-speakers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    /* o vão horizontal é em `em` porque a barra laranja é posicionada na metade dele */
    gap: 0 1.2em;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: clamp(1.75rem, 4.4vw, 3.9375rem);
    line-height: 1.15;
    letter-spacing: -.02em;
    text-align: center;
}

/* A barra entre os nomes é LARANJA (node 4:81: 87 x 2,9 em #FF6200), não um risco preto,
   e tem altura fixa em relação ao corpo — 87/90 do tamanho da fonte — em vez de acompanhar
   a caixa. Assim ela fica igual com o nome em texto e com o nome em canvas, que é mais alta.

   A barra mora DENTRO DO GAP (right: -.6em = metade do gap de 1.2em), e não num padding
   do item. A diferença importa: se o espaço fosse padding, esconder a barra no fim da linha
   mudaria a largura do item, o que mudaria ONDE a linha quebra — e a marcação de fim de
   linha viraria mentira a cada vez. Com a barra no gap, esconder não mexe no layout. */
.sdi-speakers li {
    position: relative;
}

.sdi-speakers li::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -.6em;
    width: 2px;
    height: .97em;
    margin-block-start: -.485em;
    background-color: var(--sdi-acento);
}

/* Sem barra no fim de cada LINHA. Quem descobre onde a linha quebrou é o js/agenda.js
   (mede o offsetTop e põe .sdi-speakers-fim) — CSS sozinho não enxerga a quebra do flex.
   Sem JS, o :last-child garante pelo menos que a lista não termina com um risco. */
.sdi-speakers li:last-child::after,
.sdi-speakers li.sdi-speakers-fim::after {
    display: none;
}

/* Com a onda rodando (js/nomes_onda.js pôs a classe no <ul>), as barras nascem apagadas
   e só acendem quando a linha inteira termina de virar tipografia — senão ficam
   penduradas no vazio enquanto os nomes ainda são onda. */
.sdi-speakers--onda li::after {
    opacity: 0;
    transition: opacity .55s ease;
}

.sdi-speakers--onda li.sdi-speakers-barra-on::after {
    opacity: 1;
}

/* a canvas de cada nome */
.sdi-speakers canvas {
    display: block;
    max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
    .sdi-speakers--onda li::after {
        transition: none;
    }
}

/* CARROSSEL (node 4:97): o .carousel do Bootstrap (toque e teclado prontos). Passa sozinho a cada
   7 s e arrasta com o mouse pelo js/carrossel_destaques.js (com as pausas: mouse em cima, foco, fora
   da tela, "reduzir movimento"). Foto grande à esquerda, citação e nome à direita, setas nas bordas.
   A foto entra com a máscara de listras da tipografia viva sobre fundo colorido (a técnica
   WaveEdge do _docs/palestrante-onda.md); até ela chegar, a área mostra um MARCADOR explícito
   (.sdi-carrossel-foto--marcador) com o que vai ali. Lâminas "Fulano da Silva" = fictícias. */
.sdi-carrossel {
    padding-inline: 4.5rem;                      /* lugar das setas, nas bordas como na arte */
}

/* dá para pegar e arrastar com o mouse; no gesto, nada de selecionar texto nem arrastar imagem */
.sdi-carrossel .carousel-inner {
    cursor: grab;
}

.sdi-carrossel.is-arrastando .carousel-inner {
    cursor: grabbing;
    user-select: none;
}

.sdi-carrossel img {
    -webkit-user-drag: none;
    user-select: none;
}

.sdi-carrossel-seta.carousel-control-prev,
.sdi-carrossel-seta.carousel-control-next {
    width: 3rem;
    color: var(--sdi-texto);
    opacity: .75;
    border-radius: 999px;                        /* regra de forma: o que se clica é pílula */
}

.sdi-carrossel-seta:hover,
.sdi-carrossel-seta:focus-visible {
    color: var(--sdi-texto);
    opacity: 1;
}

.sdi-carrossel-seta:focus-visible {
    outline: 2px solid var(--sdi-acento);
    outline-offset: -4px;
}

/* o chevron da arte (img/ico_seta_carrossel.svg) pintado com a cor do texto */
.sdi-carrossel-seta-icone {
    width: 1.0625rem;
    height: 2.125rem;
    background-color: currentColor;
    -webkit-mask: url("../img/ico_seta_carrossel.svg") center / contain no-repeat;
    mask: url("../img/ico_seta_carrossel.svg") center / contain no-repeat;
}

.carousel-control-prev .sdi-carrossel-seta-icone {
    transform: rotate(180deg);
}

/* a foto manda na largura (é ela que tem proporção fixa); o texto ocupa o resto */
.sdi-carrossel-lamina {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 3rem;
    align-items: center;
    margin: 0;
}

/* 735 x 1307 na prancheta — retrato bem alto; 12px = cartão de conteúdo (regra de forma) */
.sdi-carrossel-foto {
    height: clamp(18rem, 32vw, 32rem);
    aspect-ratio: 735 / 1307;
    background-color: var(--sdi-superficie);
    border-radius: 12px;
}

/* MARCADOR da foto/vídeo (provisório): fundo da cor da lâmina com listras verticais — lembra a
   máscara da arte — contorno tracejado por dentro e o texto do que entra ali */
.sdi-carrossel-foto--marcador {
    display: grid;
    place-items: center;
    background-color: var(--sdi-carrossel-cor, #3b3b3b);
    background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .08) 0 1.25rem, transparent 1.25rem 2.5rem);
    outline: 1px dashed rgba(255, 255, 255, .55);
    outline-offset: -.75rem;
}

.sdi-carrossel-foto--1 { --sdi-carrossel-cor: #1e4536; }   /* verde-escuro, como a lâmina da arte */
.sdi-carrossel-foto--2 { --sdi-carrossel-cor: #1b2a5e; }
.sdi-carrossel-foto--3 { --sdi-carrossel-cor: #5e2a12; }
.sdi-carrossel-foto--4 { --sdi-carrossel-cor: #3b3b3b; }

.sdi-carrossel-marcador {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 1.5rem;
    color: var(--sdi-branco);
    text-align: center;
    font-size: .875rem;
    line-height: 1.3;
}

.sdi-carrossel-marcador i {
    font-size: 2.25rem;
    margin-bottom: .25rem;
}

.sdi-carrossel-marcador b {
    font-size: 1.0625rem;
    font-weight: 700;
}

.sdi-carrossel-marcador small {
    font: .6875rem/1.4 var(--sdi-fonte-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .8;
}

.sdi-carrossel-citacao {
    margin: 0;
    font-size: clamp(1.5rem, 3.5vw, 3.125rem);   /* 71 na prancheta */
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -.02em;
}

.sdi-carrossel-nome {
    margin: 2rem 0 0;
    font-size: clamp(1.25rem, 2.8vw, 2.5rem);    /* 57 na prancheta */
    font-weight: 400;
}

.sdi-pal .sdi-pal-foto {
    margin-bottom: 1rem;
}

.sdi-pal-nome {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
}

.sdi-pal-cargo {
    margin: .25rem 0 0;
    font-size: .875rem;
    color: var(--sdi-texto-suave);
}

.sdi-pal-empresa {
    display: inline-block;
    margin-top: .5rem;
    padding: .1rem .6rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    border: 1px solid var(--sdi-linha);
}


/* ---------- 8. AGENDA ----------
   HTML gerado pelo js/agenda.js a partir do agenda.json (_docs/05).
   Mexeu nas classes lá, mexa aqui. */

/* Linha de cima, como na arte (node 4:104): **o título "Agenda" fica na MESMA linha**,
   com as abas de dia logo ao lado, e trilha + busca à direita. Sem quebrar linha a
   partir do tablet: quem encolhe é o botão de trilha (com "…") e a busca. No celular
   empilha (to767.css).
   O título vem da página e é movido para cá pelo js/agenda.js — ele não pode nascer
   aqui dentro porque o innerHTML do [data-agenda] apagaria. */
.sdi-agenda-controles {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.sdi-agenda-controles .sdi-secao-rotulo {
    flex: 0 0 auto;
    margin: 0;
}

.sdi-agenda-controles .sdi-dias {
    flex: 0 0 auto;
    flex-wrap: nowrap;
}

.sdi-agenda-controles .sdi-dias .nav-link {
    white-space: nowrap;
}

.sdi-agenda-filtros {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 2rem;
    min-width: 0;
}

.sdi-filtro-trilha {
    flex: 0 1 auto;
    min-width: 7rem;
    max-width: 16rem;
}

/* Filtro de trilha: na arte é TEXTO PURO com a setinha — sem caixa, sem borda
   (quem tem contorno ali é só a busca). Largura elástica com "…" para o rótulo não
   empurrar a busca quando a trilha escolhida tem nome comprido. */
.sdi-filtro-btn {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .5rem 0;
    white-space: nowrap;
    font-size: .9375rem;
    color: var(--sdi-texto);
    background-color: transparent;
    border: 0;
    cursor: pointer;
}

.sdi-filtro-btn:hover,
.sdi-filtro-btn[aria-expanded="true"] {
    color: var(--sdi-acento);
}

/* setinha na ponta direita (faz diferença no celular, botão na largura toda) */
.sdi-filtro-seta {
    margin-left: auto;
    font-size: .75em;
}

.sdi-filtro-rotulo {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sdi-filtro-trilha .dropdown-item {
    font-size: .9375rem;
    white-space: nowrap;
}

/* a busca encolhe menos que o botão de trilha (flex-shrink .3) */
.sdi-busca {
    position: relative;
    flex: 0 .3 18rem;
    min-width: 9rem;
}

.sdi-busca .fa-magnifying-glass {
    position: absolute;
    top: 50%;
    left: .85rem;
    transform: translateY(-50%);
    font-size: .875rem;
    color: var(--sdi-texto-suave);
    pointer-events: none;
}

/* a busca é a única peça com contorno na linha, e em pílula (arte, node 4:110) */
.sdi-busca .form-control {
    height: 100%;
    padding-left: 2.5rem;
    border-radius: 999px;
    border-color: var(--sdi-linha-media);
    text-overflow: ellipsis;   /* texto de exemplo cortado com "…" no tablet */
}

/* com filtro ativo, cada aba mostra quantas sessões batem naquele dia */
.sdi-dia-qtd {
    font-weight: 300;
}

.sdi-agenda-vazio {
    padding-block: 2.5rem;
    border-top: 1px solid var(--sdi-texto);
    color: var(--sdi-texto-suave);
}

.sdi-agenda-erro {
    color: var(--sdi-texto-suave);
}

/* busca por texto: resultados dos dois dias numa lista só */
.sdi-agenda-resumo {
    margin-bottom: .75rem;
    font-family: var(--sdi-fonte-mono);
    font-size: .75rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sdi-texto-suave);
}

.sdi-agenda-resumo:empty {
    display: none;
}

/* dia acima do horário — só aparece nos resultados da busca */
.sdi-sessao-dia {
    display: none;
    margin-bottom: .2rem;
    font-family: var(--sdi-fonte-mono);
    font-size: .9rem;
    font-weight: 400;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--sdi-texto-suave);
}

.sdi-agenda-resultados .sdi-sessao-dia {
    display: block;
}

/* nos resultados, a coluna do horário alarga para o dia caber numa linha
   ("05 NOV · QUINTA" em .9rem ≈ 150 px); celular volta ao normal no to767.css */
.sdi-agenda-resultados .sdi-sessao {
    grid-template-columns: 10.5rem minmax(0, 1fr) auto;
}

.sdi-sessoes {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--sdi-texto);
}

/* 3 colunas: horário | conteúdo | botão "+" ; a descrição abre na coluna do conteúdo */
.sdi-sessao {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr) auto;
    gap: .5rem 2rem;
    padding-block: 1.75rem;
    border-bottom: 1px solid var(--sdi-linha);
}

.sdi-sessao-hora {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.sdi-sessao-hora small {
    display: block;
    font-size: .875rem;
    font-weight: 300;
    color: var(--sdi-texto-suave);
}

.sdi-sessao-trilha {
    margin-bottom: .4rem;
    font-family: var(--sdi-fonte-mono);
    font-size: .6875rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sdi-texto-suave);
}

/* COR DA TRILHA — discreta: só um quadradinho antes do nome; o texto segue cinza.
   data-trilha = id da trilha no agenda.json. data-trilha="" ("todas", no filtro)
   = quadradinho vazado. */
[data-trilha="fazer"]       { --sdi-trilha-cor: var(--sdi-trilha-fazer); }
[data-trilha="tecnologias"] { --sdi-trilha-cor: var(--sdi-trilha-tecnologias); }
[data-trilha="marcas"]      { --sdi-trilha-cor: var(--sdi-trilha-marcas); }
[data-trilha="carreiras"]   { --sdi-trilha-cor: var(--sdi-trilha-carreiras); }

.sdi-sessao-trilha[data-trilha]::before,
.sdi-filtro-trilha [data-trilha]::before {
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    width: .8em;
    height: .8em;
    margin-right: .6em;
    vertical-align: -.05em;
    background-color: var(--sdi-trilha-cor, transparent);
    box-shadow: inset 0 0 0 1px var(--sdi-trilha-cor, var(--sdi-texto-suave));
}

.sdi-filtro-trilha [data-trilha]::before {
    width: .65em;
    height: .65em;
    vertical-align: .05em;
}

/* o rótulo do botão é flex: o quadradinho não pode entrar no corte com "…" */
.sdi-filtro-btn .sdi-filtro-rotulo::before {
    margin-right: .5em;
}

/* "Todas as trilhas" não tem cor, e o quadradinho vazado não existe na arte: some.
   Escolhida uma trilha, o marcador colorido volta — é ele que diz qual está ativa. */
.sdi-filtro-btn .sdi-filtro-rotulo[data-trilha=""]::before {
    display: none;
}

/* selo "palestra em inglês · com tradução simultânea" (idioma da sessão ≠ da página) */
.sdi-sessao-idioma {
    margin-bottom: .4rem;
    font-family: var(--sdi-fonte-mono);
    font-size: .6875rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sdi-texto);
}

/* sessão em andamento (relógio de São Paulo) — ponto laranja = acento */
.sdi-sessao-agora {
    margin-bottom: .4rem;
    font-family: var(--sdi-fonte-mono);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sdi-texto);
}

.sdi-sessao-agora::before {
    content: "";
    display: inline-block;
    width: .6em;
    height: .6em;
    margin-right: .6em;
    border-radius: 50%;
    background-color: var(--sdi-acento);
}

.sdi-sessao-titulo {
    margin: 0 0 1.1rem;
    font-size: 1.25rem;
    font-weight: 700;
}

.sdi-sessao-pals {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sdi-sessao-pal {
    display: flex;
    align-items: center;
    gap: .9rem;
}

/* foto do palestrante na agenda: 64px (56 no celular — to767.css) */
.sdi-sessao-pal .sdi-pal-foto {
    flex: 0 0 auto;
    width: 64px;
    font-size: 1.125rem;
}

.sdi-sessao-pal strong {
    display: block;
    font-size: .9375rem;
}

.sdi-sessao-pal span {
    font-size: .8125rem;
    color: var(--sdi-texto-suave);
}

/* papel naquela sessão (Mediação, Moderadora…) */
.sdi-sessao-papel {
    display: block;
    margin-top: .15rem;
    font-family: var(--sdi-fonte-mono);
    font-size: .6875rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sdi-texto-suave);
}

.sdi-sessao-mais {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    color: var(--sdi-texto);
    background: transparent;
    border: 1px solid var(--sdi-texto);
    border-radius: 999px;   /* quadrado + pílula = círculo */
    cursor: pointer;
}

.sdi-sessao-mais .fa-plus {
    transition: transform .2s;
}

.sdi-sessao-mais[aria-expanded="true"] .fa-plus {
    transform: rotate(45deg);
}

.sdi-sessao-desc {
    grid-column: 2 / 3;
    max-width: 44rem;
    color: var(--sdi-texto-suave);
}

/* abertura, almoço, happy hour: linha mais baixa, sem "+" */
.sdi-sessao--pausa {
    padding-block: 1.1rem;
}

.sdi-sessao--pausa .sdi-sessao-titulo {
    margin: 0;
    font-size: 1rem;
    font-weight: 300;
    color: var(--sdi-texto-suave);
}


/* AGENDAR — botão + balão de cada palestra (js/agendar.js; mockup aprovado em
   _docs/Mockups/agendamento.html). Celular: to767.css. */

/* coluna da direita da sessão: "Agendar" + "+" lado a lado */
.sdi-sessao-acoes {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

.sdi-agendar {
    position: relative;
}

.sdi-agendar-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 2.75rem;
    padding: 0 .9rem;
    font-size: .875rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--sdi-texto);
    background: transparent;
    border: 1px solid var(--sdi-texto);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.sdi-agendar-btn:hover,
.sdi-agendar-btn[aria-expanded="true"] {
    color: var(--sdi-fundo);
    background-color: var(--sdi-texto);
}

.sdi-agendar-btn:focus-visible,
.sdi-agendar-ok:focus-visible {
    outline: 2px solid var(--sdi-acento);
    outline-offset: 2px;
}

/* já agendado: continua clicável (reenviar / outro e-mail), mais discreto */
.sdi-agendar-btn.is-agendado {
    border-color: var(--sdi-linha);
}

.sdi-agendar-btn.is-agendado .fa-check {
    color: var(--sdi-acento);
}

.sdi-agendar-btn.is-agendado:hover .fa-check,
.sdi-agendar-btn.is-agendado[aria-expanded="true"] .fa-check {
    color: inherit;
}

.sdi-agendar-pop {
    position: absolute;
    top: calc(100% + .6rem);
    right: 0;
    z-index: 30;
    width: 22rem;
    max-width: calc(100vw - 2rem);
    padding: 1.25rem;
    text-align: left;
    background-color: var(--sdi-fundo);
    border: 1px solid var(--sdi-texto);
    /* canto de 16, como o modal de inscrição e os cartões — a gramática da arte */
    border-radius: 16px;
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .14);
}

/* setinha apontando para o botão */
.sdi-agendar-pop::before {
    content: "";
    position: absolute;
    top: -.45rem;
    right: 1.1rem;
    width: .8rem;
    height: .8rem;
    background-color: var(--sdi-fundo);
    border-top: 1px solid var(--sdi-texto);
    border-left: 1px solid var(--sdi-texto);
    transform: rotate(45deg);
}

.sdi-agendar-titulo {
    margin: 0 0 .75rem;
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.35;
}

.sdi-agendar-palestra {
    display: block;
    margin-top: .15rem;
    font-size: .8125rem;
    font-weight: 400;
    color: var(--sdi-texto-suave);
}

/* campo + botão de check colados */
.sdi-agendar-linha {
    display: flex;
}

/* Campo e botão são colados e formam UMA pílula: o campo arredonda só à esquerda e o
   botão só à direita. É a mesma gramática dos campos do formulário (pílula, fio claro),
   aplicada a um par que precisa continuar grudado. */
.sdi-agendar-linha .form-control {
    flex: 1 1 auto;
    min-width: 0;
    height: 2.75rem;
    padding-inline-start: 1.25rem;
    border-color: var(--sdi-linha-media);
    border-right: 0;
    border-start-start-radius: 999px;
    border-end-start-radius: 999px;
    /* a direita fica reta de propósito: quem arredonda daquele lado é o botão,
       e os dois juntos formam uma pílula só */
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.sdi-agendar-linha .form-control[aria-invalid="true"] {
    border-color: var(--sdi-erro);
}

.sdi-agendar-ok {
    flex: 0 0 3rem;
    display: grid;
    place-items: center;
    height: 2.75rem;
    color: var(--sdi-fundo);
    background-color: var(--sdi-texto);
    border: 1px solid var(--sdi-texto);
    border-start-end-radius: 999px;
    border-end-end-radius: 999px;
    cursor: pointer;
}

/* linha única embaixo do campo: uso do e-mail (LGPD, texto provisório — _docs/pendencias.md);
   com e-mail inválido, o erro toma o lugar dela */
.sdi-agendar-dica,
.sdi-agendar-erro {
    margin: .5rem 0 0;
    font-size: .8125rem;
    line-height: 1.4;
}

.sdi-agendar-dica { color: var(--sdi-texto-suave); }
.sdi-agendar-erro { color: var(--sdi-erro); }

/* progresso por etapas confirmadas pelo servidor (mínimo de 3 s na tela) */
.sdi-agendar-trilho {
    height: 4px;
    background-color: var(--sdi-linha);
    overflow: hidden;
}

.sdi-agendar-barra {
    display: block;
    width: 0;
    height: 100%;
    background-color: var(--sdi-acento);
    transition: width .35s ease;
}

.sdi-agendar-etapa {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: .6rem 0 0;
    font-size: .8125rem;
}

.sdi-agendar-etapa small {
    color: var(--sdi-texto-suave);
    font-variant-numeric: tabular-nums;
}

/* enviado / falhou */
.sdi-agendar-resultado {
    display: flex;
    gap: .75rem;
    font-size: .875rem;
    line-height: 1.45;
}

.sdi-agendar-resultado > .fa-solid {
    flex: 0 0 auto;
    margin-top: .15rem;
    font-size: 1.1rem;
}

.sdi-agendar-resultado.is-ok > .fa-solid { color: var(--sdi-acento); }
.sdi-agendar-resultado.is-erro > .fa-solid { color: var(--sdi-erro); }

.sdi-agendar-resultado p {
    margin: 0 0 .35rem;
}

/* 1º parágrafo em destaque (o que aconteceu) · 2º menor (o que fazer) */
.sdi-agendar-res-titulo {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
}

.sdi-agendar-res-email {
    display: block;
    margin-top: .1rem;
    font-size: .875rem;
    font-weight: 400;
    overflow-wrap: anywhere;   /* e-mail comprido não estoura o balão */
}

.sdi-agendar-resultado .sdi-agendar-res-texto {
    margin-bottom: .6rem;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--sdi-texto-suave);
}

.sdi-agendar-res-texto b {
    color: var(--sdi-texto);
}

.sdi-agendar-link {
    padding: 0;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--sdi-texto);
    background: none;
    border: 0;
    text-decoration: underline;
    text-underline-offset: .2em;
    cursor: pointer;
}

/* "Outras opções" — sempre embaixo, em qualquer estado */
.sdi-agendar-mais {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 1rem;
    padding: .9rem 0 0;
    font-size: .875rem;
    color: var(--sdi-texto-suave);
    background: none;
    border: 0;
    border-top: 1px solid var(--sdi-linha);
    cursor: pointer;
}

.sdi-agendar-mais:hover {
    color: var(--sdi-texto);
}

.sdi-agendar-mais .fa-chevron-down {
    font-size: .75rem;
    transition: transform .2s;
}

.sdi-agendar-mais[aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
}

.sdi-agendar-opcoes {
    margin: .5rem 0 0;
    padding: 0;
    list-style: none;
}

.sdi-agendar-opcoes a {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem 0;
    font-size: .9375rem;
    color: var(--sdi-texto);
    text-decoration: none;
    border-bottom: 1px solid var(--sdi-linha);
}

.sdi-agendar-opcoes li:last-child a {
    border-bottom: 0;
}

.sdi-agendar-opcoes a:hover {
    text-decoration: underline;
}

.sdi-agendar-opcoes .fa-solid {
    width: 1.1rem;
    text-align: center;
    color: var(--sdi-texto-suave);
}

.sdi-agendar-opcoes small {
    margin-left: auto;
    font-size: .75rem;
    color: var(--sdi-texto-suave);
}


/* Carreiras + Diversidade: no fim da seção Agenda, depois do <hr> (antes do rodapé) */
.sdi-hr {
    margin-block: 4.5rem 3.5rem;
    border: 0;
    border-top: 1px solid var(--sdi-texto);
    opacity: 1;
}

.sdi-bloco + .sdi-bloco {
    margin-top: 3.5rem;
}

.sdi-bloco-titulo {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: -.01em;
}

.sdi-bloco-texto {
    max-width: 48rem;
}

.sdi-bloco-texto ul {
    padding-left: 1.25rem;
}

.sdi-bloco-texto li + li {
    margin-top: .5rem;
}

.sdi-bloco-texto .bt_padrao {
    margin-top: .75rem;
}


/* ---------- 8b. CARREIRAS · ÚLTIMAS EDIÇÕES · IMPACTO ----------
   Arte: nodes 4:267, 4:277 e 4:296. As três fecham a página, antes do rodapé. */

/* Título pequeno com filete — "Carreiras", "Agenda", "Impacto do evento" são 32 na arte,
   não 40 em peso 900 como o .sdi-secao-titulo desta casa. Este é o título da arte. */
.sdi-secao-rotulo {
    margin: 0 0 2rem;
    font-size: 1.375rem;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -.02em;
}

/* Título grande — "Confira as últimas edições": 90 na arte, o mesmo corpo dos nomes
   dos palestrantes. */
.sdi-titulo-display {
    margin: 0 0 3rem;
    font-size: clamp(1.75rem, 4.4vw, 3.9375rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -.02em;
}

/* CARROSSEL DE EDIÇÕES — as fotos desfilam sem fim (usuário, 2026-09-19), 3 por ano, e
   cada ano é um grupo aberto pelo seu rótulo.

   COMO O LAÇO FICA INVISÍVEL: o trilho leva o conteúdo DUAS VEZES e a animação o desloca
   exatamente **metade** dele — no último quadro o desenho é idêntico ao do primeiro.
   Para essa metade ser exata, o respiro entre os grupos é `margin-inline-end` em CADA
   grupo, e não `gap` do flex: com `gap`, o trilho teria 3 vãos para 4 grupos e a metade
   cairia meio vão fora do lugar, com um solavanco a cada volta. */
/* A tira ROLA DE VERDADE (`overflow-x: auto`) e é a rolagem que o js/carrossel_edicoes.js
   empurra um tiquinho por quadro. A primeira versão animava um `transform` dentro de
   `overflow: hidden`: desfilava, mas não deixava arrastar, nem usar a roda, nem o dedo
   no celular. Com rolagem de verdade, essas três coisas vêm de graça — e sem JS a tira
   continua rolável, só não anda sozinha. */
.sdi-edicoes-carrossel {
    overflow-x: auto;
    overflow-y: hidden;
    cursor: grab;
    /* sangra até a borda da tela: a tira continua além do container, como no desenho */
    margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -.5);
    padding-inline: calc(var(--bs-gutter-x, 1.5rem) * .5);
    /* a barra de rolagem não aparece no desenho; quem diz que dá para arrastar é o
       cursor de mão + o próprio movimento da tira */
    scrollbar-width: none;
}

.sdi-edicoes-carrossel::-webkit-scrollbar {
    display: none;
}

.sdi-edicoes-carrossel.is-arrastando {
    cursor: grabbing;
}

.sdi-edicoes-trilho {
    display: flex;
    width: max-content;
}

.sdi-edicao {
    flex: 0 0 auto;
    margin-inline-end: 2.5rem;
}

/* rótulo da edição: "30" na arte, com o filete laranja */
.sdi-edicao-titulo {
    margin: 0 0 1.5rem;
    font-size: 1.3125rem;
    font-weight: 400;
    line-height: 1.2;
}

.sdi-edicao-titulo strong {
    font-weight: 700;
}

.sdi-edicao-fotos {
    display: flex;
    gap: 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Cartão: 4:5 (475 x 594 na prancheta), canto de 16 e um véu preto de 20% por cima.
   A largura é calculada para caberem **3 por grupo** na largura do container: a 1440,
   28,5vw = 410px, e 3 x 410 + 2 vãos de 2rem = 1.290, quase exatamente os 1.320 do
   container. No celular o piso de 13rem vale mais que o vw — 3 cartões de 114px não
   seriam foto, seriam selo. */
.sdi-edicao-fotos li {
    position: relative;
    flex: 0 0 auto;
    width: clamp(13rem, 28.5vw, 26rem);
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 12px;
}

/* A 3ª foto de 2024 não veio: cartão neutro no lugar, para o ano não ficar com dois e
   quebrar o ritmo de 3 em 3. Sem o véu preto, que só faz sentido sobre foto. */
.sdi-edicao-foto-vazia {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--sdi-superficie);
}

.sdi-edicao-foto-vazia::after {
    display: none;
}

.sdi-edicao-foto-vazia span {
    font-family: var(--sdi-fonte-mono);
    font-size: .6875rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sdi-texto-suave);
}

.sdi-edicao-fotos li::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, .2);
}

.sdi-edicao-fotos img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* sem isto o navegador entende o arrasto como "arrastar a imagem" e a tira trava */
    pointer-events: none;
}

/* três números grandes com rótulo embaixo. Na arte são 112,425 e 29,98 — dois dos
   valores fora de escala do arquivo, que se leem como 94 e 25 (_docs/09, seção 3). */
.sdi-numeros {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    margin: 0;
}

.sdi-numero dt {
    font-size: clamp(2.25rem, 4.6vw, 4.125rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.03em;
}

.sdi-numero dd {
    margin: .5rem 0 0;
    font-size: 1.0625rem;
}


/* ---------- 9. FOOTER ---------- */

/* O data-bs-theme="dark" só troca as variáveis — quem aplica a cor é esta regra.
   Sem ela os <p> herdam a cor do body (preto) e somem no fundo preto. */
.dFooterPage {
    padding-block: 0 3rem;
    background-color: var(--sdi-fundo);
    color: var(--sdi-texto);
}

/* Faixa do rodapé: o vídeo é o fundo e os textos ficam por cima, com as letras
   cortadas embaixo. Medidas do Figma (página 2048 de largura, node 4:311):
   faixa 667 de altura → 2048/667. */
/* A faixa leva a classe .container do Bootstrap: com isso o vídeo para de crescer
   nos mesmos limites do header (540 / 720 / 960 / 1140 / 1320), em vez de acompanhar
   a tela sem teto. A padding do container é zerada aqui para o vídeo ir de borda a
   borda da faixa; quem devolve o respiro é o .sdi-footer-topo, abaixo. */
.sdi-footer-faixa {
    position: relative;
    aspect-ratio: 2048 / 667;
    overflow: hidden;
    padding-inline: 0;
}

/* O vídeo SANGRA para fora das bordas: no Figma tem 2246 de largura numa página de
   2048 e começa em x = -81 e y = -21 da faixa (-3,148% da altura dela).
   É isso que faz o "S" entrar cortado à esquerda e o "6" à direita. Posicionado em
   percentuais (não object-fit) para reproduzir o enquadramento exato.

   LARGURA E RECUO MEDIDOS NO CONTAINER (2026-09-23), mesma conta do hero: 109,67% de 1440
   = 1579px = 1,1964 containers de 1320. O `top` FICA EM %: a altura do rodapé vem do
   conteúdo, não da janela, então ela nunca fez parte do problema.
   Abaixo de 992 o rodapé é outro layout (`to767.css` e `768to991.css` trocam para
   `position: static` + `object-fit: cover`) e ali o container acompanha a janela de perto
   — aquelas regras ficam como estavam. */
.sdi-footer-kv {
    position: absolute;
    top: -3.148%;
    left: calc(50% - var(--sdi-container) * 0.58860);
    width: calc(var(--sdi-container) * 1.19640);
    height: auto;
}

/* quem pede menos movimento não recebe o vídeo (é decorativo) */
@media (prefers-reduced-motion: reduce) {
    .sdi-footer-kv {
        display: none;
    }
}

/* 4 blocos por cima do vídeo, como no Figma: marca · tema · redes · institucional.
   No desenho começam a 115px do topo de uma faixa de 667 numa página de 2048 → 5,6vw. */
.sdi-footer-topo {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    /* o respiro lateral que a faixa abriu mão, para o texto alinhar com o resto da página */
    padding-inline: calc(var(--bs-gutter-x, 1.5rem) * .5);
    /* 115 de 2048 no Figma. Em % o cálculo é sobre a LARGURA DA FAIXA (não da tela),
       então o texto fica no mesmo ponto depois que a faixa atinge o limite de 1320. */
    padding-block-start: 5.615%;
}

.sdi-footer-legal {
    padding-block-start: 3rem;
}

.sdi-footer-topo p {
    margin: 0;
    font-weight: 400;   /* no Figma o rodapé é peso normal, não negrito */
}

.sdi-footer-marca,
.sdi-footer-tema {
    max-width: 16ch;
    line-height: 1.2;
}

.sdi-footer-links {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.sdi-footer-links a {
    font-size: .8125rem;
    font-weight: 400;
    letter-spacing: .04em;
    color: var(--sdi-texto);
    text-decoration: underline;
    text-underline-offset: .25em;
}

.sdi-footer-links a:hover,
.sdi-footer-links a:focus-visible {
    color: var(--sdi-acento);
}


.sdi-disclaimer {
    font-size: .8125rem;
    font-weight: 300;
    line-height: 1.6;
    color: var(--sdi-texto-suave);
}

.sdi-disclaimer strong {
    font-weight: 700;
    color: var(--sdi-texto);
}

.sdi-copy {
    margin: 2rem 0 0;
    font-size: .8125rem;
    color: var(--sdi-texto-suave);
}


/* ---------- 10. POPUP DE MINI-BIO (js/biopop.js) ----------
   Gatilho = qualquer elemento com data-bio (cards de Palestrantes e
   palestrantes da Agenda). O popup é criado no <body>, com os tokens claros. */

[data-bio] {
    cursor: pointer;
}

[data-bio]:focus-visible {
    outline: 2px solid var(--sdi-acento);
    outline-offset: 4px;
}

/* sinal de que há mini-bio: sublinhado pontilhado no nome */
[data-bio] .sdi-pal-nome,
[data-bio] strong {
    text-decoration: underline dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: .25em;
}

.sdi-biopop {
    position: fixed;
    z-index: 2000;
    display: none;
    padding: 1.25rem;
    border-radius: 16px;
    text-align: left;
    color: var(--sdi-texto);
    background-color: var(--sdi-fundo);
    border: 1px solid var(--sdi-texto);
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .18);
}

.sdi-biopop-topo {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: .9rem;
}

.sdi-biopop-foto {
    flex: 0 0 auto;
    width: 88px;
    height: 88px;
    object-fit: cover;
}

.sdi-biopop-nome {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
}

.sdi-biopop-cargo {
    margin-top: .2rem;
    font-size: .8125rem;
    line-height: 1.3;
    color: var(--sdi-texto-suave);
}

.sdi-biopop .sdi-pal-empresa {
    margin-top: .45rem;
}

.sdi-biopop-bio {
    max-height: 40vh;
    overflow-y: auto;
    font-size: .875rem;
    line-height: 1.55;
    color: var(--sdi-texto-suave);
}

.sdi-biopop-ia {
    display: inline-block;
    margin-right: .4rem;
    padding: .05rem .55rem;
    font: .625rem/1.4 var(--sdi-fonte-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    vertical-align: 1px;
    border: 1px solid var(--sdi-linha);
    border-radius: 999px;
}


@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .bt_padrao,
    .sdi-sessao-mais .fa-plus {
        transition: none;
    }
}