:root { --bg: #FFFFFF;
  --surface: #FAFAFA;
  --surface-2: #F2F2F2;
  --border: #E6E6E6;
  --border-strong: #D1D1D1;
  --text: #0A0A0A;
  --text-2: #5A5A5A;
  --text-3: #6E6E6E;   /* texto terciário: ≥4,5:1 sobre bg, surface e surface-2 (verificado) */
  --decor: #888888;    /* NÃO é texto: grelhas e traços decorativos (3:1 chega). Nunca usar em texto. */
  --accent: #7A22F3;
  --accent-hover: #6410D8;
  --on-accent: #FFFFFF;
  --accent-soft: #F6F0FF;
  --accent-active: #520CB8;
  --accent-gradient: linear-gradient(135deg, #7A22F3 0%, #9B5CFF 100%);
  --accent-area: #7A22F3; /* cor da área sob a linha dos gráficos (esbate para transparente) */
  --shadow-accent: 0 6px 18px -6px rgb(122 34 243 / 0.5);
  --glow-accent: 0 0 0 1px rgb(122 34 243 / 0.25), 0 8px 24px -10px rgb(122 34 243 / 0.45);
  --positive: #166534;
  --positive-bg: #E8F5EC;
  --negative: #B91C1C;
  --negative-bg: #FDECEC;
  --neutral: #5A5A5A;
  --neutral-bg: #F2F2F2;
  --overlay: rgb(0 0 0 / 0.4);
  --overlay-shadow: 0 8px 32px rgb(0 0 0 / 0.12);
  --radius-control: 8px;
  --radius-card: 12px;
  --tabbar-h: 0px; /* 56px quando a barra inferior mobile está presente */ }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark;
  --bg: #0A0A0A;
  --surface: #141414;
  --surface-2: #1F1F1F;
  --border: #262626;
  --border-strong: #3A3A3A;
  --text: #FAFAFA;
  --text-2: #A3A3A3;
  --text-3: #8D8D8D;
  --decor: #737373;
  --accent: #A67BFF;
  --accent-hover: #B999FF;
  --on-accent: #0A0A0A;
  --accent-soft: #221238;
  --accent-active: #D2BEFF;
  --accent-gradient: linear-gradient(135deg, #A67BFF 0%, #C4A6FF 100%);
  --accent-area: #A67BFF;
  --shadow-accent: 0 6px 18px -6px rgb(166 123 255 / 0.4);
  --glow-accent: 0 0 0 1px rgb(166 123 255 / 0.3), 0 8px 24px -10px rgb(166 123 255 / 0.4);
  --positive: #4ADE80;
  --positive-bg: #0F2417;
  --negative: #F87171;
  --negative-bg: #2A1212;
  --neutral: #A3A3A3;
  --neutral-bg: #1F1F1F;
  --overlay-shadow: 0 8px 32px rgb(0 0 0 / 0.5); } }
:root[data-theme="dark"] { color-scheme: dark;
  --bg: #0A0A0A;
  --surface: #141414;
  --surface-2: #1F1F1F;
  --border: #262626;
  --border-strong: #3A3A3A;
  --text: #FAFAFA;
  --text-2: #A3A3A3;
  --text-3: #8D8D8D;
  --decor: #737373;
  --accent: #A67BFF;
  --accent-hover: #B999FF;
  --on-accent: #0A0A0A;
  --accent-soft: #221238;
  --accent-active: #D2BEFF;
  --accent-gradient: linear-gradient(135deg, #A67BFF 0%, #C4A6FF 100%);
  --accent-area: #A67BFF;
  --shadow-accent: 0 6px 18px -6px rgb(166 123 255 / 0.4);
  --glow-accent: 0 0 0 1px rgb(166 123 255 / 0.3), 0 8px 24px -10px rgb(166 123 255 / 0.4);
  --positive: #4ADE80;
  --positive-bg: #0F2417;
  --negative: #F87171;
  --negative-bg: #2A1212;
  --neutral: #A3A3A3;
  --neutral-bg: #1F1F1F;
  --overlay-shadow: 0 8px 32px rgb(0 0 0 / 0.5); }
/* Landing Glopay: casca estática, sem animações. Cores só por tokens (sem hex). Secções «.sec-b» usam o tema oposto ao da página. */

@font-face { font-family: Outfit; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/landing-nova/outfit-latin.woff2) format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: light dark; }
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Outfit, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 4px; }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
[data-contar] { display: inline-block; text-align: left; }

.wrap { width: min(100% - 2rem, 72rem); margin-inline: auto; }
.wrap--estreito { width: min(100% - 2rem, 48rem); }
@media (min-width: 720px) { .wrap { width: min(100% - 4rem, 72rem); } .wrap--estreito { width: min(100% - 4rem, 48rem); } }

.saltar { position: absolute; left: 0.5rem; top: -4rem; z-index: 100; padding: 0.75rem 1rem; background: var(--bg); color: var(--text); border: 2px solid var(--text); border-radius: var(--radius-control); font-weight: 600; }
.saltar:focus { top: 0.5rem; }

