@charset "UTF-8";
/* =============================================================================
   MSX PAY - Camada de conformidade, design tokens e acessibilidade
   -----------------------------------------------------------------------------
   Este arquivo e ADITIVO. Ele nao substitui o tema HTWF nem o skin.css.
   Objetivo: (a) expor os valores da marca ja existentes como tokens reutilizaveis,
   (b) estilizar os blocos regulatorios da Resolucao Conjunta n. 16/2025,
   (c) corrigir lacunas de acessibilidade WCAG 2.1 AA do tema legado.

   Nao editar HTWF/ nem pages/ (codigo de terceiros / vendor).
   Ordem de carregamento esperada: bootstrap -> HTWF -> skin.css -> ESTE arquivo.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. DESIGN TOKENS
   As cores institucionais NAO foram alteradas: os valores abaixo foram extraidos
   do skin.css existente e apenas nomeados semanticamente.
   -------------------------------------------------------------------------- */
:root {
    /* Cores da marca (extraidas de skin.css - valores preservados) */
    --msx-color-brand: #407BFF;            /* azul institucional - identidade, NAO alterar */
    --msx-color-primary: var(--msx-color-brand);   /* alias historico do mesmo azul */
    --msx-color-accent: #00D392;           /* verde institucional (CTA "Abrir conta") */

    /* Verde escurecido legado (mantido como token). O CTA "Abrir conta" do menu
       usa o mint institucional #00D392 com rotulo #0F172A = 9,12:1.
       Branco sobre #00D392 = 1,96:1 continua reprovado. */
    --msx-color-accent-deep: #008257;
    --msx-color-accent-deep-hover: #007A52; /* branco = 5,38:1 */
    --msx-color-accent-hover: #00C285; /* mint um passo mais escuro; tinta #0F172A >= 4,5:1 */
    --msx-color-muted: #9DAAC7;            /* cinza-azulado do tema */
    --msx-color-muted-strong: #8492AF;     /* cinza-azulado de bordas do tema */
    --msx-color-surface-brand: #F4F9FE;    /* superficie azul clara do tema */

    /* Companheira escura da marca (mesmo matiz/saturacao do #407BFF, HSL 221,6 / 100%).
       Medicoes (formula WCAG de luminancia relativa):
         #407BFF -> 3,82:1 sobre #FFFFFF (reprova texto normal; ok para UI 3:1);
         #0048EB -> 6,72:1 sobre #FFFFFF e 6,42:1 sobre #F8FAFC (AA/AAA);
                    branco sobre #0048EB = 6,72:1 (AA/AAA) — usado em preenchimento
                    de botoes solidos e fundo do rodape.
       Em bordas/icones/gradientes/aneis de foco genericos permanece o #407BFF. */
    --msx-color-brand-text: #0048EB;
    --msx-color-primary-text: var(--msx-color-brand-text);  /* alias historico */
    --msx-color-brand-fill: #0048EB;       /* preenchimento acessivel (botoes + footer) */
    --msx-color-brand-fill-hover: #0039C4; /* hover um passo mais escuro; branco >= 4,5:1 */

    /* Cores dos blocos regulatorios (especificacao RC 16/2025) */
    --msx-color-ink: #0F172A;              /* 17,06:1 sobre --msx-color-surface */
    --msx-color-text: #334155;             /* 9,90:1 sobre --msx-color-surface */
    --msx-color-surface: #F8FAFC;
    --msx-color-border: #E5E7EB;
    --msx-color-on-dark: #FFFFFF;          /* 17,85:1 sobre --msx-color-ink; 6,72:1 sobre #0048EB */
    --msx-color-on-dark-soft: #E2E8F0;     /* 14,48:1 sobre --msx-color-ink; 5,45:1 sobre #0048EB */
    --msx-color-on-dark-link: #9EC1FF;     /* 9,80:1 sobre --msx-color-ink (fundos navy) */
    /* Hover de links SOBRE o azul do rodape/botoes (#0048EB). #9EC1FF so rende
       3,69:1 ali (reprova texto). #CFE0FF = 5,04:1 (AA). */
    --msx-color-on-brand-link: #CFE0FF;

    /* Selo Asaas - pilula "Parceiro Oficial".
       A pilula era translucida (rgba(11,92,255,.10)), o que faz o contraste
       depender do que estiver atras dela. Hoje o .asaas-seal-wrapper e opaco
       (#F8FAFC) e a translucidez resolvia para #E0EAFC, mas basta o wrapper
       mudar de fundo - no rodape verde, por exemplo - para o texto de 10px
       despencar. A pilula passa a ter fundo claro OPACO proprio.
       Par real, medido no navegador: #0A4FD6 sobre #E0EAFC = 5,59:1
       (texto de 10px exige 4,5:1; aprova AA). */
    --msx-color-asaas-badge: #0A4FD6;
    --msx-color-asaas-badge-bg: #E0EAFC;

    /* Espacamento - escala estrita 4px / 8px */
    --msx-space-1: 4px;
    --msx-space-2: 8px;
    --msx-space-3: 12px;
    --msx-space-4: 16px;
    --msx-space-5: 20px;
    --msx-space-6: 24px;
    --msx-space-8: 32px;
    --msx-space-10: 40px;
    --msx-space-12: 48px;

    /* Escala tipografica */
    --msx-font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --msx-text-xs: 11px;
    --msx-text-sm: 13px;
    --msx-text-base: 15px;
    --msx-text-md: 17px;
    --msx-text-lg: 20px;
    --msx-leading-tight: 1.35;
    --msx-leading-normal: 1.55;
    --msx-measure: 68ch;                   /* comprimento de linha legivel */

    /* Raios e sombras */
    --msx-radius-sm: 6px;
    --msx-radius-md: 10px;
    --msx-radius-lg: 12px;
    --msx-radius-pill: 999px;
    --msx-shadow-1: 0 1px 2px rgba(15, 23, 42, .06);
    --msx-shadow-2: 0 6px 18px rgba(15, 23, 42, .08);

    /* Alvos de toque (WCAG 2.5.5) */
    --msx-tap-min: 44px;

    /* Camadas. O modulo de cookies (LGPD) usa 99999; ficamos abaixo dele. */
    --msx-z-skiplink: 99998;
}

