/* ==========================================================================
   CredCoin · Central de Ajuda — sistema de estilos compartilhado dos guias
   Mesma marca da landing: petróleo + ouro · fundos chapados · ouro é acento ·
   movimento contido. Acentos dos bancos (Inter laranja / Itaú azul) mantidos
   como cor funcional. Um único arquivo estiliza toda a família de guias.
   ========================================================================== */

/* Fontes self-hosted (woff2 variável, subset latin) — pré-carregadas no layout guias. */
@font-face{
  font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 900;font-display:swap;
  src:url("/fonts/schibsted-grotesk-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;
  src:url("/fonts/jetbrains-mono-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* ------------------------------------------------------------------------
     Tokens de design — ESPELHO de app/assets/tailwind/application.css.
     Os guias são servidos com org context (data-theme + brand_style_tag),
     então a paleta abaixo é consumida via var(--color-*) e herda o tema do
     org e os overrides de cor da marca. Mantenha estes valores em sincronia
     com application.css (:root + escopos [data-theme] no fim deste arquivo).
     ------------------------------------------------------------------------ */
  --color-primary-50:#EEF4F5;--color-primary-100:#D9E7E9;--color-primary-200:#B4CFD3;
  --color-primary-300:#8AB2B8;--color-primary-500:#2E6E78;--color-primary-600:#235963;
  --color-primary-700:#1A4750;--color-primary-800:#143942;--color-primary-900:#0F2E34;
  --color-secondary-deep:#0B2429;
  --color-accent-50:#FAF3E8;--color-accent-500:#D9A05F;--color-accent-600:#C2884A;--color-accent-700:#9E6B36;
  --color-success-50:#ECF6EF;--color-success-500:#2F9461;--color-success-700:#226B47;
  --color-warning-50:#FBF3E3;--color-warning-500:#DB8A1E;--color-warning-700:#95610F;
  --color-danger-50:#FAEDEC;--color-danger-500:#C3423A;--color-danger-700:#99312B;
  --color-info-50:#EDF5F7;--color-info-500:#3187A0;--color-info-700:#20606F;
  --color-neutral-0:#FFFFFF;--color-neutral-50:#F7F5F1;--color-neutral-100:#F0EDE7;
  --color-neutral-200:#E2DED5;--color-neutral-300:#C8C3B7;--color-neutral-400:#969185;
  --color-neutral-500:#6A655B;--color-neutral-700:#3C3831;--color-neutral-900:#201D18;

  /* --- Aliases internos do guia → tokens da marca (herdam tema + brand colors) --- */
  --p-900:var(--color-secondary-deep); --p-850:var(--color-primary-900); --p-800:var(--color-primary-800);
  --p-700:var(--color-primary-700); --p-600:var(--color-primary-600); --p-500:var(--color-primary-500);
  --p-300:var(--color-primary-300); --p-100:var(--color-primary-100); --p-50:var(--color-primary-50);
  --gold-300:color-mix(in srgb,var(--color-accent-500),white 32%);
  --gold-200:color-mix(in srgb,var(--color-accent-500),white 16%);
  --gold-500:var(--color-accent-500); --gold-600:var(--color-accent-600); --gold-700:var(--color-accent-700);
  --gold-soft:var(--color-accent-50);
  --ok:var(--color-success-500); --ok-700:var(--color-success-700); --ok-soft:var(--color-success-50);
  --ok-line:color-mix(in srgb,var(--color-success-500),white 62%);
  --warn:var(--color-warning-500); --warn-700:var(--color-warning-700); --warn-soft:var(--color-warning-50);
  --warn-line:color-mix(in srgb,var(--color-warning-500),white 60%);
  --danger:var(--color-danger-500); --danger-700:var(--color-danger-700); --danger-soft:var(--color-danger-50);
  --danger-line:color-mix(in srgb,var(--color-danger-500),white 62%);
  --info:var(--color-info-500); --info-700:var(--color-info-700); --info-soft:var(--color-info-50);
  --n0:var(--color-neutral-0); --n50:var(--color-neutral-50); --n100:var(--color-neutral-100);
  --n200:var(--color-neutral-200); --n300:var(--color-neutral-300); --n400:var(--color-neutral-400);
  --n500:var(--color-neutral-500); --n700:var(--color-neutral-700); --n900:var(--color-neutral-900);
  /* --- Bancos (cor funcional, fixa — independe do tema do org) --- */
  --inter:#FF7A00; --inter-soft:#FFF3E8; --inter-ink:#9A4A00;
  --itau:#1F3A93; --itau-soft:#EAF0FF; --itau-ink:#16306F;
  /* --- "No sistema" (ações no app) usa o petróleo/primary da marca --- */
  --app:var(--color-primary-600); --app-soft:var(--color-primary-50); --app-ink:var(--color-primary-800);
  /* --- Tipografia --- */
  --sans:'Schibsted Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* --- Forma (mesma da landing: cantos discretos, sombras leves) --- */
  --radius:10px; --radius-sm:8px;
  --line:var(--n200); --line-2:var(--n100);
  --sh-sm:0 1px 2px rgba(32,29,24,.05),0 1px 3px rgba(32,29,24,.05);
  --sh-md:0 2px 6px rgba(32,29,24,.06),0 8px 24px -12px rgba(32,29,24,.16);
  /* --- Movimento --- */
  --e-expo:cubic-bezier(.16,1,.3,1);
}

/* Temas do org — espelho dos escopos [data-theme] de application.css.
   Sobrescrevem primary/accent (+ neutros em alguns temas); os aliases --p-*/--gold-*
   herdam via var(). Os overrides de cor próprios do org (brand_style_tag) ainda vencem
   por virem depois no <head>. */
[data-theme="green"]{
  --color-primary-50:#ECF7EF;--color-primary-100:#D3ECD9;--color-primary-200:#A7D9B4;
  --color-primary-300:#6FBF86;--color-primary-500:#1EA34C;--color-primary-600:#16843F;
  --color-primary-700:#116633;--color-primary-800:#0D4F28;--color-primary-900:#0A3D20;
  --color-secondary-deep:#072B17;
  --color-accent-50:#FEF4E6;--color-accent-500:#F2A93C;--color-accent-600:#D98C22;--color-accent-700:#A56612;
}
[data-theme="indigo"]{
  --color-primary-50:#EAF1FE;--color-primary-100:#D3E2FD;--color-primary-200:#A6C4FB;
  --color-primary-300:#6E9CF6;--color-primary-500:#3B82F6;--color-primary-600:#1F6FEB;
  --color-primary-700:#1A56C4;--color-primary-800:#17429B;--color-primary-900:#12306E;
  --color-secondary-deep:#0D2450;
  --color-accent-50:#E6F6F8;--color-accent-500:#17B0C4;--color-accent-600:#0E93A5;--color-accent-700:#0A6B78;
  --color-neutral-50:#F5F7FA;--color-neutral-100:#EDF0F5;--color-neutral-200:#DDE3EC;--color-neutral-300:#C2CAD6;
}
[data-theme="terracotta"]{
  --color-primary-50:#FBF0EB;--color-primary-100:#F5DBCE;--color-primary-200:#E9B49E;
  --color-primary-300:#DA8A69;--color-primary-500:#C2612F;--color-primary-600:#A94E24;
  --color-primary-700:#863D1C;--color-primary-800:#6A3016;--color-primary-900:#4E2410;
  --color-secondary-deep:#3A1B0C;
  --color-accent-50:#F6F3E4;--color-accent-500:#A99331;--color-accent-600:#8A7826;--color-accent-700:#6B5C1D;
  --color-neutral-50:#FAF6F1;--color-neutral-100:#F2EBE2;--color-neutral-200:#E6DACB;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--n50);
  color:var(--n900);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--p-600);text-decoration:none}
a:hover{color:var(--p-700)}
code,kbd{font-family:var(--mono)}
::selection{background:var(--gold-200);color:var(--p-900)}

/* ==========================================================================
   TOPBAR — barra fina fixa: marca + navegação entre guias
   ========================================================================== */
.topbar{
  position:sticky;top:0;z-index:60;
  background:rgba(247,245,241,.9);
  backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--n200);
}
.topbar-in{
  max-width:1160px;margin:0 auto;height:56px;
  padding:0 clamp(1rem,4vw,2rem);
  display:flex;align-items:center;gap:1rem;
}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:800;font-size:1.06rem;letter-spacing:-.02em;color:var(--n900)}
.brand:hover{color:var(--n900)}
.brand .tb-logo{height:26px;width:auto;max-width:170px;flex:none;object-fit:contain;display:block}
.brand .sep{color:var(--n300);font-weight:400;margin:0 .1rem}
.brand .ctx{color:var(--n500);font-weight:600;font-size:.9rem}
.topbar .spacer{flex:1}
.topbar .tb-link{
  font-size:.85rem;font-weight:600;color:var(--n700);
  display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .2rem;
}
.topbar .tb-link:hover{color:var(--p-700)}
.topbar .tb-link svg{width:15px;height:15px}
@media(max-width:640px){.topbar .ctx,.topbar .sep,.topbar .tb-hide{display:none}}

