/* ==========================================================================
   modal_inscricao.css — formulário de inscrição (SDI26)
   Componentes dos campos (.sdi-form) + o modal (#ModalInscricao).
   Componentes ESCOLHIDOS em 2026-09-10 (_docs/07): cartões nas escolhas
   (participar, dias, perfil, WhatsApp), etiquetas nas áreas de interesse e
   na diversidade, lista com busca no país, listas nativas (estado, cargo)
   e termos em destaque. Formulário em 3 ETAPAS, layout compacto.
   Vitrine dos componentes: _docs/Mockups/formulario.html.
   Cores só por tokens (--sdi-*); campos com 16px (zoom do iPhone).
   Comportamento: js/form_componentes.js (campos) e js/inscricao.js (etapas,
   validação e envio).
   ========================================================================== */


/* ---------- Modal ---------- */

#ModalInscricao .modal-content {
    color: var(--sdi-texto);
    background-color: var(--sdi-fundo);
    border: 1px solid var(--sdi-texto);
}

#ModalInscricao .modal-header {
    border-bottom: 1px solid var(--sdi-linha);
}

/* canto de 16, como os cartões (o bootstrap_fix deixa todo modal em canto reto;
   aqui a regra é mais específica e ganha) */
#ModalInscricao .modal-content {
    border-radius: 16px;
}

/* título com o filete laranja e peso normal, como todo título de seção da arte */
#ModalInscricao .modal-title {
    padding-inline-start: 1.25rem;
    border-inline-start: 1px solid var(--sdi-acento);
    font-size: 1.375rem;
    font-weight: 400;
}

#ModalInscricao .modal-body {
    padding: 1.25rem 1.75rem 0;
}


/* ---------- Estrutura (compacta) ---------- */

.sdi-form .sdi-campo {
    margin-bottom: 1rem;
}

/* grupos de opções usam fieldset + legend (acessível); o legend imita o label */
.sdi-form fieldset.sdi-campo {
    min-width: 0;
    padding: 0;
    border: 0;
}

.sdi-form .form-label {
    display: block;
    float: none;
    width: auto;
    padding: 0;
    margin-bottom: .35rem;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--sdi-texto);
}

.sdi-form .sdi-obrigatorio {
    margin-left: .15rem;
    color: var(--sdi-acento);
}

.sdi-form .sdi-opcional {
    font-weight: 400;
    color: var(--sdi-texto-suave);
}

.sdi-form .form-text {
    margin-top: .35rem;
    font-size: .75rem;
    line-height: 1.45;
    color: var(--sdi-texto-suave);
}

/* título de bloco dentro da etapa: Participação / Perfil / Diversidade… */
.sdi-form .sdi-bloco-titulo {
    margin: 1.5rem 0 .9rem;
    padding-top: .75rem;
    border-top: 1px solid var(--sdi-texto);
    font-family: var(--sdi-fonte-mono);
    font-size: .75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sdi-texto-suave);
}

/* o primeiro título de bloco da etapa não leva o filete de cima */
.sdi-form .sdi-bloco-titulo--primeiro {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}


/* ---------- Etapas e progresso ---------- */

.sdi-progresso {
    margin-bottom: 1.25rem;
}

/* "Etapa N de 3" à esquerda, nome da etapa à direita */
/* sem a fonte mono: a arte não usa mono em lugar nenhum. A caixa alta espaçada
   na própria Itau Display Pro dá o mesmo ar técnico. */
.sdi-progresso-rotulo {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .25rem 1rem;
    margin: 0 0 .5rem;
    font-family: var(--sdi-fonte);
    font-size: .8125rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sdi-texto-suave);
}

.sdi-progresso-rotulo b {
    font-weight: 700;
    color: var(--sdi-texto);
}

.sdi-progresso-trilho {
    height: 3px;
    background-color: var(--sdi-linha);
}

.sdi-progresso-trilho span {
    display: block;
    height: 100%;
    background-color: var(--sdi-acento);
    transition: width .25s;
}

/* a etapa recebe o foco ao trocar (leitor de tela) sem mostrar contorno */
.sdi-etapa:focus {
    outline: none;
}

/* Voltar / Continuar: presos no pé do modal, sempre à vista */
.sdi-etapa-nav {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
    padding-block: .9rem 1.25rem;
    background-color: var(--sdi-fundo);
    border-top: 1px solid var(--sdi-linha);
}