/* -----------------------------------------------------------------------------
   2. TIPOGRAFIA
   Escolha: pilha Inter-first SEM requisicao de webfont externa. O site nao tem
   etapa de build e ja carrega muito CSS de terceiros; adicionar Google Fonts
   introduziria requisicao bloqueante e mais um dominio na CSP. Roboto e mantido
   na pilha para preservar a renderizacao atual onde ele existe.
   -------------------------------------------------------------------------- */
body,
.msx-compliance-note,
.msx-footer-note,
.asaas-seal-wrapper {
    font-family: var(--msx-font-sans);
}

/* -----------------------------------------------------------------------------
   3. ACESSIBILIDADE - correcoes do tema legado
   -------------------------------------------------------------------------- */

/* Apenas para leitores de tela. */
.msx-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* "Pular para o conteudo" - WCAG 2.4.1 */
.msx-skip-link {
    position: absolute;
    left: var(--msx-space-2);
    top: -100px;
    z-index: var(--msx-z-skiplink);
    display: inline-block;
    min-height: var(--msx-tap-min);
    padding: var(--msx-space-3) var(--msx-space-4);
    background: var(--msx-color-ink);
    color: var(--msx-color-on-dark) !important;
    font-size: var(--msx-text-base);
    font-weight: 600;
    line-height: var(--msx-leading-tight);
    text-decoration: none;
    border-radius: 0 0 var(--msx-radius-md) var(--msx-radius-md);
    transition: top .15s ease-in-out;
}

.msx-skip-link:focus,
.msx-skip-link:focus-visible {
    top: 0;
    outline: 3px solid var(--msx-color-primary);
    outline-offset: 2px;
}

/* O tema legado remove o outline de foco (HTWF/style.css e bootstrap.css usam
   outline:none, inclusive com !important). Reintroduzimos um anel visivel.
   #407BFF sobre branco = 3,82:1, acima do minimo de 3:1 para componentes. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.navbar-toggle:focus-visible,
.accordion-list .list-group-item > a:focus-visible {
    outline: 3px solid var(--msx-color-primary) !important;
    outline-offset: 2px !important;
    border-radius: var(--msx-radius-sm);
}

/* MSX - setas do flexslider ficam opacity:0 ate o hover do tema; no foco
   por teclado precisam aparecer para o indicador ser perceptivel. */
.flex-direction-nav a.flex-prev:focus,
.flex-direction-nav a.flex-prev:focus-visible,
.flex-direction-nav a.flex-next:focus,
.flex-direction-nav a.flex-next:focus-visible {
    opacity: 1 !important;
    outline: 3px solid var(--msx-color-primary) !important;
    outline-offset: 2px !important;
}
.flex-direction-nav a.flex-prev:focus,
.flex-direction-nav a.flex-prev:focus-visible {
    left: 0;
}
.flex-direction-nav a.flex-next:focus,
.flex-direction-nav a.flex-next:focus-visible {
    right: 0;
}
.flexslider.outer-navs .flex-direction-nav a.flex-prev:focus,
.flexslider.outer-navs .flex-direction-nav a.flex-prev:focus-visible {
    left: 40px;
}
.flexslider.outer-navs .flex-direction-nav a.flex-next:focus,
.flexslider.outer-navs .flex-direction-nav a.flex-next:focus-visible {
    right: 40px;
}

/* O antigo bloco com fundo bg-5.png (texto branco) deixou de existir na home,
   por isso a excecao de anel branco daquele fundo foi removida. */

/* Rodape azul institucional (#0048EB): anel branco = 6,72:1 (>= 3:1 de foco). */
footer a:focus-visible,
footer button:focus-visible {
    outline-color: var(--msx-color-on-dark) !important;
}

/* Navegadores sem :focus-visible ainda recebem foco visivel. */
@supports not selector(:focus-visible) {
    a:focus,
    button:focus,
    input:focus,
    textarea:focus,
    .btn:focus {
        outline: 3px solid var(--msx-color-primary) !important;
        outline-offset: 2px !important;
    }
}

/* WCAG 1.4.1 - Uso da cor: links em meio a texto corrido nao podem ser
   identificados apenas pelo azul. O tema legado herda o `text-decoration: none`
   do Bootstrap, entao devolvemos o sublinhado somente aos <a> filhos diretos de
   paragrafos e de listas de texto. Menus, abas, botoes e titulos de cartao ficam
   de fora: neles o link nao esta imerso em um bloco de texto. */
p > a:not(.btn):not([class*="btn-"]):not(.circle-button):not([data-toggle]):not([data-anima]),
ul.list-texts li > a:not(.btn) {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Links que apenas envolvem imagens nao recebem sublinhado. */
p > a:has(img) {
    text-decoration: none;
}

/* Alvos de toque minimos - WCAG 2.5.5 (AAA, adotado como boa pratica). */
.navbar-toggle,
.scroll-top-mobile,
footer .social-group > a,
.cookie-prefs-link {
    min-width: var(--msx-tap-min);
    min-height: var(--msx-tap-min);
}

footer .social-group > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Sem overflow horizontal em nenhum breakpoint. */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

img {
    max-width: 100%;
}

/* Comprimento de linha legivel nos blocos novos. */
.msx-compliance-note p {
    max-width: var(--msx-measure);
}

/* -----------------------------------------------------------------------------
   4. RC 16/2025 - Bloco explicativo da informacao regulatoria
   Apresentacao sobria, alinhada a tipografia das secoes vizinhas do tema:
   nao deve parecer um alerta nem uma caixa injetada no layout.
   -------------------------------------------------------------------------- */
.msx-compliance-note {
    display: flex;
    align-items: flex-start;
    gap: var(--msx-space-3);
    margin: var(--msx-space-6) 0;
    padding: var(--msx-space-4);
    background: var(--msx-color-surface);
    border: 1px solid var(--msx-color-border);
    border-radius: var(--msx-radius-md);
    text-align: left;
}

.msx-compliance-note__icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    color: var(--msx-color-muted-strong);
}

.msx-compliance-note__body {
    flex: 1 1 auto;
    min-width: 0;
}

/* Rotulo em caixa baixa: o titulo em versalete azul destoava das secoes
   vizinhas do tema, que nao usam esse tratamento. */
