/* ==========================================================================
   00 Fonte (Open Sans, SIL OFL 1.1), servida pelo próprio site, sem Google Fonts.
   Fonte variável (eixo wght de 300 a 800: os pesos 400, 500, 600, 700 e 800 vêm de
   um arquivo só). Arquivos em Bill/br/fonts/, do pacote @fontsource-variable/open-sans
   5.3.0, em dois subconjuntos: latin (o que o português usa) e latin-ext (só é
   baixado se a página tiver um caractere de fora do latin). O itálico só é baixado
   se a página tiver texto em itálico. Licença: OFL-LICENSE.txt na mesma pasta.
   ADR-0003, T-137 (antes: IBM Plex Sans e Mono, removidas).
   ========================================================================== */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url("../fonts/open-sans-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url("../fonts/open-sans-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 300 800;
    font-display: swap;
    src: url("../fonts/open-sans-latin-wght-italic.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 300 800;
    font-display: swap;
    src: url("../fonts/open-sans-latin-ext-wght-italic.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ==========================================================================
   site.css — Sistema visual do site institucional da CRC Soluções Inteligentes
   ADR-0003, tarefas T-103 (criação) e T-137 (retema para o estilo do site
   original). Guia de uso: docs\site\guia-visual.md
   Página de validação: docs\site\harness\componentes.html
   Referência visual: docs\design\internas-*.dc.html

   Requisitos de carga (nesta ordem, no <head>):
     1. Bootstrap 5.3 (CSS, servido pelo próprio site, br/vendor)
     2. Font Awesome 6.4 (CSS, servido pelo próprio site, br/vendor)
     3. (fonte: @font-face no início deste arquivo, arquivos em br/fonts; sem Google Fonts)
     4. este arquivo
   E, antes de qualquer CSS, o script de uma linha que marca <html> com
   "si-js" (e "si-anima" quando há movimento permitido). Ver o guia, seção 2.

   O desenho (T-137): fundo da página cinza-azulado; cada seção é um card
   branco de cantos arredondados dentro de uma coluna de até 1240 px; títulos
   h1 e h2 em vermelho CRC; blocos azul-marinho (seção escura) e vermelhos em
   degradê (faixa de CTA e faixa de números); botões em pílula; o botão
   "Avaliação gratuita" do menu é verde.

   Regras do arquivo:
     - toda classe própria começa com "si-";
     - sem !important (não há nenhum neste arquivo);
     - o Bootstrap é ajustado pelas variáveis --bs-*, não por força bruta;
     - celular primeiro: os estilos-base valem para 390 px e as media queries
       só acrescentam;
     - verde escuro (--si-verde) só em números de economia; verde claro
       (--si-verde-acao) só no botão "Avaliação gratuita";
     - nada fica invisível à espera de JavaScript.

   Índice
     01 Tokens                      11 Passos numerados
     02 Base e tipografia           12 Faixa de prova (números)
     03 Utilitários e listas        13 FAQ (acordeão)
     04 Botões e grupo de CTA       14 Tabela comparativa
     05 Navbar                      15 Formulário e alertas
     06 Migalhas de navegação       16 Faixa de CTA
     07 Topo de página              17 Rodapé
     08 Resposta direta             18 Artigo de blog
     09 Seção (card)                19 Fatura auditada
     10 Card e itens explicados     20 Movimento
                                    21 Glossário
   ========================================================================== */


/* ==========================================================================
   01 Tokens
   ========================================================================== */
:root {
    /* Marca */
    --si-vermelho: #b30000;
    --si-vermelho-escuro: #8b0000;
    --si-vermelho-fundo: #fdf3f3;          /* lavagem de marca-texto, fundo de erro */
    --si-vermelho-borda: #f0c4c4;
    --si-vermelho-sobre-escuro: #ffa3a3;   /* texto de destaque sobre azul-marinho */
    --si-vermelho-claro: #fde8e8;          /* texto secundário sobre o degradê vermelho */
    --si-degrade-vermelho: linear-gradient(135deg, #b30000 0%, #8b0000 100%);

    /* Neutros: ardósia */
    --si-ardosia-50: #f8fafc;
    --si-ardosia-100: #f1f5f9;
    --si-ardosia-200: #e2e8f0;
    --si-ardosia-300: #cbd5e1;
    --si-ardosia-400: #94a3b8;
    --si-ardosia-500: #64748b;
    --si-ardosia-600: #475569;
    --si-ardosia-700: #334155;
    --si-ardosia-800: #1e293b;
    --si-ardosia-900: #0f172a;
    --si-ardosia-950: #020617;

    /* Fundo da página (o "chão" entre os cards) */
    --si-pagina: #eef2f6;

    /* Economia: só números de dinheiro recuperado e percentuais de redução */
    --si-verde: #047857;
    --si-verde-sobre-escuro: #34d399;

    /* Ação de avaliação gratuita: só o botão verde do menu (.si-btn--avaliacao) */
    --si-verde-acao: #10b981;
    --si-verde-acao-hover: #34d399;
    --si-verde-acao-texto: #052e1f;

    /* Papéis (mudam sozinhos dentro de .si-section--escura, .si-cta-faixa, .si-prova e .si-rodape) */
    --si-fundo: #ffffff;                            /* o card da seção */
    --si-fundo-alt: #ffffff;                        /* .si-section--alt: o mesmo card (T-137) */
    --si-fundo-escuro: var(--si-ardosia-800);       /* seção escura: azul-marinho */
    --si-superficie: #ffffff;                       /* tabelas, campos */
    --si-caixa: var(--si-ardosia-50);               /* caixa dentro do card: resposta, passo, card */
    --si-titulo-destaque: var(--si-vermelho);       /* h1 e h2 */
    --si-texto-titulo: var(--si-ardosia-900);       /* h3 em diante, rótulos fortes */
    --si-texto: var(--si-ardosia-800);
    --si-texto-apoio: var(--si-ardosia-700);        /* parágrafo de apoio (lead) */
    --si-texto-mudo: var(--si-ardosia-600);         /* menor tom permitido para texto sobre branco */
    --si-borda: var(--si-ardosia-200);
    --si-borda-forte: var(--si-ardosia-300);
    --si-borda-controle: var(--si-ardosia-500);     /* campos e botão secundário: 3:1 contra o fundo */
    --si-destaque: var(--si-vermelho);
    --si-destaque-fundo: var(--si-vermelho-fundo);
    --si-economia: var(--si-verde);
    --si-foco: var(--si-ardosia-900);

    /* Tipografia */
    --si-fonte: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --si-fonte-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;   /* só <code>/<pre> do blog */
    --si-fs-mini: 0.75rem;       /* 12 px: menor tamanho permitido */
    --si-fs-pequeno: 0.875rem;   /* 14 px */
    --si-fs-base: 1rem;          /* 16 px */
    --si-fs-lead: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);   /* 17 a 18 px */
    --si-fs-h4: 1.0625rem;
    --si-fs-h3: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);    /* 17 a 19 px */
    --si-fs-h2: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);     /* 22 a 28 px */
    --si-fs-h1: clamp(1.875rem, 1.35rem + 2.2vw, 2.625rem);    /* 30 a 42 px */
    --si-fs-numero: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);     /* 28 a 36 px */
    --si-lh-titulo: 1.2;
    --si-lh-texto: 1.6;
    --si-lh-leitura: 1.75;

    /* Espaçamento (escala de 4 px) */
    --si-esp-1: 0.25rem;
    --si-esp-2: 0.5rem;
    --si-esp-3: 0.75rem;
    --si-esp-4: 1rem;
    --si-esp-5: 1.5rem;
    --si-esp-6: 2rem;
    --si-esp-7: 3rem;
    --si-esp-8: 4rem;
    --si-largura-leitura: 42.5rem;   /* 680 px: coluna do artigo do blog */
    --si-largura-texto: 48rem;       /* 768 px: texto solto dentro de uma seção */
    --si-largura-cab: 50rem;         /* cabeçalho de seção */

    /* Coluna e cards (T-137) */
    --si-largura-max: 77.5rem;       /* 1240 px: coluna do site (navbar, cards, rodapé), com a margem lateral */
    --si-margem-lateral: 1rem;       /* 16 px no celular; 24 px a partir de 768 px */
    --si-largura-card: calc(var(--si-largura-max) - 3rem);   /* 1192 px */
    --si-entre-cards: 1.5rem;        /* 24 px entre um card e o seguinte */
    --si-card-pad-x: 1.25rem;        /* 20 px; 32 px a partir de 768; 48 px a partir de 992 */
    --si-card-pad-y: 2rem;           /* 32 px; 44 px a partir de 992 */

    /* Raios */
    --si-raio-p: 0.375rem;   /* 6 px: papel da fatura, etiquetas */
    --si-raio-campo: 0.625rem; /* 10 px: campos de formulário, chips de letra */
    --si-raio-m: 0.875rem;   /* 14 px: caixas dentro do card (resposta, FAQ, tabela) */
    --si-raio-g: 1rem;       /* 16 px: cards internos, passos */
    --si-raio-card: 1.375rem; /* 22 px: card de seção, faixa de CTA, bloco de números */
    --si-raio-pilula: 62rem;

    /* Sombras (sempre ardósia, nunca preto puro) */
    --si-sombra-1: 0 1px 2px rgba(15, 23, 42, 0.06);
    --si-sombra-2: 0 6px 16px -4px rgba(15, 23, 42, 0.10), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
    --si-sombra-3: 0 28px 56px -20px rgba(15, 23, 42, 0.25), 0 10px 20px -10px rgba(15, 23, 42, 0.10);
    --si-sombra-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 30px rgba(15, 23, 42, 0.05);

    /* Movimento */
    --si-dur: 0.18s;
    --si-curva: cubic-bezier(0.2, 0.7, 0.2, 1);

    /* Bootstrap: o que o Bootstrap desenha passa a usar os tokens acima */
    --bs-body-font-family: var(--si-fonte);
    --bs-body-font-size: var(--si-fs-base);
    --bs-body-line-height: var(--si-lh-texto);
    --bs-body-color: var(--si-texto);
    --bs-body-color-rgb: 30, 41, 59;
    --bs-body-bg: #ffffff;   /* fundo dos componentes do Bootstrap (submenu, campos); o da página é o do body */
    --bs-heading-color: var(--si-texto-titulo);
    --bs-link-color: var(--si-vermelho);
    --bs-link-color-rgb: 179, 0, 0;
    --bs-link-hover-color: var(--si-vermelho-escuro);
    --bs-link-hover-color-rgb: 139, 0, 0;
    --bs-border-color: var(--si-borda);
    --bs-font-monospace: var(--si-fonte-mono);
    --bs-code-color: var(--si-ardosia-900);   /* o padrão do Bootstrap é rosa */
}

@media (min-width: 768px) {
    :root {
        --si-margem-lateral: 1.5rem;
        --si-card-pad-x: 2rem;
    }
}

@media (min-width: 992px) {
    :root {
        --si-card-pad-x: 3rem;
        --si-card-pad-y: 2.75rem;
    }
}


/* ==========================================================================
   02 Base e tipografia
   ========================================================================== */
html {
    scroll-padding-top: 6rem;   /* âncoras não ficam sob a navbar fixa (76 a 82 px de altura) */
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--si-pagina);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--si-fonte);
    font-weight: 700;
    line-height: var(--si-lh-titulo);
    letter-spacing: 0;
    text-wrap: balance;
}

