/* Design system Odonto Results — mesmo token set de mkt.odontoresults.com.br e roteiros.odontoresults.com.br */
@font-face{font-family:'Plus Jakarta Sans';font-weight:200 800;font-display:swap;src:url(/fonts/plus-jakarta-sans-vf.woff2) format('woff2-variations'),url(/fonts/plus-jakarta-sans-vf.woff2) format('woff2');font-style:normal}

:root{
  --navy-900:#141529;--navy-850:#181a35;--navy-800:#1f2240;--navy-card:#212548;
  --gold:#FFB81C;--gold-2:#FFD15A;--gold-deep:#E89A00;--gold-soft:rgba(255,184,28,.13);
  --ink:#11151C;--paper:#FBFAF7;--paper-2:#F1EFEA;
  --muted-d:#A9AEC6;--muted-l:#5B6470;--line-d:rgba(255,255,255,.10);--line-l:#E7E4DC;
  --ok:#1D8A5F;--ok-soft:#E4F4EC;--bad:#B3402A;--bad-soft:#FBEAE5;
  --max:1180px;--r:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;font-weight:500;color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased;font-feature-settings:"kern","calt"}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
.wrap{width:min(100% - 2.4rem,var(--max));margin-inline:auto}

h1,h2,h3,h4{letter-spacing:-.03em;font-weight:700;line-height:1.2}
.eyebrow{font-weight:800;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep)}
.dark-bg .eyebrow{color:var(--gold)}

/* ---------- fundo escuro com malha (igual mkt/roteiros) ---------- */
.dark-bg{position:relative;background:var(--navy-900);color:#fff;overflow:hidden;isolation:isolate}
.dark-bg .mesh{position:absolute;inset:-12%;z-index:0;pointer-events:none;
  background:radial-gradient(46% 40% at 18% 28%,rgba(60,110,200,.32) 0%,transparent 60%),
             radial-gradient(40% 34% at 82% 64%,rgba(0,191,255,.13) 0%,transparent 60%),
             radial-gradient(36% 32% at 52% 96%,rgba(255,184,28,.10) 0%,transparent 65%);
  filter:blur(34px)}
.dark-bg .gridlines{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(85% 80% at 50% 30%,#000 0%,transparent 82%);
  -webkit-mask-image:radial-gradient(85% 80% at 50% 30%,#000 0%,transparent 82%);opacity:.5}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:700;font-size:.85rem;line-height:1;border-radius:999px;padding:.8rem 1.35rem;background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#1a1303;box-shadow:0 10px 26px -10px rgba(255,184,28,.55);transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px -10px rgba(255,184,28,.65)}
.btn-ghost{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.85rem;border-radius:999px;padding:.78rem 1.25rem;border:1px solid rgba(255,255,255,.22);color:#fff;transition:background .15s ease}
.btn-ghost:hover{background:rgba(255,255,255,.08)}
.btn-ghost.on{background:rgba(255,184,28,.16);border-color:rgba(255,184,28,.5);color:var(--gold-2)}
.gold-bar{height:4px;background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-2));position:relative;z-index:3}

/* ---------- topo ---------- */
header.top{position:sticky;top:0;z-index:40}
header.top .wrap{position:relative;z-index:2;display:flex;align-items:center;gap:14px;padding:14px 0}
header.top .logo svg{width:104px;height:auto}
header.top .tit{flex:1 1 auto;min-width:0}
header.top .tit h1{font-size:1.02rem;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
header.top .tit .eyebrow{font-size:.6rem;display:block;margin-bottom:.15rem}
header.top .acoes{display:flex;gap:.5rem;align-items:center;flex:none}
.burger{display:none;width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.18);align-items:center;justify-content:center}
.burger svg{width:20px;height:20px}

/* ---------- blocos de conteúdo (usados na wiki, na apresentação e no PDF) ---------- */
.callout{border-radius:var(--r);padding:1.25rem 1.4rem;margin:1.4rem 0;border:1px solid var(--line-l);background:#fff}
.callout .rot{font-size:.66rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;display:flex;align-items:center;gap:.5rem;margin-bottom:.6rem}
.callout.ouro{background:linear-gradient(180deg,#FFFDF6,#FFF8E7);border-color:rgba(255,184,28,.5)}
.callout.ouro .rot{color:#9a6f00}
.callout.erro{background:var(--bad-soft);border-color:rgba(179,64,42,.28)}
.callout.erro .rot{color:var(--bad)}
.callout.certo{background:var(--ok-soft);border-color:rgba(29,138,95,.28)}
.callout.certo .rot{color:var(--ok)}

.script{position:relative;background:linear-gradient(180deg,var(--navy-800),var(--navy-900));color:#fff;border:1px solid rgba(255,184,28,.32);border-radius:var(--r);padding:1.3rem 1.4rem;margin:1.3rem 0}
.script .rot{font-size:.66rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:.7rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.script p{margin:.55rem 0;font-size:1.02rem;line-height:1.65;color:#fff}
.script p b{color:var(--gold-2)}
.script .fala{color:#f2f4fb}
.script p:first-of-type{margin-top:0}
.script .fala{padding-left:.9rem;border-left:2px solid rgba(255,184,28,.45)}
.script .copiar{font-size:.62rem;font-weight:800;letter-spacing:.1em;color:var(--navy-900);background:var(--gold);border-radius:999px;padding:.35rem .7rem}

.par{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.3rem 0}
.par .callout{margin:0}
@media(max-width:720px){.par{grid-template-columns:1fr}}

.termo{border-bottom:1px dashed rgba(232,154,0,.8);color:#9a6f00;font-weight:700;cursor:help}

.passos{counter-reset:p;list-style:none;margin:1.2rem 0;display:flex;flex-direction:column;gap:.75rem}
.passos li{counter-increment:p;position:relative;padding-left:2.9rem;font-size:1rem}
.passos li::before{content:counter(p);position:absolute;left:0;top:-1px;width:2.05rem;height:2.05rem;border-radius:999px;background:var(--navy-900);color:var(--gold);font-weight:800;font-size:.85rem;display:flex;align-items:center;justify-content:center}
.passos li b{display:block}

.dado{display:flex;align-items:baseline;gap:.7rem;margin:.3rem 0}
.dado .n{font-size:2.1rem;font-weight:800;letter-spacing:-.04em;color:var(--gold-deep);font-feature-settings:"tnum"}

/* ---------- topo: cantos retos e comportamento no celular ---------- */
header.top .btn,header.top .btn-ghost,.barra .btn,.barra .btn-ghost,.barra-topo .btn,.barra-topo .btn-ghost{border-radius:10px}
@media(max-width:900px){
  header.top .tit{display:none}
  header.top .logo img,header.top .logo svg{width:88px}
  header.top .acoes{margin-left:auto;gap:.35rem}
  header.top .btn,header.top .btn-ghost{padding:.6rem .8rem;font-size:.74rem}
}
@media(max-width:560px){
  header.top .acoes .sair{display:none}
  header.top .btn,header.top .btn-ghost{padding:.58rem .7rem;font-size:.72rem}
}
