/* =========================================================
   Manual Infantil — design system v2
   Conceito: um manual de verdade, escrito à mão por quem cuida.
   Papel com textura, tinta, abas de índice, carimbos,
   anotações à mão na margem e ícones de traço próprios.
   ========================================================= */

:root {
  /* Papel e tinta */
  --papel: #F6F1E7;
  --papel-2: #EDE5D5;
  --papel-3: #FBF8F1;
  --tinta: #1E2A26;
  --tinta-2: #4A5650;
  --verde: #0B3B33;
  --verde-2: #2E5E55;
  /* Acentos */
  --tomate: #D9573A;        /* decorativo / texto grande */
  --tomate-forte: #B9452B;  /* botão com texto branco (5.3:1) */
  --tomate-escuro: #9A3A22; /* texto pequeno em tomate (6.2:1) */
  --mel: #E8B64C;
  --mel-claro: #F3DFA6;
  --ceu: #9DC3C1;
  --ceu-claro: #D7E7E5;
  --fio: rgba(30, 42, 38, .18);
  --fio-forte: rgba(30, 42, 38, .42);
  --tinta-carimbo: rgba(185, 69, 43, .9);

  /* Abas dos capítulos */
  --cap-1: var(--tomate);
  --cap-2: var(--mel);
  --cap-3: var(--ceu);
  --cap-4: var(--verde-2);

  /* Tipo */
  --f-livro: "Literata", Georgia, "Times New Roman", serif;
  --f-texto: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mao: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --t-base: 1.125rem;
  --t-1: 1.40625rem;
  --t-2: 1.7578rem;
  --t-3: clamp(1.9rem, 1.6rem + 1.2vw, 2.197rem);
  --t-4: clamp(2.1rem, 1.6rem + 2vw, 2.747rem);
  --t-5: clamp(2.5rem, 1.7rem + 3.4vw, 3.433rem);
  --t-6: clamp(2.9rem, 1.5rem + 5.6vw, 4.6rem);
  --t-meta: 1rem;

  /* Espaço */
  --e-1: .25rem; --e-2: .5rem; --e-3: .75rem; --e-4: 1rem; --e-5: 1.5rem;
  --e-6: 2rem; --e-7: 3rem; --e-8: 4rem; --e-9: 6rem;

  /* Forma */
  --r-1: 6px;
  --r-2: 10px;
  --leitura: 68ch;
  --margem: 15rem;
  --gutter: 16px;
  --sombra-papel: 0 1px 0 rgba(255,255,255,.7) inset, 0 1px 2px rgba(30,42,38,.06), 0 14px 28px -22px rgba(11,59,51,.45);

  /* Movimento */
  --ease: cubic-bezier(.3, .7, .2, 1);
  --ease-carimbo: cubic-bezier(.2, 1.6, .4, 1);

  --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .16 0 0 0 0 .15 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");

  interpolate-size: allow-keywords;
  color-scheme: light;
}
@media (min-width: 900px) { :root { --t-base: 1.1875rem; --gutter: 32px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1.5rem; }
body {
  margin: 0;
  background: var(--papel) var(--grao);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: var(--t-base);
  line-height: 1.6;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 {
  font-family: var(--f-livro); font-weight: 600; line-height: 1.1;
  letter-spacing: -0.02em; margin: 0 0 var(--e-4); color: var(--verde); text-wrap: balance;
}
h1 { font-size: var(--t-6); letter-spacing: -0.035em; }
h2 { font-size: var(--t-4); letter-spacing: -0.03em; }
h3 { font-size: var(--t-2); }
h4 { font-size: var(--t-1); letter-spacing: -0.01em; }
p { margin: 0 0 var(--e-4); text-wrap: pretty; }
ul, ol { margin: 0 0 var(--e-4); padding-left: 1.25em; }
li + li { margin-top: var(--e-2); }
a { color: var(--verde); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; border-radius: 3px; }
.escuro :focus-visible { outline-color: var(--mel); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pular { position: absolute; left: var(--gutter); top: -100px; z-index: 60; background: var(--verde); color: var(--papel); padding: var(--e-3) var(--e-4); border-radius: var(--r-1); }
.pular:focus { top: var(--e-3); }

/* ---------- grade editorial ---------- */
.folha { width: 100%; max-width: calc(var(--leitura) + var(--margem) + var(--e-7) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.folha--larga { max-width: 1240px; }
.linha > .corpo { max-width: var(--leitura); }
@media (min-width: 1100px) {
  .linha { display: grid; grid-template-columns: minmax(0, var(--leitura)) var(--margem); column-gap: var(--e-7); align-items: start; }
}
.secao { padding-block: var(--e-8); position: relative; }
@media (min-width: 900px) { .secao { padding-block: var(--e-9); } }

.cabeco {
  display: flex; justify-content: space-between; gap: var(--e-4); align-items: baseline;
  font-size: var(--t-meta); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2);
  border-bottom: 1px solid var(--fio); padding-bottom: var(--e-2); margin: 0 0 var(--e-6);
}
.cabeco span:last-child { font-family: var(--f-livro); font-style: italic; text-transform: none; letter-spacing: 0; }
.lead { font-size: var(--t-1); line-height: 1.5; }
.meta { font-size: var(--t-meta); color: var(--tinta-2); }

/* ---------- ícones ---------- */
.ic {
  width: 1.5em; height: 1.5em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  --ic-acento: var(--mel);
  overflow: visible;
}
.ic--g { width: 3rem; height: 3rem; }
.ic--xg { width: 4.25rem; height: 4.25rem; stroke-width: 1.5; }
.ic--tomate { --ic-acento: var(--tomate); }
.ic--ceu { --ic-acento: var(--ceu); }
/* Traço que se desenha ao entrar na tela */
.js .desenha .ic, .js .ic.desenha { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s var(--ease); }
.js .desenha.visto .ic, .js .ic.desenha.visto { stroke-dashoffset: 0; }

/* ---------- anotações à mão ---------- */
.mao { font-family: var(--f-mao); font-weight: 700; font-size: 1.6rem; line-height: 1.05; color: var(--tomate-escuro); letter-spacing: 0; }
.anot { display: inline-flex; align-items: flex-end; gap: .25rem; transform: rotate(-3deg); }
.anot svg { width: 56px; height: 40px; stroke: var(--tomate-escuro); fill: none; stroke-width: 2; stroke-linecap: round; }
.circulado { position: relative; display: inline-block; white-space: nowrap; }
.circulado svg { position: absolute; inset: -16% -7% -22% -6%; width: 113%; height: 138%; stroke: var(--tomate); fill: none; stroke-width: 2.2; stroke-linecap: round; pointer-events: none; overflow: visible; }
.js .circulado svg path { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ease) .5s; }
.js .circulado.visto svg path { stroke-dashoffset: 0; }

/* ---------- marca-texto ---------- */
.marca {
  background-image: linear-gradient(100deg, rgba(232,182,76,0) .8%, rgba(232,182,76,.62) 2.6%, rgba(232,182,76,.5) 50%, rgba(232,182,76,.58) 96%, rgba(232,182,76,0) 99%);
  background-repeat: no-repeat; background-size: 100% 62%; background-position: 0 88%;
  box-decoration-break: clone; -webkit-box-decoration-break: clone; padding-inline: .08em;
}
.js .marca { background-size: 0% 62%; transition: background-size 1.1s var(--ease) .15s; }
.js .marca.visto { background-size: 100% 62%; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 56px; padding: .7rem 1.5rem; border-radius: var(--r-2);
  border: 2px solid transparent; font: 700 1.125rem/1.25 var(--f-texto);
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, transform .15s var(--ease), box-shadow .15s;
  position: relative;
}
.btn .ic { width: 1.35em; height: 1.35em; --ic-acento: currentColor; }
.btn:active { transform: translateY(1px); }
.btn--primario { background: var(--tomate-forte); color: #fff; box-shadow: 0 3px 0 var(--tomate-escuro); }
.btn--primario:hover { background: var(--tomate-escuro); text-decoration: none; }
.btn--primario:active { box-shadow: 0 1px 0 var(--tomate-escuro); transform: translateY(2px); }
.btn--verde { background: var(--verde); color: var(--papel); box-shadow: 0 3px 0 #06231e; }
.btn--verde:hover { background: #072b25; text-decoration: none; }
.btn--secundario { background: transparent; color: var(--verde); border-color: var(--verde); }
.btn--secundario:hover { background: var(--verde); color: var(--papel); text-decoration: none; }
.btn--leve { background: var(--papel-3); color: var(--verde); border: 1.5px solid var(--fio-forte); min-height: 48px; padding: .5rem 1rem; font-size: 1rem; }
.btn--leve:hover { border-color: var(--verde); text-decoration: none; }
.escuro .btn--secundario { color: var(--papel); border-color: var(--papel); }
.escuro .btn--secundario:hover { background: var(--papel); color: var(--verde); }
.btn--largo { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; margin-top: var(--e-5); }
@media (max-width: 520px) { .acoes .btn { width: 100%; } }
.link-seta { display: inline-flex; align-items: center; gap: .4em; font-weight: 700; }
.link-seta .ic { width: 1.2em; height: 1.2em; transition: transform .2s var(--ease); }
.link-seta:hover .ic { transform: translateX(4px); }

/* ---------- carimbo (micro vitória) ---------- */
.carimbo {
  width: 92px; height: 92px; flex: none; color: var(--tinta-carimbo);
  transform: rotate(-9deg);
  mix-blend-mode: multiply;
}
.carimbo text { font: 700 9.2px/1 var(--f-texto); letter-spacing: 1.6px; fill: currentColor; text-transform: uppercase; }
.carimbo .ic { stroke: currentColor; }
.carimbo--p { width: 64px; height: 64px; }
.js .carimbo.entra { animation: carimbar .55s var(--ease-carimbo) both; }
@keyframes carimbar {
  0% { opacity: 0; transform: scale(1.9) rotate(-22deg); filter: blur(2px); }
  60% { opacity: 1; transform: scale(.92) rotate(-7deg); filter: blur(0); }
  100% { opacity: 1; transform: scale(1) rotate(-9deg); }
}

/* ---------- selo de idade ---------- */
.selos { display: flex; flex-wrap: wrap; gap: var(--e-2); list-style: none; padding: 0; margin: 0; }
.selos li { margin: 0; }
.selo { display: inline-flex; align-items: center; gap: .35em; font: 700 1rem/1 var(--f-texto); color: var(--verde); background: var(--ceu-claro); border: 1px solid var(--verde); border-radius: 999px; padding: .4rem .8rem; white-space: nowrap; }
.selo small { font-weight: 400; font-size: 1rem; }
.selo--mel { background: var(--mel-claro); }

/* ---------- nota de margem ---------- */
.nota { font-size: 1.0625rem; line-height: 1.55; border-left: 2px solid var(--tomate); padding: var(--e-1) 0 var(--e-1) var(--e-4); margin: var(--e-5) 0 var(--e-5) var(--e-3); }
.nota__assina { display: block; font-family: var(--f-mao); font-weight: 700; font-size: 1.45rem; line-height: 1.1; color: var(--tomate-escuro); margin-bottom: var(--e-2); }
.nota p:last-child { margin-bottom: 0; }
.nota--citacao p { font-family: var(--f-livro); font-size: 1.125rem; }
@media (min-width: 1100px) { .linha > .nota { margin: .35rem 0 0; } }
.escuro .nota { border-color: var(--mel); }
.escuro .nota__assina { color: var(--mel-claro); }

/* ---------- topo ---------- */
.topo { border-bottom: 1px solid var(--fio); background: rgba(246,241,231,.92); }
.topo .folha { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); min-height: 64px; }
.marca-nome { font-family: var(--f-livro); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--verde); text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; }
.marca-nome svg { width: 30px; height: 30px; }
.topo nav ul { display: flex; gap: var(--e-5); list-style: none; margin: 0; padding: 0; }
.topo nav li + li { margin: 0; }
.topo nav a { font-size: var(--t-meta); color: var(--tinta); text-decoration: none; padding-block: .5rem; }
.topo nav a:hover { color: var(--verde); text-decoration: underline; }
.so-desktop { display: none !important; }
@media (min-width: 980px) { .so-desktop { display: flex !important; } .so-mobile { display: none !important; } }

/* ---------- abas de índice (desktop) ---------- */
.abas-indice { display: none; }
@media (min-width: 1280px) {
  .abas-indice {
    display: flex; flex-direction: column; gap: 6px;
    position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 15;
    list-style: none; margin: 0; padding: 0;
  }
  .abas-indice li { margin: 0; }
  .abas-indice a {
    display: block; writing-mode: vertical-rl; transform: rotate(180deg);
    font: 700 .95rem/1 var(--f-texto); letter-spacing: .06em; text-decoration: none;
    padding: 14px 9px 14px 12px; border-radius: 0 8px 8px 0;
    background: var(--papel-2); color: var(--verde);
    border: 1px solid var(--fio-forte); border-left: 0;
    box-shadow: -2px 0 0 rgba(0,0,0,.02);
    transition: padding .2s var(--ease), background-color .2s;
  }
  .abas-indice a:hover, .abas-indice a[aria-current="true"] { padding-bottom: 24px; }
  .abas-indice a[aria-current="true"] { background: var(--verde); color: var(--papel); }
  .abas-indice li:nth-child(1) a { border-top: 4px solid var(--tomate); }
  .abas-indice li:nth-child(2) a { border-top: 4px solid var(--mel); }
  .abas-indice li:nth-child(3) a { border-top: 4px solid var(--ceu); }
  .abas-indice li:nth-child(4) a { border-top: 4px solid var(--verde-2); }
  .abas-indice li:nth-child(5) a { border-top: 4px solid var(--tomate); }
  .abas-indice li:nth-child(6) a { border-top: 4px solid var(--mel); }
}

/* ---------- capa ---------- */
.capa { padding-block: var(--e-6) var(--e-8); }
@media (min-width: 900px) { .capa { padding-block: var(--e-8) var(--e-9); } }
.capa__grade { display: grid; gap: var(--e-7); align-items: center; }
@media (min-width: 900px) { .capa__grade { grid-template-columns: 1.2fr .9fr; gap: var(--e-8); } }
.capa__sobre { font-size: var(--t-meta); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); margin-bottom: var(--e-4); }
.capa h1 { margin-bottom: var(--e-2); }
.capa__sub { font-family: var(--f-livro); font-style: italic; font-size: var(--t-1); margin-bottom: var(--e-5); }
.capa__promessa { font-family: var(--f-livro); font-size: var(--t-2); line-height: 1.32; letter-spacing: -0.015em; margin-bottom: var(--e-5); }
.capa__tempo { display: flex; align-items: center; gap: var(--e-3); margin: var(--e-5) 0 0; }
.capa__tempo .mao { font-size: 1.5rem; }
.turma { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .25em .6em; border-top: 1px solid var(--fio-forte); border-bottom: 1px solid var(--fio-forte); padding: .55rem 0; margin: var(--e-2) 0 0; font-weight: 700; }
.turma__rotulo { font-weight: 400; color: var(--tinta-2); }

/* Prancha: a capa do manual, que se preenche durante a jornada */
.prancha {
  position: relative; background: var(--papel-3) var(--grao); border: 1px solid var(--verde);
  border-radius: 4px 10px 10px 4px; padding: var(--e-6) var(--e-5) var(--e-5) calc(var(--e-5) + 14px);
  box-shadow: var(--sombra-papel), -6px 0 0 -1px var(--verde-2);
  max-width: 440px; margin-inline: auto; width: 100%;
}
.prancha::before { content: ""; position: absolute; inset: 8px 8px 8px 22px; border: 1px solid var(--fio); border-radius: 3px; pointer-events: none; }
.prancha::after { content: ""; position: absolute; left: 12px; top: 0; bottom: 0; width: 1px; background: var(--fio-forte); }
.prancha__topo { display: flex; justify-content: space-between; font-size: var(--t-meta); color: var(--tinta-2); letter-spacing: .08em; text-transform: uppercase; position: relative; }
.prancha__desenho { margin: var(--e-5) auto var(--e-3); width: 100%; max-width: 320px; }
.prancha__legenda { font-family: var(--f-livro); font-style: italic; text-align: center; position: relative; margin-bottom: var(--e-3); }
.prancha__dono { text-align: center; position: relative; min-height: 2.2rem; margin-bottom: var(--e-3); }
.prancha__dono .mao { font-size: 1.7rem; color: var(--verde); }
.prancha .selos { justify-content: center; position: relative; }
.prancha .selo { transition: background-color .3s, color .3s, transform .3s var(--ease-carimbo); }
.prancha .selo.ativo { background: var(--verde); color: var(--papel); transform: scale(1.08) rotate(-3deg); }
.desenho-traco path, .desenho-traco circle { stroke: var(--verde); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.desenho-traco .preenche { fill: var(--papel-3); }
.desenho-traco .fino { stroke-width: 1.5; }
.desenho-traco .ponto { fill: var(--tomate); stroke: none; }
.desenho-traco .linha-pauta { stroke: var(--tomate); opacity: .55; }
.desenho-traco .linha-fraca { opacity: .35; }
.desenho-traco .fita { fill: var(--tomate); stroke: var(--tomate-escuro); stroke-width: 1.5; }
.desenho-traco .sol { fill: var(--mel); stroke: var(--verde); stroke-width: 2; }
.desenho-traco .raio { stroke: var(--mel); stroke-width: 2.2; }
.desenho-traco .pessoa { fill: var(--papel-3); stroke: var(--verde); stroke-width: 2.5; }
.desenho-traco .adulto { fill: var(--ceu-claro); }
.desenho-traco .crianca { fill: var(--mel-claro); }
.desenho-traco .coracao { fill: var(--tomate); stroke: none; }
.desenho-traco .ic-pagina { color: var(--verde); --ic-acento: var(--mel); stroke-width: 1.6; }
/* cores entram depois do traço */
.js .desenho-traco.desenha .fita, .js .desenho-traco.desenha .adulto, .js .desenho-traco.desenha .crianca, .js .desenho-traco.desenha .sol, .js .desenho-traco.desenha .coracao { fill-opacity: 0; transition: stroke-dashoffset 1.6s var(--ease), fill-opacity .8s ease 1.2s; }
.js .desenho-traco.desenha.visto .fita, .js .desenho-traco.desenha.visto .adulto, .js .desenho-traco.desenha.visto .crianca, .js .desenho-traco.desenha.visto .sol, .js .desenho-traco.desenha.visto .coracao { fill-opacity: 1; }
.js .desenho-traco.desenha .coracao { transform-origin: 213px 104px; transform: scale(0); transition: transform .6s var(--ease-carimbo) 1.9s; }
.js .desenho-traco.desenha.visto .coracao { transform: scale(1); }
.js .desenho-traco.desenha path { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease); }
.js .desenho-traco.desenha path:nth-of-type(n+6) { transition-delay: .5s; }
.js .desenho-traco.desenha.visto path { stroke-dashoffset: 0; }

/* =========================================================
   JORNADA: monte seu manual em 4 passos
   ========================================================= */
.jornada { background: linear-gradient(var(--papel-2), var(--papel-2)) top / 100% 1px no-repeat; }
.jornada__grade { display: grid; gap: var(--e-6); }
@media (min-width: 1100px) { .jornada__grade { grid-template-columns: minmax(0, 1fr) 19rem; gap: var(--e-7); align-items: start; } }
.jornada__intro { display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-5); align-items: flex-end; margin-bottom: var(--e-6); }
.jornada__intro h2 { margin: 0; }

.passo {
  position: relative;
  background: var(--papel-3);
  border: 1px solid var(--fio-forte);
  border-radius: 4px var(--r-2) var(--r-2) var(--r-2);
  padding: var(--e-5) var(--e-4) var(--e-5) calc(var(--e-4) + 14px);
  margin-bottom: var(--e-7);
  box-shadow: var(--sombra-papel);
  transition: opacity .4s, filter .4s, transform .4s var(--ease);
}
/* margem vermelha de caderno */
.passo::before { content: ""; position: absolute; left: 14px; top: 0; bottom: 0; width: 1px; background: rgba(217,87,58,.45); }
@media (min-width: 700px) { .passo { padding: var(--e-6) var(--e-6) var(--e-6) calc(var(--e-6) + 14px); } .passo::before { left: 20px; } }
.passo__aba {
  position: absolute; top: -1px; left: 28px; transform: translateY(-100%);
  background: var(--verde); color: var(--papel);
  font: 700 .95rem/1 var(--f-texto); letter-spacing: .08em; text-transform: uppercase;
  padding: .45rem .8rem .4rem; border-radius: 6px 6px 0 0;
}
.passo[data-estado="feito"] .passo__aba { background: var(--tomate-forte); color: #fff; }
.passo__titulo { display: flex; gap: var(--e-4); align-items: flex-start; justify-content: space-between; }
.passo h3 { font-size: var(--t-2); margin-bottom: var(--e-2); }
.passo__ajuda { color: var(--tinta-2); margin-bottom: var(--e-5); }
.js .passo[data-estado="bloqueado"] { opacity: .5; filter: saturate(.6); }
.js .passo[data-estado="bloqueado"] .opcoes, .js .passo[data-estado="bloqueado"] .chips { pointer-events: none; }
.passo__carimbo { position: absolute; right: 10px; top: -22px; pointer-events: none; }
@media (min-width: 700px) { .passo__carimbo { right: 22px; top: -28px; } }

.opcoes { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.25rem), 1fr)); list-style: none; padding: 0; margin: 0; }
.opcoes li { margin: 0; }
.opcao {
  width: 100%; height: 100%; min-height: 120px; cursor: pointer;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: var(--e-3);
  text-align: left; padding: var(--e-4); border-radius: var(--r-2);
  background: #fff; border: 1.5px solid var(--fio-forte); color: var(--verde);
  font: 700 1.0625rem/1.25 var(--f-texto);
  transition: border-color .2s, background-color .2s, color .2s, transform .2s var(--ease);
  position: relative;
}
.opcao .ic { width: 2.6rem; height: 2.6rem; stroke-width: 1.6; transition: transform .35s var(--ease-carimbo); }
.opcao small { display: block; font-weight: 400; font-size: 1rem; color: var(--tinta-2); margin-top: .2rem; }
.opcao:hover { border-color: var(--verde); transform: translateY(-2px); }
.opcao:hover .ic { transform: rotate(-6deg) scale(1.06); }
.opcao[aria-pressed="true"] { background: var(--verde); color: var(--papel); border-color: var(--verde); }
.opcao[aria-pressed="true"] small { color: var(--ceu-claro); }
.opcao[aria-pressed="true"] .ic { --ic-acento: var(--tomate); }
.opcao__marca { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--fio-forte); display: grid; place-items: center; background: #fff; }
.opcao__marca .ic { width: 16px; height: 16px; stroke-width: 3; opacity: 0; color: var(--tomate-forte); }
.opcao[aria-pressed="true"] .opcao__marca { border-color: var(--papel); }
.opcao[aria-pressed="true"] .opcao__marca .ic { opacity: 1; }