/* h1 e h2 em vermelho CRC; dentro de um bloco escuro ou vermelho, em branco (o papel muda no contexto) */
h1, h2 { color: var(--si-titulo-destaque); }

h1 {
    font-size: var(--si-fs-h1);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

h2 { font-size: var(--si-fs-h2); }
h3 { font-size: var(--si-fs-h3); }
h4 { font-size: var(--si-fs-h4); }
h5, h6 { font-size: var(--si-fs-base); }

p { text-wrap: pretty; }

a {
    text-underline-offset: 0.18em;
    text-decoration-thickness: 0.06em;
}

strong, b { font-weight: 700; }

img, svg, video { max-width: 100%; height: auto; }

::selection { background: var(--si-vermelho); color: #fff; }

:focus-visible {
    outline: 2px solid var(--si-foco);
    outline-offset: 2px;
}

/* Conteúdo principal: a coluna onde ficam os cards (classe na <main> da master) */
.si-main {
    display: flow-root;
    padding-block: 1.75rem calc(3rem - var(--si-entre-cards));
}


/* ==========================================================================
   03 Utilitários e listas
   ========================================================================== */

/* Rótulo curto acima de um título */
.si-eyebrow {
    margin: 0 0 var(--si-esp-3);
    font-family: var(--si-fonte);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--si-texto-mudo);
}

/* Parágrafo de apoio maior que o corpo */
.si-lead {
    font-size: var(--si-fs-lead);
    line-height: 1.55;
    color: var(--si-texto-apoio);
}

/* Número de economia: o único uso permitido do verde escuro */
.si-economia {
    color: var(--si-economia);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Algarismos alinhados em colunas */
.si-numeros { font-variant-numeric: tabular-nums; }

/* Coluna de leitura */
.si-leitura { max-width: var(--si-largura-leitura); }

/* Texto corrido solto (sem classe) dentro de uma seção: limita a linha
   (sem isso, a 1280 px a linha passa de 150 caracteres). :where() mantém a
   especificidade baixa, então qualquer componente com largura própria vence. */
:where(.si-section > .container) > :is(p, ul, ol, dl):where(:not([class])) { max-width: var(--si-largura-texto); }

/* Lista solta (sem classe) numa seção: ícone de check em círculo, vermelho,
   como nos canvas. A lista que é filha direta da seção vira grade de 2 colunas
   quando há largura. O marcador de texto vazio (e não "none") mantém a lista
   anunciada como lista pelo VoiceOver. O artigo do blog tem regra própria (seção 18). */
.si-section ul:not([class]) {
    padding-left: 0;
    list-style-type: "";
}

.si-section ul:not([class]) > li {
    position: relative;
    margin-bottom: var(--si-esp-2);
    padding-left: 1.875rem;
}

.si-section ul:not([class]) > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.1875rem;
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--si-destaque);
    -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='9.5'/%3e%3cpath d='M8 12.3l2.6 2.6L16.2 9.3'/%3e%3c/svg%3e") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='9.5'/%3e%3cpath d='M8 12.3l2.6 2.6L16.2 9.3'/%3e%3c/svg%3e") center / contain no-repeat;
}

.si-section > .container > ul:not([class]) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
    gap: var(--si-esp-3) var(--si-esp-6);
    max-width: none;
}

.si-section > .container > ul:not([class]) > li { margin-bottom: 0; }

/* Lista numerada solta: número em vermelho */
.si-section ol:not([class]) > li::marker {
    color: var(--si-destaque);
    font-weight: 700;
}

/* Link "pular para o conteúdo" */
.si-pular {
    position: absolute;
    left: var(--si-esp-3);
    top: -5rem;
    z-index: 1100;
    padding: var(--si-esp-2) var(--si-esp-4);
    background: var(--si-ardosia-900);
    color: #fff;
    border-radius: var(--si-raio-campo);
    text-decoration: none;
}

.si-pular:focus {
    top: var(--si-esp-3);
    color: #fff;
}


/* ==========================================================================
   04 Botões e grupo de CTA
   Pílula, no mínimo 44 px de altura.
   ========================================================================== */
.si-btn {
    --si-btn-fundo: transparent;
    --si-btn-texto: var(--si-ardosia-900);
    --si-btn-borda: transparent;
    --si-btn-fundo-hover: var(--si-btn-fundo);
    --si-btn-texto-hover: var(--si-btn-texto);
    --si-btn-borda-hover: var(--si-btn-borda);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--si-esp-2);
    min-height: 2.75rem;                  /* 44 px: alvo de toque */
    padding: 0.5rem 1.375rem;
    font-family: var(--si-fonte);
    font-size: var(--si-fs-base);
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    color: var(--si-btn-texto);
    background-color: var(--si-btn-fundo);
    border: 1.5px solid var(--si-btn-borda);
    border-radius: var(--si-raio-pilula);
    cursor: pointer;
    transition: background-color var(--si-dur) var(--si-curva),
                border-color var(--si-dur) var(--si-curva),
                color var(--si-dur) var(--si-curva),
                box-shadow var(--si-dur) var(--si-curva);
}

.si-btn:hover,
.si-btn:focus-visible {
    color: var(--si-btn-texto-hover);
    background-color: var(--si-btn-fundo-hover);
    border-color: var(--si-btn-borda-hover);
}

.si-btn:active { transform: translateY(1px); }

/* CTA primário: vermelho CRC */
.si-btn--primario {
    --si-btn-fundo: var(--si-vermelho);
    --si-btn-texto: #ffffff;
    --si-btn-borda: var(--si-vermelho);
    --si-btn-fundo-hover: var(--si-vermelho-escuro);
    --si-btn-borda-hover: var(--si-vermelho-escuro);
}

.si-btn--primario:hover { box-shadow: 0 6px 16px -4px rgba(139, 0, 0, 0.35); }

/* CTA secundário: contorno */
.si-btn--secundario {
    --si-btn-fundo: transparent;
    --si-btn-texto: var(--si-ardosia-900);
    --si-btn-borda: var(--si-borda-controle);
    --si-btn-fundo-hover: var(--si-ardosia-100);
    --si-btn-borda-hover: var(--si-ardosia-900);
    font-weight: 600;
}

/* Avaliação gratuita (só no menu): verde com texto verde-escuro */
.si-btn--avaliacao {
    --si-btn-fundo: var(--si-verde-acao);
    --si-btn-texto: var(--si-verde-acao-texto);
    --si-btn-borda: var(--si-verde-acao);
    --si-btn-fundo-hover: var(--si-verde-acao-hover);
    --si-btn-borda-hover: var(--si-verde-acao-hover);
}

/* Ação de texto, com seta */
.si-btn--texto {
    --si-btn-texto: var(--si-destaque);
    --si-btn-texto-hover: var(--si-vermelho-escuro);
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
}

.si-btn--texto::after {
    content: "\2192";   /* → */
    transition: transform var(--si-dur) var(--si-curva);
}

.si-btn--texto:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.si-btn--texto:hover::after { transform: translateX(3px); }

/* Tamanhos */
.si-btn--grande {
    min-height: 3rem;
    padding: 0.625rem 1.625rem;
    font-size: 1rem;
}

.si-btn--compacto {
    min-height: 2.75rem;                  /* continua com 44 px: alvo de toque */
    padding: 0.375rem 1.125rem;
    font-size: 0.9375rem;
}

.si-btn--bloco { width: 100%; }

/* Sobre fundo azul-marinho ou vermelho o primário inverte sozinho: o vermelho
   CRC sobre o azul-marinho tem só 2,03:1 e sumiria. Fica branco com texto
   vermelho-escuro, como no canvas. */
:is(.si-section--escura, .si-cta-faixa) .si-btn--primario {
    --si-btn-fundo: #ffffff;
    --si-btn-texto: var(--si-vermelho-escuro);
    --si-btn-borda: #ffffff;
    --si-btn-fundo-hover: var(--si-ardosia-100);
    --si-btn-texto-hover: var(--si-vermelho-escuro);
    --si-btn-borda-hover: var(--si-ardosia-100);
    box-shadow: none;
}

:is(.si-section--escura, .si-cta-faixa) .si-btn--secundario {
    --si-btn-fundo: transparent;
    --si-btn-texto: #ffffff;
    --si-btn-borda: rgba(255, 255, 255, 0.75);
    --si-btn-fundo-hover: rgba(255, 255, 255, 0.12);
    --si-btn-texto-hover: #ffffff;
    --si-btn-borda-hover: #ffffff;
}

.si-cta-faixa .si-btn--texto {
    --si-btn-texto: #ffffff;
    --si-btn-texto-hover: #ffffff;
}

/* Grupo de CTA: primário + secundário + nota */
.si-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--si-esp-3);
}

.si-cta > .si-btn { flex: 1 1 100%; }   /* no celular, um botão por linha */
/* Ação de texto no grupo: não estica nem centraliza; alinha com o texto da seção */
.si-cta > .si-btn--texto { flex: 0 0 auto; max-width: 100%; }

.si-cta__nota {
    flex: 1 1 100%;
    margin: 0;
    font-size: var(--si-fs-pequeno);
    color: var(--si-texto-mudo);
}

@media (min-width: 576px) {
    .si-cta > .si-btn { flex: 0 0 auto; }
}


/* ==========================================================================
   05 Navbar
   Marcação: .navbar.navbar-expand-lg.si-nav (ver guia). Ordem no HTML:
   marca, ações fixas (botão verde + botão do menu), menu recolhível
   (itens + grupo de apoio: ações de texto e "Já tenho conta").
   Branca, com o logo original, itens em ardósia 800 peso 600 e o item
   ativo em vermelho sublinhado.
   ========================================================================== */
.si-nav {
    --bs-navbar-padding-y: 0.5rem;
    --bs-navbar-color: var(--si-ardosia-800);
    --bs-navbar-hover-color: var(--si-vermelho);
    --bs-navbar-active-color: var(--si-vermelho);
    --bs-navbar-brand-padding-y: 0;
    --bs-navbar-brand-margin-end: 0.75rem;
    --bs-navbar-nav-link-padding-x: 0.625rem;
    --bs-navbar-toggler-padding-x: 0.5rem;
    --bs-navbar-toggler-padding-y: 0.375rem;
    --bs-navbar-toggler-border-color: var(--si-borda-controle);
    --bs-navbar-toggler-border-radius: var(--si-raio-campo);
    --bs-navbar-toggler-focus-width: 0;
    position: sticky;
    top: 0;
    z-index: 1030;
    background: #ffffff;
    box-shadow: 0 1px 0 var(--si-borda);
}

/* Coluna do site: a mesma dos cards e do rodapé */
.si-nav > .container {
    max-width: var(--si-largura-max);
    padding-inline: var(--si-margem-lateral);
}

.si-nav__marca img {
    display: block;
    width: auto;
    height: 2.75rem;    /* 44 px; 52 px a partir de 992 px */
}

.si-nav__fixos {
    display: flex;
    align-items: center;
    gap: var(--si-esp-2);
    margin-left: auto;
}

.si-nav .navbar-toggler { min-height: 2.75rem; }

/* O Bootstrap troca o contorno de foco por um halo azul: aqui volta o contorno */
.si-nav .navbar-toggler:focus-visible,
.si-nav .nav-link:focus-visible,
.si-nav__acao:focus-visible,
.si-nav__entrar:focus-visible {
    outline: 2px solid var(--si-foco);
    outline-offset: 2px;
    box-shadow: none;
    border-radius: var(--si-raio-p);
}