.msx-compliance-note__title {
    margin: 0 0 var(--msx-space-1);
    font-size: var(--msx-text-sm);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--msx-color-ink);
}

.msx-compliance-note p {
    margin: 0;
    font-size: var(--msx-text-base);
    line-height: var(--msx-leading-normal);
    color: var(--msx-color-text);
}

.msx-compliance-note p + p {
    margin-top: var(--msx-space-2);
}

.msx-compliance-note strong {
    color: var(--msx-color-ink);
    font-weight: 600;
}

/* Variante de uma linha: mesma informacao, sem rotulo e sem peso visual de
   cartao. Usada em secoes que ja tratam do assunto no texto corrido. */
.msx-compliance-note--inline {
    gap: var(--msx-space-2);
    margin: var(--msx-space-4) 0;
    padding: var(--msx-space-3) var(--msx-space-4);
    align-items: center;
}

.msx-compliance-note--inline .msx-compliance-note__icon {
    margin-top: 0;
}

.msx-compliance-note--inline p {
    font-size: var(--msx-text-sm);
    line-height: var(--msx-leading-tight);
}

/* -----------------------------------------------------------------------------
   5. Selo Asaas - Parceiro Oficial
   -------------------------------------------------------------------------- */
.asaas-seal-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;                                     /* fora da escala 4/8 por vir da especificacao */
    padding: var(--msx-space-3) var(--msx-space-3);
    background: var(--msx-color-surface);
    border: 1px solid var(--msx-color-border);
    border-radius: var(--msx-radius-lg);
    transition: box-shadow .25s ease, transform .25s ease;
}

.asaas-seal-wrapper:hover {
    box-shadow: var(--msx-shadow-2);
    transform: translateY(-2px);
}

.asaas-seal-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--msx-color-asaas-badge);
    background: var(--msx-color-asaas-badge-bg);
    padding: 3px 10px;
    border-radius: var(--msx-radius-pill);
    white-space: nowrap;
}

.asaas-seal-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--msx-tap-min);
}

.asaas-seal-link img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* No rodape o selo aparece em escala reduzida: a frase ao lado ja informa quem
   presta os servicos. A informacao textual de reserva vive no `alt` do <img>. */
.msx-footer-note__seal .asaas-seal-wrapper {
    margin-left: auto;
    margin-right: 0;
    gap: var(--msx-space-1);
    padding: var(--msx-space-2);
    max-width: 148px;
}

.msx-footer-note__seal .asaas-seal-link {
    min-height: var(--msx-tap-min);
}

.msx-footer-note__seal .asaas-seal-link img {
    width: 124px;
    height: auto;
}

/* -----------------------------------------------------------------------------
   6. Linha de informacao regulatoria no rodape global
   Sem cartao e sem titulo: apenas uma linha discreta separada por um filete,
   no mesmo padrao do .copy-row do tema.
   CONTRASTE: fundo do rodape = --msx-color-brand-fill (#0048EB). Texto branco
   = 6,72:1 (AA/AAA). Links sublinhados (WCAG 1.4.1); hover reforca o filete
   e usa --msx-color-on-brand-link (#CFE0FF = 5,04:1 sobre #0048EB).
   -------------------------------------------------------------------------- */
.msx-footer-note {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--msx-space-4);
    margin: var(--msx-space-6) 0 0;
    padding: var(--msx-space-4) 0 0;
    /* rgba(255,255,255,.55) sobre #0048EB ≈ 3,4:1 (UI nao textual >= 3:1). */
    border-top: 1px solid rgba(255, 255, 255, .55);
    text-align: center;
}

.msx-footer-note__text {
    flex: 1 1 auto;
    min-width: 0;
}

.msx-footer-note p {
    margin: 0;
    max-width: var(--msx-measure);
    color: var(--msx-color-on-dark) !important;
    font-size: var(--msx-text-sm);
    line-height: var(--msx-leading-normal);
}

.msx-footer-note strong {
    color: var(--msx-color-on-dark) !important;
    font-weight: 600;
}

.msx-footer-note__links {
    margin-top: var(--msx-space-2) !important;
}