.chips { display: flex; flex-wrap: wrap; gap: var(--e-2); list-style: none; padding: 0; margin: 0; }
.chips li { margin: 0; }
.chip {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 48px; text-align: left; cursor: pointer;
  padding: .55rem .9rem; border-radius: 999px; background: #fff; border: 1.5px solid var(--fio-forte);
  font-family: var(--f-livro); font-size: 1.0625rem; line-height: 1.25; color: var(--tinta);
  transition: border-color .2s, background-color .2s;
}
.chip:hover { border-color: var(--verde); }
.chip[aria-pressed="true"] { background: var(--mel-claro); border-color: var(--verde); }
.chip__cap { display: none; font: 700 .9rem/1 var(--f-texto); padding: .3rem .5rem; border-radius: 4px; color: var(--verde); background: var(--papel-3); border: 1px solid var(--verde); white-space: nowrap; }
.chip[aria-pressed="true"] .chip__cap { display: inline-block; animation: aparece .35s var(--ease-carimbo); }
@keyframes aparece { from { opacity: 0; transform: scale(.6) rotate(-8deg); } to { opacity: 1; transform: none; } }

/* Retorno (a micro vitória) */
.retorno {
  display: flex; gap: var(--e-4); align-items: flex-start;
  margin-top: var(--e-5); padding: var(--e-4) var(--e-4) var(--e-4) var(--e-4);
  border-radius: var(--r-1); background: var(--ceu-claro); border: 1px dashed var(--verde);
}
.retorno[hidden] { display: none; }
.retorno .ic { width: 2rem; height: 2rem; color: var(--verde); --ic-acento: var(--tomate); margin-top: .1rem; }
.retorno p { margin: 0; }
.retorno p + p { margin-top: var(--e-2); }
.retorno b { color: var(--verde); }
.js .retorno.entra { animation: sobe .45s var(--ease) both; }
@keyframes sobe { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.retorno ul { margin: var(--e-2) 0 0; padding-left: 1.1em; }
.retorno li + li { margin-top: .15rem; }

/* Passo 4: folha de rosto do manual */
.folha-rosto {
  border: 1px solid var(--verde); border-radius: 4px; padding: var(--e-5); margin-bottom: var(--e-5);
  background: var(--papel) var(--grao); position: relative; text-align: center;
}
.folha-rosto::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--fio); pointer-events: none; }
.folha-rosto__k { font-size: var(--t-meta); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); margin: 0 0 var(--e-2); }
.folha-rosto__titulo { font-family: var(--f-livro); font-size: var(--t-2); color: var(--verde); line-height: 1.15; margin: 0 0 var(--e-3); letter-spacing: -0.02em; }
.folha-rosto__linhas { list-style: none; padding: 0; margin: 0 auto; max-width: 30rem; text-align: left; }
.folha-rosto__linhas li { display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--e-3); padding: .5rem 0; border-bottom: 1px dotted var(--fio-forte); margin: 0; }
.folha-rosto__linhas span:first-child { color: var(--tinta-2); font-size: var(--t-meta); padding-top: .15rem; }
.folha-rosto__linhas .mao { font-size: 1.5rem; color: var(--verde); }
@media (max-width: 420px) { .folha-rosto__linhas li { grid-template-columns: 1fr; gap: 0; } }

