/* ============================================================
   visual-2026-w3 — Terceira camada de aprimoramento (Waves 11-15)
   Curso 'Frontends com Vibecoding' . dinheirodaminhaempresa.com
   Bundle gerado por scripts/build_waves3_bundle.py — NAO editar a mao.
   ============================================================ */



/* ---- w3-11 (css) ---- */

/* Wave 11 — Navegabilidade: voltar-ao-topo com anel de progresso, overlay de atalhos, navegacao por teclado, scroll-spy e enfase de breadcrumb. dinheirodaminhaempresa.com */

/*
 * Camada puramente progressiva e aditiva. NAO redefine tokens de tema
 * (--ink, --bg, --card, --green*, --pill, --focus-ring etc.) — apenas os
 * consome, com fallbacks Stone/hex para o caso de o token nao existir.
 * Prefixo exclusivo: classes .v3w11-... / ids v3w11-...
 * Se o w3-11.js nao rodar, nada aqui aparece (estado inicial e invisivel).
 */

/* ============================================================
   Variaveis locais (escopadas, nunca vazam para o tema global)
   ============================================================ */
:root{
  --v3w11-accent: var(--green, var(--stone-green, #00A868));
  --v3w11-track: color-mix(in srgb, currentColor 16%, transparent);
  --v3w11-surface: var(--card, #FFFFFF);
  --v3w11-ink: var(--ink, #0F172A);
  --v3w11-muted: var(--ink-3, var(--muted, #475569));
  --v3w11-ring: var(--focus-ring, var(--stone-lime, #A5FA00));
  --v3w11-shadow: 0 6px 22px rgba(0,0,0,.18);
}
[data-theme="dark"]{
  --v3w11-surface: var(--card, #0B1220);
  --v3w11-ink: var(--ink, #F8FAFC);
  --v3w11-muted: var(--ink-3, #94A3B8);
  --v3w11-shadow: 0 6px 22px rgba(0,0,0,.5);
}
/* Navegadores sem color-mix usam um cinza neutro de fallback (sobrescrito
   pela regra de cima quando ha suporte). */
@supports not (color: color-mix(in srgb, red 50%, blue)){
  :root{ --v3w11-track: rgba(127,127,127,.28); }
}

/* ============================================================
   1) Botao flutuante "voltar ao topo" + anel de progresso
   ============================================================ */
.v3w11-fab{
  position:fixed;
  right:clamp(14px, 3vw, 24px);
  bottom:calc(clamp(14px, 3vw, 24px) + env(safe-area-inset-bottom, 0px));
  width:48px;
  height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  margin:0;
  border:0;
  border-radius:50%;
  background:var(--v3w11-surface);
  color:var(--v3w11-ink);
  box-shadow:var(--v3w11-shadow);
  cursor:pointer;
  z-index:2147483000; /* abaixo de overlays criticos, acima de barras comuns */
  /* Estado inicial: oculto e fora da ordem de foco ate o JS revelar. */
  opacity:0;
  visibility:hidden;
  transform:translateY(12px) scale(.92);
  transition:opacity .28s ease, transform .28s ease, visibility .28s;
  -webkit-tap-highlight-color:transparent;
}
.v3w11-fab.v3w11-show{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}
.v3w11-fab:hover{
  color:var(--v3w11-accent);
}
.v3w11-fab:focus-visible{
  outline:3px solid var(--v3w11-ring);
  outline-offset:3px;
}

/* Anel de progresso (SVG). Gira -90deg para comecar no topo do circulo. */
.v3w11-ring{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transform:rotate(-90deg);
  pointer-events:none;
}
.v3w11-ring-track{
  fill:none;
  stroke:var(--v3w11-track);
  stroke-width:3;
}
.v3w11-ring-bar{
  fill:none;
  stroke:var(--v3w11-accent);
  stroke-width:3;
  stroke-linecap:round;
  transition:stroke-dashoffset .2s linear;
}
.v3w11-arrow{
  position:relative;
  width:22px;
  height:22px;
  pointer-events:none;
}

/* Tooltip "Secao atual" — supre o aria-describedby; aparece em hover/foco. */
.v3w11-tip{
  position:absolute;
  right:calc(100% + 12px);
  top:50%;
  transform:translateY(-50%) translateX(6px);
  max-width:min(56vw, 280px);
  padding:7px 11px;
  border-radius:var(--r-sm, 8px);
  background:var(--v3w11-surface);
  color:var(--v3w11-ink);
  box-shadow:var(--v3w11-shadow);
  font-size:.82rem;
  line-height:1.3;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.v3w11-fab:hover .v3w11-tip,
.v3w11-fab:focus-visible .v3w11-tip{
  opacity:1;
  visibility:visible;
  transform:translateY(-50%) translateX(0);
}

/* ============================================================
   2) Overlay de atalhos de teclado (modal acessivel)
   ============================================================ */
.v3w11-modal{
  position:fixed;
  inset:0;
  z-index:2147483001;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.v3w11-modal[hidden]{ display:none; }
.v3w11-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(8,12,20,.55);
  backdrop-filter:saturate(120%) blur(2px);
  -webkit-backdrop-filter:saturate(120%) blur(2px);
}
.v3w11-modal__panel{
  position:relative;
  width:min(440px, 100%);
  max-height:calc(100vh - 40px);
  overflow:auto;
  background:var(--v3w11-surface);
  color:var(--v3w11-ink);
  border-radius:var(--r-md, 14px);
  box-shadow:var(--v3w11-shadow);
  padding:22px 24px 24px;
  animation:v3w11-pop .22s ease;
}
.v3w11-modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 14px;
}
.v3w11-modal__title{
  margin:0;
  font-size:1.12rem;
  font-weight:700;
  color:var(--v3w11-ink);
}
.v3w11-modal__x{
  flex:0 0 auto;
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--v3w11-muted);
  cursor:pointer;
}
.v3w11-modal__x:hover{ color:var(--v3w11-accent); }
.v3w11-modal__x:focus-visible{
  outline:3px solid var(--v3w11-ring);
  outline-offset:2px;
}
.v3w11-modal__x svg{ width:22px; height:22px; }
.v3w11-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}
.v3w11-list li{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:.92rem;
  color:var(--v3w11-ink);
}
.v3w11-keys{
  flex:0 0 auto;
  display:inline-flex;
  gap:5px;
  min-width:64px;
}
.v3w11-kbd{
  display:inline-block;
  min-width:22px;
  padding:2px 7px;
  border-radius:6px;
  border:1px solid var(--v3w11-track);
  border-bottom-width:2px;
  background:var(--pill, rgba(127,127,127,.12));
  color:var(--v3w11-ink);
  font:600 .8rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-align:center;
}
.v3w11-list span{ color:var(--v3w11-muted); }

/* ============================================================
   3) Scroll-spy: marcacao discreta do <h2> atual (sem UI duplicada)
   ============================================================ */
.v3w11-current{
  position:relative;
}
.v3w11-current::before{
  content:"";
  position:absolute;
  left:-.62em;
  top:.18em;
  bottom:.18em;
  width:3px;
  border-radius:3px;
  background:var(--v3w11-accent);
  opacity:.85;
}

/* ============================================================
   4) Breadcrumb — enfase discreta do item atual
   ============================================================ */
.v3w11-crumb-current{
  font-weight:700;
  color:var(--v3w11-ink);
}

/* ============================================================
   Animacoes e respeito a prefers-reduced-motion
   ============================================================ */
@keyframes v3w11-pop{
  from{ opacity:0; transform:translateY(8px) scale(.98); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .v3w11-fab,
  .v3w11-ring-bar,
  .v3w11-tip{
    transition:none;
  }
  .v3w11-modal__panel{
    animation:none;
  }
  /* Estado final imediato, sem movimento. */
  .v3w11-fab.v3w11-show{
    transform:none;
  }
}


/* ---- w3-12 (css) ---- */

/* Wave 12 — Busca facetada e descoberta: chips de filtro + realce de termo (?q=). dinheirodaminhaempresa.com */

/*
 * Camada puramente aditiva e progressiva. NAO redefine tokens de tema
 * (--ink, --bg, --card, --green*, --pill, --line*, --focus-ring, --r-*) —
 * apenas os consome, herdando claro/escuro automaticamente. Prefixo de
 * isolamento: .v3w12- / #v3w12-. Se o JS da Wave 12 nao rodar, nada aparece
 * e a pagina segue intacta.
 */

/* ============================================================
   1) Barra de chips de filtro (.v3w12-facets) acima de um grid
   ============================================================
   Injetada apenas em paginas de lista/hub com >=8 cards e >=2 categorias
   derivaveis com seguranca. role="group" + aria-label garantem semantica. */
.v3w12-facets{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:0 0 18px;
  padding:0;
}

.v3w12-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:44px;            /* alvo de toque AA (>=44px) */
  padding:8px 16px;
  border-radius:999px;
  border:1px solid var(--line-2,#CBD5E1);
  background:var(--card,#FFFFFF);
  color:var(--ink-2,#1F2937);
  font:600 13.5px/1.2 inherit;
  cursor:pointer;
  white-space:nowrap;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
  -webkit-appearance:none;
  appearance:none;
}
.v3w12-chip:hover{
  border-color:var(--green,#00A868);
  background:var(--green-soft,#E6F5EE);
  color:var(--green-text,#005C32);
}
.v3w12-chip[aria-pressed="true"]{
  background:var(--green,#00A868);
  border-color:var(--green,#00A868);
  color:#FFFFFF;
}
.v3w12-chip[aria-pressed="true"]:hover{
  background:var(--green-dark,#008550);
  border-color:var(--green-dark,#008550);
  color:#FFFFFF;
}
.v3w12-chip:focus-visible{
  outline:2px solid var(--focus-ring,#005C32);
  outline-offset:2px;
}
/* Contagem viva "N de M" — discreta, sempre legivel. */
.v3w12-count{
  margin-left:auto;
  flex:0 0 auto;
  font:600 12.5px/1.2 inherit;
  color:var(--muted,#64748B);
  padding:4px 2px;
  white-space:nowrap;
}

/* Card/tile oculto pelo filtro. Mantido como utilitario simples e robusto. */
.v3w12-hidden{
  display:none !important;
}

/* ============================================================
   2) Realce de termo de busca (mark.v3w12-hit)
   ============================================================
   Sobrepoe o amarelo padrao do navegador por um destaque na paleta Stone,
   com contraste AA (texto --ink sobre superficie verde suave). */
mark.v3w12-hit{
  background:var(--green-soft,#E6F5EE);
  color:var(--ink,#0F172A);
  padding:0 .12em;
  border-radius:4px;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
/* Primeira ocorrencia (alvo do scroll) ganha um anel sutil para orientacao. */
mark.v3w12-hit.v3w12-hit--first{
  box-shadow:0 0 0 2px var(--green,#00A868);
}
[data-theme="dark"] mark.v3w12-hit{
  background:rgba(0,168,104,.28);
  color:var(--ink,#E5E7EB);
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) mark.v3w12-hit{
    background:rgba(0,168,104,.28);
    color:var(--ink,#E5E7EB);
  }
}

/* ============================================================
   3) Aviso fixo de realce (#v3w12-notice)
   ============================================================
   Barra discreta, acessivel e dispensavel. Reutiliza tokens de superficie
   e texto para contraste AA garantido em claro/escuro. */
.v3w12-notice{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%) translateY(8px);
  z-index:9000;
  max-width:min(620px,calc(100vw - 32px));
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  background:var(--card,#FFFFFF);
  color:var(--ink,#0F172A);
  border:1px solid var(--line-2,#CBD5E1);
  border-left:4px solid var(--green,#00A868);
  border-radius:var(--r-md,12px);
  box-shadow:var(--shadow-lg,0 12px 32px rgba(15,23,42,.18));
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease,transform .25s ease,visibility .25s;
  font-size:14px;
  line-height:1.4;
}
.v3w12-notice.v3w12-show{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}
.v3w12-notice__icon{
  flex:0 0 auto;
  width:18px;
  height:18px;
  color:var(--green-text,#005C32);
}
.v3w12-notice__text{
  flex:1 1 auto;
  min-width:0;
  color:var(--ink-2,#1F2937);
}
.v3w12-notice__text b{
  color:var(--ink,#0F172A);
  font-weight:700;
}
.v3w12-notice__actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:6px;
}
.v3w12-notice__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:8px 12px;
  border-radius:var(--r-sm,8px);
  font:700 13px/1 inherit;
  cursor:pointer;
  white-space:nowrap;
  -webkit-appearance:none;
  appearance:none;
}
.v3w12-notice__btn--ghost{
  background:transparent;
  color:var(--ink-3,#374151);
  border:1px solid var(--line,#E2E8F0);
}
.v3w12-notice__btn--ghost:hover{
  background:var(--pill,#F1F5F1);
  color:var(--ink,#0F172A);
}
.v3w12-notice__btn--solid{
  background:var(--green,#00A868);
  color:#FFFFFF;
  border:1px solid transparent;
}
.v3w12-notice__btn--solid:hover{
  background:var(--green-dark,#008550);
}
.v3w12-notice__btn:focus-visible{
  outline:2px solid var(--focus-ring,#005C32);
  outline-offset:2px;
}

@media(max-width:560px){
  .v3w12-notice{
    left:16px;
    right:16px;
    transform:translateY(8px);
    max-width:none;
    flex-wrap:wrap;
  }
  .v3w12-notice.v3w12-show{
    transform:translateY(0);
  }
  .v3w12-notice__text{
    flex:1 1 100%;
  }
}

/* ============================================================
   4) Respeito a prefers-reduced-motion
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .v3w12-chip{transition:none;}
  .v3w12-notice{
    transition:opacity .01s linear;
    transform:translateX(-50%);
  }
  .v3w12-notice.v3w12-show{transform:translateX(-50%);}
  @media(max-width:560px){
    .v3w12-notice,
    .v3w12-notice.v3w12-show{transform:none;}
  }
}


/* ---- w3-13 (css) ---- */

/* Wave 13 — Visual, layout e ícones (curso "Frontends com Vibecoding"). dinheirodaminhaempresa.com */

/*
 * Camada puramente aditiva e defensiva. NÃO redefine tokens de tema
 * (--ink, --bg, --card, --green*, --pill, --line*). Apenas os consome.
 * Todo estilo é escopado ao prefixo .v3w13- (aplicado por w3-13.js),
 * para nunca atingir elementos de terceiros nem os namespaces protegidos
 * (.ddf-/.oce-/.oc-/.dh-/.v26-, calculadoras, formulários, /onclick/,
 * /datahub/). Paleta Stone: #00D700 (verde vivo), #00461E (verde escuro),
 * #A5FA00 (lima/acento). Se o JS não rodar, nada aqui tem efeito visível.
 */

/* ============================================================
   1) Ícone discreto em headings de seção (.v3w13-ico)
   ============================================================
   SVG Lucide inline injetado por w3-13.js como primeiro filho do <h2>.
   Tamanho relativo (~18px), cor herdada do heading (currentColor) com leve
   redução de peso visual. Não altera o texto nem o fluxo do heading. */
.v3w13-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.05em;
  height:1.05em;
  max-width:20px;
  max-height:20px;
  min-width:16px;
  margin-right:.45em;
  vertical-align:-0.12em;
  color:currentColor;
  opacity:.62;
  flex:0 0 auto;
  /* Decorativo: nunca captura ponteiro nem foco. */
  pointer-events:none;
}
.v3w13-ico > svg{
  width:100%;
  height:100%;
  display:block;
  stroke:currentColor;
  fill:none;
}

/* ============================================================
   2) Card hover-lift (.v3w13-lift)
   ============================================================
   Elevação sutil aplicada por JS a cards genéricos (classe contendo "card"
   fora dos namespaces protegidos). Transform + sombra suave; o estado base
   é neutro, então a ausência do JS não muda nada. */
.v3w13-lift{
  transition:transform .22s cubic-bezier(.22,.61,.36,1),
             box-shadow .22s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.v3w13-lift:hover,
.v3w13-lift:focus-within,
.v3w13-lift:focus-visible{
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg,0 12px 28px rgba(0,70,30,.16));
}
.v3w13-lift:focus-visible{
  outline:2px solid var(--focus-ring,#00461E);
  outline-offset:3px;
}

/* ============================================================
   3) Sublinhado animado em links de conteúdo (.v3w13-ul)
   ============================================================
   Acento que cresce no hover/focus via background-size, posicionado abaixo
   da linha de base. É ADITIVO: não removemos o text-decoration existente,
   apenas somamos uma faixa Stone que se expande. Aplicado por JS só a links
   dentro de <article>/.article-body (fora de nav/header/footer e protegidos). */
.v3w13-ul{
  background-image:linear-gradient(var(--green,#00461E),var(--green,#00461E));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% .1em;
  transition:background-size .26s cubic-bezier(.22,.61,.36,1);
  padding-bottom:.04em;
}
.v3w13-ul:hover,
.v3w13-ul:focus-visible{
  background-size:100% .1em;
}

/* ============================================================
   4) Ênfase tipográfica de stats/KPIs (.v3w13-stat)
   ============================================================
   Só estilização: peso, números tabulares e leve ajuste de tamanho.
   Nunca recalcula valor. Aplicado a elementos curtos com R$/%/número grande
   e classe contendo stat/kpi/num (exceto .oc-kpi). */
.v3w13-stat{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.08;
  font-size:1.04em;
}

/* ============================================================
   5) Polish de contraste no escuro
   ============================================================
   Overrides conservadores SOMENTE nos elementos que esta wave cria, para
   garantir legibilidade. Não toca elementos de terceiros. */
[data-theme="dark"] .v3w13-ico{
  color:var(--green-2,#00D700);
  opacity:.82;
}
[data-theme="dark"] .v3w13-ul{
  background-image:linear-gradient(var(--green-2,#00D700),var(--green-2,#00D700));
}
[data-theme="dark"] .v3w13-lift:hover,
[data-theme="dark"] .v3w13-lift:focus-within,
[data-theme="dark"] .v3w13-lift:focus-visible{
  box-shadow:0 12px 30px rgba(0,0,0,.55);
}
[data-theme="dark"] .v3w13-lift:focus-visible{
  outline-color:var(--green-2,#00D700);
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .v3w13-ico{
    color:var(--green-2,#00D700);
    opacity:.82;
  }
  :root:not([data-theme="light"]) .v3w13-ul{
    background-image:linear-gradient(var(--green-2,#00D700),var(--green-2,#00D700));
  }
}

/* ============================================================
   6) Respeito a prefers-reduced-motion
   ============================================================
   Sem transform nem crescimento animado. O lift mantém apenas a sombra no
   hover; o sublinhado fica permanentemente visível (sem transição). */
@media(prefers-reduced-motion:reduce){
  .v3w13-lift{
    transition:box-shadow .01s linear;
    will-change:auto;
  }
  .v3w13-lift:hover,
  .v3w13-lift:focus-within,
  .v3w13-lift:focus-visible{
    transform:none;
  }
  .v3w13-ul{
    transition:none;
    background-size:100% .08em;
  }
}


/* ---- w3-14 (css) ---- */

/* Wave 14 — Animações e movimento: reveal-on-scroll, count-up, micro-interações e divisores. dinheirodaminhaempresa.com */

/*
 * Camada puramente progressiva e ADITIVA. NÃO redefine tokens de tema
 * (--ink, --bg, --card, --green*, --pill etc.) — apenas os consome via
 * currentColor / Stone. Tudo com prefixo v3w14- para isolamento.
 * Stone: verde #00D700, escuro #00461E, lime #A5FA00.
 *
 * Regras de segurança:
 * - O estado PADRÃO (sem classe .is-in) já é o estado final visível? NÃO:
 *   o estado escondido só é aplicado QUANDO o JS marca [data-v3w14-reveal],
 *   e o JS só marca quando há suporte a IntersectionObserver e não há
 *   reduced-motion. Logo, se o JS não rodar, nada some.
 * - reduced-motion: todas as transições/animações são neutralizadas.
 */

/* ============================================================
   1) REVEAL-ON-SCROLL em cascata
   ============================================================
   O JS aplica [data-v3w14-reveal] ao candidato e, ao entrar na
   viewport, troca para [data-v3w14-reveal="in"]. O stagger por grupo
   vem de --v3w14-delay (inline, setado pelo JS). */
[data-v3w14-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--v3w14-delay, 0ms);
  will-change: opacity, transform;
}
[data-v3w14-reveal="in"] {
  opacity: 1;
  transform: none;
}

/* ============================================================
   2) COUNT-UP — sem estilo próprio obrigatório
   ============================================================
   O número é animado via textContent pelo JS. Mantemos apenas uma
   dica de tabular-nums para o texto não "pular" de largura enquanto
   conta. Aplicado só ao elemento marcado. */
[data-v3w14-count] {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   3) MICRO-INTERAÇÕES em CTAs/botões
   ============================================================
   O JS marca elementos seguros (fora de calc/forms) com a classe
   .v3w14-cta. Realce sutil no hover/active; respeita teclado (:focus-visible
   herda o outline nativo, que NÃO removemos). */
.v3w14-cta {
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}
@media (hover: hover) and (pointer: fine) {
  .v3w14-cta:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow: 0 4px 14px -6px rgba(0, 70, 30, 0.45);
  }
}
.v3w14-cta:active {
  transform: translateY(0) scale(0.985);
}
[data-theme="dark"] .v3w14-cta:hover {
  box-shadow: 0 4px 16px -6px rgba(165, 250, 0, 0.35);
}

/* ============================================================
   4) DIVISORES animados (leve)
   ============================================================
   O JS marca <hr> de conteúdo com .v3w14-hr. Linha fina com brilho
   sutil em Stone lime, sem motion pesado (gradiente estático + leve
   realce no centro). */
.v3w14-hr {
  border: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, #00d700 55%, transparent) 30%,
    #a5fa00 50%,
    color-mix(in srgb, #00d700 55%, transparent) 70%,
    transparent 100%
  );
  border-radius: 2px;
  opacity: 0.85;
}
[data-theme="dark"] .v3w14-hr {
  opacity: 0.95;
}

/* ============================================================
   reduced-motion: tudo no estado final, sem movimento
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  [data-v3w14-reveal],
  [data-v3w14-reveal="in"] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .v3w14-cta {
    transition: none !important;
  }
  .v3w14-cta:hover,
  .v3w14-cta:active {
    transform: none !important;
    filter: none !important;
  }
}


/* ---- w3-15 (css) ---- */

/* Wave 15 — Acessibilidade, performance e polish. dinheirodaminhaempresa.com */

/*
 * Camada final, ADITIVA e DEFENSIVA. Não redefine tokens de tema (--ink, --bg,
 * --card, --green*, --focus-ring etc.) — apenas os consome, com fallbacks Stone
 * (deep #00461E). Tudo namespeado em .v3w15- / #v3w15-, salvo dois reforços
 * GLOBAIS deliberados e conservadores (:focus-visible e o skip-link), feitos
 * sem !important agressivo para não regredir estilos existentes.
 *
 * NÃO toca calculadoras (.calc-widget/[data-calc]/.calc), formulários, nem os
 * namespaces .ddf-/.oce-/.oc-/.dh-/.v26-. WCAG AA. dark = [data-theme="dark"].
 */

/* ============================================================
   1) :focus-visible global — anel de foco visível e consistente
   ============================================================
   Reforço por teclado (NÃO :focus), então o clique de mouse não ganha anel.
   Não removemos foco de nada; só garantimos um outline legível onde faltar.
   Stone deep como cor base, herdando --focus-ring quando o tema o define. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--focus-ring,#00461E);
  outline-offset:2px;
}
/* No escuro o verde profundo perde contraste sobre fundo escuro — clareia
   para o verde de marca, preservando legibilidade do anel (AA). */
[data-theme="dark"] a:focus-visible,
[data-theme="dark"] button:focus-visible,
[data-theme="dark"] [tabindex]:focus-visible,
[data-theme="dark"] input:focus-visible,
[data-theme="dark"] select:focus-visible,
[data-theme="dark"] textarea:focus-visible{
  outline-color:var(--focus-ring-dark,#00D700);
}

/* ============================================================
   2) Skip-link "Pular para o conteúdo" (#v3w15-skip)
   ============================================================
   Fora da tela por padrão; ao receber foco por teclado, surge no topo.
   Injetado pelo JS apenas quando ainda não existe um pular-para-conteúdo. */
.v3w15-skip{
  position:fixed;
  top:-200px;
  left:8px;
  z-index:100000;
  display:inline-block;
  padding:10px 16px;
  background:var(--green-deep,#00461E);
  color:#fff;
  font-weight:700;
  font-size:14px;
  line-height:1.2;
  border-radius:0 0 8px 8px;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
  text-decoration:none;
  transition:top .18s ease;
}
.v3w15-skip:focus,
.v3w15-skip:focus-visible{
  top:0;
  outline:2px solid #fff;
  outline-offset:2px;
}

/* ============================================================
   3) Guarda anti-overflow horizontal (.v3w15-scrollx)
   ============================================================
   Wrapper aplicado pelo JS a tabelas/figuras/pre largas que estourariam a
   viewport no mobile. Rola só no eixo X, sem cortar o layout vertical. */
.v3w15-scrollx{
  display:block;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}

/* Defensivo: mídia dentro de artigos nunca ultrapassa o container.
   Conservador — restrito a article para não afetar layouts de grid/app. */
article img,
article table,
article pre,
article svg{
  max-width:100%;
}
article img{height:auto;}

/* ============================================================
   4) Alvo de toque 44px (.v3w15-tap)
   ============================================================
   Utilitário para controles pequenos criados pelas waves v3 (.v3w11-*,
   .v3w12-* etc.). Garante área de toque AAA (44x44) sem alterar o visual:
   usa min-size + área clicável central. Aplicado por opt-in via JS/markup. */
.v3w15-tap{
  position:relative;
  min-width:44px;
  min-height:44px;
}
.v3w15-tap::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:100%;
  height:100%;
  min-width:44px;
  min-height:44px;
  transform:translate(-50%,-50%);
}

/* ============================================================
   5) Master switch reduced-motion (.v3w15-rm no <html>)
   ============================================================
   Rede de segurança: sob movimento reduzido, zeramos animações/transições
   dos namespaces das waves v3. Escopo restrito a v3w* para não interferir em
   calculadoras, formulários ou nos namespaces .ddf-/.oce-/.oc-/.dh-/.v26-. */
.v3w15-rm [class*="v3w"],
.v3w15-rm [class*="v3w"]::before,
.v3w15-rm [class*="v3w"]::after{
  animation-duration:.001ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.001ms !important;
  scroll-behavior:auto !important;
}
/* O skip-link continua deslizando? Não — também o congelamos sob rm. */
.v3w15-rm .v3w15-skip{transition:none;}

/* Espelha o switch para clientes sem JS, via media query nativa. */
@media (prefers-reduced-motion:reduce){
  [class*="v3w15-"],
  [class*="v3w15-"]::before,
  [class*="v3w15-"]::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
  .v3w15-skip{transition:none;}
}