/* ============================================================
   Cartão de bolso · Sérgio no podcast com o Patrola
   Design System TMDriver Caminhoneiro (Cabine Digital)
   Fontes self-hosted. Zero CDN. Zero requisição externa.
   ============================================================ */

/* ---------- fontes (self-hosted, regra canônica do OS) ---------- */
@font-face{
  font-family:'Archivo Variable';
  src:url('./fonts/archivo-latin-wght-normal.woff2') format('woff2-variations');
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212;
}
@font-face{
  font-family:'Archivo Variable';
  src:url('./fonts/archivo-latin-ext-wght-normal.woff2') format('woff2-variations');
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{font-family:'Chakra Petch';src:url('./fonts/chakra-petch-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Chakra Petch';src:url('./fonts/chakra-petch-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Chakra Petch';src:url('./fonts/chakra-petch-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}

/* ---------- tokens (espelho de marca/rebrand-tmdriver/design-system/tokens.css) ---------- */
:root{
  --canvas:#12151A;
  --superficie:#131619;
  --superficie-2:#0E1216;
  --hairline:#262B31;
  --verniz:inset 0 1px 0 rgba(255,255,255,.06);
  --bento:linear-gradient(175deg,rgba(255,255,255,.055),rgba(255,255,255,.022) 55%),#131619;
  --tinta:#F2F4F6;
  --texto-2:#C7CDD4;
  --muted:#9AA3AD;
  --acento:#0C54F0;          /* fundo de badge/CTA. Como TEXTO reprova AA (3.06) */
  --acento-tinta:#3E7BFA;    /* SO em texto GRANDE sobre o canvas (4.72). Em rotulo pequeno
                                sobre fundo azul cai pra 3.98 e reprova AA: ali vai texto neutro. */
  --acento-press:#0A46C8;
  --ok:#3ECF8E;
  --erro:#F0564A;
  --aviso:#E8A13D;

  /* rampa de UMA cor (regra da casa: nunca o arco-íris do espectro de serviço).
     INTERPOLADA entre --cor-hairline #262B31 e --cor-acento #0C54F0, em vez de hexes
     inventados fora do DS. Contraste com --tinta: 12.94 / 10.93 / 8.75 / 6.88 / 5.38. */
  --r1:#262B31; --r2:#203561; --r3:#194090; --r4:#124AC0; --r5:#0C54F0;

  --fonte:'Archivo Variable',system-ui,-apple-system,sans-serif;
  --num:'Chakra Petch','Archivo Variable',sans-serif;

  --r-card:18px; --r-btn:12px; --r-pill:999px;
  --sombra:var(--verniz),0 18px 40px -22px rgba(0,0,0,.7);
  --t:240ms; --curva:cubic-bezier(.2,.7,.2,1);
  --gut:20px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px;overflow-x:hidden;}
body{
  margin:0; background:var(--canvas); color:var(--tinta);
  font-family:var(--fonte); font-weight:500; font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.wrap{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:0 var(--gut);}

h1,h2,h3{margin:0;line-height:1.12;letter-spacing:-.02em;font-weight:800;}
p{margin:0 0 14px;}
p:last-child{margin-bottom:0;}
strong{font-weight:700;color:var(--tinta);}
em{font-style:normal;color:var(--tinta);font-weight:700;}
a{color:var(--tinta);text-underline-offset:3px;}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(18,21,26,.82); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hairline);
}
.nav-in{display:flex;align-items:center;gap:12px;max-width:760px;margin:0 auto;padding:10px var(--gut);min-width:0;}
.nav-marca{font-family:var(--num);font-weight:700;font-size:13.5px;letter-spacing:.04em;color:var(--tinta);white-space:nowrap;}
.nav-marca span{color:var(--muted);font-weight:500;}
.nav-links{display:flex;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;margin-left:auto;min-width:0;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent);}
.nav-links::-webkit-scrollbar{display:none;}
.nav-links a{
  font-family:var(--num);font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;
  padding:0 14px;min-height:40px;display:flex;align-items:center;border-radius:var(--r-pill);border:1px solid var(--hairline);white-space:nowrap;
  transition:color var(--t) var(--curva),border-color var(--t) var(--curva),background var(--t) var(--curva);
}
.nav-links a:hover{color:var(--tinta);border-color:var(--acento);background:rgba(12,84,240,.14);}
.nav-links a:focus-visible{outline:2px solid var(--acento);outline-offset:2px;box-shadow:var(--anel-foco);color:var(--tinta);}

/* ---------- hero ---------- */
.hero{position:relative;padding:44px 0 34px;text-align:left;}
.hero>*{position:relative;}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--num);font-size:13px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--texto-2);background:var(--superficie-2);border:1px solid var(--hairline);
  padding:7px 14px;border-radius:var(--r-pill);
}
.chip svg{width:15px;height:15px;}
.hero h1{font-size:clamp(34px,8.5vw,52px);margin:18px 0 14px;color:var(--texto-2);text-wrap:balance;}
.hero h1 em{color:var(--tinta);}
.hero-sub{font-size:18px;color:var(--texto-2);max-width:34ch;}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;padding-top:18px;border-top:1px solid var(--hairline);
  font-family:var(--num);font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--muted);text-transform:uppercase;
}
.hero-meta b{color:var(--texto-2);font-weight:700;}