/* ==========================================================================
   HERO — petróleo chapado, sem gradiente (regra da marca); entrada única no load
   ========================================================================== */
.hero{
  background:var(--p-900);color:#fff;
  padding:clamp(2.6rem,6vw,4.4rem) clamp(1.25rem,5vw,3rem) clamp(2.8rem,6vw,4.4rem);
}
.hero-in{max-width:1160px;margin:0 auto}
@keyframes heroIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero-in{animation:heroIn .6s var(--e-expo) both}
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font:600 .74rem/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-300);
}
.eyebrow::before{content:"";width:1.4rem;height:1px;background:var(--gold-500);display:inline-block}
.hero h1{
  font-size:clamp(1.95rem,5vw,3.1rem);font-weight:800;letter-spacing:-.03em;
  margin:1rem 0 .7rem;line-height:1.08;max-width:22ch;
}
.hero h1 .gold{color:var(--gold-300)}
.hero h1 .or{color:#FF9A3D}
.hero h1 .it{color:#7EA0FF}
.hero p.lead{font-size:clamp(1rem,2.2vw,1.18rem);color:var(--p-100);max-width:62ch}
.hero .audience{margin-top:1.5rem;display:flex;gap:.55rem;flex-wrap:wrap}
.hero .audience span{
  font:500 .82rem/1 var(--sans);color:var(--p-100);
  border:1px solid rgba(255,255,255,.2);padding:.5rem .8rem;border-radius:2rem;
  display:inline-flex;align-items:center;gap:.45rem;
}

/* ==========================================================================
   LAYOUT — página do hub + grade TOC/conteúdo dos guias
   ========================================================================== */
.page{max-width:1160px;margin:0 auto;padding:clamp(2.2rem,5vw,3.5rem) clamp(1rem,4vw,2rem) 4.5rem}
.layout{
  max-width:1160px;margin:0 auto;padding:0 clamp(1rem,4vw,2rem);
  display:grid;grid-template-columns:242px 1fr;gap:clamp(1.5rem,4vw,3.5rem);
  align-items:start;
}
.main{min-width:0;padding:clamp(2rem,5vw,3.2rem) 0 5rem}

.toc{position:sticky;top:56px;align-self:start;padding-top:clamp(2rem,5vw,3.2rem);max-height:calc(100vh - 56px);overflow:auto}
.toc h4{font:600 .7rem/1 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--n400);margin:0 0 .7rem .8rem}
.toc a{display:block;color:var(--n500);font-size:.86rem;font-weight:500;padding:.42rem .8rem;border-radius:var(--radius-sm);border-left:2px solid transparent;transition:background .15s,color .15s}
.toc a:hover{background:var(--n0);color:var(--n900)}
.toc a.active{color:var(--p-700);background:var(--p-50);border-left-color:var(--gold-600);font-weight:600}

/* ==========================================================================
   SEÇÕES
   ========================================================================== */
section{scroll-margin-top:70px;margin-bottom:3.2rem}
/* Kicker = eyebrow da landing, na cor de quem age (ouro/app/banco) */
.kicker{
  display:inline-flex;align-items:center;gap:.55rem;
  font:600 .72rem/1.2 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:.85rem;
}
.kicker::before{content:"";width:1.4rem;height:1px;background:currentColor;display:inline-block}
.kicker.neutral{color:var(--gold-700)}
.kicker.app{color:var(--p-700)}
.kicker.inter{color:var(--inter-ink)}
.kicker.itau{color:var(--itau-ink)}
h2{font-size:clamp(1.55rem,3.4vw,2.1rem);font-weight:800;letter-spacing:-.02em;line-height:1.14;margin-bottom:.5rem}
h2 .bankdot{display:inline-block;width:.62em;height:.62em;border-radius:50%;margin-right:.45rem;vertical-align:.04em}
.dot-inter{background:var(--inter)}
.dot-itau{background:var(--itau)}
h3{font-size:1.18rem;font-weight:700;letter-spacing:-.01em;margin:2.2rem 0 .9rem}
h3 .muted{font-weight:500;color:var(--n400);font-size:.9rem}
.section-lead{color:var(--n500);max-width:74ch;font-size:1.04rem}
.bankrule{height:1px;background:var(--n200);margin:0 0 3rem;border:0}
.prose p{margin:.7rem 0;color:var(--n500)}
.prose ul,.prose ol{margin:.5rem 0 .5rem 1.2rem;color:var(--n500)}
.prose li{margin:.3rem 0}
.prose strong{color:var(--n900)}

/* ==========================================================================
   STEP CARDS — chapados; o número diz quem age (app/banco/destaque)
   ========================================================================== */
.step{
  background:var(--n0);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--sh-sm);
  padding:1.3rem 1.4rem;margin:.9rem 0;
}
.step-head{display:flex;align-items:flex-start;gap:.9rem;margin-bottom:.4rem}
.step-num{
  flex:none;width:32px;height:32px;border-radius:var(--radius-sm);
  display:grid;place-items:center;font:700 .95rem/1 var(--mono);
  color:var(--p-700);background:var(--p-50);
}
.step.inter .step-num{background:var(--inter-soft);color:var(--inter-ink)}
.step.itau .step-num{background:var(--itau-soft);color:var(--itau-ink)}
.step.gold .step-num{background:var(--gold-300);color:var(--gold-700)}
.step-title{font-weight:700;font-size:1.05rem;padding-top:.28rem}
.step-body{padding-left:calc(32px + .9rem)}
.step-body p{margin:.35rem 0;color:var(--n500)}
.step-body ul,.step-body ol{margin:.4rem 0 .4rem 1.1rem;color:var(--n500)}
.step-body li{margin:.28rem 0}
.step-body strong{color:var(--n900)}

