/* Axxis Retail: site de vendas (home e afiliados).
   Cores SEMPRE via tokens.css. Aqui so ritmo, layout, componentes e movimento.
   Movimento segue 03_mapa_movimento.md: so transform e opacity, nada escondido sem a classe .mo. */

:root{
  /* movimento (nao sao cores, por isso vivem aqui) */
  --ax-ease-saida:cubic-bezier(.4,0,1,1);
  --ax-dist-entrada:18px;
  --ax-dist-micro:3px;
  --ax-stagger:60ms;
  --ax-stagger-max:300ms;
  --ax-acende-min:.22;
  --ax-menu-limite:80px;

  /* layout */
  --largura:1160px;
  --gutter:20px;
  --sec-y:72px;
  --menu-h:64px;

  /* derivados de token (transparencias sem cor nova) */
  --linha-escura:color-mix(in srgb, var(--ax-branco) 9%, transparent);
  --linha-clara:var(--ax-marfim-2);
  --sombra-forte:0 30px 80px color-mix(in srgb, var(--ax-preto) 55%, transparent);
  --sombra-suave:0 10px 30px color-mix(in srgb, var(--ax-preto) 10%, transparent);
}
@media (min-width:768px){ :root{ --gutter:32px; --sec-y:112px; } }

@media (prefers-reduced-motion: reduce){
  :root{
    --ax-dist-entrada:0px; --ax-dist-micro:0px; --ax-stagger:0ms;
    --ax-dur-3:120ms; --ax-dur-2:0ms; --ax-acende-min:1;
  }
  html{ scroll-behavior:auto !important; }
}

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--menu-h) + 28px); }
body{
  margin:0; background:var(--ax-preto); color:var(--ax-texto-claro);
  font:400 16px/1.6 var(--ax-f-texto);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
@media (min-width:768px){ body{ font-size:17px; } }
img,svg{ display:block; max-width:100%; }
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{ margin:0; }
ul,ol{ padding:0; list-style:none; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }
strong{ font-weight:600; }

:focus-visible{ outline:3px solid var(--ax-ouro-claro); outline-offset:3px; border-radius:6px; }
.s-clara :focus-visible{ outline-color:var(--ax-ouro-escuro); }

.sr{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.pular{ position:absolute; left:12px; top:-60px; z-index:100; background:var(--ax-ouro); color:var(--ax-preto); padding:10px 16px; border-radius:var(--ax-raio); font-weight:600; text-decoration:none; }
.pular:focus{ top:12px; }

.ic{ width:20px; height:20px; flex:none; }
.ic.sm{ width:16px; height:16px; }
.ic.lg{ width:26px; height:26px; }

.wrap{ width:min(var(--largura), 100% - 2*var(--gutter)); margin-inline:auto; }
.sec{ padding-block:var(--sec-y); position:relative; }
.s-escura{ background:var(--ax-preto); color:var(--ax-texto-claro); }
.s-escura-2{ background:var(--ax-preto-2); color:var(--ax-texto-claro); }
.s-clara{ background:var(--ax-marfim); color:var(--ax-texto-escuro); }

/* ---------- tipografia ---------- */
.rotulo{
  display:inline-flex; align-items:center; gap:10px;
  font:700 12px/1.3 var(--ax-f-rotulo); letter-spacing:.24em; text-transform:uppercase;
  color:var(--ax-ouro);
}
.rotulo::before{ content:""; width:22px; height:1px; background:currentColor; }
.s-clara .rotulo{ color:var(--ax-ouro-escuro); }

.h1,.h2,.h3{ font-family:var(--ax-f-display); font-weight:800; letter-spacing:-.02em; text-wrap:balance; }
.h1{ font-size:clamp(34px, 8.2vw, 66px); line-height:1.04; }
.h2{ font-size:clamp(28px, 5.4vw, 46px); line-height:1.1; margin-top:16px; }
.h3{ font-size:clamp(19px, 2.4vw, 22px); line-height:1.25; font-weight:700; letter-spacing:-.01em; }
.ouro-texto{
  background:var(--ax-ouro-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.s-clara .ouro-texto{ background:none; color:var(--ax-ouro-escuro); }
.lead{ font-size:clamp(17px, 2.1vw, 20px); line-height:1.6; color:var(--ax-texto-claro-2); max-width:62ch; }
.s-clara .lead{ color:var(--ax-texto-escuro-2); }
.sec-cabeca{ max-width:780px; margin-bottom:48px; }
.sec-cabeca .lead{ margin-top:18px; }
.sec-cabeca.centro{ margin-inline:auto; text-align:center; }
.sec-cabeca.centro .lead{ margin-inline:auto; }
.mudo{ color:var(--ax-texto-claro-2); }
.s-clara .mudo{ color:var(--ax-texto-escuro-2); }
.nota{ font-size:14px; color:var(--ax-texto-claro-2); }
.s-clara .nota{ color:var(--ax-texto-escuro-2); }

/* ---------- botoes ---------- */
.btn{
  --b-bg:var(--ax-ouro-grad); --b-cor:var(--ax-preto);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:50px; padding:12px 24px; border-radius:var(--ax-raio-pilula);
  background:var(--b-bg); color:var(--b-cor); border:0; cursor:pointer;
  font:700 15px/1.2 var(--ax-f-display); letter-spacing:.01em; text-decoration:none; text-align:center;
  transition:transform var(--ax-dur-1) var(--ax-curva-entrada);
}
.btn .ic{ transition:transform var(--ax-dur-1) var(--ax-curva-entrada); }
.btn:hover .ic,.btn:focus-visible .ic{ transform:translateX(var(--ax-dist-micro)); }
.btn:active{ transform:scale(.98); }
.btn-linha{ --b-bg:transparent; --b-cor:var(--ax-texto-claro); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--ax-ouro) 70%, transparent); }
.s-clara .btn-linha,.btn-linha.escuro{ --b-cor:var(--ax-texto-escuro); box-shadow:inset 0 0 0 1.5px var(--ax-texto-escuro); }
.btn-preto{ --b-bg:var(--ax-preto); --b-cor:var(--ax-ouro-claro); }
.btn-wa{ --b-bg:var(--ax-ok); --b-cor:var(--ax-branco); }
.btn-bloco{ width:100%; }
.link-seta{ display:inline-flex; align-items:center; gap:8px; font-weight:600; text-decoration:none; color:var(--ax-ouro-claro); padding:12px 4px; }
.link-seta:hover{ text-decoration:underline; text-underline-offset:4px; }
.s-clara .link-seta{ color:var(--ax-ouro-escuro); }

/* ---------- menu pilula ---------- */
.menu{
  position:fixed; z-index:50;
  top:max(10px, env(safe-area-inset-top));
  left:50%; transform:translateX(-50%);
  width:min(1120px, calc(100% - 20px));
}
.pilula{
  position:relative; isolation:isolate;
  display:flex; align-items:center; gap:10px;
  min-height:var(--menu-h); padding:8px 8px 8px 18px; border-radius:var(--ax-raio-pilula);
  color:var(--ax-texto-claro);
}
.pilula::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:color-mix(in srgb, var(--ax-preto) 95%, transparent);
  box-shadow:0 0 0 1px var(--linha-escura), 0 10px 30px color-mix(in srgb, var(--ax-preto) 35%, transparent);
  opacity:0;
}
@media (hover:hover) and (min-width:768px){
  @supports (backdrop-filter: blur(1px)){
    .pilula::before{ background:color-mix(in srgb, var(--ax-preto) 80%, transparent); backdrop-filter:blur(12px); }
  }
}
@keyframes ax-menu-solido{ to{ opacity:1; } }
@supports (animation-timeline: scroll()){
  .pilula::before{
    animation:ax-menu-solido linear both;
    animation-timeline:scroll(root block);
    animation-range:var(--ax-menu-limite) calc(var(--ax-menu-limite) + 40px);
  }
}
.menu-sentinela{ position:absolute; top:var(--ax-menu-limite); left:0; width:1px; height:1px; pointer-events:none; }
.mo .menu.io .pilula::before{ animation:none; transition:opacity var(--ax-dur-2) var(--ax-curva-entrada); }
.mo .menu.io.solido .pilula::before,.menu.aberto .pilula::before{ opacity:1; animation:none; }
@media (prefers-reduced-motion: reduce){
  .pilula::before{ animation:none; transition:none; }
  .menu.solido .pilula::before{ opacity:1; }
}

.marca-link{ display:flex; align-items:center; flex:none; padding:6px 0; border-radius:8px; }
.marca-link img{ height:30px; width:auto; }
.menu-links{ display:none; }
.menu-acoes{ margin-left:auto; display:flex; align-items:center; gap:6px; }
.menu-entrar{ display:none; }
.menu .btn{ min-height:46px; padding:10px 18px; font-size:14px; }
.menu-botao{
  width:46px; height:46px; border-radius:50%; border:0; background:transparent; color:var(--ax-texto-claro);
  display:grid; place-items:center; cursor:pointer;
}
.menu-botao .x{ display:none; }
.menu.aberto .menu-botao .x{ display:block; }
.menu.aberto .menu-botao .m{ display:none; }
.menu-folha{
  position:absolute; top:calc(100% + 8px); left:0; right:0;
  background:var(--ax-preto-2); border:1px solid var(--ax-preto-3); border-radius:var(--ax-raio-lg);
  padding:10px; box-shadow:var(--sombra-forte);
  display:none;
}
.menu.aberto .menu-folha{ display:block; animation:ax-folha var(--ax-dur-2) var(--ax-curva-entrada); }
@keyframes ax-folha{ from{ opacity:0; transform:translateY(-6px); } }
.menu-folha a{ display:flex; align-items:center; min-height:48px; padding:0 14px; border-radius:var(--ax-raio); text-decoration:none; font-weight:500; }
.menu-folha a:hover{ background:var(--ax-preto-3); }
.menu-folha .sep{ height:1px; background:var(--ax-preto-3); margin:6px 8px; }
@media (max-width:399px){ .menu .btn .txt-longo{ display:none; } }
@media (min-width:400px){ .menu .btn .txt-curto{ display:none; } }
@media (min-width:1000px){
  .menu-links{ display:flex; gap:2px; margin-left:18px; }
  .menu-links a{
    position:relative; padding:10px 12px; border-radius:var(--ax-raio-pilula);
    text-decoration:none; font-size:14px; font-weight:500; color:var(--ax-texto-claro);
  }
  .menu-links a::after{
    content:""; position:absolute; left:12px; right:12px; bottom:5px; height:2px; background:var(--ax-ouro);
    opacity:0; transition:opacity var(--ax-dur-1) var(--ax-curva-entrada);
  }
  .menu-links a:hover::after,.menu-links a[aria-current="true"]::after{ opacity:1; }
  .menu-entrar{ display:inline-flex; padding:10px 14px; font-size:14px; font-weight:500; text-decoration:none; color:var(--ax-texto-claro-2); border-radius:var(--ax-raio-pilula); }
  .menu-entrar:hover{ color:var(--ax-texto-claro); }
  .menu-botao,.menu-folha{ display:none !important; }
}

/* ---------- hero ---------- */
.hero{
  padding-top:calc(var(--menu-h) + 56px); padding-bottom:56px;
  background:
    radial-gradient(60% 50% at 80% 10%, color-mix(in srgb, var(--ax-ouro) 13%, transparent), transparent 70%),
    var(--ax-preto);
  overflow:hidden;
}
.hero-grade{ display:grid; gap:48px; align-items:center; }
@media (min-width:1000px){ .hero-grade{ grid-template-columns:1fr 1.08fr; gap:56px; } .hero{ padding-top:calc(var(--menu-h) + 88px); padding-bottom:88px; } }
@media (min-width:1000px){ .hero .h1{ font-size:clamp(40px, 4.3vw, 64px); } }
.hero .h1{ margin-top:20px; }
.hero .lead{ margin-top:22px; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:12px 18px; align-items:center; margin-top:32px; }
.hero-micro{ margin-top:22px; display:flex; flex-wrap:wrap; gap:8px 18px; font-size:14px; color:var(--ax-texto-claro-2); }
.hero-micro span{ display:inline-flex; align-items:center; gap:8px; }
.hero-micro .ic{ color:var(--ax-ouro); }

.origem{ border-top:1px solid var(--linha-escura); margin-top:56px; padding-top:28px; display:flex; gap:16px; align-items:flex-start; }
.origem .ic{ color:var(--ax-ouro); margin-top:3px; }
.origem p{ color:var(--ax-texto-claro-2); max-width:80ch; }
.origem strong{ color:var(--ax-texto-claro); }

/* ---------- monitor (moldura dos prints) ----------
   Tudo em porcentagem da largura: o monitor encolhe inteiro no celular.
   A tela com a borda e o proprio link que amplia o print. */
.mock{ perspective:1400px; margin:0; }
.monitor{
  --mon-a:#2B2A27; --mon-b:#181818; --mon-c:#0E0E0E;        /* grafite */
  --mon-brilho:rgba(226,194,122,.30);                        /* fio de luz dourado na borda de cima */
  --mon-reflexo:rgba(226,194,122,.07);                       /* reflexo sutil na tela */
  position:relative; transform-origin:50% 0;
}
.monitor-tela{
  position:relative; display:block; text-decoration:none; color:var(--ax-texto-claro); cursor:zoom-in;
  padding:1.3% 1.3% 3.6%;                                    /* borda fina, queixo mais grosso */
  border-radius:clamp(8px, 1.2vw, 14px);
  background:linear-gradient(165deg, var(--mon-a) 0%, var(--mon-b) 40%, var(--mon-c) 100%);
  box-shadow:inset 0 1px 0 var(--mon-brilho), inset 0 0 0 1px rgba(255,255,255,.04), var(--sombra-forte);
}
.monitor-tela::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1;
  background:linear-gradient(118deg, var(--mon-reflexo) 0%, transparent 34%);
}
.monitor-tela:focus-visible{ outline-offset:5px; }
.monitor .print{ display:block; width:100%; height:auto; border-radius:clamp(2px, .35vw, 5px); background:var(--ax-preto); }
.monitor-pe{ display:block; position:relative; width:26%; margin:0 auto; padding-top:6.5%; }
.monitor-pe::before{                                         /* pescoco */
  content:""; position:absolute; left:50%; top:0; width:36%; height:80%; transform:translateX(-50%);
  background:linear-gradient(90deg, var(--mon-c), var(--mon-a) 50%, var(--mon-c));
  clip-path:polygon(14% 0, 86% 0, 100% 100%, 0 100%);
}
.monitor-pe::after{                                          /* base */
  content:""; position:absolute; left:0; right:0; bottom:0; height:22%; border-radius:999px 999px 5px 5px;
  background:linear-gradient(180deg, var(--mon-a), var(--mon-c));
  box-shadow:inset 0 1px 0 var(--mon-brilho), 0 10px 18px -8px rgba(0,0,0,.55);
}
.monitor .ampliar{
  position:absolute; top:3%; right:2.6%; z-index:2;
  padding:3px 10px; border-radius:var(--ax-raio-pilula);
  font:600 11px/1.4 var(--ax-f-texto); font-style:normal; color:var(--ax-texto-claro);
  background:rgba(14,14,14,.78); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  opacity:0; transition:opacity var(--ax-dur-2) var(--ax-curva-entrada);
}
.monitor-tela:hover .ampliar,.monitor-tela:focus-visible .ampliar{ opacity:1; }
@media (hover:none){ .monitor .ampliar{ opacity:1; } }
.monitor .avisos{ left:4%; right:4%; bottom:9%; }
@keyframes ax-mock-assenta{ from{ transform:rotateX(var(--mock-incl,6deg)) scale(.97); } to{ transform:none; } }
@media (max-width:767px){ .mock{ --mock-incl:3deg; } }
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    .hero .monitor{ animation:ax-mock-assenta var(--ax-curva-entrada) both; animation-timeline:scroll(root block); animation-range:0px 400px; }
  }
}
.mock figcaption{ margin-top:12px; font-size:14px; color:var(--ax-texto-claro-2); }
.s-clara .mock figcaption{ color:var(--ax-texto-escuro-2); }

