/* O blog do turboquiz.app (landing/blog/*.html). Tokens da home (landing/dark-saas/index.html), só os usados aqui; o tema
   vem do /tema-inicial.js (o mesmo da home, do Studio e da 404). Contraste (WCAG, os pares medidos da home): escuro, texto
   18,0:1 e texto-2 8,9:1 sobre --fundo, acento-texto 7,0:1, branco sobre --acento 5,13:1; claro, texto 17,5:1, texto-2
   7,4:1, acento-texto 6,4:1. As telas do mapa usam os tokens de quiz da home (claros, para não misturar com o azul). */

@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400 700;font-display:swap;src:url(/lp/hanken-grotesk-var.woff2) format("woff2")}

:root{
  color-scheme:dark;
  --fundo:#0A0B0D; --superficie:#101216; --superficie-2:#161920; --superficie-3:#1C2029;
  --texto:#F3F5F8; --texto-2:#A8AFBC; --linha:#262A32; --linha-forte:#6E7686;
  --acento:#3D5AFE; --acento-hover:#2F49D6; --sobre-acento:#FFFFFF; --acento-texto:#8CA0FF; --feixe:#7C93FF;
  --quiz-fundo:#F5F6F8; --quiz-texto:#111827; --quiz-mudo:#4B5563; --quiz-primaria:#334155; --quiz-chip:#E8ECF1; --quiz-borda:#D5DADF;
  --grade:color-mix(in srgb,var(--linha) 70%,transparent); --clarao:color-mix(in srgb,var(--feixe) 16%,transparent);
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --raio:6px; --raio-janela:14px; --ease:cubic-bezier(.2,.7,.2,1);
  --medida:40rem; /* ~70 caracteres no corpo de 1,125rem */
}
:root[data-tema='claro']{
  color-scheme:light;
  --fundo:#F5F6F8; --superficie:#FFFFFF; --superficie-2:#F1F3F6; --superficie-3:#E7EAEF;
  --texto:#0F1115; --texto-2:#4A5160; --linha:#E2E5EA; --linha-forte:#858C9B; --acento-texto:#2F49D6;
  --grade:color-mix(in srgb,var(--linha-forte) 30%,transparent); --clarao:color-mix(in srgb,var(--acento) 12%,transparent);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100svh;display:flex;flex-direction:column;background:var(--fundo);color:var(--texto);font:400 1.0625rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,p,ol,ul,figure{margin:0;padding:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--texto);outline-offset:3px;border-radius:2px}
.miolo{width:min(100% - 32px,75rem);margin-inline:auto}
.pular{position:absolute;left:16px;top:-100px;z-index:50;padding:12px 16px;background:var(--acento);color:var(--sobre-acento);border-radius:var(--raio);text-decoration:none;font-weight:600}
.pular:focus{top:12px}

/* ---------- topo e rodapé: os da home, com os links do blog ---------- */
.topo{position:sticky;top:0;z-index:30;padding-block:12px;background:linear-gradient(var(--fundo) 60%,transparent)}
.topo-linha{display:flex;align-items:center;gap:8px}
.logo{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px 0 8px;text-decoration:none;font:700 1.125rem/1 var(--sans);letter-spacing:-.02em;background:var(--superficie-2);border:1px solid var(--linha);border-radius:var(--raio)}
.logo img{flex:none}.logo b{font-weight:inherit;color:var(--acento-texto)}
.topo nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.topo nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;text-decoration:none;font-weight:500;font-size:.9375rem;color:var(--texto-2);border-radius:var(--raio)}
.topo nav a:hover,.topo nav a[aria-current]{color:var(--texto);background:var(--superficie-2)}
.topo nav .btn{color:var(--sobre-acento);margin-left:4px}
.topo nav .btn:hover{background:var(--acento-hover);color:var(--sobre-acento)}
@media (max-width:30em){.topo nav .so-largo{display:none}.logo span{display:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;text-decoration:none;font:600 .9375rem/1 var(--sans);background:var(--acento);color:var(--sobre-acento);border-radius:var(--raio);white-space:nowrap;transition:background-color .15s var(--ease)}
.btn:hover{background:var(--acento-hover)}
.btn-grande{min-height:52px;padding:0 24px;font-size:1.0625rem}

.rodape{margin-top:auto;border-top:1px solid var(--linha);padding-block:32px;color:var(--texto-2);font-size:.9375rem}
.rodape-linha{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.rodape nav{display:flex;flex-wrap:wrap;gap:8px}
.rodape nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;text-decoration:none;border-radius:var(--raio)}
.rodape nav a:hover{color:var(--texto);background:var(--superficie-2)}

/* ---------- abertura (índice e post): a grade e o clarão do hero da home, só atrás do título ---------- */
.abertura{position:relative;isolation:isolate;padding-block:56px 40px}
.abertura::before{content:"";position:absolute;z-index:-1;inset:-80px -16px 0;background:
  linear-gradient(to right,var(--grade) 1px,transparent 1px) 50% 0/64px 64px,
  linear-gradient(to bottom,var(--grade) 1px,transparent 1px) 0 0/64px 64px;
  -webkit-mask:radial-gradient(ellipse 60% 70% at 30% 30%,#000 10%,transparent 75%);mask:radial-gradient(ellipse 60% 70% at 30% 30%,#000 10%,transparent 75%)}
.abertura::after{content:"";position:absolute;z-index:-1;left:20%;top:30%;width:min(48rem,120%);aspect-ratio:2/1;translate:-30% -50%;background:radial-gradient(closest-side,var(--clarao),transparent);filter:blur(24px);pointer-events:none}
.abertura h1{font:600 clamp(2.25rem,6.4vw,3.75rem)/1.06 var(--sans);letter-spacing:-.04em;text-wrap:balance;max-width:20ch}
.abertura .sub{margin-top:20px;max-width:36rem;font-size:clamp(1.0625rem,2vw,1.25rem);line-height:1.55;color:var(--texto-2);text-wrap:pretty}
.trilha{margin-bottom:24px;font-size:.9375rem;color:var(--texto-2)}
.trilha ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.trilha li+li::before{content:"/";margin-right:8px;color:var(--linha-forte)}
.trilha a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--linha-forte)}
.trilha a:hover{color:var(--texto)}
.dados{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:24px;font-size:.9375rem;color:var(--texto-2)}
/* a assinatura do post: o avatar ilustrado e o nome, que leva à página do autor (/blog/andre-silva) */
.assinatura{margin-top:16px}
.assinatura a{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding-right:8px;text-decoration:none;font-size:.9375rem;font-weight:500;color:var(--texto);border-radius:var(--raio)}
.assinatura img{flex:none;width:32px;height:32px;border-radius:50%}
.assinatura a:hover span{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--linha-forte)}