/* ---------- caixa de pânico ---------- */
.panico{
  background:var(--bento);border:1px solid transparent;border-radius:var(--r-card);
  box-shadow:var(--sombra);padding:22px;margin:8px 0 44px;
}
.panico-tit{
  display:flex;align-items:center;gap:10px;font-family:var(--num);font-size:13px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--texto-2);margin-bottom:16px;
}
.panico-tit svg{width:17px;height:17px;}
.panico ol{margin:0;padding:0;list-style:none;counter-reset:p;}
.panico li{
  counter-increment:p;position:relative;padding:12px 0 12px 48px;font-size:17px;line-height:1.45;
  border-bottom:1px solid var(--hairline);
}
.panico li:last-child{border-bottom:0;padding-bottom:0;}
.panico li::before{
  content:counter(p);position:absolute;left:0;top:11px;
  width:32px;height:32px;border-radius:50%;background:var(--acento);color:var(--tinta);
  font-family:var(--num);font-weight:700;font-size:16px;display:grid;place-items:center;
}

/* ---------- seções ---------- */
section{padding:52px 0;border-top:1px solid var(--hairline);}
.sec-num{
  font-family:var(--num);font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--muted);
  display:flex;align-items:center;gap:9px;margin-bottom:12px;text-transform:uppercase;
}
.sec-num svg{width:16px;height:16px;}
section h2{font-size:clamp(26px,6vw,34px);margin-bottom:14px;}
.lede{font-size:18px;color:var(--texto-2);margin-bottom:26px;}

/* card base */
.card{
  background:var(--bento);border:1px solid transparent;border-radius:var(--r-card);
  box-shadow:var(--sombra);padding:20px;
}

/* ---------- trilha (mapa da leitura) ---------- */
.trilha{position:relative;padding-left:6px;}
.trilha::before{content:'';position:absolute;left:24px;top:14px;bottom:14px;width:2px;background:linear-gradient(180deg,var(--r1),var(--r5));}
.parada{position:relative;display:flex;gap:16px;padding:11px 0;}
.parada-ico{
  position:relative;z-index:1;flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;border:1px solid var(--hairline);background:var(--superficie-2);
}
.parada-ico svg{width:18px;height:18px;color:var(--tinta);}
.parada-txt strong{display:block;font-size:17px;line-height:1.3;}
.parada-txt span{display:block;font-size:15px;color:var(--muted);line-height:1.4;margin-top:2px;}

/* ---------- quadro de dois lados ---------- */
.duo{display:grid;gap:14px;}
@media(min-width:620px){.duo{grid-template-columns:1fr 1fr;}}
.lado{border-radius:var(--r-card);padding:18px;border:1px solid;}
.lado-sim{background:rgba(62,207,142,.07);border-color:rgba(62,207,142,.35);}
.lado-nao{background:rgba(240,86,74,.07);border-color:rgba(240,86,74,.35);}
.lado-tit{
  display:flex;align-items:center;gap:9px;font-family:var(--num);font-size:13px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:13px;
}
.lado-sim .lado-tit{color:var(--ok);}
.lado-nao .lado-tit{color:var(--erro);}
.lado-tit svg{width:17px;height:17px;}
.lado ul{margin:0;padding:0;list-style:none;}
.lado li{position:relative;padding:7px 0 7px 22px;font-size:16.5px;line-height:1.45;color:var(--texto-2);}
.lado li::before{content:'';position:absolute;left:2px;top:15px;width:7px;height:7px;border-radius:50%;}
.lado-sim li::before{background:var(--ok);}
.lado-nao li::before{background:var(--erro);}