.avisos{ position:absolute; left:14px; bottom:14px; right:14px; height:40px; pointer-events:none; }
.avisos li{
  position:absolute; left:0; bottom:0; max-width:100%;
  display:flex; align-items:center; gap:8px; white-space:nowrap;
  padding:9px 14px; border-radius:var(--ax-raio-pilula);
  background:var(--ax-preto); color:var(--ax-texto-claro); font:500 13px var(--ax-f-texto);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--ax-ouro) 55%, transparent), 0 8px 24px color-mix(in srgb, var(--ax-preto) 60%, transparent);
  opacity:0; transform:translate3d(0,12px,0);
  transition:opacity var(--ax-dur-2) var(--ax-ease-saida), transform var(--ax-dur-2) var(--ax-ease-saida);
}
.avisos li:first-child{ opacity:1; transform:none; } /* sem JS: um aviso fixo */
.mo .avisos li:first-child{ opacity:0; transform:translate3d(0,12px,0); }
.mo .avisos li.on{ opacity:1; transform:none; transition-duration:var(--ax-dur-3); transition-timing-function:var(--ax-curva-entrada); }
.avisos .ic{ color:var(--ax-ouro); width:16px; height:16px; }

/* ---------- grades e cards ---------- */
.grade{ display:grid; gap:16px; }
@media (min-width:640px){ .g2{ grid-template-columns:repeat(2,1fr); } .g3{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .g3{ grid-template-columns:repeat(3,1fr); } .g4{ grid-template-columns:repeat(4,1fr); } .g5{ grid-template-columns:repeat(5,1fr); } }
@media (min-width:640px) and (max-width:999px){ .g4,.g5{ grid-template-columns:repeat(2,1fr); } }

.card{
  position:relative; border-radius:var(--ax-raio-lg); padding:26px;
  background:var(--ax-preto-2); border:1px solid var(--ax-preto-3);
}
.s-clara .card{ background:var(--ax-branco); border-color:var(--linha-clara); }
.card::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1.5px var(--ax-ouro); opacity:0;
  transition:opacity var(--ax-dur-1) var(--ax-curva-entrada);
}
@media (hover:hover){ .card.hover:hover::after{ opacity:1; } }
.card .h3{ margin-top:14px; }
.card p{ margin-top:10px; color:var(--ax-texto-claro-2); }
.s-clara .card p{ color:var(--ax-texto-escuro-2); }
.icone-caixa{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:color-mix(in srgb, var(--ax-ouro) 14%, transparent); color:var(--ax-ouro); }
.s-clara .icone-caixa{ background:color-mix(in srgb, var(--ax-ouro) 18%, var(--ax-branco)); color:var(--ax-ouro-escuro); }