.sdi-etapa-nav [data-proxima],
.sdi-etapa-nav [data-enviar] {
    margin-left: auto;
}


/* ---------- Texto e lista nativa ---------- */

/* Campos em PÍLULA com fio fino e claro — a gramática de formulário da arte
   (2026-09-19). O desenho não tem formulário, mas tem a busca da agenda (node 4:110):
   cápsula, borda #BDBDBD e altura de botão. A borda de antes era #666, bem mais pesada
   que qualquer fio do Figma. Mockup: _docs/Mockups/formulario_arte.html. */
.sdi-form .form-control,
.sdi-form .form-select {
    /* Altura e respiro apertados em 23/09 (usuário). Antes: 3rem e .7rem 1.25rem.
       ⚠️ 2.6rem dá 41,6px, abaixo dos 44px de alvo de toque recomendado — no celular o
       `to767.css` pode devolver a altura, se incomodar. */
    min-height: 2.6rem;
    padding: .5rem 1rem;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--sdi-texto);
    background-color: var(--sdi-fundo);
    border: 1px solid var(--sdi-linha-media);
    border-radius: 999px;
}

/* a seta cheia do navegador vira o chevron fino do "Todas as trilhas" */
/* o chevron acompanha o respiro novo: 1rem da borda, e o espaço reservado à direita cai
   de 2.75 para 2.5rem (1rem de padding + 1.5rem para o ícone) */
.sdi-form .form-select {
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
    background-size: .8rem;
    background-position: right 1rem center;
}

.sdi-form .form-control::placeholder {
    color: var(--sdi-texto-suave);
    opacity: .75;
}

.sdi-form .form-control:focus,
.sdi-form .form-select:focus {
    border-color: var(--sdi-texto);
    box-shadow: none;
    outline: 2px solid var(--sdi-acento);
    outline-offset: 2px;
}

.sdi-form .form-control:disabled,
.sdi-form .form-select:disabled {
    background-color: var(--sdi-superficie);
    opacity: .7;
}

/* erro: .is-invalid (Bootstrap/jQuery Validate) + mensagem logo abaixo */
.sdi-form .form-control.is-invalid,
.sdi-form .form-select.is-invalid {
    padding-right: 1rem;
    border-color: var(--sdi-erro);
    background-image: none;
}

.sdi-form .form-select.is-invalid {
    padding-right: 2.5rem;
    background-image: var(--bs-form-select-bg-img);
}

.sdi-form .invalid-feedback,
.sdi-form label.error {
    display: block;
    margin-top: .35rem;
    font-size: .8125rem;
    font-weight: 400;
    color: var(--sdi-erro);
}

/* erro em grupo (cartões, etiquetas, termos): js/inscricao.js marca o fieldset */
.sdi-form fieldset.is-invalid .sdi-opcao,
.sdi-form fieldset.is-invalid .sdi-chips .btn-check + label,
.sdi-form fieldset.is-invalid .form-check-input {
    border-color: var(--sdi-erro);
}

/* mensagem de sucesso recebe o foco (leitor de tela) sem mostrar contorno */
.sdi-form [data-sucesso]:focus {
    outline: none;
}


/* ---------- Caixa de marcar e rádio (dentro dos cartões e nos termos) ---------- */

.sdi-form .form-check {
    margin-bottom: .5rem;
    padding-left: 1.9rem;
}

.sdi-form .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: .1rem;
    margin-left: -1.9rem;
    background-color: var(--sdi-fundo);
    border: 1px solid var(--sdi-texto);
    cursor: pointer;
}

/* A CAIXA DE SELEÇÃO FICA QUADRADA DE PROPÓSITO — não é sobra da regra de forma.
   Quadrado = marca várias; redondo = escolhe uma. É a convenção que todo mundo lê sem
   pensar, e a arte não desenha nenhum dos dois para dizer o contrário. */
.sdi-form .form-check-input[type="checkbox"] {
    border-radius: 0;
}

.sdi-form .form-check-input:checked {
    background-color: var(--sdi-texto);
    border-color: var(--sdi-texto);
}

.sdi-form .form-check-input:focus {
    border-color: var(--sdi-texto);
    box-shadow: none;
}

.sdi-form .form-check-input:focus-visible {
    outline: 2px solid var(--sdi-acento);
    outline-offset: 2px;
}

