/* ───────────────────────────────────────────────────────────────────────────
   Radar do Crédito - landing.
   Mesmo sistema visual da landing do Qualificou (09-crm), na paleta amarela
   da marca. Tokens em HSL para landing e produto nunca divergirem.

   ⚠️ AMARELO NÃO É COR DE TEXTO. #FFCE00 sobre branco tem contraste ~1.7:1 -
   ilegível. Por isso existem TRÊS tokens onde o vermelho do CRM precisava de
   um: `--primary` preenche, `--primary-fg` é o texto EM CIMA do amarelo (o
   preto da marca, não branco), e `--primary-text` é o amarelo escurecido para
   quando a cor da marca precisa aparecer COMO texto sobre fundo claro.
   ─────────────────────────────────────────────────────────────────────────── */
:root{
  --primary:48 100% 50%;        --primary-fg:60 16% 9%;
  --primary-text:42 100% 29%;
  --accent:48 100% 50%;         --accent-fg:60 16% 9%;
  --info:45 96% 46%;
  --preto:60 16% 9%;            --preto-2:60 12% 14%;
  --warning:38 92% 50%;
  --success:145 60% 33%;
  --destructive:0 72% 48%;
  --bg:60 20% 98%;              --fg:0 0% 24%;
  --card:0 0% 100%;
  --muted:60 14% 96%;           --muted-fg:0 0% 45%;
  --border:60 8% 90%;
  --radius:.5rem;

  --ink:hsl(60 16% 9%);
  --max:1180px;
  --shadow-sm:0 1px 2px hsl(60 16% 9% / .06), 0 1px 3px hsl(60 16% 9% / .1);
  --shadow-md:0 4px 12px hsl(60 16% 9% / .08), 0 2px 4px hsl(60 16% 9% / .06);
  --shadow-lg:0 12px 32px hsl(60 16% 9% / .12), 0 4px 8px hsl(60 16% 9% / .06);
  --shadow-cta:0 6px 20px hsl(var(--primary) / .5);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{
  margin:0;background:hsl(var(--bg));color:hsl(var(--fg));
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,.display{font-family:"Plus Jakarta Sans",Inter,sans-serif;color:var(--ink);
  letter-spacing:-.025em;line-height:1.12;margin:0}
h1{font-size:clamp(34px,5.4vw,60px);font-weight:800}
h2{font-size:clamp(28px,3.8vw,44px);font-weight:800}
h3{font-size:clamp(19px,1.6vw,22px);font-weight:700;line-height:1.3}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;
  background:hsl(var(--muted));padding:2px 6px;border-radius:5px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;
  letter-spacing:.02em;text-transform:uppercase;color:hsl(var(--primary-text));
  background:hsl(var(--primary) / .16);border:1px solid hsl(var(--primary) / .45);
  border-radius:999px;padding:7px 15px}
.lead{font-size:clamp(17px,1.5vw,20px);color:hsl(var(--muted-fg));line-height:1.6}
.section{padding:clamp(64px,8vw,110px) 0}
.center{text-align:center}
.section-head{max-width:760px;margin:0 auto clamp(40px,5vw,64px)}
.dark-sec .section-head:not(.center){margin-left:0;max-width:860px}
.dark-sec .section-head:not(.center) .lead{max-width:70ch}
.section-head.center{text-align:center}
.section-head p{margin-top:16px}
:focus-visible{outline:3px solid hsl(var(--primary-text));outline-offset:2px;border-radius:6px}

/* ── Botões ────────────────────────────────────────────────────────────────
   O CTA é o AMARELO da marca com tinta escura em cima - é o par de maior
   contraste da paleta. Nas superfícies escuras ele CONTINUA amarelo (ao
   contrário do CRM, que inverte pra branco): amarelo sobre preto é onde essa
   cor mais aparece, então inverter jogaria fora o melhor contraste que temos. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 28px;border-radius:calc(var(--radius) + 2px);font-weight:700;font-size:16px;
  border:1.5px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s;
  font-family:Inter,sans-serif;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-cta{background:hsl(var(--primary));color:hsl(var(--primary-fg));box-shadow:var(--shadow-cta)}
.btn-cta:hover{background:hsl(48 100% 58%);box-shadow:0 8px 26px hsl(var(--primary) / .6);transform:translateY(-2px)}
.btn-primary{background:hsl(var(--primary));color:hsl(var(--primary-fg));box-shadow:var(--shadow-md)}
.btn-primary:hover{background:hsl(48 100% 58%);transform:translateY(-2px)}
.btn-ghost{background:hsl(var(--card));border-color:hsl(var(--border));color:var(--ink)}
.btn-ghost:hover{background:hsl(var(--muted));border-color:hsl(var(--primary))}
.dark-sec .btn-ghost,.form-sec .btn-ghost{background:transparent;border-color:hsl(0 0% 100% / .4);color:#fff}
.dark-sec .btn-ghost:hover{background:hsl(0 0% 100% / .12)}
.btn-lg{padding:18px 34px;font-size:17px}
.btn-sm{padding:10px 18px;font-size:14.5px}
.btn-block{width:100%}

/* ── Revelação no scroll ───────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .55s,transform .55s}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ── Header ────────────────────────────────────────────────────────────────
   Sticky com dropdown por área (padrão do airbroker.com.br). A barra é cheia
   na cor da marca: a faixa inteira é amarela e tudo em cima dela é a tinta
   escura - inclusive o CTA, que aqui vira PRETO, porque amarelo sobre amarelo
   não teria contraste nenhum.                                                */
header{position:sticky;top:0;z-index:60;background:hsl(var(--primary));
  border-bottom:1px solid hsl(60 16% 9% / .16)}
.nav{display:flex;align-items:center;gap:8px;height:72px}
.brand{display:flex;align-items:center;gap:10px;font-family:"Plus Jakarta Sans",sans-serif;
  font-weight:800;font-size:20px;letter-spacing:-.03em;color:hsl(var(--primary-fg));margin-right:8px}
.brand svg{flex:none}
.menu{display:flex;align-items:center;gap:2px;margin-left:6px}
.menu-item{position:relative}
.menu-btn{display:flex;align-items:center;gap:5px;padding:10px 14px;border-radius:var(--radius);
  font-size:15.5px;font-weight:700;color:hsl(var(--primary-fg));background:none;border:0;cursor:pointer;
  font-family:Inter,sans-serif}
.menu-btn:hover{background:hsl(60 16% 9% / .1)}
.menu-link{display:flex;align-items:center;padding:10px 14px;border-radius:var(--radius);
  font-size:15.5px;font-weight:700;color:hsl(var(--primary-fg));white-space:nowrap}
.menu-link:hover{background:hsl(60 16% 9% / .1)}
.menu-btn svg{transition:transform .2s}
.menu-item[data-open="true"] .menu-btn{background:hsl(60 16% 9% / .14)}
.menu-item[data-open="true"] .menu-btn svg{transform:rotate(180deg)}
.dropdown{position:absolute;top:calc(100% + 10px);left:0;min-width:330px;
  background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:14px;
  box-shadow:var(--shadow-lg);padding:10px;opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:.18s;z-index:70}
.menu-item[data-open="true"] .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dd-link{display:flex;gap:12px;padding:11px 12px;border-radius:10px;transition:background .13s}
.dd-link:hover{background:hsl(var(--primary) / .14)}
.dd-ico{flex:none;width:36px;height:36px;border-radius:9px;display:grid;place-items:center;
  background:hsl(var(--primary) / .22);color:hsl(var(--primary-text))}
.dd-tt{display:block;font-weight:700;font-size:15px;color:var(--ink);line-height:1.35}
.dd-ds{display:block;font-size:13.5px;color:hsl(var(--muted-fg));line-height:1.45;margin-top:2px}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.phone{display:flex;align-items:center;gap:9px;padding:9px 15px;border-radius:999px;
  background:transparent;border:1px solid transparent;
  color:hsl(var(--primary-fg));font-weight:800;font-size:15px;transition:.15s}
.phone:hover{background:hsl(60 16% 9% / .1)}
.phone small{display:block;font-size:10.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;opacity:.72;line-height:1}
header .btn-ghost{background:transparent;border-color:hsl(60 16% 9% / .35);color:hsl(var(--primary-fg))}
header .btn-ghost:hover{background:hsl(60 16% 9% / .1);border-color:hsl(60 16% 9% / .6)}
header .btn-cta{background:hsl(var(--preto));color:#fff;box-shadow:none}
header .btn-cta:hover{background:hsl(var(--preto-2));transform:translateY(-1px);box-shadow:none}
.burger{display:none;background:none;border:1px solid hsl(60 16% 9% / .35);
  color:hsl(var(--primary-fg));border-radius:10px;width:44px;height:44px;cursor:pointer;place-items:center}

/* Gaveta do mobile: menu de 4 áreas não cabe numa barra de 360px. */
.sheet{position:fixed;inset:0;z-index:90;background:hsl(60 16% 9% / .5);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:.22s}
.sheet[data-open="true"]{opacity:1;visibility:visible}
.sheet-panel{position:absolute;right:0;top:0;bottom:0;width:min(360px,88vw);background:hsl(var(--card));
  padding:22px;overflow-y:auto;transform:translateX(100%);transition:transform .26s}
.sheet[data-open="true"] .sheet-panel{transform:none}
.sheet-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.sheet-close{background:none;border:0;font-size:28px;line-height:1;cursor:pointer;color:hsl(var(--muted-fg))}
.sheet-panel h4{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:hsl(var(--muted-fg));
  margin:22px 0 8px;font-family:Inter,sans-serif}
.sheet-panel a.m{display:block;padding:11px 12px;border-radius:10px;font-weight:600;color:var(--ink)}
.sheet-panel a.m:hover{background:hsl(var(--muted))}
.sheet-panel .btn{margin-top:10px}

@media (max-width:980px){.f-grid{grid-template-columns:1fr 1fr}}
@media (max-width:860px){
  .menu,.nav-right .btn-ghost{display:none}
  .burger{display:grid}
  .phone small{display:none}
  .phone{padding:9px 13px}
  body{font-size:16px}
}
@media (max-width:640px){
  .btn{white-space:normal}
  .btn-lg{padding:16px 22px;font-size:16px}
  .nav-right .btn-cta{display:none}
  .phone span{display:none}
  .phone{padding:10px;border-radius:50%;gap:0}
  .nav{gap:10px}
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero{position:relative;padding:clamp(52px,7vw,88px) 0 clamp(48px,6vw,72px);overflow:hidden}
.hero::before{content:"";position:absolute;inset:-40% 0 auto;height:120%;z-index:-1;
  background:radial-gradient(60% 55% at 50% 0%, hsl(var(--primary) / .28), transparent 70%)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,4vw,60px);align-items:center}
/* Destaque por marca-texto: amarelo puro como COR de letra sumiria no branco,
   então ele entra por trás da palavra, como grifo. */
.hero h1 .hl{position:relative;white-space:nowrap}
.hero h1 .hl::after{content:"";position:absolute;left:-.04em;right:-.04em;bottom:.06em;height:.34em;
  background:hsl(var(--primary));border-radius:3px;z-index:-1}
.hero .lead{margin:22px 0 30px;max-width:590px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.cta-note{margin-top:18px;display:flex;gap:18px;flex-wrap:wrap;font-size:14px;color:hsl(var(--muted-fg))}
.cta-note span{display:flex;align-items:center;gap:7px}
.tick{color:hsl(var(--success));flex:none}

/* ── Slider ────────────────────────────────────────────────────────────── */
.slider{position:relative}
.slide-view{position:relative;display:grid}
.slide{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .45s,transform .45s,visibility .45s}
.slide[data-active="true"]{opacity:1;visibility:visible;transform:none}
.slide-art{border-radius:18px;overflow:hidden;background:hsl(var(--card));
  border:1px solid hsl(var(--border));box-shadow:var(--shadow-lg)}
.slide-art svg{display:block;width:100%;height:auto}
.slide-body{margin-top:20px}
.slide-tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:hsl(var(--primary-text));margin-bottom:9px}
.slide-body h3{margin-bottom:7px}
.slide-body p{font-size:15.5px;color:hsl(var(--muted-fg));line-height:1.55;min-height:4.6em;max-width:52ch}
.slide-nav{display:flex;align-items:center;gap:16px;margin-top:24px}
.slide-nav > button{width:40px;height:40px;flex:none;border-radius:50%;border:1.5px solid hsl(var(--border));
  background:hsl(var(--card));cursor:pointer;display:grid;place-items:center;color:var(--ink);
  transition:background .15s,border-color .15s}
.slide-nav > button:hover{background:hsl(var(--primary));border-color:hsl(var(--primary));color:hsl(var(--primary-fg))}
.dots{display:flex;gap:8px;flex:1;justify-content:center;padding:0}
.dot{width:28px;height:6px;border-radius:99px;background:hsl(var(--border));border:0;cursor:pointer;
  padding:0;transition:background .2s,width .2s}
.dot[aria-selected="true"]{background:hsl(var(--primary-text));width:40px}

/* ── Barra de números ──────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;
  background:hsl(var(--border));border:1px solid hsl(var(--border));border-radius:16px;
  overflow:hidden;margin-top:clamp(44px,5vw,64px)}
.stat{background:hsl(var(--card));padding:26px 22px;text-align:center}
.stat b{display:block;font-family:"Plus Jakarta Sans",sans-serif;font-size:clamp(26px,3vw,34px);
  font-weight:800;color:hsl(var(--primary-text));letter-spacing:-.03em;line-height:1.1}
.stat span{display:block;margin-top:6px;font-size:14px;color:hsl(var(--muted-fg));line-height:1.4}

/* ── Faixa de confiança ────────────────────────────────────────────────── */
.trustbar{border-top:1px solid hsl(var(--border));border-bottom:1px solid hsl(var(--border));
  background:hsl(var(--card));padding:18px 0}
.trustbar ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:14px 34px}
.trustbar li{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;color:hsl(var(--muted-fg))}
.trustbar svg{flex:none;color:hsl(var(--primary-text))}

@media (max-width:980px){.hero-grid{grid-template-columns:1fr}}
@media (max-width:640px){
  .hero-grid > *{min-width:0}
  .cta-row .btn{width:100%}
}

/* ── Cards genéricos ───────────────────────────────────────────────────── */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:16px;
  padding:28px;transition:transform .18s,box-shadow .18s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.card h3{margin-bottom:9px}
.card p{font-size:15.5px;color:hsl(var(--muted-fg));line-height:1.6}
.ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px}
.ico-pain{background:hsl(var(--destructive) / .12);color:hsl(var(--destructive))}
.ico-ok{background:hsl(var(--primary) / .22);color:hsl(var(--primary-text))}
.cost{display:inline-block;margin-top:14px;font-size:13.5px;font-weight:700;
  color:hsl(0 72% 45%);background:hsl(var(--destructive) / .1);padding:5px 11px;border-radius:7px}