/* onde a ação acontece */
.where{
  display:inline-flex;align-items:center;gap:.4rem;
  font:700 .68rem/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;
  padding:.3rem .6rem;border-radius:999px;margin-left:auto;flex:none;
}
.where svg{width:13px;height:13px}
.where.bank{color:var(--n700);background:var(--n100);border:1px solid var(--line)}
.where.app{color:var(--app-ink);background:var(--app-soft)}
.where.device{color:var(--p-700);background:var(--p-50)}
.where.tech{color:var(--gold-700);background:var(--gold-soft)}

/* ==========================================================================
   CALLOUTS
   ========================================================================== */
.callout{
  position:relative;border-radius:var(--radius-sm);
  padding:.95rem 1.1rem .95rem 2.9rem;margin:1rem 0;font-size:.95rem;border:1px solid;
}
.callout .ic{position:absolute;left:.95rem;top:.98rem;width:18px;height:18px}
.callout strong{font-weight:700}
.callout.warn{background:var(--warn-soft);border-color:var(--warn-line);color:#7a5200}
.callout.warn .ic{color:var(--warn)}
.callout.danger{background:var(--danger-soft);border-color:var(--danger-line);color:#8e2017}
.callout.danger .ic{color:var(--danger)}
.callout.tip{background:var(--ok-soft);border-color:var(--ok-line);color:#1a5e3f}
.callout.tip .ic{color:var(--ok-700)}
.callout.app{background:var(--app-soft);border-color:var(--p-100);color:var(--p-800)}
.callout.app .ic{color:var(--p-600)}
.callout.info{background:var(--info-soft);border-color:#c9e0e8;color:var(--info-700)}
.callout.info .ic{color:var(--info)}

/* ==========================================================================
   TABELAS
   ========================================================================== */
.tablewrap{overflow:auto;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--sh-sm);background:var(--n0)}
table{border-collapse:collapse;width:100%;font-size:.92rem;min-width:560px}
thead th{text-align:left;font-weight:700;color:var(--n900);background:var(--n50);padding:.8rem 1rem;border-bottom:1px solid var(--line);white-space:nowrap}
tbody td{padding:.7rem 1rem;border-bottom:1px solid var(--line-2);color:var(--n500);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
td .fname{font-weight:600;color:var(--n900)}
.yes{color:var(--ok-700);font-weight:700}
.no{color:var(--n400)}
.th-inter{color:var(--inter-ink)}
.th-itau{color:var(--itau-ink)}

/* chip = um campo do formulário no app */
.field{
  font:500 .84em/1 var(--mono);
  background:var(--gold-soft);color:var(--gold-700);
  padding:.16em .48em;border-radius:6px;border:1px solid #ecdcc2;white-space:nowrap;
}

/* ==========================================================================
   CÓDIGO
   ========================================================================== */
.codeblock{position:relative;margin:1rem 0}
.codeblock pre{
  background:#0b1a1f;color:#dbe7e9;border-radius:var(--radius-sm);
  padding:1.05rem 1.1rem;overflow:auto;font-size:.84rem;line-height:1.65;border:1px solid #143942;
}
.codeblock pre .cm{color:#6f8b90}
.copybtn{
  position:absolute;top:.6rem;right:.6rem;
  font:600 .72rem/1 var(--sans);color:#cfe0e2;
  background:#143942;border:1px solid #1f5560;border-radius:7px;padding:.4rem .6rem;cursor:pointer;transition:.15s;
}
.copybtn:hover{background:#1a4750;color:#fff}
.copybtn.done{color:#8fe0b6;border-color:#2f6a52}

/* ==========================================================================
   GLOSSÁRIO / FONTES
   ========================================================================== */
.glossary{display:grid;gap:.6rem}
.gloss{background:var(--n0);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.85rem 1.05rem;box-shadow:var(--sh-sm)}
.gloss dt{font-weight:700;color:var(--n900);margin-bottom:.15rem}
.gloss dd{color:var(--n500);font-size:.94rem}
.sources{display:grid;gap:.5rem;margin-top:.8rem}
.sources a{display:block;background:var(--n0);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.7rem .95rem;font-size:.9rem;box-shadow:var(--sh-sm);color:var(--n500);transition:border-color .15s,box-shadow .15s}
.sources a:hover{border-color:var(--n300);box-shadow:var(--sh-md);color:var(--n900)}
.sources a b{color:var(--n900)}
.sources a span{color:var(--n400);font-family:var(--mono);font-size:.8rem;display:block;margin-top:.15rem;word-break:break-all}

/* ==========================================================================
   MOLDURA DE NAVEGADOR (prints reais) + FIGURE — mesma da landing
   ========================================================================== */
.browser{border-radius:var(--radius);overflow:hidden;background:var(--n0);border:1px solid var(--line);box-shadow:var(--sh-md)}
.browser .bar{height:38px;display:flex;align-items:center;gap:.5rem;padding:0 .9rem;background:var(--n100);border-bottom:1px solid var(--line)}
.browser .dots{display:flex;gap:6px}
.browser .dots i{width:9px;height:9px;border-radius:50%;display:block;background:var(--n300)}
.browser .url{flex:1;margin-left:.5rem;height:22px;border-radius:5px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;gap:.4rem;padding:0 .65rem;font:500 .74rem/1 var(--mono);color:var(--n500);max-width:340px}
.browser .url svg{width:11px;height:11px;color:var(--ok-700)}
.browser img{width:100%;height:auto;display:block;background:var(--n100)}
figure{margin:1.4rem 0}
figure figcaption{margin-top:.6rem;font:500 .8rem/1.4 var(--mono);color:var(--n400);text-align:center}

/* ==========================================================================
   MOLDURA DE CELULAR (prints reais do portal)
   ========================================================================== */
.phone{
  width:290px;max-width:78vw;position:relative;
  background:var(--p-900);border-radius:2.2rem;padding:10px;
  box-shadow:var(--sh-md);
}
.phone .scr{width:100%;border-radius:1.7rem;overflow:hidden;background:var(--n50)}
.phone .scr img{width:100%;height:auto;display:block}
.figure-phones{display:flex;gap:clamp(1rem,4vw,2.4rem);flex-wrap:wrap;justify-content:center;align-items:flex-start}

/* ==========================================================================
   CARTÃO DE ACESSO — os dois campos da tela de entrada do portal na forma do
   documento que o cliente já carrega. Feito para ser lido e printado no celular.
   ========================================================================== */
.cred{
  max-width:430px;margin:1.6rem 0;padding:1.15rem 1.3rem 1.05rem;
  background:var(--p-900);color:#fff;border-radius:14px;
  border:1px solid color-mix(in srgb,var(--gold-500),transparent 62%);
  box-shadow:var(--sh-md);
}
.cred-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.1rem}
.cred-brand{font:600 .66rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-300)}
.cred-chip{
  width:30px;height:23px;border-radius:5px;flex:none;
  background:linear-gradient(150deg,var(--gold-300),var(--gold-600));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.16);
}
.cred-fields{display:grid;gap:.9rem}
.cred-fields dt{font:600 .64rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--p-300)}
.cred-fields dd{margin:.28rem 0 0;font-size:1.2rem;font-weight:700;letter-spacing:-.01em}
.cred-fields dd span{display:block;margin-top:.1rem;font:500 .8rem/1.35 var(--sans);letter-spacing:0;color:var(--p-100)}
.cred-foot{
  margin-top:1.15rem;padding-top:.8rem;border-top:1px solid rgba(255,255,255,.14);
  font:500 .8rem/1.4 var(--mono);color:var(--gold-200);overflow-wrap:anywhere;
}

/* Passo a passo com o print ao lado, que acompanha a leitura */
.entrada{display:grid;grid-template-columns:1fr 250px;gap:clamp(1.2rem,3vw,2.6rem);align-items:start}
.entrada-steps{min-width:0}
.entrada-print{margin:0;position:sticky;top:74px;justify-self:center}
.entrada-print .phone{width:250px}

/* O que abre a porta e o que não abre — a resposta é a própria divisão em dois */
.entra-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.2rem}
.entra{
  background:var(--n0);border:1px solid var(--line);border-top:3px solid var(--n300);
  border-radius:var(--radius);padding:1rem 1.15rem;box-shadow:var(--sh-sm);
}
.entra.ok{border-top-color:var(--ok)}
.entra h4{font:600 .68rem/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--n400);margin-bottom:.85rem}
.entra.ok h4{color:var(--ok-700)}
.entra dt{font-weight:700;color:var(--n900)}
.entra dd{color:var(--n500);font-size:.92rem;margin:.1rem 0 .75rem}
.entra dd:last-child{margin-bottom:0}

/* CTA WhatsApp — mesmo desenho do catálogo público */
.wa{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-size:.94rem;font-weight:700;color:#fff;background:#25D366;
  padding:.72rem 1.15rem;border-radius:12px;box-shadow:0 8px 22px -10px rgba(37,211,102,.7);
  transition:transform .2s var(--e-expo),box-shadow .2s,filter .2s;
}
.wa:hover{color:#fff;transform:translateY(-1px);filter:brightness(1.03);box-shadow:0 12px 26px -10px rgba(37,211,102,.8)}
.wa svg{width:19px;height:19px;fill:currentColor}

/* Situações do sistema citadas no texto (mesmo desenho de chip da landing) */
.chip{display:inline-flex;align-items:center;font:600 .72rem/1 var(--sans);padding:.3rem .6rem;border-radius:999px;white-space:nowrap}
.chip.paid{color:var(--ok-700);background:var(--ok-soft)}
.chip.pending{color:var(--warn-700);background:var(--warn-soft)}
.chip.overdue{color:var(--danger-700);background:var(--danger-soft)}
.chip.recur{color:var(--info-700);background:var(--info-soft)}

/* ==========================================================================
   HUB (index) — cartões de guia + fluxo. Hover só borda+sombra (regra da marca)
   ========================================================================== */
.hub-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.gcard{
  display:flex;flex-direction:column;
  background:var(--n0);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5rem;box-shadow:var(--sh-sm);color:inherit;
  transition:box-shadow .15s,border-color .15s;
}
.gcard:hover{box-shadow:var(--sh-md);border-color:var(--n300);color:inherit}
.gcard .g-ic{width:42px;height:42px;border-radius:var(--radius-sm);display:grid;place-items:center;background:var(--p-50);color:var(--p-700);margin-bottom:.9rem}
.gcard.i-inter .g-ic{background:var(--inter-soft);color:var(--inter-ink)}
.gcard.i-itau .g-ic{background:var(--itau-soft);color:var(--itau-ink)}
.gcard.i-gold .g-ic{background:var(--gold-soft);color:var(--gold-700)}
.gcard h3{margin:0 0 .4rem;font-size:1.14rem}
.gcard p{color:var(--n500);font-size:.93rem;flex:1}
.gcard .g-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}
.gcard .g-tags span{font:600 .7rem/1 var(--mono);color:var(--n500);background:var(--n100);border-radius:6px;padding:.28rem .5rem}
.gcard .g-go{margin-top:1rem;font-weight:700;font-size:.9rem;color:var(--p-700);display:inline-flex;align-items:center;gap:.4rem}

/* fluxo horizontal do ciclo (hub / guia completo) — número no tile ouro da landing */
.flowline{display:grid;grid-template-columns:repeat(5,1fr);gap:.9rem;counter-reset:f}
.fstep{position:relative;background:var(--n0);border:1px solid var(--line);border-radius:var(--radius-sm);padding:1.1rem 1rem;box-shadow:var(--sh-sm)}
.fstep .fn{counter-increment:f;width:30px;height:30px;border-radius:var(--radius-sm);background:var(--gold-300);color:var(--gold-700);display:grid;place-items:center;font:700 .85rem/1 var(--mono);margin-bottom:.7rem}
.fstep .fn::before{content:counter(f)}
.fstep h5{font-size:.98rem;font-weight:700;margin-bottom:.25rem}
.fstep p{font-size:.82rem;color:var(--n500)}
.fstep .farr{position:absolute;right:-.72rem;top:1.5rem;color:var(--n300);z-index:2;background:var(--n50);border-radius:50%}

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer.pgfoot{border-top:1px solid var(--line);margin-top:2rem;padding:2rem 0 0;color:var(--n400);font-size:.85rem}
footer.pgfoot .prevnext{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.6rem}
footer.pgfoot .pn{flex:1;min-width:220px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:.85rem 1.05rem;background:var(--n0);box-shadow:var(--sh-sm);transition:border-color .15s,box-shadow .15s}
footer.pgfoot .pn:hover{border-color:var(--n300);box-shadow:var(--sh-md)}
footer.pgfoot .pn .lb{font:600 .66rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--n400)}
footer.pgfoot .pn .tt{font-weight:700;color:var(--n900);margin-top:.25rem}
footer.pgfoot .pn.next{text-align:right}