.msx-footer-note__links a {
    display: inline-flex;
    align-items: center;
    min-height: var(--msx-tap-min);
    color: var(--msx-color-on-dark) !important;
    font-size: var(--msx-text-sm);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.msx-footer-note__links a:hover,
.msx-footer-note__links a:focus {
    color: var(--msx-color-on-brand-link) !important;
    text-decoration-thickness: 2px;
}

.msx-footer-note__seal {
    flex: 0 0 auto;
}

/* Link permanente de preferencias de cookies (LGPD). O comportamento e a
   caixa de dialogo sao fornecidos por js/cookie-consent.js. */
.cookie-prefs-link {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

/* -----------------------------------------------------------------------------
   6.1 RODAPE GLOBAL - FUNDO AZUL + TEXTO BRANCO
   -----------------------------------------------------------------------------
   skin.css pinta o rodape de verde (`footer { background-color:#00D392
   !important }`, linha 2783). Decisao do proprietario: fundo azul institucional
   acessivel --msx-color-brand-fill (#0048EB) + texto claro.
   Medicoes sobre #0048EB (formula WCAG 2.1 / confirmadas no navegador):
     #FFFFFF -> 6,72:1   (aprova AA e AAA)
     #E2E8F0 -> 5,45:1   (aprova AA — hierarquia secundaria / copyright)
     #CFE0FF -> 5,04:1   (aprova AA — hover de links)
     #9EC1FF -> 3,69:1   (reprova sobre #0048EB — nao usar no rodape)
     #0F172A -> 6,72:1   (NAO usar: era o esquema do rodape verde)
   Logo do rodape: images/logo-fundo-azul.png (branco + mint sobre azul).
   -------------------------------------------------------------------------- */

footer {
    background-color: var(--msx-color-brand-fill) !important;
}

footer,
footer p,
footer li,
footer span,
footer a,
footer a:hover,
footer a:focus,
footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6,
footer .footer-title,
footer .tag-row span,
footer .tag-row i,
footer .fa-ul .fa-li,
footer .social-group,
footer .social-group i,
footer .social-group i.circle,
footer .copy-row .copy-text,
footer .copy-row .copy-text > span,
footer .copy-row .copy-text a {
    /* `!important` e obrigatorio: o tema ja usa `!important` nas mesmas
       propriedades - `footer { color:#FFF !important }` (skin.css 2784),
       `footer p, footer a, footer span, footer .social-group i { color:#9daac7
       !important }` (skin.css 304-314) e `footer .social-group { color:#fff
       !important }` (skin.css 2788). Sem `!important` o tema venceria. */
    color: var(--msx-color-on-dark) !important;
}

/* Hierarquia: copyright e informacao secundaria usam o tom suave AA. */
footer .copy-row .copy-text {
    color: var(--msx-color-on-dark-soft) !important;
}

/* Links do copyright: sublinhado permanente (WCAG 1.4.1). Hover reforca e
   usa --msx-color-on-brand-link (#CFE0FF = 5,04:1). */
footer .copy-row .copy-text a,
footer .copy-row .copy-text a:hover,
footer .copy-row .copy-text a:focus {
    color: var(--msx-color-on-dark) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}

footer .copy-row .copy-text a:hover,
footer .copy-row .copy-text a:focus {
    color: var(--msx-color-on-brand-link) !important;
    text-decoration-thickness: 2px;
}

/* Icones sociais: circulo + glifo brancos (>= 3:1 UI sobre #0048EB). */
footer .social-group i.circle {
    border-color: var(--msx-color-on-dark) !important;
}

/* No hover o tema troca o fundo do icone para a cor da rede social (escura):
   o glifo volta a branco. */
footer .social-group i.circle:hover,
footer .social-group a:hover i.circle,
footer .social-group a:focus i.circle,
footer .social-group button:hover i.circle,
footer .social-group button:focus i.circle,
footer .social-group button:focus-visible i.circle {
    color: var(--msx-color-on-dark) !important;
}

/* Filetes sobre o azul: rgba(255,255,255,.55) ≈ 3,4:1 (UI >= 3:1). */
footer:not(.footer-minimal) .copy-row {
    border-top-color: rgba(255, 255, 255, .55);
}

footer .tag-row span {
    border-color: rgba(255, 255, 255, .55);
}

/* A pilula "Parceiro Oficial" tem fundo claro OPACO proprio (#E0EAFC);
   devolver a cor do badge (independente do azul do rodape):
   #0A4FD6 sobre #E0EAFC = 5,59:1. */
footer .asaas-seal-badge {
    color: var(--msx-color-asaas-badge) !important;
}

/* -----------------------------------------------------------------------------
   6.2 RODAPE GLOBAL - ESPACAMENTO INTERNO
   -----------------------------------------------------------------------------
   Causa da faixa vazia entre a linha de links e o copyright: padding do tema
   `footer .container { padding: 80px 0 }` + `footer .copy-row .copy-text {
   padding: 30px 15px }`. Reduzido abaixo.
   -------------------------------------------------------------------------- */
footer .container {
    padding-bottom: var(--msx-space-8);
}

footer .copy-row .copy-text {
    padding-top: var(--msx-space-5);
    padding-bottom: var(--msx-space-5);
}

/* Abaixo de 768px o tema ja zera o float do bloco do link e lhe da padding-top
   (skin.css 3080), mas o mantem `inline-block`: o link fica colado ao CNPJ e
   acaba encoberto pelo botao flutuante de voltar ao topo. Em bloco ele ocupa a
   propria linha, como o padding-top do tema pressupoe. */
@media (max-width: 767px) {
    footer .copy-row .copy-text > span {
        display: block;
    }
}

/* -----------------------------------------------------------------------------
   7. Ajustes pontuais de layout legado nas 5 paginas reais
   -------------------------------------------------------------------------- */

/* O rodape do tema usa floats (text-right / footer-left). Trocado por flex
   nas colunas de icones sociais para eliminar quebras em telas medias. */
footer .social-group.btn-group-icons {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--msx-space-2);
    float: none;
}

footer .copy-row .copy-text {
    line-height: var(--msx-leading-normal);
}

/* Formulario de contato: mensagens de status acessiveis.
   js/common.js alterna display:none / block nestes contentores; mantemos os
   seletores .success-box e .error-box intactos. */
.success-box,
.error-box {
    display: none;
}

.success-box[aria-hidden="false"],
.error-box[aria-hidden="false"] {
    display: block;
}

.success-box .alert,
.error-box .alert {
    margin-top: var(--msx-space-4);
    border-radius: var(--msx-radius-md);
    font-size: var(--msx-text-base);
    line-height: var(--msx-leading-normal);
}

/* Rotulos reais do formulario (substituem os <p> decorativos anteriores). */
.msx-field-label {
    display: block;
    margin-bottom: var(--msx-space-1);
    font-size: var(--msx-text-base);
    font-weight: 600;
    color: var(--msx-color-ink);
}

.msx-field-hint {
    display: block;
    margin-top: var(--msx-space-1);
    font-size: var(--msx-text-sm);
    color: var(--msx-color-text);
}

/* -----------------------------------------------------------------------------
   8. RESPONSIVIDADE - mobile-first, verificada em 480 / 768 / 1024 / 1280 px
   -------------------------------------------------------------------------- */

/* Base (< 480px): blocos empilhados e centralizados. */
@media (max-width: 479px) {
    .msx-compliance-note {
        flex-direction: column;
        gap: var(--msx-space-2);
        padding: var(--msx-space-4);
    }

    .msx-compliance-note--inline {
        align-items: flex-start;
        padding: var(--msx-space-3);
    }
}

/* A partir de 768px a linha do rodape passa a ter o selo a direita do texto. */
@media (min-width: 768px) {
    .msx-footer-note {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--msx-space-6);
        text-align: left;
    }

    .msx-footer-note__seal .asaas-seal-wrapper {
        margin-left: auto;
    }
}

