/* 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 .acoes .on{display:none}
  header.top .acoes .apres span{display:none}
  header.top .btn,header.top .btn-ghost{padding:.58rem .7rem;font-size:.72rem}
}

/* ---------- ícones (Lucide, ISC) ---------- */
.ic{width:1em;height:1em;flex:none;vertical-align:-.12em}
.rot .ic{width:.95rem;height:.95rem}
.ic-g{width:2.6rem;height:2.6rem}
.callout .rot,.script .rot span{display:flex;align-items:center;gap:.45rem}

/* ---------- conversa de WhatsApp (bloco de script) ---------- */
.script{background:none;border:0;padding:0;margin:1.5rem 0;border-radius:var(--r);overflow:hidden;box-shadow:0 14px 34px -22px rgba(20,21,41,.55)}
.script .rot{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:var(--navy-900);color:var(--gold);
  font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:.75rem 1rem;margin:0}
.script .copiar{font-size:.62rem;font-weight:800;letter-spacing:.1em;color:var(--navy-900);background:var(--gold);border-radius:8px;padding:.4rem .7rem;flex:none}
.zap{background:#EDE4DB;background-image:radial-gradient(rgba(0,0,0,.04) 1px,transparent 1px);background-size:16px 16px;
  padding:1rem .9rem;display:flex;flex-direction:column;gap:.5rem}
.linha{display:flex}
.linha.crc{justify-content:flex-end}
.linha.lead{justify-content:flex-start}
.bolha{max-width:86%;border-radius:12px;padding:.55rem .75rem .5rem;font-size:.97rem;line-height:1.45;color:#111b21;
  box-shadow:0 1px 1px rgba(0,0,0,.13);position:relative}
.linha.crc .bolha{background:#D9FDD3;border-top-right-radius:3px}
.linha.lead .bolha{background:#fff;border-top-left-radius:3px}
.bolha .passo{display:block;font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#0b7a4b;margin-bottom:.2rem}
.linha.lead .bolha .passo{color:#8a6300}
.bolha .hora{float:right;display:inline-flex;align-items:center;gap:.15rem;font-size:.62rem;color:#667781;margin:.45rem 0 0 .6rem;position:relative;top:.2rem}
.bolha .tique{width:15px;height:11px;color:#53bdeb;stroke-width:1.8}
.linha.lead .bolha .hora{color:#8a9199}
@media(max-width:560px){.bolha{max-width:93%;font-size:.94rem}}

/* ícone dentro de botão do topo */
header.top .btn .ic,header.top .btn-ghost .ic,.barra .btn .ic,.barra .btn-ghost .ic{width:.95rem;height:.95rem;margin-right:.4rem}
@media(max-width:900px){header.top .btn .ic,header.top .btn-ghost .ic{margin-right:.3rem}}
.busca .ic{width:16px;height:16px;color:var(--muted-l)}
.burger .ic{width:20px;height:20px}