/* ── Seção escura ──────────────────────────────────────────────────────── */
.dark-sec{background:hsl(var(--preto));color:hsl(0 0% 86%)}
.dark-sec h2,.dark-sec h3{color:#fff}
.dark-sec .lead{color:hsl(0 0% 74%)}
.dark-sec .card{background:hsl(var(--preto-2));border-color:hsl(0 0% 22%)}
.dark-sec .card p{color:hsl(0 0% 74%)}
/* No escuro o amarelo volta a ser cor de texto: contraste sobra. */
.dark-sec .eyebrow{background:hsl(var(--primary) / .16);border-color:hsl(var(--primary) / .4);
  color:hsl(var(--primary))}
.dark-sec .ico-ok{background:hsl(var(--primary) / .18);color:hsl(var(--primary))}

/* ── Passos ────────────────────────────────────────────────────────────── */
.steps{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.step{position:relative;background:hsl(var(--card));border:1px solid hsl(var(--border));
  border-radius:16px;padding:30px 26px 26px}
.step-n{position:absolute;top:-15px;left:26px;width:38px;height:38px;border-radius:11px;
  background:hsl(var(--primary));color:hsl(var(--primary-fg));display:grid;place-items:center;font-weight:800;
  font-family:"Plus Jakarta Sans",sans-serif;box-shadow:var(--shadow-md)}
.step h3{margin:10px 0 8px}
.step p{font-size:15.5px;color:hsl(var(--muted-fg))}
.step .time{display:inline-block;margin-top:14px;font-size:13px;font-weight:700;
  color:hsl(var(--primary-text));background:hsl(var(--primary) / .2);padding:5px 11px;border-radius:7px}

/* ── Linha do tempo ────────────────────────────────────────────────────── */
.tl-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.tl-col{border:1px solid hsl(var(--border));border-radius:18px;padding:26px 24px;background:hsl(var(--card))}
.tl-col.bad{background:hsl(var(--preto-2));border-color:hsl(0 0% 22%)}
.tl-col.good{border-color:hsl(var(--primary) / .6);box-shadow:var(--shadow-md)}
.tl-cap{display:flex;align-items:center;gap:10px;font-family:"Plus Jakarta Sans",sans-serif;
  font-weight:800;font-size:19px;margin-bottom:20px}
.tl-col.bad .tl-cap{color:#fff}
.tl-col.good .tl-cap{color:hsl(var(--primary-text))}
.tl{list-style:none;margin:0;padding:0;position:relative}
.tl li{position:relative;padding:0 0 22px 34px}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:"";position:absolute;left:8px;top:7px;width:11px;height:11px;border-radius:50%;
  background:hsl(var(--muted-fg))}
.tl li::after{content:"";position:absolute;left:13px;top:18px;bottom:0;width:1px;background:hsl(var(--border))}
.tl li:last-child::after{display:none}
.tl-col.bad .tl li::before{background:hsl(var(--destructive))}
.tl-col.bad .tl li::after{background:hsl(0 0% 26%)}
.tl-col.good .tl li::before{background:hsl(var(--primary))}
.tl-when{display:block;font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:hsl(var(--muted-fg));margin-bottom:3px}
.tl-col.bad .tl-when{color:hsl(0 0% 60%)}
.tl-what{font-size:15.5px;line-height:1.55}
.tl-col.bad .tl-what{color:hsl(0 0% 82%)}
.tl-end{margin-top:22px;padding-top:18px;border-top:1px dashed hsl(var(--border));font-weight:700;font-size:15.5px}
.tl-col.bad .tl-end{border-top-color:hsl(0 0% 26%);color:hsl(var(--destructive))}
.tl-col.good .tl-end{color:hsl(var(--primary-text))}

/* ── Comparativo ───────────────────────────────────────────────────────── */
.cmp{display:grid;grid-template-columns:1fr;border-radius:20px;overflow:hidden;box-shadow:var(--shadow-lg)}
.cmp-pair{display:contents}
.cmp-cell{display:flex;gap:16px;padding:20px 24px;align-items:flex-start}
.cmp-cell.old{background:hsl(var(--muted));color:hsl(var(--muted-fg));border-top:1px solid hsl(var(--border))}
.cmp-cell.new{background:hsl(var(--card));border-top:1px solid hsl(var(--border))}
.cmp-cap{display:block;padding:24px}
.cmp-cell.old.cmp-cap{border-top:none}
.cmp-cell.new.cmp-cap{background:hsl(var(--primary));color:hsl(var(--primary-fg));border-top:none}
.cmp-kicker{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1.3px;opacity:.75}
.cmp-title{display:block;margin-top:8px;font-family:"Plus Jakarta Sans",sans-serif;font-size:19px;
  font-weight:800;letter-spacing:-.4px;line-height:1.25}
.cmp-cell.old .cmp-title{color:var(--ink)}
.cmp-cell b{display:block;font-size:15.5px;font-weight:800;line-height:1.4;color:var(--ink)}
.cmp-cell.old b{color:hsl(var(--muted-fg))}
.cmp-desc{display:block;margin-top:4px;font-size:13.5px;line-height:1.55;color:hsl(var(--muted-fg))}
.cmp-ico{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-size:13px;font-weight:900;line-height:1;margin-top:1px}
.cmp-cell.old .cmp-ico{background:hsl(0 0% 87%);color:hsl(var(--muted-fg))}
.cmp-cell.new .cmp-ico{background:hsl(var(--primary));color:hsl(var(--primary-fg))}
.cmp-vs{display:grid;place-items:center;background:hsl(var(--bg));padding:16px 0}
.cmp-vsbadge{width:52px;height:52px;border-radius:50%;background:hsl(var(--preto));color:hsl(var(--primary));
  font-family:"Plus Jakarta Sans",sans-serif;font-weight:800;font-size:14px;display:grid;place-items:center}
@media (min-width:721px){
  .cmp{grid-template-columns:1fr 72px 1fr}
  .cmp-cell.old{grid-column:1}
  .cmp-cell.new{grid-column:3}
  .cmp-vs{grid-column:2;grid-row:1/-1;background:transparent;align-content:start;padding-top:104px}
  .cmp-vsbadge{position:sticky;top:45vh}
}
@media (max-width:640px){.cmp-cell b,.cmp-desc{overflow-wrap:anywhere}.cmp > *{min-width:0}}

/* ── Integrações ───────────────────────────────────────────────────────── */
.api{display:grid;gap:34px;grid-template-columns:1.05fr .95fr;align-items:center}
.api-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:11px}
.api-list li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;color:hsl(var(--muted-fg))}
.api-list svg{flex:none;margin-top:4px;color:hsl(var(--primary-text))}
.code{background:hsl(var(--preto));border-radius:16px;padding:22px;overflow-x:auto;box-shadow:var(--shadow-lg)}
.code pre{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;
  line-height:1.75;color:hsl(0 0% 88%);white-space:pre}