.campo { margin-bottom: var(--e-5); border: 0; padding: 0; min-width: 0; }
.campo > label, .campo legend { display: block; font-weight: 700; margin-bottom: var(--e-2); padding: 0; }
.opcional { font-weight: 400; color: var(--tinta-2); }
.campo input[type="text"], .campo input[type="url"], .campo select, .campo textarea {
  width: 100%; min-height: 56px; font: 400 1.125rem/1.35 var(--f-texto); color: var(--tinta);
  background: #fff; border: 1.5px solid var(--tinta-2); border-radius: var(--r-1); padding: .75rem .9rem;
}
.campo textarea { min-height: 140px; resize: vertical; }
.campo select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--verde) 50%), linear-gradient(135deg, var(--verde) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2.5rem; }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline: 3px solid var(--verde); outline-offset: 1px; border-color: var(--verde); }
.privacidade { display: flex; gap: .5rem; align-items: flex-start; font-size: var(--t-meta); color: var(--tinta-2); margin: var(--e-4) 0 0; }
.privacidade .ic { width: 1.3rem; height: 1.3rem; margin-top: .1rem; }

/* Resumo lateral: "Seu manual" */
.resumo { position: sticky; top: var(--e-5); display: none; }
@media (min-width: 1100px) { .resumo { display: block; } }
.resumo__cartao { background: var(--papel-3) var(--grao); border: 1px solid var(--verde); border-radius: 4px var(--r-2) var(--r-2) 4px; padding: var(--e-5); box-shadow: var(--sombra-papel), -5px 0 0 -1px var(--verde-2); }
.resumo__k { font-size: var(--t-meta); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); margin: 0 0 var(--e-3); }
.resumo ol { list-style: none; padding: 0; margin: 0 0 var(--e-4); }
.resumo li { display: grid; grid-template-columns: 2rem 1fr; gap: var(--e-3); align-items: start; padding: .6rem 0; border-bottom: 1px dotted var(--fio-forte); margin: 0; }
.resumo__n { width: 2rem; height: 2rem; border-radius: 50%; border: 1.5px solid var(--fio-forte); display: grid; place-items: center; font: 700 .95rem/1 var(--f-texto); color: var(--tinta-2); transition: all .3s var(--ease-carimbo); }
.resumo li.feito .resumo__n { background: var(--tomate-forte); border-color: var(--tomate-forte); color: #fff; transform: rotate(-8deg); }
.resumo__rot { font-size: var(--t-meta); color: var(--tinta-2); display: block; }
.resumo__val { font-family: var(--f-mao); font-weight: 700; font-size: 1.4rem; line-height: 1.1; color: var(--verde); display: block; min-height: 1.2em; }
.medidor { height: 8px; border-radius: 99px; background: var(--papel-2); overflow: hidden; border: 1px solid var(--fio); margin-bottom: var(--e-2); }
.medidor span { display: block; height: 100%; width: 0; background: repeating-linear-gradient(-45deg, var(--tomate-forte) 0 6px, var(--tomate) 6px 12px); transition: width .6s var(--ease); }

/* =========================================================
   Perguntas reais (espelho)
   ========================================================= */
.perguntas { list-style: none; padding: 0; margin: var(--e-5) 0; }
.perguntas li { position: relative; padding: var(--e-4) 0 var(--e-4) 3rem; border-top: 1px solid var(--fio); font-family: var(--f-livro); font-size: var(--t-1); line-height: 1.35; letter-spacing: -0.01em; margin: 0; }
.perguntas li:last-child { border-bottom: 1px solid var(--fio); }
.perguntas li::before { content: counter(list-item, decimal-leading-zero); position: absolute; left: 0; top: 1.15rem; font: 400 var(--t-meta)/1 var(--f-texto); color: var(--tinta-2); letter-spacing: .05em; }

/* =========================================================
   Capítulos com abas de índice
   ========================================================= */
.capitulos { display: grid; gap: var(--e-5); }
.capitulo {
  --aba: var(--cap-1);
  position: relative; background: var(--papel-3); border: 1px solid var(--fio-forte);
  border-radius: 4px var(--r-2) var(--r-2) 4px; box-shadow: var(--sombra-papel);
  border-left: 8px solid var(--aba);
  transition: transform .3s var(--ease), box-shadow .3s;
}
.capitulo[data-cap="2"] { --aba: var(--cap-2); }
.capitulo[data-cap="3"] { --aba: var(--cap-3); }
.capitulo[data-cap="4"] { --aba: var(--cap-4); }
.capitulo summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; gap: var(--e-4); align-items: center;
  padding: var(--e-5); min-height: 96px;
}
.capitulo summary::-webkit-details-marker { display: none; }
.capitulo__n { font-family: var(--f-livro); font-size: clamp(3.4rem, 2.6rem + 3vw, 4.6rem); line-height: .8; color: var(--tomate); letter-spacing: -0.05em; min-width: 2.6rem; }
.capitulo__meta { display: block; font-size: var(--t-meta); color: var(--tinta-2); margin: 0 0 .2rem; }
.capitulo h3 { margin: 0; font-size: var(--t-2); }
.capitulo__prof { display: block; font-weight: 700; color: var(--verde-2); font-size: 1rem; margin: .3rem 0 0; }
.capitulo__ic { color: var(--verde); }
.capitulo__ic .ic { width: 3rem; height: 3rem; stroke-width: 1.5; --ic-acento: var(--aba); }
.capitulo__corpo { padding: 0 var(--e-5) var(--e-5); }
@media (min-width: 700px) { .capitulo__corpo { padding-left: calc(var(--e-5) + 2.6rem + var(--e-4)); } }
.capitulo__abrir { display: flex; width: fit-content; align-items: center; gap: .35rem; font-size: var(--t-meta); font-weight: 700; color: var(--verde); margin-top: .45rem; }
.capitulo__abrir::after { content: ""; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .25s; }
.capitulo[open] .capitulo__abrir::after { transform: rotate(-135deg) translateY(-1px); }
.capitulo[open] .capitulo__abrir .ab { display: none; }
.capitulo:not([open]) .capitulo__abrir .fe { display: none; }
.capitulo::details-content { height: 0; overflow: clip; transition: height .35s var(--ease), content-visibility .35s allow-discrete; }
.capitulo[open]::details-content { height: auto; }
.capitulo__temas { padding-left: 1.1em; }
.capitulo__temas li::marker { color: var(--tomate-escuro); }
.sai-sabendo { background: #fff; border: 1px solid var(--fio); border-left: 4px solid var(--mel); border-radius: 0 var(--r-1) var(--r-1) 0; padding: var(--e-4) var(--e-5); margin: var(--e-4) 0 0; }
.sai-sabendo strong { display: block; font-size: var(--t-meta); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); margin-bottom: var(--e-1); }
.sai-sabendo p { margin: 0; }
/* Fita "marcado para você" */
.fita-marcado {
  position: absolute; top: -6px; right: 18px; display: none; align-items: flex-start;
  color: var(--tomate-forte);
}
.fita-marcado .ic { width: 2.2rem; height: 2.6rem; stroke-width: 1.5; --ic-acento: var(--tomate-forte); stroke: var(--tomate-escuro); }
.fita-marcado .mao { position: absolute; right: 2.6rem; top: .4rem; white-space: nowrap; font-size: 1.3rem; }
.capitulo.marcado { box-shadow: var(--sombra-papel), 0 0 0 2px var(--tomate-forte); }
.capitulo.marcado .fita-marcado { display: flex; animation: cai .5s var(--ease-carimbo); }
.capitulo.marcado summary { padding-top: calc(var(--e-5) + 1rem); }
@keyframes cai { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- professoras ---------- */
.professoras { display: grid; gap: var(--e-7); }
@media (min-width: 820px) { .professoras { grid-template-columns: 1fr 1fr; gap: var(--e-6); } }
.ficha { background: var(--papel-3); border: 1px solid var(--fio-forte); border-radius: var(--r-2); padding: var(--e-5); display: flex; flex-direction: column; box-shadow: var(--sombra-papel); }
.retrato { position: relative; margin: var(--e-3) 0 var(--e-5); aspect-ratio: 4 / 5; max-width: 220px; border-radius: 3px; background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(11,59,51,.06) 10px 11px), var(--ceu-claro); border: 6px solid #fff; box-shadow: 0 6px 16px -10px rgba(11,59,51,.5); transform: rotate(-1.5deg); }
.ficha:nth-child(2) .retrato { transform: rotate(1.5deg); }
/* fita adesiva */
.retrato::before { content: ""; position: absolute; top: -14px; left: 50%; width: 92px; height: 26px; transform: translateX(-50%) rotate(-4deg); background: rgba(232,182,76,.55); border-left: 1px dashed rgba(30,42,38,.15); border-right: 1px dashed rgba(30,42,38,.15); z-index: 2; }
.retrato img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.retrato__legenda { font-size: 1.35rem; margin: calc(-1 * var(--e-3)) 0 var(--e-3); transform: rotate(-2deg); transform-origin: left; }
.retrato__vazio { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: .25rem; font-size: var(--t-meta); color: var(--verde); padding: var(--e-4); }
.retrato__vazio b { font-family: var(--f-livro); font-size: 2.5rem; font-weight: 400; line-height: 1; }
.ficha__papel { color: var(--tinta-2); margin: calc(-1 * var(--e-3)) 0 var(--e-4); }
.ficha dl { margin: 0 0 var(--e-4); }
.ficha dl > div { padding: var(--e-3) 0; border-top: 1px solid var(--fio); }
.ficha dt { font-size: var(--t-meta); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); margin-bottom: var(--e-1); }
.ficha dd { margin: 0; }

