/**
 * Kit visual da Asa Delta.
 *
 * Extraído VERBATIM do bloco <style id="asa-delta-kit-styles"> que hoje vive
 * dentro de um widget HTML da página 14. Nenhuma regra foi alterada: o objetivo
 * desta etapa é só tirar o CSS de dentro do conteúdo da página, para que ele
 * valha em todas as páginas, seja cacheado uma vez e saia do HTML.
 *
 * MIGRAÇÃO, enquanto o widget HTML da home não for removido, as duas cópias
 * coexistem sem efeito visual: o bloco embutido vem depois no documento e, em
 * empate de especificidade, ele vence. Isso é proposital, e torna a troca
 * reversível: se algo destoar, basta desativar o plugin.
 *
 * Ordem de carga: asa-kit.css primeiro, asa-a11y.css depois (as correções de
 * contraste precisam sobrescrever o kit).
 *
 * @see docs/07-arquitetura-multipagina.md
 */

/**
 * Tokens da marca no escopo global.
 *
 * O kit original definia estas variaveis apenas em .asa-site, o container raiz
 * da home. Header e rodape sao templates do ElementsKit e as paginas novas nao
 * herdam aquele wrapper: fora dele, var(--asa-white) e companhia ficavam
 * indefinidas e a cor simplesmente nao era aplicada.
 *
 * Promover para :root nao muda nada na home, .asa-site continua redefinindo
 * os mesmos valores logo abaixo, com especificidade maior.
 */