/* ---------- alerta ---------- */
.alerta{
  border-radius:var(--r-card);padding:20px;border:1px solid rgba(240,86,74,.45);
  background:rgba(240,86,74,.09);
}
.alerta-tit{display:flex;align-items:center;gap:10px;font-family:var(--num);font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--erro);margin-bottom:12px;}
.alerta-tit svg{width:19px;height:19px;flex:0 0 auto;}

/* troca de palavra */
.troca{display:grid;gap:12px;margin-top:18px;}
@media(min-width:620px){.troca{grid-template-columns:1fr auto 1fr;align-items:center;}}
.troca-box{border-radius:var(--r-btn);padding:16px;text-align:center;border:1px solid;}
.troca-nao{background:rgba(240,86,74,.09);border-color:rgba(240,86,74,.4);}
.troca-sim{background:rgba(62,207,142,.09);border-color:rgba(62,207,142,.4);}
.troca-rot{font-family:var(--num);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:8px;}
.troca-nao .troca-rot{color:var(--erro);}
.troca-sim .troca-rot{color:var(--ok);}
.troca-val{font-size:21px;font-weight:800;line-height:1.25;}
.troca-nao .troca-val{text-decoration:line-through;text-decoration-color:rgba(240,86,74,.75);color:var(--muted);}
.seta{display:grid;place-items:center;color:var(--muted);}
.seta svg{width:24px;height:24px;transform:rotate(90deg);}
@media(min-width:620px){.seta svg{transform:none;}}

/* ---------- big stat ---------- */
.stat-grid{display:grid;gap:14px;grid-template-columns:1fr;}
@media(min-width:620px){.stat-grid{grid-template-columns:repeat(3,1fr);}}
.stat{background:var(--bento);border-radius:var(--r-card);box-shadow:var(--sombra);padding:20px 18px;text-align:center;}
.stat-n{font-family:var(--num);font-size:clamp(34px,7.5vw,46px);font-weight:700;line-height:1;color:var(--tinta);letter-spacing:-.02em;white-space:nowrap;}
.stat-n small{font-size:.45em;color:var(--muted);font-weight:600;margin-left:3px;}
.stat-l{font-size:14.5px;color:var(--muted);margin-top:10px;line-height:1.4;}

/* destaque de técnica */
.tecnica{
  border-radius:var(--r-card);padding:26px 22px;text-align:center;
  background:var(--bento);border:1px solid transparent;box-shadow:var(--sombra);
  border-left:12px solid var(--acento);
}
.tecnica-rot{font-family:var(--num);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-2);}
.tecnica-frase{font-size:clamp(25px,6.5vw,34px);font-weight:800;line-height:1.15;margin:14px 0 12px;letter-spacing:-.02em;}
.tecnica-por{font-size:16.5px;color:var(--texto-2);max-width:44ch;margin:0 auto;}

/* ---------- escada de perguntas ---------- */
.escada{display:grid;gap:16px;counter-reset:q;}
.degrau{
  position:relative;background:var(--bento);border-radius:var(--r-card);box-shadow:var(--sombra);
  padding:20px 20px 20px 22px;border-left:4px solid var(--grau,var(--r1));
}
.degrau-top{display:flex;align-items:center;gap:11px;margin-bottom:12px;}
.degrau-n{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--grau,var(--r1));color:var(--tinta);
  font-family:var(--num);font-weight:700;font-size:16px;display:grid;place-items:center;
}
.degrau-rot{font-family:var(--num);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.fala{
  font-size:19px;line-height:1.45;font-weight:600;color:var(--tinta);
  padding:14px 16px;border-radius:var(--r-btn);background:var(--superficie-2);border:1px solid var(--hairline);
}
.degrau-nota{font-size:16px;color:var(--texto-2);margin-top:13px;}
.degrau-nota b{color:var(--tinta);}
.calar{
  display:inline-flex;align-items:center;gap:7px;margin-top:13px;
  font-family:var(--num);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--texto-2);background:var(--superficie-2);border:1px solid var(--hairline);
  padding:8px 13px;border-radius:var(--r-pill);
}
.calar svg{width:14px;height:14px;}