/* ---------- como funciona (ícones) ---------- */
.funciona { display: grid; gap: 0; list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--fio-forte); }
@media (min-width: 700px) { .funciona { grid-template-columns: 1fr 1fr; column-gap: var(--e-6); } }
.funciona li { display: grid; grid-template-columns: 3.25rem 1fr; gap: var(--e-4); padding: var(--e-4) 0; border-bottom: 1px solid var(--fio); margin: 0; align-items: start; }
.funciona .ic { width: 3rem; height: 3rem; color: var(--verde); stroke-width: 1.5; }
.funciona b { display: block; font-family: var(--f-livro); font-size: 1.25rem; color: var(--verde); letter-spacing: -0.01em; }

/* ---------- entrar na turma ---------- */
.entrar { border: 1.5px dashed var(--verde); border-radius: var(--r-2); background: var(--papel-3); padding: var(--e-6) var(--e-5); position: relative; }
@media (min-width: 700px) { .entrar { padding: var(--e-6) var(--e-7); } }
.entrar__k { font-size: var(--t-meta); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); margin-bottom: var(--e-2); }
.inclui { list-style: none; padding: 0; margin: var(--e-5) 0 0; border-top: 1px solid var(--fio); }
.inclui li { display: flex; gap: .7rem; align-items: flex-start; padding: var(--e-3) 0; border-bottom: 1px solid var(--fio); margin: 0; }
.inclui .ic { width: 1.4rem; height: 1.4rem; color: var(--verde); stroke-width: 2.5; margin-top: .15rem; }
.oficinas { display: grid; gap: var(--e-4); margin-top: var(--e-5); }
@media (min-width: 700px) { .oficinas { grid-template-columns: 1fr 1fr; } }
.oficina { display: grid; grid-template-columns: 3rem 1fr; gap: var(--e-3); padding: var(--e-4); border: 1px solid var(--fio-forte); border-radius: var(--r-1); background: #fff; }
.oficina .ic { width: 2.8rem; height: 2.8rem; color: var(--verde); stroke-width: 1.5; }
.oficina b { display: block; font-family: var(--f-livro); font-size: 1.2rem; color: var(--verde); }
.oficina p { margin: .2rem 0 0; font-size: var(--t-meta); color: var(--tinta-2); }

/* ---------- escolas (faixa escura) ---------- */
.escuro { background: var(--verde); color: var(--papel); }
.escuro h2, .escuro h3 { color: var(--papel); }
.escuro .cabeco { color: var(--ceu-claro); border-color: rgba(246,241,231,.3); }
.escuro a:not(.btn) { color: var(--papel); }
.ofertas { list-style: none; padding: 0; margin: var(--e-5) 0; }
.ofertas li { display: grid; grid-template-columns: 3rem 1fr; gap: var(--e-4); padding: var(--e-4) 0; border-top: 1px solid rgba(246,241,231,.3); margin: 0; }
.ofertas li:last-child { border-bottom: 1px solid rgba(246,241,231,.3); }
.ofertas .ic { width: 2.8rem; height: 2.8rem; color: var(--mel-claro); stroke-width: 1.5; --ic-acento: var(--tomate); }
.ofertas b { display: block; font-family: var(--f-livro); font-size: var(--t-1); font-weight: 600; letter-spacing: -0.01em; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--fio-forte); }
.faq details { border-bottom: 1px solid var(--fio); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--e-4); padding: var(--e-4) 0; min-height: 56px; font-family: var(--f-livro); font-size: var(--t-1); font-weight: 600; color: var(--verde); letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(var(--verde), var(--verde)) center / 14px 2px no-repeat, linear-gradient(var(--verde), var(--verde)) center / 2px 14px no-repeat; transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details::details-content { height: 0; overflow: clip; transition: height .3s ease, content-visibility .3s allow-discrete; }
.faq details[open]::details-content { height: auto; }
.faq .resposta { padding: 0 0 var(--e-5); max-width: var(--leitura); }
.faq .resposta p:last-child { margin: 0; }