/* a página do autor: o avatar grande ao lado do nome; no celular, em cima */
.autor{display:grid;gap:24px;align-items:center}
.autor img{width:120px;height:120px;border-radius:50%;box-shadow:0 0 0 1px var(--linha),0 0 0 8px color-mix(in srgb,var(--acento) 14%,transparent)}
@media (min-width:40em){.autor{grid-template-columns:160px 1fr;gap:40px}.autor img{width:160px;height:160px}}
.autor .sub{margin-top:12px}
.secao-titulo{margin:8px 0 16px;font:600 1.25rem/1.3 var(--sans);letter-spacing:-.015em;color:var(--texto-2)}

/* ---------- índice: uma lista de linhas, não uma grade de cartões (vale para 1 post ou para 20) ---------- */
.posts{list-style:none;border-top:1px solid var(--linha);margin-bottom:96px}
.post-item{position:relative;display:grid;grid-template-columns:1fr;gap:8px;padding:28px 4px;border-bottom:1px solid var(--linha);transition:background-color .15s var(--ease)}
.post-item:hover{background:color-mix(in srgb,var(--superficie-2) 60%,transparent)}
.post-item :is(h2,h3){font:600 clamp(1.375rem,3vw,1.75rem)/1.2 var(--sans);letter-spacing:-.025em;text-wrap:balance}
.post-item :is(h2,h3) a{text-decoration:none}
.post-item :is(h2,h3) a::after{content:"";position:absolute;inset:0} /* a linha inteira é o alvo do clique */
.post-item :is(h2,h3) a:focus-visible{outline:none}
.post-item:has(a:focus-visible){outline:2px solid var(--texto);outline-offset:-2px;border-radius:var(--raio)}
.post-item p{max-width:var(--medida);color:var(--texto-2);text-wrap:pretty}
.post-item .dados{margin-top:4px;font-size:.875rem}
@media (min-width:48em){
  .post-item{grid-template-columns:10rem 1fr;column-gap:32px;padding-inline:12px}
  .post-item .dados{grid-column:1;grid-row:1 / span 2;flex-direction:column;margin-top:6px}
  .post-item :is(h2,h3),.post-item p{grid-column:2}
}

/* ---------- o post ---------- */
.post{padding-bottom:96px}
.post .abertura,.corpo,.sumario,.fim{max-width:var(--medida);margin-inline:auto}
.post .abertura{padding-bottom:32px}

.sumario{margin-bottom:48px;padding:20px 24px;background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio-janela)}
.sumario h2{font:600 1rem/1.4 var(--sans);color:var(--texto-2)}
.sumario ol{margin-top:12px;padding-left:1.4em;display:grid;gap:6px}
.sumario li::marker{color:var(--texto-2);font-variant-numeric:tabular-nums}
.sumario a{text-decoration:none;font-weight:500}
.sumario a:hover{color:var(--acento-texto);text-decoration:underline;text-underline-offset:3px}