/* -----------------------------------------------------------------------------
   9. COMPARATIVO DE EFICIENCIA TRIBUTARIA (#eficiencia-tributaria)
   Substitui o antigo componente "pricing-table" do tema HTWF: ali havia uma
   comparacao ESTRUTURAL de modelos de pagamento, nao uma tabela de precos.
   Mobile-first, sem dependencia de JavaScript, sem style inline no HTML.

   Contrastes medidos pela formula WCAG (linearizacao sRGB, limiar 0,03928;
   L = 0.2126R + 0.7152G + 0.0722B; ratio = (L1+0,05)/(L2+0,05)):
     #0F172A sobre #F8FAFC = 17,06:1     #334155 sobre #F8FAFC =  9,90:1
     #0F172A sobre #FFFFFF = 17,85:1     #334155 sobre #FFFFFF = 10,35:1
     #0048EB sobre #FFFFFF =  6,72:1     #0F172A sobre #E5E7EB = 14,42:1
     #0F172A sobre #00D392 =  9,12:1  (o verde entra como FUNDO, nunca como
                                       cor de texto pequeno sobre claro)
     #407BFF sobre #FFFFFF =  3,82:1  (faixa/borda: elemento nao textual, >=3:1)
   -------------------------------------------------------------------------- */
.msx-tax-section {
    background-color: var(--msx-color-surface);
}

.msx-tax-section .msx-tax-intro {
    color: var(--msx-color-text);
    font-size: var(--msx-text-md);
    line-height: var(--msx-leading-normal);
    margin: 0 auto;
    max-width: var(--msx-measure);
}

/* O aviso de "nao e consultoria tributaria" fica no mesmo corpo de texto da
   introducao - sem reducao de tamanho e sem cor esmaecida. */
.msx-tax-section .msx-tax-intro strong {
    color: var(--msx-color-ink);
    font-weight: 700;
}

.msx-tax-card {
    background-color: var(--msx-color-on-dark);
    border: 1px solid var(--msx-color-border);
    border-radius: var(--msx-radius-lg);
    border-top-width: 4px;
    border-top-style: solid;
    box-shadow: var(--msx-shadow-1);
    display: flex;
    flex-direction: column;
    margin-bottom: var(--msx-space-6);
    padding: var(--msx-space-6);
    text-align: left;
    transition: box-shadow .25s ease, transform .25s ease;
}

/* Modelo tradicional: tom neutro e discreto. */
.msx-tax-card-legacy {
    border-top-color: var(--msx-color-text);
}

/* Modelo MSX Pay: destacado pelo azul institucional (elemento nao textual). */
.msx-tax-card-msx {
    border-color: var(--msx-color-brand);
    box-shadow: var(--msx-shadow-2);
}

.msx-tax-card-msx:hover {
    box-shadow: var(--msx-shadow-2);
    transform: translateY(-2px);
}

.msx-tax-card .msx-tax-card-head {
    border-bottom: 1px solid var(--msx-color-border);
    margin-bottom: var(--msx-space-5);
    padding-bottom: var(--msx-space-4);
}

.msx-tax-card .msx-tax-card-title {
    font-size: var(--msx-text-lg);
    font-weight: 700;
    line-height: var(--msx-leading-tight);
    margin: 0;
}

.msx-tax-section .msx-tax-card-legacy .msx-tax-card-title {
    color: var(--msx-color-text);
}

.msx-tax-section .msx-tax-card-msx .msx-tax-card-title {
    color: var(--msx-color-brand-text);
}

.msx-tax-card .msx-tax-list {
    flex: 1 1 auto;
    list-style: none;
    margin: 0;
    padding: 0;
}

.msx-tax-card .msx-tax-list li {
    align-items: flex-start;
    color: var(--msx-color-ink);
    display: flex;
    font-size: var(--msx-text-base);
    gap: var(--msx-space-3);
    line-height: var(--msx-leading-normal);
    padding: var(--msx-space-3) 0;
}

.msx-tax-card .msx-tax-list li + li {
    border-top: 1px solid var(--msx-color-border);
}

.msx-tax-card .msx-tax-mark {
    flex: 0 0 auto;
    font-size: var(--msx-text-sm);
    line-height: 1.75;
}

.msx-tax-card .msx-tax-mark-legacy {
    color: var(--msx-color-text);
}

.msx-tax-card .msx-tax-mark-msx {
    color: var(--msx-color-brand-text);
}

.msx-tax-card .msx-tax-outcome {
    border-radius: var(--msx-radius-md);
    font-size: var(--msx-text-md);
    font-weight: 700;
    line-height: var(--msx-leading-tight);
    margin: var(--msx-space-5) 0 0;
    padding: var(--msx-space-4);
    text-align: center;
}

.msx-tax-card .msx-tax-outcome-legacy {
    background-color: var(--msx-color-border);
    color: var(--msx-color-ink);
}

.msx-tax-card .msx-tax-outcome-msx {
    background-color: var(--msx-color-accent);
    color: var(--msx-color-ink);
}

/* Nota ao pe do comparativo: tamanho de corpo de texto, nao letra miuda. */
.msx-tax-section .msx-tax-note {
    background-color: var(--msx-color-on-dark);
    border: 1px solid var(--msx-color-border);
    border-left: 4px solid var(--msx-color-brand);
    border-radius: var(--msx-radius-md);
    color: var(--msx-color-text);
    font-size: var(--msx-text-base);
    line-height: var(--msx-leading-normal);
    margin: var(--msx-space-6) auto 0;
    /* A nota acompanha a largura do comparativo (.msx-tax-compare) para nao
       parecer um bloco solto; a legibilidade e mantida pelo recuo interno. */
    max-width: none;
    padding: var(--msx-space-5) var(--msx-space-6);
    text-align: left;
}

/* A partir de 768px os dois cartoes ficam lado a lado e com a mesma altura.
   Abaixo disso o col-md-6 do Bootstrap ja os empilha naturalmente. */
@media (min-width: 768px) {
    .msx-tax-compare {
        display: flex;
        flex-wrap: wrap;
    }

    .msx-tax-compare > [class*="col-"] {
        display: flex;
        float: none;
        width: 50%;
    }

    .msx-tax-card {
        margin-bottom: 0;
        width: 100%;
    }
}

@media (min-width: 1024px) {
    .msx-tax-card {
        padding: var(--msx-space-8);
    }

    .msx-tax-card .msx-tax-list li {
        font-size: var(--msx-text-md);
    }
}

/* -----------------------------------------------------------------------------
   9.1. HOME - GRADE UNIFICADA DE SOLUCOES E FLUXO DA CONTA ESCROW
   Uma unica convencao de cartao (.advs-box do tema) para todos os itens da
   secao fundida. Sem estilo inline: apenas classes msx- e os tokens acima.
   -------------------------------------------------------------------------- */