:root {
  --asa-orange: var(--e-global-color-primary, #F15A24);
  --asa-black: var(--e-global-color-secondary, #000000);
  --asa-text: var(--e-global-color-text, #1B1B1B);
  --asa-white: #FFFFFF;
  --asa-paper: #F7F5F2;
  --asa-line: rgba(0,0,0,.12);
  --asa-radius: 24px;
  --asa-shadow: 0 24px 70px rgba(0,0,0,.12);
  --asa-orange-ink: #C1481D;

  /* Escala de espacamento vertical entre blocos de uma secao.
   * Antes cada componente trazia o proprio valor (14, 16, 26, 28, 30, 34px)
   * e blocos sem regra propria ficavam colados no anterior. */
  --asa-space-xs: 10px;   /* kicker -> titulo */
  --asa-space-sm: 18px;   /* titulo -> texto corrido */
  --asa-space-md: 34px;   /* titulo -> grade, lista, tabela, acordeao */
  --asa-space-lg: 52px;   /* depois de um bloco de cards */
}

.asa-site {
  --asa-orange: var(--e-global-color-primary, #F15A24);
  --asa-black: var(--e-global-color-secondary, #000000);
  --asa-text: var(--e-global-color-text, #1B1B1B);
  --asa-white: #FFFFFF;
  --asa-paper: #F7F5F2;
  --asa-line: rgba(0,0,0,.12);
  --asa-radius: 24px;
  --asa-shadow: 0 24px 70px rgba(0,0,0,.12);
  width: 100%;
  max-width: none !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: clip;
  background: var(--asa-white);
  color: var(--asa-text);
}
.asa-site, .asa-site * { box-sizing: border-box; }
.asa-site .elementor-widget { margin: 0; }
.asa-site a { text-underline-offset: 3px; }
.asa-shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.asa-section { width: 100%; padding: clamp(72px, 8vw, 120px) 0; gap: 0; }
.asa-kicker .elementor-heading-title {
  color: var(--asa-orange); font: 700 .76rem/1.2 Sora, Arial, sans-serif;
  letter-spacing: .14em; text-transform: uppercase;
}
.asa-section-title .elementor-heading-title {
  color: inherit; font: 700 clamp(2rem, 4.3vw, 4.35rem)/.98 Sora, Arial, sans-serif;
  letter-spacing: -.055em; max-width: 900px;
}
.asa-section-copy { max-width: 720px; }
.asa-section-copy, .asa-card-copy, .asa-legal-copy {
  color: inherit; font: 400 clamp(1rem, 1.25vw, 1.12rem)/1.72 Nunito, Arial, sans-serif;
}
.asa-section-copy p, .asa-card-copy p, .asa-legal-copy p { margin: 0; }
.asa-header-wrap {
  position: sticky; top: 0; z-index: 50; width: 100%; padding: 12px 0;
  background: rgba(0,0,0,.88); border-bottom: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(16px);
}
.asa-header { min-height: 64px; flex-direction: row !important; align-items: center; justify-content: space-between; gap: 24px; }
.asa-logo { width: 205px !important; flex: 0 0 auto; }
.asa-logo img { width: 205px; height: auto; display: block; }
.asa-nav { flex-direction: row !important; align-items: center; justify-content: flex-end; gap: 2px; flex: 1 1 auto; }
.asa-nav-link { width: auto !important; }
.asa-nav-link .elementor-button {
  background: transparent; color: var(--asa-white); padding: 12px 13px;
  font: 700 .78rem/1 Sora, Arial, sans-serif; letter-spacing: .02em;
}
.asa-nav-link .elementor-button:hover, .asa-nav-link .elementor-button:focus-visible { color: var(--asa-orange); }
.asa-button { width: auto !important; }
.asa-button .elementor-button {
  border: 1px solid transparent; border-radius: 999px; padding: 15px 22px;
  font: 750 .84rem/1 Sora, Arial, sans-serif; white-space: nowrap; transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.asa-button .elementor-button:hover, .asa-button .elementor-button:focus-visible { transform: translateY(-2px); }
.asa-button--primary .elementor-button { background: var(--asa-orange); color: var(--asa-black); }
.asa-button--primary .elementor-button:hover, .asa-button--primary .elementor-button:focus-visible { background: var(--asa-white); color: var(--asa-black); }
.asa-button--outline .elementor-button { background: transparent; border-color: rgba(255,255,255,.42); color: var(--asa-white); }
.asa-button--outline .elementor-button:hover, .asa-button--outline .elementor-button:focus-visible { border-color: var(--asa-orange); color: var(--asa-orange); }
.asa-hero {
  position: relative; min-height: min(820px, calc(100vh - 88px)); padding: clamp(72px, 8vw, 118px) 0;
  background: var(--asa-black); color: var(--asa-white); isolation: isolate;
}
.asa-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .28;
  background-image: linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 56px 56px; mask-image: linear-gradient(to bottom, black, transparent 92%);
}
.asa-hero-grid { flex-direction: row !important; align-items: center; justify-content: space-between; gap: clamp(42px, 7vw, 92px); }
.asa-hero-copy { width: 58%; gap: 24px; align-items: flex-start; }
.asa-hero-title .elementor-heading-title {
  color: var(--asa-white); font: 800 clamp(2.7rem, 6.7vw, 6.8rem)/.88 Sora, Arial, sans-serif;
  letter-spacing: -.075em; max-width: 800px;
}
.asa-hero-title em { color: var(--asa-orange); font-style: normal; }
.asa-hero-lead { max-width: 690px; color: rgba(255,255,255,.76); font: 450 clamp(1.06rem, 1.45vw, 1.25rem)/1.65 Nunito, Arial, sans-serif; }
.asa-hero-lead p { margin: 0; }
.asa-hero-actions { flex-direction: row !important; align-items: center; flex-wrap: wrap; gap: 12px; }
.asa-hero-note { color: rgba(255,255,255,.58); font: 600 .82rem/1.55 Nunito, Arial, sans-serif; }
.asa-hero-note p { margin: 0; }
.asa-hero-art { width: 42%; min-width: 340px; }

/* ==========================================================================
 * HERO REATIVA AO CURSOR — "Grade Viva"
 *
 * Migrado do custom_css do template 49 (header) em 2026-09-17. Ficou lá de
 * 2026-09-09 até agora porque o conector da Hostinger tinha caído e o
 * arquivo do plugin não subia — post-49.css era a única folha que carregava
 * em todas as páginas naquele intervalo. Aqui é o lugar certo: é CSS da
 * home, não do header.
 *
 * O efeito soma dois tratamentos aprovados:
 *   holofote     — facho laranja que segue o cursor e acende a grade de 56px
 *   constelação  — os cruzamentos da grade viram nós que acendem e se ligam
 *
 * Só aparece em .asa-hero, que existe unicamente na home. As páginas
 * internas usam .asa-page-hero e ficam intocadas. O JavaScript que cria as
 * camadas e lê o cursor está em assets/js/asa-hero-fx.js.
 * ========================================================================== */

/* O conteúdo tem que ficar acima das camadas do efeito. */
.asa-hero .asa-hero-grid { position: relative; z-index: 1; }

.asa-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease;
}

.asa-fx.is-on { opacity: 1; }

/* Camada 1 — o facho. Coordenadas em px, escritas pelo script. */
.asa-fx__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(460px circle at var(--asa-mx, 50%) var(--asa-my, 42%),
    rgba(241, 90, 36, .24), rgba(241, 90, 36, .07) 44%, transparent 70%);
}

/* Camada 2 — a grade acesa, recortada pelo facho.
 *
 * O inset de -60px repete o da grade estática de .asa-hero::before. Sem
 * isso as duas grades ficariam 4px fora de registro e a linha apareceria
 * dobrada. Como esta camada começa 60px antes do hero, a posição do cursor
 * precisa do mesmo deslocamento. */
.asa-fx__reveal {
  position: absolute;
  inset: -60px;
  background-image:
    linear-gradient(rgba(241, 90, 36, .60) 1px, transparent 1px),
    linear-gradient(90deg, rgba(241, 90, 36, .60) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(300px circle at calc(var(--asa-mx, 50%) + 60px) calc(var(--asa-my, 42%) + 60px), #000 6%, transparent 60%);
  mask-image: radial-gradient(300px circle at calc(var(--asa-mx, 50%) + 60px) calc(var(--asa-my, 42%) + 60px), #000 6%, transparent 60%);
}

/* Camada 3 — os nós e as ligações, desenhados em canvas pelo script. */
.asa-fx__nodes { position: absolute; inset: 0; }

@media (prefers-reduced-motion: reduce) {
  .asa-fx { display: none; }
}

.asa-visual {
  position: relative; min-height: 500px; border: 1px solid rgba(255,255,255,.16); border-radius: 34px;
  background: radial-gradient(circle at 70% 20%, rgba(241,90,36,.28), transparent 32%), #111; box-shadow: var(--asa-shadow); overflow: hidden;
}
.asa-visual__wing { position: absolute; inset: 58px 48px auto auto; width: 230px; height: 230px; border: 34px solid var(--asa-orange); border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; transform: rotate(-18deg); filter: drop-shadow(0 18px 26px rgba(241,90,36,.28)); }
.asa-visual__wing::after { content: ""; position: absolute; width: 150px; height: 36px; background: var(--asa-orange); border-radius: 99px 0 99px 0; transform: rotate(46deg); top: 112px; left: -72px; }
.asa-visual__panel { position: absolute; left: 28px; right: 28px; bottom: 28px; display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.asa-visual__metric { padding: 18px 12px; border: 1px solid rgba(255,255,255,.13); border-radius: 16px; background: rgba(0,0,0,.54); backdrop-filter: blur(8px); color: rgba(255,255,255,.65); font: 700 .67rem/1.4 Sora, Arial, sans-serif; letter-spacing: .08em; text-align: center; }
.asa-visual__metric strong { display: block; margin-bottom: 4px; color: var(--asa-white); font-size: 1rem; letter-spacing: -.02em; }
.asa-ticker { width: 100%; overflow: hidden; padding: 16px 0; background: var(--asa-orange); color: var(--asa-black); }
.asa-ticker__track { display: flex; width: max-content; animation: asaTicker 24s linear infinite; }
.asa-ticker__track span { padding: 0 24px; font: 800 .78rem/1 Sora, Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.asa-ticker__track span::after { content: "✦"; padding-left: 48px; }
@keyframes asaTicker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .asa-ticker__track { animation: none; } .asa-button .elementor-button { transition: none; } }
.asa-intro { background: var(--asa-paper); color: var(--asa-black); }
.asa-intro-head { gap: 18px; margin-bottom: 44px; }
.asa-card-grid { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.asa-card { min-height: 300px; padding: 28px; gap: 18px; border: 1px solid var(--asa-line); border-radius: var(--asa-radius); background: var(--asa-white); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.asa-card:hover { transform: translateY(-7px); border-color: var(--asa-orange); box-shadow: 0 18px 44px rgba(0,0,0,.09); }
.asa-card-index .elementor-heading-title { color: var(--asa-orange); font: 800 .78rem/1 Sora, Arial, sans-serif; letter-spacing: .12em; }
.asa-card-title .elementor-heading-title { color: var(--asa-black); font: 750 clamp(1.25rem, 2vw, 1.75rem)/1.12 Sora, Arial, sans-serif; letter-spacing: -.035em; }
.asa-audience { background: var(--asa-black); color: var(--asa-white); }
.asa-audience-grid { display: grid !important; grid-template-columns: .9fr 1.1fr; gap: clamp(40px,8vw,110px); align-items: start; }
.asa-check-list { gap: 12px; }
.asa-check { padding: 20px 22px; border-left: 3px solid var(--asa-orange); border-radius: 0 14px 14px 0; background: rgba(255,255,255,.06); }
.asa-check-title .elementor-heading-title { color: var(--asa-white); font: 700 1.05rem/1.35 Sora, Arial, sans-serif; }
.asa-check-copy { color: rgba(255,255,255,.68); font: 400 .98rem/1.58 Nunito, Arial, sans-serif; }
.asa-process { background: var(--asa-white); color: var(--asa-black); }
.asa-process-grid { display: grid !important; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-top: 46px; }
.asa-step { min-height: 260px; padding: 26px; gap: 18px; border-top: 4px solid var(--asa-orange); background: var(--asa-paper); }
.asa-step-number .elementor-heading-title { color: var(--asa-orange); font: 800 2.3rem/1 Sora, Arial, sans-serif; }
.asa-step-title .elementor-heading-title { color: var(--asa-black); font: 750 1.2rem/1.25 Sora, Arial, sans-serif; }
.asa-waitlist { position: relative; background: var(--asa-black); color: var(--asa-white); }
.asa-waitlist::after { content: ""; position: absolute; inset: auto -120px -180px auto; width: 420px; height: 420px; border: 70px solid var(--asa-orange); border-radius: 50%; opacity: .13; pointer-events: none; }
.asa-waitlist-grid { position: relative; z-index: 1; display: grid !important; grid-template-columns: .9fr 1.1fr; gap: clamp(38px,7vw,90px); align-items: center; }
.asa-waitlist-copy { gap: 20px; }
.asa-benefit-list { gap: 9px; color: rgba(255,255,255,.74); font: 500 .96rem/1.55 Nunito, Arial, sans-serif; }
.asa-benefit-list p { margin: 0; }
.asa-form-card { padding: clamp(24px,4vw,44px); border: 1px solid rgba(255,255,255,.14); border-radius: 28px; background: var(--asa-white); color: var(--asa-black); box-shadow: var(--asa-shadow); }
.asa-form-title .elementor-heading-title { color: var(--asa-black); font: 750 clamp(1.55rem,2.6vw,2.35rem)/1.05 Sora, Arial, sans-serif; letter-spacing: -.04em; }
.asa-form-intro { color: #4A4A4A; font: 450 .98rem/1.55 Nunito, Arial, sans-serif; }
.asa-waitlist-form .elementor-form-fields-wrapper { gap: 14px 0; }
.asa-waitlist-form .elementor-field-group { padding: 0 7px; }
.asa-waitlist-form .elementor-field-label { color: var(--asa-black); font: 700 .78rem/1.3 Sora, Arial, sans-serif; }
.asa-waitlist-form input:not([type="checkbox"]), .asa-waitlist-form select, .asa-waitlist-form textarea {
  min-height: 52px; padding: 12px 14px; border: 1px solid rgba(0,0,0,.22); border-radius: 12px; background: #FAFAFA; color: var(--asa-black); font: 500 .96rem/1.2 Nunito, Arial, sans-serif;
}
.asa-waitlist-form input:focus, .asa-waitlist-form select:focus, .asa-waitlist-form textarea:focus { outline: 3px solid rgba(241,90,36,.22); border-color: var(--asa-orange); }
.asa-waitlist-form .elementor-field-type-acceptance { font: 450 .82rem/1.45 Nunito, Arial, sans-serif; color: #555; }
.asa-waitlist-form .elementor-field-type-acceptance a { color: var(--asa-black); }
.asa-waitlist-form .elementor-button { width: 100%; min-height: 54px; border: 0; border-radius: 999px; background: var(--asa-orange); color: var(--asa-black); font: 800 .88rem/1 Sora, Arial, sans-serif; }
.asa-waitlist-form .elementor-button:hover, .asa-waitlist-form .elementor-button:focus-visible { background: var(--asa-black); color: var(--asa-white); }
.asa-form-fallback { padding-top: 8px; color: #5F5F5F; font: 450 .78rem/1.5 Nunito, Arial, sans-serif; }
.asa-form-fallback a { color: var(--asa-black); font-weight: 700; }
.asa-faq { background: var(--asa-paper); color: var(--asa-black); }
.asa-faq-grid { display: grid !important; grid-template-columns: .7fr 1.3fr; gap: clamp(36px,7vw,90px); }
.asa-faq-list .elementor-accordion-item { border: 0 !important; border-bottom: 1px solid var(--asa-line) !important; }
.asa-faq-list .elementor-tab-title { padding: 22px 4px !important; color: var(--asa-black) !important; font: 700 1rem/1.35 Sora, Arial, sans-serif !important; }
.asa-faq-list .elementor-tab-content { padding: 0 4px 22px !important; border: 0 !important; color: #4E4E4E; font: 450 .97rem/1.65 Nunito, Arial, sans-serif; }
.asa-footer { width: 100%; padding: 52px 0 34px; background: var(--asa-black); color: var(--asa-white); border-top: 1px solid rgba(255,255,255,.12); }
.asa-footer-grid { display: grid !important; grid-template-columns: 1.1fr .9fr; gap: 36px; align-items: end; }
.asa-footer-copy { max-width: 520px; color: rgba(255,255,255,.64); font: 450 .9rem/1.6 Nunito, Arial, sans-serif; }
.asa-footer-links { flex-direction: row !important; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.asa-footer-meta { margin-top: 36px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); flex-direction: row !important; justify-content: space-between; gap: 18px; color: rgba(255,255,255,.5); font: 500 .76rem/1.5 Nunito, Arial, sans-serif; }
.asa-footer-meta p { margin: 0; }
.asa-legal-hero { padding: 84px 0 50px; background: var(--asa-black); color: var(--asa-white); }
.asa-legal-body { padding: 64px 0 100px; background: var(--asa-white); color: var(--asa-black); }
.asa-legal-stack { gap: 26px; max-width: 850px; }
.asa-legal-heading .elementor-heading-title { color: var(--asa-black); font: 750 1.4rem/1.25 Sora, Arial, sans-serif; }
.asa-legal-copy ul { margin: 10px 0 0 20px; }
.asa-legal-copy a { color: var(--asa-black); font-weight: 700; }
@media (max-width: 1024px) {
  .asa-hero-grid, .asa-audience-grid, .asa-waitlist-grid, .asa-faq-grid { grid-template-columns: 1fr; flex-direction: column !important; }
  .asa-hero-copy, .asa-hero-art { width: 100%; }
  .asa-hero-art { min-width: 0; max-width: 650px; }
  .asa-card-grid { grid-template-columns: 1fr 1fr; }
  .asa-process-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .asa-shell { width: min(100% - 28px, 1180px); }
  .asa-header-wrap { padding: 8px 0; }
  .asa-header { min-height: 58px; gap: 12px; }
  .asa-logo, .asa-logo img { width: 142px !important; }
  .asa-header-cta .elementor-button { padding: 12px 14px; font-size: .72rem; }
  .asa-hero { min-height: auto; padding: 64px 0 74px; }
  .asa-hero-copy { gap: 18px; }
  .asa-hero-title .elementor-heading-title { font-size: clamp(2.65rem,15vw,4.4rem); }
  .asa-hero-actions { align-items: stretch; }
  .asa-hero-actions .asa-button { width: 100% !important; }
  .asa-hero-actions .elementor-button { width: 100%; }
  .asa-visual { min-height: 390px; }
  .asa-visual__wing { width: 180px; height: 180px; right: 25px; top: 45px; }
  .asa-visual__panel { grid-template-columns: 1fr; }
  .asa-visual__metric:nth-child(2), .asa-visual__metric:nth-child(3) { display: none; }
  .asa-card-grid, .asa-process-grid { grid-template-columns: 1fr; }
  .asa-card, .asa-step { min-height: 0; }
  .asa-waitlist-form .elementor-field-group { width: 100% !important; }
  .asa-footer-grid { grid-template-columns: 1fr; }
  .asa-footer-links { justify-content: flex-start; }
  .asa-footer-meta { flex-direction: column !important; }
}

/**
 * Ponte entre uma secao da home e a pagina completa do assunto.
 *
 * O menu do header leva as ancoras da home; daqui o visitante segue para a
 * pagina inteira. O link de volta usa o fragmento #top, que o navegador
 * resolve sozinho quando nenhum elemento tem esse id.
 *
 * A classe .asa-backtotop e escrita DENTRO do conteudo do widget de texto, e
 * nao no widget. Motivo: as ferramentas de container da API gravam a classe na
 * chave _css_classes, que o Elementor so le em widgets, num container ela e
 * aceita e ignorada. Dentro do HTML do conteudo, a classe e minha e sempre vale.
 *
 * O alinhamento e o espacamento do bloco ficam nas proprias configuracoes do
 * container (align_items, gap), que sao respeitadas normalmente.
 */
/**
 * O bloco de ponte e identificado pelo CONTEUDO, nao por uma classe no
 * container. Motivo: as ferramentas de container da API gravam a classe em
 * _css_classes e o align/gap em align_items/gap, o Elementor le css_classes,
 * flex_align_items e flex_gap. Tudo e aceito e ignorado silenciosamente.
 *
 * Selecionar o container que contem o paragrafo .asa-backtotop resolve isso e
 * vale automaticamente em toda secao onde o padrao for repetido.
 */
.e-con:has(> .elementor-widget-text-editor .asa-backtotop) {
  display: flex;
  flex-direction: column;         /* o container ficou em row: o valor que a
                                     API gravou em content_width era invalido
                                     e o Elementor descartou a direcao junto */
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 22px;                      /* respiro entre o botao e o link */
  margin-top: 30px;
  text-align: center;
}

.e-con:has(> .elementor-widget-text-editor .asa-backtotop) > .elementor-widget {
  width: auto;
  max-width: 100%;
}

.asa-backtotop {
  margin: 0;
  text-align: center;
  font: 500 .82rem/1.45 Nunito, Arial, sans-serif;
}

.asa-backtotop a {
  color: #5D5D5D;                 /* 5.8:1 sobre o paper */
  text-decoration: underline;
  text-underline-offset: .22em;
  text-decoration-thickness: 1px;
}

.asa-backtotop a:hover,
.asa-backtotop a:focus-visible {
  color: var(--asa-orange-ink, #C1481D);
}

/* Em secao escura o texto secundario precisa clarear, nao escurecer. */
.asa-hero .asa-backtotop a,
.asa-audience .asa-backtotop a,
.asa-waitlist .asa-backtotop a,
.asa-footer .asa-backtotop a {
  color: rgba(255,255,255,.72);
}

.asa-hero .asa-backtotop a:hover,
.asa-audience .asa-backtotop a:hover,
.asa-waitlist .asa-backtotop a:hover,
.asa-footer .asa-backtotop a:hover {
  color: var(--asa-orange);
}

/* ==========================================================================
 * PAGINAS INTERNAS
 *
 * A home embrulha o conteudo de cada secao num .asa-shell (largura util de
 * 1180px). As paginas internas nao tem esse wrapper: o conteudo e filho direto
 * da secao. A primeira regra da a esses filhos a mesma largura, na home o
 * filho direto JA e o .asa-shell, com exatamente esta medida, entao a regra
 * é idempotente ali.
 * ========================================================================== */

.asa-section > .elementor-widget,
.asa-section > .e-con {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}

/* ---- Hero das paginas internas ---- */

.asa-page-hero {
  padding: clamp(104px, 11vw, 150px) 0 clamp(52px, 6vw, 74px);
  background: var(--asa-black);
  color: var(--asa-white);
}

.asa-page-title .elementor-heading-title {
  color: inherit;
  font: 800 clamp(2.05rem, 4.4vw, 3.75rem)/1.02 Sora, Arial, sans-serif;
  letter-spacing: -.055em;
  max-width: 900px;
}

.asa-page-hero .asa-page-lead {
  max-width: 720px;
  margin-top: var(--asa-space-sm);
  color: rgba(255,255,255,.78);
  font: 450 clamp(1.02rem, 1.4vw, 1.18rem)/1.65 Nunito, Arial, sans-serif;
}

.asa-page-hero .asa-page-lead p { margin: 0; }

.asa-cta-row {
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
  width: auto;
}

/* ---- Grade de cards ---- */

.asa-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: clamp(16px, 2vw, 24px);
  width: min(1180px, calc(100% - 40px));
  margin: 34px auto 0;
}

.asa-service-card,
.asa-price-card { justify-content: flex-start; }

.asa-price-card { min-height: 340px; }

.asa-price .elementor-heading-title {
  color: var(--asa-orange-ink, #C1481D);
  font: 800 2.05rem/1 Sora, Arial, sans-serif;
  letter-spacing: -.03em;
}

.asa-case-meta {
  color: #5D5D5D;                      /* 6.4:1 sobre branco */
  font: 600 .82rem/1.4 Nunito, Arial, sans-serif;
}

.asa-case-meta p { margin: 0; }

/* ---- Listas com marcador ---- */

.asa-included .elementor-icon-list-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(292px, 1fr));
  gap: 10px 28px;
}

.asa-included { margin-top: 30px; }

.asa-card .elementor-icon-list-item,
.asa-included .elementor-icon-list-item {
  align-items: flex-start;
  gap: 10px;
  color: var(--asa-text);
  font: 450 .94rem/1.55 Nunito, Arial, sans-serif;
}

.asa-card .elementor-icon-list-icon svg,
.asa-included .elementor-icon-list-icon svg {
  width: 15px;
  height: 15px;
  margin-top: 3px;
  fill: var(--asa-orange-ink, #C1481D);
}

/* ---- Secao de precos ---- */

.asa-pricing {
  background: var(--asa-paper);
  color: var(--asa-black);
}

/* ---- Tabela comparativa ----
 * Rola dentro do proprio container: a pagina nunca rola na horizontal. */

.asa-compare {
  width: min(1180px, calc(100% - 40px));
  margin: 30px auto 0;
  overflow-x: auto;
}

.asa-compare table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font: 450 .92rem/1.5 Nunito, Arial, sans-serif;
}

.asa-compare th,
.asa-compare td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--asa-line);
  text-align: left;
  vertical-align: top;
}

.asa-compare thead th {
  border-bottom: 2px solid var(--asa-line);
  color: var(--asa-orange-ink, #C1481D);
  font: 700 .76rem/1.2 Sora, Arial, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.asa-compare tbody tr:last-child td { border-bottom: 0; }

.asa-compare p {
  margin: 18px 0 0;
  color: #5D5D5D;
  font: 450 .86rem/1.55 Nunito, Arial, sans-serif;
}

/* ---- Fechamento ---- */

.asa-cta {
  align-items: center;
  background: var(--asa-black);
  color: var(--asa-white);
  text-align: center;
}

.asa-cta .elementor-widget-text-editor {
  max-width: 620px;
  margin-top: var(--asa-space-sm);
  color: rgba(255,255,255,.78);
  font: 450 1.02rem/1.65 Nunito, Arial, sans-serif;
}

.asa-cta .asa-button { margin-top: 30px; }

/* ==========================================================================
 * DIAGRAMACAO DAS PAGINAS INTERNAS
 *
 * Dois defeitos medidos em /servicos/ e nas tres filhas, a 1280px:
 *
 * 1. <main class="asa-main"> e um container do Elementor e herdava os 10px de
 *    padding horizontal padrao. As secoes comecavam em x=10 e terminavam 10px
 *    antes da borda: nenhuma secao de fundo escuro sangrava ate a margem da
 *    tela, ao contrario da home, onde .asa-site zera esse padding.
 *
 * 2. O espacamento entre blocos era declarado componente a componente. Quem
 *    tinha regra recebia 30 ou 34px; quem nao tinha ficava com margin-top 0 e
 *    colava no bloco anterior, acordeao do FAQ, texto de .asa-section-copy e
 *    o paragrafo logo abaixo da grade de precos.
 *
 * A correcao troca a colecao de valores avulsos por uma escala aplicada no
 * fluxo da secao, com as excecoes declaradas logo em seguida.
 * ========================================================================== */

.asa-main {
  width: 100%;
  max-width: none !important;
  padding: 0 !important;
  gap: 0 !important;
  color: var(--asa-text);
}

/* Ritmo padrao entre blocos irmaos de uma secao. */
.asa-section > * + * { margin-top: var(--asa-space-md); }

/* Kicker e titulo formam uma unidade: quase encostados. */
.asa-section > .asa-kicker + .asa-section-title,
.asa-section > .asa-kicker + .asa-page-title { margin-top: var(--asa-space-xs); }

/* Texto corrido logo abaixo do titulo respira menos que uma grade. */
.asa-section > .asa-section-title + .asa-section-copy,
.asa-section > .asa-section-title + .elementor-widget-text-editor,
.asa-section > .asa-page-title + .asa-page-lead { margin-top: var(--asa-space-sm); }

/* A tabela comparativa e um text-editor, mas se comporta como bloco: precisa
 * do respiro de grade, nao do de paragrafo. */
.asa-section > .asa-section-title + .asa-compare { margin-top: var(--asa-space-md); }

/* Depois de um bloco de cards o corte precisa ser mais largo, senao o
 * paragrafo de fechamento parece parte do ultimo card. */
.asa-section > .asa-grid + * { margin-top: var(--asa-space-lg); }

/* Par de botoes do hero: entre o texto e a acao, um passo intermediario. */
.asa-page-hero .asa-cta-row { margin-top: 30px; }

/* ---- Botao contornado sobre fundo claro ----
 * .asa-button--outline nasceu para secao escura: e branco sobre transparente.
 * Dentro de card ou de secao clara ele ficaria invisivel. */

.asa-card .asa-button--outline .elementor-button,
.asa-intro .asa-button--outline .elementor-button,
.asa-process .asa-button--outline .elementor-button,
.asa-pricing .asa-button--outline .elementor-button,
.asa-faq .asa-button--outline .elementor-button {
  border-color: rgba(0,0,0,.24);
  color: var(--asa-black);
}

.asa-card .asa-button--outline .elementor-button:hover,
.asa-intro .asa-button--outline .elementor-button:hover,
.asa-process .asa-button--outline .elementor-button:hover,
.asa-pricing .asa-button--outline .elementor-button:hover,
.asa-faq .asa-button--outline .elementor-button:hover {
  border-color: var(--asa-orange-ink, #C1481D);
  color: var(--asa-orange-ink, #C1481D);
}

/* Em fundo claro, o hover do primario ia para branco sobre branco. */
.asa-card .asa-button--primary .elementor-button:hover,
.asa-intro .asa-button--primary .elementor-button:hover,
.asa-process .asa-button--primary .elementor-button:hover,
.asa-pricing .asa-button--primary .elementor-button:hover,
.asa-faq .asa-button--primary .elementor-button:hover {
  background: var(--asa-black);
  color: var(--asa-white);
}

@media (max-width: 767px) {
  .asa-section > .elementor-widget,
  .asa-section > .e-con,
  .asa-grid,
  .asa-compare {
    width: min(100% - 28px, 1180px);
  }

  .asa-cta-row { width: 100%; }
}

/**
 * Header fixo nas paginas internas.
 *
 * Na home o header e filho de .asa-site, um container alto, entao o
 * position:sticky de .asa-header-wrap funciona ali.
 *
 * Nas paginas com template do ElementsKit a arvore e outra:
 *
 *   body (pagina inteira)
 *     .ekit-template-content-header    101px
 *       .elementor.elementor-NN        101px
 *         header.asa-header-wrap       101px   <- sticky sem folga
 *
 * O bloco contenedor do header tem a altura exata dele: sticky nao tem por
 * onde deslizar e o header sobe junto com a pagina. A correcao e aplicar o
 * sticky ao wrapper do ElementsKit, cujo bloco contenedor e o body.
 *
 * A regra e escopada em .ekit-template-content-header, entao a home, que nao
 * usa esse wrapper, continua exatamente como esta.
 */
.ekit-template-content-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
}

.ekit-template-content-header .asa-header-wrap {
  position: static;
}

/* O CTA do header nao pode encolher.
 * Os tres filhos de .asa-header comecam com flex-shrink 1. Entre ~1025 e
 * ~1150px a linha nao cabe, e o navegador espreme o widget "Lista de espera"
 * ate 98px, enquanto o botao dentro dele (nowrap) precisa de ~150px: o texto
 * vazava 23px alem da borda e criava rolagem lateral. O menu, que tem sobra
 * de espaco (justify-content: flex-end), passa a absorver a diferenca. */
.asa-header .asa-header-cta { flex-shrink: 0 !important; }
.asa-header .asa-nav { min-width: 0; }

/* ==========================================================================
 * VITORIAS DE CASCATA SOBRE O CSS POR DOCUMENTO DO ELEMENTOR
 *
 * Na home o kit e um <style> no corpo da pagina: vence qualquer folha do
 * <head> por ordem. Servido como arquivo pelo plugin, ele passa a carregar
 * ANTES do CSS que o Elementor gera por documento (post-44.css, post-49.css,
 * post-51.css) e antes do widget-image.min.css, e perde todos os empates.
 *
 * Foi por isso que o header e o rodape das paginas internas nao pareciam com
 * os da home. Só as propriedades que de fato colidem estao aqui.
 * ========================================================================== */

/* O Elementor da 48px a qualquer SVG dentro de link:
 * .elementor-widget-image a img[src$=".svg"] { width: 48px }
 * A regra dele e mais especifica E carrega depois, so !important resolve. */
.asa-logo img,
.asa-logo a img {
  width: 205px !important;
  height: auto !important;
  max-width: 100% !important;
}

/* post-NN.css pinta TODO botao com a cor de destaque do kit do Elementor. */
.asa-nav-link .elementor-button {
  background-color: transparent !important;
  color: var(--asa-white) !important;
}

.asa-nav-link .elementor-button:hover,
.asa-nav-link .elementor-button:focus-visible {
  color: var(--asa-orange) !important;
}

.asa-button .elementor-button {
  font-weight: 750 !important;
}

.asa-button--primary .elementor-button {
  background-color: var(--asa-orange) !important;
  color: var(--asa-black) !important;
}

.asa-button--outline .elementor-button {
  background-color: transparent !important;
  border-color: rgba(255,255,255,.42) !important;
  color: var(--asa-white) !important;
}

/* As variantes de fundo claro tem 3 classes: vencem as de cima entre os
 * !important, sem precisar de nenhum truque extra. */
.asa-card .asa-button--outline .elementor-button,
.asa-intro .asa-button--outline .elementor-button,
.asa-process .asa-button--outline .elementor-button,
.asa-pricing .asa-button--outline .elementor-button,
.asa-faq .asa-button--outline .elementor-button {
  border-color: rgba(0,0,0,.24) !important;
  color: var(--asa-black) !important;
}

.asa-card .asa-button--outline .elementor-button:hover,
.asa-intro .asa-button--outline .elementor-button:hover,
.asa-process .asa-button--outline .elementor-button:hover,
.asa-pricing .asa-button--outline .elementor-button:hover,
.asa-faq .asa-button--outline .elementor-button:hover {
  border-color: var(--asa-orange-ink, #C1481D) !important;
  color: var(--asa-orange-ink, #C1481D) !important;
}

.asa-card .asa-button--primary .elementor-button:hover,
.asa-intro .asa-button--primary .elementor-button:hover,
.asa-process .asa-button--primary .elementor-button:hover,
.asa-pricing .asa-button--primary .elementor-button:hover,
.asa-faq .asa-button--primary .elementor-button:hover {
  background-color: var(--asa-black) !important;
  color: var(--asa-white) !important;
}

@media (max-width: 767px) {
  .asa-logo img,
  .asa-logo a img { width: 142px !important; }
}


/* ==========================================================================
 * RETORNO RAPIDO AO HUB DE SERVICOS
 *
 * Nas tres subpaginas de servico existe um botao discreto acima do titulo,
 * para quem clicou na subpagina errada e quer voltar sem usar o historico.
 *
 * Ele e o unico widget de botao filho DIRETO do hero, os CTAs da pagina
 * vivem dentro de .asa-cta-row, entao o seletor estrutural basta e nao
 * depende de uma classe que a API do Elementor nao permite gravar em widget.
 * ========================================================================== */

/* O botao herdou .asa-button--outline da duplicacao, e aquelas regras estao
 * no bloco de cascata com !important, para vencer o CSS por documento do
 * Elementor. So as propriedades que colidem de fato repetem o !important. */
.asa-page-hero > .elementor-widget-button .elementor-button {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px 9px 13px;
  border: 1px solid rgba(255,255,255,.24);
  border-color: rgba(255,255,255,.24) !important;
  border-radius: 999px;
  background-color: transparent !important;
  color: rgba(255,255,255,.74) !important;   /* 9:1 sobre o preto do hero */
  font: 600 .78rem/1 Sora, Arial, sans-serif;
  font-weight: 600 !important;
  letter-spacing: .01em;
}

.asa-page-hero > .elementor-widget-button .elementor-button-content-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

/* Seta desenhada com borda: nao carrega fonte de icone e nao e lida em voz
 * alta, ao contrario de um caractere de seta dentro do texto do botao. */
.asa-page-hero > .elementor-widget-button .elementor-button-content-wrapper::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.asa-page-hero > .elementor-widget-button .elementor-button:hover,
.asa-page-hero > .elementor-widget-button .elementor-button:focus-visible {
  color: var(--asa-white) !important;
  border-color: rgba(255,255,255,.55) !important;
  transform: none;                   /* controle secundario: sem o salto do CTA */
}

.asa-page-hero > .elementor-widget-button:first-child + * { margin-top: 26px; }

/* O widget de botao fora de .asa-cta-row herda o alinhamento centralizado
 * padrao do Elementor. Aqui ele precisa nascer na mesma vertical do titulo. */
.asa-page-hero > .elementor-widget-button,
.asa-page-hero > .elementor-widget-button .elementor-button-wrapper { text-align: left; }

/* .asa-button impoe width:auto !important, o widget encolhe para o tamanho do
 * texto e o margin-inline:auto da coluna passa a centraliza-lo. Devolver a
 * largura da coluna alinha o botao com o titulo, que e onde ele deve nascer. */
.asa-page-hero > .elementor-widget-button.asa-button {
  width: min(1180px, calc(100% - 40px)) !important;
  margin-inline: auto;
}

/* ==========================================================================
 * NAVEGACAO EM TABLET E CELULAR
 *
 * Ate aqui .asa-nav era escondida abaixo de 1024px e nada ocupava o lugar:
 * no celular o header tinha so o logo e o CTA. As abas nao existiam para a
 * maior parte das visitas.
 *
 * A solucao aqui e o header em duas linhas, logo e CTA em cima, abas
 * embaixo, em vez de um menu sanfona. Sem JavaScript, sem estado aberto ou
 * fechado, sem foco preso: as abas ficam sempre visiveis e na ordem natural
 * de tabulacao.
 * ========================================================================== */

@media (max-width: 1024px) {
  .asa-header-wrap { padding: 8px 0; }
  .asa-header { flex-wrap: wrap; min-height: 0; gap: 8px; }

  /* So o logo do HEADER encolhe. O do rodape nao divide espaco com nada e
   * mantem o tamanho que sempre teve. */
  .asa-header .asa-logo,
  .asa-header .asa-logo img { width: 164px !important; }
  .asa-logo { order: 1; }
  .asa-header-cta { order: 2; }

  /* Uma linha so, que rola na horizontal se nao couber: assim o header fixo
   * nao come um quinto da tela. Com cinco abas curtas quase nunca rola, e
   * quando rola a aba cortada e a propria dica de que ha mais. */
  .asa-nav {
    display: flex !important;
    order: 3;
    flex: 0 0 100%;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    justify-content: flex-start;
    gap: 2px;
    margin-top: 0;
    padding-top: 4px;
    border-top: 1px solid rgba(255,255,255,.12);
  }

  .asa-nav::-webkit-scrollbar { display: none; }

  /* ---- Aba ativa ----
   * O menu vira uma barra de abas: a escolhida ganha um sublinhado laranja
   * que cresce a partir do centro. A cor sozinha nao serve como indicacao
   * (WCAG 1.4.1), por isso a marca e o traco, e nao so o texto mais claro.
   *
   * O estado quem escreve e o Asa_Seo_Nav, no plugin: :active dura o tempo
   * do toque e :focus some no primeiro toque fora do menu, entao nenhum dos
   * dois sobrevive ao salto ate a secao. */
  .asa-nav-link .elementor-button {
    position: relative;
    padding: 11px 12px;
    white-space: nowrap;
    color: rgba(255,255,255,.72) !important;
    transition: color .2s ease;
  }

  .asa-nav-link .elementor-button::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 3px;
    height: 2px;
    border-radius: 2px;
    background: var(--asa-orange);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .3s cubic-bezier(.22,.68,.28,1);
  }

  /* :active da o retorno imediato ao toque, antes de o script marcar. */
  .asa-nav-link .elementor-button:active::after,
  .asa-nav-link .elementor-button.asa-nav-link--ativo::after { transform: scaleX(1); }

  .asa-nav-link .elementor-button.asa-nav-link--ativo { color: var(--asa-white) !important; }
}

@media (max-width: 767px) {
  .asa-header .asa-logo,
  .asa-header .asa-logo img { width: 132px !important; }
  .asa-footer .asa-logo,
  .asa-footer .asa-logo img { width: 142px !important; }
  .asa-nav-link .elementor-button { padding: 10px 9px; font-size: .72rem; letter-spacing: 0; }
  .asa-nav-link .elementor-button::after { left: 9px; right: 9px; }
  .asa-page-hero > .elementor-widget-button.asa-button {
    width: min(100% - 28px, 1180px) !important;
  }
}

/* Alvo de ancora nao pode parar embaixo do header fixo. */
.asa-section[id],
.e-con[id] { scroll-margin-top: 112px; }

@media (max-width: 767px) {
  .asa-section[id],
  .e-con[id] { scroll-margin-top: 104px; }
}

@media (prefers-reduced-motion: reduce) {
  .asa-nav-link .elementor-button::after { transition: none; }
}

/* ==========================================================================
 * SELETORES DE HEADER COM ESPECIFICIDADE EXTRA
 *
 * NOTA (2026-09-07): a copia inline do kit foi removida da home junto com o
 * widget HTML 8d45456. O bloco abaixo nasceu para vencer aquela copia e
 * continua valendo por outro motivo, os mesmos seletores tambem vencem o
 * CSS por documento que o Elementor gera (post-74.css), que carrega depois
 * deste arquivo. Manter.
 *
 * Historico do problema original:
 * A HOME TINHA UMA COPIA INLINE DESTE KIT
 *
 * A home (pagina 74) carrega o kit duas vezes: como este arquivo, vindo do
 * plugin, e como um <style> dentro do corpo da pagina, num widget HTML. O
 * <style> vem depois no documento, entao vence qualquer empate de
 * especificidade, inclusive o `.asa-nav { display: none !important }` que
 * este arquivo ja nao tem, mas a copia inline ainda tem.
 *
 * Resultado antes desta correcao: as abas apareciam no celular em todas as
 * paginas internas e continuavam escondidas justamente na home.
 *
 * Um seletor mais especifico vence o !important da copia inline sem depender
 * da ordem. A solucao definitiva e apagar aquele widget HTML da home, sao
 * ~15 KB de CSS duplicado em toda visita , mas isso mexe na cascata inteira
 * da home e merece uma passada propria.
 * ========================================================================== */

@media (max-width: 1024px) {
  .asa-header .asa-nav { display: flex !important; }
  .asa-header-wrap .asa-header { min-height: 0; gap: 8px; }

  /* O padding tem que sair daqui tambem: a copia inline da home traz
   * 12px 13px e venceria a regra de mesmo peso deste arquivo. O sublinhado
   * usa exatamente o mesmo recuo, senao o traco passa da palavra e encosta
   * na aba vizinha. */
  .asa-header .asa-nav-link .elementor-button { padding: 11px 11px; }
  .asa-header .asa-nav-link .elementor-button::after { left: 11px; right: 11px; }
}

@media (max-width: 767px) {
  .asa-header .asa-nav-link .elementor-button {
    padding: 10px 9px;
    font-size: .72rem;
    letter-spacing: 0;
  }
  .asa-header .asa-nav-link .elementor-button::after { left: 9px; right: 9px; }
}

/* ==========================================================================
 * BLOG: ARTIGO (post unico)
 *
 * Moldura gerada por includes/class-asa-blog.php. O texto vem do editor do
 * WordPress; o bloco final (chamada + newsletter) e o template 173 do
 * Elementor. O tema Hello limita .site-main a 1140px: aqui ele sai do
 * caminho para a faixa escura ocupar a largura toda.
 * ========================================================================== */

/* O Hello usa body:not([class*="elementor-page-"]) .site-main, que vence um
 * seletor simples; o !important evita disputar especificidade com o tema. */
.single-post .site-main { max-width: none !important; width: 100%; margin: 0; padding: 0 !important; overflow-x: clip; }
.single-post .site-main .page-content { margin: 0; }
.single-post .post-tags { display: none; }

.asa-article { --asa-article-w: 720px; padding-bottom: clamp(56px, 7vw, 90px); background: var(--asa-paper); }

.asa-article__head {
  padding: clamp(92px, 10vw, 132px) 20px clamp(118px, 14vw, 170px);
  background: var(--asa-black);
  color: var(--asa-white);
}
.asa-article__head > * { width: min(var(--asa-article-w), 100%); margin-inline: auto; }

.asa-article__crumbs {
  display: flex; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 18px;
  color: rgba(255,255,255,.6); font: 600 .8rem/1.4 Sora, Arial, sans-serif;
}
.asa-article__crumbs a { color: rgba(255,255,255,.86); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.asa-article__crumbs a:hover { color: var(--asa-orange); }

.asa-article__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 auto 16px;
  color: rgba(255,255,255,.72); font: 600 .8rem/1.4 Sora, Arial, sans-serif;
}
.asa-article__cat { color: var(--asa-orange); letter-spacing: .1em; text-transform: uppercase; }
.asa-article__dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }

/* margin: 0 auto, não margin: 0 — o pai centraliza os filhos diretos via
 * .asa-article__head > * { margin-inline: auto }, e um margin:0 aqui teria a
 * mesma especificidade e viria depois no arquivo: zera o auto e o título
 * cola na esquerda com metade da largura da tela sobrando à direita. */
.asa-article__title {
  margin: 0 auto; color: var(--asa-white);
  font: 800 clamp(2rem, 4.6vw, 3.3rem)/1.04 Sora, Arial, sans-serif;
  letter-spacing: -.045em; text-wrap: balance;
}

.asa-article__image { width: min(960px, calc(100% - 40px)); margin: calc(-1 * clamp(84px, 11vw, 130px)) auto 0; }
.asa-article__image img { display: block; width: 100%; height: auto; border-radius: var(--asa-radius); box-shadow: var(--asa-shadow); }

.asa-article__body {
  width: min(var(--asa-article-w), calc(100% - 40px)); margin: clamp(40px, 5vw, 60px) auto 0;
  color: var(--asa-text); font: 400 clamp(1.04rem, 1.3vw, 1.14rem)/1.78 Nunito, Arial, sans-serif;
}
.asa-article__body p { margin: 0 0 1.15em; }
.asa-article__body > p:first-child { color: #3A332F; font-size: clamp(1.14rem, 1.7vw, 1.3rem); line-height: 1.62; }
.asa-article__body h2 {
  margin: 1.9em 0 .6em; color: var(--asa-black);
  font: 700 clamp(1.35rem, 2.4vw, 1.75rem)/1.2 Sora, Arial, sans-serif; letter-spacing: -.025em; text-wrap: balance;
}
.asa-article__body blockquote {
  margin: 1.8em 0; padding: 0 0 0 20px; border-left: 3px solid var(--asa-orange);
  color: var(--asa-black); font: 700 clamp(1.25rem, 2.2vw, 1.55rem)/1.35 Sora, Arial, sans-serif; letter-spacing: -.02em;
}
.asa-article__body blockquote p { margin: 0; }
.asa-article__body a { color: var(--asa-orange-ink); text-decoration: underline; text-underline-offset: .18em; }
.asa-article__body a:hover { color: var(--asa-black); }
.asa-article__body strong { color: var(--asa-black); font-weight: 700; }

.asa-article__foot { width: min(var(--asa-article-w), calc(100% - 40px)); margin: 36px auto 0; padding-top: 24px; border-top: 1px solid var(--asa-line); }
.asa-article__foot-label { margin: 0 0 12px; color: #5E5550; font: 700 .72rem/1 Sora, Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.asa-article__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.asa-article__tags a {
  display: inline-block; padding: 9px 14px; border: 1px solid var(--asa-line); border-radius: 999px;
  background: var(--asa-white); color: #3A332F; font: 600 .8rem/1 Sora, Arial, sans-serif; text-decoration: none;
}
.asa-article__tags a:hover { border-color: var(--asa-orange-ink); color: var(--asa-black); }
.asa-article a:focus-visible { outline: 3px solid var(--asa-orange); outline-offset: 3px; border-radius: 4px; }

.asa-article__end { width: min(var(--asa-article-w), calc(100% - 40px)); margin: 44px auto 0; }

/* ---- Bloco final editavel no Elementor (template 173) ---- */

.asa-article-end { gap: 22px; }
.asa-article-cta { gap: 12px; padding: clamp(26px, 4vw, 40px); border-radius: var(--asa-radius); background: var(--asa-black); color: var(--asa-white); }
.asa-article .asa-article-cta-title .elementor-heading-title { color: var(--asa-white); font: 800 clamp(1.4rem, 3vw, 1.9rem)/1.1 Sora, Arial, sans-serif; letter-spacing: -.035em; }
.asa-article .asa-article-cta-copy, .asa-article .asa-article-cta-copy p { margin: 0; color: rgba(255,255,255,.78); font: 400 1rem/1.6 Nunito, Arial, sans-serif; }
.asa-article-cta .asa-cta-row { margin-top: 10px; }

.asa-article-news { gap: 8px; padding: clamp(24px, 3.5vw, 34px); border: 1px solid var(--asa-line); border-radius: var(--asa-radius); background: var(--asa-white); }
.asa-article .asa-article-news-title .elementor-heading-title { color: var(--asa-black); font: 700 clamp(1.2rem, 2.2vw, 1.45rem)/1.2 Sora, Arial, sans-serif; letter-spacing: -.02em; }
.asa-article .asa-article-news-copy p { margin: 0 0 6px; color: #5E5550; }
/* Um formulario so, o de /blog/#newsletter: e o unico que a integracao do
 * Reach enxerga. Aqui o bloco e um botao que leva ate ele. */
.asa-article-news .asa-cta-row { margin-top: 8px; }

/* ==========================================================================
 * BLOG: LISTAGEM (pagina /blog/)
 * O restante do visual dos cards esta no CSS da propria pagina, no Elementor.
 * ========================================================================== */

.asa-blog .asa-blog-posts .elementor-post__title a { text-decoration: none; }
.asa-blog .asa-blog-posts .elementor-post__title a:hover { text-decoration: underline; text-underline-offset: .16em; }