/* ============================================================
   visual-2026-w4 — Quarta camada de aprimoramento (Waves 16-20)
   Curso 'Frontends com Vibecoding' . dinheirodaminhaempresa.com
   Bundle gerado por scripts/build_waves4_bundle.py — NAO editar a mao.
   ============================================================ */



/* ---- w4-16 (css) ---- */

/* Wave 16 — Âncoras de seção e compartilhamento. dinheirodaminhaempresa.com */

/*
 * Quarta camada (w4), ADITIVA e DEFENSIVA. Não redefine tokens de tema
 * (--ink, --card, --green*) — apenas os consome, com fallbacks Stone
 * (--stone-green #00D700, --stone-green-deep #00461E, --stone-lime #A5FA00).
 *
 * Tudo namespeado em .v4w16- / #v4w16-. WCAG AA, :focus-visible, alvo 44px,
 * cores via currentColor/variáveis. dark = [data-theme="dark"].
 * Respeita prefers-reduced-motion (sem movimento = estado final).
 *
 * NÃO toca calculadoras, formulários, nem os namespaces .oc-/.oce-/.dh-.
 */

/* ============================================================
   Ícones — herdam currentColor, traço consistente
   ============================================================ */
.v4w16-anchor svg,
.v4w16-share-btn svg,
.v4w16-statcopy svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   1) Link-âncora em headings (.v4w16-h / .v4w16-anchor)
   ============================================================
   O ícone fica oculto por padrão e surge no hover/foco do heading.
   Alvo de 44px, visível ao foco por teclado. */
