/* =========================================================================
   Fiivi — landing page
   Fontes servidas localmente (fonts/). Zero dependências externas.
   ========================================================================= */

@font-face{
  font-family:"Relidux";
  src:url("../fonts/Relidux.otf") format("opentype");
  font-weight:400 800;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype-variations");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype-variations");
  font-weight:100 900;
  font-style:italic;
  font-display:swap;
}

/* =========================================================================
   1. Tokens
   ========================================================================= */
:root{
  /* --- Barra de anúncio: sempre escura, independente do tema ----------- */
  --bar-bg:#0D0C0B;
  --bar-text:#EFEEEC;
  --bar-text-hover:#FFFFFF;

  /* --- Superfícies e texto --------------------------------------------- */
  --bg:#ffffff;
  --bg-subtle:#F8F7F6;
  --bg-raised:#ffffff;
  --text:#161513;
  --text-muted:#585551;
  --text-faint:#77746F;
  --border:#EDEBE8;         /* linha fina e clara — hairline */
  --border-strong:#DEDBD7;

  /* --- PALETA DE MARCA -------------------------------------------------
     Uma rampa só, derivada do laranja base. Nada de laranja avulso no CSS:
     todo uso passa por um dos aliases semânticos abaixo. */
  --brand-50:#FFF4EF;          /* fundo suave                        */
  --brand-100:#FFDFCE;         /* borda suave                        */
  --brand-500:#FF4D00;         /* BASE — botão, ênfase, marca        */
  --brand-600:#DB4200;         /* hover                              */
  --brand-700:#B33600;         /* texto sobre fundo claro (5.9:1)    */

  /* Aliases semânticos — use SEMPRE estes, nunca a rampa direto */
  --accent:var(--brand-500);        /* preenchimento de ação          */
  --accent-hover:var(--brand-600);
  --accent-on:#ffffff;              /* texto sobre o acento (≥17px/700) */
  --accent-text:var(--brand-700);   /* acento como texto pequeno      */
  --accent-display:var(--brand-500);/* ênfase em texto grande (≥24px) */
  --accent-soft:var(--brand-50);
  --accent-soft-border:var(--brand-100);

  /* --- Semânticos: status de pagamento --------------------------------- */
  --pos:#0E7A4B;   --pos-soft:#E8F6EF;  --pos-border:#B6E0CB;   /* pago / aprovado */
  --neg:#C0271B;   --neg-soft:#FDEDEB;  --neg-border:#F3C6C1;   /* recusado */

  --focus:#1D4ED8;

  /* --- Tipografia ------------------------------------------------------- */
  --font-sans:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-logo:"Relidux", "Inter", system-ui, sans-serif;

  --fs-2xs:0.6875rem;  /* 11 */
  --fs-xs:0.75rem;     /* 12 */
  --fs-sm:0.8125rem;   /* 13 */
  --fs-base:0.875rem;  /* 14 */
  --fs-md:0.9375rem;   /* 15 */
  --fs-lg:1.0625rem;   /* 17 */
  --fs-xl:1.25rem;     /* 20 */
  --fs-2xl:1.5rem;     /* 24 */
  --fs-3xl:clamp(1.6rem, 1.2rem + 1.9vw, 2.25rem);   /* 26 → 36 */
  --fs-4xl:clamp(1.9rem, 1.3rem + 2.8vw, 2.75rem);   /* 30 → 44 */
  --fs-5xl:clamp(2.25rem, 1.3rem + 4.2vw, 3.75rem);  /* 36 → 60 */

  --lh-tight:1.08;
  --lh-snug:1.25;
  --lh-normal:1.55;
  --lh-relaxed:1.65;

  --measure:34em;      /* medida de leitura confortável */

  /* --- Ritmo vertical (base 4px) --------------------------------------- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;
  --section-y:clamp(56px, 7vw, 104px);

  /* --- RAIO: três papéis, não uma escala solta -------------------------
     control = tudo que se clica ou digita | card = todo contêiner
     pill    = badge, tag, chip, status */
  --r-control:8px;
  --r-card:12px;
  --r-pill:999px;

  /* Botões têm sua própria escala de raio, mais solta que a de controles —
     dá ao CTA uma personalidade convidativa, quase de badge, sem confundir
     com os cantos mais contidos de inputs e cards. */
  --r-btn-sm:9px;
  --r-btn:13px;
  --r-btn-lg:999px;

  /* --- PADDING DE CONTÊINER: três tamanhos, com regra ------------------
     tight = card pequeno dentro de outro | card = card em grid
     panel = painel grande de seção */
  --pad-tight:var(--sp-4);   /* 16 */
  --pad-card:var(--sp-5);    /* 20 */
  --pad-panel:var(--sp-6);   /* 24 */

  /* --- PADDING DE PÍLULA: três densidades, mesma proporção 12:5 ---------
     lg = badge/eyebrow isolado | md = chip/status repetido | sm = tag/badge denso */
  --pad-pill-lg:5px 12px;
  --pad-pill-md:3px 10px;
  --pad-pill-sm:2px 9px;

  /* --- Tamanho do wordmark: fora da escala de texto de corpo,
     é a logo (Relidux), não um heading — mas fixo em token pra
     cabeçalho e rodapé nunca divergirem por acidente. */
  --fs-logo:1.4rem;
  --fs-logo-sm:1.2rem;

  /* Malha de pontos — fundo do hero */
  --dot:#DCD9D5;
  --dot-size:22px;

  --maxw:1160px;
}

/* Painéis escuros: redefinem os mesmos tokens semânticos,
   então os componentes internos funcionam sem variantes extras. */
.panel-dark{
  --bg:#0D0C0B;
  --bg-subtle:#171512;
  --bg-raised:#1C1A17;
  --text:#F5F3F0;
  --text-muted:#B3AEA7;
  --text-faint:#94908A;
  --border:#2C2926;
  --border-strong:#413D39;
  --brand-50:#2B1610;   --brand-100:#4C2619;
  --brand-500:#FF6A45;  --brand-600:#FF8163;  --brand-700:#FF9D7E;
  --accent-on:#1C0A05;         /* sobre o coral claro, texto escuro (6.6:1) */
  --pos:#4FDE9B; --pos-soft:#0F2A1E; --pos-border:#1E5540;
  --neg:#FF8E7E; --neg-soft:#2C1512; --neg-border:#5A2822;
  --focus:#8FBAFF;
  background:var(--bg);
  color:var(--text);
}

/* =========================================================================
   2. Reset e base
   ========================================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:80px; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:var(--fs-md);
  line-height:var(--lh-normal);
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
h1,h2,h3,h4{ margin:0; font-weight:650; line-height:var(--lh-snug); letter-spacing:-0.015em; }
p{ margin:0; }
ul{ margin:0; padding:0; }

/* Inter tem eixo óptico (opsz): usamos o corte "display" nos títulos grandes
   e o corte "text" no corpo. É o motivo principal para manter a família. */
h1{ font-variation-settings:"opsz" 32; letter-spacing:-0.03em; line-height:var(--lh-tight); }
h2{ font-variation-settings:"opsz" 28; letter-spacing:-0.022em; }

::selection{ background:var(--accent); color:var(--accent-on); }
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:2px; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

@keyframes pulseNum{ 0%{ opacity:0.45; } 100%{ opacity:1; } }
@keyframes fadeSlide{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }

/* =========================================================================
   3. Utilitários de layout
   ========================================================================= */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--sp-6); }
.section{ padding-block:var(--section-y); }
.section-band{ background:var(--bg-subtle); border-block:1.5px dotted var(--border-strong); }
.tabular{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* Link "pular para o conteúdo": invisível até receber foco */
a.sr-only:focus{
  position:fixed; top:12px; left:12px; z-index:100;
  width:auto; height:auto; margin:0; clip:auto; overflow:visible;
  padding:10px 16px; border-radius:var(--r-control);
  background:var(--accent); color:var(--accent-on); font-weight:600;
}

.eyebrow{
  display:inline-block; font-size:var(--fs-2xs); font-weight:600;
  letter-spacing:0.09em; text-transform:uppercase; color:var(--accent-text);
  margin-bottom:var(--sp-3);
}
.eyebrow-badge{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  padding:var(--pad-pill-lg); border-radius:var(--r-pill);
  background:var(--accent-soft); border:1px solid var(--accent-soft-border);
  color:var(--accent-text); font-size:var(--fs-2xs); font-weight:600;
  letter-spacing:0.07em; text-transform:uppercase; margin-bottom:var(--sp-5);
}

.section-head{ max-width:40rem; margin:0 auto var(--sp-12); text-align:center; }
.section-head h2{ font-size:var(--fs-3xl); margin-block:var(--sp-2) var(--sp-3); text-wrap:balance; }
.section-head p{ font-size:var(--fs-lg); color:var(--text-muted); line-height:var(--lh-relaxed); text-wrap:pretty; }
.section-head em{ font-style:normal; color:var(--accent-display); }

/* =========================================================================
   4. Botões — uma forma, duas hierarquias, três tamanhos
   ========================================================================= */
.btn{
  --btn-h:44px; --btn-px:var(--sp-5); --btn-fs:var(--fs-md); --btn-r:var(--r-btn);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-height:var(--btn-h); padding-inline:var(--btn-px);
  /* peso 700 em todo botão: branco sobre o coral só é confortável em bold */
  font-family:var(--font-sans); font-size:var(--btn-fs); font-weight:700;
  letter-spacing:-0.005em; line-height:var(--lh-tight); text-align:center;
  border:1px solid transparent; border-radius:var(--btn-r);
  cursor:pointer; white-space:nowrap;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease,
             transform .1s ease, box-shadow .2s ease;
}
.btn:active{ transform:translateY(1px); }

/* Anel pontilhado que só aparece ao convidar o clique — o mesmo traço
   dos ícones de linha, agora como um "vem por aqui" nos botões. */
.btn::after{
  content:""; position:absolute; inset:-5px; border-radius:calc(var(--btn-r) + 4px);
  border:1.5px dotted transparent; opacity:0;
  transition:opacity .2s ease, inset .2s ease;
  pointer-events:none;
}
.btn:hover::after{ opacity:1; inset:-4px; }
.btn-lg::after{ border-radius:var(--r-btn-lg); }

.btn-primary{
  background:var(--accent); border-color:var(--accent); color:var(--accent-on);
  box-shadow:0 1px 2px rgba(13,12,11,.06), 0 8px 20px -10px color-mix(in srgb, var(--accent) 65%, transparent);
}
.btn-primary::after{ border-color:var(--accent); }
.btn-primary:hover{
  background:var(--accent-hover); border-color:var(--accent-hover);
  box-shadow:0 2px 6px rgba(13,12,11,.08), 0 12px 26px -10px color-mix(in srgb, var(--accent) 70%, transparent);
}

.btn-secondary{ background:var(--bg-raised); border-color:var(--border-strong); color:var(--text); }
.btn-secondary:hover{ background:var(--bg-subtle); border-color:var(--text-faint); }
.btn-secondary::after{ border-color:var(--border-strong); }

.btn-sm{ --btn-h:36px; --btn-px:var(--sp-4); --btn-fs:var(--fs-base); --btn-r:var(--r-btn-sm); }
.btn-lg{ --btn-h:52px; --btn-px:var(--sp-7,28px); --btn-fs:1.125rem; --btn-r:var(--r-btn-lg); letter-spacing:-0.008em; }
.btn-block{ width:100%; }

.cta-group{ display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center; }
.cta-note{ font-size:var(--fs-sm); color:var(--text-faint); }

.link-plain{ font-size:var(--fs-base); color:var(--text-muted); transition:color .15s ease; }
.link-plain:hover{ color:var(--text); }

/* =========================================================================
   5. Barra de anúncio + cabeçalho
   ========================================================================= */
.announce{
  background:var(--bar-bg); color:var(--bar-text);
  text-align:center; padding:var(--sp-2) var(--sp-4);
  font-size:var(--fs-sm); line-height:1.4;
}
.announce a{
  color:var(--brand-500); font-weight:600; margin-left:var(--sp-2);
  text-decoration:underline; text-underline-offset:3px;
}
.announce a:hover{ color:var(--bar-text-hover); }

.site-header{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.site-header .wrap{
  display:flex; align-items:center; gap:var(--sp-6);
  padding-block:var(--sp-3);
}
.logo{
  font-family:var(--font-logo); font-weight:700; font-size:var(--fs-logo);
  letter-spacing:-0.01em; white-space:nowrap; color:var(--text);
}
.site-nav{ display:flex; gap:var(--sp-6); margin-left:var(--sp-4); flex:1; }
.header-actions{ display:flex; align-items:center; gap:var(--sp-3); }
.nav-cta{ display:none; }
@media (min-width:900px){ .nav-cta{ display:inline-flex; } }

/* =========================================================================
   6. Hero
   ========================================================================= */
.hero{
  position:relative; isolation:isolate;
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(40px, 6vw, 88px) var(--sp-6) clamp(48px, 6vw, 80px);
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(32px, 5vw, 72px);
  align-items:center;
}
/* Malha de pontos sangrando de borda a borda, desvanecendo para baixo
   e para as laterais — dá textura sem competir com o texto. */
.hero::before{
  content:""; position:absolute; z-index:-1; top:0; bottom:0;
  left:50%; width:100vw; transform:translateX(-50%);
  background-image:radial-gradient(circle, var(--dot) 1px, transparent 1px);
  background-size:var(--dot-size) var(--dot-size);
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 78%);
  mask-image:radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 78%);
  pointer-events:none;
}
.hero h1{ font-size:var(--fs-5xl); font-weight:700; margin-bottom:var(--sp-5); text-wrap:balance; }
.hero h1 em{ font-style:normal; color:var(--accent-display); }
.hero .lede{
  font-size:var(--fs-xl); line-height:var(--lh-relaxed); color:var(--text-muted);
  max-width:var(--measure); margin-bottom:var(--sp-6); text-wrap:pretty;
}
.hero-form{
  display:flex; gap:var(--sp-3); flex-wrap:wrap; align-items:center;
  margin-bottom:var(--sp-4);
}