.sdi-form .form-check-label {
    font-size: 1rem;
    cursor: pointer;
}


/* ---------- Cartões (escolha única e múltipla) ----------
   Participar, Dias presenciais, Perfil e WhatsApp. O rádio/caixa fica
   visível dentro do cartão; a descrição (<span>) é opcional. */

.sdi-opcoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: .5rem;
}

/* canto de 16 na arte, como os cartões de foto das edições (node 4:287) */
.sdi-opcao {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: 0;
    padding: 1rem 1.25rem;
    background-color: var(--sdi-fundo);
    border: 1px solid var(--sdi-linha-media);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

.sdi-form .sdi-opcao .form-check-input {
    flex: 0 0 auto;
    margin: .1rem 0 0;
}

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

.sdi-opcao span {
    display: block;
    margin-top: .15rem;
    font-size: .75rem;
    color: var(--sdi-texto-suave);
}

.sdi-opcao:hover {
    border-color: var(--sdi-texto);
}

/* escolhido: só o contorno preto. Na arte o cinza é fundo de coisa neutra
   (a pílula da frase do vídeo), não de coisa selecionada. */
.sdi-opcao:has(input:checked) {
    background-color: var(--sdi-fundo);
    border-color: var(--sdi-texto);
    box-shadow: inset 0 0 0 1px var(--sdi-texto);
}


/* ---------- Etiquetas clicáveis (áreas de interesse e diversidade) ---------- */

.sdi-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.sdi-chips .btn-check + label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    padding: .5rem 1.1rem;
    font-size: .875rem;
    color: var(--sdi-texto);
    background-color: var(--sdi-fundo);
    border: 1px solid var(--sdi-linha-media);
    border-radius: 999px;
    cursor: pointer;
}

.sdi-chips .btn-check + label::before {
    content: "+";
    font-weight: 700;
}

.sdi-chips .btn-check:checked + label {
    color: var(--sdi-fundo);
    background-color: var(--sdi-texto);
    border-color: var(--sdi-texto);
}

.sdi-chips .btn-check:checked + label::before {
    content: "\2713";
}

/* escolha única em etiquetas (gênero, orientação, raça): sem o "+", que sugere
   "somar"; só o ✓ quando marcada */
.sdi-chips .btn-check[type="radio"]:not(:checked) + label::before {
    display: none;
}

.sdi-chips .btn-check:focus-visible + label {
    outline: 2px solid var(--sdi-acento);
    outline-offset: 2px;
}


/* ---------- Lista com busca (País) — select[data-busca] ----------
   O <select> original fica dentro, invisível (envio, condicionais, validação);
   o js/form_componentes.js monta o campo de busca e a lista por cima. */

.sdi-busca {
    position: relative;
}

.sdi-busca .sdi-busca-nativo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

/* a setinha de lista no campo avisa que dá para escolher, não só digitar */
.sdi-form .sdi-busca-campo {
    padding-right: 2.25rem;
    background-image: var(--bs-form-select-bg-img);
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
}

.sdi-busca-lista {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 60;
    min-width: 14rem;
    max-height: 16rem;
    margin: 0;
    padding: .35rem;
    overflow-y: auto;
    list-style: none;
    background-color: var(--sdi-fundo);
    border: 1px solid var(--sdi-texto);
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .15);
}

.sdi-busca-opcao {
    padding: .5rem .75rem;
    cursor: pointer;
}

.sdi-busca-opcao:hover,
.sdi-busca-opcao.ativa {
    background-color: var(--sdi-superficie);
}

.sdi-busca-opcao[aria-selected="true"] {
    font-weight: 700;
}

.sdi-busca-separador {
    height: 1px;
    margin: .35rem .25rem;
    background-color: var(--sdi-linha);
}

.sdi-busca-vazio {
    padding: .5rem .75rem;
    color: var(--sdi-texto-suave);
}

.sdi-busca:has(.sdi-busca-nativo.is-invalid) .sdi-busca-campo {
    border-color: var(--sdi-erro);
}


/* ---------- Celular com DDI (intl-tel-input 17, /libraries) ---------- */

.sdi-form .iti {
    display: block;
    width: 100%;
}

