/* =========================================================
   Sistema de e-book Five.ads  ·  identidade v3
   Clima 1 (dark) na capa + Clima 3 (creme/respiro) no corpo.
   Editar aqui muda TODOS os e-books de uma vez.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* cores v3 */
  --preto:#0D0D0D;
  --grafite:#1E1E1E;
  --lima:#B5F23D;
  --lima-suave:#DBF7A6;
  --azul:#1C9BF0;
  --azul-nuvem:#CFE8FB;
  --creme:#F5F4EC;
  --branco:#FFFFFF;
  --apoio-claro:#666666;
  --apoio-escuro:#888888;

  --display:'Bricolage Grotesque', system-ui, sans-serif;
  --corpo:'Inter', system-ui, sans-serif;

  --raio:22px;
  --raio-g:28px;
  --sombra:0 14px 30px -18px rgba(0,0,0,.4);
  --largura:720px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--creme);
  color:var(--preto);
  font-family:var(--corpo);
  font-size:18px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
i,em{font-style:normal;font-weight:600} /* regra da marca: nunca italico */

/* ---------- barra de progresso de leitura ---------- */
.progresso{
  position:fixed;top:0;left:0;height:4px;width:0%;
  background:var(--lima);z-index:99;transition:width .1s linear;
}

/* ---------- capa (Clima 1 · editorial dark) ---------- */
.capa{
  background:var(--preto);
  color:var(--branco);
  padding:36px 24px 72px;
  position:relative;
  overflow:hidden;
}
.capa::after{ /* granulado fino sobre preto */
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.16;
  background-image:radial-gradient(rgba(255,255,255,.35) .5px, transparent .5px);
  background-size:3px 3px;
}
.capa-inner{max-width:var(--largura);margin:0 auto;position:relative;z-index:1}
.marca{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:64px}
.marca img{width:132px}
.selo{
  font-family:var(--corpo);font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--preto);background:var(--lima);
  padding:7px 16px;border-radius:999px;white-space:nowrap;
}
.kicker{
  font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lima);margin:0 0 20px;
}
h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(38px,7.4vw,66px);line-height:1.02;letter-spacing:-.025em;
  margin:0 0 24px;
}
h1 .grifo{color:var(--lima)}
.sub{font-size:clamp(17px,2.4vw,21px);color:#DDD;max-width:34em;margin:0 0 40px}
.capa-meta{
  display:flex;flex-wrap:wrap;gap:10px;padding-top:28px;
  border-top:1px solid rgba(255,255,255,.14);
}
.capa-meta span{
  font-size:13px;font-weight:500;color:var(--branco);
  border:1px solid rgba(255,255,255,.28);padding:6px 14px;border-radius:999px;
}

/* ---------- corpo (Clima 3 · creme com respiro) ---------- */
main{max-width:var(--largura);margin:0 auto;padding:64px 24px 24px}

.sumario{
  background:var(--branco);border-radius:var(--raio-g);
  padding:30px 32px;box-shadow:var(--sombra);margin-bottom:64px;
}
.sumario h2{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--apoio-claro);margin:0 0 18px;font-family:var(--corpo);font-weight:600}
.sumario ol{margin:0;padding-left:0;list-style:none;counter-reset:s}
.sumario li{counter-increment:s;border-top:1px solid #EDEBE0}
.sumario li:first-child{border-top:0}
.sumario a{
  display:flex;gap:16px;align-items:baseline;padding:13px 0;
  color:var(--preto);text-decoration:none;font-weight:500;
}
.sumario a::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--display);font-weight:800;font-size:14px;color:var(--lima);
  background:var(--preto);border-radius:999px;padding:3px 9px;flex:none;
}
.sumario a:hover{color:var(--azul)}

section{margin-bottom:60px;scroll-margin-top:28px}
h2{
  font-family:var(--display);font-weight:800;
  font-size:clamp(27px,4.4vw,38px);line-height:1.12;letter-spacing:-.02em;
  margin:0 0 20px;
}
h3{
  font-family:var(--display);font-weight:600;
  font-size:clamp(20px,3vw,24px);line-height:1.25;margin:38px 0 12px;
}
p{margin:0 0 20px}
strong{font-weight:700}
a{color:var(--azul)}

.num-secao{
  display:inline-block;font-family:var(--display);font-weight:800;font-size:13px;
  letter-spacing:.1em;color:var(--preto);background:var(--lima);
  padding:5px 14px;border-radius:999px;margin-bottom:16px;
}