/* dores */
.dor .icone-caixa{ background:color-mix(in srgb, var(--ax-erro) 14%, transparent); color:var(--ax-erro); }
.dor .h3{ color:var(--ax-texto-claro); }

/* antes e depois */
.antes-depois{ display:grid; gap:16px; }
@media (min-width:860px){ .antes-depois{ grid-template-columns:1fr 1fr; gap:24px; } }
.coluna{ border-radius:var(--ax-raio-lg); padding:28px; }
.coluna h3{ display:flex; align-items:center; gap:10px; font:700 13px var(--ax-f-rotulo); letter-spacing:.22em; text-transform:uppercase; margin-bottom:12px; }
.coluna li{ display:flex; gap:12px; padding:14px 0; border-top:1px solid; }
.coluna li:first-child{ border-top:0; }
.coluna li .ic{ margin-top:3px; }
.col-hoje{ background:var(--ax-branco); border:1px solid var(--linha-clara); color:var(--ax-texto-escuro-2); }
.col-hoje h3{ color:var(--ax-texto-escuro); }
.col-hoje li{ border-color:var(--linha-clara); }
.col-hoje .ic{ color:var(--ax-erro); }
.col-axxis{ background:var(--ax-preto); color:var(--ax-texto-claro); box-shadow:var(--sombra-forte); }
.col-axxis h3{ color:var(--ax-ouro); }
.col-axxis li{ border-color:var(--ax-preto-3); }
.col-axxis .ic{ color:var(--ax-ouro); }
.frase-grande{ margin-top:56px; text-align:center; font:800 clamp(28px, 5vw, 48px)/1.1 var(--ax-f-display); letter-spacing:-.02em; }