/* A caixa da bandeira fica colada à esquerda do campo: com o campo em pílula, ela
   precisa arredondar o canto esquerdo também, senão sobra um degrau quadrado dentro
   da cápsula. O respiro extra à esquerda é para a bandeira não encostar na curva. */
.sdi-form .iti--separate-dial-code .iti__selected-flag {
    padding-left: 1rem;
    background-color: var(--sdi-superficie);
    border-start-start-radius: 999px;
    border-end-start-radius: 999px;
}

.sdi-form .iti__country-list {
    z-index: 70;
    font-size: .9375rem;
    color: var(--sdi-texto);
    border: 1px solid var(--sdi-texto);
    border-radius: 16px;
    overflow: hidden;   /* o realce do item não pode vazar pelo canto arredondado */
    box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .15);
}

.sdi-form .iti__country.iti__highlight {
    background-color: var(--sdi-superficie);
}


/* ---------- Termos (em destaque) ----------
   A caixa é um fieldset.sdi-campo: o seletor precisa ser mais forte que o
   ".sdi-form fieldset.sdi-campo", que zera padding e borda dos grupos. */

.sdi-form fieldset.sdi-termos,
.sdi-termos {
    padding: 1rem 1.25rem;
    background-color: var(--sdi-superficie);
    border: 1px solid var(--sdi-texto-suave);
}

.sdi-form fieldset.sdi-termos.is-invalid {
    border-color: var(--sdi-erro);
}

/* texto legal: um pouco menor que o resto do form */
.sdi-termos .form-check-label {
    font-size: .875rem;
    line-height: 1.45;
}

.sdi-termos a {
    font-weight: 700;
}


/* ---------- Envio e mensagens ---------- */

.bt_padrao:disabled,
.bt_padrao[aria-disabled="true"] {
    opacity: .35;
    cursor: not-allowed;
    pointer-events: none;
}

.bt_padrao .spinner-border {
    width: 1rem;
    height: 1rem;
    border-width: .15em;
}

.sdi-alerta {
    padding: .8rem 1rem;
    font-size: .875rem;
    background-color: var(--sdi-superficie);
    border-left: 3px solid var(--sdi-erro);
}

.sdi-alerta strong {
    color: var(--sdi-erro);
}

.sdi-sucesso {
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    border: 1px solid var(--sdi-texto);
}

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

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


/* ==========================================================================
   MODAL DE INTERESSE — save the date (2026-09-23)

   O pop-up do botão "Quero receber novidades". NÃO é o formulário de inscrição: são três
   campos (nome, e-mail, interesse em presencial), pedido do cliente em 22/09.

   Do `Formulário v2` da arte (node 88:405) sai só a GRAMÁTICA GRÁFICA — modal de raio 24,
   X de 44px, título pequeno com filete, frase grande, campo pílula com fio preto, rótulo
   com asterisco laranja e botão preto pílula com seta. O conteúdo é do cliente.

   Tudo escopado em `#ModalInteresse`: o modal de inscrição da fase 2 fica intacto.
   Desenho aprovado em _docs/Mockups/modal_interesse.html.
   ========================================================================== */

/* LARGURA: 640, que é a do desenho aprovado. Sem isto o `.modal-dialog` fica com os 500px
   padrão do Bootstrap e os três cartões do presencial se espremem — "Ainda não sei" quebra
   em duas linhas. (O modal de inscrição usa `modal-lg`, 800; este é mais curto e não
   precisa de tanto.) */
#ModalInteresse .modal-dialog {
    max-width: 640px;
}

/* o v2 tem raio 24 e nenhuma borda — o modal de inscrição tem 16 e fio preto */
#ModalInteresse .modal-content {
    color: var(--sdi-texto);
    background-color: var(--sdi-fundo);
    border: 0;
    border-radius: 24px;
}

/* o v2 não tem linha sob o título.
   O RESPIRO SOB O TÍTULO é 1rem aqui + .25rem do topo do .modal-body = 1.25rem, o MESMO
   valor da `margin-bottom` da .sdi-interesse-frase (usuário, 23/09: "o espaçamento da seta
   rosa, aplica na seta verde"). Antes era .25rem + .25rem = 8px, contra os 20px de baixo —
   o título parecia colado na frase. Mexer daqui e não da frase mantém os dois respiros
   amarrados ao mesmo número: quem mudar um, muda o outro de propósito. */