.hero-reassure{
  display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-5);
  font-size:var(--fs-sm); color:var(--text-muted); margin-bottom:var(--sp-6);
}
.hero-reassure li{ display:flex; align-items:center; gap:var(--sp-2); list-style:none; }
.tick{ color:var(--pos); font-weight:700; flex:none; }

/* min-width:0 é obrigatório: sem ele o item de grid assume a largura
   intrínseca da imagem (520px) e estoura o layout no mobile. */
.hero-art{ position:relative; min-width:0; }
/* Sem moldura: a ilustração é traço sobre transparente e respira solta
   no branco da página. Só os cartões flutuantes têm superfície própria. */
.plate{
  display:flex; align-items:center; justify-content:center;
  min-width:0; min-height:320px;
}
.plate img{ width:100%; max-width:100%; height:auto; max-height:400px; object-fit:contain; }

/* Em telas largas a arte sangra um pouco para fora da coluna — reforça
   a sensação de "fora do quadro" sem empurrar o texto. */
@media (min-width:1100px){
  .plate{ margin-right:calc(var(--sp-10) * -1); }
  .plate img{ max-height:440px; }
}
.float-card{
  position:absolute; background:var(--bg-raised); border:1px solid var(--border);
  border-radius:var(--r-card); padding:var(--pad-tight);
}
.float-card--balance{ left:-20px; bottom:-24px; width:212px; }
.float-card--nfse{ right:-16px; top:16px; width:206px; padding:var(--sp-3) var(--sp-4); animation:fadeSlide .6s ease; }
.float-label{
  font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:0.06em;
  color:var(--text-faint); margin-bottom:2px;
}
.float-value{ font-size:var(--fs-2xl); font-weight:650; letter-spacing:-0.02em; }
.float-sub{ font-size:var(--fs-2xs); color:var(--text-muted); margin-top:4px; }
.float-value--pulse{ font-size:var(--fs-xl); color:var(--pos); animation:pulseNum 1.4s ease infinite alternate; }

/* =========================================================================
   8. Como funciona
   ========================================================================= */
.how{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:var(--sp-8); align-items:start; }
.step-list{ display:flex; flex-direction:column; gap:var(--sp-2); }
.step-tab{
  width:100%; text-align:left; background:transparent;
  border:1px solid var(--border); border-radius:var(--r-card);
  padding:var(--pad-card); cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
.step-tab:hover{ border-color:var(--border-strong); }
.step-tab.is-active{ border-color:var(--accent); background:var(--accent-soft); }
.step-title{ display:flex; align-items:center; gap:var(--sp-3); font-size:var(--fs-md); font-weight:650; }
.step-title span{ font-variant-numeric:tabular-nums; color:var(--text-faint); font-weight:600; }
.step-tab.is-active .step-title{ color:var(--accent-text); }
.step-tab.is-active .step-title span{ color:var(--accent-text); }
.step-desc{ display:block; font-size:var(--fs-sm); color:var(--text-muted); margin-top:var(--sp-1); line-height:var(--lh-normal); }
.step-tab.is-active .step-desc{ color:var(--accent-text); opacity:.85; }

.how-panel{
  border:1px solid var(--border); border-radius:var(--r-card);
  padding:var(--pad-panel); background:var(--bg-subtle); min-height:330px;
}
.step-pane{ display:none; animation:fadeSlide .35s ease; }
.step-pane.is-active{ display:block; }
.chip-row{ display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-bottom:var(--sp-5); }
.chip{
  font-size:var(--fs-2xs); font-weight:500; color:var(--text-muted);
  border:1px solid var(--border-strong); border-radius:var(--r-pill); padding:var(--pad-pill-md);
  background:var(--bg-raised);
}

.mock-card{
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:var(--r-card); padding:var(--pad-card); max-width:360px;
}
.mock-card h3{ font-size:var(--fs-lg); margin-bottom:var(--sp-4); }
.field-label{ display:block; font-size:var(--fs-xs); font-weight:500; color:var(--text-muted); margin-bottom:5px; }
.mock-input{
  width:100%; min-height:40px; padding:8px 12px; font:inherit; font-size:var(--fs-base);
  color:var(--text); background:var(--bg); border:1px solid var(--border-strong);
  border-radius:var(--r-control); margin-bottom:var(--sp-4);
}
.mock-input::placeholder{ color:var(--text-faint); }
.mock-input:focus{ outline:2px solid var(--focus); outline-offset:1px; border-color:var(--focus); }

.gateway-hint{ font-size:var(--fs-base); color:var(--text-muted); margin-bottom:var(--sp-3); }
.gateway-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); max-width:400px; }
.gateway{
  background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--r-control);
  padding:var(--sp-3) var(--sp-4); font-size:var(--fs-base); font-weight:600;
}
.gateway.is-connected{
  border-color:var(--pos-border); background:var(--pos-soft);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2);
}
.gateway.is-connected .check{ color:var(--pos); font-size:var(--fs-xs); font-weight:600; }

.mini-card{
  background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--r-card);
  padding:var(--pad-tight); max-width:400px;
}
.mini-card + .mini-card{ margin-top:var(--sp-3); }
.tiny{ font-size:var(--fs-xs); color:var(--text-faint); }
.big{ font-size:var(--fs-2xl); font-weight:650; letter-spacing:-0.02em; }
.big.pos{ color:var(--pos); }
.big.accent{ color:var(--accent-text); }
.link-card .url{ font-size:var(--fs-md); font-weight:600; word-break:break-all; margin-top:2px; }
.stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); max-width:420px; }
.stat-box{
  background:var(--bg-raised); border:1px solid var(--border);
  border-radius:var(--r-card); padding:var(--pad-tight);
}
.stat-box .big{ font-size:var(--fs-xl); }
.step4-note{ font-size:var(--fs-xs); color:var(--text-faint); margin-top:var(--sp-4); }

/* =========================================================================
   9. Recursos
   ========================================================================= */
.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); }
.feature-card{
  display:flex; flex-direction:column; gap:var(--sp-2);
  padding:var(--pad-card); border-radius:var(--r-card);
  border:1px solid var(--border); background:var(--bg-raised);
  transition:border-color .2s ease, background-color .2s ease;
}
.feature-card:hover{ border-color:var(--border-strong); background:var(--bg-subtle); }
.feature-card.is-highlight{ border-color:var(--accent-soft-border); background:var(--accent-soft); }
.feature-icon{ width:40px; height:40px; object-fit:contain; margin-bottom:var(--sp-2); }
.feature-card h3{ font-size:var(--fs-lg); }
.feature-card p{ font-size:var(--fs-base); color:var(--text-muted); line-height:var(--lh-relaxed); }
.feature-card.is-highlight h3{ color:var(--accent-text); }
.feature-card.is-highlight p{ color:var(--accent-text); opacity:.9; }
.tag-row{ display:flex; gap:6px; flex-wrap:wrap; margin-top:auto; padding-top:var(--sp-3); }
.tag{
  font-size:var(--fs-2xs); color:var(--text-muted);
  border:1px solid var(--border-strong); border-radius:var(--r-pill); padding:var(--pad-pill-sm);
}

/* Faixa de segurança do checkout — fecha a seção de recursos */
.security{
  margin-top:var(--sp-4); padding:var(--pad-panel);
  border:1px solid var(--border); border-radius:var(--r-card);
  background:var(--bg-subtle);
}
.security-title{ font-size:var(--fs-lg); margin-bottom:var(--sp-5); }
.security-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-6); }
.security-list li{ display:flex; gap:var(--sp-3); align-items:flex-start; list-style:none; }
.security-icon{ width:22px; height:22px; flex:none; margin-top:1px; color:var(--accent); }
.security-list strong{ display:block; font-size:var(--fs-md); font-weight:650; margin-bottom:2px; }
.security-list p{ font-size:var(--fs-base); color:var(--text-muted); line-height:var(--lh-relaxed); }