.si-nav .nav-link {
    padding-block: 0.75rem;
    font-size: 0.9375rem;
    font-weight: 600;
}

/* Item ativo: vermelho sublinhado */
.si-nav .nav-link.active,
.si-nav .nav-link[aria-current="page"] {
    color: var(--si-vermelho);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.5rem;
}

.si-nav .dropdown-menu {
    --bs-dropdown-min-width: 19.5rem;
    --bs-dropdown-padding-y: 0.375rem;
    --bs-dropdown-spacer: 0;
    --bs-dropdown-font-size: 0.9375rem;
    --bs-dropdown-border-color: var(--si-borda);
    --bs-dropdown-border-radius: var(--si-raio-m);
    --bs-dropdown-link-color: var(--si-ardosia-900);
    --bs-dropdown-link-hover-color: var(--si-ardosia-900);
    --bs-dropdown-link-hover-bg: var(--si-ardosia-100);
    --bs-dropdown-link-active-color: var(--si-vermelho);
    --bs-dropdown-link-active-bg: var(--si-vermelho-fundo);
    --bs-dropdown-item-padding-x: 0.875rem;
    --bs-dropdown-item-padding-y: 0.5rem;
    box-shadow: var(--si-sombra-2);
}

.si-nav .dropdown-item {
    white-space: normal;
    font-weight: 600;
    border-radius: var(--si-raio-campo);
}

/* Item do submenu que é a página atual */
.si-nav .dropdown-item[aria-current="page"] {
    color: var(--si-vermelho);
    background: var(--si-vermelho-fundo);
}

.si-nav__item-desc {
    display: block;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.35;
    color: var(--si-texto-mudo);
}

/* Grupo de apoio: ações de texto e "Já tenho conta" */
.si-nav__apoio {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--si-esp-1);
    margin-top: var(--si-esp-2);
    padding-block: var(--si-esp-3) var(--si-esp-3);
    border-top: 1px solid var(--si-borda);
}

/* Ações de texto do menu (Simular economia, Falar com especialista): mesmo desenho dos itens */
.si-nav__acao {
    padding: 0.75rem 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--si-ardosia-800);
    text-decoration: none;
}

.si-nav__acao:hover { color: var(--si-vermelho); }

/* "Já tenho conta": login de cliente, mais discreto (peso 500) */
.si-nav__entrar {
    padding: 0.75rem 0;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--si-ardosia-700);
    text-decoration: none;
}

.si-nav__entrar:hover { color: var(--si-vermelho); text-decoration: underline; }

/* Menu aberto no celular: submenu sem caixa */
@media (max-width: 991.98px) {
    .si-nav .dropdown-menu {
        --bs-dropdown-padding-y: 0;
        --bs-dropdown-item-padding-x: 0.75rem;
        margin-bottom: var(--si-esp-2);
        border: 0;
        border-left: 2px solid var(--si-borda);
        border-radius: 0;
        box-shadow: none;
    }

    /* Sem JavaScript o menu não abriria: fica todo aberto, o botão some e a
       barra deixa de ser fixa (aberta, ela cobriria meia tela ao rolar) */
    :root:not(.si-js) .si-nav { position: static; }
    :root:not(.si-js) .si-nav .navbar-collapse,
    :root:not(.si-js) .si-nav .dropdown-menu { display: block; }
    :root:not(.si-js) .si-nav .dropdown-menu { position: static; }
    :root:not(.si-js) .si-nav .navbar-toggler { display: none; }
}

/* Menu em linha: ainda estreito (992 a 1199 px), itens mais juntos */
@media (min-width: 992px) {
    .si-nav { --bs-navbar-padding-y: 0.75rem; }
    .si-nav__marca img { height: 3.25rem; }
    .si-nav .navbar-collapse { order: 2; }

    .si-nav__fixos {
        order: 3;
        margin-left: var(--si-esp-3);
    }

    .si-nav__apoio {
        flex-direction: row;
        align-items: center;
        gap: 0;
        margin: 0 0 0 auto;
        padding: 0;
        border: 0;
    }

    .si-nav__acao,
    .si-nav__entrar { padding-inline: var(--bs-navbar-nav-link-padding-x); }

    .si-nav .dropdown-menu { padding-inline: 0.375rem; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .si-nav { --bs-navbar-nav-link-padding-x: 0.4375rem; }
    .si-nav__marca img { height: 2.75rem; }
    .si-nav .nav-link,
    .si-nav__acao,
    .si-nav__entrar { font-size: 0.875rem; }
    .si-nav__fixos .si-btn--compacto { padding-inline: 0.875rem; font-size: 0.875rem; }
}

@media (min-width: 1200px) {
    .si-nav { --bs-navbar-nav-link-padding-x: 0.75rem; }
}

/* Submenu abre ao passar o mouse e ao focar, sem depender de JavaScript */
@media (min-width: 992px) and (hover: hover) {
    .si-nav .dropdown:hover > .dropdown-menu,
    .si-nav .dropdown:focus-within > .dropdown-menu {
        display: block;
        top: 100%;
        left: 0;
    }
}


/* ==========================================================================
   06 Migalhas de navegação
   Ficam acima do primeiro card, no fundo da página (ver seção 07).
   ========================================================================== */
.si-migalhas { margin-bottom: var(--si-esp-5); }

.si-migalhas ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--si-esp-1) var(--si-esp-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--si-fs-pequeno);
    color: var(--si-ardosia-600);
}

.si-migalhas li {
    display: inline-flex;
    align-items: center;
    gap: var(--si-esp-2);
}

.si-migalhas li + li::before {
    content: "\203A";   /* › */
    color: var(--si-ardosia-600);
}

.si-migalhas a {
    color: var(--si-ardosia-600);
    text-decoration: underline;
    text-decoration-color: var(--si-ardosia-400);
}

.si-migalhas a:hover { color: var(--si-vermelho); text-decoration-color: currentColor; }

.si-migalhas [aria-current="page"] {
    color: var(--si-ardosia-600);
    font-weight: 600;
}


/* ==========================================================================
   07 Topo de página
   ========================================================================== */
.si-topo__titulo { margin: 0 0 var(--si-esp-4); }

.si-topo__lead {
    max-width: 40rem;
    margin: 0 0 var(--si-esp-5);
    font-size: var(--si-fs-lead);
    line-height: 1.55;
    color: var(--si-texto-apoio);
}

.si-topo__atualizado {
    margin: var(--si-esp-5) 0 0;
    font-size: var(--si-fs-pequeno);
    color: var(--si-texto-mudo);
}

/* Versão home: texto à esquerda, fatura auditada à direita */
.si-topo--home {
    position: relative;
    overflow: hidden;
    padding-block: clamp(2rem, 1.25rem + 3.5vw, 4.5rem) clamp(2.5rem, 1.5rem + 4vw, 5rem);
    background: linear-gradient(180deg, #ffffff 0%, var(--si-ardosia-50) 100%);
    border-bottom: 1px solid var(--si-borda);
}

/* Quadriculado de papel contábil, bem fraco, só do lado da fatura */
.si-topo--home::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--si-ardosia-200) 1px, transparent 1px),
        linear-gradient(90deg, var(--si-ardosia-200) 1px, transparent 1px);
    background-size: 2.5rem 2.5rem;
    -webkit-mask-image: linear-gradient(100deg, transparent 38%, #000 100%);
    mask-image: linear-gradient(100deg, transparent 38%, #000 100%);
    opacity: 0.6;
    pointer-events: none;
}

.si-topo--home > .container { position: relative; }

/* Na home o título divide a largura com a fatura: um pouco menor que o h1 padrão */
.si-topo--home .si-topo__titulo { font-size: clamp(2rem, 1.35rem + 2.1vw, 2.875rem); }

/* Versão de página interna: as migalhas ficam no fundo da página e o resto do
   topo vira o primeiro card (com sombra um pouco maior, como no canvas).
   Como, sem mudar o markup: o .container vira uma grade de uma coluna; cada
   filho ocupa a sua linha (1 = migalhas, 2 em diante = o resto) e o ::before
   do .container é o card, desenhado da linha 2 até a 12 (as linhas sem filho
   têm altura zero). Exige que .si-migalhas seja o primeiro filho do .container
   e no máximo 11 filhos depois dela. */
.si-topo--interna {
    width: min(100% - 2 * var(--si-margem-lateral), var(--si-largura-card));
    margin: 0 auto var(--si-entre-cards);
}

.si-topo--interna > .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
    padding: 0;
}

.si-topo--interna > .container::before {
    content: "";
    grid-column: 1;
    grid-row: 2 / span 11;
    background: var(--si-fundo);
    border-radius: var(--si-raio-card);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 30px rgba(15, 23, 42, 0.07);
}

.si-topo--interna > .container > * {
    grid-column: 1;
    margin-inline: var(--si-card-pad-x);
}

.si-topo--interna > .container > :nth-child(1) { grid-row: 1; }
.si-topo--interna > .container > :nth-child(2) { grid-row: 2; }
.si-topo--interna > .container > :nth-child(3) { grid-row: 3; }
.si-topo--interna > .container > :nth-child(4) { grid-row: 4; }
.si-topo--interna > .container > :nth-child(5) { grid-row: 5; }
.si-topo--interna > .container > :nth-child(6) { grid-row: 6; }
.si-topo--interna > .container > :nth-child(7) { grid-row: 7; }
.si-topo--interna > .container > :nth-child(8) { grid-row: 8; }
.si-topo--interna > .container > :nth-child(9) { grid-row: 9; }
.si-topo--interna > .container > :nth-child(10) { grid-row: 10; }
.si-topo--interna > .container > :nth-child(11) { grid-row: 11; }
.si-topo--interna > .container > :nth-child(12) { grid-row: 12; }

/* Migalhas: no fundo da página, alinhadas com a borda do card */
.si-topo--interna > .container > .si-migalhas {
    margin-inline: 0;
    margin-bottom: var(--si-esp-4);
}

/* Respiro do card: em cima do primeiro filho depois das migalhas e embaixo do último */
.si-topo--interna > .container > .si-migalhas + * { margin-top: calc(var(--si-card-pad-y) + 0.25rem); }
.si-topo--interna > .container > :last-child { margin-bottom: calc(var(--si-card-pad-y) + 0.25rem); }

.si-topo--interna .si-topo__titulo { max-width: 50rem; }
.si-topo--interna .si-resposta { margin-bottom: var(--si-esp-5); }


/* ==========================================================================
   08 Resposta direta
   O parágrafo de 40 a 60 palavras que abre cada página: caixa clara dentro do card.
   ========================================================================== */
.si-resposta {
    max-width: 50rem;
    margin: 0 0 var(--si-esp-5);
    padding: 1.125rem 1.25rem;
    font-size: var(--si-fs-base);
    line-height: 1.6;
    color: var(--si-texto);
    background: var(--si-caixa);
    border-radius: var(--si-raio-m);
}

.si-resposta > :last-child { margin-bottom: 0; }


/* ==========================================================================
   09 Seção (card)
   Cada seção é um card branco arredondado na coluna do site, com 24 px de
   fundo da página entre um card e o seguinte. .si-section--alt é o mesmo
   card (o contraste entre seções vem do fundo entre os cards). A seção
   escura é um bloco azul-marinho arredondado.
   ========================================================================== */
.si-section,
.si-cta-faixa {
    width: min(100% - 2 * var(--si-margem-lateral), var(--si-largura-card));
    margin: 0 auto var(--si-entre-cards);
    border-radius: var(--si-raio-card);
}