#ModalInteresse .modal-header {
    border-bottom: 0;
    padding: 1.25rem 1.75rem 1rem;
    align-items: flex-start;
}

/* O X de 44px do canto, como a arte desenha: CÍRCULO PRETO CHEIO com o × branco dentro —
   não o × solto do Bootstrap (conferido no print do v2 pelo usuário, 23/09).
   O `background-image` é trocado porque o do Bootstrap é preto e sumiria no círculo.
   `margin: 0` sozinho mataria o `margin-left: auto` e o X colaria no título. */
#ModalInteresse .btn-close {
    width: 44px;
    height: 44px;
    margin: 0 0 0 auto;
    padding: 0;
    opacity: 1;
    border-radius: 50%;
    background-color: var(--sdi-preto);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M3.5 3.5l9 9M12.5 3.5l-9 9'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 15px;
    flex: 0 0 auto;
}

#ModalInteresse .btn-close:hover,
#ModalInteresse .btn-close:focus-visible {
    background-color: #2E2E2E;
}

#ModalInteresse .modal-title {
    padding-inline-start: 1.25rem;
    border-inline-start: 1px solid var(--sdi-acento);
    font-size: 1.375rem;
    font-weight: 400;
    line-height: 1.15;
}

#ModalInteresse .modal-body {
    padding: .25rem 1.75rem 1.25rem;
}

/* RESPIRO APERTADO (usuário, 23/09: "o espaçamento dos campos está gerando muita rolagem").
   O formulário de inscrição tem 3 etapas e pode respirar; este modal é curto e precisa
   caber sem rolar num notebook. */
#ModalInteresse .sdi-form .sdi-campo {
    margin-bottom: .75rem;
}

#ModalInteresse .sdi-form .form-label {
    margin-bottom: .3rem;
}

/* A FRASE. É a hierarquia do v2 — o título é pequeno e a frase fala mais alto —, mas MENOR
   do que a proporção crua da prancheta (usuário, 23/09: "a fonte do título ficou muito
   grande"). Lá o título tem 32 e a frase 52, numa página de 1060; aqui a frase ficou em 26,
   que mantém a hierarquia sem empurrar o modal para fora da tela. */
.sdi-interesse-frase {
    margin: 0 0 1.25rem;
    font-size: clamp(1.1875rem, 2.2vw, 1.625rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -.01em;
    max-width: 18em;
}

/* campo com FIO PRETO — é o que muda do formulário de inscrição, que usa o cinza #BDBDBD */
#ModalInteresse .sdi-form .form-control {
    border-color: var(--sdi-texto);
}

/* 🔴 A BORDA DE ERRO PRECISA VIR DEPOIS, E COM MAIS PESO. Achado do usuário em 23/09: o campo
   inválido continuava com o fio preto. Não era a regra de erro faltando — ela existe lá em cima
   (`.sdi-form .form-control.is-invalid`) —, era ESPECIFICIDADE: a regra logo acima tem 1 ID + 2
   classes e ganha de 3 classes. O fio preto do v2, que eu pus aqui, apagava o vermelho.
   Vale para os outros dois modais também, se um dia ganharem fio próprio: quem estreita o
   seletor do estado normal tem de estreitar o do erro junto. */
#ModalInteresse .sdi-form .form-control.is-invalid {
    border-color: var(--sdi-erro);
}

/* RÓTULO: o MESMO TAMANHO do formulário de inscrição (.875rem, que vem do `.sdi-form`),
   só que com PESO REGULAR, como o v2 desenha — lá nada é bold, quem destaca é o tamanho.
   ⚠️ Eu tinha forçado 1.0625rem aqui, e o usuário pegou em 23/09: dois formulários no mesmo
   site com campos de tamanhos diferentes. Não há motivo para divergir — o que muda entre
   os dois é a moldura (raio 24, fio preto, X em círculo), não o corpo do texto. */
#ModalInteresse .sdi-form .form-label {
    font-weight: 400;
}

/* CARTÕES NUMA LINHA SÓ (usuário, 23/09). O `.sdi-opcoes` do formulário de inscrição usa
   `auto-fit` com mínimo de 12rem, que nesta largura quebraria os três em duas linhas. Aqui
   as colunas são fixas em três, com `minmax(0, 1fr)` para o cartão encolher em vez de
   empurrar a grade. */