/* ==========================================================================
   RODAPÉ DA VITRINE — parcial compartilhado com a landing; só aparece no host
   da plataforma (marca CredCoin), por isso o petróleo profundo derivado fixo.
   ========================================================================== */
.landing-foot{background:color-mix(in srgb,var(--p-900),black 30%);color:var(--p-100);padding:3.2rem 0 2.2rem}
.landing-foot .wrap{max-width:1160px;margin:0 auto;padding:0 clamp(1rem,4vw,2rem)}
.landing-foot .foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem;padding-bottom:2.2rem;border-bottom:1px solid rgba(255,255,255,.1)}
.landing-foot .brand{color:#fff;margin-bottom:.8rem;font-size:1.16rem}
.landing-foot .brand .coin{width:24px;height:24px;flex:none;background:url("/landing-assets/credcoin-mark.svg") center/contain no-repeat}
.landing-foot .foot-blurb{max-width:30ch;font-size:.9rem;color:var(--p-100)}
.landing-foot .foot-contact{margin-top:.9rem;font-size:.9rem;line-height:1.8}
.landing-foot .foot-contact a{color:var(--gold-300)}
.landing-foot .foot-contact a:hover{color:var(--gold-200)}
.landing-foot .foot-h{font:600 .7rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-300);margin-bottom:.9rem}
.landing-foot .foot-col a{display:block;color:var(--p-100);font-size:.9rem;margin-bottom:.55rem;transition:color .15s}
.landing-foot .foot-col a:hover{color:var(--gold-300)}
.landing-foot .foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;padding-top:1.6rem;font-size:.84rem;color:var(--p-300)}
.landing-foot .mono{font-family:var(--mono)}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media(max-width:980px){
  .flowline{grid-template-columns:repeat(2,1fr)}
  .fstep .farr{display:none}
  .landing-foot .foot-top{grid-template-columns:1fr 1fr}
}
@media(max-width:880px){
  .layout{grid-template-columns:1fr}
  .toc{display:none}
  .step-body{padding-left:0}
  .where{margin-left:0}
  .step-head{flex-wrap:wrap}
  .hub-grid{grid-template-columns:1fr}
  .entrada{grid-template-columns:1fr}
  .entrada-print{position:static;margin-top:1.6rem}
}
@media(max-width:640px){
  .entra-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .flowline{grid-template-columns:1fr}
  .landing-foot .foot-top{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .hero-in{animation:none}
  html{scroll-behavior:auto}
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print{
  body{background:#fff}
  .topbar,.toc,.copybtn,footer.pgfoot .prevnext,.landing-foot{display:none}
  .hero{color:#111;background:#fff;border-bottom:2px solid #111;padding:1rem 0}
  .hero-in{animation:none}
  .eyebrow,.hero .audience{display:none}
  .hero h1 .or,.hero h1 .it,.hero h1 .gold{color:#111}
  .hero p.lead{color:#333}
  .layout{grid-template-columns:1fr;max-width:none}
  .step,.callout,.gloss,.tablewrap,.sources a,.gcard,.fstep,.browser,.phone,.cred{break-inside:avoid;box-shadow:none}
  /* O cartão de acesso é o que se imprime pra entregar no balcão — sem chapado de tinta */
  .cred{background:#fff;color:#111;border:1.5px solid #111}
  .cred-brand,.cred-fields dt{color:#444}
  .cred-fields dd span,.cred-foot{color:#333}
  .cred-chip{display:none}
  .cred-foot{border-top-color:#bbb}
  .entrada{grid-template-columns:1fr}
  .wa{display:none}
  .codeblock pre{background:#f3f4f7;color:#111;border:1px solid #ccc}
  a{color:#111}
}