.si-section {
    padding-block: var(--si-card-pad-y);
    background: var(--si-fundo);
    box-shadow: var(--si-sombra-card);
}

/* Dentro do card o .container do Bootstrap não limita a largura: só dá o respiro lateral */
:is(.si-section, .si-cta-faixa) > .container {
    max-width: none;
    padding-inline: var(--si-card-pad-x);
}

.si-section--alt { background: var(--si-fundo-alt); }

/* Contexto escuro: os papéis de cor trocam e os componentes acompanham */
.si-section--escura,
.si-rodape {
    --si-superficie: var(--si-ardosia-900);
    --si-caixa: var(--si-ardosia-900);
    --si-titulo-destaque: #ffffff;
    --si-texto-titulo: #ffffff;
    --si-texto: var(--si-ardosia-300);
    --si-texto-apoio: var(--si-ardosia-300);
    --si-texto-mudo: var(--si-ardosia-400);
    --si-borda: var(--si-ardosia-700);
    --si-borda-forte: var(--si-ardosia-600);
    --si-destaque: var(--si-vermelho-sobre-escuro);
    --si-destaque-fundo: rgba(255, 163, 163, 0.12);
    --si-economia: var(--si-verde-sobre-escuro);
    --si-foco: #ffffff;
    --bs-heading-color: #ffffff;
    --bs-link-color-rgb: 255, 163, 163;
    --bs-link-hover-color-rgb: 255, 255, 255;
    background: var(--si-fundo-escuro);
    color: var(--si-texto);
}

.si-section--escura { box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16); }

.si-section--compacta { padding-block: clamp(1.5rem, 1rem + 2vw, 2.25rem); }

.si-section__cab {
    max-width: var(--si-largura-cab);
    margin-bottom: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}

.si-section__cab--centro {
    margin-inline: auto;
    text-align: center;
}

.si-section__titulo { margin: 0 0 var(--si-esp-3); }

.si-section__intro {
    margin: 0;
    font-size: var(--si-fs-lead);
    line-height: 1.55;
    color: var(--si-texto-apoio);
}

.si-section__acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--si-esp-3) var(--si-esp-6);
    margin-top: clamp(1.5rem, 1.25rem + 1vw, 2rem);
}

/* Subtítulo solto (h3 sem classe) depois de um bloco de texto da seção */
:where(.si-section > .container) > h3:not([class]) { margin-top: var(--si-esp-6); }


/* ==========================================================================
   10 Card e itens explicados
   Card interno: caixa clara arredondada dentro do card de seção.
   ========================================================================== */
.si-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--si-esp-5);
    background: var(--si-caixa);
    border: 1px solid var(--si-borda);
    border-radius: var(--si-raio-g);
}

/* Altura cheia só quando o card é o único filho (coluna de uma grade): com
   irmãos depois dele (contact-us), 100% empurrava o texto seguinte para fora
   da seção, por cima do rodapé (defeito anterior, corrigido na T-137) */
.si-card:only-child { height: 100%; }

.si-card__icone {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: var(--si-esp-4);
    font-size: 1.0625rem;
    color: var(--si-destaque);
    background: var(--si-destaque-fundo);
    border-radius: 50%;
}

.si-card__meta {
    margin: 0 0 var(--si-esp-2);
    font-size: var(--si-fs-pequeno);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--si-texto-mudo);
}

.si-card__titulo {
    margin: 0 0 var(--si-esp-2);
    font-size: var(--si-fs-h3);
}

.si-card__texto {
    margin: 0 0 var(--si-esp-4);
    color: var(--si-texto);
}

.si-card > :last-child { margin-bottom: 0; }

.si-card__link {
    margin-top: auto;
    align-self: flex-start;
}

/* Card inteiro clicável: o link do rodapé do card cobre o card */
.si-card--link {
    transition: border-color var(--si-dur) var(--si-curva),
                box-shadow var(--si-dur) var(--si-curva);
}

.si-card--link:hover,
.si-card--link:focus-within {
    border-color: var(--si-ardosia-400);
    box-shadow: var(--si-sombra-2);
}

.si-card--link .si-card__link::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

/* Card com fio vermelho no topo, para o item principal de um grupo */
.si-card--destaque { box-shadow: inset 0 3px 0 var(--si-destaque); }

/* Grade de itens explicados: título, o que é, como aparece na fatura */
.si-itens {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--si-esp-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.si-item {
    display: flex;
    flex-direction: column;
    padding: 1.125rem 1.25rem;
    background: var(--si-superficie);
    border: 1px solid var(--si-borda);
    border-radius: var(--si-raio-m);
}

.si-item__titulo {
    margin: 0 0 var(--si-esp-2);
    font-size: var(--si-fs-h4);
}

.si-item__oque {
    margin: 0 0 var(--si-esp-4);
    font-size: 0.9375rem;
    color: var(--si-texto);
}

.si-item__fatura {
    margin: auto 0 0;
    padding-top: var(--si-esp-3);
    border-top: 1px dashed var(--si-borda-forte);
    font-size: var(--si-fs-pequeno);
    line-height: 1.5;
    color: var(--si-texto);
}

.si-item__rotulo {
    display: block;
    margin-bottom: var(--si-esp-1);
    font-size: var(--si-fs-mini);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--si-destaque);
}

@media (min-width: 768px) {
    .si-itens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
    .si-itens { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .si-itens--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ==========================================================================
   11 Passos numerados
   <ol class="si-passos"> com <li class="si-passo">. O número vem do contador.
   Cada passo é uma caixa clara com o número num círculo vermelho cheio; lado
   a lado quando há largura (como no canvas).
   ========================================================================== */
.si-passos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
    gap: var(--si-esp-4);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: si-passo;
}

.si-passo {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 1.375rem;
    background: var(--si-caixa);
    border-radius: var(--si-raio-g);
    counter-increment: si-passo;
}

.si-passo::before {
    content: counter(si-passo);
    display: grid;
    place-items: center;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    font-size: var(--si-fs-base);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #ffffff;
    background: var(--si-vermelho);
    border-radius: 50%;
}

.si-passo__titulo {
    margin: 0;
    font-size: var(--si-fs-h3);
}

.si-passo__texto {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--si-texto-apoio);
}

@media (min-width: 1200px) {
    .si-passos { gap: 1.375rem; }
}


/* ==========================================================================
   12 Faixa de prova (números)
   <ul class="si-prova"> com 3 ou 4 <li class="si-prova__item">.
   Bloco em degradê vermelho com texto branco, como o "Em números" do site
   original. Os papéis de cor trocam dentro dele.
   ========================================================================== */
.si-prova {
    --si-texto-titulo: #ffffff;
    --si-texto: #ffffff;
    --si-texto-mudo: var(--si-vermelho-claro);
    --si-economia: #ffffff;
    --si-borda: rgba(255, 255, 255, 0.28);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 0 0 var(--si-esp-5);
    padding: var(--si-esp-2) var(--si-esp-5);
    list-style: none;
    color: #ffffff;
    background: var(--si-degrade-vermelho);
    border-radius: var(--si-raio-card);
}

.si-prova:last-child { margin-bottom: 0; }

.si-prova__item {
    display: flex;
    flex-direction: column;
    gap: var(--si-esp-1);
    padding: var(--si-esp-4) 0;
}

.si-prova__item + .si-prova__item { border-top: 1px solid var(--si-borda); }

.si-prova__numero {
    font-size: var(--si-fs-numero);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--si-texto-titulo);
}

/* Só para números de economia (no bloco vermelho, branco como os outros) */
.si-prova__numero--economia { color: var(--si-economia); }

/* Qualificador antes do número ("mais de", "desde") */
.si-prova__numero small {
    display: block;
    margin-bottom: var(--si-esp-1);
    font-size: var(--si-fs-pequeno);
    font-weight: 600;
    letter-spacing: 0;
    color: var(--si-texto-mudo);
}

.si-prova__legenda {
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--si-texto);
}

@media (min-width: 576px) {
    .si-prova {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: var(--si-esp-3) var(--si-esp-6);
    }

    /* Lado a lado, todo número começa na mesma altura, com ou sem qualificador */
    .si-prova__numero {
        position: relative;
        padding-top: 1.5rem;
    }

    .si-prova__numero small {
        position: absolute;
        top: 0;
        left: 0;
        margin: 0;
    }

    .si-prova__item { padding: var(--si-esp-5) var(--si-esp-5) var(--si-esp-5) 0; }
    .si-prova__item + .si-prova__item { border-top: 0; }
    .si-prova__item:nth-child(n + 3) { border-top: 1px solid var(--si-borda); }

    .si-prova__item:nth-child(even) {
        padding-left: var(--si-esp-5);
        border-left: 1px solid var(--si-borda);
    }
}

@media (min-width: 1200px) {
    .si-prova {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
    }

    .si-prova__item:nth-child(n + 3) { border-top: 0; }

    .si-prova__item + .si-prova__item {
        padding-left: var(--si-esp-5);
        border-left: 1px solid var(--si-borda);
    }
}


/* ==========================================================================
   13 FAQ (sobre o accordion do Bootstrap)
   Cada pergunta é uma caixa com borda e cantos arredondados; a pergunta em
   vermelho-escuro, como no canvas.
   ========================================================================== */
.si-faq {
    --bs-accordion-color: var(--si-texto-apoio);
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: var(--si-borda);
    --bs-accordion-border-radius: var(--si-raio-m);
    --bs-accordion-inner-border-radius: var(--si-raio-m);
    --bs-accordion-btn-padding-x: 0;
    --bs-accordion-btn-padding-y: 1rem;
    --bs-accordion-btn-color: var(--si-vermelho-escuro);
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-btn-icon-width: 1.125rem;
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230f172a' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75'%3e%3cpath d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238b0000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75'%3e%3cpath d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-active-color: var(--si-vermelho-escuro);
    --bs-accordion-active-bg: transparent;
    --bs-accordion-body-padding-x: 0;
    --bs-accordion-body-padding-y: 0;
    display: grid;
    gap: 0.625rem;
    max-width: 56rem;
}

.si-faq .accordion-item {
    padding-inline: 1.25rem;
    background: var(--si-superficie);
    border: 1px solid var(--si-borda);
    border-radius: var(--si-raio-m);
}

.si-faq .accordion-button {
    gap: var(--si-esp-4);
    min-height: 3.5rem;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    border-radius: 0;
}

.si-faq .accordion-button:not(.collapsed) { box-shadow: none; }

.si-faq .accordion-button:focus-visible {
    outline: 2px solid var(--si-foco);
    outline-offset: 2px;
}

.si-faq .accordion-body {
    max-width: 48rem;
    padding: 0 var(--si-esp-5) 1.25rem 0;
    font-size: 0.9375rem;
}

.si-faq .accordion-body > :last-child { margin-bottom: 0; }

@media (min-width: 768px) {
    .si-faq .accordion-item { padding-inline: 1.375rem; }
}

/* Sem JavaScript o acordeão não abriria: todas as respostas ficam visíveis */
:root:not(.si-js) .si-faq .accordion-collapse { display: block; }
:root:not(.si-js) .si-faq .accordion-button { cursor: default; }
:root:not(.si-js) .si-faq .accordion-button::after { display: none; }


/* Trilha de cartões (celular e tablet): os cartões ficam lado a lado, em rolagem
   horizontal com encaixe, em vez de empilhados. A partir de 992 px volta a grade. */