/* ---------- fluxo de 3 passos ---------- */
.fluxo{display:grid;gap:12px;}
.passo{display:flex;gap:14px;align-items:flex-start;background:var(--bento);border-radius:var(--r-card);box-shadow:var(--sombra);padding:17px;}
.passo-n{flex:0 0 auto;width:32px;height:32px;border-radius:8px;background:var(--acento);color:var(--tinta);font-family:var(--num);font-weight:700;font-size:16px;display:grid;place-items:center;}
.passo-t{font-size:17px;line-height:1.45;}
.passo-t b{display:block;font-family:var(--num);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:5px;font-weight:700;}

/* ---------- callout ---------- */
.callout{
  border-radius:var(--r-card);padding:22px;border:1px solid var(--hairline);
  background:var(--superficie-2);display:flex;gap:15px;align-items:flex-start;
}
.callout svg{width:24px;height:24px;flex:0 0 auto;color:var(--muted);margin-top:3px;}
.callout-f{font-size:20px;font-weight:700;line-height:1.35;}
.callout-p{font-size:16px;color:var(--muted);margin-top:9px;}

/* ---------- quarentena ---------- */
.banidos{display:grid;gap:12px;}
@media(min-width:620px){.banidos{grid-template-columns:1fr 1fr;}}
.banido{
  border-radius:var(--r-card);padding:17px;border:1px solid rgba(240,86,74,.3);
  background:rgba(240,86,74,.055);
}
.banido-t{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:700;line-height:1.3;margin-bottom:8px;}
.banido-t svg{width:18px;height:18px;flex:0 0 auto;color:var(--erro);}
.banido-p{font-size:15.5px;color:var(--texto-2);line-height:1.45;}

/* ---------- fluxograma de decisão ---------- */
.fluxograma{display:grid;gap:12px;justify-items:stretch;}
.fg-perg{
  text-align:center;padding:18px;border-radius:var(--r-card);
  background:var(--bento);box-shadow:var(--sombra);font-size:18px;font-weight:700;line-height:1.35;
}
.fg-seta{display:grid;place-items:center;color:var(--muted);}
.fg-seta svg{width:22px;height:22px;}
.fg-ramos{display:grid;gap:12px;}
@media(min-width:620px){.fg-ramos{grid-template-columns:1fr 1fr;}}
.fg-ramo{border-radius:var(--r-card);padding:17px;border:1px solid;}
.fg-a{background:rgba(232,161,61,.07);border-color:rgba(232,161,61,.35);}
.fg-b{background:rgba(62,207,142,.07);border-color:rgba(62,207,142,.35);}
.fg-rot{font-family:var(--num);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px;display:block;}
.fg-a .fg-rot{color:var(--aviso);}
.fg-b .fg-rot{color:var(--ok);}

/* ---------- checklist ---------- */
.check{display:grid;gap:9px;}
.item{
  display:flex;gap:13px;align-items:flex-start;background:var(--bento);border-radius:var(--r-btn);
  box-shadow:var(--sombra);padding:14px 15px;cursor:pointer;user-select:none;
  border:1px solid transparent;transition:border-color var(--t) var(--curva),opacity var(--t) var(--curva);
  /* RESET do <button>: sem isto o UA aplica preto, Arial e centralizado. Medido em 1.33:1. */
  font:inherit;color:var(--texto-2);text-align:left;width:100%;-webkit-appearance:none;appearance:none;
}
.item:focus-visible{outline:2px solid var(--acento);outline-offset:2px;box-shadow:var(--anel-foco);}
.box{
  flex:0 0 auto;width:24px;height:24px;border-radius:7px;border:2px solid var(--muted);
  display:grid;place-items:center;margin-top:1px;transition:background var(--t) var(--curva),border-color var(--t) var(--curva);
}
.box svg{width:15px;height:15px;color:var(--canvas);opacity:0;transition:opacity var(--t) var(--curva);}
.item[aria-pressed="true"] .box{background:var(--ok);border-color:var(--ok);}
.item[aria-pressed="true"] .box svg{opacity:1;}
.item[aria-pressed="true"] .item-t{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(154,163,173,.6);}
.item-t{font-size:17px;line-height:1.4;color:var(--texto-2);}
.item-t b{color:var(--tinta);}