#ModalInteresse .sdi-opcoes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .625rem;
    margin-block-start: .35rem;
}

/* Os cartões acompanham a altura nova do campo: com o campo em 41,6px e o cartão no
   respiro antigo, o cartão ficava mais alto que os campos logo acima — e aqui ele tem uma
   linha só de texto, diferente do formulário de inscrição, onde o cartão tem título e
   subtítulo e é mais alto de propósito. */
#ModalInteresse .sdi-opcao {
    padding: .65rem 1rem;
    align-items: center;
}

#ModalInteresse .sdi-opcao strong {
    font-size: .9375rem;
    line-height: 1.25;
}

/* botão preto pílula com seta */
.sdi-interesse-enviar {
    margin-block-start: 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: .9rem;
}

.sdi-interesse-enviar svg {
    width: 1.1em;
    height: 1.1em;
    flex: 0 0 auto;
}

/* o aviso de que o interesse NÃO é inscrição */
.sdi-interesse-nota {
    margin: 1rem 0 0;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--sdi-texto-suave);
}

/* RODAPÉ — o disclaimer de proteção de dados. O `.modal-footer` do Bootstrap é uma linha
   de botões (flex, à direita); aqui é um bloco de texto corrido. */
#ModalInteresse .modal-footer {
    display: block;
    padding: 1rem 1.75rem 1.125rem;
    border-top: 1px solid var(--sdi-linha);
    text-align: start;
}

#ModalInteresse .modal-footer .sdi-disclaimer {
    font-size: .6875rem;
    line-height: 1.5;
}

#ModalInteresse .modal-footer .sdi-disclaimer a {
    color: var(--sdi-texto);
    text-decoration: underline;
    text-underline-offset: .15em;
}

/* ---------- sucesso ---------- */
.sdi-interesse-sucesso {
    padding-block: 1rem 1.5rem;
}

.sdi-interesse-sucesso .sdi-interesse-frase {
    margin-bottom: 1rem;
}

.sdi-interesse-selo {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 1.25rem;
    border-radius: 50%;
    background-color: var(--sdi-acento);
    color: #fff;
}

.sdi-interesse-selo svg {
    width: 30px;
    height: 30px;
}

/* abaixo de 420 nem "Ainda não sei" cabe em terço de tela: aí empilha */
@media (max-width: 419.98px) {
    #ModalInteresse .sdi-opcoes {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575.98px) {
    #ModalInteresse .modal-header { padding: 1.25rem 1.25rem .25rem; }
    #ModalInteresse .modal-body   { padding: .5rem 1.25rem 1.5rem; }
    #ModalInteresse .modal-footer { padding: 1rem 1.25rem 1.25rem; }
    .sdi-interesse-enviar { width: 100%; justify-content: center; }
}

/* O hCAPTCHA (24/09) — OCULTO (size: 'invisible'). NÃO HÁ CAIXA NA TELA.
   História curta: era visível entre 23 e 24/09 e as regras abaixo cuidavam do espaço dela.
   Agora o widget não desenha nada, e o que sobra é (a) não reservar altura para o que não
   aparece e (b) o aviso de privacidade, que passou a ser obrigatório justamente por a marca
   do hCaptcha ter sumido da tela.

   ⚠️ O container CONTINUA no markup: é o alvo do hcaptcha.render(). Ele só não ocupa lugar. */
#ModalInteresse .sdi-captcha-oculto {
    /* o widget invisível injeta um iframe de tamanho zero; sem isto ele ainda geraria
       uma linha em branco antes do botão */
    line-height: 0;
}

#ModalInteresse .sdi-captcha-aviso {
    line-height: 1.45;
    margin: 0;
    font-size: .75rem;
    color: var(--sdi-texto-suave);
}

#ModalInteresse .sdi-captcha-aviso a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

#ModalInteresse .sdi-captcha-aviso a:hover,
#ModalInteresse .sdi-captcha-aviso a:focus-visible {
    color: var(--sdi-acento);
}

/* FORA DE USO desde 24/09 (a caixa era visível): .sdi-captcha reservava 78px de altura e
   encolhia até os 302px do widget, e [data-grupo-captcha].is-invalid pintava o contorno de
   erro em volta dele. Nada disso existe na versão oculta — as regras saíram daqui. Se o
   captcha voltar a ser visível, elas estão no histórico deste arquivo. */