.code .c-key{color:hsl(var(--primary))}
.code .c-str{color:hsl(140 45% 62%)}
.code .c-cmt{color:hsl(0 0% 52%)}
@media (max-width:860px){.api{grid-template-columns:1fr}}

/* ── A conta que ninguém faz ───────────────────────────────────────────── */
.calc{display:grid;gap:24px;grid-template-columns:1.05fr .95fr;align-items:start;
  background:hsl(var(--preto-2));border:1px solid hsl(0 0% 22%);border-radius:20px;padding:28px}
.calc-fields{display:grid;gap:18px}
.calc-field label{display:block;font-size:14.5px;font-weight:600;color:hsl(0 0% 78%);margin-bottom:8px}
.calc-input{display:flex;align-items:center;gap:8px;background:hsl(0 0% 10%);
  border:1px solid hsl(0 0% 28%);border-radius:12px;padding:12px 14px}
.calc-input span{font-size:15px;font-weight:700;color:hsl(0 0% 60%)}
.calc-input input{flex:1;min-width:0;background:transparent;border:0;outline:none;color:#fff;
  font-family:"Plus Jakarta Sans",sans-serif;font-size:19px;font-weight:700}
.calc-input:focus-within{border-color:hsl(var(--primary));box-shadow:0 0 0 3px hsl(var(--primary) / .25)}
.calc-out{background:hsl(var(--primary));color:hsl(var(--primary-fg));border-radius:16px;
  padding:30px 26px;box-shadow:0 24px 60px -24px hsl(var(--primary) / .9)}