@media (max-width: 991.98px) {
    .row.si-trilha {
        --bs-gutter-x: 0;
        --bs-gutter-y: 0;
        flex-wrap: nowrap;
        gap: var(--si-esp-4);
        padding-bottom: var(--si-esp-3);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0;
    }

    .si-trilha > * {
        flex: 0 0 min(85%, 28rem);
        width: auto;
        scroll-snap-align: start;
    }

    .si-trilha:focus-visible {
        outline: 2px solid var(--si-foco);
        outline-offset: 2px;
    }
}


/* ==========================================================================
   14 Tabela comparativa
   No celular cada linha vira um bloco; o nome da coluna vem de data-rotulo.
   ========================================================================== */
.si-compara__tabela {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--si-texto);
}

.si-compara__tabela thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.si-compara__tabela tbody,
.si-compara__tabela tr,
.si-compara__tabela th,
.si-compara__tabela td { display: block; }

.si-compara__tabela tbody tr {
    margin-bottom: var(--si-esp-3);
    background: var(--si-superficie);
    border: 1px solid var(--si-borda);
    border-radius: var(--si-raio-m);
    overflow: hidden;
}

.si-compara__tabela tbody tr:last-child { margin-bottom: 0; }

.si-compara__tabela tbody th {
    padding: var(--si-esp-3) var(--si-esp-4);
    font-weight: 700;
    color: var(--si-texto-titulo);
    background: var(--si-caixa);
    border-bottom: 1px solid var(--si-borda);
}

.si-compara__tabela td {
    display: grid;
    grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
    gap: var(--si-esp-3);
    padding: 0.625rem var(--si-esp-4);
    font-size: 0.9375rem;
    line-height: 1.45;
}

.si-compara__tabela td + td { border-top: 1px solid var(--si-ardosia-100); }

.si-compara__tabela td::before {
    content: attr(data-rotulo);
    font-size: var(--si-fs-pequeno);
    font-weight: 600;
    color: var(--si-texto-mudo);
}

/* Coluna em destaque (a da CRC) */
.si-compara__tabela td.si-compara__destaque {
    background: var(--si-vermelho-fundo);
    color: var(--si-texto-titulo);
}

.si-compara__tabela td.si-compara__destaque::before { color: var(--si-vermelho); }

.si-compara__nota {
    margin: var(--si-esp-4) 0 0;
    font-size: var(--si-fs-pequeno);
    color: var(--si-texto-mudo);
}

@media (min-width: 768px) {
    .si-compara {
        background: var(--si-superficie);
        border: 1px solid var(--si-borda);
        border-radius: var(--si-raio-m);
        overflow: hidden;
    }

    .si-compara__tabela { table-layout: fixed; }

    .si-compara__tabela thead {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        white-space: normal;
        display: table-header-group;
    }

    .si-compara__tabela tbody { display: table-row-group; }
    .si-compara__tabela tr { display: table-row; }

    .si-compara__tabela th,
    .si-compara__tabela td {
        display: table-cell;
        padding: var(--si-esp-4) 1.25rem;
        vertical-align: top;
        border-bottom: 1px solid var(--si-borda);
    }

    .si-compara__tabela tbody tr {
        margin: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .si-compara__tabela tbody tr:last-child > * { border-bottom: 0; }
    .si-compara__tabela td + td { border-top: 0; }
    .si-compara__tabela td::before { content: none; }

    .si-compara__tabela thead th {
        font-size: 0.875rem;
        font-weight: 700;
        line-height: 1.3;
        color: var(--si-texto-titulo);
        background: var(--si-caixa);
        border-bottom: 1px solid var(--si-borda-forte);
        vertical-align: bottom;
    }

    .si-compara__tabela thead th:first-child { width: 25%; }

    .si-compara__tabela tbody th {
        padding: var(--si-esp-4) 1.25rem;
        background: transparent;
        border-bottom: 1px solid var(--si-borda);
    }

    .si-compara__tabela thead th.si-compara__destaque {
        color: var(--si-vermelho);
        background: var(--si-vermelho-fundo);
        box-shadow: inset 0 3px 0 var(--si-vermelho);
    }
}


/* ==========================================================================
   15 Formulário e alertas
   ========================================================================== */
.si-form {
    display: grid;
    gap: 1.25rem;
    max-width: 36rem;
}

.si-form__linha {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 576px) {
    .si-form__linha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.si-campo__rotulo {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--si-texto-titulo);
}

.si-campo__opcional {
    font-weight: 400;
    color: var(--si-texto-mudo);
}

.si-form .form-control,
.si-form .form-select {
    min-height: 2.75rem;
    padding: 0.5625rem 0.875rem;
    font-size: var(--si-fs-base);   /* 16 px: o iPhone não dá zoom ao focar */
    color: var(--si-ardosia-900);
    background-color: #ffffff;
    border-color: var(--si-borda-controle);
    border-radius: var(--si-raio-campo);
}

.si-form .form-select { padding-right: 2.25rem; }
.si-form textarea.form-control { min-height: 7rem; }
.si-form .form-control::placeholder { color: var(--si-ardosia-500); }

.si-form .form-control:focus,
.si-form .form-select:focus {
    border-color: var(--si-vermelho);
    box-shadow: 0 0 0 0.2rem rgba(179, 0, 0, 0.18);
}

.si-campo__ajuda {
    margin: 0.375rem 0 0;
    font-size: var(--si-fs-pequeno);
    color: var(--si-texto-mudo);
}

/* Erro de campo */
.si-campo--erro .form-control,
.si-campo--erro .form-select,
.si-campo--erro .form-check-input {
    border-color: var(--si-vermelho);
    box-shadow: inset 0 0 0 1px var(--si-vermelho);
}

.si-campo__erro {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    margin: 0.375rem 0 0;
    font-size: var(--si-fs-pequeno);
    font-weight: 600;
    color: var(--si-vermelho);
}

/* Consentimento LGPD (sobre .form-check do Bootstrap) */
.si-consentimento {
    font-size: var(--si-fs-pequeno);
    line-height: 1.5;
    color: var(--si-texto);
}

.si-form .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.0625rem;
    border-color: var(--si-borda-controle);
}

.si-form .form-check { padding-left: 2rem; }
.si-form .form-check .form-check-input { margin-left: -2rem; }

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

.si-form .form-check-input:focus {
    border-color: var(--si-vermelho);
    box-shadow: 0 0 0 0.2rem rgba(179, 0, 0, 0.18);
}

/* Controle deslizante (calculadora) */
.si-form .form-range::-webkit-slider-thumb { background-color: var(--si-vermelho); }
.si-form .form-range::-moz-range-thumb { background-color: var(--si-vermelho); }
.si-form .form-range::-webkit-slider-runnable-track { background-color: var(--si-ardosia-200); }
.si-form .form-range::-moz-range-track { background-color: var(--si-ardosia-200); }

.si-form .form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px #ffffff, 0 0 0 0.25rem rgba(179, 0, 0, 0.25);
}

.si-form .form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 1px #ffffff, 0 0 0 0.25rem rgba(179, 0, 0, 0.25);
}

/* Campo-isca contra robôs: fora da tela, fora da ordem de tabulação */
.si-form__isca {
    position: absolute;
    left: -624rem;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.si-form__nota {
    margin: 0;
    font-size: var(--si-fs-pequeno);
    color: var(--si-texto-mudo);
}

/* Alertas: retorno do envio. Sucesso é neutro (o verde é só de economia). */
.si-alerta {
    display: flex;
    gap: var(--si-esp-3);
    max-width: 36rem;
    padding: var(--si-esp-4) 1.25rem;
    color: var(--si-ardosia-900);
    background: #ffffff;
    border: 1px solid var(--si-ardosia-300);
    border-left: 4px solid var(--si-ardosia-900);
    border-radius: var(--si-raio-campo);
}

.si-alerta__icone {
    flex: none;
    margin-top: 0.1875rem;
    font-size: 1.125rem;
}

.si-alerta__titulo {
    margin: 0 0 var(--si-esp-1);
    font-size: var(--si-fs-base);
    font-weight: 700;
    color: var(--si-ardosia-900);
}

.si-alerta__texto {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--si-ardosia-700);
}

.si-alerta--erro {
    background: var(--si-vermelho-fundo);
    border-color: var(--si-vermelho-borda);
    border-left-color: var(--si-vermelho);
}

.si-alerta--erro .si-alerta__icone { color: var(--si-vermelho); }


/* ==========================================================================
   16 Faixa de CTA (fim de página)
   Bloco arredondado em degradê vermelho, texto branco, na coluna dos cards.
   ========================================================================== */
.si-cta-faixa {
    --si-foco: #ffffff;
    --si-titulo-destaque: #ffffff;
    --si-texto-titulo: #ffffff;
    --si-texto-mudo: var(--si-vermelho-claro);
    --bs-heading-color: #ffffff;
    padding-block: clamp(2rem, 1.5rem + 2vw, 2.75rem);
    color: #ffffff;
    background: var(--si-degrade-vermelho);
}

.si-cta-faixa__conteudo {
    display: grid;
    gap: var(--si-esp-5);
    align-items: center;
}

.si-cta-faixa__titulo {
    max-width: 40rem;
    margin: 0 0 var(--si-esp-3);
}

.si-cta-faixa__texto {
    max-width: 40rem;
    margin: 0;
    font-size: var(--si-fs-lead);
    line-height: 1.5;
    color: #ffffff;
}

.si-cta-faixa .si-cta__nota { color: #ffffff; }

@media (min-width: 992px) {
    .si-cta-faixa__conteudo {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--si-esp-7);
    }

    .si-cta-faixa .si-cta { justify-content: flex-end; }
}


/* ==========================================================================
   17 Rodapé
   Azul-marinho escuro, largura total; conteúdo na coluna de 1240 px, em 4
   colunas (empresa, soluções, empresa/referência, contato).
   (as cores vêm do contexto escuro definido na seção 09, com o fundo mais escuro)
   ========================================================================== */
.si-rodape {
    --si-fundo-escuro: var(--si-ardosia-900);
    --si-texto-mudo: var(--si-ardosia-400);
    --si-borda: var(--si-ardosia-800);
    padding-block: clamp(2.5rem, 2rem + 2vw, 3rem) var(--si-esp-5);
    font-size: 0.9375rem;
}

.si-rodape > .container {
    max-width: var(--si-largura-max);
    padding-inline: var(--si-margem-lateral);
}

.si-rodape__grade {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--si-esp-6) var(--si-esp-5);
}

.si-rodape__marca { grid-column: 1 / -1; }

.si-rodape__logo {
    display: block;
    width: auto;
    height: 2.75rem;
    margin-bottom: var(--si-esp-3);
    filter: brightness(0) invert(1);   /* logo em branco sobre o fundo escuro */
}

.si-rodape__descricao {
    max-width: 22rem;
    margin: 0;
    color: var(--si-texto);
}

.si-rodape__titulo {
    margin: 0 0 var(--si-esp-3);
    font-family: var(--si-fonte);
    font-size: var(--si-fs-base);
    font-weight: 700;
    letter-spacing: 0;
    color: #ffffff;
}

.si-rodape__lista {
    display: grid;
    grid-template-columns: minmax(0, 1fr);   /* e-mail longo quebra em vez de alargar a coluna */
    gap: var(--si-esp-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.si-rodape a {
    color: var(--si-ardosia-300);
    text-decoration: none;
}

.si-rodape a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.si-rodape__contato { grid-column: 1 / -1; }

.si-rodape__contato i {
    width: 1.25rem;
    color: var(--si-texto-mudo);
}

.si-rodape__base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--si-esp-2) var(--si-esp-5);
    margin-top: var(--si-esp-6);
    padding-top: var(--si-esp-4);
    border-top: 1px solid var(--si-borda);
    font-size: 0.8125rem;
    color: var(--si-texto-mudo);
}