/* ---------- timeline ---------- */
.tl{position:relative;padding-left:36px;}
.tl::before{content:'';position:absolute;left:13px;top:12px;bottom:12px;width:2px;background:linear-gradient(180deg,var(--r1),var(--r5));}
.tl-e{position:relative;padding:0 0 24px;}
.tl-e:last-child{padding-bottom:0;}
.tl-e::before{
  content:'';position:absolute;left:-29px;top:5px;width:14px;height:14px;border-radius:50%;
  background:var(--et,var(--r1));border:3px solid var(--canvas);
}
.tl-q{font-family:var(--num);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.tl-t{font-size:18.5px;font-weight:700;margin:4px 0 7px;line-height:1.3;}
.tl-p{font-size:16px;color:var(--texto-2);line-height:1.5;}
.tl-esp{
  display:inline-block;margin-top:9px;font-size:15px;color:var(--muted);
  padding:7px 12px;border-radius:var(--r-btn);background:var(--superficie-2);border:1px solid var(--hairline);
}
.tl-esp b{font-family:var(--num);font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--texto-2);display:block;margin-bottom:3px;}

/* ---------- mandala ---------- */
.mandala{display:grid;gap:13px;}
.mandala-centro{
  text-align:center;padding:28px 22px;border-radius:var(--r-card);
  background:var(--bento);border:1px solid transparent;box-shadow:var(--sombra);
  border-left:12px solid var(--acento);
}
.mandala-centro span{font-family:var(--num);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-2);}
.mandala-centro p{font-size:clamp(23px,5.8vw,30px);font-weight:800;line-height:1.2;margin:12px 0 0;letter-spacing:-.02em;}
.raios{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));}
.raio{background:var(--bento);border-radius:var(--r-card);box-shadow:var(--sombra);padding:17px;}
.raio-t{display:flex;align-items:center;gap:9px;font-family:var(--num);font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:9px;}
.raio-t svg{width:16px;height:16px;color:var(--muted);}
.raio-p{font-size:16.5px;line-height:1.42;font-weight:600;}

/* ---------- gancho entre seções ---------- */
.gancho{
  display:flex;gap:11px;align-items:flex-start;margin-top:28px;padding-top:20px;
  border-top:1px dashed var(--hairline);font-size:16.5px;color:var(--muted);line-height:1.45;
}
.gancho svg{width:18px;height:18px;flex:0 0 auto;color:var(--muted);margin-top:3px;}
.gancho b{color:var(--texto-2);font-weight:600;}

/* ---------- rodapé ---------- */
footer{padding:44px 0 60px;border-top:1px solid var(--hairline);color:var(--muted);font-size:14.5px;line-height:1.6;}
footer b{font-family:var(--num);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-2);display:block;margin-bottom:9px;}

/* Desvio DECLARADO do DS: a camada micro roda 13px em vez de --fs-micro 11.5px.
   Motivo: leitura no celular, em pe, minutos antes de entrar ao vivo, por alguem de 60 e poucos.
   Legibilidade vence a escala aqui, e o desvio fica escrito em vez de escondido. */

/* ---------- movimento ---------- */
.rv{opacity:0;transform:translateY(16px);transition:opacity 620ms var(--curva),transform 620ms var(--curva);}
.rv.on{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .rv{opacity:1;transform:none;transition:none;}
}

/* ---------- pular para o conteudo (skip link) ---------- */
.pular{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--acento);color:var(--tinta);
  font-family:var(--num);font-weight:700;font-size:15px;
  padding:12px 18px;border-radius:0 0 var(--r-btn) 0;text-decoration:none;
}
.pular:focus{left:0;outline:2px solid var(--acento);outline-offset:2px;box-shadow:var(--anel-foco);}