/* =========================================================================
   10. Retentativa inteligente (painel escuro)
   ========================================================================= */
.retry{
  padding-block:clamp(56px, 6vw, 88px); position:relative; overflow:hidden;
  border-block:1.5px dotted var(--border-strong);
}
.retry .wrap{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-12);
  align-items:center; position:relative; z-index:1;
}
.retry h2{ font-size:var(--fs-4xl); margin-block:var(--sp-2) var(--sp-4); text-wrap:balance; }
.retry h2 em{ font-style:normal; color:var(--accent-display); }
.retry p{ font-size:var(--fs-lg); line-height:var(--lh-relaxed); color:var(--text-muted); max-width:var(--measure); }
.retry .eyebrow{ color:var(--accent-text); }
.retry-deco{
  position:absolute; right:-40px; bottom:-40px; width:280px;
  opacity:.06; filter:invert(1); pointer-events:none;
}
.retry-panel{
  border:1px solid var(--border-strong); border-radius:var(--r-card);
  padding:var(--pad-panel); background:var(--bg-raised);
}
.retry-flow{ display:flex; align-items:center; gap:var(--sp-4); margin-bottom:var(--sp-5); }
.retry-box{
  flex:1; padding:var(--pad-tight); border-radius:var(--r-control); text-align:center;
  border:1px solid var(--border-strong); color:var(--text-muted);
  transition:background .3s ease, border-color .3s ease, color .3s ease;
}
.retry-box.is-declined{ border-color:var(--neg-border); background:var(--neg-soft); color:var(--neg); }
.retry-box.is-approved{ border-color:var(--pos-border); background:var(--pos-soft); color:var(--pos); }
.retry-box .name{ display:flex; align-items:center; justify-content:center; margin-bottom:6px; }
.retry-box .status{ font-size:var(--fs-xs); font-weight:600; }

/* Logo de gateway como máscara: o arquivo original é colorido, mas aqui
   vira silhueta sólida na cor do texto — mesma técnica do ícone de
   integração no rodapé, agora aplicada a marcas reais. */