.si-rodape__base p { margin: 0; }

.si-rodape__base ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--si-esp-2) var(--si-esp-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.si-rodape__base a { color: var(--si-ardosia-400); }

@media (min-width: 768px) {
    .si-rodape__grade { grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.3fr); }
    .si-rodape__contato { grid-column: auto; }
}

@media (min-width: 992px) {
    .si-rodape__grade { grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.35fr); }
    .si-rodape__marca { grid-column: auto; }
}


/* ==========================================================================
   18 Artigo de blog
   O corpo (.si-artigo__corpo) recebe HTML vindo do banco: os estilos são
   aplicados às tags, sem exigir classes.
   ========================================================================== */
.si-artigo {
    max-width: var(--si-largura-leitura);
    margin-inline: auto;
}

.si-artigo__cab {
    margin-bottom: var(--si-esp-6);
    padding-bottom: var(--si-esp-5);
    border-bottom: 1px solid var(--si-borda);
}

.si-artigo__titulo {
    margin: 0 0 var(--si-esp-4);
    font-size: clamp(1.875rem, 1.45rem + 1.9vw, 2.75rem);
}

.si-artigo__meta {
    margin: 0;
    font-size: var(--si-fs-pequeno);
    color: var(--si-texto-mudo);
}

.si-artigo__meta strong { color: var(--si-texto-titulo); }

.si-artigo__corpo {
    font-size: 1.0625rem;
    line-height: var(--si-lh-leitura);
    color: var(--si-ardosia-800);
}

.si-artigo__corpo > :first-child { margin-top: 0; }
.si-artigo__corpo > :last-child { margin-bottom: 0; }
.si-artigo__corpo p { margin: 0 0 1.25em; }

.si-artigo__corpo h2 {
    margin: 2.25em 0 0.6em;
    font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
}

.si-artigo__corpo h3 {
    margin: 1.9em 0 0.5em;
    font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
}

.si-artigo__corpo h4 {
    margin: 1.6em 0 0.4em;
    font-size: 1.0625rem;
}

.si-artigo__corpo ul,
.si-artigo__corpo ol {
    margin: 0 0 1.25em;
    padding-left: 1.375em;
}

/* O artigo fica dentro de uma .si-section: aqui a lista volta a ter marcador
   comum (sem o ícone de check das listas soltas da seção 03) */
.si-artigo__corpo ul:not([class]) {
    padding-left: 1.375em;
    list-style-type: disc;
}

.si-artigo__corpo ul:not([class]) > li { padding-left: 0; }
.si-artigo__corpo ul:not([class]) > li::before { content: none; }

.si-artigo__corpo li { margin-bottom: 0.4em; }
.si-artigo__corpo li::marker { color: var(--si-vermelho); font-weight: 600; }

.si-artigo__corpo blockquote {
    margin: 1.75em 0;
    padding: 0.125em 0 0.125em 1.25em;
    border-left: 3px solid var(--si-vermelho);
    font-size: 1.125em;
    line-height: 1.6;
    color: var(--si-ardosia-900);
}

.si-artigo__corpo blockquote > :last-child { margin-bottom: 0; }

.si-artigo__corpo img {
    display: block;
    margin: 1.75em 0;
    border-radius: var(--si-raio-m);
}

.si-artigo__corpo figure { margin: 1.75em 0; }
.si-artigo__corpo figure img { margin: 0; }

.si-artigo__corpo figcaption {
    margin-top: 0.625em;
    font-size: var(--si-fs-pequeno);
    line-height: 1.5;
    color: var(--si-texto-mudo);
}

.si-artigo__corpo hr {
    margin: 2.5em 0;
    border: 0;
    border-top: 1px solid var(--si-borda-forte);
    opacity: 1;
}

/* Tabela vinda do banco: rola dentro dela mesma, nunca a página */
.si-artigo__corpo table {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 1.75em 0;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 0.9375rem;
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
}

.si-artigo__corpo th,
.si-artigo__corpo td {
    padding: 0.625rem 0.875rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--si-borda);
}

.si-artigo__corpo th {
    font-weight: 600;
    color: var(--si-texto-titulo);
    background: var(--si-ardosia-50);
    border-bottom-color: var(--si-borda-forte);
}

.si-artigo__corpo code {
    padding: 0.1em 0.35em;
    font-size: 0.9em;
    color: var(--si-ardosia-900);
    background: var(--si-ardosia-100);
    border-radius: 0.25rem;
}

.si-artigo__corpo pre {
    margin: 1.75em 0;
    padding: var(--si-esp-4);
    overflow-x: auto;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--si-ardosia-900);
    background: var(--si-ardosia-100);
    border-radius: var(--si-raio-m);
}

.si-artigo__corpo pre code { padding: 0; background: none; }

@media (min-width: 768px) {
    .si-artigo__corpo { font-size: 1.125rem; }
}


/* ==========================================================================
   19 Fatura auditada
   Fatura ilustrativa em HTML, com as anotações do auditor nas linhas.
   - Base (container estreito, celular): cada anotação fica dentro da sua
     linha, logo abaixo do serviço.
   - Container com 600 px ou mais: as anotações saem para a margem direita do
     papel, ligadas à linha por um traço.
   A troca é por container query: depende da largura do componente, não da
   tela. Navegador sem container query mostra a versão empilhada.
   ========================================================================== */
.si-fatura {
    --si-fatura-passo: 0.65s;     /* intervalo entre uma anotação e a próxima */
    --si-fatura-vao: 1.75rem;     /* distância entre o papel e as anotações na margem */
    --si-ordem: 1;
    container-type: inline-size;
    container-name: si-fatura;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--si-ardosia-700);
}

.si-fatura__legenda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--si-esp-2) var(--si-esp-3);
    margin-bottom: var(--si-esp-3);
    font-size: 0.8125rem;
    color: var(--si-ardosia-600);
}

/* Rótulo obrigatório: "Exemplo ilustrativo" */
.si-fatura__rotulo {
    flex: none;
    padding: 0.125rem 0.5rem;
    font-family: var(--si-fonte);
    font-variant-numeric: tabular-nums;
    font-size: var(--si-fs-mini);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--si-ardosia-900);
    background: #ffffff;
    border: 1px solid var(--si-ardosia-500);
    border-radius: var(--si-raio-pilula);
}

/* O papel */
.si-fatura__papel {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--si-ardosia-200);
    border-radius: var(--si-raio-p);
    box-shadow: var(--si-sombra-3);
}

.si-fatura__cab {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--si-esp-3);
    padding: 0.875rem 1rem;
    border-bottom: 2px solid var(--si-ardosia-900);
}

.si-fatura__operadora {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
}

/* Marca genérica de operadora: não imita nenhuma empresa real */
.si-fatura__marca {
    position: relative;
    flex: none;
    width: 2rem;
    height: 2rem;
    background: var(--si-ardosia-700);
    border-radius: var(--si-raio-p);
}

.si-fatura__marca::before,
.si-fatura__marca::after {
    content: "";
    position: absolute;
    border: 2px solid #ffffff;
    border-radius: 50%;
}

.si-fatura__marca::before { inset: 0.4375rem; }
.si-fatura__marca::after { inset: 0.8125rem; border-width: 1px; background: #ffffff; }

.si-fatura__operadora strong {
    display: block;
    font-size: 0.9375rem;
    line-height: 1.2;
    color: var(--si-ardosia-900);
}

.si-fatura__operadora span {
    display: block;
    font-size: var(--si-fs-mini);
    color: var(--si-ardosia-600);
}

.si-fatura__numero {
    flex: none;
    font-family: var(--si-fonte);
    font-variant-numeric: tabular-nums;
    font-size: var(--si-fs-mini);
    line-height: 1.35;
    text-align: right;
    color: var(--si-ardosia-600);
}

.si-fatura__numero strong {
    display: block;
    font-weight: 600;
    color: var(--si-ardosia-900);
}

.si-fatura__dados {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--si-esp-3);
    margin: 0;
    padding: 0.625rem 1rem;
    background: var(--si-ardosia-50);
    border-bottom: 1px solid var(--si-ardosia-200);
}

.si-fatura__dados dt {
    font-size: var(--si-fs-mini);
    font-weight: 400;
    color: var(--si-ardosia-600);
}

.si-fatura__dados dd {
    margin: 0;
    font-family: var(--si-fonte);
    font-variant-numeric: tabular-nums;
    font-size: var(--si-fs-mini);
    font-weight: 600;
    color: var(--si-ardosia-900);
}

.si-fatura__colunas {
    display: flex;
    justify-content: space-between;
    gap: var(--si-esp-3);
    padding: 0.5rem 1rem;
    font-family: var(--si-fonte);
    font-variant-numeric: tabular-nums;
    font-size: var(--si-fs-mini);
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--si-ardosia-600);
    border-bottom: 1px solid var(--si-ardosia-200);
}

.si-fatura__linhas {
    margin: 0;
    padding: 0;
    list-style: none;
}

.si-fatura__linha {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--si-esp-4);
    align-items: start;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--si-ardosia-100);
}

.si-fatura__servico {
    font-weight: 600;
    line-height: 1.35;
    color: var(--si-ardosia-900);
}

.si-fatura__servico small {
    display: block;
    font-family: var(--si-fonte);
    font-variant-numeric: tabular-nums;
    font-size: var(--si-fs-mini);
    font-weight: 400;
    color: var(--si-ardosia-600);
}

.si-fatura__valor {
    position: relative;
    font-family: var(--si-fonte);
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
    line-height: 1.35;
    text-align: right;
    white-space: nowrap;
    color: var(--si-ardosia-900);
}

/* Linha com achado: lavagem de marca-texto, fio vermelho e valor circulado */
.si-fatura__linha--achado {
    background-color: var(--si-vermelho-fundo);
    box-shadow: inset 3px 0 0 var(--si-vermelho);
}

.si-fatura__linha--achado .si-fatura__valor::after {
    content: "";
    position: absolute;
    inset: -0.3125rem -0.5rem;
    border: 1.5px solid var(--si-vermelho);
    border-radius: 50%;
    transform: rotate(-4deg);
    pointer-events: none;
}

/* Ordem de entrada: data-si-ordem="1" a "7", na linha com achado e no carimbo */
.si-fatura [data-si-ordem="1"] { --si-ordem: 1; }
.si-fatura [data-si-ordem="2"] { --si-ordem: 2; }
.si-fatura [data-si-ordem="3"] { --si-ordem: 3; }
.si-fatura [data-si-ordem="4"] { --si-ordem: 4; }
.si-fatura [data-si-ordem="5"] { --si-ordem: 5; }
.si-fatura [data-si-ordem="6"] { --si-ordem: 6; }
.si-fatura [data-si-ordem="7"] { --si-ordem: 7; }

/* A anotação do auditor */
.si-fatura__nota {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--si-esp-2);
    margin-top: var(--si-esp-2);
    padding: 0.5rem 0.625rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    background: #ffffff;
    border: 1px solid var(--si-vermelho-borda);
    border-radius: var(--si-raio-p);
}