/* dado gigante (L4) */
.dado{
  background:var(--preto);color:var(--branco);border-radius:var(--raio-g);
  padding:40px 34px;margin:40px 0;text-align:center;
}
.dado .n{
  font-family:var(--display);font-weight:800;color:var(--lima);
  font-size:clamp(52px,11vw,86px);line-height:1;letter-spacing:-.03em;display:block;
}
.dado .ctx{color:#DDD;font-size:16px;margin:14px auto 0;max-width:30em}

/* caixa de destaque */
.caixa{
  background:var(--branco);border-radius:var(--raio);padding:26px 28px;
  box-shadow:var(--sombra);margin:30px 0;
}
.caixa.azul{background:var(--azul-nuvem);box-shadow:none;border:1px solid #A9D5F5}
.caixa.lima{background:var(--lima-suave);box-shadow:none;border:1px solid #C4E88A}
.caixa .rot{
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--apoio-claro);margin:0 0 10px;
}
.caixa p:last-child{margin-bottom:0}

/* erra / acerta */
.erra-acerta{display:grid;gap:14px;margin:28px 0}
@media(min-width:640px){.erra-acerta{grid-template-columns:1fr 1fr}}
.ea{border-radius:var(--raio);padding:22px 24px;font-size:16.5px}
.ea .rot{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:0 0 10px}
.ea.x{background:var(--branco);border:1px solid #E3E0D2}
.ea.x .rot{color:#B03A3A}
.ea.v{background:var(--lima-suave);border:1px solid #C4E88A}
.ea.v .rot{color:#3B6B0E}
.ea p:last-child{margin-bottom:0}

/* mensagem pronta pra copiar */
.msg{
  background:var(--branco);border-left:4px solid var(--lima);border-radius:14px;
  padding:18px 22px;margin:16px 0;font-size:16.5px;box-shadow:var(--sombra);
}
.msg .rot{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--apoio-claro);margin:0 0 8px}
.msg p:last-child{margin-bottom:0}

/* listas */
ul.check{list-style:none;padding:0;margin:24px 0}
ul.check li{position:relative;padding:11px 0 11px 34px;border-top:1px solid #E7E4D7}
ul.check li:first-child{border-top:0}
ul.check li::before{
  content:'';position:absolute;left:0;top:19px;width:15px;height:15px;
  border:2px solid var(--preto);border-radius:5px;background:var(--lima);
}

/* tags */
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}
.tag{font-size:13px;font-weight:500;background:var(--azul-nuvem);border:1px solid #A9D5F5;color:var(--preto);padding:5px 14px;border-radius:999px}

/* fechamento / CTA */
.fecho{background:var(--preto);color:var(--branco);padding:64px 24px;margin-top:24px}
.fecho-inner{max-width:var(--largura);margin:0 auto}
.fecho .tese{
  font-family:var(--display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(26px,5vw,40px);line-height:1.1;margin:0 0 22px;
}
.fecho .tese span{color:var(--lima)}
.fecho p{color:#DDD;max-width:36em}
.cta{
  display:inline-block;background:var(--lima);color:var(--preto);
  font-weight:700;text-decoration:none;padding:15px 30px;border-radius:999px;
  margin-top:14px;font-size:17px;
}
.assinatura{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;
  margin-top:52px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14);
}
.assinatura img{width:110px;opacity:.95}
.assinatura small{color:var(--apoio-escuro);font-size:13px}

/* voltar pra biblioteca */
.voltar{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  color:var(--preto);font-weight:600;font-size:15px;
  background:var(--branco);border:1px solid #E3E0D2;padding:9px 18px;border-radius:999px;
  margin-bottom:8px;
}
.voltar:hover{border-color:var(--azul);color:var(--azul)}

/* ---------- celular ---------- */
@media(max-width:560px){
  body{font-size:17px}
  .capa{padding:26px 20px 56px}
  .marca{margin-bottom:44px;gap:12px}
  .marca img{width:108px}
  .selo{font-size:10.5px;padding:6px 12px;letter-spacing:.1em}
  main{padding:48px 20px 20px}
  .sumario{padding:24px 22px}
  .dado{padding:32px 22px}
  .caixa,.ea{padding:20px 20px}
  .msg{padding:16px 18px}
  .fecho{padding:52px 20px}
}

@media print{
  .progresso,.voltar,.cta{display:none}
  body{background:#fff}
  section{break-inside:avoid}
}