.brand-logo{
  display:inline-block; height:18px; background-color:var(--text);
  -webkit-mask-position:center; -webkit-mask-repeat:no-repeat; -webkit-mask-size:contain;
  mask-position:center; mask-repeat:no-repeat; mask-size:contain;
}
.brand-logo--cielo{
  width:52px;
  -webkit-mask-image:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIGJ5IE1hcnN1cGlsYW1pIC0tPgo8c3ZnCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzQ0NyIKICAgdmVyc2lvbj0iMS4xIgogICB3aWR0aD0iMTAyNCIKICAgaGVpZ2h0PSIzNzAiCiAgIHZpZXdCb3g9Ii0wLjk2MDA0NDk3IC0wLjk2MDA0NDk3IDkzLjkyMzkxMTk0IDMzLjkyMTU4ODk0Ij4KICA8ZGVmcwogICAgIGlkPSJkZWZzNDQ0IiAvPgogIDxwYXRoCiAgICAgaWQ9InBhdGgzODMiCiAgICAgZD0ibSA2MS42OTUzMzksMC42MTEzMyBhIDIuMTgsMi4xOCAwIDAgMCAtMS41NDEwMiwwLjY0MDYyIGMgLTAuNCwwLjQgLTAuNjQwNjIsMC45NjQ5MiAtMC42NDA2MiwxLjU0NDkyIHYgMjYuMzczMDUgYyAwLDAuNTggMC4yMzA2MiwxLjEzNDkyIDAuNjQwNjIsMS41NDQ5MiBhIDIuMTgsMi4xOCAwIDAgMCAzLjA4Mzk5LDAgYyAwLjQsLTAuNCAwLjY0MDYyLC0wLjk2NDkyIDAuNjQwNjIsLTEuNTQ0OTIgViAyLjc5Njg3IGMgMCwtMC41OCAtMC4yMzA2MiwtMS4xMzQ5MiAtMC42NDA2MiwtMS41NDQ5MiBhIDIuMTgsMi4xOCAwIDAgMCAtMS41NDI5NywtMC42NDA2MiB6IG0gLTQ4LjkzNzUsNi41IGMgLTIuMDIwNzcsLTAuMDU0IC00LjAyODUzMDEsMC4zODQ5OCAtNS44NDc2NjAxLDEuMjg3MTEgLTIuMDc5LDEuMDMxIC0zLjgyNjgyLDIuNjI3NTYgLTUuMDQ4ODIsNC42MDE1NiAtMS4yMjIwMDAwMiwxLjk3NCAtMS44NjYzMzAwMiw0LjI1MjIyIC0xLjg2MTMzMDAxOTk5MSw2LjU3NDIyIDAuMDA1LDIuMzIyIDAuNjU2NzU5OTk5OTkxLDQuNTk4MzYgMS44ODQ3NjAwMTk5OTEsNi41NjgzNiAxLjIyOCwxLjk3IDIuOTgyNDYsMy41NTcwNyA1LjA2NDQ2LDQuNTgwMDcgMi4wODIsMS4wMjMgNC40MDk3OTAxLDEuNDQzODkgNi43MTY3OTAxLDEuMjEyODkgYSAxMi40MiwxMi40MiAwIDAgMCA2LjM0Mzc1LC0yLjUyMTQ4IDIuMTQsMi4xNCAwIDAgMCAwLjgxODM2LC0xLjY0MDYyIDIuMTQsMi4xNCAwIDAgMCAtMC43NTM5LC0xLjY3MzgzIGMgLTAuMzc2LC0wLjMyNiAtMC44NTE2MSwtMC41MTMyNSAtMS4zNDk2MSwtMC41MzEyNSAtMC40OTgsLTAuMDE4IC0wLjk4NDgyLDAuMTM1NTkgLTEuMzgyODIsMC40MzM1OSAtMS4yLDAuOTE4IC0yLjYzMzcxLDEuNDgwOTUgLTQuMTM2NzEsMS42MjY5NSAtMS41MDMsMC4xNDYgLTMuMDE2MTUsLTAuMTMwNzggLTQuMzY5MTQwMSwtMC44MDA3OCAtMS4zNTMwMSwtMC42NyAtMi40OTM5NywtMS43MDMzMyAtMy4yOTI5NywtMi45ODYzMyBhIDguMTIsOC4xMiAwIDAgMSAtMC4wMTM3LC04LjU1NjY0IDguMTEsOC4xMSAwIDAgMSAzLjI4MzIxLC0yLjk5ODA0IGMgMS4zNTIwMDAxLC0wLjY3MyAyLjg2NDE4MDEsLTAuOTUzNSA0LjM2NzE5MDEsLTAuODEyNSAxLjUwMywwLjE0MSAyLjkzNzYyLDAuNzAwMjMgNC4xNDA2MiwxLjYxNTIzIGEgMi4xNywyLjE3IDAgMCAwIDIuNzMwNDcsLTAuMDY2NCBjIDAuMjQ1LC0wLjIxIDAuNDQwMzEsLTAuNDcwNjcgMC41NzAzMSwtMC43NjM2NyAwLjEzLC0wLjI5MyAwLjE5NTQ1LC0wLjYxMzU1IDAuMTg5NDUsLTAuOTM1NTUgLTAuMDA2LC0wLjMyMiAtMC4wODY1LC0wLjYzNjgzIC0wLjIzMDQ2LC0wLjkyMzgzIC0wLjE0NCwtMC4yODcgLTAuMzUwNTIsLTAuNTQwMzIgLTAuNjAzNTIsLTAuNzM2MzIgYSAxMi40MiwxMi40MiAwIDAgMCAtNi4zNTM1MiwtMi41IGMgLTAuMjg4NzUsLTAuMDI4IC0wLjU3NjU1LC0wLjA0NSAtMC44NjUyMywtMC4wNTI3IHogbSAzMS4xNTQzLDAgYyAtMC4zNDc2NCwwLjAwNiAtMC42OTkxMSwwLjAyNjMgLTEuMDUyNzQsMC4wNjI1IGEgMTIuNDIsMTIuNDIgMCAwIDAgLTUuMzYxMzMsMS44NzMwNCAxMi40NCwxMi40NCAwIDAgMCAtMy45NzA3LDQuMDYyNSAxMi40NiwxMi40NiAwIDAgMCAtMS43NSw1LjQwODIxIGMgLTAuMTYsMS45MTQgMC4xMjUwMywzLjg0MSAwLjgzMjAzLDUuNjI1IGEgMTIuNDUsMTIuNDUgMCAwIDAgMy4yNDQxNCw0LjY2NjAxIDEyLjQ0LDEyLjQ0IDAgMCAwIDQuOTc2NTcsMi43MzYzMyBjIDEuODQ3LDAuNTE2IDMuODAwODIsMC41OTUzNyA1LjY3MzgyLDAuMjM0MzcgMS44NzMsLTAuMzYxIDMuNjU2NiwtMS4xNTI0NSA1LjE4MzYsLTIuMzE0NDUgYSAyLjE3LDIuMTcgMCAwIDAgMC42MTMyOCwtMC43MzgyOCBjIDAuMTQ3LC0wLjI4OCAwLjIyODMzLC0wLjYwNTY5IDAuMjM2MzMsLTAuOTI5NjkgYSAyLjE3LDIuMTcgMCAwIDAgLTIuMTAzNTIsLTIuMjMwNDcgMi4xNiwyLjE2IDAgMCAwIC0xLjM3MTA5LDAuNDM1NTUgOCw4IDAgMCAxIC01LjI5NDkyLDEuNjU4MiBjIC0xLjU1LC0wLjA4IC0zLjA0NDgzLC0wLjYwMzg2IC00LjI5ODgzLC0xLjUwNTg2IGEgOC4xNyw4LjE3IDAgMCAxIC0yLjgzMDA4LC0zLjU4NTkzIDAuODUsMC44NSAwIDAgMSAwLjM4MjgxLC0xLjA3MDMyIDAuODQsMC44NCAwIDAgMSAwLjM5ODQ0LC0wLjA5OTYgaCAxNS4xNDQ1MyBjIDAuNDg0LDAuMDAyIDAuOTY0MTEsLTAuMDkzMyAxLjQxMjExLC0wLjI3NzM0IDAuNDQ4LC0wLjE4NCAwLjg1NjIyLC0wLjQ1NDg3IDEuMTk5MjIsLTAuNzk2ODcgMC4zNDMsLTAuMzQyIDAuNjE0NzgsLTAuNzQ3MzIgMC44MDA3OCwtMS4xOTUzMiBhIDMuNjksMy42OSAwIDAgMCAwLjI4MzIsLTEuNDEyMTEgYyAtMC4wMywtMS4wNCAtMC4yNTk4MywtMi4wNjU1MyAtMC42NzM4MiwtMy4wMTk1MyBsIC0wLjAxMzcsLTAuMDA0IGMgLTEuOTY1LC00LjQ0OTM3IC02LjQ0NTYyLC03LjY3NDA3IC0xMS42NjAxNiwtNy41ODIwMyB6IG0gLTE3LjYzODY3LDAuNjEzMjggYyAtMS4yMDMsMCAtMi4xNzk2OSwwLjk3NzU5IC0yLjE3OTY5LDIuMTgzNTkgdiAxOS4yNTk3NyBjIDAsMS4yMDYgMC45NzY2OSwyLjE4MzU5IDIuMTc5NjksMi4xODM1OSAxLjIwMjk5LDAgMi4xNzk2OCwtMC45Nzc1OSAyLjE3OTY4LC0yLjE4MzU5IFYgOS45MDgyIGMgMCwtMS4yMDYgLTAuOTc2NjksLTIuMTgzNTkgLTIuMTc5NjgsLTIuMTgzNTkgeiBtIDQzLjg3MzA0LDMuNjg5NDUgYSAxMi40MSwxMi40MSAwIDAgMCAtMi4zODg2Nyw0LjIzODI4IDEyLjQ2LDEyLjQ2IDAgMCAwIC0wLjU4NTk0LDQuODMwMDggYyAwLjEyNCwxLjYzMyAwLjU3MDc4LDMuMjI2NSAxLjMwMDc4LDQuNjg3NSBhIDEyLjQ0LDEyLjQ0IDAgMCAwIDMuMDAzOTEsMy44MjQyMiBjIDEuMjQzLDEuMDY1IDIuNjg0MjMsMS44NzM4NiA0LjI0MDIzLDIuMzgwODYgYSAxMi40LDEyLjQgMCAwIDAgNC44MjgxMywwLjU3MDMxIGMgMS42MywtMC4xMyAzLjIxOTc4LC0wLjU4MjA4IDQuNjc1NzgsLTEuMzMwMDggYSAxMi40MywxMi40MyAwIDAgMCAzLjgwODU5LC0zLjAyMzQ0IGwgLTMuMzAwNzgsLTIuODE2NCBhIDguMDgsOC4wOCAwIDAgMSAtMi43NzkyOSwyLjEzNDc2IGMgLTEuMDY2MDYsMC40OTcyMyAtMi4yMjUxMywwLjc1NCAtMy40MDAzOSwwLjc1NTg2IGEgOC4wOSw4LjA5IDAgMCAxIC00LjM2MTMzLC0xLjI4NzExIGMgLTEuMzA3LC0wLjg0MiAtMi4zNDUsLTIuMDQxOTggLTMsLTMuNDU4OTggYSA4LjEyLDguMTIgMCAwIDEgMS4yNTk3NiwtOC42ODc1IHogbSAtMjYsMC4wMjczIGEgOC4xLDguMSAwIDAgMSA0LjU0Njg4LDEuMzk4NDQgOC4xMSw4LjExIDAgMCAxIDIuOTgwNDcsMy43MTI4OSAwLjg2LDAuODYgMCAwIDEgMC4wNTQ3LDAuNDA0MjkgMC44NSwwLjg1IDAgMCAxIC0wLjQ0MzM2LDAuNjU4MjEgYyAtMC4xMjIsMC4wNjUgLTAuMjU4NDksMC4wOTk2IC0wLjM5NjQ5LDAuMDk5NiBoIC0xMy40ODQzOCBhIDAuODMsMC44MyAwIDAgMSAtMC4zOTY0OCwtMC4wOTk2IGMgLTAuMTIyLC0wLjA2NiAtMC4yMjY2OSwtMC4xNjA0NCAtMC4zMDQ2OSwtMC4yNzM0NCAtMC4wNzgsLTAuMTEzIC0wLjEyNDY3LC0wLjI0Njc3IC0wLjEzODY3LC0wLjM4NDc3IGEgMC44NiwwLjg2IDAgMCAxIDAuMDU0NywtMC40MDQyOSA4LjExLDguMTEgMCAwIDEgMi45ODA0NywtMy43MTI4OSBjIDEuMzQyLC0wLjkgMi45MjU4NywtMS4zOTg0NCA0LjU0Njg3LC0xLjM5ODQ0IHoiCiAgICAgY2xpcC1wYXRoPSJub25lIgogICAgIG1hc2s9Im5vbmUiCiAgICAgc3R5bGU9Im9wYWNpdHk6MTt2ZWN0b3ItZWZmZWN0Om5vbmU7ZmlsbDojNWE2NDZlO2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDoxO3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1kYXNob2Zmc2V0OjA7c3Ryb2tlLW9wYWNpdHk6MSIgLz4KICA8cGF0aAogICAgIHN0eWxlPSJvcGFjaXR5OjE7dmVjdG9yLWVmZmVjdDpub25lO2ZpbGw6IzAwYWVlZjtmaWxsLW9wYWNpdHk6MTtzdHJva2Utd2lkdGg6MTtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2UtZGFzaG9mZnNldDowO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgaWQ9InBhdGgzODUiCiAgICAgZD0ibSAyNi4yNzM0NjksMCBjIC0wLjc0MywwIC0xLjQ1MzU3LDAuMjk1MzEgLTEuOTc2NTcsMC44MjAzMSBhIDIuOCwyLjggMCAwIDAgLTAuODE4MzYsMS45ODA0NyAyLjgsMi44IDAgMCAwIDAuODM3ODksMS45NDMzNiBjIDAuNTIzLDAuNTEyIDEuMjI1MDQsMC44MDA3OCAxLjk1NzA0LDAuODAwNzggMC43MzE5OSwwIDEuNDM1OTgsLTAuMjg3NzggMS45NTg5OCwtMC44MDA3OCBhIDIuOCwyLjggMCAwIDAgMC44Mzc4OSwtMS45NDMzNiBoIC0wLjAwMiBBIDIuOCwyLjggMCAwIDAgMjguMjUwMDI5LDAuODIwMzEgQyAyNy43MjYwMjksMC4yOTUzMSAyNy4wMTY0NTksMCAyNi4yNzM0NjksMCBaIG0gNTMuMjk2ODcsNy4wOTk2MSBjIC0xLjc4NSwtMC4wMDIgLTMuNTQ5OTIsMC4zODIgLTUuMTY5OTIsMS4xMjUgYSAxMi40LDEyLjQgMCAwIDAgLTQuMjMyNDIsMy4xODE2NCBsIDMuMjg5MDYsMi44MTgzNiBjIDEuNDAyLC0xLjYxNyAzLjM4NTU4LC0yLjYxNDQ5IDUuNTE3NTgsLTIuNzcxNDkgMi4xMzIsLTAuMTU3IDQuMjQwMjMsMC41MzM3OCA1Ljg2NTIzLDEuOTI1NzggMS42MjUsMS4zOTIgMi42MzQ1NSwzLjM3MDkxIDIuODEwNTUsNS41MDM5MSBhIDguMTIsOC4xMiAwIDAgMSAtMS44Nzg5MSw1Ljg4NjcyIGwgMy4yOTEwMiwyLjgxNjQxIGMgMS41MywtMS44MTIwMSAyLjUxMzA4LC00LjAyNDk2IDIuODMwMDgsLTYuMzc2OTYgYSAxMi40NiwxMi40NiAwIDAgMCAtMS4wNDI5NywtNi44OTg0NCAxMi40NCwxMi40NCAwIDAgMCAtNC41ODU5NCwtNS4yNTM5IGMgLTIuMDAzLC0xLjI2OSAtNC4zMjMzNiwtMS45NTcwMyAtNi42OTMzNiwtMS45NTcwMyB6IgogICAgIGNsaXAtcGF0aD0ibm9uZSIKICAgICBtYXNrPSJub25lIiAvPgo8L3N2Zz4KPCEtLSB2ZXJzaW9uOiAyMDE3MTIyMywgb3JpZ2luYWwgc2l6ZTogOTIuMDAzODIyIDMyLjAwMTQ5OSwgYm9yZGVyOiAzJSAtLT4K");
  mask-image:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIGJ5IE1hcnN1cGlsYW1pIC0tPgo8c3ZnCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzQ0NyIKICAgdmVyc2lvbj0iMS4xIgogICB3aWR0aD0iMTAyNCIKICAgaGVpZ2h0PSIzNzAiCiAgIHZpZXdCb3g9Ii0wLjk2MDA0NDk3IC0wLjk2MDA0NDk3IDkzLjkyMzkxMTk0IDMzLjkyMTU4ODk0Ij4KICA8ZGVmcwogICAgIGlkPSJkZWZzNDQ0IiAvPgogIDxwYXRoCiAgICAgaWQ9InBhdGgzODMiCiAgICAgZD0ibSA2MS42OTUzMzksMC42MTEzMyBhIDIuMTgsMi4xOCAwIDAgMCAtMS41NDEwMiwwLjY0MDYyIGMgLTAuNCwwLjQgLTAuNjQwNjIsMC45NjQ5MiAtMC42NDA2MiwxLjU0NDkyIHYgMjYuMzczMDUgYyAwLDAuNTggMC4yMzA2MiwxLjEzNDkyIDAuNjQwNjIsMS41NDQ5MiBhIDIuMTgsMi4xOCAwIDAgMCAzLjA4Mzk5LDAgYyAwLjQsLTAuNCAwLjY0MDYyLC0wLjk2NDkyIDAuNjQwNjIsLTEuNTQ0OTIgViAyLjc5Njg3IGMgMCwtMC41OCAtMC4yMzA2MiwtMS4xMzQ5MiAtMC42NDA2MiwtMS41NDQ5MiBhIDIuMTgsMi4xOCAwIDAgMCAtMS41NDI5NywtMC42NDA2MiB6IG0gLTQ4LjkzNzUsNi41IGMgLTIuMDIwNzcsLTAuMDU0IC00LjAyODUzMDEsMC4zODQ5OCAtNS44NDc2NjAxLDEuMjg3MTEgLTIuMDc5LDEuMDMxIC0zLjgyNjgyLDIuNjI3NTYgLTUuMDQ4ODIsNC42MDE1NiAtMS4yMjIwMDAwMiwxLjk3NCAtMS44NjYzMzAwMiw0LjI1MjIyIC0xLjg2MTMzMDAxOTk5MSw2LjU3NDIyIDAuMDA1LDIuMzIyIDAuNjU2NzU5OTk5OTkxLDQuNTk4MzYgMS44ODQ3NjAwMTk5OTEsNi41NjgzNiAxLjIyOCwxLjk3IDIuOTgyNDYsMy41NTcwNyA1LjA2NDQ2LDQuNTgwMDcgMi4wODIsMS4wMjMgNC40MDk3OTAxLDEuNDQzODkgNi43MTY3OTAxLDEuMjEyODkgYSAxMi40MiwxMi40MiAwIDAgMCA2LjM0Mzc1LC0yLjUyMTQ4IDIuMTQsMi4xNCAwIDAgMCAwLjgxODM2LC0xLjY0MDYyIDIuMTQsMi4xNCAwIDAgMCAtMC43NTM5LC0xLjY3MzgzIGMgLTAuMzc2LC0wLjMyNiAtMC44NTE2MSwtMC41MTMyNSAtMS4zNDk2MSwtMC41MzEyNSAtMC40OTgsLTAuMDE4IC0wLjk4NDgyLDAuMTM1NTkgLTEuMzgyODIsMC40MzM1OSAtMS4yLDAuOTE4IC0yLjYzMzcxLDEuNDgwOTUgLTQuMTM2NzEsMS42MjY5NSAtMS41MDMsMC4xNDYgLTMuMDE2MTUsLTAuMTMwNzggLTQuMzY5MTQwMSwtMC44MDA3OCAtMS4zNTMwMSwtMC42NyAtMi40OTM5NywtMS43MDMzMyAtMy4yOTI5NywtMi45ODYzMyBhIDguMTIsOC4xMiAwIDAgMSAtMC4wMTM3LC04LjU1NjY0IDguMTEsOC4xMSAwIDAgMSAzLjI4MzIxLC0yLjk5ODA0IGMgMS4zNTIwMDAxLC0wLjY3MyAyLjg2NDE4MDEsLTAuOTUzNSA0LjM2NzE5MDEsLTAuODEyNSAxLjUwMywwLjE0MSAyLjkzNzYyLDAuNzAwMjMgNC4xNDA2MiwxLjYxNTIzIGEgMi4xNywyLjE3IDAgMCAwIDIuNzMwNDcsLTAuMDY2NCBjIDAuMjQ1LC0wLjIxIDAuNDQwMzEsLTAuNDcwNjcgMC41NzAzMSwtMC43NjM2NyAwLjEzLC0wLjI5MyAwLjE5NTQ1LC0wLjYxMzU1IDAuMTg5NDUsLTAuOTM1NTUgLTAuMDA2LC0wLjMyMiAtMC4wODY1LC0wLjYzNjgzIC0wLjIzMDQ2LC0wLjkyMzgzIC0wLjE0NCwtMC4yODcgLTAuMzUwNTIsLTAuNTQwMzIgLTAuNjAzNTIsLTAuNzM2MzIgYSAxMi40MiwxMi40MiAwIDAgMCAtNi4zNTM1MiwtMi41IGMgLTAuMjg4NzUsLTAuMDI4IC0wLjU3NjU1LC0wLjA0NSAtMC44NjUyMywtMC4wNTI3IHogbSAzMS4xNTQzLDAgYyAtMC4zNDc2NCwwLjAwNiAtMC42OTkxMSwwLjAyNjMgLTEuMDUyNzQsMC4wNjI1IGEgMTIuNDIsMTIuNDIgMCAwIDAgLTUuMzYxMzMsMS44NzMwNCAxMi40NCwxMi40NCAwIDAgMCAtMy45NzA3LDQuMDYyNSAxMi40NiwxMi40NiAwIDAgMCAtMS43NSw1LjQwODIxIGMgLTAuMTYsMS45MTQgMC4xMjUwMywzLjg0MSAwLjgzMjAzLDUuNjI1IGEgMTIuNDUsMTIuNDUgMCAwIDAgMy4yNDQxNCw0LjY2NjAxIDEyLjQ0LDEyLjQ0IDAgMCAwIDQuOTc2NTcsMi43MzYzMyBjIDEuODQ3LDAuNTE2IDMuODAwODIsMC41OTUzNyA1LjY3MzgyLDAuMjM0MzcgMS44NzMsLTAuMzYxIDMuNjU2NiwtMS4xNTI0NSA1LjE4MzYsLTIuMzE0NDUgYSAyLjE3LDIuMTcgMCAwIDAgMC42MTMyOCwtMC43MzgyOCBjIDAuMTQ3LC0wLjI4OCAwLjIyODMzLC0wLjYwNTY5IDAuMjM2MzMsLTAuOTI5NjkgYSAyLjE3LDIuMTcgMCAwIDAgLTIuMTAzNTIsLTIuMjMwNDcgMi4xNiwyLjE2IDAgMCAwIC0xLjM3MTA5LDAuNDM1NTUgOCw4IDAgMCAxIC01LjI5NDkyLDEuNjU4MiBjIC0xLjU1LC0wLjA4IC0zLjA0NDgzLC0wLjYwMzg2IC00LjI5ODgzLC0xLjUwNTg2IGEgOC4xNyw4LjE3IDAgMCAxIC0yLjgzMDA4LC0zLjU4NTkzIDAuODUsMC44NSAwIDAgMSAwLjM4MjgxLC0xLjA3MDMyIDAuODQsMC44NCAwIDAgMSAwLjM5ODQ0LC0wLjA5OTYgaCAxNS4xNDQ1MyBjIDAuNDg0LDAuMDAyIDAuOTY0MTEsLTAuMDkzMyAxLjQxMjExLC0wLjI3NzM0IDAuNDQ4LC0wLjE4NCAwLjg1NjIyLC0wLjQ1NDg3IDEuMTk5MjIsLTAuNzk2ODcgMC4zNDMsLTAuMzQyIDAuNjE0NzgsLTAuNzQ3MzIgMC44MDA3OCwtMS4xOTUzMiBhIDMuNjksMy42OSAwIDAgMCAwLjI4MzIsLTEuNDEyMTEgYyAtMC4wMywtMS4wNCAtMC4yNTk4MywtMi4wNjU1MyAtMC42NzM4MiwtMy4wMTk1MyBsIC0wLjAxMzcsLTAuMDA0IGMgLTEuOTY1LC00LjQ0OTM3IC02LjQ0NTYyLC03LjY3NDA3IC0xMS42NjAxNiwtNy41ODIwMyB6IG0gLTE3LjYzODY3LDAuNjEzMjggYyAtMS4yMDMsMCAtMi4xNzk2OSwwLjk3NzU5IC0yLjE3OTY5LDIuMTgzNTkgdiAxOS4yNTk3NyBjIDAsMS4yMDYgMC45NzY2OSwyLjE4MzU5IDIuMTc5NjksMi4xODM1OSAxLjIwMjk5LDAgMi4xNzk2OCwtMC45Nzc1OSAyLjE3OTY4LC0yLjE4MzU5IFYgOS45MDgyIGMgMCwtMS4yMDYgLTAuOTc2NjksLTIuMTgzNTkgLTIuMTc5NjgsLTIuMTgzNTkgeiBtIDQzLjg3MzA0LDMuNjg5NDUgYSAxMi40MSwxMi40MSAwIDAgMCAtMi4zODg2Nyw0LjIzODI4IDEyLjQ2LDEyLjQ2IDAgMCAwIC0wLjU4NTk0LDQuODMwMDggYyAwLjEyNCwxLjYzMyAwLjU3MDc4LDMuMjI2NSAxLjMwMDc4LDQuNjg3NSBhIDEyLjQ0LDEyLjQ0IDAgMCAwIDMuMDAzOTEsMy44MjQyMiBjIDEuMjQzLDEuMDY1IDIuNjg0MjMsMS44NzM4NiA0LjI0MDIzLDIuMzgwODYgYSAxMi40LDEyLjQgMCAwIDAgNC44MjgxMywwLjU3MDMxIGMgMS42MywtMC4xMyAzLjIxOTc4LC0wLjU4MjA4IDQuNjc1NzgsLTEuMzMwMDggYSAxMi40MywxMi40MyAwIDAgMCAzLjgwODU5LC0zLjAyMzQ0IGwgLTMuMzAwNzgsLTIuODE2NCBhIDguMDgsOC4wOCAwIDAgMSAtMi43NzkyOSwyLjEzNDc2IGMgLTEuMDY2MDYsMC40OTcyMyAtMi4yMjUxMywwLjc1NCAtMy40MDAzOSwwLjc1NTg2IGEgOC4wOSw4LjA5IDAgMCAxIC00LjM2MTMzLC0xLjI4NzExIGMgLTEuMzA3LC0wLjg0MiAtMi4zNDUsLTIuMDQxOTggLTMsLTMuNDU4OTggYSA4LjEyLDguMTIgMCAwIDEgMS4yNTk3NiwtOC42ODc1IHogbSAtMjYsMC4wMjczIGEgOC4xLDguMSAwIDAgMSA0LjU0Njg4LDEuMzk4NDQgOC4xMSw4LjExIDAgMCAxIDIuOTgwNDcsMy43MTI4OSAwLjg2LDAuODYgMCAwIDEgMC4wNTQ3LDAuNDA0MjkgMC44NSwwLjg1IDAgMCAxIC0wLjQ0MzM2LDAuNjU4MjEgYyAtMC4xMjIsMC4wNjUgLTAuMjU4NDksMC4wOTk2IC0wLjM5NjQ5LDAuMDk5NiBoIC0xMy40ODQzOCBhIDAuODMsMC44MyAwIDAgMSAtMC4zOTY0OCwtMC4wOTk2IGMgLTAuMTIyLC0wLjA2NiAtMC4yMjY2OSwtMC4xNjA0NCAtMC4zMDQ2OSwtMC4yNzM0NCAtMC4wNzgsLTAuMTEzIC0wLjEyNDY3LC0wLjI0Njc3IC0wLjEzODY3LC0wLjM4NDc3IGEgMC44NiwwLjg2IDAgMCAxIDAuMDU0NywtMC40MDQyOSA4LjExLDguMTEgMCAwIDEgMi45ODA0NywtMy43MTI4OSBjIDEuMzQyLC0wLjkgMi45MjU4NywtMS4zOTg0NCA0LjU0Njg3LC0xLjM5ODQ0IHoiCiAgICAgY2xpcC1wYXRoPSJub25lIgogICAgIG1hc2s9Im5vbmUiCiAgICAgc3R5bGU9Im9wYWNpdHk6MTt2ZWN0b3ItZWZmZWN0Om5vbmU7ZmlsbDojNWE2NDZlO2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDoxO3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1kYXNob2Zmc2V0OjA7c3Ryb2tlLW9wYWNpdHk6MSIgLz4KICA8cGF0aAogICAgIHN0eWxlPSJvcGFjaXR5OjE7dmVjdG9yLWVmZmVjdDpub25lO2ZpbGw6IzAwYWVlZjtmaWxsLW9wYWNpdHk6MTtzdHJva2Utd2lkdGg6MTtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2UtbWl0ZXJsaW1pdDo0O3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2UtZGFzaG9mZnNldDowO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgaWQ9InBhdGgzODUiCiAgICAgZD0ibSAyNi4yNzM0NjksMCBjIC0wLjc0MywwIC0xLjQ1MzU3LDAuMjk1MzEgLTEuOTc2NTcsMC44MjAzMSBhIDIuOCwyLjggMCAwIDAgLTAuODE4MzYsMS45ODA0NyAyLjgsMi44IDAgMCAwIDAuODM3ODksMS45NDMzNiBjIDAuNTIzLDAuNTEyIDEuMjI1MDQsMC44MDA3OCAxLjk1NzA0LDAuODAwNzggMC43MzE5OSwwIDEuNDM1OTgsLTAuMjg3NzggMS45NTg5OCwtMC44MDA3OCBhIDIuOCwyLjggMCAwIDAgMC44Mzc4OSwtMS45NDMzNiBoIC0wLjAwMiBBIDIuOCwyLjggMCAwIDAgMjguMjUwMDI5LDAuODIwMzEgQyAyNy43MjYwMjksMC4yOTUzMSAyNy4wMTY0NTksMCAyNi4yNzM0NjksMCBaIG0gNTMuMjk2ODcsNy4wOTk2MSBjIC0xLjc4NSwtMC4wMDIgLTMuNTQ5OTIsMC4zODIgLTUuMTY5OTIsMS4xMjUgYSAxMi40LDEyLjQgMCAwIDAgLTQuMjMyNDIsMy4xODE2NCBsIDMuMjg5MDYsMi44MTgzNiBjIDEuNDAyLC0xLjYxNyAzLjM4NTU4LC0yLjYxNDQ5IDUuNTE3NTgsLTIuNzcxNDkgMi4xMzIsLTAuMTU3IDQuMjQwMjMsMC41MzM3OCA1Ljg2NTIzLDEuOTI1NzggMS42MjUsMS4zOTIgMi42MzQ1NSwzLjM3MDkxIDIuODEwNTUsNS41MDM5MSBhIDguMTIsOC4xMiAwIDAgMSAtMS44Nzg5MSw1Ljg4NjcyIGwgMy4yOTEwMiwyLjgxNjQxIGMgMS41MywtMS44MTIwMSAyLjUxMzA4LC00LjAyNDk2IDIuODMwMDgsLTYuMzc2OTYgYSAxMi40NiwxMi40NiAwIDAgMCAtMS4wNDI5NywtNi44OTg0NCAxMi40NCwxMi40NCAwIDAgMCAtNC41ODU5NCwtNS4yNTM5IGMgLTIuMDAzLC0xLjI2OSAtNC4zMjMzNiwtMS45NTcwMyAtNi42OTMzNiwtMS45NTcwMyB6IgogICAgIGNsaXAtcGF0aD0ibm9uZSIKICAgICBtYXNrPSJub25lIiAvPgo8L3N2Zz4KPCEtLSB2ZXJzaW9uOiAyMDE3MTIyMywgb3JpZ2luYWwgc2l6ZTogOTIuMDAzODIyIDMyLjAwMTQ5OSwgYm9yZGVyOiAzJSAtLT4K");
}
.brand-logo--rede{
  width:55px;
  -webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyBpZD0iTUFSQ0EiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDQ4MC43MiAxNTYuOTYiPjx0aXRsZT5sb2dvLXJlZGU8L3RpdGxlPjxwYXRoIGZpbGw9IiNmZjc4MDAiIGQ9Ik00NzUuNTYgOTguNzFoLTEwNmMtMTUuNDUgMC0yMi02LTI0LjY3LTE0LjA1aDMzLjQxYzIyLjMzIDAgMzYuMDgtOS44NCAzNi4wOC0zMS4wOFM0MDAuNiAyMS40IDM3OC4yNyAyMS40aC0xMC42MmMtMjAgMC00NC4zNCAxMS42NC00OS40NSAzOS41MWgtMjkuODlWMEgyNjN2NjAuOTFoLTMxLjIzYy0yOS45NC4xNS00Ni42MSAxNS4zMS00OC43OSAzNy44aC01Mi4yNmMtMTUuNDUgMC0yMi02LTI0LjY3LTE0LjA1aDMzLjQxYzIyLjMzIDAgMzYuMDgtOS44NCAzNi4wOC0zMS4wOFMxNjEuOCAyMS40IDEzOS40NyAyMS40aC0xMC42MmMtMjAgMC00NC4zNCAxMS42NC00OS40NSAzOS41MUg1Ny40N2MtMTMuNzQgMC0yNS45MyA0LjIyLTMyLjY0IDEyLjVWNjIuNzhIMHY4Ny42MmMwIDUgMS41NiA2LjU2IDYuNCA2LjU2aDEyLjVjNC42OCAwIDYuNC0xLjU2IDYuNC02LjU2di0zNC41MWMwLTI2LjA4IDE2LjQtMzEuMjQgMzMuMjctMzEuMjRoMjEuMDZjNS4yNiAyNS44OCAyNi45MyAzOC4yNiA1MiAzOC4yNmg1NC40OGM2LjI2IDE1IDIxLjIxIDIyLjggNDUuMTcgMjIuOGgxNC41MmMyMy43NCAwIDQzLjczLTE2Ljg3IDQzLjczLTQxLjdWODQuNjVoMjguODdjNS4yNiAyNS44OCAyNi45MyAzOC4yNiA1MiAzOC4yNmgxMDUuMTZhNS4yMyA1LjIzIDAgMCAwIDUuMTUtNS4zMXYtMTMuOWE1LjA3IDUuMDcgMCAwIDAtNS4xNS00Ljk5ek0xMjcuOTEgNDUuMTRoMTIuMzRjNS42MiAwIDkuNTMgMi4zNCA5LjUzIDggMCA1LjMxLTMuOSA3LjgxLTkuNTMgNy44MWgtMzQuOWMyLjA3LTguODQgNy44OC0xNS44MSAyMi41Ni0xNS44MXpNMjYzIDEwNC44YzAgOS44NC03LjQ5IDE2Ljg3LTE3LjE4IDE2Ljg3aC0xNi4yNGMtMTMuMTIgMC0yMS43MS01LjE1LTIxLjcxLTE4LjEyIDAtMTIuNjUgOC41OS0xOC45IDIxLjcxLTE4LjlIMjYzdjIwLjE1em0xMDMuNzEtNTkuNjZIMzc5YzUuNjIgMCA5LjUzIDIuMzQgOS41MyA4IDAgNS4zMS0zLjkgNy44MS05LjUzIDcuODFoLTM0LjljMi4xMi04Ljg0IDcuOS0xNS44MSAyMi42MS0xNS44MXoiLz48L3N2Zz4=");
  mask-image:url("data:image/svg+xml;base64,PHN2ZyBpZD0iTUFSQ0EiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDQ4MC43MiAxNTYuOTYiPjx0aXRsZT5sb2dvLXJlZGU8L3RpdGxlPjxwYXRoIGZpbGw9IiNmZjc4MDAiIGQ9Ik00NzUuNTYgOTguNzFoLTEwNmMtMTUuNDUgMC0yMi02LTI0LjY3LTE0LjA1aDMzLjQxYzIyLjMzIDAgMzYuMDgtOS44NCAzNi4wOC0zMS4wOFM0MDAuNiAyMS40IDM3OC4yNyAyMS40aC0xMC42MmMtMjAgMC00NC4zNCAxMS42NC00OS40NSAzOS41MWgtMjkuODlWMEgyNjN2NjAuOTFoLTMxLjIzYy0yOS45NC4xNS00Ni42MSAxNS4zMS00OC43OSAzNy44aC01Mi4yNmMtMTUuNDUgMC0yMi02LTI0LjY3LTE0LjA1aDMzLjQxYzIyLjMzIDAgMzYuMDgtOS44NCAzNi4wOC0zMS4wOFMxNjEuOCAyMS40IDEzOS40NyAyMS40aC0xMC42MmMtMjAgMC00NC4zNCAxMS42NC00OS40NSAzOS41MUg1Ny40N2MtMTMuNzQgMC0yNS45MyA0LjIyLTMyLjY0IDEyLjVWNjIuNzhIMHY4Ny42MmMwIDUgMS41NiA2LjU2IDYuNCA2LjU2aDEyLjVjNC42OCAwIDYuNC0xLjU2IDYuNC02LjU2di0zNC41MWMwLTI2LjA4IDE2LjQtMzEuMjQgMzMuMjctMzEuMjRoMjEuMDZjNS4yNiAyNS44OCAyNi45MyAzOC4yNiA1MiAzOC4yNmg1NC40OGM2LjI2IDE1IDIxLjIxIDIyLjggNDUuMTcgMjIuOGgxNC41MmMyMy43NCAwIDQzLjczLTE2Ljg3IDQzLjczLTQxLjdWODQuNjVoMjguODdjNS4yNiAyNS44OCAyNi45MyAzOC4yNiA1MiAzOC4yNmgxMDUuMTZhNS4yMyA1LjIzIDAgMCAwIDUuMTUtNS4zMXYtMTMuOWE1LjA3IDUuMDcgMCAwIDAtNS4xNS00Ljk5ek0xMjcuOTEgNDUuMTRoMTIuMzRjNS42MiAwIDkuNTMgMi4zNCA5LjUzIDggMCA1LjMxLTMuOSA3LjgxLTkuNTMgNy44MWgtMzQuOWMyLjA3LTguODQgNy44OC0xNS44MSAyMi41Ni0xNS44MXpNMjYzIDEwNC44YzAgOS44NC03LjQ5IDE2Ljg3LTE3LjE4IDE2Ljg3aC0xNi4yNGMtMTMuMTIgMC0yMS43MS01LjE1LTIxLjcxLTE4LjEyIDAtMTIuNjUgOC41OS0xOC45IDIxLjcxLTE4LjlIMjYzdjIwLjE1em0xMDMuNzEtNTkuNjZIMzc5YzUuNjIgMCA5LjUzIDIuMzQgOS41MyA4IDAgNS4zMS0zLjkgNy44MS05LjUzIDcuODFoLTM0LjljMi4xMi04Ljg0IDcuOS0xNS44MSAyMi42MS0xNS44MXoiLz48L3N2Zz4=");
}
.retry-arrow{ color:var(--text-faint); font-size:var(--fs-xl); }
.retry-panel p{ font-size:var(--fs-base); color:var(--text-muted); max-width:none; }
.retry-panel p strong{ color:var(--pos); }