.si-fatura__nota-num {
    grid-row: 1 / span 3;
    display: grid;
    place-items: center;
    width: 1.375rem;
    height: 1.375rem;
    font-family: var(--si-fonte);
    font-variant-numeric: tabular-nums;
    font-size: var(--si-fs-mini);
    font-weight: 600;
    line-height: 1;
    color: #ffffff;
    background: var(--si-vermelho);
    border-radius: 50%;
}

.si-fatura__nota-titulo,
.si-fatura__nota-texto,
.si-fatura__nota-valor {
    grid-column: 2;
    display: block;
}

.si-fatura__nota-titulo {
    font-weight: 600;
    color: var(--si-vermelho);
}

.si-fatura__nota-texto { color: var(--si-ardosia-700); }

.si-fatura__nota-valor {
    margin-top: 0.125rem;
    font-family: var(--si-fonte);
    font-variant-numeric: tabular-nums;
    font-size: var(--si-fs-mini);
    color: var(--si-ardosia-700);
}

.si-fatura__nota-valor strong {
    font-weight: 600;
    color: var(--si-verde);
}

.si-fatura__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--si-esp-3);
    padding: 0.75rem 1rem;
    font-weight: 600;
    color: var(--si-ardosia-900);
    border-top: 2px solid var(--si-ardosia-900);
}

.si-fatura__total .si-fatura__valor { font-size: 0.9375rem; font-weight: 600; }

.si-fatura__pe {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--si-esp-4);
    padding: 0.25rem 1rem 1rem;
}

/* Código de barras decorativo */
.si-fatura__barras {
    flex: 1 1 auto;
    max-width: 11rem;
    height: 1.75rem;
    background: repeating-linear-gradient(90deg,
        var(--si-ardosia-900) 0 2px, transparent 2px 3px,
        var(--si-ardosia-900) 3px 4px, transparent 4px 7px,
        var(--si-ardosia-900) 7px 10px, transparent 10px 12px,
        var(--si-ardosia-900) 12px 13px, transparent 13px 15px);
}

/* Carimbo do auditor */
.si-fatura__carimbo {
    flex: none;
    padding: 0.1875rem 0.5rem;
    font-family: var(--si-fonte);
    font-variant-numeric: tabular-nums;
    font-size: var(--si-fs-mini);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--si-vermelho);
    border: 2px solid var(--si-vermelho);
    border-radius: 0.25rem;
    transform: rotate(-5deg);
}

/* Total recuperável */
.si-fatura__resumo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--si-esp-1) var(--si-esp-4);
    margin-top: var(--si-esp-4);
    padding: 0.875rem 1rem;
    background: #ffffff;
    border: 1px solid var(--si-ardosia-200);
    border-radius: var(--si-raio-m);
    box-shadow: var(--si-sombra-1);
}

.si-fatura__resumo-rotulo {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--si-ardosia-900);
}

.si-fatura__resumo-rotulo small {
    display: block;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--si-ardosia-600);
}

.si-fatura__resumo-valor {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--si-verde);
}

/* Anotações na margem: container com 600 px ou mais */
@container si-fatura (min-width: 37.5rem) {
    .si-fatura__corpo {
        display: grid;
        grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
    }

    .si-fatura__papel { grid-column: 1; }

    /* Linhas mais altas: cada anotação tem folga para não encostar na vizinha */
    .si-fatura__linha { padding-block: 0.8125rem; }

    .si-fatura__nota {
        position: absolute;
        top: 50%;
        left: calc(100% + var(--si-fatura-vao));
        width: calc(44cqw - var(--si-fatura-vao) - 2px);
        margin: 0;
        border-color: var(--si-ardosia-200);
        border-left: 3px solid var(--si-vermelho);
        box-shadow: var(--si-sombra-2);
        transform: translateY(-50%);
    }

    /* Traço que liga a anotação à linha da fatura */
    .si-fatura__nota::before {
        content: "";
        position: absolute;
        top: 50%;
        right: 100%;
        width: var(--si-fatura-vao);
        margin-right: 3px;
        border-top: 1.5px solid var(--si-vermelho);
    }

    .si-fatura__nota::after {
        content: "";
        position: absolute;
        top: calc(50% - 3px);
        left: calc(-1 * var(--si-fatura-vao) - 7px);
        width: 7px;
        height: 7px;
        background: var(--si-vermelho);
        border-radius: 50%;
    }
}


/* ==========================================================================
   20 Movimento
   Tudo aqui é acréscimo. Sem JavaScript, sem IntersectionObserver ou com
   prefers-reduced-motion: reduce, nenhuma regra desta seção se aplica e o
   conteúdo aparece no estado final.

   Como funciona a sequência da fatura:
     - o script do <head> põe "si-anima" em <html> só quando há JavaScript,
       IntersectionObserver e movimento permitido;
     - com "si-anima", as marcas da fatura esperam escondidas por uma animação
       de espera (si-fatura-espera), que as revela sozinha depois de 8 s caso
       o script de disparo nunca rode: nada fica invisível para sempre;
     - quando a fatura entra na tela, o script põe "si-fatura--tocando" nela
       e as anotações entram uma a uma, na ordem de data-si-ordem.
   ========================================================================== */
@keyframes si-fatura-espera {
    0%, 99% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes si-fatura-espera-nota {
    0%, 99% { opacity: 0.35; }
    100% { opacity: 1; }
}

@keyframes si-fatura-espera-linha {
    0%, 99% { background-color: transparent; box-shadow: inset 0 0 0 var(--si-vermelho); }
    100% { background-color: var(--si-vermelho-fundo); box-shadow: inset 3px 0 0 var(--si-vermelho); }
}

@keyframes si-fatura-linha {
    from { background-color: transparent; box-shadow: inset 0 0 0 var(--si-vermelho); }
    to { background-color: var(--si-vermelho-fundo); box-shadow: inset 3px 0 0 var(--si-vermelho); }
}

@keyframes si-fatura-circulo {
    from { opacity: 0; transform: rotate(-4deg) scale(1.4); }
    to { opacity: 1; transform: rotate(-4deg) scale(1); }
}

@keyframes si-fatura-nota {
    from { opacity: 0.35; }
    to { opacity: 1; }
}

@keyframes si-fatura-nota-margem {
    from { opacity: 0; transform: translate(0.75rem, -50%); }
    to { opacity: 1; transform: translate(0, -50%); }
}

@keyframes si-fatura-carimbo {
    from { opacity: 0; transform: rotate(-5deg) scale(1.7); }
    to { opacity: 1; transform: rotate(-5deg) scale(1); }
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }

    /* À espera de entrar na tela */
    .si-anima .si-fatura:not(.si-fatura--tocando) .si-fatura__linha--achado {
        animation: si-fatura-espera-linha 8s linear both;
    }

    .si-anima .si-fatura:not(.si-fatura--tocando) .si-fatura__linha--achado .si-fatura__valor::after,
    .si-anima .si-fatura:not(.si-fatura--tocando) .si-fatura__carimbo {
        animation: si-fatura-espera 8s linear both;
    }

    /* Empilhada, a anotação ocupa espaço dentro da linha: em vez de sumir
       (deixaria um vazio no papel), espera esmaecida e depois acende */
    .si-anima .si-fatura:not(.si-fatura--tocando) .si-fatura__nota {
        animation: si-fatura-espera-nota 8s linear both;
    }

    /* Tocando: uma anotação a cada --si-fatura-passo */
    .si-anima .si-fatura--tocando .si-fatura__linha--achado {
        animation: si-fatura-linha 0.4s var(--si-curva) both;
        animation-delay: calc((var(--si-ordem) - 1) * var(--si-fatura-passo) + 0.35s);
    }

    .si-anima .si-fatura--tocando .si-fatura__linha--achado .si-fatura__valor::after {
        animation: si-fatura-circulo 0.35s var(--si-curva) both;
        animation-delay: calc((var(--si-ordem) - 1) * var(--si-fatura-passo) + 0.5s);
    }

    .si-anima .si-fatura--tocando .si-fatura__nota {
        animation: si-fatura-nota 0.45s var(--si-curva) both;
        animation-delay: calc((var(--si-ordem) - 1) * var(--si-fatura-passo) + 0.65s);
    }

    /* O carimbo fecha a sequência: data-si-ordem = número de achados + 1 */
    .si-anima .si-fatura--tocando .si-fatura__carimbo {
        animation: si-fatura-carimbo 0.35s var(--si-curva) both;
        animation-delay: calc((var(--si-ordem) - 1) * var(--si-fatura-passo) + 0.5s);
    }

    /* Na margem a anotação não ocupa espaço no papel: some de vez e entra deslizando */
    @container si-fatura (min-width: 37.5rem) {
        .si-anima .si-fatura:not(.si-fatura--tocando) .si-fatura__nota { animation-name: si-fatura-espera; }
        .si-anima .si-fatura--tocando .si-fatura__nota { animation-name: si-fatura-nota-margem; }
    }
}

@media (prefers-reduced-motion: reduce) {
    .si-btn,
    .si-btn--texto::after,
    .si-card--link { transition: none; }
}


/* ==========================================================================
   21 Glossário (T-126)
   Índice de letras (.si-letras), lista de verbetes (.si-glossario) e o
   deslocamento de âncora pela altura real da navbar fixa.
   Guia: docs\site\guia-visual.md, seção 5.19.

   Âncoras: o html já tem scroll-padding-top de 6rem (seção 02), maior que a
   navbar (T-137: 60 px no celular e tablet, 70 px de 992 a 1199 px e 76 px a
   partir de 1200 px, medidas no navegador).
   A regra "main [id]" abaixo soma ao scroll-padding só o que faltar quando a
   página tem algo fixo ALÉM da navbar (o índice de letras, que fica grudado
   abaixo dela em telas largas). Nas páginas sem isso o resultado é 0 px: nada
   se desloca. Fórmula: navbar + extra + folga de 0,5rem - 6rem, nunca menor
   que zero.
   ========================================================================== */
:root {
    --si-nav-altura: 3.75rem;          /* 60 px: navbar recolhida (celular e tablet) */
    --si-ancora-extra: 0px;            /* altura de outro elemento fixo sob a navbar; a página define */
    --si-letras-altura: 0px;           /* altura do índice de letras quando ele está grudado */
}

@media (min-width: 992px) {
    :root { --si-nav-altura: 4.375rem; }    /* 70 px: navbar em linha única, logo de 44 px */
}

@media (min-width: 1200px) {
    :root { --si-nav-altura: 4.75rem; }     /* 76 px: navbar em linha única, logo de 52 px */
}

main [id] {
    scroll-margin-top: max(0px, calc(var(--si-nav-altura) + var(--si-ancora-extra) + 0.5rem - 6rem));
}

/* Índice de letras */
.si-letras {
    margin: 0 0 var(--si-esp-5);
}

.si-letras__lista {
    display: flex;
    flex-wrap: wrap;
    gap: var(--si-esp-2) 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.si-letras__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;                 /* 44 px: alvo de toque */
    min-height: 2.75rem;
    padding: 0 var(--si-esp-2);
    font-family: var(--si-fonte);
    font-variant-numeric: tabular-nums;
    font-size: var(--si-fs-base);
    font-weight: 600;
    line-height: 1;
    color: var(--si-ardosia-900);
    text-decoration: none;
    background: #ffffff;
    border: 1px solid var(--si-borda-controle);
    border-radius: var(--si-raio-campo);
    transition: background-color var(--si-dur) var(--si-curva),
                border-color var(--si-dur) var(--si-curva),
                color var(--si-dur) var(--si-curva);
}