.msx-solutions-grid > [class*="col-"] {
    margin-bottom: var(--msx-space-6);
}

/* O tema pinta o corpo dos cartoes com #8492AF (3,13:1 sobre o branco do
   cartao, reprova AA). Aqui o texto usa o tom de corpo acessivel: #334155
   sobre #FFFFFF = 10,35:1. Tamanho e entrelinha seguem os do tema. */
.msx-solutions-grid .advs-box p {
    color: var(--msx-color-text);
}

/* O tema mantem .col-md-4 em 3 colunas de 768px a 991px (float), e empilha
   abaixo de 767px. O stretch acompanha esse intervalo para equalizar alturas. */
@media (min-width: 768px) {
    .msx-solutions-grid {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }

    .msx-solutions-grid > [class*="col-"] {
        display: flex;
        float: none;
        align-items: stretch;
    }

    .msx-solutions-grid > [class*="col-"] > .advs-box {
        width: 100%;
        height: 100%;
    }
}

/* Fluxo da conta escrow - subbloco do item "Conta Escrow Especializada". */
.msx-escrow-flow {
    background-color: var(--msx-color-surface);
    border: 1px solid var(--msx-color-border);
    border-left: 4px solid var(--msx-color-brand);
    border-radius: var(--msx-radius-md);
    margin-top: var(--msx-space-4);
    padding: var(--msx-space-6);
    text-align: left;
}

.msx-escrow-flow-title {
    /* #0F172A sobre #F8FAFC = 17,06:1 */
    color: var(--msx-color-ink) !important;
    font-family: var(--msx-font-sans);
    font-size: var(--msx-text-lg);
    font-weight: 600;
    line-height: var(--msx-leading-tight);
    margin: 0 0 var(--msx-space-2);
}

.msx-escrow-flow-intro {
    /* #334155 sobre #F8FAFC = 9,90:1 */
    color: var(--msx-color-text);
    font-size: var(--msx-text-base);
    line-height: var(--msx-leading-normal);
    margin: 0 0 var(--msx-space-5);
    max-width: var(--msx-measure);
}

.msx-escrow-steps {
    counter-reset: msx-escrow-step;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.msx-escrow-steps > li {
    color: var(--msx-color-text);
    counter-increment: msx-escrow-step;
    font-size: var(--msx-text-base);
    line-height: var(--msx-leading-normal);
    padding: 0 var(--msx-space-5) var(--msx-space-4) 0;
    width: 100%;
}

.msx-escrow-step-title {
    color: var(--msx-color-ink);
    display: block;
    font-size: var(--msx-text-md);
    line-height: var(--msx-leading-tight);
    margin-bottom: var(--msx-space-1);
}

.msx-escrow-step-title::before {
    /* #0048EB sobre #F8FAFC = 6,42:1 */
    color: var(--msx-color-brand-text);
    content: counter(msx-escrow-step) ". ";
}

@media (min-width: 768px) {
    .msx-escrow-steps > li {
        width: 50%;
    }
}

@media (min-width: 992px) {
    .msx-escrow-steps > li {
        padding-bottom: 0;
        width: 25%;
    }
}

/* -----------------------------------------------------------------------------
   10. PREFERENCIAS DO USUARIO
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .asaas-seal-wrapper,
    .msx-skip-link,
    .msx-tax-card {
        transition: none;
    }

    .asaas-seal-wrapper:hover {
        transform: none;
        box-shadow: var(--msx-shadow-2);
    }

    .msx-tax-card-msx:hover {
        transform: none;
        box-shadow: var(--msx-shadow-2);
    }
}

@media (prefers-contrast: more) {
    .msx-compliance-note,
    .asaas-seal-wrapper,
    .msx-tax-card,
    .msx-tax-section .msx-tax-note {
        border-color: var(--msx-color-ink);
    }

    .msx-footer-note {
        border-top-color: var(--msx-color-ink);
    }

    .msx-compliance-note p {
        color: var(--msx-color-ink);
    }
}

/* -----------------------------------------------------------------------------
   11. IMPRESSAO - a informacao regulatoria deve sair no papel
   -------------------------------------------------------------------------- */
@media print {
    .msx-footer-note p,
    .msx-footer-note strong,
    .msx-footer-note__links a {
        color: #000 !important;
    }

    .msx-skip-link,
    .scroll-top-mobile {
        display: none !important;
    }
}

/* -----------------------------------------------------------------------------
   12. HOME - CONTRASTE DOS CARTOES E FECHAMENTO UNICO DE CONTATO
   -------------------------------------------------------------------------- */

/* 12.1 Corpo de texto das secoes de conteudo.
   Origem do problema (uma unica regra do tema): skin.css 267-281 agrupa
   `body, .advs-box p, .list-items .list-item p, .title-base p, a, ...` em
   #8492AF. Medido no navegador sobre o branco resolvido das secoes da home,
   isso rende 3,13:1 - reprova o minimo AA de 4,5:1 para texto normal (15px).
   Por heranca de `body`, reprovavam tambem os elementos SEM regra propria:
   `<p>` e `<b>` de `.icon-box`, os paragrafos de introducao das secoes, os
   `<strong>` dentro deles e os `<li>` das listas `.fa-ul`.
   #334155 rende 10,35:1 sobre #FFFFFF e 9,78:1 sobre #F4F9FE.
   Antes a correcao existia so dentro de .msx-solutions-grid. */
.advs-box p,
.icon-box p,
.icon-box b,
.list-items .list-item p,
.header-base:not(.white) p,
.pricing-table .list-group-item {
    color: var(--msx-color-text);
}

/* Corrige de uma vez tudo o que herda a cor de `body` dentro das secoes de
   conteudo (paragrafos de introducao, strong, b e li).
   Duas exclusoes, ambas por causa de fundo escuro:
   - `:not(.white)` preserva o texto claro do tema em
     `.section-bg-image.parallax-window.white` (loja-virtual.html);
   - `:not(.parallax-window)` cobre o caso que a primeira nao pegava: o heroi da
     loja-virtual.html e `.section-bg-image.parallax-window` SEM `.white`, mas o
     script de parallax injeta atras dele a imagem hd-1.jpg (azul-marinho,
     media #0F1A37). Com a heranca escura o subtitulo caia para 1,66:1; sem
     ela volta ao tom claro do tema, medido em 5,49:1 sobre a imagem (o
     subtitulo tem 27px, entao o minimo aplicavel e 3:1). As duas
     unicas `.parallax-window` do site estao nessa pagina e usam essa imagem. */
.section-empty:not(.white),
.section-bg-image:not(.white):not(.parallax-window) {
    color: var(--msx-color-text);
}

/* Links de texto corrido nas secoes de conteudo (e-mail e telefone do bloco de
   contato). O tema os inclui no mesmo grupo #8492AF, com regra propria de
   elemento - por isso a heranca acima nao os alcanca. #0048EB e o azul da
   marca ja usado neste arquivo para texto: 6,72:1 sobre #FFFFFF.
   Botoes, `.circle-button` e links de imagem ficam de fora. */
.section-empty:not(.white) > .container.content a:not([class]),
.section-bg-image:not(.white) > .container.content a:not([class]) {
    color: var(--msx-color-brand-text);
}

/* 12.1b Home - blocos de convencimento (apos Como Funciona).
   Mesma convencao de cartao das solucoes; tipografia alinhada aos tokens. */
.msx-why-grid > [class*="col-"],
.msx-tech-own-grid > [class*="col-"] {
    margin-bottom: var(--msx-space-6);
}

.msx-why-grid .advs-box p,
.msx-tech-own-grid .advs-box p {
    color: var(--msx-color-text);
}

.msx-tech-own-cta {
    margin-top: var(--msx-space-6);
}

@media (min-width: 768px) {
    .msx-why-grid,
    .msx-tech-own-grid {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }

    .msx-why-grid > [class*="col-"],
    .msx-tech-own-grid > [class*="col-"] {
        display: flex;
        float: none;
        align-items: stretch;
    }

    .msx-why-grid > [class*="col-"] > .advs-box,
    .msx-tech-own-grid > [class*="col-"] > .advs-box {
        width: 100%;
    }
}

/* 12.2 Fechamento unico imediatamente antes do formulario de contato.
   Consolida os tres convites que antes se repetiam na home. Fundo alinhado a
   secao "Solucoes Especializadas para o seu Setor" (.section-empty = #FFF).
   Contraste sobre #FFFFFF:
     #0F172A titulo/texto = 17,85:1 (AA/AAA)
     #334155 corpo        = 10,35:1 (AA/AAA)
     botao #0048EB + #FFF = 6,72:1 (AA/AAA); botao vs fundo = 6,72:1
     link  #0048EB        = 6,72:1 (AA)
   Nenhum `style` de cor permanece no HTML. */
.msx-cta-final {
    background-color: #FFF;
}

.msx-cta-final .msx-cta-final__title {
    color: var(--msx-color-ink);
    font-size: 30px;
    line-height: var(--msx-leading-tight);
    margin: 0 0 var(--msx-space-5);
}

.msx-cta-final .msx-cta-final__text {
    color: var(--msx-color-text);
    font-size: var(--msx-text-md);
    line-height: var(--msx-leading-normal);
    max-width: var(--msx-measure);
    margin: 0 auto var(--msx-space-5);
}

.msx-cta-final .msx-cta-final__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--msx-space-5);
}