/* ---------- rodapé ---------- */
.rodape { background: var(--papel-2); border-top: 1px solid var(--fio-forte); padding-block: var(--e-7); font-size: var(--t-meta); }
.rodape .aviso { font-family: var(--f-livro); font-size: 1.125rem; color: var(--verde); margin-bottom: var(--e-3); }
.rodape p { max-width: var(--leitura); }
.rodape__assina { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); justify-content: space-between; border-top: 1px solid var(--fio); margin-top: var(--e-5); padding-top: var(--e-4); color: var(--tinta-2); }

/* ---------- barra fixa (mobile) com progresso ---------- */
.barra-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--e-3);
  background: var(--papel); border-top: 1px solid var(--fio-forte);
  padding: var(--e-2) var(--gutter) calc(var(--e-2) + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 20px -16px rgba(11,59,51,.5);
  transition: transform .25s ease;
}
.barra-cta__info { flex: 1; min-width: 0; font-size: var(--t-meta); line-height: 1.25; margin: 0; }
.barra-cta__info b { display: block; color: var(--verde); }
.pontos { display: flex; gap: 5px; margin-top: 5px; }
.pontos i { width: 22px; height: 6px; border-radius: 3px; background: var(--papel-2); border: 1px solid var(--fio-forte); transition: background-color .3s; }
.pontos i.ok { background: var(--tomate-forte); border-color: var(--tomate-forte); }
.barra-cta .btn { min-height: 52px; padding-inline: 1.1rem; flex: none; }
.barra-cta.oculta { transform: translateY(110%); }
body.tem-barra { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { .barra-cta { display: none; } body.tem-barra { padding-bottom: 0; } }

/* ---------- aviso (toast) ---------- */
.aviso-flutuante {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 70;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: .6rem; max-width: calc(100vw - 32px);
  background: var(--verde); color: var(--papel); padding: .75rem 1.1rem; border-radius: var(--r-2);
  font-weight: 700; box-shadow: 0 10px 30px -10px rgba(11,59,51,.6);
  transition: opacity .25s, transform .3s var(--ease);
}
.aviso-flutuante .ic { width: 1.4rem; height: 1.4rem; color: var(--mel); --ic-acento: var(--mel); stroke-width: 2.6; }
.aviso-flutuante.mostra { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 900px) { .aviso-flutuante { bottom: 32px; } }

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}