.si-letras__link:hover {
    color: var(--si-vermelho-escuro);
    background: var(--si-vermelho-fundo);
    border-color: var(--si-vermelho);
}

/* Grudado abaixo da navbar só onde há folga: largura de 768 px e altura de 600 px ou mais */
@media (min-width: 768px) and (min-height: 600px) {
    :root { --si-letras-altura: 3.8125rem; }   /* 61 px: uma linha de chips (14 letras cabem em 720 px) */

    .si-letras {
        position: sticky;
        top: var(--si-nav-altura);
        z-index: 1020;                          /* abaixo da navbar (1030) e dos menus */
        padding-block: var(--si-esp-2);
        background: rgba(255, 255, 255, 0.96);
        border-bottom: 1px solid var(--si-borda);
    }
}

@media (min-width: 768px) and (min-height: 600px) {
    .si-glossario { --si-ancora-extra: var(--si-letras-altura); }
}

/* Lista de verbetes */
.si-glossario {
    max-width: 47.5rem;
    margin: 0 calc(-1 * var(--si-esp-3));   /* o recuo interno dos verbetes (lavagem do alvo) não desalinha o texto */
}

.si-glossario__termo {
    margin: 0;
    padding: var(--si-esp-5) var(--si-esp-3) 0;
    font-size: var(--si-fs-h3);
    font-weight: 600;
    line-height: var(--si-lh-titulo);
    letter-spacing: -0.015em;
    color: var(--si-texto-titulo);
    border-top: 1px solid var(--si-borda);
    text-wrap: balance;
}

.si-glossario__termo:first-child {
    border-top: 0;
    padding-top: 0;
}

.si-glossario__def {
    margin: 0;
    padding: var(--si-esp-2) var(--si-esp-3) var(--si-esp-5);
    line-height: var(--si-lh-leitura);
    color: var(--si-texto);
}

.si-glossario__def > p {
    margin: 0 0 var(--si-esp-4);
    font-size: 1.0625rem;               /* a definição é o conteúdo principal */
    color: var(--si-texto-titulo);
}

.si-glossario__def > :last-child { margin-bottom: 0; }

/* Ligação com o serviço da CRC: secundária, com fio lateral */
.si-glossario__def > .si-glossario__nacrc {
    margin: 0;
    padding-left: var(--si-esp-4);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--si-texto-mudo);
    border-left: 2px solid var(--si-borda-forte);
}

.si-glossario__def > p + .si-glossario__nacrc { margin-top: var(--si-esp-4); }

/* Verbete alvo da âncora: lavagem de marca-texto (verbete e definição juntos) */
.si-glossario__termo:target,
.si-glossario__termo:target + .si-glossario__def {
    background: var(--si-vermelho-fundo);
}

@keyframes si-glossario-alvo {
    from { background-color: var(--si-vermelho-fundo); }
    to { background-color: transparent; }
}

/* Com movimento permitido a lavagem some sozinha; com movimento reduzido ela fica estática */
@media (prefers-reduced-motion: no-preference) {
    .si-glossario__termo:target,
    .si-glossario__termo:target + .si-glossario__def {
        animation: si-glossario-alvo 2.4s ease-out 0.6s both;
    }
}

@media (prefers-reduced-motion: reduce) {
    .si-letras__link { transition: none; }
}


/* ==========================================================================
   22 Páginas internas: ilustração no topo, números ao lado do título, lista
   de alerta, bloco vermelho, par de seções e caixa de condições (T-139)
   Só markup novo das páginas tembill, temuse, our-tools e about-us; nenhuma
   regra anterior foi alterada. Guia: docs\site\guia-visual.md, seção 5.21 em diante.
   ========================================================================== */

/* Topo com ilustração (.si-topo--interna.si-topo--ilustrada): a imagem é o
   último filho do .container. No celular fica abaixo do texto, dentro do card;
   de 992 px em diante vai para a segunda coluna, ao lado do texto. */
.si-topo__ilustracao {
    display: block;
    height: auto;
    border-radius: var(--si-raio-g);
}

.si-topo--interna > .container > .si-topo__ilustracao {
    justify-self: start;
    width: 100%;
    max-width: min(32.5rem, calc(100% - 2 * var(--si-card-pad-x)));
    margin: var(--si-esp-5) var(--si-card-pad-x) calc(var(--si-card-pad-y) + 0.25rem);
}

@media (min-width: 992px) {
    .si-topo--interna.si-topo--ilustrada > .container {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    }

    .si-topo--interna.si-topo--ilustrada > .container::before { grid-column: 1 / -1; }

    .si-topo--interna.si-topo--ilustrada > .container > .si-topo__ilustracao {
        grid-column: 2;
        grid-row: 2 / span 11;
        align-self: center;
        justify-self: end;
        margin: calc(var(--si-card-pad-y) + 0.25rem) var(--si-card-pad-x) calc(var(--si-card-pad-y) + 0.25rem) 0;
    }

    .si-topo--interna.si-topo--ilustrada .si-topo__atualizado {
        margin-bottom: calc(var(--si-card-pad-y) + 0.25rem);
    }
}


/* Topo com os números ao lado (.si-topo--interna.si-topo--lateral): o
   <ul class="si-prova"> é o último filho do .container. No celular fica no fim
   do card; de 992 px em diante vira um bloco vermelho na segunda coluna, ao lado
   do card do título e da mesma altura dele. */
.si-topo--interna > .container > .si-prova {
    margin: var(--si-esp-5) var(--si-card-pad-x) calc(var(--si-card-pad-y) + 0.25rem);
}

@media (min-width: 992px) {
    .si-topo--interna.si-topo--lateral > .container {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        column-gap: var(--si-entre-cards);
    }

    .si-topo--interna.si-topo--lateral > .container > .si-prova {
        grid-column: 2;
        grid-row: 2 / span 11;
        grid-template-columns: minmax(0, 1fr);
        grid-auto-flow: row;
        grid-auto-columns: auto;
        align-content: center;
        margin: 0;
        padding: var(--si-esp-3) var(--si-esp-6);
    }

    .si-topo--lateral .si-prova > .si-prova__item {
        padding: var(--si-esp-4) 0;
        border-left: 0;
        border-top: 1px solid var(--si-borda);
    }

    .si-topo--lateral .si-prova > .si-prova__item:first-child { border-top: 0; }
}


/* Lista de sinais com ícone de alerta (círculo com exclamação), vermelho CRC.
   <ul class="si-lista-alerta"> dentro de uma .si-section. Mesmo desenho da
   lista solta com check (seção 03): grade de colunas de no mínimo 320 px. */
.si-lista-alerta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
    gap: var(--si-esp-3) var(--si-esp-6);
    margin: 0 0 var(--si-esp-4);
    padding: 0;
    list-style-type: "";
}

.si-lista-alerta > li {
    position: relative;
    margin: 0;
    padding-left: 1.875rem;
}

.si-lista-alerta > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.1875rem;
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--si-destaque);
    -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='9.5'/%3e%3cpath d='M12 7.5v5.5'/%3e%3cpath d='M12 16.5h.01'/%3e%3c/svg%3e") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='9.5'/%3e%3cpath d='M12 7.5v5.5'/%3e%3cpath d='M12 16.5h.01'/%3e%3c/svg%3e") center / contain no-repeat;
}


/* Bloco vermelho: seção com o degradê vermelho do tema e texto branco, para
   uma resposta curta e firme (quanto economizar, se bloqueia chamadas, se é
   tarifador). Os papéis de cor trocam dentro dele, como na seção escura; o
   botão primário fica branco com texto vermelho-escuro. */
.si-section--vermelha {
    --si-titulo-destaque: #ffffff;
    --si-texto-titulo: #ffffff;
    --si-texto: #ffffff;
    --si-texto-apoio: #ffffff;
    --si-texto-mudo: var(--si-vermelho-claro);
    --si-destaque: #ffffff;
    --si-economia: #ffffff;
    --si-borda: rgba(255, 255, 255, 0.28);
    --si-foco: #ffffff;
    --bs-heading-color: #ffffff;
    --bs-link-color-rgb: 255, 255, 255;
    --bs-link-hover-color-rgb: 255, 255, 255;
    color: #ffffff;
    background: var(--si-degrade-vermelho);
    box-shadow: 0 14px 30px rgba(139, 0, 0, 0.22);
}

.si-section--vermelha a:not(.si-btn) { color: #ffffff; }

.si-section--vermelha .si-btn--primario {
    --si-btn-fundo: #ffffff;
    --si-btn-texto: var(--si-vermelho-escuro);
    --si-btn-borda: #ffffff;
    --si-btn-fundo-hover: var(--si-ardosia-100);
    --si-btn-texto-hover: var(--si-vermelho-escuro);
    --si-btn-borda-hover: var(--si-ardosia-100);
    box-shadow: none;
}

.si-section--vermelha .si-btn--secundario {
    --si-btn-fundo: transparent;
    --si-btn-texto: #ffffff;
    --si-btn-borda: rgba(255, 255, 255, 0.75);
    --si-btn-fundo-hover: rgba(255, 255, 255, 0.12);
    --si-btn-texto-hover: #ffffff;
    --si-btn-borda-hover: #ffffff;
}


/* Par de seções lado a lado em telas largas (bloco vermelho + seção vizinha).
   <div class="si-par si-par--vermelha-antes"> ou "si-par--vermelha-depois"
   envolve duas .si-section consecutivas; o bloco vermelho fica com a coluna
   mais estreita. Abaixo de 992 px as duas ficam uma sobre a outra. */
.si-par {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--si-entre-cards);
    width: min(100% - 2 * var(--si-margem-lateral), var(--si-largura-card));
    margin: 0 auto var(--si-entre-cards);
}

.si-par > .si-section {
    width: auto;
    margin: 0;
}

@media (min-width: 992px) {
    .si-par--vermelha-antes { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
    .si-par--vermelha-depois { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }

    .si-par > .si-section > .container { padding-inline: 2.75rem; }
}


/* "Como começar?": o texto à esquerda e as condições da avaliação gratuita
   numa caixa à parte, à direita, com check verde. <div class="si-comecar"> envolve
   os parágrafos, o <ul class="si-condicoes"> e o grupo de CTA, na ordem do texto;
   no celular a caixa fica no lugar em que está no texto. */
.si-comecar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.si-comecar > p {
    max-width: var(--si-largura-texto);
    margin: 0 0 var(--si-esp-4);
}

.si-comecar > .si-cta { margin-top: var(--si-esp-2); }

.si-condicoes {
    display: flex;
    flex-direction: column;
    gap: var(--si-esp-3);
    margin: 0 0 var(--si-esp-4);
    padding: var(--si-esp-5);
    font-size: 0.9375rem;
    list-style-type: "";
    background: var(--si-caixa);
    border-radius: var(--si-raio-g);
}

.si-condicoes > li {
    position: relative;
    margin: 0;
    padding-left: 1.875rem;
}

.si-condicoes > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.125rem;
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--si-verde);
    -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M5 12.5l4.5 4.5L19 7.5'/%3e%3c/svg%3e") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M5 12.5l4.5 4.5L19 7.5'/%3e%3c/svg%3e") center / contain no-repeat;
}

@media (min-width: 992px) {
    .si-comecar {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        column-gap: var(--si-esp-7);
    }

    .si-comecar > * { grid-column: 1; }

    .si-comecar > .si-condicoes {
        grid-column: 2;
        grid-row: 1 / span 6;
        align-self: start;
        margin: 0;
    }
}