/* =========================================================================
   11. Ferramentas + dashboard
   ========================================================================= */
.tools-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); margin-bottom:var(--sp-10); }
.tool-card{
  background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--r-card);
  padding:var(--pad-card); display:flex; gap:var(--sp-4); align-items:flex-start;
}
.tool-icon{ width:36px; height:36px; object-fit:contain; flex:none; margin-top:2px; }
.tool-card h3{ font-size:var(--fs-lg); margin-bottom:2px; }
.tool-card p{ font-size:var(--fs-base); color:var(--text-muted); line-height:var(--lh-relaxed); }

.dashboard-mock{
  border:1px solid var(--border); border-radius:var(--r-card);
  background:var(--bg-raised); overflow:hidden;
}
.dashboard-mock-head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5); border-bottom:1.5px dotted var(--border-strong);
}
.dashboard-mock-head .title{ font-size:var(--fs-base); font-weight:650; }
.dashboard-mock-head .sub{ font-size:var(--fs-xs); color:var(--text-faint); }
.dashboard-mock-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5);
  padding:var(--sp-5); border-bottom:1.5px dotted var(--border-strong);
}
.dashboard-mock-stats .big{ font-size:var(--fs-xl); }
.table-scroll{ overflow-x:auto; }
.dashboard-table{ width:100%; border-collapse:collapse; font-size:var(--fs-base); min-width:460px; }
.dashboard-table th{
  text-align:left; font-size:var(--fs-2xs); font-weight:600; letter-spacing:0.07em;
  text-transform:uppercase; color:var(--text-faint);
  padding:var(--sp-3) var(--sp-5); border-bottom:1.5px dotted var(--border-strong);
}
.dashboard-table td{ padding:var(--sp-3) var(--sp-5); border-bottom:1.5px dotted var(--border-strong); }
.dashboard-table tr:last-child td{ border-bottom:none; }
.dashboard-table .client-meta{ font-size:var(--fs-xs); color:var(--text-faint); }
.status{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--fs-xs); font-weight:600; padding:var(--pad-pill-md); border-radius:var(--r-pill);
}
.status::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.status-paid{ color:var(--pos); background:var(--pos-soft); }
.status-pending{ color:var(--text-muted); background:var(--bg-subtle); }
.tools-cta{ text-align:center; margin-top:var(--sp-10); }
.tools-cta .cta-note{ display:block; margin-top:var(--sp-3); }