/* Primario solido azul institucional acessivel (mesmo padrao de .circle-button
   / brand-fill): rotulo branco sobre #0048EB = 6,72:1. */
.msx-cta-final .msx-cta-final__btn,
.msx-cta-final .msx-cta-final__btn:link,
.msx-cta-final .msx-cta-final__btn:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--msx-tap-min);
    padding: var(--msx-space-3) var(--msx-space-8);
    border: 2px solid var(--msx-color-brand-fill);
    border-radius: var(--msx-radius-pill);
    background-color: var(--msx-color-brand-fill);
    color: var(--msx-color-on-dark);
    font-size: var(--msx-text-md);
    text-decoration: none;
}

.msx-cta-final .msx-cta-final__btn:hover,
.msx-cta-final .msx-cta-final__btn:focus {
    background-color: var(--msx-color-brand-fill-hover);
    border-color: var(--msx-color-brand-fill-hover);
    color: var(--msx-color-on-dark);
}

.msx-cta-final .msx-cta-final__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--msx-tap-min);
    color: var(--msx-color-brand-text);
    font-size: var(--msx-text-md);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.msx-cta-final .msx-cta-final__link:hover,
.msx-cta-final .msx-cta-final__link:focus {
    color: var(--msx-color-brand-fill-hover);
    text-decoration-thickness: 2px;
}

/* Anel de foco azul (#407BFF) sobre branco = 3,82:1 (UI nao textual >= 3:1). */
.msx-cta-final a:focus-visible,
.msx-cta-final a:focus {
    outline-color: var(--msx-color-brand) !important;
}

/* 12.3 Compartilhamento do rodape convertido de `<a href="#">` para
   `<button type="button">`. O script do tema delega o clique por
   `[data-social]` (HTWF/scripts/script.js), portanto o comportamento continua
   identico; o botao apenas deixa de ser um link morto. Aqui o botao recebe a
   aparencia do antigo link e o alvo de toque minimo de 44px (WCAG 2.5.5). */
.social-group .msx-social-share {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--msx-tap-min);
    min-height: var(--msx-tap-min);
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}

/* -----------------------------------------------------------------------------
   13. ROTULOS DOS BOTOES DE ACAO (decisoes do proprietario)
   -------------------------------------------------------------------------- */

/* 13.1 Botao azul solido do tema (.circle-button.btn).
   Decisao do proprietario: rotulo BRANCO sobre preenchimento azul acessivel.
     #FFFFFF sobre #407BFF = 3,82:1  (reprova AA)
     #FFFFFF sobre #0048EB = 6,72:1  (aprova AA e AAA)
   Preenchimento usa --msx-color-brand-fill; hover/focus/active usam
   --msx-color-brand-fill-hover. A variante `.btn-border` fica de fora:
   ali o fundo e transparente e o rotulo ja e #0048EB sobre branco (6,72:1). */