/* passos */
.passos{ position:relative; display:grid; gap:28px; counter-reset:passo; }
.passos-linha{ position:absolute; left:23px; top:24px; bottom:24px; width:2px; background:color-mix(in srgb, var(--ax-ouro) 55%, transparent); transform-origin:50% 0; }
@media (min-width:1000px){
  .passos{ grid-template-columns:repeat(5,1fr); gap:24px; }
  .passos-linha{ left:24px; right:24px; top:23px; bottom:auto; width:auto; height:2px; transform-origin:0 50%; }
}
@keyframes ax-linha-y{ from{ transform:scaleY(0); } }
@keyframes ax-linha-x{ from{ transform:scaleX(0); } }
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .passos-linha{ animation:ax-linha-y linear both; animation-timeline:view(); animation-range:entry 20% cover 60%; }
    @media (min-width:1000px){ .passos-linha{ animation-name:ax-linha-x; } }
  }
}
.passo{ position:relative; padding-left:68px; }
@media (min-width:1000px){ .passo{ padding-left:0; padding-top:68px; } }
.passo-num{
  position:absolute; left:0; top:0; width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center; background:var(--ax-preto); border:1.5px solid var(--ax-ouro); color:var(--ax-ouro);
}
.passo small{ font:700 12px var(--ax-f-rotulo); letter-spacing:.22em; color:var(--ax-ouro); }
.passo .h3{ margin-top:4px; }
.passo p{ margin-top:8px; color:var(--ax-texto-claro-2); font-size:15px; }
.centro-cta{ margin-top:48px; display:flex; justify-content:center; }

/* modulos em destaque */
.modulo{ display:grid; gap:32px; align-items:center; padding-block:40px; border-top:1px solid var(--linha-clara); }
.modulo:first-of-type{ border-top:0; padding-top:0; }
@media (min-width:1000px){
  .modulo{ grid-template-columns:1fr 1.1fr; gap:64px; padding-block:64px; }
  .modulo.inverte .modulo-texto{ order:2; }
}
.modulo .h2{ font-size:clamp(26px, 4vw, 38px); }
.modulo-texto p{ margin-top:16px; color:var(--ax-texto-escuro-2); }
.provas{ margin-top:22px; display:grid; gap:10px; }
.provas li{ display:flex; gap:10px; align-items:flex-start; font-weight:500; }
.provas .ic{ color:var(--ax-ouro-escuro); margin-top:3px; }
.s-escura .provas .ic{ color:var(--ax-ouro); }
.selo-pdv{
  display:inline-flex; align-items:center; gap:10px; margin-top:20px;
  padding:6px 14px 6px 6px; border-radius:var(--ax-raio-pilula);
  background:var(--ax-pdv-fundo); color:var(--ax-branco);
  font:700 12px var(--ax-f-rotulo); letter-spacing:.18em; text-transform:uppercase;
}
.selo-pdv img{ width:30px; height:30px; border-radius:50%; }
.selo-pdv span{ color:var(--ax-pdv); }
.modulo-texto .selo-pdv{ margin-top:20px; color:var(--ax-branco); } /* vence o cinza de .modulo-texto p */

.modulos-mais{ margin-top:24px; }
.modulos-mais .card .rotulo{ font-size:11px; letter-spacing:.2em; }
.modulos-mais .card .rotulo::before{ display:none; }
.modulos-mais .card .provas{ margin-top:16px; font-size:15px; }
.modulos-mais .card .provas li{ font-weight:400; color:var(--ax-texto-escuro-2); }

/* modulo sem print (consignacao): cartao escuro com o fluxo em 3 passos */
.modulo-icone{
  border-radius:var(--ax-raio-lg); padding:28px; background:var(--ax-preto); color:var(--ax-texto-claro);
  box-shadow:var(--sombra-forte);
}
@media (min-width:640px){ .modulo-icone{ padding:36px; } }
.modulo-icone .icone-caixa{ width:60px; height:60px; border-radius:16px; background:color-mix(in srgb, var(--ax-ouro) 14%, transparent); color:var(--ax-ouro); }
.fluxo{ margin-top:24px; display:grid; gap:0; }
.fluxo li{ display:grid; gap:4px; padding:16px 0; border-top:1px solid var(--ax-preto-3); }
.fluxo li:first-child{ border-top:0; padding-top:0; }
.fluxo small{ font:700 12px var(--ax-f-rotulo); letter-spacing:.22em; text-transform:uppercase; color:var(--ax-ouro); }
.fluxo span{ color:var(--ax-texto-claro-2); }

/* Axxis Live em destaque */
.live{ border-top:1px solid var(--ax-preto-3); }
.live-pontos{ margin-bottom:48px; }
.live-pontos li{ padding-top:20px; border-top:1px solid var(--ax-preto-3); }
.live-pontos .h3{ margin-top:16px; }
.live-pontos p{ margin-top:8px; color:var(--ax-texto-claro-2); font-size:15px; }
.live-prints{ display:grid; gap:28px; }
@media (min-width:760px){
  .live-prints{ grid-template-columns:1fr 1fr; gap:28px 24px; align-items:start; }
  .live-principal{ grid-column:1/-1; }
}
.live-breve{ margin-top:32px; display:flex; gap:10px; align-items:flex-start; color:var(--ax-texto-claro-2); font-size:15px; }
.live-breve .ic{ color:var(--ax-ouro); margin-top:2px; }
.live .centro-cta{ margin-top:32px; }