/* =========================================================================
   12. Preço / transparência
   ========================================================================= */
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); margin-bottom:var(--sp-12); }
.price-card{
  border:1px solid var(--border); border-radius:var(--r-card);
  padding:var(--pad-panel); background:var(--bg-raised); display:flex; flex-direction:column;
}
.price-card.is-highlight{ border-color:var(--accent); }
.price-card h3{ font-size:var(--fs-lg); margin-bottom:var(--sp-4); }
.price-card .price{
  font-size:var(--fs-3xl); font-weight:650; letter-spacing:-0.03em;
  line-height:var(--lh-tight); margin-bottom:var(--sp-3);
}
.price-card .price small{ font-size:var(--fs-xl); font-weight:600; color:var(--text-muted); }
.price-card .price--plain{ font-size:var(--fs-2xl); }
.price-card.is-highlight .price{ color:var(--accent-display); }
.price-card.is-highlight .price small{ color:var(--accent-text); }
.price-card p{ font-size:var(--fs-base); color:var(--text-muted); line-height:var(--lh-relaxed); }
.price-card p strong{ color:var(--text); }
.price-badge{
  align-self:flex-start; margin-bottom:var(--sp-3); padding:var(--pad-pill-md);
  border-radius:var(--r-pill); background:var(--accent-soft); color:var(--accent-text);
  border:1px solid var(--accent-soft-border);
  font-size:var(--fs-2xs); font-weight:600; letter-spacing:0.07em; text-transform:uppercase;
}