.v4w16-h {
  position: relative;
}
.v4w16-anchor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: 4px;
  vertical-align: middle;
  border-radius: 8px;
  color: var(--green, #00461e);
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.16s ease, color 0.16s ease, background-color 0.16s ease;
}
/* Revela ao passar o mouse no heading, ao focar via teclado, ou foco interno. */
.v4w16-h:hover .v4w16-anchor,
.v4w16-h:focus-within .v4w16-anchor,
.v4w16-anchor:focus-visible {
  opacity: 1;
}
.v4w16-anchor:hover {
  background: color-mix(in srgb, var(--green, #00461e) 12%, transparent);
}
.v4w16-anchor:focus-visible {
  outline: 2px solid var(--green, #00461e);
  outline-offset: 2px;
}
.v4w16-anchor.is-done {
  color: var(--stone-green, #00d700);
  opacity: 1;
}
[data-theme="dark"] .v4w16-anchor {
  color: var(--stone-green, #00d700);
}
[data-theme="dark"] .v4w16-anchor:focus-visible {
  outline-color: var(--stone-green, #00d700);
}

/* ============================================================
   2) Botão Compartilhar (.v4w16-share / .v4w16-share-btn / menu)
   ============================================================ */
.v4w16-share {
  position: relative;
  display: inline-block;
  margin: 12px 0 8px;
}
.v4w16-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--green, #00461e);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--green, #00461e) 35%, transparent);
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease,
    color 0.16s ease;
}
.v4w16-share-btn:hover {
  background: color-mix(in srgb, var(--green, #00461e) 10%, transparent);
  border-color: var(--green, #00461e);
}
.v4w16-share-btn:focus-visible {
  outline: 2px solid var(--green, #00461e);
  outline-offset: 2px;
}
[data-theme="dark"] .v4w16-share-btn {
  color: var(--stone-green, #00d700);
  border-color: color-mix(in srgb, var(--stone-green, #00d700) 40%, transparent);
}
[data-theme="dark"] .v4w16-share-btn:hover {
  background: color-mix(in srgb, var(--stone-green, #00d700) 14%, transparent);
  border-color: var(--stone-green, #00d700);
}
[data-theme="dark"] .v4w16-share-btn:focus-visible {
  outline-color: var(--stone-green, #00d700);
}

.v4w16-share-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  min-width: 180px;
  padding: 6px;
  background: var(--card, #fff);
  border: 1px solid color-mix(in srgb, var(--ink, #111) 14%, transparent);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.v4w16-share-menu[hidden] {
  display: none;
}
.v4w16-share-item {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  font: inherit;
  font-size: 14px;
  text-align: left;
  color: var(--ink, #111);
  text-decoration: none;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.v4w16-share-item:hover {
  background: color-mix(in srgb, var(--green, #00461e) 12%, transparent);
}
.v4w16-share-item:focus-visible {
  outline: 2px solid var(--green, #00461e);
  outline-offset: -2px;
}
[data-theme="dark"] .v4w16-share-menu {
  background: var(--card, #16201a);
  border-color: color-mix(in srgb, #fff 16%, transparent);
}
[data-theme="dark"] .v4w16-share-item {
  color: var(--ink, #eef3ee);
}
[data-theme="dark"] .v4w16-share-item:focus-visible {
  outline-color: var(--stone-green, #00d700);
}

/* ============================================================
   3) Copiar destaque (.v4w16-stat / .v4w16-statcopy)
   ============================================================
   O botão fica oculto e surge no hover/foco do elemento de valor. */
.v4w16-statwrap {
  position: relative;
}
.v4w16-statcopy {
  position: absolute;
  top: 4px;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--green, #00461e);
  background: color-mix(in srgb, var(--card, #fff) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink, #111) 12%, transparent);
  border-radius: 8px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.16s ease, color 0.16s ease;
}
.v4w16-stat:hover .v4w16-statcopy,
.v4w16-stat:focus-within .v4w16-statcopy,
.v4w16-statcopy:focus-visible {
  opacity: 1;
}
.v4w16-statcopy:focus-visible {
  outline: 2px solid var(--green, #00461e);
  outline-offset: 2px;
}
.v4w16-statcopy.is-done {
  color: var(--stone-green, #00d700);
  opacity: 1;
}
[data-theme="dark"] .v4w16-statcopy {
  color: var(--stone-green, #00d700);
  background: color-mix(in srgb, var(--card, #16201a) 88%, transparent);
  border-color: color-mix(in srgb, #fff 14%, transparent);
}
[data-theme="dark"] .v4w16-statcopy:focus-visible {
  outline-color: var(--stone-green, #00d700);
}

/* ============================================================
   Toast acessível (#v4w16-toast)
   ============================================================
   Visível e anunciado por leitores de tela (role=status, aria-live). */
.v4w16-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 100000;
  max-width: calc(100vw - 32px);
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  background: var(--green-deep, #00461e);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.v4w16-toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}
[data-theme="dark"] .v4w16-toast {
  color: #04130a;
  background: var(--stone-green, #00d700);
}

/* ============================================================
   Movimento reduzido — sem animação, estado final imediato
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .v4w16-anchor,
  .v4w16-share-btn,
  .v4w16-share-item,
  .v4w16-statcopy,
  .v4w16-toast {
    transition: none !important;
  }
  .v4w16-toast.is-on {
    transform: translate(-50%, 0);
  }
}


/* ---- w4-17 (css) ---- */

/* Wave 17 — Tabelas inteligentes (zebra, sticky, ordenação e busca-filtro). dinheirodaminhaempresa.com */

/*
 * QUARTA camada (w4), ADITIVA e DEFENSIVA, sobre w1/w2/w3. Não redefine tokens
 * de tema (--ink, --bg, --card, --green*, --focus-ring etc.) — apenas os
 * consome, com fallbacks Stone (--stone-green #00D700, --stone-green-deep
 * #00461E, --stone-lime #A5FA00). Tudo namespeado em .v4w17-.
 *
 * NÃO toca calculadoras, formulários, nem os namespaces .oc-/.oce-/.dh-/.v26-.
 * WCAG AA. :focus-visible. Alvos de 44px. reduced-motion respeitado.
 * dark = [data-theme="dark"].
 */

/* ============================================================
   1) Estilo base da tabela (.v4w17-table) — zebra + cabeçalho
   ============================================================
   Conservador: usa border-collapse herdado quando possível e cores via
   color-mix sobre tokens, com fallback sólido. Não força largura. */
.v4w17-table{
  border-collapse:collapse;
}

/* Zebra: linhas alternadas com leve tom. color-mix degrada para o fallback
   em navegadores antigos (a regra inteira é ignorada se não suportada). */
.v4w17-table tbody tr:nth-child(even) > *{
  background:color-mix(in srgb, var(--green, #00461E) 5%, transparent);
}
[data-theme="dark"] .v4w17-table tbody tr:nth-child(even) > *{
  background:color-mix(in srgb, var(--stone-green, #00D700) 9%, transparent);
}

/* Hover de linha para leitura guiada (sem mexer no conteúdo). */
.v4w17-table tbody tr:hover > *{
  background:color-mix(in srgb, var(--stone-lime, #A5FA00) 14%, transparent);
}
[data-theme="dark"] .v4w17-table tbody tr:hover > *{
  background:color-mix(in srgb, var(--stone-green, #00D700) 16%, transparent);
}

/* Cabeçalho com leve destaque. */
.v4w17-table thead th{
  background:color-mix(in srgb, var(--green-deep, #00461E) 10%, var(--card, #fff));
  font-weight:700;
  text-align:inherit;
}
[data-theme="dark"] .v4w17-table thead th{
  background:color-mix(in srgb, var(--stone-green, #00D700) 12%, var(--card, #11261a));
}

/* ============================================================
   2) Cabeçalho STICKY quando a tabela é alta (.v4w17-tall)
   ============================================================
   position:sticky engaja sob o contêiner rolável vertical mais próximo;
   se a tabela não rolar verticalmente, comporta-se como cabeçalho normal. */
.v4w17-tall thead th{
  position:sticky;
  top:0;
  z-index:2;
}

/* ============================================================
   3) Cabeçalho ORDENÁVEL (.v4w17-th-sort) + indicador aria-sort
   ============================================================
   Sem mutar o conteúdo da célula: o indicador é desenhado via ::after,
   chaveado pelo atributo aria-sort. Setas neutras por padrão. */
.v4w17-th-sort{
  cursor:pointer;
  -webkit-user-select:none;
  user-select:none;
  white-space:nowrap;
  position:relative;
}
.v4w17-tall .v4w17-th-sort{
  position:sticky; /* mantém sticky + ordenável simultaneamente */
}
.v4w17-th-sort::after{
  content:"↕";
  display:inline-block;
  margin-inline-start:.45em;
  font-size:.82em;
  line-height:1;
  opacity:.35;
  transform:translateY(.05em);
}
.v4w17-th-sort[aria-sort="ascending"]::after{
  content:"↑";
  opacity:1;
  color:var(--green-deep, #00461E);
}
.v4w17-th-sort[aria-sort="descending"]::after{
  content:"↓";
  opacity:1;
  color:var(--green-deep, #00461E);
}
[data-theme="dark"] .v4w17-th-sort[aria-sort="ascending"]::after,
[data-theme="dark"] .v4w17-th-sort[aria-sort="descending"]::after{
  color:var(--stone-green, #00D700);
}
.v4w17-th-sort:hover::after{opacity:.7;}

/* Foco por teclado visível no cabeçalho ordenável (AA). */
.v4w17-th-sort:focus-visible{
  outline:2px solid var(--focus-ring, #00461E);
  outline-offset:-2px;
}
[data-theme="dark"] .v4w17-th-sort:focus-visible{
  outline-color:var(--focus-ring-dark, #00D700);
}

/* ============================================================
   4) Busca-filtro inline (.v4w17-filter)
   ============================================================
   Barra acima da tabela: rótulo + campo com ícone + contador "N de M". */
.v4w17-filter{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem .75rem;
  margin:0 0 .6rem;
}
.v4w17-filter-label{
  font-weight:600;
  font-size:.92rem;
  color:var(--ink, #11261a);
}
[data-theme="dark"] .v4w17-filter-label{color:var(--ink, #e8f3ec);}

.v4w17-filter-field{
  display:flex;
  align-items:center;
  gap:.4rem;
  min-height:44px; /* alvo de toque 44px */
  padding:0 .65rem;
  border:1px solid color-mix(in srgb, var(--green, #00461E) 35%, transparent);
  border-radius:10px;
  background:var(--card, #fff);
  flex:1 1 220px;
  max-width:360px;
}
[data-theme="dark"] .v4w17-filter-field{
  background:var(--card, #11261a);
  border-color:color-mix(in srgb, var(--stone-green, #00D700) 40%, transparent);
}
.v4w17-filter-field:focus-within{
  border-color:var(--stone-green, #00D700);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--stone-green, #00D700) 28%, transparent);
}
.v4w17-filter-ico{
  display:inline-flex;
  align-items:center;
  color:var(--green-deep, #00461E);
  opacity:.7;
  flex:0 0 auto;
}
[data-theme="dark"] .v4w17-filter-ico{color:var(--stone-green, #00D700);}

.v4w17-filter-input{
  flex:1 1 auto;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  font:inherit;
  font-size:.95rem;
  color:var(--ink, #11261a);
  padding:.5rem 0;
}
[data-theme="dark"] .v4w17-filter-input{color:var(--ink, #e8f3ec);}
.v4w17-filter-input::placeholder{
  color:color-mix(in srgb, var(--ink, #11261a) 45%, transparent);
}

.v4w17-filter-count{
  font-size:.85rem;
  font-weight:600;
  color:color-mix(in srgb, var(--ink, #11261a) 70%, transparent);
  white-space:nowrap;
}
[data-theme="dark"] .v4w17-filter-count{
  color:color-mix(in srgb, var(--ink, #e8f3ec) 75%, transparent);
}

/* Linha oculta pelo filtro. */
.v4w17-row-hidden{display:none !important;}

/* ============================================================
   5) reduced-motion — nada de transições nos controles desta wave
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .v4w17-filter-field,
  .v4w17-th-sort::after{
    transition:none !important;
  }
}


/* ---- w4-18 (css) ---- */

/* Wave 18 — Mídia: lightbox e estabilidade. dinheirodaminhaempresa.com */

/*
 * 4ª camada (w4), ADITIVA e DEFENSIVA, sobre w1/w2/w3. NÃO redefine tokens de
 * tema (--ink, --bg, --card, --stone-green*, --focus-ring etc.) — apenas os
 * consome, com fallbacks Stone (green #00D700, deep #00461E, lime #A5FA00).
 * Tudo namespeado em .v4w18- / #v4w18-. WCAG AA. dark = [data-theme="dark"].
 *
 * NÃO toca calculadoras, formulários, ícones/logos/SVGs pequenos nem imagens
 * decorativas. Zero emojis (ícone de fechar é SVG Lucide inline no JS).
 */

/* ============================================================
   1) Imagem de conteúdo clicável (zoom)
   ============================================================ */
.v4w18-zoomable{
  cursor:zoom-in;
}
.v4w18-zoomable:focus-visible{
  outline:2px solid var(--focus-ring,#00461E);
  outline-offset:3px;
  border-radius:4px;
}
[data-theme="dark"] .v4w18-zoomable:focus-visible{
  outline-color:var(--focus-ring-dark,#00D700);
}

/* ============================================================
   2) Fade-in ao carregar
   ============================================================
   A imagem entra com leve fade/zoom só após o load. Sob reduced-motion o JS
   não aplica .v4w18-fade; ainda assim, o CSS neutraliza por segurança. */
.v4w18-fade{
  opacity:0;
  transition:opacity .42s ease;
}
.v4w18-fade.v4w18-loaded,
.v4w18-loaded{
  opacity:1;
}

/* ============================================================
   3) Lightbox (overlay único reutilizável)
   ============================================================ */
.v4w18-overlay{
  position:fixed;
  inset:0;
  z-index:100020;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(16px,4vw,48px);
  background:rgba(4,12,8,.82);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  opacity:0;
  transition:opacity .24s ease;
}
.v4w18-overlay[hidden]{
  display:none;
}
.v4w18-overlay.v4w18-open{
  opacity:1;
}

.v4w18-dialog{
  position:relative;
  max-width:min(96vw,1200px);
  max-height:92vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  transform:scale(.98);
  transition:transform .24s ease;
}
.v4w18-overlay.v4w18-open .v4w18-dialog{
  transform:scale(1);
}

.v4w18-img{
  display:block;
  max-width:100%;
  max-height:78vh;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:10px;
  background:var(--card,#0c1410);
  box-shadow:0 24px 70px rgba(0,0,0,.55);
}

.v4w18-caption{
  margin:0;
  max-width:72ch;
  text-align:center;
  color:#f3f6f4;
  font-size:14px;
  line-height:1.5;
}

.v4w18-close{
  position:absolute;
  top:-14px;
  right:-14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  padding:0;
  border:2px solid rgba(255,255,255,.85);
  border-radius:999px;
  background:var(--stone-green-deep,#00461E);
  color:#fff;
  cursor:pointer;
  line-height:0;
  box-shadow:0 6px 18px rgba(0,0,0,.4);
  transition:background .18s ease, transform .18s ease;
}
.v4w18-close:hover{
  background:var(--stone-green,#00D700);
  color:var(--stone-green-deep,#00461E);
}
.v4w18-close:focus-visible{
  outline:2px solid var(--stone-lime,#A5FA00);
  outline-offset:2px;
}

/* Trava de rolagem do fundo enquanto o lightbox está aberto. */
.v4w18-lock{
  overflow:hidden;
}

@media (max-width:560px){
  .v4w18-close{
    top:6px;
    right:6px;
  }
}

/* ============================================================
   4) Reduced-motion — sem fade/zoom animado
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .v4w18-fade{
    opacity:1 !important;
    transition:none !important;
    transform:none !important;
  }
  .v4w18-overlay,
  .v4w18-dialog,
  .v4w18-close{
    transition:none !important;
  }
  .v4w18-dialog{
    transform:none !important;
  }
}


/* ---- w4-19 (css) ---- */

/* Wave 19 — Contexto de leitura. dinheirodaminhaempresa.com */

/*
 * Quarta camada (w4), ADITIVA e DEFENSIVA, injetada em runtime sobre w1/w2/w3.
 * Nao redefine tokens de tema — apenas os consome, com fallbacks Stone
 * (--green #00D700, --green-deep #00461E, --lime #A5FA00). Tudo namespeado em
 * .v4w19- / #v4w19-. WCAG AA, :focus-visible, alvo 44px, reduced-motion.
 * dark = [data-theme="dark"].
 *
 * NAO toca calculadoras (.calc-widget/[data-calc]/.calc), formularios, nem os
 * namespaces .ddf-/.oce-/.oc-/.dh-/.v26-. So atua em paginas de ARTIGO.
 */

/* ============================================================
   1) Badges de meta — tempo de leitura e "Atualizado em"
   ============================================================
   Consumidos dentro de uma .article-meta existente (com separadores) ou de
   uma faixa propria .v4w19-meta criada quando nao ha meta. Discretos. */
.v4w19-badge,
.v4w19-selo{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.8125rem;
  line-height:1.3;
  color:var(--ink-2,#475569);
  white-space:nowrap;
}
.v4w19-badge .v4w19-i,
.v4w19-selo .v4w19-i{
  flex:0 0 auto;
  color:var(--green-deep,#00461E);
}
[data-theme="dark"] .v4w19-badge,
[data-theme="dark"] .v4w19-selo{
  color:var(--ink-2,#9aa6b2);
}
[data-theme="dark"] .v4w19-badge .v4w19-i,
[data-theme="dark"] .v4w19-selo .v4w19-i{
  color:var(--green,#00D700);
}

/* Faixa de meta criada por nos quando a pagina nao tem uma .article-meta. */
.v4w19-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 12px;
  margin:10px 0 0;
  font-size:.8125rem;
  color:var(--ink-2,#475569);
}
.v4w19-sep{
  opacity:.5;
  user-select:none;
}

/* ============================================================
   2) Widget "Isto foi util?" (#v4w19-util)
   ============================================================
   Ao fim do artigo. Sem backend, sem rede: a escolha so vai pro localStorage.
   Botoes com alvo de toque 44px e foco visivel por teclado. */
.v4w19-util{
  margin:40px 0 8px;
  padding:20px 22px;
  border:1px solid var(--line,#e2e8f0);
  border-radius:14px;
  background:var(--card,#fff);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px 18px;
}
.v4w19-util-q{
  margin:0;
  font-weight:700;
  font-size:1rem;
  line-height:1.3;
  color:var(--ink,#0f172a);
}
.v4w19-util-btns{
  display:flex;
  gap:10px;
}
.v4w19-util-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  min-width:44px;
  padding:0 18px;
  border:1px solid var(--line,#cbd5e1);
  border-radius:10px;
  background:transparent;
  color:var(--ink,#0f172a);
  font:inherit;
  font-size:.9375rem;
  font-weight:600;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .12s ease;
}
.v4w19-util-btn svg{
  width:18px;
  height:18px;
  flex:0 0 auto;
  color:var(--green-deep,#00461E);
}
.v4w19-util-btn:hover{
  border-color:var(--green-deep,#00461E);
  background:var(--green-soft,rgba(0,215,0,.08));
}
.v4w19-util-btn:active{
  transform:translateY(1px);
}
.v4w19-util-btn:focus-visible{
  outline:2px solid var(--green-deep,#00461E);
  outline-offset:2px;
}
.v4w19-util-thanks{
  margin:0;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.9375rem;
  font-weight:600;
  color:var(--green-deep,#00461E);
}
.v4w19-util-thanks svg{
  width:18px;
  height:18px;
  flex:0 0 auto;
}

/* dark = [data-theme="dark"] */
[data-theme="dark"] .v4w19-util-q{
  color:var(--ink,#e8edf2);
}
[data-theme="dark"] .v4w19-util-btn{
  color:var(--ink,#e8edf2);
  border-color:var(--line,#2a3540);
}
[data-theme="dark"] .v4w19-util-btn svg,
[data-theme="dark"] .v4w19-util-thanks{
  color:var(--green,#00D700);
}
[data-theme="dark"] .v4w19-util-btn:hover{
  border-color:var(--green,#00D700);
  background:rgba(0,215,0,.12);
}
[data-theme="dark"] .v4w19-util-btn:focus-visible{
  outline-color:var(--green,#00D700);
}

/* Respeita movimento reduzido. */
@media (prefers-reduced-motion:reduce){
  .v4w19-util-btn{
    transition:none;
  }
  .v4w19-util-btn:active{
    transform:none;
  }
}


/* ---- w4-20 (css) ---- */

/* Wave 20 — Performance avançada. dinheirodaminhaempresa.com */

/*
 * Quarta camada (w4), ADITIVA, DEFENSIVA e IDEMPOTENTE, sobre w1/w2/w3.
 * Não redefine tokens de tema (--ink, --bg, --card, --green*, --focus-ring) —
 * apenas os consome quando necessário. Tudo namespeado em .v4w20- / #v4w20-.
 * Sem efeito visual perceptível: estas regras só orientam o pintor do browser
 * (content-visibility), nunca mudam cor, espaçamento ou posição.
 *
 * NÃO toca calculadoras (.calc-widget/[data-calc]/.calc), formulários, nem os
 * namespaces .ddf-/.oce-/.oc-/.dh-/.v26-. dark = [data-theme="dark"].
 */

/* ============================================================
   1) content-visibility — pular pintura de seções fora da dobra
   ============================================================
   Aplicado pelo JS apenas a blocos GRANDES (>800px) claramente abaixo da
   primeira tela. O contain-intrinsic-size é fixado pelo JS (var --v4w20-cis)
   a partir da altura medida, evitando salto de scroll quando a seção entra/sai
   da renderização. NUNCA no hero/primeira seção.

   content-visibility:auto só economiza pintura enquanto o bloco está longe da
   viewport; ao se aproximar, o browser renderiza normalmente. É puramente uma
   dica de performance — não altera o visual. */
.v4w20-cv{
  content-visibility:auto;
  /* Reserva o espaço medido para o scrollbar/altura não oscilarem. O JS
     escreve --v4w20-cis com a altura atual; o fallback evita colapso caso a
     variável não tenha sido definida por algum motivo. */
  contain-intrinsic-size:auto var(--v4w20-cis,1200px);
}

/* Rede de segurança: se o navegador não suportar content-visibility, a classe
   é inerte (propriedade ignorada) e nada muda. Nenhum !important, nenhum
   override de display/overflow — para não arriscar regressão visual. */