/**
 * Camada de correção de contraste, Asa Delta
 *
 * Todas as razões abaixo foram medidas no site publicado pela fórmula de
 * contraste da WCAG 2.1. O mínimo é 4.5:1 para texto normal e 3:1 para texto
 * grande (>=24px, ou >=18.66px em peso 700+).
 *
 * Sobre os !important: o Elementor gera estilos por elemento com três classes
 * de especificidade (.elementor-14 .elementor-element-XXXX .alvo) que vencem
 * do kit. Esta folha existe para derrubar exatamente esses casos.
 *
 * Cada !important aqui é uma dívida com endereço: a correção durável é ajustar
 * o elemento no Elementor e remover a regra correspondente. Ver docs/06-acessibilidade.md.
 *
 * ---------------------------------------------------------------------------
 * ESCOPO, corrigido em 2026-09-07
 *
 * Esta folha nasceu quando o site tinha duas páginas e tudo vivia dentro de
 * .asa-site, o container raiz da home. Todo seletor daqui começava por
 * `.asa-site`, e isso passou despercebido quando o site ganhou páginas novas:
 *
 *   home            -> .asa-site            (container da própria página)
 *   páginas internas -> .asa-main            (o <main> de cada página)
 *   header/rodapé   -> .ekit-template-content-header / -footer
 *
 * Fora de .asa-site nenhuma regra desta folha se aplicava. Medido em
 * /contato/ antes da correção: títulos do FAQ a 3.10:1, links do rodapé a
 * 1.00:1, preto sobre preto, invisíveis, e nenhum indicador de foco.
 *
 * Por isso cada grupo abaixo repete o seletor para as raízes que fazem
 * sentido: a especificidade continua a mesma, só o alcance muda.
 * ------------------------------------------------------------------------- */

/* O token também existe em :root, no kit. Mantido aqui para a folha
 * continuar funcionando sozinha. */
.asa-site,
.asa-main,
.ekit-template-content-header,
.ekit-template-content-footer {
	--asa-orange-ink: #C1481D;
}

/* ---------------------------------------------------------------------------
 * 1. Kickers laranja sobre as seções claras
 *
 * As seções escuras (.asa-hero, .asa-page-hero, .asa-audience, .asa-waitlist)
 * ficam de fora de propósito: lá o laranja original rende 6.0:1 e escurecê-lo
 * pioraria.
 * ------------------------------------------------------------------------- */

.asa-site .asa-intro .asa-kicker .elementor-heading-title,
.asa-site .asa-process .asa-kicker .elementor-heading-title,
.asa-site .asa-faq .asa-kicker .elementor-heading-title,
.asa-main .asa-intro .asa-kicker .elementor-heading-title,
.asa-main .asa-process .asa-kicker .elementor-heading-title,
.asa-main .asa-faq .asa-kicker .elementor-heading-title,
.asa-main .asa-pricing .asa-kicker .elementor-heading-title {
	color: var(--asa-orange-ink);
}

/* ---------------------------------------------------------------------------
 * 2. Numeração dos cards e das etapas
 *
 * .asa-card-index vive sobre branco (3.37:1) e .asa-step-number sobre o
 * paper (3.10:1). Ambos a 12,5px peso 800, texto pequeno, exige 4.5:1.
 * ------------------------------------------------------------------------- */

.asa-site .asa-card-index .elementor-heading-title,
.asa-site .asa-step-number .elementor-heading-title,
.asa-main .asa-card-index .elementor-heading-title,
.asa-main .asa-step-number .elementor-heading-title {
	color: var(--asa-orange-ink);
}

/* O valor dos pacotes usa a mesma família de laranja sobre o paper. */
.asa-main .asa-price .elementor-heading-title {
	color: var(--asa-orange-ink);
}

/* ---------------------------------------------------------------------------
 * 3. Títulos do FAQ
 *
 * Perguntas a 16px peso 700 em laranja sobre o paper: 3.10:1. É o pior caso
 * de legibilidade da página, porque são texto de leitura. A cor vem de um
 * estilo por elemento do Elementor, daí o !important.
 *
 * O acordeão do Elementor monta o título como <a> dentro de
 * .elementor-tab-title; nas páginas novas a classe .elementor-accordion-title
 * nem sempre aparece, então os dois seletores precisam existir.
 * ------------------------------------------------------------------------- */

.asa-site .asa-faq .elementor-accordion-title,
.asa-site .asa-faq .elementor-tab-title,
.asa-site .asa-faq .elementor-tab-title a,
.asa-main .asa-faq .elementor-accordion-title,
.asa-main .asa-faq .elementor-tab-title,
.asa-main .asa-faq .elementor-tab-title a {
	color: var(--asa-orange-ink) !important;
}

/* ---------------------------------------------------------------------------
 * 4. Rodapé, texto praticamente invisível
 *
 * O kit pede rgba(255,255,255,.5) em .asa-footer-meta, mas o estilo global
 * do Elementor repinta os <p> de #1B1B1B e os <a> de #000 sobre fundo preto:
 *
 *   linha de copyright            #1B1B1B sobre #000 → 1.22:1
 *   link Política de Privacidade  #000 sobre #000    → 1.00:1
 *   e-mail de contato             #000 sobre #000    → 1.00:1
 *
 * 1.00:1 é texto invisível. Some daí o único link interno real do site e o
 * canal de contato alternativo.
 *
 * O rodapé das páginas internas é o template do ElementsKit, fora de
 * .asa-site: até 2026-09-07 ele continuava com os três defeitos acima.
 * ------------------------------------------------------------------------- */