/* lightbox dos prints (dialog nativo: Esc fecha sozinho) */
.lightbox{
  width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0;
  background:transparent; color:var(--ax-texto-claro); overflow:auto; overscroll-behavior:contain;
}
.lightbox[open]{ display:grid; grid-template-rows:auto 1fr auto; grid-template-columns:minmax(0,1fr); }
.lightbox::backdrop{ background:color-mix(in srgb, var(--ax-preto) 92%, transparent); }
.lightbox-topo{
  position:sticky; top:0; left:0; z-index:1; display:flex; justify-content:flex-end; padding:max(12px, env(safe-area-inset-top)) 12px 8px;
}
.lightbox-fechar{
  display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:0 18px; border-radius:var(--ax-raio-pilula); border:0; cursor:pointer;
  background:var(--ax-preto-2); color:var(--ax-texto-claro); box-shadow:0 0 0 1px var(--ax-preto-3); font-weight:600; font-size:14px;
}
.lightbox-fechar:hover{ box-shadow:0 0 0 1px var(--ax-ouro); }
.lightbox-palco{ display:grid; place-items:center; padding:0 16px; min-width:0; }
.lightbox-palco img{ width:auto; max-width:min(1568px, 100%); max-height:calc(100dvh - 150px); height:auto; border-radius:12px; box-shadow:var(--sombra-forte); background:var(--ax-branco); cursor:zoom-out; }
.lightbox-legenda{ padding:14px 16px max(16px, env(safe-area-inset-bottom)); text-align:center; font-size:14px; color:var(--ax-texto-claro-2); max-width:90ch; margin-inline:auto; }
.lightbox-dica{ display:none; }
/* celular: a tela vem em largura de leitura e a pessoa arrasta para os lados dentro do lightbox */
@media (max-width:767px){
  .lightbox-palco{ place-items:start; justify-content:start; overflow-x:auto; padding:0 12px; }
  .lightbox-palco img{ width:1100px; max-width:none; max-height:none; }
  .lightbox-dica{ display:block; }
}
@media (prefers-reduced-motion: no-preference){
  .lightbox[open]{ animation:ax-fade var(--ax-dur-2) var(--ax-curva-entrada); }
}
html:has(.lightbox[open]){ overflow:hidden; }

/* simulador */
.sim{ display:grid; gap:24px; }
@media (min-width:1000px){ .sim{ grid-template-columns:1.1fr 1fr; gap:32px; align-items:start; } }
.sim-campos{ display:grid; gap:20px; }
.sim-bloco{ padding:22px; border-radius:var(--ax-raio-lg); background:var(--ax-preto-2); border:1px solid var(--ax-preto-3); display:grid; gap:18px; }
.sim-bloco h3{ font:700 12px var(--ax-f-rotulo); letter-spacing:.22em; text-transform:uppercase; color:var(--ax-ouro); }
.campo-faixa label{ display:block; font-size:15px; margin-bottom:6px; }
.campo-faixa .linha{ display:flex; align-items:center; gap:14px; }
.campo-faixa input[type=number]{
  width:96px; flex:none; min-height:44px; padding:8px 10px; border-radius:10px;
  background:var(--ax-preto); border:1px solid var(--ax-preto-3); color:var(--ax-texto-claro); text-align:right; font-variant-numeric:tabular-nums;
}
input[type=range]{
  --p:50%; flex:1; min-width:0; appearance:none; -webkit-appearance:none; height:44px; background:transparent; cursor:pointer; touch-action:pan-y;
}
input[type=range]::-webkit-slider-runnable-track{ height:6px; border-radius:9px; background:linear-gradient(90deg, var(--ax-ouro) var(--p), var(--ax-preto-3) var(--p)); }
input[type=range]::-moz-range-track{ height:6px; border-radius:9px; background:linear-gradient(90deg, var(--ax-ouro) var(--p), var(--ax-preto-3) var(--p)); }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:26px; height:26px; margin-top:-10px; border-radius:50%; background:var(--ax-marfim); border:3px solid var(--ax-ouro); }
input[type=range]::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:var(--ax-marfim); border:3px solid var(--ax-ouro); }
input[type=range]:focus-visible{ outline:2px solid var(--ax-ouro-claro); outline-offset:2px; border-radius:9px; }
.sim-result{ display:grid; gap:14px; }
@media (min-width:1000px){ .sim-result{ position:sticky; top:calc(var(--menu-h) + 32px); } }
.res{ padding:22px; border-radius:var(--ax-raio-lg); background:var(--ax-preto-2); border:1px solid var(--ax-preto-3); }
.res small{ font:700 11px var(--ax-f-rotulo); letter-spacing:.22em; text-transform:uppercase; color:var(--ax-texto-claro-2); }
.res p{ margin-top:8px; font-size:17px; }
.res b{ font-family:var(--ax-f-display); font-weight:800; color:var(--ax-ouro-claro); font-variant-numeric:tabular-nums; }
.res .formula{ margin-top:10px; font-size:13px; color:var(--ax-texto-claro-2); }
.aviso-fixo{ display:flex; gap:12px; padding:18px; border-radius:var(--ax-raio-lg); border:1px dashed var(--ax-preto-3); font-size:14px; color:var(--ax-texto-claro-2); }
.aviso-fixo .ic{ color:var(--ax-ouro); margin-top:2px; }

/* comparativo */
.tabela-comp{ width:100%; border-collapse:separate; border-spacing:0; }
.tabela-comp caption{ text-align:left; }
.tabela-comp th,.tabela-comp td{ padding:16px 18px; text-align:left; vertical-align:middle; }
.tabela-comp thead th{ font:700 12px var(--ax-f-rotulo); letter-spacing:.16em; text-transform:uppercase; color:var(--ax-texto-escuro-2); border-bottom:1px solid var(--linha-clara); }
.tabela-comp tbody th{ font-weight:600; }
.tabela-comp tbody tr > *{ border-bottom:1px solid var(--linha-clara); }
.tabela-comp .ax{ background:var(--ax-preto); color:var(--ax-texto-claro); font-weight:600; }
.tabela-comp thead .ax{ color:var(--ax-ouro); border-radius:var(--ax-raio) var(--ax-raio) 0 0; border-bottom-color:var(--ax-preto-3); }
.tabela-comp tbody tr:last-child .ax{ border-radius:0 0 var(--ax-raio) var(--ax-raio); }
.tabela-comp tbody .ax{ border-bottom-color:var(--ax-preto-3); }
.tabela-comp .ax .ic{ display:inline-block; vertical-align:-4px; margin-right:6px; color:var(--ax-ouro); }
.tabela-comp td:not(.ax){ color:var(--ax-texto-escuro-2); }
@media (max-width:759px){
  .tabela-comp thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .tabela-comp,.tabela-comp tbody,.tabela-comp tr,.tabela-comp th,.tabela-comp td{ display:block; }
  .tabela-comp tr{ background:var(--ax-branco); border:1px solid var(--linha-clara); border-radius:var(--ax-raio-lg); padding:6px; margin-bottom:12px; }
  .tabela-comp tbody tr > *{ border-bottom:0; }
  .tabela-comp tbody th{ padding:12px 12px 8px; font-size:16px; }
  .tabela-comp td{ display:flex; justify-content:space-between; gap:12px; padding:9px 12px; font-size:15px; }
  .tabela-comp td::before{ content:attr(data-label); color:var(--ax-texto-escuro-2); font-weight:400; }
  .tabela-comp td.ax{ border-radius:var(--ax-raio) !important; margin-top:4px; }
  .tabela-comp td.ax::before{ color:var(--ax-texto-claro-2); }
}