.budget-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,4vw,64px); align-items:start; }
.budget-grid h3{ font-size:var(--fs-2xl); margin-bottom:var(--sp-5); text-wrap:balance; }
.budget-list{ display:flex; flex-direction:column; gap:var(--sp-4); }
.budget-list li{ display:flex; gap:var(--sp-3); list-style:none; font-size:var(--fs-md); line-height:var(--lh-relaxed); }
.budget-list li strong{ font-weight:650; }
.budget-list .tick{ margin-top:1px; }

.sim-card{
  border:1px solid var(--border-strong); border-radius:var(--r-card);
  padding:var(--pad-panel); background:var(--bg-subtle);
}
.sim-card h3{ font-size:var(--fs-xl); margin-bottom:var(--sp-1); }
.sim-sub{ font-size:var(--fs-sm); color:var(--text-muted); margin-bottom:var(--sp-5); }
.sim-inputs{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); margin-bottom:var(--sp-4); }
.sim-field .mock-input{ margin-bottom:0; }
.sim-row{
  display:flex; justify-content:space-between; gap:var(--sp-3); font-size:var(--fs-base);
  padding-top:var(--sp-3); border-top:1px solid var(--border); margin-bottom:var(--sp-4);
  color:var(--text-muted);
}
.sim-row strong{ color:var(--text); font-weight:650; }
.sim-results{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); margin-bottom:var(--sp-4); }
.sim-result{ background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--r-card); padding:var(--pad-tight); }
.sim-result .big{ font-size:var(--fs-xl); }
.sim-result .note{ font-size:var(--fs-2xs); color:var(--text-faint); margin-top:2px; }
.sim-savings{
  border-top:1px solid var(--border); padding-top:var(--sp-4);
  font-size:var(--fs-md); color:var(--text);
}
.sim-savings strong{ color:var(--pos); font-weight:650; }
.sim-disclaimer{ font-size:var(--fs-2xs); color:var(--text-faint); margin-top:var(--sp-3); line-height:var(--lh-normal); }

.deposit-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4); margin-top:var(--sp-12); }
.deposit-card{ border:1px solid var(--border); border-radius:var(--r-card); padding:var(--pad-card); background:var(--bg-raised); }
.deposit-card .num{
  font-size:var(--fs-2xs); font-weight:700; letter-spacing:0.08em;
  color:var(--accent-text); margin-bottom:var(--sp-2);
}
.deposit-card h3{ font-size:var(--fs-md); margin-bottom:var(--sp-1); }
.deposit-card p{ font-size:var(--fs-base); color:var(--text-muted); line-height:var(--lh-relaxed); }

/* =========================================================================
   13. FAQ
   ========================================================================= */
/* Acordeão e respostas ocupam a largura padrão de conteúdo, sem medida
   de leitura própria — alinham com o resto da página. */
.faq{ max-width:none; }
.faq-item{ border-bottom:1.5px dotted var(--border-strong); }
.faq-item:first-child{ border-top:1.5px dotted var(--border-strong); }
.faq-item summary{
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-4);
  padding:var(--sp-5) 0; cursor:pointer; list-style:none;
  font-size:var(--fs-lg); font-weight:650; letter-spacing:-0.012em;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; flex:none; font-size:var(--fs-xl); font-weight:400; line-height:1;
  color:var(--accent-text); transition:transform .2s ease;
}
.faq-item[open] summary::after{ content:"–"; }
.faq-item summary:hover{ color:var(--accent-text); }
.faq-answer{
  padding-bottom:var(--sp-5); font-size:var(--fs-md);
  color:var(--text-muted); line-height:var(--lh-relaxed);
}
.faq-answer p + p{ margin-top:var(--sp-3); }
.faq-foot{ text-align:center; margin-top:var(--sp-8); font-size:var(--fs-md); color:var(--text-muted); }
.faq-foot a{ color:var(--accent-text); font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* =========================================================================
   14. CTA final
   ========================================================================= */
.final-cta{
  position:relative; overflow:hidden; text-align:center;
  padding-block:clamp(64px, 8vw, 112px);
  background:radial-gradient(120% 140% at 15% 0%, #2E1710 0%, var(--bg) 60%);
}
.final-cta-deco{
  position:absolute; right:-60px; top:50%; transform:translateY(-50%);
  width:440px; opacity:.10; filter:invert(1); pointer-events:none;
}
.final-cta-inner{ position:relative; z-index:1; max-width:40rem; margin-inline:auto; padding-inline:var(--sp-6); }
.final-cta h2{ font-size:var(--fs-4xl); margin-block:var(--sp-2) var(--sp-4); text-wrap:balance; }
.final-cta h2 em{ font-style:normal; color:var(--accent-display); }
.final-cta p{ font-size:var(--fs-lg); color:var(--text-muted); margin-bottom:var(--sp-6); text-wrap:pretty; }
.final-cta .cta-group{ justify-content:center; }
.final-cta .cta-note{ display:block; margin-top:var(--sp-5); }

/* =========================================================================
   15. Rodapé
   ========================================================================= */
.site-footer{ border-top:1.5px dotted var(--border-strong); padding-block:var(--sp-16) var(--sp-10); }
.footer-grid{
  display:grid; grid-template-columns:1.9fr 1fr 1fr 1fr 1fr;
  gap:var(--sp-6); margin-bottom:var(--sp-10);
}
.footer-brand{ font-family:var(--font-logo); font-weight:700; font-size:var(--fs-logo-sm); margin-bottom:var(--sp-3); }
.footer-desc{ font-size:var(--fs-base); color:var(--text-muted); max-width:34ch; line-height:var(--lh-relaxed); }
.footer-col-title{
  display:flex; align-items:center; gap:6px;
  font-size:var(--fs-2xs); font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text-faint); margin-bottom:var(--sp-4);
}
/* Ícone de integração (plugue) no laranja da marca, antes de cada nome.
   Máscara em vez de <img>: a cor vem do token, então segue o tema. */
.footer-list li::before{
  content:""; width:14px; height:14px; flex:none;
  background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M8.5 2.5v5M15.5 2.5v5'/><rect x='5.5' y='7.5' width='13' height='6.5' rx='2.2'/><path d='M12 14v3.4a4 4 0 0 0 4 4h2'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M8.5 2.5v5M15.5 2.5v5'/><rect x='5.5' y='7.5' width='13' height='6.5' rx='2.2'/><path d='M12 14v3.4a4 4 0 0 0 4 4h2'/></svg>") center/contain no-repeat;
}
.footer-links{ display:flex; flex-direction:column; gap:var(--sp-3); font-size:var(--fs-base); }
.footer-links a{ color:var(--text-muted); }
.footer-links a:hover{ color:var(--text); text-decoration:underline; text-underline-offset:3px; }
/* Coluna de integrações: nomes, não links — não há página de destino. */
.footer-list li{ display:flex; align-items:center; gap:8px; list-style:none; color:var(--text-muted); }
.footer-rule{ height:0; border-top:1.5px dotted var(--border-strong); margin-block:var(--sp-8); }
/* Sem limite de medida: o texto legal acompanha a largura do conteúdo
   da página, alinhado com as colunas do rodapé acima. */
.footer-legal{ font-size:var(--fs-xs); color:var(--text-faint); line-height:var(--lh-relaxed); }
.footer-legal + .footer-legal{ margin-top:var(--sp-4); }

/* =========================================================================
   16. CTA fixo no mobile
   ========================================================================= */
.sticky-cta{
  display:none;
  position:fixed; inset-inline:0; bottom:0; z-index:50;
  padding:var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--border);
}
.sticky-cta .cta-note{ display:block; text-align:center; margin-top:6px; }
@media (max-width:899px){
  .sticky-cta{ display:block; }
  body{ padding-bottom:96px; }
}

/* =========================================================================
   17. Páginas legais (termos, privacidade, cookies)
   ========================================================================= */
.legal-wrap{ padding-block:var(--section-y); }
.legal-grid{ display:grid; grid-template-columns:240px 1fr; gap:0 var(--sp-10); align-items:start; }