.corpo{font-size:1.125rem;line-height:1.72}
.corpo>*+*{margin-top:1.1em}
.corpo h2{margin-top:2.4em;font:600 clamp(1.5rem,3.4vw,1.875rem)/1.2 var(--sans);letter-spacing:-.03em;text-wrap:balance;scroll-margin-top:88px}
.corpo h3{margin-top:1.8em;font:600 1.25rem/1.3 var(--sans);letter-spacing:-.015em;scroll-margin-top:88px}
.corpo h2+*,.corpo h3+*{margin-top:.6em}
.corpo p,.corpo li{text-wrap:pretty}
.corpo ul,.corpo ol{padding-left:1.3em}
.corpo li+li{margin-top:.4em}
.corpo li::marker{color:var(--acento-texto)}
.corpo strong{font-weight:600}
.corpo a{color:var(--acento-texto);text-underline-offset:3px}
.corpo .nota{padding:16px 20px;background:var(--superficie-2);border-left:3px solid var(--acento);border-radius:0 var(--raio) var(--raio) 0;font-size:1rem;line-height:1.6;color:var(--texto-2)}
.corpo .nota strong{color:var(--texto)}
/* a chamada do meio do texto: o mesmo cartão do fim, menor */
.corpo .chamada{margin-block:2em;padding:20px 24px;background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio-janela)}
.corpo .chamada p{font-size:1rem;line-height:1.6;color:var(--texto-2)}
.corpo .chamada strong{color:var(--texto)}
.corpo .chamada .btn{margin-top:16px;color:var(--sobre-acento);text-decoration:none}

/* o mapa do funil: as seis telas na ordem em que o visitante passa por elas (uma sequência de verdade, por isso numerada).
   Mais largo que o texto, para as telas caberem lado a lado no computador; no celular, duas por linha. */
.mapa{width:min(100vw - 32px,60rem);margin:2em 0 2.4em 50%;translate:-50%} /* sai da coluna do texto, centrado nela */
.mapa ol{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;counter-reset:tela}
@media (min-width:40em){.mapa ol{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:60em){.mapa ol{grid-template-columns:repeat(6,minmax(0,1fr))}}
.corpo .mapa li{counter-increment:tela;margin:0;display:flex;flex-direction:column;gap:10px}
.tela{aspect-ratio:9/14;display:flex;flex-direction:column;gap:6px;padding:12px 10px;background:var(--quiz-fundo);color:var(--quiz-texto);border:1px solid var(--linha);border-radius:12px;font:500 .6875rem/1.3 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;overflow:hidden}
.tela .barra{height:4px;border-radius:2px;background:var(--quiz-chip)}
.tela .barra i{display:block;width:40%;height:100%;border-radius:inherit;background:var(--quiz-primaria)}
.tela .barra .quase{width:85%}
.tela b{font-weight:700;font-size:.75rem;line-height:1.25}
.tela .op{padding:5px 6px;background:#fff;border:1px solid var(--quiz-borda);border-radius:4px}
.tela .campo{height:18px;background:#fff;border:1px solid var(--quiz-borda);border-radius:4px}
.tela .acao{margin-top:auto;padding:6px;text-align:center;background:var(--quiz-primaria);color:#fff;border-radius:4px;font-weight:600}
.tela .mudo{color:var(--quiz-mudo)}
.tela .roda{width:34px;height:34px;margin:auto auto 0;border:3px solid var(--quiz-chip);border-top-color:var(--quiz-primaria);border-radius:50%}
.tela .preco{font-size:1rem;font-weight:700}
.mapa .rotulo{font-size:.9375rem;line-height:1.35;color:var(--texto-2)}
.mapa .rotulo::before{content:counter(tela);display:inline-grid;place-items:center;width:1.5em;height:1.5em;margin-right:8px;background:var(--superficie-2);border:1px solid var(--linha);border-radius:4px;color:var(--texto);font-size:.8125rem;font-weight:600;font-variant-numeric:tabular-nums}
.mapa .rotulo strong{color:var(--texto);font-weight:600}
.mapa figcaption{margin-top:14px;font-size:.9375rem;color:var(--texto-2)}

/* "Leia também": os outros posts antes do fecho (auditoria de 2026-11-05: links entre os posts) */
.leia{max-width:var(--medida);margin:64px auto 0}
.leia h2{font:600 1.25rem/1.3 var(--sans);letter-spacing:-.02em}
.leia ul{margin-top:12px;display:grid;gap:4px;list-style:none;padding:0}
.leia a{display:flex;align-items:center;min-height:44px;color:var(--texto);font-weight:500;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--linha-forte)}
.leia a:hover{text-decoration-color:var(--texto)}
.fim{margin-top:64px;padding:32px;background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio-janela)}
.fim h2{font:600 clamp(1.5rem,3.4vw,1.875rem)/1.2 var(--sans);letter-spacing:-.03em}
.fim p{margin-top:12px;color:var(--texto-2);font-size:1.0625rem}
.fim ul{margin-top:16px;padding-left:1.3em;display:grid;gap:6px}
.fim li::marker{color:var(--acento-texto)}
.fim .btn{margin-top:24px}
.fim .miudo{margin-top:16px;font-size:.9375rem}
@media (max-width:30em){.fim{padding:24px 20px}}

@media (prefers-reduced-motion:reduce){.btn,.post-item{transition:none}}