/* depoimentos */
.dep{ display:flex; flex-direction:column; }
.dep blockquote{ margin-top:16px; font-size:17px; line-height:1.6; color:var(--ax-texto-claro); flex:1; }
.dep .aspas{ color:var(--ax-ouro); }
.dep figcaption{ margin-top:22px; display:flex; gap:12px; align-items:center; }
.avatar{ width:44px; height:44px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--ax-ouro-grad); color:var(--ax-preto); font:800 15px var(--ax-f-display); }
.dep figcaption b{ display:block; font-weight:600; }
.dep figcaption small{ color:var(--ax-texto-claro-2); font-size:14px; }
.selo-exemplo{ position:absolute; top:18px; right:18px; padding:3px 10px; border-radius:var(--ax-raio-pilula); border:1px solid var(--ax-preto-3); color:var(--ax-texto-claro-2); font:700 10px var(--ax-f-rotulo); letter-spacing:.18em; text-transform:uppercase; }

/* planos */
.ciclo{ display:inline-flex; padding:5px; border-radius:var(--ax-raio-pilula); background:var(--ax-branco); border:1px solid var(--linha-clara); margin:0 auto; position:relative; }
.ciclo-wrap{ display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:40px; }
.ciclo legend{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.ciclo{ border:1px solid var(--linha-clara); }
.ciclo label{ position:relative; }
.ciclo input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.ciclo span{ display:flex; align-items:center; gap:8px; min-height:44px; padding:10px 22px; border-radius:var(--ax-raio-pilula); font:700 14px var(--ax-f-display); color:var(--ax-texto-escuro-2); transition:background-color var(--ax-dur-1) var(--ax-curva-entrada); }
.ciclo input:checked + span{ background:var(--ax-preto); color:var(--ax-ouro-claro); }
.ciclo input:focus-visible + span{ outline:3px solid var(--ax-ouro-escuro); outline-offset:2px; }
.ciclo .tag{ font-size:11px; padding:2px 8px; border-radius:var(--ax-raio-pilula); background:var(--ax-ouro); color:var(--ax-preto); }
.ciclo-nota{ font-size:14px; color:var(--ax-texto-escuro-2); text-align:center; }

.planos{ display:grid; gap:16px; align-items:stretch; }
@media (min-width:700px){ .planos{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .planos{ grid-template-columns:repeat(4,1fr); } }
.plano{ display:flex; flex-direction:column; padding:28px 24px; }
.plano .rotulo::before{ display:none; }
.plano-desc{ margin-top:8px; font-size:15px; min-height:3.2em; }
.preco{ margin-top:22px; display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.preco .rs{ font:700 18px var(--ax-f-display); }
.preco .valor{ font:800 46px/1 var(--ax-f-display); letter-spacing:-.03em; font-variant-numeric:tabular-nums; display:inline-block; min-width:3ch; }
.preco .mes{ font-size:15px; color:var(--ax-texto-escuro-2); }
.preco.consulta .valor{ font-size:34px; }
.preco-sub{ margin-top:8px; font-size:13px; min-height:2.6em; color:var(--ax-texto-escuro-2); }
.economia{ display:inline-flex; align-items:center; gap:6px; margin-top:10px; padding:4px 10px; border-radius:var(--ax-raio-pilula); background:color-mix(in srgb, var(--ax-ok) 14%, var(--ax-branco)); color:color-mix(in srgb, var(--ax-ok) 60%, var(--ax-preto)); font-size:13px; font-weight:600; align-self:flex-start; }
.economia[hidden]{ display:none; }
.plano .provas{ margin-top:22px; padding-top:20px; border-top:1px solid var(--linha-clara); font-size:15px; flex:1; align-content:start; }
.plano .provas li{ font-weight:400; }
.plano .btn{ margin-top:26px; }
.plano.destaque{ background:var(--ax-preto); color:var(--ax-texto-claro); border-color:var(--ax-preto); box-shadow:var(--sombra-forte); }
.plano.destaque::after{ opacity:1; }
.plano.destaque .rotulo{ color:var(--ax-ouro); }
.plano.destaque .plano-desc,.plano.destaque .preco .mes,.plano.destaque .preco-sub{ color:var(--ax-texto-claro-2); }
.plano.destaque .provas{ border-color:var(--ax-preto-3); }
/* o preco e um <p> dentro do card: sem isto herda o cinza de .s-clara .card p */
.s-clara .card .preco{ color:var(--ax-texto-escuro); }
.s-clara .plano.destaque .preco{ color:var(--ax-texto-claro); }
.plano.destaque .provas li{ color:var(--ax-texto-claro); }
.plano.destaque .provas .ic{ color:var(--ax-ouro); }
.plano.destaque .economia{ background:color-mix(in srgb, var(--ax-ok) 22%, var(--ax-preto)); color:var(--ax-texto-claro); }
.selo-top{ position:absolute; z-index:2; top:-13px; left:24px; padding:5px 12px; border-radius:var(--ax-raio-pilula); background:var(--ax-ouro-grad); color:var(--ax-preto); font:700 11px var(--ax-f-rotulo); letter-spacing:.18em; text-transform:uppercase; }
@media (min-width:1100px){ .plano.destaque{ transform:translateY(-10px); } }

.fidelidade{ margin-top:40px; display:grid; gap:18px; padding:26px; border-radius:var(--ax-raio-lg); background:var(--ax-branco); border:1px solid var(--linha-clara); }
@media (min-width:860px){ .fidelidade{ grid-template-columns:auto 1fr 1fr; align-items:center; gap:28px; } }
.fidelidade h3{ font:700 18px var(--ax-f-display); }
.fidelidade p{ color:var(--ax-texto-escuro-2); font-size:15px; margin-top:4px; }

/* formulario */
.form-wrap{ display:grid; gap:40px; }
@media (min-width:1000px){ .form-wrap{ grid-template-columns:.85fr 1.15fr; gap:56px; align-items:start; } }
.form-lado .provas{ margin-top:26px; }
.form-lado .provas li{ color:var(--ax-texto-claro); font-weight:400; }
.form-card{ padding:24px; border-radius:var(--ax-raio-lg); background:var(--ax-preto-2); border:1px solid var(--ax-preto-3); }
@media (min-width:640px){ .form-card{ padding:36px; } }
.form-grade{ display:grid; gap:18px; }
@media (min-width:640px){ .form-grade{ grid-template-columns:1fr 1fr; } .form-grade .inteiro{ grid-column:1/-1; } }
.campo label,.campo legend{ display:block; font-size:14px; font-weight:600; margin-bottom:6px; color:var(--ax-texto-claro); padding:0; }
.campo .obr{ color:var(--ax-ouro); }
.campo .opc{ font-weight:400; color:var(--ax-texto-claro-2); }
.campo input[type=text],.campo input[type=tel],.campo input[type=email],.campo select,.campo textarea{
  width:100%; min-height:48px; padding:12px 14px; border-radius:12px;
  background:var(--ax-preto); border:1px solid var(--ax-preto-3); color:var(--ax-texto-claro);
  transition:border-color var(--ax-dur-1) var(--ax-curva-entrada);
}
.campo select{ appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--ax-ouro) 50%), linear-gradient(135deg, var(--ax-ouro) 50%, transparent 50%); background-position:calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size:5px 5px; background-repeat:no-repeat; padding-right:40px; }
.campo textarea{ min-height:96px; resize:vertical; }
.campo input:focus,.campo select:focus,.campo textarea:focus{ border-color:var(--ax-ouro); outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--ax-ouro) 30%, transparent); }
.campo [aria-invalid="true"]{ border-color:var(--ax-erro); }
.campo .erro{ display:block; margin-top:6px; font-size:13px; color:color-mix(in srgb, var(--ax-erro) 70%, var(--ax-branco)); min-height:0; }
.campo fieldset{ border:0; margin:0; padding:0; min-width:0; }
.opcoes{ display:flex; flex-wrap:wrap; gap:8px; }
.opcoes label{ position:relative; margin:0; font-weight:500; }
.opcoes input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.opcoes span{ display:inline-flex; align-items:center; min-height:44px; padding:8px 16px; border-radius:var(--ax-raio-pilula); border:1px solid var(--ax-preto-3); background:var(--ax-preto); font-size:14px; }
.opcoes input:checked + span{ border-color:var(--ax-ouro); background:color-mix(in srgb, var(--ax-ouro) 16%, var(--ax-preto)); color:var(--ax-ouro-claro); }
.opcoes input:focus-visible + span{ outline:3px solid var(--ax-ouro-claro); outline-offset:2px; }
.consent{ display:flex; gap:12px; align-items:flex-start; font-size:14px; color:var(--ax-texto-claro-2); }
.consent input{ width:22px; height:22px; flex:none; margin-top:1px; accent-color:var(--ax-ouro); }
.consent a{ color:var(--ax-ouro-claro); }
.mel{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-status{ margin-top:4px; font-size:14px; }
.form-status.erro{ color:color-mix(in srgb, var(--ax-erro) 70%, var(--ax-branco)); }
.form-ok{ text-align:center; padding:12px 0; }
.form-ok .icone-caixa{ margin:0 auto; width:60px; height:60px; border-radius:50%; }
.form-ok h3{ margin-top:18px; }
.form-ok p{ margin-top:10px; color:var(--ax-texto-claro-2); }
.form-ok .btn{ margin-top:24px; }
.btn[disabled]{ opacity:.6; cursor:progress; }

/* FAQ */
.faq{ max-width:860px; margin-inline:auto; display:grid; gap:10px; }
.faq details{ border-radius:var(--ax-raio-lg); background:var(--ax-branco); border:1px solid var(--linha-clara); }
.faq summary{ list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 22px; cursor:pointer; font:700 17px/1.35 var(--ax-f-display); border-radius:var(--ax-raio-lg); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .ic{ flex:none; color:var(--ax-ouro-escuro); transition:transform var(--ax-dur-2) var(--ax-curva-entrada); }
.faq details[open] summary .ic{ transform:rotate(180deg); }
.faq .resposta{ padding:0 22px 22px; color:var(--ax-texto-escuro-2); }
.faq details[open] .resposta{ animation:ax-fade var(--ax-dur-2) var(--ax-curva-entrada); }
@keyframes ax-fade{ from{ opacity:0; } }

/* guias em breve */
.guias{ border-top:1px solid var(--linha-clara); }
.guia{ opacity:1; }
.guia .rotulo{ font-size:11px; }
.guia .rotulo::before{ display:none; }
.em-breve{ display:inline-block; margin-top:16px; padding:3px 10px; border-radius:var(--ax-raio-pilula); background:var(--ax-marfim); border:1px solid var(--linha-clara); font:700 10px var(--ax-f-rotulo); letter-spacing:.18em; text-transform:uppercase; color:var(--ax-texto-escuro-2); }

/* fechamento */
.fecha{ background:var(--ax-ouro-grad); color:var(--ax-preto); text-align:center; overflow:hidden; }
.fecha .h2{ font-size:clamp(34px, 7vw, 68px); line-height:1.02; margin:0; }
.fecha p{ margin:20px auto 0; max-width:52ch; font-size:18px; }
.fecha .btn{ margin-top:32px; }
.fecha :focus-visible{ outline-color:var(--ax-preto); }

/* rodape */
.rodape{ background:var(--ax-preto); color:var(--ax-texto-claro-2); padding:64px 0 calc(28px + env(safe-area-inset-bottom)); border-top:1px solid var(--ax-preto-3); font-size:15px; }
.rodape-grade{ display:grid; gap:36px; }
@media (min-width:860px){ .rodape-grade{ grid-template-columns:1.4fr 1fr 1fr 1.2fr; } }
.rodape img{ height:32px; width:auto; }
.rodape h2{ font:700 12px var(--ax-f-rotulo); letter-spacing:.22em; text-transform:uppercase; color:var(--ax-texto-claro); margin-bottom:12px; }
.rodape li a,.rodape p a{ display:inline-flex; align-items:center; gap:8px; min-height:36px; text-decoration:none; }
.rodape a:hover{ color:var(--ax-texto-claro); text-decoration:underline; text-underline-offset:4px; }
.rodape p + p{ margin-top:8px; }
.rodape-fim{ margin-top:48px; padding-top:22px; border-top:1px solid var(--ax-preto-3); display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; font-size:13px; }
.rodape-fim a{ text-decoration:none; min-height:32px; display:inline-flex; align-items:center; }
.cadeado{
  margin-left:auto; width:32px; height:32px; display:grid; place-items:center; border-radius:8px;
  color:var(--ax-preto-3); /* quase igual ao fundo de proposito: acesso discreto */
}
.cadeado:hover,.cadeado:focus-visible{ color:var(--ax-texto-claro-2); }

/* whatsapp flutuante */
.wa-flutuante{
  position:fixed; z-index:40;
  right:max(14px, env(safe-area-inset-right)); bottom:max(14px, env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:10px; min-height:52px; padding:0 18px 0 14px; border-radius:var(--ax-raio-pilula);
  background:var(--ax-preto); color:var(--ax-texto-claro); text-decoration:none; font-weight:600; font-size:14px;
  box-shadow:0 0 0 1px var(--ax-ouro), var(--sombra-forte);
}
.wa-flutuante .ic{ color:var(--ax-ouro); }
@media (max-width:639px){ .wa-flutuante{ width:52px; padding:0; justify-content:center; } .wa-flutuante .txt{ display:none; } }
.mo .wa-flutuante{
  opacity:0; transform:translate3d(0,12px,0); pointer-events:none;
  transition:opacity var(--ax-dur-1) var(--ax-ease-saida), transform var(--ax-dur-1) var(--ax-ease-saida);
}
.mo .wa-flutuante.on{ opacity:1; transform:none; pointer-events:auto; transition-duration:var(--ax-dur-2); transition-timing-function:var(--ax-curva-entrada); }

/* ---------- entradas ao rolar e titulo que acende ---------- */
@keyframes ax-entra{ from{ opacity:0; transform:translate3d(0,var(--ax-dist-entrada),0); } to{ opacity:1; transform:none; } }
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .rv{
      animation:ax-entra var(--ax-curva-entrada) both;
      animation-timeline:view();
      animation-range:entry calc(5% + min(var(--i,0) * 4%, 20%)) cover calc(24% + min(var(--i,0) * 4%, 20%));
    }
  }
}
.mo .rv-io{
  opacity:0; transform:translate3d(0,var(--ax-dist-entrada),0);
  transition:opacity var(--ax-dur-3) var(--ax-curva-entrada), transform var(--ax-dur-3) var(--ax-curva-entrada);
  transition-delay:min(calc(var(--i,0) * var(--ax-stagger)), var(--ax-stagger-max));
}
.mo .rv-io.vis{ opacity:1; transform:none; }
@media (max-width:639px){ .rv,.rv-io{ --i:0 !important; } }

.acende .p{ display:inline; }
@keyframes ax-acende{ from{ opacity:var(--ax-acende-min); } to{ opacity:1; } }
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .acende .p{
      animation:ax-acende linear both; animation-timeline:view();
      animation-range:cover calc(12% + var(--i) * var(--passo, 1.6%)) cover calc(28% + var(--i) * var(--passo, 1.6%));
    }
  }
}
.mo .acende.io .p{ opacity:var(--ax-acende-min); transition:opacity var(--ax-dur-3) var(--ax-curva-entrada); transition-delay:calc(var(--i) * 40ms); }
.mo .acende.io.aceso .p{ opacity:1; }