/* Secção invertida: tema oposto ao da página (preto sobre página clara, claro sobre página escura). */
/* --passo-*: bolinha ainda não atingida da sequência 4.7. Nunca muda a cor do número (sempre --on-accent): por isso é CLARA na secção preta e branca na secção clara. */
:root[data-theme="light"] .sec-b, :root:not([data-theme]) .sec-b { color-scheme: dark;
  --bg: #0A0A0A;
  --surface: #141414;
  --surface-2: #1F1F1F;
  --border: #262626;
  --border-strong: #3A3A3A;
  --text: #FAFAFA;
  --text-2: #A3A3A3;
  --text-3: #8D8D8D;
  --decor: #737373;
  --accent: #A67BFF;
  --accent-hover: #B999FF;
  --on-accent: #0A0A0A;
  --accent-soft: #221238;
  --accent-active: #D2BEFF;
  --accent-gradient: linear-gradient(135deg, #A67BFF 0%, #C4A6FF 100%);
  --accent-area: #A67BFF;
  --shadow-accent: 0 6px 18px -6px rgb(166 123 255 / 0.4);
  --glow-accent: 0 0 0 1px rgb(166 123 255 / 0.3), 0 8px 24px -10px rgb(166 123 255 / 0.4);
  --positive: #4ADE80;
  --positive-bg: #0F2417;
  --negative: #F87171;
  --negative-bg: #2A1212;
  --neutral: #A3A3A3;
  --neutral-bg: #1F1F1F;
  --overlay-shadow: 0 8px 32px rgb(0 0 0 / 0.5); --passo-vazio: var(--text-2); --passo-borda: var(--text-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .sec-b { --bg: #FFFFFF;
  --surface: #FAFAFA;
  --surface-2: #F2F2F2;
  --border: #E6E6E6;
  --border-strong: #D1D1D1;
  --text: #0A0A0A;
  --text-2: #5A5A5A;
  --text-3: #6E6E6E;   /* texto terciário: ≥4,5:1 sobre bg, surface e surface-2 (verificado) */
  --decor: #888888;    /* NÃO é texto: grelhas e traços decorativos (3:1 chega). Nunca usar em texto. */
  --accent: #7A22F3;
  --accent-hover: #6410D8;
  --on-accent: #FFFFFF;
  --accent-soft: #F6F0FF;
  --accent-active: #520CB8;
  --accent-gradient: linear-gradient(135deg, #7A22F3 0%, #9B5CFF 100%);
  --accent-area: #7A22F3; /* cor da área sob a linha dos gráficos (esbate para transparente) */
  --shadow-accent: 0 6px 18px -6px rgb(122 34 243 / 0.5);
  --glow-accent: 0 0 0 1px rgb(122 34 243 / 0.25), 0 8px 24px -10px rgb(122 34 243 / 0.45);
  --positive: #166534;
  --positive-bg: #E8F5EC;
  --negative: #B91C1C;
  --negative-bg: #FDECEC;
  --neutral: #5A5A5A;
  --neutral-bg: #F2F2F2;
  --overlay: rgb(0 0 0 / 0.4);
  --overlay-shadow: 0 8px 32px rgb(0 0 0 / 0.12);
  --radius-control: 8px;
  --radius-card: 12px;
  --tabbar-h: 0px; /* 56px quando a barra inferior mobile está presente */ --passo-vazio: var(--bg); --passo-borda: var(--border-strong); } }
:root[data-theme="dark"] .sec-b { --bg: #FFFFFF;
  --surface: #FAFAFA;
  --surface-2: #F2F2F2;
  --border: #E6E6E6;
  --border-strong: #D1D1D1;
  --text: #0A0A0A;
  --text-2: #5A5A5A;
  --text-3: #6E6E6E;   /* texto terciário: ≥4,5:1 sobre bg, surface e surface-2 (verificado) */
  --decor: #888888;    /* NÃO é texto: grelhas e traços decorativos (3:1 chega). Nunca usar em texto. */
  --accent: #7A22F3;
  --accent-hover: #6410D8;
  --on-accent: #FFFFFF;
  --accent-soft: #F6F0FF;
  --accent-active: #520CB8;
  --accent-gradient: linear-gradient(135deg, #7A22F3 0%, #9B5CFF 100%);
  --accent-area: #7A22F3; /* cor da área sob a linha dos gráficos (esbate para transparente) */
  --shadow-accent: 0 6px 18px -6px rgb(122 34 243 / 0.5);
  --glow-accent: 0 0 0 1px rgb(122 34 243 / 0.25), 0 8px 24px -10px rgb(122 34 243 / 0.45);
  --positive: #166534;
  --positive-bg: #E8F5EC;
  --negative: #B91C1C;
  --negative-bg: #FDECEC;
  --neutral: #5A5A5A;
  --neutral-bg: #F2F2F2;
  --overlay: rgb(0 0 0 / 0.4);
  --overlay-shadow: 0 8px 32px rgb(0 0 0 / 0.12);
  --radius-control: 8px;
  --radius-card: 12px;
  --tabbar-h: 0px; /* 56px quando a barra inferior mobile está presente */ --passo-vazio: var(--bg); --passo-borda: var(--border-strong); }
.sec-b { background: var(--bg); color: var(--text); }
:root[data-theme="light"] .sec-b, :root:not([data-theme]) .sec-b { color-scheme: dark; }
:root[data-theme="dark"] .sec-b { color-scheme: light; }
/* Painel empilhado invertido (4.20): no escuro NÃO vai a claro (claro-sobre-escuro encandeia, como o banner do Dashboard): mantém os tokens escuros sobre --surface-2 com filete no topo.
   No claro continua preto. Assimetria deliberada; o JS do cabeçalho segue a mesma regra. */
:root[data-theme="dark"] .sec-b.g-painel { color-scheme: dark;
  --bg: #0A0A0A;
  --surface: #141414;
  --surface-2: #1F1F1F;
  --border: #262626;
  --border-strong: #3A3A3A;
  --text: #FAFAFA;
  --text-2: #A3A3A3;
  --text-3: #8D8D8D;
  --decor: #737373;
  --accent: #A67BFF;
  --accent-hover: #B999FF;
  --on-accent: #0A0A0A;
  --accent-soft: #221238;
  --accent-active: #D2BEFF;
  --accent-gradient: linear-gradient(135deg, #A67BFF 0%, #C4A6FF 100%);
  --accent-area: #A67BFF;
  --shadow-accent: 0 6px 18px -6px rgb(166 123 255 / 0.4);
  --glow-accent: 0 0 0 1px rgb(166 123 255 / 0.3), 0 8px 24px -10px rgb(166 123 255 / 0.4);
  --positive: #4ADE80;
  --positive-bg: #0F2417;
  --negative: #F87171;
  --negative-bg: #2A1212;
  --neutral: #A3A3A3;
  --neutral-bg: #1F1F1F;
  --overlay-shadow: 0 8px 32px rgb(0 0 0 / 0.5); --passo-vazio: var(--text-2); --passo-borda: var(--text-2); background: var(--surface-2); border-top: 1px solid var(--border-strong); color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .sec-b.g-painel { color-scheme: dark;
  --bg: #0A0A0A;
  --surface: #141414;
  --surface-2: #1F1F1F;
  --border: #262626;
  --border-strong: #3A3A3A;
  --text: #FAFAFA;
  --text-2: #A3A3A3;
  --text-3: #8D8D8D;
  --decor: #737373;
  --accent: #A67BFF;
  --accent-hover: #B999FF;
  --on-accent: #0A0A0A;
  --accent-soft: #221238;
  --accent-active: #D2BEFF;
  --accent-gradient: linear-gradient(135deg, #A67BFF 0%, #C4A6FF 100%);
  --accent-area: #A67BFF;
  --shadow-accent: 0 6px 18px -6px rgb(166 123 255 / 0.4);
  --glow-accent: 0 0 0 1px rgb(166 123 255 / 0.3), 0 8px 24px -10px rgb(166 123 255 / 0.4);
  --positive: #4ADE80;
  --positive-bg: #0F2417;
  --negative: #F87171;
  --negative-bg: #2A1212;
  --neutral: #A3A3A3;
  --neutral-bg: #1F1F1F;
  --overlay-shadow: 0 8px 32px rgb(0 0 0 / 0.5); --passo-vazio: var(--text-2); --passo-borda: var(--text-2); background: var(--surface-2); border-top: 1px solid var(--border-strong); color-scheme: dark; } }

/* Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1.25rem; border: 1px solid transparent; border-radius: var(--radius-control); font: inherit; font-weight: 600; font-size: 1rem; line-height: 1; text-decoration: none; cursor: pointer; background: none; color: var(--text); }
.btn--primario { background: var(--accent); color: var(--on-accent); }
.btn--secundario { border-color: var(--border-strong); background: transparent; color: var(--text); }
.btn--grande { min-height: 52px; padding: 0 1.75rem; font-size: 1.0625rem; }

/* Topo */
.topo { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--border); }
.topo__in { display: flex; align-items: center; gap: 1.5rem; min-height: 64px; }
.logo-claro, .logo-escuro { height: 28px; width: auto; max-width: 100%; }
.logo-claro { display: block; }
.logo-escuro { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .logo-claro { display: none; } :root:not([data-theme]) .logo-escuro { display: block; } }
:root[data-theme="dark"] .logo-claro { display: none; }
:root[data-theme="dark"] .logo-escuro { display: block; }
/* O fundo medido pelo JS (landing.js) prevalece sobre o tema: o texto do logótipo nunca desaparece. */
[data-logo][data-fundo="claro"] > .logo-claro { display: block; }
[data-logo][data-fundo="claro"] > .logo-escuro { display: none; }
[data-logo][data-fundo="escuro"] > .logo-claro { display: none; }
[data-logo][data-fundo="escuro"] > .logo-escuro { display: block; }
.marca { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; font-size: 1.375rem; letter-spacing: -0.02em; text-decoration: none; }
.menu { margin-left: auto; display: none; }
.menu ul { display: flex; gap: 0.25rem; }
.menu a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.75rem; text-decoration: none; color: var(--text-2); font-weight: 500; font-size: 0.9375rem; border-radius: var(--radius-control); }
.menu a:hover { color: var(--text); }
.topo__accoes { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.tema { min-height: 44px; min-width: 44px; padding: 0 0.75rem; border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: transparent; color: var(--text); font: inherit; font-weight: 500; font-size: 0.9375rem; cursor: pointer; }
.topo__cta { display: none; }
.menu-mobile { position: relative; }
.menu-mobile summary { list-style: none; }
.menu-mobile summary::-webkit-details-marker { display: none; }
.menu-mobile nav { position: absolute; right: 0; top: calc(100% + 0.5rem); min-width: 14rem; padding: 0.5rem; background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-card); box-shadow: var(--overlay-shadow); }
.menu-mobile a { display: flex; align-items: center; min-height: 44px; padding: 0 0.75rem; text-decoration: none; font-weight: 500; border-radius: var(--radius-control); }
.menu-mobile a:hover { background: var(--surface-2); }
@media (min-width: 900px) {
  .menu { display: block; }
  .topo__accoes { margin-left: 0; }
  .topo__cta { display: inline-flex; }
  .menu-mobile { display: none; }
}

/* Secções */
.sec { padding-block: clamp(4rem, 9vw, 8rem); }
h1 { font-size: clamp(1.75rem, 0.4rem + 5.2vw, 4.75rem); line-height: 1.05; letter-spacing: -0.035em; font-weight: 700; max-width: 22ch; text-wrap: balance; }
h2 { font-size: clamp(2rem, 1rem + 4vw, 4rem); line-height: 1.08; letter-spacing: -0.03em; font-weight: 700; margin-bottom: clamp(2rem, 4vw, 3.5rem); text-wrap: balance; max-width: 22ch; }
h3 { font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.01em; font-weight: 650; }
h4 { font-size: 1.125rem; line-height: 1.3; font-weight: 650; }
p { max-width: 40rem; text-wrap: pretty; }
.faixa-demo { margin: 0; max-width: none; width: 100%; box-sizing: border-box; padding: 10px 16px; text-align: center; font-size: 14px; line-height: 20px; background: var(--neutral-bg); color: var(--text); border-bottom: 1px solid var(--border); }
.por-confirmar { background: var(--accent-soft); color: var(--text); padding: 0.05em 0.35em; border-radius: 4px; font-weight: 600; outline: 1px dashed var(--decor); box-decoration-break: clone; -webkit-box-decoration-break: clone; overflow-wrap: anywhere; }

/* 1. Hero */
.hero { padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 5vw, 4rem); overflow-x: clip; } /* os cartões de exemplo saem um pouco do mapa: nunca criam scroll horizontal */
.hero__sub { margin-top: 1.5rem; font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); line-height: 1.5; color: var(--text-2); max-width: 36rem; }
.hero__cta { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* 2. Factos */
.factos { padding-bottom: clamp(3rem, 6vw, 5rem); }
.factos__frase { font-size: 1.0625rem; font-weight: 600; color: var(--text); padding-top: 1.5rem; border-top: 1px solid var(--border); max-width: none; }
.marquee { margin-top: 1.25rem; }
.marquee__janela { overflow: hidden; }
.marquee__faixa { display: block; }
.formatos { display: flex; flex-wrap: wrap; gap: 0.5rem 0; color: var(--text-2); font-size: 0.9375rem; }
.formatos li:not(:last-child)::after { content: "·"; margin-inline: 0.75rem; color: var(--decor); }
.formatos[aria-hidden="true"], .marquee__pausa { display: none; }

/* 3. Caminhos */
.caminhos { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); background: var(--border-strong); border: 1px solid var(--border-strong); border-radius: var(--radius-card); overflow: hidden; }
.caminho { background: var(--bg); padding: 1.75rem 1.5rem 2rem; }
.caminho p { margin-top: 0.75rem; color: var(--text-2); }

/* 4. Painel (fixo no ecrã largo; no mobile empilha) */
.painel { display: grid; gap: 2rem; }
.painel__fig { align-self: start; }
.painel__fig picture, .painel__fig img { width: 100%; height: auto; }
.painel__fig picture { display: block; border: 1px solid var(--border-strong); border-radius: var(--radius-card); overflow: hidden; background: var(--surface); }
.painel__fig figcaption { margin-top: 0.75rem; color: var(--text-3); font-size: 0.875rem; }
:root[data-theme="dark"] .painel__pic--claro, :root:not([data-theme="dark"]) .painel__pic--escuro { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .painel__pic--claro { display: none; } :root:not([data-theme]) .painel__pic--escuro { display: block; } }
.painel__quando { margin-bottom: 1.5rem; color: var(--text-2); font-weight: 600; font-size: 1rem; }
.painel__bloco { padding-block: 1.5rem; border-top: 1px solid var(--border); }
.painel__bloco p { margin-top: 0.5rem; color: var(--text-2); }
@media (min-width: 900px) {
  .painel { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 4rem; align-items: start; }
  .painel__fig { position: sticky; top: 6rem; }
  .painel__bloco { min-height: 42vh; display: flex; flex-direction: column; justify-content: center; }
}

/* 5. Passos (a linha vertical é fixa nesta casca) */
.passos { max-width: 44rem; position: relative; display: grid; gap: 0; }
/* Fio entre bolinhas: o de cada passo vai do centro da sua bolinha ao centro da seguinte (a altura do próprio passo). ::before = pista, ::after = preenchimento. */
.passos li:not(:last-child)::before, .passos li:not(:last-child)::after { content: ""; position: absolute; left: 1.5rem; top: 2.75rem; height: 100%; width: 1px; transform: translateX(-0.5px); }
.passos li:not(:last-child)::before { background: var(--border-strong); }
.passos li:not(:last-child)::after { width: 2px; transform: translateX(-1px); background: var(--accent); transform-origin: top; }
.passos li { position: relative; display: grid; grid-template-columns: 3rem 1fr; gap: 1.5rem; padding-block: 1.25rem; }
.passos__n { position: relative; z-index: 1; display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid var(--accent); border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.passos p { margin-top: 0.25rem; color: var(--text-2); }

/* 6. Cartões */
.cartoes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.cartao { border: 1px solid var(--border-strong); border-radius: var(--radius-card); padding: 1.75rem 1.5rem 2rem; }
.cartao p { margin-top: 0.75rem; color: var(--text-2); }

/* 7. Pagamentos */
.pagar { display: grid; gap: 2.5rem; }
.pagar__col { border-top: 1px solid var(--border-strong); padding-top: 1.5rem; }
.pagar ol { margin-top: 1rem; counter-reset: p; display: grid; gap: 0.75rem; }
.pagar li { counter-increment: p; display: grid; grid-template-columns: 2rem 1fr; gap: 0.5rem; color: var(--text-2); }
.pagar li::before { content: counter(p); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); }
.pagar__nota { margin-top: 2.5rem; font-weight: 600; color: var(--text); }
@media (min-width: 720px) { .pagar { grid-template-columns: 1fr 1fr; gap: 4rem; } }

/* 8. O dinheiro */
.conta { display: grid; max-width: 48rem; border-top: 1px solid var(--border-strong); }
.conta > div { display: grid; gap: 0.25rem; padding-block: 1.25rem; border-bottom: 1px solid var(--border); }
.conta dt { color: var(--text-2); }
.conta dd { font-size: 1.5rem; font-weight: 650; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
@media (min-width: 720px) { .conta > div { grid-template-columns: 1fr auto; align-items: baseline; gap: 2rem; } }
.simulador { margin-top: 3rem; max-width: 48rem; padding: 1.75rem 1.5rem; border: 1px solid var(--border-strong); border-radius: var(--radius-card); background: var(--surface); }
.simulador__linha { margin-top: 0.75rem; font-size: 1.25rem; max-width: none; }
.simulador__liq { font-size: 1.5rem; }
.simulador__nota { margin-top: 0.75rem; color: var(--text-3); font-size: 0.875rem; }

/* 9. FAQ */
.faq { border-top: 1px solid var(--border-strong); }
.faq details { border-bottom: 1px solid var(--border-strong); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 56px; padding-block: 1rem; font-weight: 600; font-size: 1.125rem; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 1.5rem; font-weight: 400; line-height: 1; color: var(--text-2); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { padding-bottom: 1.5rem; color: var(--text-2); }

/* 10. CTA e rodapé */
.cta h2 { max-width: 20ch; }
.rodape { padding-block: 3rem; }
.rodape__in { display: grid; gap: 1.5rem; }
.rodape__marca { font-weight: 700; font-size: 1.25rem; }
.rodape ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.rodape a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--text-2); }
.rodape a:hover { color: var(--text); }
.rodape__nota { color: var(--text-3); font-size: 0.875rem; }


/* ============================ REDESENHO (hero com mapa, marketplace, aluno, análise) ============================ */
.ico { flex: none; }
.lede { font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); line-height: 1.5; color: var(--text-2); margin-top: calc(-1 * clamp(1rem, 2vw, 2rem)); margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 40rem; }

/* Hero: texto + globo (ou o mapa de Angola). A caixa é quadrada e reservada: trocar o mapa pelo globo não mexe no layout (CLS 0). */
.hero__grade { display: grid; gap: 2.5rem; align-items: center; }
.hero__visual { position: relative; min-width: 0; }
.hero__mapa { position: relative; width: 100%; max-width: 34rem; aspect-ratio: 1; margin-inline: auto; display: grid; place-items: center; background: transparent; }
.hero__mapa .mapa { width: 100%; height: 100%; }
.hero__mapa > .mapa, .hero__mapa > .globo__canvas { position: relative; }
.globo--3d .mapa { display: none; }
.globo__canvas { width: 100%; height: 100%; display: block; background: transparent; }
.hero__exemplo { margin-top: 1.75rem; text-align: center; color: var(--text-3); font-size: 0.875rem; max-width: none; }
@media (min-width: 900px) {
  .hero__grade { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 3rem; }
  .hero h1 { font-size: clamp(2.25rem, 0.8rem + 2.6vw, 3.5rem); }
}

/* Mapa de Angola (SVG): províncias com vendas acendem com o amarelo do tema. */
.mapa path { fill: var(--border); stroke: var(--bg); stroke-width: 0.35; stroke-linejoin: round; }
.mapa path.on { fill: var(--accent); fill-opacity: 0.85; }
.mapa .pt { fill: var(--accent); fill-opacity: 0.5; stroke: var(--text); stroke-width: 0.25; transform-box: fill-box; transform-origin: center; }
.mapa .pt__c { fill: var(--text); }
.mapa--mini { max-height: 11rem; width: 100%; }

/* Notificações de exemplo (vidro): em ecrã largo flutuam à volta do mapa; no telemóvel ficam em lista por baixo. */
.notas { display: grid; gap: 0.75rem; margin-top: 1.25rem; }
.nota { display: grid; grid-template-columns: auto 1fr; gap: 0.125rem 0.625rem; align-items: start; padding: 0.875rem 1rem; border: 1px solid var(--border-strong); border-radius: 1rem; background: color-mix(in srgb, var(--bg) 85%, transparent); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: var(--overlay-shadow); }
.nota__ico { color: var(--text); margin-top: 0.125rem; }
.nota > div { grid-column: 2; }
.nota__t { font-weight: 600; font-size: 0.9375rem; line-height: 1.3; max-width: none; }
.nota__d { color: var(--text-2); font-size: 0.8125rem; line-height: 1.3; max-width: none; }
.nota__v { grid-column: 2; white-space: nowrap; font-size: 0.9375rem; }
@media (min-width: 900px) {
  .notas { position: absolute; inset: 0; margin: 0; pointer-events: none; display: block; }
  .nota { position: absolute; width: 13.5rem; } /* estreitos: ficam nas bordas e deixam o centro do globo livre */
  .nota:nth-child(1) { left: -1.5rem; top: 1rem; } /* canto superior esquerdo */
  .nota:nth-child(2) { right: -2rem; top: 50%; translate: 0 -50%; } /* lateral direita (translate à parte: a flutuação usa transform) */
  .nota:nth-child(3) { left: 1.5rem; bottom: 1rem; } /* canto inferior esquerdo */
}

/* 2. Métodos e factos */
.metodos { display: grid; gap: 0.75rem; margin-top: 1.25rem; }
.metodos li { display: flex; align-items: center; gap: 0.625rem; color: var(--text); font-weight: 600; font-size: 0.9375rem; }
.metodos .ico { color: var(--text-2); }
@media (min-width: 720px) { .metodos { grid-template-columns: repeat(3, auto); justify-content: start; gap: 0.75rem 2.5rem; } }

/* 4b. Análise (dados de demonstração) */
.analise { margin-top: clamp(3rem, 6vw, 5rem); }
.analise__nota { color: var(--text-3); font-size: 0.875rem; margin-top: 0.25rem; max-width: none; }
.analise__grade { display: grid; gap: 1rem; margin-top: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.analise__cartao { border: 1px solid var(--border-strong); border-radius: var(--radius-card); padding: 1.25rem; background: var(--surface); min-width: 0; }
.analise__cartao h4 { margin-bottom: 1rem; }
.donut { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.donut svg { width: 7.5rem; height: 7.5rem; transform: rotate(-90deg); }
.donut circle { fill: none; stroke-width: 6; }
.donut__f { stroke: var(--border); }
.donut__a { stroke: var(--accent); }
.donut__b { stroke: var(--text); }
.donut ul { display: grid; gap: 0.5rem; font-size: 0.9375rem; }
.donut li { display: flex; align-items: center; gap: 0.5rem; }
.donut li b { margin-left: auto; padding-left: 0.75rem; }
.chip { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 3px; }
.chip--a { background: var(--accent); }
.chip--b { background: var(--text); }
.rank { display: grid; gap: 0.625rem; }
.rank li { display: flex; align-items: center; gap: 0.75rem; font-size: 0.9375rem; }
.rank b { margin-left: auto; }
.med { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface-2); font-weight: 700; font-size: 0.8125rem; }
.med--1 { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.rank__pos { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--border); font-weight: 600; font-size: 0.9375rem; }

/* 6. Maquete do checkout */
.ck-bloco { display: grid; justify-items: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.ck { width: min(100%, 26rem); border: 1px solid var(--border-strong); border-radius: var(--radius-card); background: var(--surface); overflow: hidden; }
.ck__barra { display: flex; gap: 0.375rem; padding: 0.625rem 0.875rem; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.ck__barra i { width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--border-strong); }
.ck__corpo { display: grid; gap: 0.875rem; padding: 1.25rem; }
.ck__corpo p { max-width: none; }
.ck__prod { font-weight: 700; font-size: 1.125rem; }
.ck__preco { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; }
.ck__preco s { color: var(--text-2); }
.ck__preco strong { font-size: 1.5rem; }
.ck__selo { padding: 0.125rem 0.5rem; border-radius: 6px; background: var(--neutral-bg); color: var(--text); font-weight: 700; font-size: 0.8125rem; }
.ck__campo { display: grid; gap: 0.25rem; font-size: 0.875rem; color: var(--text-2); }
.ck__in { padding: 0.625rem 0.75rem; border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--bg); color: var(--text); font-size: 0.9375rem; }
.ck__metodos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.ck__m { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.75rem; border: 1px solid var(--border-strong); border-radius: var(--radius-control); font-size: 0.875rem; font-weight: 600; }
.ck__m--on { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.ck__bump { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.75rem; border: 1px dashed var(--border-strong); border-radius: var(--radius-control); font-size: 0.875rem; }
.ck__cx { color: var(--text); }
.ck__total { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; }
.ck__total strong { font-size: 1.25rem; }
.ck__cta { display: grid; place-items: center; min-height: 48px; border-radius: var(--radius-control); background: var(--accent); color: var(--on-accent); font-weight: 700; }
.ck__legenda { margin-top: 0.75rem; color: var(--text-3); font-size: 0.875rem; text-align: center; max-width: none; }
.cartao h3 { display: flex; align-items: center; gap: 0.75rem; }
.cartao__ico { display: inline-grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border: 1px solid var(--border-strong); border-radius: var(--radius-control); }

/* 6b. Marketplace e afiliados */
.duas { display: grid; gap: 2rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.duas > div { border-top: 1px solid var(--border-strong); padding-top: 1.25rem; }
.duas p { margin-top: 0.5rem; color: var(--text-2); }
@media (min-width: 720px) { .duas { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.vitrine { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.vit { display: grid; gap: 0.5rem; align-content: start; padding: 1rem; border: 1px solid var(--border-strong); border-radius: var(--radius-card); background: var(--surface); }
.vit__capa { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: var(--radius-control); background: var(--surface-2); border: 1px solid var(--border); font-size: 2rem; font-weight: 700; color: var(--text-2); }
.vit__com { font-weight: 700; font-size: 1.0625rem; max-width: none; }
.vit__reg { color: var(--text-2); font-size: 0.875rem; max-width: none; }
.vit__acao { margin-top: 0.25rem; padding-top: 0.75rem; border-top: 1px solid var(--border); font-weight: 600; font-size: 0.9375rem; max-width: none; }
.temp { display: inline-flex; align-items: center; gap: 0.375rem; width: fit-content; font-weight: 700; font-size: 0.9375rem; color: var(--text); }
.temp__ico { color: var(--accent); fill: var(--accent); fill-opacity: 0.25; }
.temp--alta span:last-child { padding: 0.0625rem 0.5rem; border-radius: 999px; background: var(--neutral-bg); font-size: 0.8125rem; }

/* 6c. Espaço do aluno */
.aluno { display: grid; gap: 2.5rem; align-items: start; }
.aluno__lista { display: grid; gap: 1.5rem; }
.aluno__lista li { display: grid; grid-template-columns: 1.5rem 1fr; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.aluno__lista p { margin-top: 0.25rem; color: var(--text-2); }
.membros { display: grid; gap: 0.75rem; }
.membros > div { padding: 1rem; border: 1px solid var(--border-strong); border-radius: var(--radius-card); background: var(--surface); }
.membros p { max-width: none; font-size: 0.9375rem; }
.membros__quem { font-weight: 700; }
.membros__meta, .membros__pc { color: var(--text-2); font-size: 0.8125rem; }
.barra { height: 0.5rem; margin-block: 0.5rem; border-radius: 999px; background: var(--border); overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--text); }
.membros__cert { display: flex; align-items: center; gap: 0.75rem; }
@media (min-width: 900px) { .aluno { grid-template-columns: 1.1fr 1fr; gap: 4rem; } }

/* 10. CTA final: caixa escura com borda dourada subtil (tokens escuros em qualquer tema) */
.cta__caixa { color-scheme: dark;
  --bg: #0A0A0A;
  --surface: #141414;
  --surface-2: #1F1F1F;
  --border: #262626;
  --border-strong: #3A3A3A;
  --text: #FAFAFA;
  --text-2: #A3A3A3;
  --text-3: #8D8D8D;
  --decor: #737373;
  --accent: #A67BFF;
  --accent-hover: #B999FF;
  --on-accent: #0A0A0A;
  --accent-soft: #221238;
  --accent-active: #D2BEFF;
  --accent-gradient: linear-gradient(135deg, #A67BFF 0%, #C4A6FF 100%);
  --accent-area: #A67BFF;
  --shadow-accent: 0 6px 18px -6px rgb(166 123 255 / 0.4);
  --glow-accent: 0 0 0 1px rgb(166 123 255 / 0.3), 0 8px 24px -10px rgb(166 123 255 / 0.4);
  --positive: #4ADE80;
  --positive-bg: #0F2417;
  --negative: #F87171;
  --negative-bg: #2A1212;
  --neutral: #A3A3A3;
  --neutral-bg: #1F1F1F;
  --overlay-shadow: 0 8px 32px rgb(0 0 0 / 0.5); padding: clamp(2rem, 6vw, 4.5rem); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: var(--radius-card); background: linear-gradient(160deg, var(--surface-2), var(--bg)); color: var(--text); display: grid; gap: 2rem; justify-items: start; }
.cta__caixa h2 { margin-bottom: 0; max-width: 24ch; }
.cta__caixa p { max-width: none; }

/* ============================ MOVIMENTO ============================
   Regra do DESIGN.md: NENHUMA animação esmaece texto. Só se anima `transform`/`translate` (e a cor da borda do cabeçalho, sem texto).
   Tudo o que depende de JS só existe com a classe `.js` (sem JS a página está completa e parada).
   Com `prefers-reduced-motion: reduce` não há movimento nenhum: ver o fim deste ficheiro. */

html { scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* 4.9 âncoras suaves, nativo */

/* 4.1 Revelação ao entrar no ecrã: sobe 16 px; a opacidade é sempre 1. O .visto é posto uma só vez pelo JS. */
@media (prefers-reduced-motion: no-preference) {
  .js :is(main h2, .hero h1, .hero__sub, .hero__cta, [data-grupo] > :not(.caminho)):not(.visto),
  .js .caminho:not(.visto) > * { transform: translateY(16px); }
  .js :is(main h2, .hero h1, .hero__sub, .hero__cta, [data-grupo] > :not(.caminho)),
  .js .caminho > * { transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--i, 0) * 70ms); }
  .hero h1 { --i: 0; } .hero__sub { --i: 1; } .hero__cta { --i: 2; }
  /* Terminada a entrada, o hover (4.8) volta ao tempo normal, sem o atraso do escalonamento. */
  .js [data-grupo] > .pronto { transition: transform 0.2s ease, border-color 0.2s ease; transition-delay: 0s; }
  .js .caminho.pronto > * { transition: transform 0.2s ease; transition-delay: 0s; }
}

/* 4.2 Marquee: duas cópias lado a lado, translateX(-50%) em ciclo, CSS puro. A cópia é aria-hidden. Pausa ao hover, ao foco e no botão. */
@media (prefers-reduced-motion: no-preference) {
  .js .marquee__faixa { display: flex; width: max-content; animation: marquee 60s linear infinite; animation-play-state: paused; }
  .js .marquee.on .marquee__faixa { animation-play-state: running; will-change: transform; }
  .js .marquee:hover .marquee__faixa, .js .marquee:focus-within .marquee__faixa, .js .marquee.pausada .marquee__faixa { animation-play-state: paused; }
  .js .formatos { flex-wrap: nowrap; flex: none; white-space: nowrap; }
  .js .formatos li::after { content: "·"; margin-inline: 0.75rem; color: var(--decor); }
  .js .formatos[aria-hidden="true"] { display: flex; }
  .js .marquee__pausa { display: inline-flex; margin-top: 0.75rem; }
  @keyframes marquee { to { transform: translateX(-50%); } }
}

/* 4.4 Painel fixo: o bloco que passa pelo meio do ecrã ganha uma barra que cresce (scaleY). */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .painel__bloco { position: relative; padding-left: 1.25rem; }
  .painel__bloco::before { content: ""; position: absolute; left: 0; top: 1.5rem; bottom: 1.5rem; width: 2px; background: var(--text); transform: scaleY(0); transform-origin: top; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .painel__bloco.activo::before { transform: scaleY(1); }
}

/* 4.5 Barra ao scroll: muda a borda (nunca a altura). O JS só liga .topo--rolou depois de sair do topo. */
.topo { transition: border-color 0.2s ease; }
.js .topo:not(.topo--rolou) { border-bottom-color: transparent; }

/* 4.6 FAQ: abre e fecha em altura (interpolate-size + ::details-content); onde não houver suporte, abre de seco. */
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    .faq details::details-content { block-size: 0; overflow: clip; transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete; }
    .faq details[open]::details-content { block-size: auto; }
  }
  .faq summary::after { transition: transform 0.25s ease; }
}

/* 4.20 Secções empilhadas (cobertura): cada painel guarda o SEU fundo sólido e o seguinte desliza por cima. Nunca há cor a interpolar: o contraste é constante do primeiro ao último frame.
   Só liga onde o conteúdo de cada painel cabe em 100svh (medido: no telemóvel nenhuma secção cabe, por isso aí fica estático, como com movimento reduzido). Máximo 3 painéis; aqui são 2. */
.g-painel { background: var(--bg); color: var(--text); }
@media (min-width: 768px) and (min-height: 880px) and (prefers-reduced-motion: no-preference) {
  .g-pilha > .g-painel { position: sticky; top: 0; min-height: 100svh; display: grid; align-content: start; padding-block: clamp(5rem, 11vh, 7rem) clamp(2rem, 5vh, 4rem); } /* conteúdo colado ao topo (abaixo do cabeçalho): o título entra mais cedo na cobertura */
  /* Compacta o painel preso: mais alto que o ecrã deixaria a parte de baixo inalcançável (não há scroll dentro). Testado em e2e/transicoes.spec.ts (folga ≥ 24 px, também com os marcadores «por confirmar»). */
  .g-pilha .g-painel h2 { margin-bottom: clamp(1.25rem, 3vh, 2rem); }
  .g-pilha .conta > div { padding-block: 0.875rem; }
  .g-pilha .simulador { margin-top: 1.75rem; padding: 1.25rem 1.5rem; }
}

/* 4.21 Pilha de cartões («Venda mais por cliente»; máximo 4, são 3): cada cartão fica preso um pouco mais abaixo do anterior e o seguinte desliza por cima. Só CSS (sticky), sem JS.
   Fundo sólido (--surface) em cada cartão: nenhuma cor interpola, o contraste é o mesmo do primeiro ao último frame. Só liga onde cabe: pilha completa + título em 100svh. */
@media (min-width: 768px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
  .cartoes { grid-template-columns: minmax(0, 40rem); gap: 2rem; padding-bottom: 6rem; }
  .cartao { position: sticky; top: calc(6rem + var(--n, 0) * 1rem); background: var(--surface); min-height: 11rem; }
  .cartao:nth-child(2) { --n: 1; } .cartao:nth-child(3) { --n: 2; } .cartao:nth-child(4) { --n: 3; }
}

/* 4.7 Sequência numerada: acompanha o scroll nos dois sentidos (EXCEPÇÃO documentada no DESIGN.md). Ao entrar, cada passo preenche o fio acima da bolinha (scaleY, origem no topo) e um disco
   amarelo cresce na bolinha (scale 0→1); ao sair, a MESMA transição ao contrário (primeiro o disco, depois o fio). Só transform.
   O número é SEMPRE --on-accent, por cima de tudo: nunca muda de cor nem esmaece, e a bolinha vazia é clara (--passo-vazio): contraste AA em todos os instantes.
   Sem JS ou com movimento reduzido: tudo preenchido, sem animação e sem desfazer. */
.passos__n::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: 50%; background: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .js .passos__n { background: var(--passo-vazio); border-color: var(--passo-borda); }
  .js .passos__n::before { transform: scale(0); transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--atraso, 0s); } /* a apagar: o disco sai primeiro */
  .js .passos li.feito .passos__n::before { transform: scale(1); transition-delay: calc(var(--atraso, 0s) + 0.3s); } /* a acender: o fio chega primeiro */
  .js .passos li:not(:last-child)::after { transform: translateX(-1px) scaleY(0); transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--atraso-fio, 0s) + 0.3s); }
  .js .passos li.fio:not(:last-child)::after { transform: translateX(-1px) scaleY(1); transition-delay: var(--atraso-fio, 0s); }
}

/* 4.8 Hover: só onde há rato; em toque, o estado é :active. translateY(-2px) e borda; nada de escala, rotação ou sombra colorida. */
.cartao, .caminho > * { transition: transform 0.2s ease, border-color 0.2s ease; }
.btn { transition: border-color 0.2s ease; } /* o fundo do botão muda de repente no hover: nada de interpolar a cor por baixo do texto */
@media (hover: hover) {
  .cartao:hover { transform: translateY(-2px); border-color: var(--text-2); }
  .caminho:hover > * { transform: translateY(-2px); }
  .caminho:hover { box-shadow: inset 0 0 0 1px var(--text-2); }
  .btn--primario:hover { background: var(--accent-hover); }
  .btn--secundario:hover { border-color: var(--text-2); }
}
.cartao:active { border-color: var(--text-2); }
.caminho:active { box-shadow: inset 0 0 0 1px var(--text-2); }
.btn--secundario:active { border-color: var(--text-2); }

/* 4.10 Alternância de fundo: corte seco entre secções. NÃO se interpola a cor do fundo por baixo do texto: a meio do caminho o contraste
   cai abaixo de AA (texto branco falha acima de ~L=0,18; a interpolar os dois, chegam a 1:1). O cabeçalho fixo adopta, de repente, o tema
   da secção que está por baixo (classe .sec-b posta pelo JS), sem transição de cor. */
.topo.sec-b { border-bottom-color: var(--border); }


/* Notificações a flutuar e pontos de venda a pulsar: só transform; sem movimento nada se mexe. */
@media (prefers-reduced-motion: no-preference) {
  .nota { animation: flutuar 7s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -2.3s); }
  .mapa .pt { animation: pulsar 2.6s ease-in-out infinite; }
  @keyframes flutuar { to { transform: translateY(-8px); } }
  @keyframes pulsar { 50% { transform: scale(1.6); } }
}

/* Movimento reduzido: variante REAL (nada se mexe; tudo visível, a linha completa, as cópias da marquee escondidas). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .marquee__pausa { display: none !important; }
  .formatos[aria-hidden="true"] { display: none !important; }
}