.calc-label{font-size:12px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;opacity:.72}
.calc-value{display:block;margin:10px 0 16px;font-family:"Plus Jakarta Sans",sans-serif;font-weight:800;
  font-size:clamp(36px,5.6vw,58px);line-height:1;letter-spacing:-2px;font-variant-numeric:tabular-nums}
.calc-detail{font-size:14.5px;line-height:1.6;max-width:52ch;opacity:.92}
.calc-detail strong{opacity:1}
.calc-note{max-width:640px;margin:26px 0 0;padding:2px 0 2px 16px;border-left:3px solid hsl(var(--primary));
  font-size:15px;line-height:1.6;color:hsl(0 0% 72%)}
@media (max-width:760px){.calc{grid-template-columns:1fr;padding:22px}}

/* ── Formulário ────────────────────────────────────────────────────────────
   A faixa é AMARELA com tinta escura, não amarelo com branco: aqui a leitura
   é longa e o par amarelo/preto é o único que aguenta parágrafo inteiro. */
.form-sec{background:linear-gradient(160deg,hsl(48 100% 52%) 0%,hsl(44 100% 45%) 100%);
  color:hsl(var(--primary-fg))}
.form-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center}
.form-sec h2{color:hsl(var(--primary-fg))}
.form-sec .lead{color:hsl(60 16% 9% / .82)}
.form-sec .eyebrow{background:hsl(60 16% 9% / .1);border-color:hsl(60 16% 9% / .3);color:hsl(var(--primary-fg))}
.check-list{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px}
.check-list li{display:flex;gap:11px;align-items:flex-start;font-size:16px;color:hsl(60 16% 9% / .88)}
.check-list svg{flex:none;margin-top:4px;color:hsl(var(--preto))}
.form-sec .btn-cta{background:hsl(var(--preto));color:#fff;box-shadow:0 6px 20px hsl(60 16% 9% / .35)}
.form-sec .btn-cta:hover{background:hsl(var(--preto-2));box-shadow:0 8px 26px hsl(60 16% 9% / .45)}
.form-card{background:#fff;border-radius:18px;padding:clamp(24px,3vw,34px);box-shadow:var(--shadow-lg);
  color:hsl(var(--fg))}
.form-card h3{margin-bottom:6px}
.form-card .sub{font-size:14.5px;color:hsl(var(--muted-fg));margin-bottom:22px}
.field{margin-bottom:15px}
.field label{display:block;font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:6px}
.field input,.field select{width:100%;padding:13px 15px;border:1.5px solid hsl(var(--border));
  border-radius:var(--radius);font-size:16px;font-family:Inter,sans-serif;color:var(--ink);
  background:#fff;transition:border-color .15s,box-shadow .15s}
.field input:focus,.field select:focus{outline:0;border-color:hsl(var(--primary-text));
  box-shadow:0 0 0 3px hsl(var(--primary) / .3)}
.field input[aria-invalid="true"]{border-color:hsl(var(--destructive))}
.err{display:none;font-size:13px;color:hsl(var(--destructive));margin-top:5px;font-weight:600}
.field[data-err="true"] .err{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.consent{display:flex;gap:10px;align-items:flex-start;margin:4px 0 16px;font-size:13px;
  color:hsl(var(--muted-fg));line-height:1.5;cursor:pointer}
.consent input{margin-top:3px;width:17px;height:17px;flex:none;accent-color:hsl(var(--primary-text))}
.form-foot{font-size:12.5px;color:hsl(var(--muted-fg));text-align:center;margin-top:14px;line-height:1.5}
.form-ok{display:none;text-align:center;padding:26px 8px}
.form-ok svg{color:hsl(var(--success));margin-bottom:14px}
.form-card[data-sent="true"] form,.form-card[data-sent="true"] .form-foot{display:none}
.form-card[data-sent="true"] .form-ok{display:block}
@media (max-width:980px){.form-grid{grid-template-columns:1fr}}
@media (max-width:640px){.form-grid > *{min-width:0}}

/* ── Preço ─────────────────────────────────────────────────────────────── */
.price-card{max-width:560px;margin:0 auto;background:hsl(var(--card));border:2px solid hsl(var(--primary));
  border-radius:20px;padding:clamp(28px,4vw,40px);text-align:center;box-shadow:var(--shadow-lg);position:relative}
.price-anchor{font-size:15px;color:hsl(var(--muted-fg))}
.price-big{font-family:"Plus Jakarta Sans",sans-serif;font-size:clamp(34px,5vw,48px);font-weight:800;
  color:var(--ink);letter-spacing:-.035em;line-height:1.05;margin:6px 0}
.price-big small{font-size:17px;font-weight:600;color:hsl(var(--muted-fg));letter-spacing:0}
.price-list{list-style:none;padding:0;margin:24px 0;display:grid;gap:11px;text-align:left}
.price-list li{display:flex;gap:10px;font-size:15.5px}
.price-list svg{flex:none;margin-top:5px;color:hsl(var(--primary-text))}

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.faq{max-width:820px;margin:0 auto;display:grid;gap:12px}
.q{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:14px;overflow:hidden}
.q summary{padding:20px 24px;font-weight:700;font-size:16.5px;color:var(--ink);cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;
  font-family:"Plus Jakarta Sans",sans-serif}
.q summary::-webkit-details-marker{display:none}
.q summary::after{content:"+";font-size:24px;font-weight:400;color:hsl(var(--primary-text));flex:none;line-height:1}
.q[open] summary::after{content:"−"}
.q p{padding:0 24px 22px;font-size:15.5px;color:hsl(var(--muted-fg));line-height:1.65}

/* ── CTA final + rodapé ────────────────────────────────────────────────── */
.final{background:hsl(var(--preto));color:#fff;text-align:center}
.final h2{color:#fff;max-width:760px;margin:0 auto 18px}
.final .lead{color:hsl(0 0% 72%);max-width:620px;margin:0 auto 34px}
.final .micro{margin-top:18px;font-size:14px;color:hsl(0 0% 60%)}
footer{background:hsl(60 14% 5%);color:hsl(0 0% 68%);padding:60px 0 30px;font-size:15px}
.f-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:36px}
.f-brand{display:flex;align-items:center;gap:10px;font-family:"Plus Jakarta Sans",sans-serif;
  font-weight:800;font-size:20px;color:#fff;margin-bottom:14px}
.f-about{max-width:34ch;line-height:1.6;font-size:14.5px}
.f-contact{margin-top:16px;font-size:14.5px;line-height:1.8}
.f-contact a{color:hsl(var(--primary));font-weight:700}
.f-col h4{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:hsl(0 0% 55%);margin:0 0 14px}
.f-col a{display:block;padding:5px 0;color:hsl(0 0% 78%);transition:color .13s}
.f-col a:hover{color:#fff}
.f-bottom{border-top:1px solid hsl(0 0% 16%);margin-top:44px;padding-top:24px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;color:hsl(0 0% 52%)}
@media (max-width:560px){.f-grid{grid-template-columns:1fr}}

/* ── Chat flutuante ────────────────────────────────────────────────────── */
.chat{position:fixed;right:22px;bottom:22px;z-index:80;display:flex;flex-direction:column;
  align-items:flex-end;gap:12px}
.chat-panel{width:min(320px,calc(100vw - 32px));background:hsl(var(--card));
  border:1px solid hsl(var(--border));border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden;
  opacity:0;transform:translateY(10px) scale(.96);transform-origin:100% 100%;transition:.25s;pointer-events:none}
.chat[data-show="true"] .chat-panel{opacity:1;transform:none;pointer-events:auto}
.chat-head{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;
  background:hsl(var(--primary));color:hsl(var(--primary-fg))}
.chat-head strong{display:block;font-family:"Plus Jakarta Sans",sans-serif;font-size:15px;font-weight:800;line-height:1.3}
.chat-avatar{font-size:20px;line-height:1.2}
.chat-hours{display:block;margin-top:2px;font-size:12px;font-weight:600;opacity:.72}
.chat-close{margin-left:auto;background:transparent;border:0;padding:0 2px;font-size:22px;line-height:1;
  cursor:pointer;color:hsl(var(--primary-fg))}
.chat-intro{padding:16px 18px 8px;font-size:14px;line-height:1.55;color:hsl(var(--muted-fg))}
.chat-links{display:grid;gap:8px;padding:8px 18px 18px}
.chat-link{display:block;padding:11px 14px;border:1.5px solid hsl(var(--border));border-radius:12px;
  font-size:14.5px;font-weight:700;color:var(--ink);transition:background .15s,border-color .15s}
.chat-link:hover{background:hsl(var(--muted));border-color:hsl(var(--primary))}
/* O botão fica no verde do WhatsApp, não no amarelo: é o sinal que a pessoa
   já reconhece sem ler nada - trocar por cor de marca custaria esse atalho. */
.chat-btn{position:relative;width:60px;height:60px;border-radius:50%;background:#25D366;border:0;cursor:pointer;
  display:grid;place-items:center;color:#fff;box-shadow:0 6px 20px hsl(142 70% 30% / .5);transition:transform .18s}
.chat-btn:hover{transform:scale(1.07)}
.chat-btn::after{content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 0 0 hsl(142 70% 45% / .5);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 16px hsl(142 70% 45% / 0)}100%{box-shadow:0 0 0 0 hsl(142 70% 45% / 0)}}
@media (prefers-reduced-motion:reduce){.chat-btn::after{animation:none}}

/* ── Caixa de saída ────────────────────────────────────────────────────── */
.exit{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:22px;
  background:hsl(60 16% 9% / .62);backdrop-filter:blur(3px)}
.exit[hidden]{display:none}
.exit-card{position:relative;width:min(520px,100%);background:hsl(var(--card));border-radius:20px;
  padding:clamp(26px,4vw,40px);box-shadow:var(--shadow-lg);text-align:center}
.exit-card h2{font-size:clamp(23px,3vw,30px)}
.exit-card p{margin-top:14px;color:hsl(var(--muted-fg));font-size:16.5px;line-height:1.6}
.exit-ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:24px}
.exit-close{position:absolute;top:14px;right:16px;background:transparent;border:0;font-size:26px;
  line-height:1;cursor:pointer;color:hsl(var(--muted-fg))}

/* ── Página pública de documentação (/docs) ───────────────────────────────
   Mesmos tokens da landing: quem sai do site e entra na doc continua na
   mesma marca. Layout de duas colunas com índice fixo - documentação longa
   sem índice obriga a rolar procurando. */

.doc-top {
  position: sticky; top: 0; z-index: 40;
  background: hsl(var(--primary)); border-bottom: 1px solid hsl(60 16% 9% / .14);
}
.doc-top__inner {
  max-width: var(--max); margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; gap: 16px;
}
.doc-marca {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 18px;
  letter-spacing: -.4px; color: hsl(var(--primary-fg));
}
.doc-top__tag {
  font-size: 13px; font-weight: 700; color: hsl(60 16% 9% / .7);
  padding-left: 16px; border-left: 1px solid hsl(60 16% 9% / .25);
}
.doc-top .doc-btn { margin-left: auto; }

.doc-wrap {
  max-width: var(--max); margin: 0 auto; padding: 40px 24px 80px;
  display: grid; gap: 48px; align-items: start;
}

/* Índice */
.doc-nav { display: grid; gap: 2px; }
.doc-nav__titulo {
  font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
  color: hsl(var(--muted-fg)); margin-bottom: 8px;
}
.doc-nav a {
  padding: 7px 12px; border-radius: 8px; font-size: 14px; color: hsl(var(--muted-fg));
  border-left: 2px solid transparent;
}
.doc-nav a:hover { background: hsl(var(--muted)); color: var(--ink); }

/* Conteúdo */
/* Mesma razão do minmax acima: sem isto o filho largo dita a largura da coluna. */
.doc-conteudo { min-width: 0; }
.doc-conteudo h1 { font-size: clamp(30px, 4vw, 42px); margin-bottom: 12px; }
.doc-conteudo h2 { font-size: clamp(22px, 2.6vw, 28px); margin-bottom: 10px; }
.doc-conteudo h3 { font-size: 17px; margin: 24px 0 8px; }
.doc-conteudo h4 { font-size: 14px; margin: 20px 0 8px; color: hsl(var(--muted-fg)); }
.doc-conteudo p { margin-bottom: 12px; line-height: 1.7; }
.doc-lead { font-size: 17px; color: hsl(var(--muted-fg)); max-width: 68ch; }
.doc-sec { padding: 36px 0; border-top: 1px solid hsl(var(--border)); }
.doc-sec:first-of-type { border-top: none; padding-top: 20px; }

/* Passos numerados */
.doc-passos { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 22px; }
.doc-passos li { display: flex; gap: 16px; align-items: flex-start; }
.doc-passos__n {
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  background: hsl(var(--primary)); color: hsl(var(--primary-fg));
  display: grid; place-items: center; font-weight: 800; font-size: 14px;
  font-family: "Plus Jakarta Sans", sans-serif;
}
.doc-passos h3 { margin: 2px 0 6px; font-size: 16.5px; }

/* Chaves de acesso */
.doc-chaves { display: grid; gap: 16px; margin: 20px 0; }
.doc-chave {
  border: 1px solid hsl(var(--border)); border-radius: 14px; padding: 20px;
  background: hsl(var(--card));
}
.doc-chave h3 { margin: 0 0 8px; }
.doc-chave__prefixo {
  display: inline-block; background: hsl(var(--primary) / .2);
  color: hsl(var(--primary-text)); padding: 3px 10px; border-radius: 999px;
  font-weight: 700; margin-bottom: 10px;
}
.doc-chave__como { color: hsl(var(--muted-fg)); font-size: 14px; }

/* Endpoint */
.doc-endpoint__cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.doc-metodo {
  font-family: ui-monospace, monospace; font-size: 12px; font-weight: 800;
  padding: 4px 10px; border-radius: 6px; letter-spacing: .5px;
}
.doc-metodo--post { background: hsl(var(--primary)); color: hsl(var(--primary-fg)); }
.doc-metodo--get { background: hsl(var(--preto)); color: hsl(var(--primary)); }
/* DELETE é destrutivo: vermelho, pra não passar por GET numa leitura rápida. */
.doc-metodo--delete { background: hsl(0 72% 45%); color: #fff; }
.doc-endpoint__path {
  font-size: 14.5px; font-weight: 600;
  /* `/api/radar/v1/parceiro/clientes/{empresaId}/chaves/{chaveId}` não cabe em
     tela estreita: quebra o caminho em vez de esticar a página. */
  overflow-wrap: anywhere;
}
.doc-endpoint__auth {
  font-size: 12px; color: hsl(var(--muted-fg)); border: 1px solid hsl(var(--border));
  padding: 3px 9px; border-radius: 999px;
}
.doc-endpoint--destaque { background: hsl(var(--primary) / .07); border-radius: 18px; padding: 32px 24px; }

/* Código */
.doc-code { margin: 16px 0; border-radius: 12px; overflow: hidden; background: hsl(var(--preto)); }
.doc-code__rotulo {
  display: block; padding: 8px 16px; font-size: 11px; font-weight: 800;
  letter-spacing: 1px; text-transform: uppercase; color: hsl(0 0% 60%);
  border-bottom: 1px solid hsl(0 0% 20%);
}
.doc-code pre { margin: 0; padding: 16px; overflow-x: auto; }
.doc-code code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
  line-height: 1.7; color: hsl(0 0% 88%); background: none; padding: 0;
}

/* Tabelas - a tabela larga rola DENTRO do próprio container; a página, nunca. */
.doc-tabela-wrap { overflow-x: auto; margin: 12px 0 20px; }

/* Tabelas */
.doc-tabela { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.doc-tabela th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em;
  color: hsl(var(--muted-fg)); padding: 8px 10px; border-bottom: 1px solid hsl(var(--border));
}
.doc-tabela td { padding: 10px; border-bottom: 1px solid hsl(var(--border)); vertical-align: top; }
.doc-tabela code { font-size: 13px; }

/* Avisos */
.doc-alerta {
  display: flex; gap: 10px; align-items: flex-start;
  background: hsl(var(--primary) / .14); border-left: 3px solid hsl(var(--primary));
  padding: 12px 16px; border-radius: 0 10px 10px 0; font-size: 14.5px; line-height: 1.6;
}
.doc-alerta svg { flex: none; margin-top: 3px; color: hsl(var(--primary-text)); }
.doc-nota { font-size: 14px; color: hsl(var(--muted-fg)); line-height: 1.65; }

.doc-btn {
  display: inline-flex; align-items: center; padding: 11px 20px; border-radius: 10px;
  background: hsl(var(--preto)); color: #fff; font-weight: 700; font-size: 14.5px;
  margin-top: 10px;
}
.doc-btn:hover { background: hsl(var(--preto-2)); }
.doc-btn--sm { padding: 8px 16px; font-size: 14px; margin-top: 0; }

@media (min-width: 961px) {
  /* minmax(0,1fr) e NÃO 1fr: item de grid tem min-width:auto, então um curl
     comprido ou um caminho de endpoint longo empurra a coluna e leva a PÁGINA
     junto - foi assim que a doc quebrou quando entraram as rotas de parceiro. */
  .doc-wrap { grid-template-columns: 220px minmax(0, 1fr); }
  .doc-nav { position: sticky; top: 84px; }
  .doc-chaves { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  .doc-nav { display: none; }
}

/* Título que é link pra própria seção: o `#` só aparece no hover, pra não
   poluir a leitura de quem não está caçando uma URL pra mandar pra alguém. */
.doc-conteudo h2 > .doc-link { color: inherit; display: inline-flex; align-items: baseline; gap: 8px; }
/* SEMPRE visível. Já esteve em `opacity: 0` até o hover, o que é o mesmo que
   não existir: ninguém descobre um link que só aparece quando o mouse passa -
   e em toque não aparece nunca. Discreto no repouso, forte no hover. */
.doc-link__marca {
  color: hsl(var(--muted-fg)); font-weight: 700; font-size: .8em;
  transition: color .12s ease;
}
.doc-link:hover .doc-link__marca,
.doc-link:focus-visible .doc-link__marca { color: hsl(var(--primary-text)); }
/* Âncora não pode parar embaixo do topo fixo. */
.doc-sec { scroll-margin-top: 84px; }

/* Rótulo de grupo do índice: precisa separar sem competir com os itens -
   é placa de seção, não link. */
.doc-nav__grupo {
  display: block; margin: 18px 0 6px; padding: 0 12px;
  font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  color: var(--ink);
}
.doc-nav__grupo:first-of-type { margin-top: 4px; }
/* Card de chave sozinho não estica pela largura toda da grade de dois. */
.doc-chaves--uma { max-width: 460px; }

/* Grupo do índice colapsável - `<details>` nativo, sem uma linha de JS. */
.doc-nav__bloco { margin-bottom: 6px; }
.doc-nav__bloco > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 6px;
}
.doc-nav__bloco > summary::-webkit-details-marker { display: none; }
/* Seta própria: a nativa fica desalinhada com o rótulo em versalete. */
.doc-nav__bloco > summary::before {
  content: '▸'; font-size: 9px; transition: transform .15s ease;
  color: hsl(var(--muted-fg));
}
.doc-nav__bloco[open] > summary::before { transform: rotate(90deg); }
.doc-nav__bloco > summary:hover { color: hsl(var(--primary-text)); }
/* O `.doc-nav` é grid, mas os links agora vivem DENTRO do <details>, que é
   block: sem isto eles voltam a fluir inline e o índice vira um parágrafo.
   O recuo alinha o item com o TEXTO do grupo (que tem a seta antes), deixando
   claro que ele está dentro - sem recuo, item e grupo parecem o mesmo nível. */
.doc-nav__bloco > a { display: block; padding-left: 26px; }

/* Nota que fecha a seção de parceiros - é remate, não seção ancorável. */
.doc-fecho { margin: 0 0 8px; }

/* Contrato da resposta - fechado por padrão: são ~120 linhas de JSON, e
   aberto empurraria o próximo endpoint pra fora da tela. */
.doc-contrato {
  border: 1px solid hsl(var(--border)); border-radius: 12px;
  margin: 16px 0 8px; background: hsl(var(--card));
}
.doc-contrato > summary {
  cursor: pointer; padding: 12px 16px; font-weight: 700; font-size: 14.5px;
  display: flex; align-items: center; gap: 8px; list-style: none;
}
.doc-contrato > summary::-webkit-details-marker { display: none; }
.doc-contrato > summary::before {
  content: '▸'; font-size: 11px; color: hsl(var(--muted-fg));
  transition: transform .15s ease;
}
.doc-contrato[open] > summary::before { transform: rotate(90deg); }
.doc-contrato[open] > summary { border-bottom: 1px solid hsl(var(--border)); }
.doc-contrato > summary:hover { color: hsl(var(--primary-text)); }
.doc-contrato__corpo { padding: 4px 16px 16px; }
/* JSON longo: teto de altura pra não engolir a página quando aberto. */
.doc-contrato__corpo .doc-code pre { max-height: 460px; overflow: auto; }

/* ── JSON navegável ─────────────────────────────────────────────────────── */
.doc-json { padding-bottom: 8px; }
.jv {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; line-height: 1.75; color: hsl(0 0% 88%);
  padding: 12px 16px; max-height: 520px; overflow: auto;
}
.jv-linha, .jv-fim { white-space: pre-wrap; word-break: break-word; }
.jv-bloco > summary {
  cursor: pointer; list-style: none; display: block;
  border-radius: 4px; margin-left: -4px; padding-left: 4px;
}
.jv-bloco > summary::-webkit-details-marker { display: none; }
.jv-bloco > summary::before {
  content: '▸'; display: inline-block; width: 12px;
  color: hsl(0 0% 55%); transition: transform .12s ease;
}
.jv-bloco[open] > summary::before { transform: rotate(90deg); }
.jv-bloco > summary:hover { background: hsl(0 0% 100% / .06); }
/* Recuo por nível: o aninhamento dos <details> já dá a hierarquia. */
.jv-filhos { padding-left: 18px; border-left: 1px solid hsl(0 0% 100% / .10); margin-left: 5px; }
/* Fechado, o summary mostra `{ n campos }`. Aberto, some tudo isso e a chave
   de fechamento aparece embaixo, no lugar certo - como num JSON de verdade. */
.jv-bloco > .jv-fim { display: none; }
.jv-bloco[open] > summary .jv-fechado { display: none; }
.jv-bloco[open] > .jv-fim { display: block; }
.jv-chave { color: hsl(48 100% 62%); }
.jv-txt { color: hsl(140 45% 65%); }
.jv-num { color: hsl(200 70% 68%); }
.jv-bool { color: hsl(280 60% 72%); }
.jv-nulo { color: hsl(0 0% 55%); font-style: italic; }
.jv-chaves { color: hsl(0 0% 65%); }
.jv-virg { color: hsl(0 0% 45%); }
.jv-resumo { color: hsl(0 0% 50%); font-style: italic; padding: 0 6px; }