/* ---------- afiliados ---------- */
.hero-afil{ padding-bottom:72px; }
.ganho-tabela{ width:100%; border-collapse:collapse; margin-top:8px; font-variant-numeric:tabular-nums; }
.ganho-tabela th,.ganho-tabela td{ padding:14px 12px; text-align:left; border-bottom:1px solid var(--ax-preto-3); }
.ganho-tabela thead th{ font:700 11px var(--ax-f-rotulo); letter-spacing:.18em; text-transform:uppercase; color:var(--ax-texto-claro-2); }
.ganho-tabela td.num,.ganho-tabela th.num{ text-align:right; white-space:nowrap; }
.ganho-tabela .ouro{ color:var(--ax-ouro-claro); font-weight:700; }
.ganho-destaque{ display:grid; gap:16px; }
@media (min-width:860px){ .ganho-destaque{ grid-template-columns:1fr 1.3fr; gap:32px; align-items:center; } }
.grande-pct{ font:800 clamp(72px, 14vw, 140px)/.9 var(--ax-f-display); letter-spacing:-.04em; }
.grande-rs{ font-size:.38em; letter-spacing:0; vertical-align:.95em; }
.exemplo-calc{ margin-top:20px; padding:18px 20px; border-radius:var(--ax-raio-lg); background:var(--ax-preto-2); border:1px solid var(--ax-preto-3); }
.exemplo-calc b{ color:var(--ax-ouro-claro); font-family:var(--ax-f-display); }
.regras li{ display:flex; gap:12px; padding:14px 0; border-top:1px solid var(--linha-clara); }
.regras li:first-child{ border-top:0; }
.regras .ic{ color:var(--ax-ouro-escuro); margin-top:3px; }
.integra{ display:flex; gap:14px; align-items:flex-start; }
.integra .h3{ margin-top:0; }
.integra p{ margin-top:6px; }

/* ---------- impressao e utilitarios ---------- */
[hidden]{ display:none !important; }

/* tabela de ganho no celular: 3 colunas, cabe em 375 px sem rolar */
@media (max-width:559px){
  .ganho-tabela th,.ganho-tabela td{ padding:12px 6px; font-size:14px; }
  .ganho-tabela thead th{ font-size:10px; letter-spacing:.1em; }
  .ganho-tabela .col-ano{ display:none; }
  .ganho-tabela th.num,.ganho-tabela td.num{ white-space:normal; }
  .ganho-tabela{ table-layout:fixed; }
  #ganho .card{ padding:18px 14px; }
}
.card .ouro-texto,p.ouro-texto{ color:transparent; }

/* assinatura Axxis Labs: ultima linha do rodape, discreta */
.feito-por{ margin-top:18px; font-size:12px; }
.feito-por a{ color:var(--ax-texto-claro-2); text-decoration:none; min-height:24px; display:inline-flex; align-items:center; }
.feito-por a:hover,.feito-por a:focus-visible{ color:var(--ax-texto-claro); text-decoration:underline; text-underline-offset:3px; }