.circle-button.btn:not(.btn-border),
.circle-button.btn:not(.btn-border):link,
.circle-button.btn:not(.btn-border):visited,
.circle-button.btn:not(.btn-border):active {
    background-color: var(--msx-color-brand-fill) !important;
    border-color: var(--msx-color-brand-fill) !important;
    color: var(--msx-color-on-dark) !important;
}

.circle-button.btn:not(.btn-border):hover,
.circle-button.btn:not(.btn-border):focus,
.circle-button.btn:not(.btn-border):focus-visible {
    background-color: var(--msx-color-brand-fill-hover) !important;
    border-color: var(--msx-color-brand-fill-hover) !important;
    color: var(--msx-color-on-dark) !important;
}

/* Anel de foco claro sobre o azul do botao (>= 3:1). */
.circle-button.btn:not(.btn-border):focus-visible {
    outline-color: var(--msx-color-on-dark) !important;
}

/* 13.2 Botoes de acao do menu ("Login" e "Abrir conta de pagamento").
   Modernizacao de layout (altura ~38px, radius 6px) e hierarquia:
     Login = solido azul escuro (#0048EB) + branco (6,72:1)
     Abrir conta = mint #00D392 + #0F172A (9,12:1) — mantido (critica do
                   proprietario era o footer verde, nao o CTA mint).
   Desktop: margem vertical (16+38+16=70) centra no navbar. Mobile: min 44px. */
.navbar-nav > li > a.msx-nav-cta,
.navbar-nav > li > a.msx-nav-cta:link,
.navbar-nav > li > a.msx-nav-cta:visited,
.navbar-nav > li > a.msx-nav-cta:hover,
.navbar-nav > li > a.msx-nav-cta:focus,
.navbar-nav > li > a.msx-nav-cta:active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 38px;
    min-height: 38px;
    margin: 16px 6px;
    padding: 0 14px;
    border: 1.5px solid transparent;
    border-radius: var(--msx-radius-sm);
    font-size: var(--msx-text-sm);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* Login = secundario solido azul + branco (alinha com botoes de conteudo). */
.navbar-nav > li > a.msx-nav-cta--login,
.navbar-nav > li > a.msx-nav-cta--login:link,
.navbar-nav > li > a.msx-nav-cta--login:visited,
.navbar-nav > li > a.msx-nav-cta--login:active {
    background-color: var(--msx-color-brand-fill) !important;
    border-color: var(--msx-color-brand-fill) !important;
    color: var(--msx-color-on-dark) !important;
}

.navbar-nav > li > a.msx-nav-cta--login:hover,
.navbar-nav > li > a.msx-nav-cta--login:focus {
    background-color: var(--msx-color-brand-fill-hover) !important;
    border-color: var(--msx-color-brand-fill-hover) !important;
    color: var(--msx-color-on-dark) !important;
}

/* Abrir conta = primario solido no mint institucional + rotulo escuro (9,12:1). */
.navbar-nav > li > a.msx-nav-cta--signup,
.navbar-nav > li > a.msx-nav-cta--signup:link,
.navbar-nav > li > a.msx-nav-cta--signup:visited,
.navbar-nav > li > a.msx-nav-cta--signup:active {
    background-color: var(--msx-color-accent) !important;
    border-color: var(--msx-color-accent) !important;
    color: var(--msx-color-ink) !important;
}

.navbar-nav > li > a.msx-nav-cta--signup:hover,
.navbar-nav > li > a.msx-nav-cta--signup:focus {
    background-color: var(--msx-color-accent-hover) !important;
    border-color: var(--msx-color-accent-hover) !important;
    color: var(--msx-color-ink) !important;
}

/* Anel de foco: branco sobre Login azul; escuro sobre Abrir conta mint. */
.navbar-nav > li > a.msx-nav-cta--login:focus-visible {
    outline-color: var(--msx-color-on-dark) !important;
}

.navbar-nav > li > a.msx-nav-cta--signup:focus-visible {
    outline-color: var(--msx-color-ink) !important;
}

@media (max-width: 767px) {
    .navbar-nav > li > a.msx-nav-cta,
    .navbar-nav > li > a.msx-nav-cta:link,
    .navbar-nav > li > a.msx-nav-cta:visited,
    .navbar-nav > li > a.msx-nav-cta:hover,
    .navbar-nav > li > a.msx-nav-cta:focus,
    .navbar-nav > li > a.msx-nav-cta:active {
        display: flex;
        width: calc(100% - 30px);
        height: auto;
        min-height: var(--msx-tap-min);
        margin: var(--msx-space-2) 15px;
        padding: var(--msx-space-2) var(--msx-space-4);
        white-space: normal;
        text-align: center;
    }
}

/* 12.5 Página Sobre (sobre.html): prosa institucional sem cartões no corpo.
   Medida de leitura alinhada aos tokens; lista de ofertas como blocos curtos. */
.msx-about-prose h2 {
    color: var(--msx-color-ink);
    margin-top: 0;
}

.msx-about-prose p,
.msx-about-prose li {
    color: var(--msx-color-text);
    font-size: var(--msx-text-md);
    line-height: var(--msx-leading-normal);
    max-width: var(--msx-measure);
}

.msx-about-offerings {
    list-style: none;
    margin: var(--msx-space-5) 0 0;
    padding: 0;
}

.msx-about-offerings li {
    margin: 0 0 var(--msx-space-5);
    padding: 0 0 var(--msx-space-5);
    border-bottom: 1px solid var(--msx-color-border, #E5E7EB);
    max-width: none;
}

.msx-about-offerings li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

/* Formulário de contato ao final de sobre.html (mesmos ids de contato.html) */
.msx-about-contact__lead {
    color: var(--msx-color-text);
    font-size: var(--msx-text-md);
    line-height: var(--msx-leading-normal);
    max-width: var(--msx-measure);
    margin-left: auto;
    margin-right: auto;
}

.msx-about-contact__box {
    padding: var(--msx-space-lg, 1.5rem);
}

.msx-about-contact__alt {
    margin-top: var(--msx-space-lg, 1.5rem);
    font-size: var(--msx-text-sm, 0.9375rem);
}

.msx-about-offerings strong {
    color: var(--msx-color-ink);
    display: block;
    margin-bottom: var(--msx-space-2);
}