.legal-sidebar{
  position:sticky; top:calc(64px + var(--sp-6));
  max-height:calc(100vh - 64px - var(--sp-10));
  overflow-y:auto;
}
.sidebar-inner{ padding:2px 0; }
.sidebar-doc-pill{
  display:inline-flex; align-items:center; padding:var(--pad-pill-lg); border-radius:var(--r-pill);
  background:var(--accent-soft); border:1px solid var(--accent-soft-border); color:var(--accent-text);
  font-size:var(--fs-2xs); font-weight:600; letter-spacing:0.07em; text-transform:uppercase;
  margin-bottom:var(--sp-2);
}
.sidebar-meta{ font-size:var(--fs-2xs); color:var(--text-faint); margin-bottom:var(--sp-5); }
.sidebar-label,.sidebar-docs-label{
  font-size:var(--fs-2xs); font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text-faint); margin-bottom:var(--sp-2); padding-left:10px;
}
.sidebar-nav{ display:flex; flex-direction:column; gap:1px; margin-bottom:var(--sp-5); }
.slink{
  display:block; font-size:var(--fs-sm); font-weight:500; color:var(--text-muted);
  padding:6px 10px; border-radius:var(--r-control);
  border-left:2px dotted transparent; line-height:1.45;
  transition:color .14s ease, background-color .14s ease, border-color .14s ease;
}
.slink:hover{ color:var(--text); background:var(--bg-subtle); }
.slink.is-active{ color:var(--accent-text); font-weight:650; border-left-color:var(--accent); background:var(--accent-soft); }

.sidebar-divider{ height:0; border-top:1.5px dotted var(--border-strong); margin-block:var(--sp-4); }
.sidebar-docs{ display:flex; flex-direction:column; gap:1px; }
.sdoc-link{
  display:flex; align-items:center; gap:var(--sp-2);
  font-size:var(--fs-xs); font-weight:500; color:var(--text-muted);
  padding:6px 10px; border-radius:var(--r-control);
  transition:color .14s ease, background-color .14s ease;
}
.sdoc-link:hover{ color:var(--accent-text); background:var(--accent-soft); }
.sdoc-link svg{ width:14px; height:14px; flex:none; opacity:.55; }
.sdoc-link:hover svg{ opacity:1; }

/* No mobile a barra lateral vira um seletor colapsável no topo do conteúdo */
.mobile-toc-bar{ display:none; margin-bottom:var(--sp-5); position:relative; }
.mobile-toc-toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  background:var(--bg-raised); border:1px solid var(--border-strong); border-radius:var(--r-control);
  padding:var(--sp-3) var(--sp-4); cursor:pointer; font:inherit;
  font-size:var(--fs-sm); font-weight:650; color:var(--text);
}
.mobile-toc-toggle:hover{ border-color:var(--accent); }
.mobile-toc-toggle svg{ width:16px; height:16px; flex:none; transition:transform .2s ease; }
.mobile-toc-toggle.is-open svg.chevron{ transform:rotate(180deg); }
.mobile-toc-label{ display:flex; align-items:center; gap:var(--sp-2); }
.mobile-toc-menu{
  display:none; position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:20;
  background:var(--bg-raised); border:1px solid var(--border-strong); border-radius:var(--r-card);
  padding:var(--sp-2); max-height:60vh; overflow-y:auto;
  box-shadow:0 12px 32px -12px rgba(13,12,11,.18);
}
.mobile-toc-menu.is-open{ display:block; }
.mobile-toc-menu .slink{ border-left:none; }

.legal-content{
  border:1px solid var(--border); border-radius:var(--r-card);
  background:var(--bg-raised); overflow:hidden;
}
.legal-content-inner{ padding:clamp(32px,4vw,56px); }

.doc-title{
  font-size:var(--fs-4xl); font-weight:700; letter-spacing:-0.03em;
  line-height:var(--lh-tight); margin-bottom:var(--sp-2);
}
.doc-updated{ font-size:var(--fs-xs); color:var(--text-faint); margin-bottom:2px; }
.doc-version{ font-size:var(--fs-xs); color:var(--text-faint); margin-bottom:var(--sp-8); }

.legal-content h2{
  font-size:var(--fs-xl); font-weight:650; letter-spacing:-0.015em; line-height:var(--lh-snug);
  margin:var(--sp-10) 0 var(--sp-3); padding-top:var(--sp-10);
  border-top:1.5px dotted var(--border-strong);
  scroll-margin-top:96px;
}
.legal-content h2:first-of-type{ margin-top:0; padding-top:0; border-top:none; }
.legal-content h3{ font-size:var(--fs-md); font-weight:650; margin:var(--sp-5) 0 var(--sp-2); letter-spacing:-0.01em; }
.legal-content p{ font-size:var(--fs-base); color:var(--text-muted); line-height:var(--lh-relaxed); margin-bottom:var(--sp-3); }
.legal-content ul{ list-style:none; margin:var(--sp-2) 0 var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-2); }
.legal-content ul li{ font-size:var(--fs-base); color:var(--text-muted); line-height:var(--lh-normal); padding-left:var(--sp-4); position:relative; }
.legal-content ul li::before{
  content:""; position:absolute; left:0; top:10px; width:5px; height:5px;
  border-radius:50%; background:var(--accent); opacity:.7;
}
.legal-content a{ color:var(--accent-text); text-decoration:underline; text-underline-offset:3px; }
.legal-content a:hover{ color:var(--accent); }
.legal-content strong{ color:var(--text); }
.legal-content code{
  font-size:var(--fs-xs); font-family:ui-monospace,"SF Mono",Menlo,monospace;
  background:var(--bg-subtle); border:1px solid var(--border-strong); border-radius:4px;
  padding:1px 5px; color:var(--text-muted);
}

.content-divider{ height:0; border-top:1.5px dotted var(--border-strong); margin-block:var(--sp-8); }

.notice{
  background:var(--accent-soft); border-left:3px solid var(--accent);
  border-radius:0 var(--r-control) var(--r-control) 0; padding:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-4);
}
.notice p{ color:var(--accent-text); font-weight:500; margin:0; font-size:var(--fs-base); }
.notice strong{ color:var(--accent-text); }

.highlight-box{
  background:var(--pos-soft); border:1px solid var(--pos-border);
  border-radius:var(--r-control); padding:var(--sp-3) var(--sp-4); margin:var(--sp-3) 0 var(--sp-4);
}
.highlight-box p{ color:var(--pos); font-weight:500; margin:0; font-size:var(--fs-base); }

.info-box{
  background:var(--bg-subtle); border:1px solid var(--border-strong);
  border-radius:var(--r-control); padding:var(--sp-3) var(--sp-4); margin:var(--sp-3) 0 var(--sp-4);
}
.info-box p{ color:var(--text); font-weight:500; margin:0; font-size:var(--fs-base); }

.legal-content table{ width:100%; border-collapse:collapse; margin:var(--sp-3) 0 var(--sp-5); font-size:var(--fs-sm); }
.legal-content th,.legal-content td{
  text-align:left; padding:var(--sp-3) var(--sp-4); border-bottom:1.5px dotted var(--border-strong);
  color:var(--text-muted); vertical-align:top; line-height:var(--lh-normal);
}
.legal-content th{
  color:var(--text); font-weight:650; font-size:var(--fs-2xs); text-transform:uppercase;
  letter-spacing:0.05em; background:var(--bg-subtle);
}
.legal-content tr:last-child td{ border-bottom:none; }

/* Selo de tipo de cookie — usa a mesma paleta semântica do resto do site:
   coral para "análise" (é a marca falando), verde para "afiliados" (ganho),
   vermelho suave para "essencial" (não desative). */
.badge{
  display:inline-block; font-size:var(--fs-2xs); font-weight:700;
  letter-spacing:0.06em; text-transform:uppercase; padding:var(--pad-pill-sm); border-radius:var(--r-pill);
}
.badge-essential{ background:var(--neg-soft); color:var(--neg); }
.badge-analytics{ background:var(--accent-soft); color:var(--accent-text); }
.badge-affiliate{ background:var(--pos-soft); color:var(--pos); }

.legal-foot-links{ text-align:center; font-size:var(--fs-sm); color:var(--text-faint); line-height:var(--lh-relaxed); }
.legal-foot-links a{ color:var(--text-muted); }
.legal-foot-links a:hover{ color:var(--text); }

/* =========================================================================
   18. Responsivo
   ========================================================================= */
@media (max-width:960px){
  .hero{ grid-template-columns:1fr; }
  .hero-art{ order:-1; max-width:520px; }
  .float-card{ display:none; }
  .how{ grid-template-columns:1fr; }
  .feature-grid,.tools-grid{ grid-template-columns:repeat(2,1fr); }
  .retry .wrap{ grid-template-columns:1fr; gap:var(--sp-8); }
  .retry p{ max-width:none; }
  .budget-grid{ grid-template-columns:1fr; }
  .deposit-grid{ grid-template-columns:repeat(2,1fr); }
  .dashboard-mock-stats{ grid-template-columns:repeat(2,1fr); }
  .pricing-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr 1fr; }
  .security-list{ grid-template-columns:1fr 1fr; }
  .site-nav{ display:none; }
  .legal-grid{ grid-template-columns:1fr; }
  .legal-sidebar{ display:none; }
  .mobile-toc-bar{ display:block; }
}
@media (max-width:600px){
  .feature-grid,.tools-grid,.deposit-grid,.security-list{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .sim-inputs,.sim-results,.stat-grid,.gateway-grid{ grid-template-columns:1fr; }
  .hero-form .btn{ width:100%; }
  .final-cta-deco{ width:260px; }
  .retry-flow{ flex-direction:column; align-items:stretch; }
  .retry-arrow{ transform:rotate(90deg); text-align:center; }
}

/* =========================================================================
   19. Tema escuro
   ========================================================================= */
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0D0C0B;
    --bg-subtle:#171512;
    --bg-raised:#1B1916;
    --text:#F5F3F0;
    --text-muted:#B3AEA7;
    --text-faint:#94908A;
    --border:#2A2724;
    --border-strong:#403C38;

    --dot:#2A2724;

    --brand-50:#2B1610;   --brand-100:#4C2619;
    --brand-500:#FF6A45;  --brand-600:#FF8163;  --brand-700:#FF9D7E;
    --accent-on:#1C0A05;       /* texto escuro sobre o acento — 6.6:1 */

    --pos:#4FDE9B; --pos-soft:#10291E; --pos-border:#1E5540;
    --neg:#FF8E7E; --neg-soft:#2C1512; --neg-border:#5A2822;

    --focus:#8FBAFF;

  }
  .announce{ background:#080706; }
  /* A ilustração do hero é traço escuro sobre transparente: sem placa
     por baixo, ela precisa ser clareada para não sumir no fundo escuro. */
  .plate img{ filter:invert(.92) hue-rotate(180deg); }
  /* Ícones PNG monocromáticos escuros → clareados no tema escuro */
  .feature-icon,.tool-icon{ filter:invert(.92) hue-rotate(180deg); }
  .feature-card.is-highlight .feature-icon{ filter:none; }
}