.asa-site .asa-footer .asa-footer-meta p,
.asa-site .asa-footer .asa-footer-meta,
.ekit-template-content-footer .asa-footer-meta p,
.ekit-template-content-footer .asa-footer-meta {
	color: rgba(255, 255, 255, .72) !important; /* 10.6:1 sobre preto */
}

.asa-site .asa-footer .asa-footer-meta a,
.asa-site .asa-footer .asa-footer-copy a,
.ekit-template-content-footer .asa-footer-meta a,
.ekit-template-content-footer .asa-footer-copy a {
	color: #FFFFFF !important; /* 21:1 sobre preto */
	text-decoration: underline;
	text-underline-offset: .18em;
	text-decoration-thickness: 1px;
}

.asa-site .asa-footer .asa-footer-meta a:hover,
.asa-site .asa-footer .asa-footer-meta a:focus-visible,
.ekit-template-content-footer .asa-footer-meta a:hover,
.ekit-template-content-footer .asa-footer-meta a:focus-visible {
	color: var(--asa-orange, #F15A24) !important; /* 6.2:1 sobre preto */
}

/* ---------------------------------------------------------------------------
 * 5. Link dentro de texto corrido em seção escura
 *
 * O estilo global do Elementor pinta <a> de #000. Sobre .asa-cta, .asa-hero,
 * .asa-page-hero, .asa-audience e .asa-waitlist, todas de fundo preto, isso
 * dá 1.00:1: o link existe, é clicável e ninguém o vê.
 *
 * Foi assim que o link "use o WhatsApp" da /contato/ nasceu invisível.
 *
 * Branco com sublinhado, igual ao rodapé: a indicação não depende de cor
 * (WCAG 1.4.1) e o padrão do site fica um só. Os botões ficam de fora, eles
 * têm preenchimento próprio.
 * ------------------------------------------------------------------------- */

.asa-cta a:not(.elementor-button),
.asa-hero a:not(.elementor-button),
.asa-page-hero a:not(.elementor-button),
.asa-audience a:not(.elementor-button),
.asa-waitlist a:not(.elementor-button),
.asa-legal-hero a:not(.elementor-button) {
	color: #FFFFFF !important; /* 21:1 sobre preto */
	text-decoration: underline;
	text-underline-offset: .18em;
	text-decoration-thickness: 1px;
}

.asa-cta a:not(.elementor-button):hover,
.asa-cta a:not(.elementor-button):focus-visible,
.asa-hero a:not(.elementor-button):hover,
.asa-page-hero a:not(.elementor-button):hover,
.asa-audience a:not(.elementor-button):hover,
.asa-waitlist a:not(.elementor-button):hover,
.asa-legal-hero a:not(.elementor-button):hover {
	color: var(--asa-orange, #F15A24) !important; /* 6.2:1 sobre preto */
}

/* Em seção clara o link de texto herda o preto do tema, que já rende 21:1;
 * falta só o sublinhado, para não depender de cor. */
.asa-main .asa-intro a:not(.elementor-button),
.asa-main .asa-pricing a:not(.elementor-button),
.asa-main .asa-process a:not(.elementor-button) {
	text-decoration: underline;
	text-underline-offset: .18em;
}

/* ---------------------------------------------------------------------------
 * 6. Botão de envio do formulário da lista de espera
 *
 * O kit já pede `color: var(--asa-black)` neste botão, preto sobre laranja,
 * 6.23:1, exatamente como os outros CTAs primários da página. Um ajuste por
 * elemento no Elementor o repinta de branco, o que derruba para 3.37:1 e
 * ainda quebra a consistência com .asa-button--primary.
 *
 * Só existe na home, então o escopo continua em .asa-site.
 * ------------------------------------------------------------------------- */

.asa-site .asa-waitlist-form button.elementor-button,
.asa-site .asa-waitlist-form .elementor-button,
.asa-site .asa-waitlist-form .elementor-button .elementor-button-text,
.asa-main .asa-waitlist-form button.elementor-button,
.asa-main .asa-waitlist-form .elementor-button,
.asa-main .asa-waitlist-form .elementor-button .elementor-button-text {
	color: var(--asa-black, #000000) !important;
}

/* A página /blog/ repete o formulário (newsletter) fora de .asa-site. */
.asa-site .asa-waitlist-form .elementor-button:hover,
.asa-site .asa-waitlist-form .elementor-button:focus-visible,
.asa-site .asa-waitlist-form .elementor-button:hover .elementor-button-text,
.asa-site .asa-waitlist-form .elementor-button:focus-visible .elementor-button-text,
.asa-main .asa-waitlist-form .elementor-button:hover,
.asa-main .asa-waitlist-form .elementor-button:focus-visible,
.asa-main .asa-waitlist-form .elementor-button:hover .elementor-button-text,
.asa-main .asa-waitlist-form .elementor-button:focus-visible .elementor-button-text {
	color: var(--asa-white, #FFFFFF) !important; /* o hover troca o fundo para preto */
}

/* ---------------------------------------------------------------------------
 * 7. Foco visível
 *
 * Navegação por teclado é requisito da mesma norma e o kit não define foco em
 * links de texto. Vale em todas as raízes: até 2026-09-07 as páginas internas,
 * o header e o rodapé não tinham indicador nenhum.
 * ------------------------------------------------------------------------- */

.asa-site a:focus-visible,
.asa-site button:focus-visible,
.asa-site [role="button"]:focus-visible,
.asa-main a:focus-visible,
.asa-main button:focus-visible,
.asa-main [role="button"]:focus-visible,
.ekit-template-content-header a:focus-visible,
.ekit-template-content-header button:focus-visible,
.ekit-template-content-footer a:focus-visible,
.ekit-template-content-footer button:focus-visible {
	outline: 3px solid var(--asa-orange, #F15A24);
	outline-offset: 3px;
	border-radius: 4px;
}