/* ═══════════════════════════════════════════════════════════════════════════════
   O leitor demo do Enciclus · /ler · v4 · rodada 8 (15/09/2026)
   O capítulo 3 de MAE111 como objeto: folha de rosto com o livro que se abre, sumário em duas escalas,
   a folha de papel com margem de notas sobre a mesa, e o fecho em que o livro se fecha com a fita.
   Nada de desenho paralelo: este arquivo lê /site/css/tokens.css. O <html> carrega a luz do motor
   (data-ato-tom="creme" no claro, "noite" na noite) e todo valor abaixo é token dela.
   Armadilhas respeitadas: nenhum color-mix sobre token que já é color-mix (WebKit); opacidade nunca em
   contexto preserve-3d; faces opostas do livro com visibility de reserva (o WebKit do Windows achata).
   ═══════════════════════════════════════════════════════════════════════════════ */

/* as faces auto-hospedadas, com o unicode-range latin de verdade (o woff2 400-700 sem range é o subset
   latin-EXT: sem "a", sem dígito — era por isso que a interface do leitor antigo pintava em Arial) */
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url(/site/assets/fontes/ebgaramond-regular-208fa3.woff2) format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url(/site/assets/fontes/683b1349ca0a0ddd3d6a7cd3_ebgaramond-italic-fa812b.woff2) format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(/site/assets/fontes/instrumentserif-normal-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(/site/assets/fontes/instrumentserif-italic-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url(/site/assets/fontes/instrumentsans-latin-normal-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Sans'; font-style: italic; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url(/site/assets/fontes/instrumentsans-latin-italic-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/site/assets/fontes/instrumentsans-400-700.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; src: url(/site/assets/fontes/bricolage-normal-200.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ─────────────────────────────── os papéis do leitor (aliases dos tokens) ─────────────────────────────── */
:root {
  --corpo: 20px; --alt: 1.6; --medida: 680px;
  --barra-h: 64px; --barra-compacta: 56px;
  --trilho-w: 248px; --margem-w: clamp(200px, 17vw, 260px);
  --lado: clamp(16px, 4.4vw, 40px);
  --sans: var(--ff-instrument);
  --leitura: var(--ff-leitura);
  --display: var(--ff-editorial);
  /* a mesa e a folha: o chão da página (o que o véu da landing pinta) e o papel do capítulo */
  --mesa: var(--fundo);
  --folha: var(--sup);
  --tinta-corpo: var(--sobre);
  --tinta-titulo: var(--sobre);
  /* o cartão dentro da folha (figura, exercícios): um degrau abaixo do papel */
  --cartao: var(--creme-100);
  --cartao-borda: var(--contorno-sutil);
  --def-fundo: color-mix(in oklab, var(--azul-100) 46%, var(--creme-0));
  --def-tinta: var(--azul-800);
  --estab-fundo: color-mix(in oklab, var(--verd-100) 42%, var(--creme-0));
  --estab-tinta: var(--verd-800);
  --sombra-folha: 0 1px 2px hsl(var(--sombra-cor-tinta) / .06), 0 28px 64px -36px hsl(var(--sombra-cor-tinta) / .30), 0 0 0 1px var(--contorno-sutil);
  /* os grifos: amarelo é o marca-texto do produto; verde, azul e vermelho em contêiner */
  --g-amarelo: var(--grifo-produto);
  --g-verde: var(--verd-100);
  --g-azul: var(--azul-100);
  --g-vermelho: var(--verm-100);
  --g-mistura: multiply;
  --g-tinta: inherit;
  --c-amarelo: var(--marca-amarelo); --c-verde: var(--verd-300); --c-azul: var(--azul-300); --c-vermelho: var(--verm-300);
  --selecao: color-mix(in oklab, var(--azul-300) 34%, transparent);
  --toast-ico: var(--verd-300);
  --toast-acao: var(--azul-200);
  --fita: var(--marcador);
  --press: .985;
  color-scheme: light;
}
:root[data-tema="escuro"] {
  --tinta-corpo: var(--sobre-2);
  --tinta-titulo: var(--sobre);
  --cartao: var(--noite-800);
  --def-fundo: color-mix(in oklab, var(--azul-300) 11%, var(--noite-750));
  --def-tinta: var(--azul-200);
  --estab-fundo: color-mix(in oklab, var(--verd-400) 10%, var(--noite-750));
  --estab-tinta: var(--verd-200);
  --sombra-folha: 0 0 0 1px var(--anel-luz), 0 40px 90px -40px hsl(222 40% 2% / .95);
  --g-amarelo: rgb(255 213 74 / 24%);
  --g-verde: rgb(91 185 116 / 26%);
  --g-azul: rgb(124 172 248 / 26%);
  --g-vermelho: rgb(236 146 142 / 24%);
  --g-mistura: normal;
  --g-tinta: var(--sobre);
  --c-amarelo: var(--amar-500); --c-verde: var(--verd-600); --c-azul: var(--azul-600); --c-vermelho: var(--verm-500);
  --selecao: color-mix(in oklab, var(--azul-300) 30%, transparent);
  --toast-ico: var(--verd-700);
  --toast-acao: var(--azul-700);
  color-scheme: dark;
}
:root[data-fonte="sans"] { --leitura: var(--ff-instrument); }
@media (prefers-reduced-motion: reduce) { :root { --press: 1; } }

/* ─────────────────────────────── base ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--mesa); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* r7: sem scroll-padding-top no html (o foco num botão da barra sticky rolava a página); o respiro mora nos alvos */
#capitulo, #topo, #sumario, .corpo a[href], .corpo button, .corpo input, .corpo [tabindex] { scroll-margin-top: calc(var(--barra-compacta) + 16px); }
body {
  margin: 0; min-height: 100vh; min-height: 100svh;
  background: var(--mesa); color: var(--tinta-corpo);
  font-family: var(--sans); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  transition: background-color var(--d-6) var(--c-padrao), color var(--d-6) var(--c-padrao);
}
/* a passagem do livro da landing para o leitor é JS (véu + chegada): a View Transition entre documentos foi
   descartada em 08/09 — o Chrome dispara "AbortError: Transition was skipped" no console */
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { -webkit-tap-highlight-color: transparent; }
input, textarea { font: inherit; color: inherit; }
::selection { background: var(--selecao); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 3px; border-radius: var(--raio-1); }
[hidden] { display: none !important; }
img { max-width: 100%; }
svg.ico, .ib svg, .btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.ico { width: 16px; height: 16px; }
.pular { position: fixed; top: 8px; left: 8px; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--raio-full); background: var(--primaria); color: var(--sobre-primaria); font: 600 14px/1 var(--sans); transform: translateY(-180%); transition: transform var(--d-4) var(--c-desacelera); }
.pular:focus-visible { transform: none; }
.codigo { font-family: var(--sans); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: var(--tr-larga); }

/* o antetítulo do DS: Bricolage caixa-alta, o ponto de 8 px da história */
.antetitulo { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-family: var(--ff-antetitulo); font-size: 13px; font-weight: 650; letter-spacing: var(--tr-caixa); text-transform: uppercase; color: var(--sobre-2); line-height: 1.4; }
.antetitulo .codigo { font-family: var(--sans); font-weight: 700; letter-spacing: var(--tr-caixa-media); color: var(--sobre); }
.antetitulo .sep { color: var(--sobre-3); }
.ponto { width: 8px; height: 8px; border-radius: var(--raio-full); background: var(--cor-azul); flex: none; }
.ponto--verde { background: var(--cor-verde); }

/* a pílula numerada (sans tabular: a decisão do DS para número de seção) e o selo */
.pilula { display: inline-grid; place-items: center; min-width: 36px; height: 28px; padding: 0 9px; border-radius: var(--raio-full); font: 650 13px/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: .02em; background: var(--cor-azul-c); color: var(--sobre-cor-azul-c); flex: none; transition: background-color var(--d-4) var(--c-padrao), color var(--d-4) var(--c-padrao); }
.pilula svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.pilula--verde { background: var(--cor-verde-c); color: var(--sobre-cor-verde-c); }
.pilula--neutra { background: var(--sup-3); color: var(--sobre-2); }
.selo { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--raio-chip); font: 650 12px/1.35 var(--sans); letter-spacing: .02em; white-space: nowrap; background: var(--sup-3); color: var(--sobre-2); }
.selo--verde { background: var(--sucesso-c); color: var(--sobre-sucesso-c); }
.vivo { width: 7px; height: 7px; border-radius: var(--raio-full); background: currentColor; position: relative; }
.vivo::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; border: 1.5px solid currentColor; opacity: 0; animation: vivo-pulsa 2.4s var(--c-padrao) infinite; }
@keyframes vivo-pulsa { 0% { transform: scale(.6); opacity: .7; } 70%, 100% { transform: scale(1.5); opacity: 0; } }

/* ─────────────────────────────── botões (o ds-btn do DS) ─────────────────────────────── */
.btn {
  --alt: var(--alt-controle); --pad: var(--botao-pad-x); --tam: 15px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: var(--alt); padding: 0 var(--pad); border-radius: var(--raio-botao);
  font-family: var(--sans); font-size: var(--tam); font-weight: var(--botao-peso); letter-spacing: var(--botao-tr); line-height: 1; white-space: nowrap;
  border: 1px solid transparent; position: relative; isolation: isolate; overflow: hidden;
  transition: background-color var(--d-3) var(--c-padrao), color var(--d-3) var(--c-padrao), border-color var(--d-3) var(--c-padrao), box-shadow var(--d-4) var(--c-expo-saida), transform var(--d-1) var(--c-padrao);
}
/* a camada de estado (M3): currentColor a 8 % no hover, 12 % no toque — sem color-mix sobre token composto */
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: currentColor; opacity: 0; transition: opacity var(--d-3) var(--c-padrao); pointer-events: none; }
@media (hover: hover) { .btn:hover::before { opacity: var(--estado-hover); } .btn:hover .seta { transform: translateX(3px); } }
.btn:active::before { opacity: var(--estado-ativo); }
.btn:active { transform: scale(var(--press)); transition-duration: var(--d-1); }
.btn:focus-visible { outline: none; box-shadow: var(--anel-foco), 0 0 0 1px var(--primaria); }
.btn .seta { transition: transform var(--d-4) var(--c-desacelera); }
.btn--p { --alt: 36px; --pad: 14px; --tam: 13.5px; gap: 6px; }
.btn--p svg { width: 16px; height: 16px; }
.btn--casa { --alt: var(--e-x56); --pad: var(--botao-pad-x-g); --tam: 17px; }
.btn--cheio { background: var(--primaria); color: var(--sobre-primaria); box-shadow: var(--elev-objeto-1); }
@media (hover: hover) { .btn--cheio:hover { box-shadow: var(--elev-objeto-2); } }
.btn--cheio:active { box-shadow: var(--elev-pressionada); }
.btn--tonal { background: var(--p-c); color: var(--sobre-p-c); }
.btn--contorno { background: var(--sup); color: var(--sobre); border-color: var(--contorno-forte); }
@media (hover: hover) { .btn--contorno:hover { border-color: var(--sobre); } }
.btn--texto { background: transparent; color: var(--primaria-texto); }
.btn[disabled] { background: var(--sup-3); color: var(--sobre-3); border-color: transparent; box-shadow: none; cursor: not-allowed; transform: none; }
.btn[disabled]::before { display: none; }
.mais { font-family: var(--sans); font-weight: 700; color: var(--marca-mais-cor); }
.btn .mais { color: inherit; }

/* o botão de ícone: 44 de alvo, sempre */
.ib { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--raio-full); color: var(--sobre-2); position: relative; isolation: isolate; flex: none; transition: color var(--d-3) var(--c-padrao), transform var(--d-1) var(--c-padrao); }
.ib::before { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: inherit; background: currentColor; opacity: 0; transition: opacity var(--d-3) var(--c-padrao); }
@media (hover: hover) { .ib:hover { color: var(--sobre); } .ib:hover::before { opacity: var(--estado-hover); } }
.ib:active { transform: scale(.94); }
.ib:active::before { opacity: var(--estado-ativo); }
.ib[aria-expanded="true"], .ib.ativo { color: var(--sobre-p-c); }
.ib[aria-expanded="true"]::before, .ib.ativo::before { background: var(--p-c); opacity: 1; }
.ib:focus-visible { outline-offset: 0; border-radius: var(--raio-full); }
.aa { font: 650 15px/1 var(--sans); letter-spacing: -.02em; }

/* ─────────────────────────────── a barra: repouso · oculta · chamada ─────────────────────────────── */
.barra {
  position: sticky; top: 0; z-index: 45;
  display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; align-items: center; column-gap: 12px;
  height: var(--barra-h); padding: 0 max(16px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
  isolation: isolate;
  transform: translateY(0);
  transition: transform var(--d-4h) var(--c-desacelera), height var(--d-4) var(--c-padrao);
  will-change: transform;
}
/* a chapa do DS (--chapa + --vidro-barra) acende quando a barra deixa o repouso: em repouso ela é a própria mesa */
.barra::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in oklab, var(--fundo) 93%, transparent); -webkit-backdrop-filter: var(--vidro-barra); backdrop-filter: var(--vidro-barra); box-shadow: 0 1px 0 var(--contorno-sutil); opacity: 0; transition: opacity var(--d-5) var(--c-padrao); }
.barra[data-estado="chamada"]::before, .barra.na-folha::before { opacity: 1; }
/* sem vidro (WebKit do Windows), a chapa fica opaca: o texto que passa por baixo não fantasma na barra */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .barra::before { background: var(--fundo); } }
.barra[data-estado="oculta"] { transform: translateY(-104%); transition-duration: var(--d-3h); transition-timing-function: var(--c-acelera); }
.barra[data-estado="chamada"] { height: var(--barra-compacta); }
.barra-esq { display: flex; align-items: center; gap: 4px; min-width: 0; }
.lugar { position: relative; display: grid; grid-template-columns: minmax(0, max-content) auto; justify-content: start; grid-template-rows: auto auto; column-gap: 8px; align-items: center; min-width: 0; min-height: 44px; text-align: left; padding: 4px 10px 4px 10px; border-radius: var(--raio-3); isolation: isolate; }
.lugar::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: currentColor; opacity: 0; transition: opacity var(--d-3) var(--c-padrao); }
@media (hover: hover) { .lugar:hover::before { opacity: .06; } }
.lugar:active::before { opacity: var(--estado-ativo); }
.lugar-livro { grid-column: 1; display: block; font: 500 12px/16px var(--sans); color: var(--sobre-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lugar-livro .codigo { color: var(--sobre-2); letter-spacing: var(--tr-larga); }
.lugar-resta { color: var(--sobre-3); }
.barra:not(.na-secao) .lugar-resta { display: none; }
@media (min-width: 1360px) { .lugar-resta { display: none; } }
.lugar-cabeca { grid-column: 1; display: grid; min-width: 0; height: 20px; font: 600 14px/20px var(--sans); color: var(--sobre); white-space: nowrap; overflow: hidden; }
.lugar-cabeca > span { grid-area: 1 / 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; transition: opacity var(--d-4) var(--c-padrao), transform var(--d-4) var(--c-desacelera); }
.corrente-secao { opacity: 0; transform: translateY(8px); }
.corrente-secao b { font-weight: 650; font-variant-numeric: tabular-nums; color: var(--primaria-texto); margin-right: 6px; }
.barra.na-secao .corrente-fixa { opacity: 0; transform: translateY(-8px); }
.barra.na-secao .corrente-secao { opacity: 1; transform: none; }
.lugar-chevron { grid-column: 2; grid-row: 1 / span 2; width: 16px; height: 16px; color: var(--sobre-3); transition: transform var(--d-4) var(--c-desacelera); }
.lugar[aria-expanded="true"] .lugar-chevron { transform: rotate(180deg); }
.barra-meio { display: flex; justify-content: flex-end; min-width: 0; }
.barra-resta { font: 500 13px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--sobre-3); white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity var(--d-4) var(--c-padrao), transform var(--d-4) var(--c-padrao); }
.barra[data-estado="chamada"] .barra-resta { opacity: 1; transform: none; transition-delay: 80ms; }
.barra-dir { display: flex; align-items: center; gap: 2px; }
.barra .criar { margin-left: 10px; }
/* o tema: a lua vira sol girando */
.ib-tema { overflow: hidden; }
.ib-tema svg { grid-area: 1 / 1; transition: transform var(--d-6) var(--c-entra), opacity var(--d-4) var(--c-padrao); }
.ib-tema .sol { opacity: 0; transform: rotate(90deg) scale(.6); }
:root[data-tema="escuro"] .ib-tema .lua { opacity: 0; transform: rotate(-90deg) scale(.6); }
:root[data-tema="escuro"] .ib-tema .sol { opacity: 1; transform: none; }

/* ─────────────────────────────── a folha de rosto ─────────────────────────────── */
.rosto { position: relative; padding: clamp(20px, 4vh, 56px) var(--lado) clamp(40px, 7vh, 88px); }
/* a luz da mesa: um halo frio atrás do livro, e só ele (no claro, azul a 7 %; na noite, a luz quente do motor) */
.rosto::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(52% 60% at 72% 46%, color-mix(in oklab, var(--azul-300) 12%, transparent), transparent 70%); }
:root[data-tema="escuro"] .rosto::before { background: radial-gradient(46% 56% at 72% 48%, color-mix(in oklab, var(--ambar-500) 9%, transparent), transparent 70%); }
.rosto-grade { position: relative; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); }
.rosto-ante { margin-bottom: 14px; }
.rosto-titulo { font-family: var(--display); font-weight: 400; font-size: clamp(46px, 11.2vw, 64px); line-height: var(--lh-colado); letter-spacing: var(--tr-titulo-editorial); color: var(--tinta-titulo); text-wrap: balance; }
.rosto-titulo em { font-style: italic; }
/* a banda do DS: pigmento atrás da palavra que carrega a ideia, inclinação de caneta, pintada da esquerda */
.banda { position: relative; z-index: 0; white-space: nowrap; }
.banda::before { content: ""; position: absolute; left: -.05em; right: -.07em; bottom: .04em; height: var(--grifo-marcador-alt); z-index: -1; background: var(--grifo-marcador-imagem); transform: rotate(var(--grifo-marcador-inclina)); transform-origin: 0 50%; border-radius: var(--raio-fio); mix-blend-mode: var(--mistura-grifo); }
/* na noite o pigmento é translúcido: a tinta clara continua escrevendo por cima dele */
:root[data-tema="escuro"] .banda::before { background: linear-gradient(178deg, transparent 2%, rgb(255 213 74 / .36) 5% 92%, transparent 96%); mix-blend-mode: normal; }
.rosto-epigrafe { margin-top: 20px; max-width: 34ch; font-family: var(--leitura); font-style: italic; font-size: clamp(19px, 1.2vw + 13px, 23px); line-height: 1.5; color: var(--sobre-2); }
:root[data-fonte="sans"] .rosto-epigrafe { font-family: var(--ff-leitura); }
.rosto-meta { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font: 500 14px/1.3 var(--sans); font-variant-numeric: tabular-nums; color: var(--sobre-2); }
.rosto-meta li { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.rosto-meta svg { color: var(--sobre-3); }
.rosto-acoes { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.rosto-nota { margin-top: 16px; display: flex; align-items: center; gap: 8px; font: 500 13px/1.4 var(--sans); color: var(--sobre-3); }
.rosto-objeto { position: relative; margin: 8px auto 0; width: 100%; max-width: 380px; }
@media (min-width: 600px) and (max-width: 1023px) { .rosto-objeto { max-width: 540px; margin-top: 16px; } }

@media (min-width: 1024px) {
  .rosto { min-height: calc(100svh - var(--barra-h)); display: grid; align-items: center; padding-top: 12px; padding-bottom: 40px; }
  .rosto-grade { width: 100%; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: 1fr repeat(6, auto) 1fr; column-gap: clamp(32px, 4vw, 72px); }
  .rosto-grade > * { grid-column: 1; }
  .rosto-ante { grid-row: 2; }
  .rosto-titulo { grid-row: 3; font-size: clamp(64px, 5.6vw, 96px); }
  .rosto-epigrafe { grid-row: 4; margin-top: 24px; }
  .rosto-meta { grid-row: 5; margin-top: 28px; }
  .rosto-acoes { grid-row: 6; margin-top: 32px; }
  .rosto-nota { grid-row: 7; }
  .rosto-objeto { grid-column: 2; grid-row: 1 / -1; align-self: center; margin: 0; max-width: 680px; justify-self: center; }
}
@media (max-width: 1023px) {
  .rosto-acoes .btn { flex: 1 1 auto; }
}
@media (max-width: 420px) {
  .rosto-acoes { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px; }
  .rosto-acoes .btn { --pad: 14px; --tam: 16px; }
}
@media (max-width: 767px) and (max-height: 700px) { .rosto-objeto { max-width: 284px; } }
@media (max-width: 420px) { .barra.na-secao .lugar-sep, .barra.na-secao .lugar-cap { display: none; } }
/* abaixo de 1280 o nome da disciplina sai do antetítulo (quebrava deixando "Capítulo 3" órfão) e vai para a nota */
@media (max-width: 1279px) { .rosto-ante .rosto-ante-nome, .rosto-ante .rosto-ante-nome + .sep { display: none; } }
@media (min-width: 1280px) { .rosto-nota-nome { display: none; } }
@media (max-width: 767px) {
  .rosto-objeto { margin-bottom: -14px; z-index: 1; }
  .rosto-objeto .l3 { aspect-ratio: 520 / 430; }
  .rosto-objeto .l3-escala { top: calc(50% + 16px); }
  .rosto-ante, .rosto-titulo { position: relative; z-index: 2; }
}

/* a chegada: degraus curtos. O título nunca nasce invisível (só desliza); o resto sobe em opacidade */
.chega .rosto-ante, .chega .rosto-epigrafe, .chega .rosto-meta, .chega .rosto-acoes, .chega .rosto-nota { animation: sobe var(--d-7) var(--c-desacelera) both; }
.chega .rosto-titulo { animation: desliza var(--d-7) var(--c-desacelera) both; }
.chega .rosto-epigrafe { animation-delay: 90ms; } .chega .rosto-meta { animation-delay: 150ms; } .chega .rosto-acoes { animation-delay: 210ms; } .chega .rosto-nota { animation-delay: 260ms; }
.chega .banda::before { animation: banda-pinta var(--d-8) var(--c-percurso) 260ms both; }
.chega .barra { animation: sobe-barra var(--d-6) var(--c-desacelera) both; }
.chega.vindo-do-livro .rosto-ante, .chega.vindo-do-livro .rosto-epigrafe, .chega.vindo-do-livro .rosto-meta, .chega.vindo-do-livro .rosto-acoes, .chega.vindo-do-livro .rosto-nota { animation-duration: var(--d-6); }
@keyframes sobe { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes desliza { from { transform: translateY(10px); } to { transform: none; } }
@keyframes sobe-barra { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes banda-pinta { from { transform: rotate(var(--grifo-marcador-inclina)) scaleX(0); } to { transform: rotate(var(--grifo-marcador-inclina)) scaleX(1); } }
@keyframes entra-cima { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pousa { from { opacity: 0; transform: translateX(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes abre-altura { from { opacity: 0; transform: translateY(-6px); clip-path: inset(0 0 100% 0 round 16px); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 16px); } }

/* ─────────────────────────────── o livro em 3D ─────────────────────────────── */
/* tamanho nativo: página 240 × 360, espessura 18 + 16. A cena (560 × 430) é escalada para a coluna pelo
   JS (--k); o texto impresso tem 12 px ou mais no nativo. */
.l3 { --k: .66; --W: 240px; --H: 360px; --Tr: 18px; --Tl: 14px; position: relative; width: 100%; aspect-ratio: 520 / 380; user-select: none; -webkit-user-select: none; }
/* a escala sai do próprio CSS (largura do contêiner ÷ 520, pela tangente do atan2 de dois comprimentos): o
   livro pinta no tamanho certo no primeiro quadro, sem esperar o JS. Quem não entende cai no --k do JS. */
.l3 { container-type: inline-size; }
.l3-escala { position: absolute; left: 50%; top: 50%; width: 520px; height: 380px; margin: -190px 0 0 -260px; transform: scale(var(--k)); transform: scale(tan(atan2(100cqw, 520px))); }
.l3-palco { position: absolute; inset: 0; perspective: 1500px; perspective-origin: 50% 30%; }
/* a luz sob o objeto (2D, fora do contexto 3D) */
.l3-palco::before { content: ""; position: absolute; left: 6%; right: 6%; top: 14%; bottom: 0; border-radius: 50%; background: radial-gradient(closest-side, var(--halo-quente), transparent); opacity: 0; transition: opacity var(--d-9) var(--c-padrao); }
:root[data-tema="escuro"] .l3-palco::before { opacity: 1; }
.l3-inclina { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); }
.l3-livro {
  position: absolute; left: 0; top: calc(var(--H) / -2 - 4px); width: var(--W); height: var(--H);
  transform-style: preserve-3d; transform-origin: 0 50%;
  transform: translateX(0) rotateX(34deg) rotateZ(-3deg) translateZ(0);
  transition: transform 1300ms var(--c-percurso);
}
.l3-livro > * { position: absolute; }
.l3-sombra { left: calc(var(--W) * -1.06); top: -5%; width: calc(var(--W) * 2.12); height: 112%; border-radius: 12px; background: radial-gradient(closest-side, hsl(var(--sombra-cor-quente) / .34), hsl(var(--sombra-cor-quente) / .12) 62%, transparent); transform: translateZ(-1px) scale(1.04); filter: blur(0); transition: left 1300ms var(--c-percurso), width 1300ms var(--c-percurso); }
:root[data-tema="escuro"] .l3-sombra { background: radial-gradient(closest-side, rgb(0 0 0 / .7), rgb(0 0 0 / .25) 62%, transparent); }
.l3-contra { inset: 0; border-radius: var(--raio-obj); background: var(--pigmento-vinho); transform: translateZ(0); }
/* o pente dos cortes: listra de folha em papel frio */
.l3-corte { background: repeating-linear-gradient(90deg, var(--creme-0) 0 2px, var(--creme-400) 2px 3px); }
.l3-corte-frente { left: calc(var(--W) - 3px); top: 3px; width: calc(var(--Tr) - 2px); height: calc(var(--H) - 6px); transform-origin: 0 50%; transform: translateZ(2px) rotateY(-90deg); background: repeating-linear-gradient(0deg, var(--creme-0) 0 2px, var(--creme-400) 2px 3px); background: repeating-linear-gradient(90deg, var(--creme-25) 0 2px, var(--creme-500) 2px 3px); }
.l3-corte-pe { left: 0; top: calc(var(--H) - 3px - var(--Tr) + 2px); width: calc(var(--W) - 3px); height: calc(var(--Tr) - 2px); transform-origin: 50% 100%; transform: translateZ(2px) rotateX(-90deg); background: repeating-linear-gradient(0deg, var(--creme-25) 0 2px, var(--creme-500) 2px 3px); }
.l3-pagina { width: calc(var(--W) - 4px); height: calc(var(--H) - 6px); top: 3px; background: var(--creme-0); color: var(--tinta-900); overflow: hidden; padding: 22px 22px 18px; display: flex; flex-direction: column; font-family: var(--ff-leitura); }
.l3-pagina::after { content: ""; position: absolute; top: 0; bottom: 0; width: 34px; pointer-events: none; }
.l3-pagina-dir { left: 0; transform: translateZ(var(--Tr)); border-radius: 0 3px 3px 0; box-shadow: inset 0 0 0 1px hsl(var(--sombra-cor-tinta) / .05); }
.l3-pagina-dir::after { left: 0; background: linear-gradient(90deg, hsl(var(--sombra-cor-tinta) / .16), hsl(var(--sombra-cor-tinta) / .04) 50%, transparent); }
.l3-folio { display: flex; justify-content: space-between; gap: 8px; font: 500 12px/1.2 var(--ff-instrument); color: var(--tinta-500); letter-spacing: .01em; white-space: nowrap; }
.l3-folio span { overflow: hidden; text-overflow: ellipsis; }
.l3-sec { margin-top: 22px; font: 400 21px/1.08 var(--ff-editorial); color: var(--tinta-900); }
.l3-sec-n { display: block; width: max-content; margin-bottom: 8px; padding: 3px 8px; border-radius: 999px; font: 650 12px/1 var(--ff-instrument); background: var(--azul-100); color: var(--azul-950); }
.l3-texto { margin-top: 12px; font: 400 13px/1.46 var(--ff-leitura); color: var(--tinta-700); }
.l3-fig { margin-top: 14px; width: 100%; height: auto; overflow: visible; }
.l3-fig-eixo { fill: none; stroke: var(--creme-500); stroke-width: 1; }
.l3-fig-curva { fill: none; stroke: var(--tinta-900); stroke-width: 2; stroke-linecap: round; }
.l3-fig-tangente { fill: none; stroke: var(--azul-700); stroke-width: 2.5; stroke-linecap: round; }
.l3-fig-ponto { fill: var(--azul-700); stroke: var(--creme-0); stroke-width: 2; }
.l3-legenda { margin-top: auto; font: 500 12px/1.2 var(--ff-instrument); color: var(--tinta-500); }
.l3-folha { left: 0; top: 3px; width: calc(var(--W) - 6px); height: calc(var(--H) - 6px); transform-style: preserve-3d; transform-origin: 0 50%; transform: translateZ(calc(var(--Tr) + 1px)) rotateY(0deg); visibility: hidden; }
.l3-folha i { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; background: var(--creme-25); border-radius: 0 3px 3px 0; box-shadow: inset 0 0 0 1px hsl(var(--sombra-cor-tinta) / .06); }
.l3-folha-verso { transform: rotateY(180deg); background: linear-gradient(270deg, hsl(var(--sombra-cor-tinta) / .08), transparent 40%), var(--creme-0) !important; }
.l3-giro { left: 0; top: 0; width: var(--W); height: var(--H); transform-style: preserve-3d; transform-origin: 0 50%; transform: translateZ(var(--Tr)) rotateY(0deg); }
.l3-giro > * { position: absolute; }
.l3-pagina-esq { left: 0; transform: translateZ(-.5px) rotateY(180deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 3px 0 0 3px; visibility: hidden; }
.l3-pagina-esq::after { right: 0; background: linear-gradient(270deg, hsl(var(--sombra-cor-tinta) / .18), hsl(var(--sombra-cor-tinta) / .05) 50%, transparent); }
.l3-num { margin-top: 18px; font: 400 116px/.86 var(--ff-editorial); color: var(--tinta-900); letter-spacing: -.02em; }
.l3-titulo { margin-top: 14px; font: 400 29px/1.02 var(--ff-editorial); color: var(--tinta-900); }
.l3-titulo em { font-style: italic; position: relative; z-index: 0; white-space: nowrap; }
.l3-titulo em::before { content: ""; position: absolute; left: -.04em; right: -.06em; bottom: .02em; height: .6em; z-index: -1; background: linear-gradient(178deg, transparent 2%, var(--marca-amarelo) 5% 92%, transparent 96%); transform: rotate(-1.2deg); mix-blend-mode: multiply; }
.l3-epigrafe { margin-top: auto; font: italic 400 13px/1.45 var(--ff-leitura); color: var(--tinta-600); }
.l3-corte-frente-esq { left: calc(var(--W) - 3px); top: 3px; width: var(--Tl); height: calc(var(--H) - 6px); transform-origin: 0 50%; transform: rotateY(-90deg); background: repeating-linear-gradient(90deg, var(--creme-25) 0 2px, var(--creme-500) 2px 3px); }
.l3-corte-pe-esq { left: 0; top: calc(var(--H) - 3px - var(--Tl)); width: calc(var(--W) - 3px); height: var(--Tl); transform-origin: 50% 100%; transform: rotateX(-90deg); background: repeating-linear-gradient(0deg, var(--creme-25) 0 2px, var(--creme-500) 2px 3px); }
/* o lado de dentro da capa: depois de aberta, é a borda de pano que aparece sob a página da esquerda */
.l3-capa-dentro { left: -1px; top: -2px; width: calc(var(--W) + 1px); height: calc(var(--H) + 4px); transform: translateZ(calc(var(--Tl) + .5px)) rotateY(180deg); border-radius: var(--raio-obj-espelho); background: var(--pigmento-vinho); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.l3-capa { left: 0; top: 0; width: var(--W); height: var(--H); transform: translateZ(calc(var(--Tl) + 1px)); border-radius: var(--raio-obj); overflow: hidden; background: var(--pigmento-vinho); -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: inset 2px 0 0 hsl(var(--sombra-cor-tinta) / .18); }
.l3-capa img { display: block; width: 100%; height: 100%; object-fit: cover; }
.l3-capa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, rgb(255 255 255 / .22), rgb(255 255 255 / .04) 30%, transparent 48%, hsl(var(--sombra-cor-tinta) / .14)); pointer-events: none; }
.l3-capa::before { content: ""; position: absolute; left: 9px; top: 0; bottom: 0; width: 3px; z-index: 1; background: linear-gradient(90deg, hsl(var(--sombra-cor-tinta) / .22), rgb(255 255 255 / .16) 60%, hsl(var(--sombra-cor-tinta) / .06)); }
.l3-lombada { left: 0; top: 0; width: calc(var(--Tr) + var(--Tl) + 1px); height: var(--H); transform-origin: 0 50%; transform: rotateY(-90deg); background: var(--pigmento-vinho); border-radius: 2px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08); }
.l3-fita { left: calc(var(--W) * .64); top: calc(var(--H) - 16px); width: 13px; height: 78px; transform-origin: 50% 0; transform: translateZ(calc(var(--Tr) + .6px)) scaleY(0); background: linear-gradient(90deg, rgb(0 0 0 / .08), transparent 40%, rgb(255 255 255 / .2) 60%, rgb(0 0 0 / .06)), var(--fita); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%); visibility: hidden; }

/* os estados. O desenho de base é o livro ABERTO: é o que pinta sem JS, vindo do livro da landing e com
   movimento reduzido. "fechado" só fecha o livro da folha de rosto quando ele vai mesmo abrir (JS, sem vir da
   landing, com movimento); o do fecho fecha sempre (ele só existe com JS). Sequência: fechado → abrindo →
   aberto na folha de rosto; aberto → fechando → fechado (com a fita) no fecho. */
.l3-giro { transform: translateZ(var(--Tr)) rotateY(-180deg); }
.l3-pagina-esq { visibility: visible; }
.l3-capa { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.vindo-do-livro) .l3:not(.l3--fecho)[data-estado="fechado"] .l3-livro { transform: translateX(calc(var(--W) / -2)) rotateX(22deg) rotateY(-20deg) rotateZ(-9deg) translateZ(-40px); }
  html.js:not(.vindo-do-livro) .l3:not(.l3--fecho)[data-estado="fechado"] .l3-sombra { left: -6%; width: 112%; }
  html.js:not(.vindo-do-livro) .l3:not(.l3--fecho)[data-estado="fechado"] .l3-giro { transform: translateZ(var(--Tr)) rotateY(0deg); }
  html.js:not(.vindo-do-livro) .l3:not(.l3--fecho)[data-estado="fechado"] .l3-capa { visibility: visible; }
  html.js:not(.vindo-do-livro) .l3:not(.l3--fecho)[data-estado="fechado"] .l3-pagina-esq,
  html.js:not(.vindo-do-livro) .l3:not(.l3--fecho)[data-estado="fechado"] .l3-capa-dentro { visibility: hidden; }
}
.l3--fecho[data-estado="fechado"] .l3-livro, .l3--fecho[data-estado="fechando"] .l3-livro { transform: translateX(calc(var(--W) / -2 * 1.3)) rotateX(30deg) rotateZ(-7deg) scale3d(1.3, 1.3, 1.3); }
.l3--fecho[data-estado="fechado"] .l3-sombra, .l3--fecho[data-estado="fechando"] .l3-sombra { left: -6%; width: 112%; }
.l3--fecho[data-estado="fechado"] .l3-giro, .l3--fecho[data-estado="fechando"] .l3-giro { transform: translateZ(var(--Tr)) rotateY(0deg); }
.l3--fecho[data-estado="fechando"] .l3-giro { transition: transform 1000ms var(--c-inout) 80ms; }
.l3--fecho[data-estado="fechado"] .l3-capa, .l3--fecho[data-estado="fechando"] .l3-capa, .l3[data-estado="abrindo"] .l3-capa { visibility: visible; }
.l3--fecho[data-estado="fechado"] .l3-pagina-esq, .l3--fecho[data-estado="fechado"] .l3-capa-dentro { visibility: hidden; }
.l3[data-estado="abrindo"] .l3-giro { transition: transform 1150ms var(--c-percurso) 120ms; }
/* a pose do livro que abre: ele fica quase de frente enquanto a capa passa pela vertical (a capa não sobe sobre
   o título no celular) e só deita na mesa depois */
@media (prefers-reduced-motion: no-preference) {
  .l3:not(.l3--fecho)[data-estado="abrindo"] .l3-livro { animation: livro-abre 1450ms var(--c-padrao) both; }
}
@keyframes livro-abre {
  0% { transform: translateX(calc(var(--W) / -2)) rotateX(22deg) rotateY(-20deg) rotateZ(-9deg) translateZ(-40px); animation-timing-function: cubic-bezier(.3, 0, .5, 1); }
  45% { transform: translateX(calc(var(--W) / -4)) rotateX(12deg) rotateY(-6deg) rotateZ(-5deg) translateZ(-20px); animation-timing-function: cubic-bezier(.2, 0, 0, 1); }
  100% { transform: translateX(0) rotateX(34deg) rotateZ(-3deg) translateZ(0); }
}
/* as duas folhas que passam somem ao pousar (no 3D achatado elas cobririam a página da esquerda) */
.l3[data-estado="abrindo"] .l3-folha-1 i { opacity: 0; transition: opacity 280ms var(--c-padrao) 1060ms; }
.l3[data-estado="abrindo"] .l3-folha-2 i { opacity: 0; transition: opacity 280ms var(--c-padrao) 1140ms; }
.l3[data-estado="abrindo"] .l3-folha { visibility: visible; }
.l3[data-estado="abrindo"] .l3-folha-1 { transform: translateZ(calc(var(--Tr) + 1px)) rotateY(-178.6deg); transition: transform 980ms var(--c-percurso) 330ms; }
.l3[data-estado="abrindo"] .l3-folha-2 { transform: translateZ(calc(var(--Tr) + 1px)) rotateY(-177.8deg); transition: transform 940ms var(--c-percurso) 440ms; }
.l3--fecho[data-estado="fechado"] .l3-fita { visibility: visible; transform: translateZ(calc(var(--Tr) + .6px)) scaleY(1); transition: transform 900ms var(--c-mola) 120ms; }
.l3--fecho .fecho-capa-plana { position: absolute; left: 50%; top: 50%; width: 40%; height: auto; transform: translate(-50%, -50%) rotate(-4deg); border-radius: var(--raio-obj-g); box-shadow: var(--elev-lombada), var(--elev-objeto-3); }
.l3--fecho.montado .fecho-capa-plana { display: none; }
/* o livro da folha de rosto só aparece com a capa decodificada (o JS marca .pronto); se o JS falhar, aparece sozinho em 2,4 s */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.vindo-do-livro) .rosto-objeto { opacity: 0; animation: aparece var(--d-6) var(--c-padrao) 2.4s forwards; }
  html.js .rosto-objeto.pronto { opacity: 1; animation: none; transition: opacity var(--d-7) var(--c-padrao); }
}
@keyframes aparece { to { opacity: 1; } }
/* vindo do livro da landing: o véu já é o papel desta página; o livro revela e assenta, já aberto */
@media (prefers-reduced-motion: no-preference) {
  html.vindo-do-livro .rosto-objeto { animation: assenta var(--d-8) var(--c-desacelera) 60ms both; }
}
@keyframes assenta { from { opacity: 0; transform: scale(1.05) translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .l3 *, .l3-livro, .l3-giro { transition: none !important; }
}

/* ─────────────────────────────── o sumário da folha de rosto ─────────────────────────────── */
.sumario { padding: 8px var(--lado) clamp(56px, 9vh, 112px); }
.sumario-grade { max-width: 1240px; margin: 0 auto; display: grid; gap: 16px; }
.sumario-cap, .sumario-vol { background: var(--sup); border: 1px solid var(--contorno-sutil); border-radius: var(--raio-cartao); padding: clamp(22px, 3vw, 40px) clamp(14px, 2.6vw, 36px) clamp(18px, 2.6vw, 32px); box-shadow: var(--elev-1); }
.sumario-titulo { margin: 14px 0 20px 8px; font-family: var(--display); font-size: clamp(34px, 3.4vw, 48px); line-height: var(--lh-titulo-editorial); letter-spacing: var(--tr-titulo-editorial); color: var(--tinta-titulo); text-wrap: balance; }
.sumario-titulo em { font-style: italic; }
.sumario-titulo--vol { font-size: clamp(30px, 2.8vw, 40px); }
.sumario .antetitulo { margin-left: 8px; }
.sumario-nota { margin: 18px 8px 0; display: flex; align-items: flex-start; gap: 8px; font: 500 13.5px/1.45 var(--sans); color: var(--sobre-3); }
.sumario-nota svg { margin-top: 2px; }
@media (min-width: 1024px) { .sumario-grade { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; align-items: start; } }

/* o índice: pílula · nome · minutos, e a barra do que já foi lido */
.indice, .indice-sub, .volume { list-style: none; margin: 0; padding: 0; }
.indice { display: grid; gap: 2px; }
.indice-item { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 14px; min-height: 54px; padding: 8px 12px 10px 8px; border-radius: var(--raio-4); color: var(--sobre); isolation: isolate; transition: background-color var(--d-4) var(--c-padrao), color var(--d-4) var(--c-padrao); }
.indice-item::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: currentColor; opacity: 0; transition: opacity var(--d-3) var(--c-padrao); }
@media (hover: hover) { .indice-item:hover::before, .indice-sub a:hover::before, .volume-item:hover::before { opacity: .05; } }
.indice-item:active::before { opacity: .1; }
.indice-nome { font: 500 16px/1.3 var(--sans); text-wrap: pretty; }
.indice-nome em { font-style: italic; }
.indice-min { font: 500 13px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--sobre-3); white-space: nowrap; }
.indice-barra { position: absolute; left: 58px; right: 12px; bottom: 5px; height: 2px; border-radius: 2px; overflow: hidden; opacity: 0; transition: opacity var(--d-5) var(--c-padrao); }
.indice-barra::before { content: ""; position: absolute; inset: 0; background: var(--sobre-divisor); }
.indice-barra i { position: absolute; inset: 0; background: var(--cor-azul); transform-origin: 0 50%; transform: scaleX(var(--lido, 0)); transition: transform var(--d-5) var(--c-padrao); }
.indice-item.lendo .indice-barra, .indice-item.lido .indice-barra { opacity: 1; }
.indice-item.lido .indice-barra i { background: var(--cor-verde); }
.indice-item.lido .pilula { background: var(--cor-verde-c); color: var(--sobre-cor-verde-c); }
.indice-item.atual { background: var(--p-c); color: var(--sobre-p-c); }
.indice-item.atual .indice-min { color: inherit; opacity: .8; }
.indice-item.atual .pilula { background: var(--primaria); color: var(--sobre-primaria); }
.indice-sub { margin: 0 0 6px 58px; display: grid; gap: 0; }
.indice-sub a { position: relative; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 10px; border-radius: var(--raio-3); font: 500 14px/1.35 var(--sans); color: var(--sobre-2); isolation: isolate; }
.indice-sub a::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: currentColor; opacity: 0; transition: opacity var(--d-3) var(--c-padrao); }
.indice-sub svg { color: var(--sobre-3); }
.indice-sub .selo { margin-left: auto; }

.volume { display: grid; gap: 2px; }
.volume-item { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 14px; min-height: 52px; padding: 8px 12px 8px 8px; border-radius: var(--raio-4); color: var(--sobre-2); isolation: isolate; }
.volume-item::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: currentColor; opacity: 0; transition: opacity var(--d-3) var(--c-padrao); }
.volume-nome { font: 500 15px/1.3 var(--sans); text-wrap: pretty; }
.volume-estado { display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px/1 var(--sans); color: var(--sobre-3); white-space: nowrap; }
.volume-estado svg { width: 14px; height: 14px; }
.volume-aberto .volume-item { color: var(--sobre); background: var(--sucesso-c); color: var(--sobre-sucesso-c); }
.volume-aberto .volume-nome { font-weight: 650; }

/* ─────────────────────────────── o corpo: trilho · folha · margem ─────────────────────────────── */
.corpo { padding: 0 0 var(--e-11); }
.folha { position: relative; background: var(--folha); padding: clamp(40px, 7vw, 64px) var(--lado) 56px; box-shadow: 0 -1px 0 var(--contorno-sutil); transition: background-color var(--d-6) var(--c-padrao); }
.coluna { min-width: 0; width: 100%; max-width: var(--medida); margin: 0 auto; font-family: var(--leitura); font-size: var(--corpo); line-height: var(--alt); color: var(--tinta-corpo); transition: font-size var(--d-4) var(--c-padrao), line-height var(--d-4) var(--c-padrao); }
.margem { display: none; }
.trilho { display: none; }
@media (min-width: 1024px) {
  .corpo { display: grid; grid-template-columns: minmax(0, calc(var(--medida) + 128px)); justify-content: center; padding: 0 var(--lado) var(--e-12); }
  .folha { padding: 72px 64px 72px; border-radius: var(--raio-papel); box-shadow: var(--sombra-folha); }
  .coluna { margin: 0; }
}
@media (min-width: 1180px) {
  .corpo { grid-template-columns: minmax(0, calc(var(--medida) + 260px + 176px)); }
  .folha { display: grid; grid-template-columns: minmax(0, var(--medida)) minmax(180px, 1fr); column-gap: 48px; align-items: start; padding: 88px 40px 80px 88px; }
  .margem { display: block; position: relative; min-height: 120px; }
}
@media (min-width: 1360px) {
  .corpo { grid-template-columns: var(--trilho-w) minmax(0, calc(var(--medida) + 260px + 176px)); column-gap: 32px; padding-inline: 24px; }
  .trilho { display: block; position: sticky; top: calc(var(--barra-compacta) + 20px); align-self: start; max-height: calc(100vh - var(--barra-compacta) - 40px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  .trilho::-webkit-scrollbar { display: none; }
}

/* o trilho: o sumário que acompanha a leitura */
.trilho-dentro { padding: 8px 0 24px; }
.trilho-rotulo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 8px 8px; font: 650 12px/1.3 var(--ff-antetitulo); letter-spacing: var(--tr-caixa); text-transform: uppercase; color: var(--sobre-3); }
.trilho-resta { font: 500 12px/1 var(--sans); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.trilho-rotulo--vol { margin-top: 24px; }
.indice--trilho .indice-item { min-height: 46px; column-gap: 10px; padding: 6px 8px 9px 6px; border-radius: var(--raio-3); }
.indice--trilho .pilula { min-width: 34px; height: 24px; font-size: 12px; }
.indice--trilho .indice-nome { font-size: 13.5px; line-height: 1.28; font-weight: 500; }
.indice--trilho .indice-min { font-size: 12px; }
.indice--trilho .indice-barra { left: 50px; right: 8px; bottom: 4px; }
.volume--trilho .volume-item { min-height: 40px; column-gap: 10px; padding: 5px 8px 5px 6px; border-radius: var(--raio-3); }
.volume--trilho .pilula { min-width: 30px; height: 22px; font-size: 12px; }
.volume--trilho .volume-nome { font-size: 13px; line-height: 1.25; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.volume--trilho .volume-estado-txt { display: none; }
.volume--trilho .selo { padding: 2px 7px; }
.trilho-marcas { margin: 20px 0 0; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px; border-radius: var(--raio-3); background: var(--sup-3); color: var(--sobre); font: 600 13.5px/1 var(--sans); text-align: left; transition: background-color var(--d-3) var(--c-padrao); }
.trilho-marcas b { margin-left: auto; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--sobre-2); }
@media (hover: hover) { .trilho-marcas:hover { background: var(--sup-4); } }

/* ─────────────────────────────── o capítulo ─────────────────────────────── */
.capitulo { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 7 3 3; -webkit-hyphenate-limit-before: 3; -webkit-hyphenate-limit-after: 3; text-wrap: pretty; overflow-wrap: break-word; font-feature-settings: "kern", "liga", "onum"; }
:root[data-fonte="sans"] .capitulo { font-feature-settings: "kern", "liga"; }
.capitulo p + p { margin-top: .85em; }
.capitulo em { font-style: italic; }
.capitulo strong { font-weight: 600; }
:root:not([data-fonte="sans"]) .capitulo strong { font-weight: 400; color: var(--tinta-titulo); }
.capitulo > section { margin-top: clamp(64px, 7vw, 96px); scroll-margin-top: calc(var(--barra-compacta) + 28px); }
.capitulo > section:first-child { margin-top: 0; }
/* o número da seção: pílula tonal sans */
.capitulo .num { display: inline-grid; place-items: center; min-width: 44px; height: 30px; padding: 0 11px; margin-bottom: 14px; border-radius: var(--raio-full); font: 650 14px/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: .02em; background: var(--cor-azul-c); color: var(--sobre-cor-azul-c); }
.capitulo h2 { font-family: var(--display); font-weight: 400; font-size: clamp(32px, 1.6vw + 24px, 44px); line-height: 1.06; letter-spacing: var(--tr-titulo-editorial); margin: 0 0 22px; color: var(--tinta-titulo); text-wrap: balance; hyphens: manual; }
.capitulo h2 em { font-style: italic; }

/* o rótulo dos blocos: sans, com ícone; o subtítulo em sans (a legenda em Garamond itálico saiu) */
.versalete { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font: 650 13px/1.4 var(--sans); letter-spacing: .01em; color: var(--sobre-2); hyphens: manual; }
.versalete svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.versalete .sub { font: 400 13px/1.4 var(--sans); color: var(--sobre-3); letter-spacing: 0; }
.versalete .sub::before { content: "· "; }
.bloco { margin: 36px 0; }
.bloco .versalete { margin-bottom: 12px; }

/* a tese: o marca-texto na frase que carrega o capítulo */
.bloco.tese { padding: 4px 0; }
.bloco.tese .versalete { color: var(--cor-amarelo-texto); }
.bloco.tese p:not(.versalete) { font-size: 1.07em; line-height: calc(var(--alt) + .02); color: var(--tinta-titulo); }
.bloco.tese strong { font-weight: 400; background-image: linear-gradient(178deg, transparent 2%, var(--realce) 5% 92%, transparent 96%); background-size: 100% .62em; background-position: 0 calc(100% - .2em); background-repeat: no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .08em; margin: 0 -.08em; mix-blend-mode: var(--mistura-grifo); }
:root[data-tema="escuro"] .bloco.tese strong { background-image: linear-gradient(178deg, transparent 2%, rgb(255 213 74 / .30) 5% 92%, transparent 96%); mix-blend-mode: normal; color: var(--sobre); }
.js .bloco.tese strong { background-size: 0% .62em; transition: background-size 1100ms var(--c-percurso); }
.js .bloco.tese.pintada strong { background-size: 100% .62em; }

/* definição (azul: informação) e exemplo (neutro): contêineres de canto 16 */
.bloco.definicao, .bloco.exemplo { padding: 22px 26px 24px; border-radius: var(--raio-4); }
.bloco.definicao { background: var(--def-fundo); }
.bloco.definicao .versalete { color: var(--def-tinta); }
.bloco.exemplo { background: var(--cartao); box-shadow: inset 0 0 0 1px var(--cartao-borda); }
.bloco.exemplo .passos { list-style: none; margin: 16px 0; padding: 0; counter-reset: passo; }
.bloco.exemplo .passos li { position: relative; padding-left: 40px; margin: 12px 0; counter-increment: passo; }
.bloco.exemplo .passos li::before { content: counter(passo); position: absolute; left: 0; top: .2em; display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--raio-full); font: 650 12.5px/1 var(--sans); font-variant-numeric: tabular-nums; background: var(--sup); color: var(--sobre-2); box-shadow: inset 0 0 0 1px var(--contorno-sutil); }
/* a citação: o espécime do DS (Instrument Serif, fio de marca-texto) */
.citacao { margin: 40px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--realce); font-family: var(--display); font-size: clamp(26px, 1.2vw + 20px, 32px); line-height: 1.2; letter-spacing: var(--tr-micro); color: var(--tinta-titulo); text-wrap: balance; hyphens: manual; }
.capitulo p + .citacao, .capitulo .citacao + p { margin-top: 40px; }

/* as fórmulas: o número em sans tabular, a legenda em sans */
.formula { margin: 32px 0; }
.eq { position: relative; text-align: center; padding: 8px 56px; max-width: 100%; }
.eq .katex-display { margin: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); }
.eq .eqnum { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font: 500 13px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--sobre-3); padding: 5px 8px; border-radius: var(--raio-full); background: var(--sup-3); }
.formula figcaption { margin: 10px auto 0; max-width: 46ch; text-align: center; font: 400 14px/1.5 var(--sans); color: var(--sobre-3); hyphens: manual; }
.katex { font-size: 1em; }
.katex-display > .katex { font-size: 1.04em; }
.katex-display { overflow-x: auto; overflow-y: hidden; padding: 2px 16px; margin: 0 -16px; scrollbar-width: none; }
/* r7 · a máscara só esmaece o lado que ainda tem fórmula (o JS marca data-rola quando ela não cabe) */
.js .eq .katex-display { -webkit-mask-image: none; mask-image: none; }
.js .eq .katex-display[data-rola="dir"] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.js .eq .katex-display[data-rola="esq"] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px); mask-image: linear-gradient(90deg, transparent, #000 28px); }
.js .eq .katex-display[data-rola="ambos"] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.nobr { white-space: nowrap; }
.cadeia > .elo { white-space: nowrap; }
.katex-display > .cadeia { white-space: nowrap; }
.katex-display > .cadeia .katex { font-size: 1.04em; }

/* o que ficou estabelecido: o cartão verde com ícones */
.estabelecido { padding: 30px 30px 18px; border-radius: var(--raio-cartao); background: var(--estab-fundo); }
.estabelecido > .versalete { color: var(--estab-tinta); font-size: 14px; }
.sumula { list-style: none; margin: 18px 0 0; padding: 0; display: grid; }
.sumula li { position: relative; padding: 16px 0 16px 56px; font-size: .92em; line-height: 1.55; }
.sumula li + li { box-shadow: 0 -1px 0 var(--sobre-divisor); }
.sumula-ico { position: absolute; left: 0; top: 14px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--raio-full); background: var(--sup); color: var(--estab-tinta); box-shadow: 0 1px 0 hsl(var(--sombra-cor-tinta) / .06); }
:root[data-tema="escuro"] .sumula-ico { background: var(--noite-800); }
.sumula-ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.sumula strong { display: block; margin-bottom: 2px; }

/* os capítulos vizinhos, no pé da folha */
.cap-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 64px; }
.cap-nav-item { position: relative; display: grid; gap: 8px; align-content: start; min-height: 44px; padding: 16px 18px; border-radius: var(--raio-4); background: var(--cartao); box-shadow: inset 0 0 0 1px var(--cartao-borda); color: var(--sobre-2); font-family: var(--sans); isolation: isolate; }
.cap-nav-item::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: currentColor; opacity: 0; transition: opacity var(--d-3) var(--c-padrao); }
@media (hover: hover) { .cap-nav-item:hover::before { opacity: .05; } }
.cap-nav-item--prox { text-align: right; justify-items: end; }
.cap-nav-rotulo { display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px/1.3 var(--sans); color: var(--sobre-3); }
.cap-nav-nome { display: inline-flex; align-items: center; gap: 10px; font: 600 15px/1.3 var(--sans); color: var(--sobre); text-wrap: pretty; }
.cap-nav-nome .pilula { min-width: 28px; height: 24px; font-size: 12px; }
.cap-nav-nome .cadeado { color: var(--sobre-3); width: 14px; height: 14px; }

/* ─────────────────────────────── grifos e notas ─────────────────────────────── */
/* o grifo é a banda do DS em linha corrida: pigmento abaixo da meia altura, pontas suaves, clone na quebra */
mark.grifo {
  --g: var(--g-amarelo);
  background-color: transparent; color: var(--g-tinta);
  background-image: linear-gradient(178deg, transparent 3%, var(--g) 7% 93%, transparent 97%);
  background-repeat: no-repeat; background-size: 100% .78em; background-position: 0 calc(100% - .12em);
  padding: 0 .1em; margin: 0 -.1em; border-radius: .2em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; mix-blend-mode: var(--g-mistura);
  cursor: pointer; transition: background-size var(--d-4) var(--c-padrao), filter var(--d-3) var(--c-padrao);
}
mark.grifo.nasce { animation: grifo-pinta 520ms var(--c-desacelera) both; }
@keyframes grifo-pinta { from { background-size: 0% .78em; } to { background-size: 100% .78em; } }
mark.grifo:hover, mark.grifo.aceso { background-size: 100% 1.02em; }
mark.grifo.g-verde { --g: var(--g-verde); } mark.grifo.g-azul { --g: var(--g-azul); } mark.grifo.g-vermelho { --g: var(--g-vermelho); }
/* a nota sem cor: sublinhado de tinta azul (o que se clica) */
mark.grifo.g-nota { --g: var(--cor-azul); background-image: linear-gradient(var(--g), var(--g)); background-size: 100% 2px; background-position: 0 100%; mix-blend-mode: normal; border-radius: 0; padding: 0 0 1px; margin: 0; }
mark.grifo.g-nota.nasce { animation: nota-sublinha 520ms var(--c-desacelera) both; }
@keyframes nota-sublinha { from { background-size: 0% 2px; } to { background-size: 100% 2px; } }
mark.grifo.g-nota:hover, mark.grifo.g-nota.aceso { background-size: 100% 3px; }

/* a pílula da seleção: o cartão preto do DS (--sup-inv), pílula, as quatro cores e as ações */
.pop {
  position: absolute; z-index: 60; display: flex; align-items: center; gap: 2px; padding: 5px;
  background: var(--sup-inv); color: var(--sobre-inv); border-radius: var(--raio-full); box-shadow: var(--elev-flutuante);
  font-family: var(--sans);
  animation: pop-entra var(--d-4) var(--c-entra) both; transform-origin: 50% 100%;
}
.pop.abaixo { transform-origin: 50% 0; }
.pop.saindo { animation: pop-sai var(--d-2) var(--c-acelera) both; }
@keyframes pop-entra { from { opacity: 0; transform: translateY(6px) scale(.94); } }
@keyframes pop-sai { to { opacity: 0; transform: translateY(3px) scale(.96); } }
.pop-bico { position: absolute; left: 50%; bottom: -5px; width: 11px; height: 11px; margin-left: -6px; background: var(--sup-inv); transform: rotate(45deg); border-radius: 2px; z-index: -1; }
.pop.abaixo .pop-bico { bottom: auto; top: -5px; }
.pop-cores { display: flex; gap: 2px; padding: 0 4px 0 2px; }
.pop .cor { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--raio-full); }
.pop .cor::after { content: ""; width: 22px; height: 22px; border-radius: var(--raio-full); background: var(--c); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); transition: transform var(--d-3) var(--c-entra); }
@media (hover: hover) { .pop .cor:hover::after { transform: scale(1.16); } }
.pop .cor.ativa::before { content: ""; position: absolute; inset: 4px; border-radius: var(--raio-full); box-shadow: 0 0 0 2px var(--sobre-inv); }
.pop .cor:focus-visible { outline: 2px solid var(--sobre-inv); outline-offset: -2px; border-radius: var(--raio-full); }
.pop .cor[data-cor="amarelo"] { --c: var(--c-amarelo); } .pop .cor[data-cor="verde"] { --c: var(--c-verde); } .pop .cor[data-cor="azul"] { --c: var(--c-azul); } .pop .cor[data-cor="vermelho"] { --c: var(--c-vermelho); }
.pop-sep { width: 1px; align-self: stretch; margin: 8px 2px; background: currentColor; opacity: .2; }
.pop-acao { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px; border-radius: var(--raio-full); font: 600 13px/1 var(--sans); color: inherit; isolation: isolate; }
.pop-acao::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: currentColor; opacity: 0; transition: opacity var(--d-3) var(--c-padrao); }
@media (hover: hover) { .pop-acao:hover::before { opacity: .12; } }
.pop-acao:focus-visible { outline: 2px solid var(--sobre-inv); outline-offset: -2px; border-radius: var(--raio-full); }
.pop-acao .ico { width: 16px; height: 16px; opacity: .85; }

/* compor a nota: na margem (≥ 1180), sob o trecho (tablet), folha de baixo (celular) */
.compor {
  position: absolute; z-index: 61; width: 340px; display: grid; gap: 12px; padding: 16px;
  background: var(--sup); color: var(--sobre); border: 1px solid var(--contorno-sutil); border-radius: var(--raio-5); box-shadow: var(--elev-4);
  font-family: var(--sans);
  animation: compor-entra var(--d-5) var(--c-entra) both; transform-origin: 0 0;
}
@keyframes compor-entra { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.compor-rotulo { display: flex; align-items: center; gap: 8px; font: 650 13px/1 var(--sans); color: var(--primaria-texto); }
.compor-trecho { font: 400 15px/1.45 var(--ff-leitura); color: var(--sobre-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.campo-texto {
  width: 100%; padding: 12px 14px; border-radius: var(--campo-raio); resize: none; min-height: 88px;
  background: var(--sup-3); border: 1px solid var(--contorno); color: var(--sobre);
  font: 400 16px/1.5 var(--sans);
  transition: border-color var(--d-3) var(--c-padrao), box-shadow var(--d-3) var(--c-padrao), background-color var(--d-3) var(--c-padrao);
}
.campo-texto::placeholder { color: var(--sobre-3); }
.campo-texto:focus-visible { outline: none; background: var(--sup); border-color: var(--primaria); box-shadow: var(--anel-foco); }
.compor-acoes { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.compor-dica { margin-right: auto; font: 500 12px/1 var(--sans); color: var(--sobre-3); }
.compor.na-margem .compor-dica { display: none; }
.compor.na-margem { width: auto; }

/* a marginália: a nota mora na margem, na altura do trecho, com um fio que a liga à coluna */
.margem-vazia { display: flex; gap: 10px; align-items: flex-start; font: 500 13px/1.5 var(--sans); color: var(--sobre-3); max-width: 24ch; }
.margem-vazia svg { margin-top: 2px; color: var(--cor-amarelo-texto); }
.notas { position: relative; }
.nota {
  --nota-cor: var(--c-amarelo);
  position: absolute; left: 0; right: 0; display: grid; gap: 6px; padding: 10px 10px 12px 14px;
  background: var(--sup-2); border-radius: var(--raio-3); box-shadow: inset 0 0 0 1px var(--contorno-sutil);
  font-family: var(--sans);
  animation: pousa var(--d-5) var(--c-entra) both;
  transition: top var(--d-5) var(--c-padrao), box-shadow var(--d-4) var(--c-padrao), background-color var(--d-4) var(--c-padrao);
}
.nota::before { content: ""; position: absolute; left: -48px; top: 18px; width: 44px; height: 1px; background: var(--contorno); transform-origin: right; animation: fio-liga var(--d-6) var(--c-desacelera) 160ms both; }
@keyframes fio-liga { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.nota.acesa, .nota:hover, .nota:focus-within { box-shadow: inset 0 0 0 1px var(--contorno-sutil), var(--elev-2); background: var(--sup); }
.nota.inline { position: relative; margin: 16px 0 12px; animation: entra-cima var(--d-4) var(--c-desacelera) both; }
.nota.inline::before { display: none; }
.nota-cabeca { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.nota-cabeca .nota-ponto { width: 10px; height: 10px; border-radius: var(--raio-full); background: var(--nota-cor); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .1); flex: none; }
.nota-cabeca .nota-rotulo { flex: 1; font: 650 12px/1 var(--sans); letter-spacing: .02em; color: var(--sobre-2); }
.nota-cabeca .ib { width: 32px; height: 32px; color: var(--sobre-3); opacity: 0; transition: opacity var(--d-3) var(--c-padrao), color var(--d-3) var(--c-padrao); }
.nota-cabeca .ib svg { width: 15px; height: 15px; }
.nota:hover .nota-cabeca .ib, .nota:focus-within .nota-cabeca .ib, .nota-cabeca .ib:focus-visible { opacity: 1; }
.nota-texto { font: 400 14.5px/1.5 var(--sans); color: var(--sobre); white-space: pre-wrap; overflow-wrap: anywhere; }
.nota[data-cor="verde"] { --nota-cor: var(--c-verde); } .nota[data-cor="azul"], .nota[data-cor="nota"] { --nota-cor: var(--c-azul); } .nota[data-cor="vermelho"] { --nota-cor: var(--c-vermelho); }
.nota-ancora { display: none; align-items: center; gap: 6px; min-height: 32px; font: 500 12.5px/1.4 var(--sans); color: var(--primaria-texto); text-align: left; }
.nota.inline .nota-ancora { display: flex; }
.nota-ancora i { font-style: normal; color: var(--sobre-3); }
.nota-edicao { display: grid; gap: 8px; }
.nota-edicao .campo-texto { min-height: 76px; font-size: 16px; }
.nota-edicao-acoes { display: flex; justify-content: flex-end; gap: 6px; }

/* ─────────────────────────────── a figura 3.1: cartão de 28 ─────────────────────────────── */
.figura { margin: 40px 0; padding: 22px 26px 24px; background: var(--cartao); border-radius: var(--raio-cartao); box-shadow: inset 0 0 0 1px var(--cartao-borda); }
.fig-cabeca { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 14px; gap: 6px 16px; }
.fig-cabeca .versalete { color: var(--sobre); }
.fig-cabeca .versalete svg { color: var(--cor-azul); }
.fig-cabeca .dica { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1.3 var(--sans); color: var(--sobre-3); opacity: 0; transition: opacity var(--d-6) var(--c-padrao); white-space: nowrap; }
.figura.acordou .fig-cabeca .dica { opacity: 1; transition-delay: 900ms; }
.figura.tocada .fig-cabeca .dica { opacity: 0; transition-delay: 0ms; }
.fig-palco { position: relative; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.fig-palco svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--sans); font-variant-numeric: tabular-nums; }
.fig-palco .eixo { stroke: var(--contorno-forte); stroke-opacity: .55; stroke-width: 1; fill: none; shape-rendering: crispEdges; }
.fig-palco .tick-txt { fill: var(--sobre-3); font-size: 12px; font-weight: 500; paint-order: stroke; stroke: var(--cartao); stroke-width: 4px; stroke-linejoin: round; }
.fig-palco .curva { fill: none; stroke: var(--sobre); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; clip-path: url(#fig-recorte); }
.fig-palco .tangente { fill: none; stroke: var(--cor-azul); stroke-width: 2.75; stroke-linecap: round; }
.fig-palco .queda { stroke: var(--contorno-forte); stroke-opacity: .7; stroke-width: 1; stroke-dasharray: 2 4; }
.fig-palco .rastro { fill: none; stroke: var(--cor-verde); stroke-width: 2.75; stroke-linecap: round; stroke-linejoin: round; }
.fig-palco .ponto { fill: var(--cor-azul); stroke: var(--cartao); stroke-width: 2.5; }
.fig-palco .ponto-df { fill: var(--cor-verde); stroke: var(--cartao); stroke-width: 2; }
.fig-palco .alvo { fill: transparent; cursor: grab; }
.fig-palco .alvo:active, .fig-palco.arrastando .alvo { cursor: grabbing; }
.fig-palco .anel { fill: var(--cor-azul); fill-opacity: .1; stroke: var(--cor-azul); stroke-opacity: .4; stroke-width: 1.25; transition: stroke-opacity var(--d-4) var(--c-padrao), stroke-width var(--d-4) var(--c-padrao), fill-opacity var(--d-4) var(--c-padrao); }
.fig-palco .alvo:focus-visible ~ .anel, .fig-palco.arrastando .anel { stroke-opacity: 1; stroke-width: 2; fill-opacity: .16; }
.fig-palco .alvo:focus-visible ~ .anel { stroke: var(--foco); }
.fig-palco .alvo:focus-visible { outline: none; }
.fig-rotulo { position: absolute; font: 500 13px/1 var(--sans); color: var(--sobre-2); pointer-events: none; }
.fig-rotulo .katex { font-size: 1.05em; }
.fig-rotulo-f { left: 8px; } .fig-rotulo-df { right: 0; color: var(--cor-verde); }
.fig-rotulo-f.a-direita { left: auto; right: 8px; }
.fig-rotulo-df { padding: 3px 0 3px 8px; margin-top: -3px; background: var(--cartao); border-radius: var(--raio-1); }
/* a figura acorda em seis tempos: eixos · rótulos · curva · ponto · tangente · queda e rastro */
.figura:not(.viva) .fig-palco .eixo-h { transform-box: fill-box; transform-origin: 50% 50%; }
.figura:not(.viva) .fig-palco .eixo-v { transform-box: fill-box; transform-origin: 50% 50%; }
.js .figura:not(.acordou) .fig-palco .eixo-h { transform: scaleX(0); }
.js .figura:not(.acordou) .fig-palco .eixo-v { transform: scaleY(0); }
.js .figura:not(.acordou) .fig-palco .tick-txt, .js .figura:not(.acordou) .fig-palco .tick, .js .figura:not(.acordou) .fig-rotulo { opacity: 0; }
.js .figura:not(.acordou) .fig-palco .curva { stroke-dashoffset: var(--comp, 2000); }
.js .figura:not(.acordou) .fig-palco .vivo { opacity: 0; }
.js .figura:not(.acordou) .fig-palco .ponto { transform: scale(0); }
.js .figura:not(.acordou) .fig-palco .tangente { transform: scaleX(0); }
.js .figura:not(.acordou) .fig-palco .queda { transform: scaleY(0); }
.js .figura:not(.acordou) .fig-palco .rastro { stroke-dashoffset: var(--comp-r, 4000); }
.figura .fig-palco .eixo-h, .figura .fig-palco .eixo-v { transition: transform 360ms var(--c-desacelera); }
.fig-palco .tangente { clip-path: url(#fig-recorte); }
.figura .fig-palco .tick-txt, .figura .fig-palco .tick, .figura .fig-rotulo { transition: opacity 240ms var(--c-padrao) 160ms; }
.figura .fig-palco .curva { stroke-dasharray: var(--comp, 2000); stroke-dashoffset: 0; transition: stroke-dashoffset 620ms var(--c-percurso) 180ms; }
.figura .fig-palco .ponto { transform-box: fill-box; transform-origin: 50% 50%; transition: transform 380ms var(--c-entra) 660ms, opacity 200ms var(--c-padrao) 660ms; }
.figura .fig-palco .anel { transition: opacity 240ms var(--c-padrao) 720ms, stroke-opacity var(--d-4) var(--c-padrao), stroke-width var(--d-4) var(--c-padrao), fill-opacity var(--d-4) var(--c-padrao); }
.figura .fig-palco .tangente { transform-box: fill-box; transform-origin: 50% 50%; transition: transform 320ms var(--c-desacelera) 760ms, opacity 200ms var(--c-padrao) 760ms; }
.figura .fig-palco .queda { transform-box: fill-box; transform-origin: 50% 0; transition: transform 260ms var(--c-padrao) 880ms, opacity 200ms var(--c-padrao) 880ms; }
.figura .fig-palco .ponto-df { transition: opacity 200ms var(--c-padrao) 1000ms; }
.figura .fig-palco .rastro { stroke-dasharray: var(--comp-r, 4000); stroke-dashoffset: 0; transition: stroke-dashoffset 460ms var(--c-padrao) 960ms, opacity 200ms var(--c-padrao) 960ms; }
.js .figura:not(.acordou) .leituras, .js .figura:not(.acordou) figcaption { opacity: 0; }
.figura .leituras, .figura figcaption { transition: opacity 320ms var(--c-padrao) 760ms; }
.figura.viva .leituras, .figura.viva figcaption { transition-delay: 0ms; transition-duration: 0ms; }
.figura.viva .fig-palco .curva, .figura.viva .fig-palco .rastro { stroke-dasharray: none; transition: none; }
.figura.viva .fig-palco .vivo, .figura.viva .fig-palco .ponto, .figura.viva .fig-palco .tangente, .figura.viva .fig-palco .queda, .figura.viva .fig-palco .eixo-h, .figura.viva .fig-palco .eixo-v, .figura.viva .fig-palco .tick-txt, .figura.viva .fig-palco .tick, .figura.viva .fig-rotulo { transition-delay: 0ms; transition-duration: 0ms; }
.figura.viva .fig-palco .anel { transition: stroke-opacity var(--d-4) var(--c-padrao), stroke-width var(--d-4) var(--c-padrao), fill-opacity var(--d-4) var(--c-padrao); }
@media (prefers-reduced-motion: reduce) {
  .figura .fig-palco .curva, .figura .fig-palco .rastro { stroke-dasharray: none; transition: none; }
  .figura .fig-palco *, .figura .fig-rotulo { transition: none !important; }
  .figura:not(.acordou) .fig-palco .eixo-h, .figura:not(.acordou) .fig-palco .eixo-v, .figura:not(.acordou) .fig-palco .ponto, .figura:not(.acordou) .fig-palco .tangente, .figura:not(.acordou) .fig-palco .queda { transform: none; }
  .figura:not(.acordou) .fig-palco .vivo, .figura:not(.acordou) .fig-palco .tick-txt, .figura:not(.acordou) .fig-palco .tick, .figura:not(.acordou) .fig-rotulo { opacity: 1; }
  .figura:not(.acordou) .fig-palco .curva, .figura:not(.acordou) .fig-palco .rastro { stroke-dashoffset: 0; }
  .fig-cabeca .dica { opacity: 1 !important; }
}
/* a leitura ao vivo: x, f(x), f′(x) em sans tabular */
.figura .leituras { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 18px; font-size: 16px; color: var(--sobre-2); }
.figura .leituras .leitura { display: inline-flex; align-items: baseline; gap: 8px; min-height: 40px; align-items: center; padding: 0 14px; border-radius: var(--raio-3); background: var(--sup); box-shadow: inset 0 0 0 1px var(--contorno-sutil); white-space: nowrap; }
.figura .leituras b { font: 650 15px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--sobre); min-width: 3.4ch; text-align: right; }
.figura .leituras b.verde { color: var(--cor-verde); }
.figura .fig-acoes { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.chip { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px 0 12px; border-radius: var(--raio-chip); border: 1px solid var(--contorno); background: var(--sup); color: var(--sobre-2); font: 600 13px/1 var(--sans); white-space: nowrap; isolation: isolate; transition: color var(--d-3) var(--c-padrao), border-color var(--d-3) var(--c-padrao), transform var(--d-1) var(--c-padrao); }
.chip::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: currentColor; opacity: 0; transition: opacity var(--d-3) var(--c-padrao); }
.chip::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; margin-top: -22px; }
@media (hover: hover) { .chip:hover { color: var(--sobre); } .chip:hover::before { opacity: .06; } }
.chip:active { transform: scale(var(--press)); }
.chip .ico { color: var(--sobre-3); }
.chip .fig-qual { font-weight: 400; color: var(--sobre-3); }
.figura figcaption { margin-top: 16px; font: 400 14.5px/1.55 var(--sans); color: var(--sobre-2); hyphens: manual; }
.figura figcaption strong { font-weight: 650; color: var(--sobre); }

/* ─────────────────────────────── os exercícios ─────────────────────────────── */
.bloco.exercicio { margin: 32px 0; padding: 24px 28px 26px; background: var(--cartao); border-radius: var(--raio-cartao); box-shadow: inset 0 0 0 1px var(--cartao-borda); transition: box-shadow var(--d-6) var(--c-padrao); }
.bloco.exercicio > .versalete { color: var(--sobre); }
.bloco.exercicio > .versalete svg { color: var(--primaria-texto); }
.bloco.exercicio.resolvido { box-shadow: inset 0 0 0 1.5px var(--sucesso); }
.capitulo h2 .badge { vertical-align: .32em; margin-left: 12px; }
.badge { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: var(--raio-chip); background: var(--sup-3); color: var(--sobre-2); font: 600 13px/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: .01em; white-space: nowrap; transition: background-color var(--d-5) var(--c-padrao), color var(--d-5) var(--c-padrao); }
.badge b { font-weight: 700; }
.badge.completo { background: var(--sucesso-c); color: var(--sobre-sucesso-c); }
.badge.pulo { animation: badge-pulo var(--d-6) var(--c-entra); }
@keyframes badge-pulo { 40% { transform: scale(1.1); } }
.exercicio .opcoes { margin: 18px 0 0; display: grid; gap: 10px; }
.exercicio .opcao { position: relative; display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 8px 20px 8px 14px; text-align: left; border-radius: var(--raio-full); background: var(--sup); box-shadow: inset 0 0 0 1px var(--contorno); color: var(--sobre); font-size: .92em; line-height: 1.35; isolation: isolate; transition: box-shadow var(--d-4) var(--c-padrao), background-color var(--d-4) var(--c-padrao), color var(--d-4) var(--c-padrao), transform var(--d-1) var(--c-padrao); }
.exercicio .opcao::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: currentColor; opacity: 0; transition: opacity var(--d-3) var(--c-padrao); }
@media (hover: hover) { .exercicio:not(.resolvido) .opcao:hover { box-shadow: inset 0 0 0 1px var(--primaria); } .exercicio:not(.resolvido) .opcao:hover::before { opacity: .04; } }
.exercicio .opcao:active { transform: scale(var(--press)); }
.exercicio .opcao:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--primaria), var(--anel-foco); }
.exercicio .opcao .radio { position: relative; flex: none; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--contorno-forte); display: grid; place-items: center; transition: box-shadow var(--d-3) var(--c-padrao), background-color var(--d-3) var(--c-padrao); }
.exercicio .opcao .radio::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--primaria); transform: scale(.3); opacity: 0; transition: transform var(--d-4) var(--c-entra), opacity var(--d-3) var(--c-padrao); }
.exercicio .opcao[aria-checked="true"] .radio { box-shadow: inset 0 0 0 1.5px var(--primaria); }
.exercicio .opcao[aria-checked="true"] .radio::after { transform: scale(1); opacity: 1; }
/* errado: vermelho de erro com o x; certo: verde com o visto — nunca só a cor */
.exercicio .opcao[aria-checked="true"].errada { background: var(--erro-c); color: var(--sobre-erro-c); box-shadow: inset 0 0 0 1.5px var(--erro); }
.exercicio .opcao[aria-checked="true"].errada .radio { background: var(--erro); box-shadow: none; }
.exercicio .opcao[aria-checked="true"].errada .radio::after { width: 12px; height: 12px; border-radius: 0; background: var(--sobre-erro); -webkit-mask: linear-gradient(45deg, transparent 43%, #000 43% 57%, transparent 57%), linear-gradient(-45deg, transparent 43%, #000 43% 57%, transparent 57%); mask: linear-gradient(45deg, transparent 43%, #000 43% 57%, transparent 57%), linear-gradient(-45deg, transparent 43%, #000 43% 57%, transparent 57%); }
.exercicio .opcao.errada { animation: nao 360ms var(--c-padrao); }
@keyframes nao { 20% { transform: translateX(-4px); } 45% { transform: translateX(4px); } 70% { transform: translateX(-2px); } }
.exercicio.resolvido .opcao[aria-checked="true"] { background: var(--sucesso-c); color: var(--sobre-sucesso-c); box-shadow: inset 0 0 0 1.5px var(--sucesso); }
.exercicio.resolvido .opcao[aria-checked="true"] .radio { background: var(--sucesso); box-shadow: none; }
.exercicio.resolvido .opcao[aria-checked="true"] .radio::after { width: 13px; height: 7px; border-radius: 0; background: transparent; border-left: 2.25px solid var(--sobre-sucesso); border-bottom: 2.25px solid var(--sobre-sucesso); transform: translateY(-2px) rotate(-45deg); opacity: 1; }
.exercicio.resolvido .opcao:not([aria-checked="true"]) { color: var(--sobre-3); box-shadow: inset 0 0 0 1px var(--contorno-sutil); }
.exercicio.resolvido .opcao { pointer-events: none; }
/* o retorno: um contêiner de 16 com ícone; errar e acertar têm o mesmo peso */
.exercicio .retorno p { position: relative; margin-top: 16px; padding: 14px 18px 14px 48px; border-radius: var(--raio-4); background: var(--sup-3); color: var(--sobre); font-size: .88em; line-height: 1.5; animation: entra-cima var(--d-5) var(--c-desacelera) both; }
.exercicio .retorno p::before { content: ""; position: absolute; left: 16px; top: 16px; width: 20px; height: 20px; border-radius: 50%; background: currentColor; -webkit-mask: radial-gradient(circle, #000 60%, transparent 62%); mask: radial-gradient(circle, #000 60%, transparent 62%); opacity: .9; }
.exercicio .retorno .retorno-certo { background: var(--sucesso-c); color: var(--sobre-sucesso-c); }
.exercicio .retorno .retorno-certo::before { background: var(--sucesso); -webkit-mask: none; mask: none; clip-path: circle(50%); }
.exercicio .retorno .retorno-certo::after { content: ""; position: absolute; left: 22px; top: 21px; width: 8px; height: 4.5px; border-left: 2px solid var(--sobre-sucesso); border-bottom: 2px solid var(--sobre-sucesso); transform: rotate(-45deg); }
.exercicio .retorno .retorno-errado { background: var(--erro-c); color: var(--sobre-erro-c); }
.exercicio .retorno .retorno-errado::before { background: var(--erro); -webkit-mask: none; mask: none; clip-path: circle(50%); }
.exercicio .retorno .retorno-errado::after { content: "!"; position: absolute; left: 16px; top: 16px; width: 20px; line-height: 20px; text-align: center; font: 800 13px/20px var(--sans); color: var(--sobre-erro); }
.exercicio .retorno .retorno-vazio::before { background: var(--sobre-3); -webkit-mask: none; mask: none; clip-path: circle(50%); }
.exercicio .rotulo { font: 700 14px/1 var(--sans); margin-right: 6px; }
.exercicio .ex-acoes { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
/* "Dica" e "Ver a resolução": disclosures em pílula tonal com o chevron que gira */
.exercicio .disclosure { --alt: 40px; --pad: 14px; --tam: 13.5px; gap: 6px; background: var(--sup); color: var(--sobre-2); border-color: var(--contorno); }
.exercicio .disclosure .ico { width: 15px; height: 15px; transition: transform var(--d-5) var(--c-entra); }
.exercicio .disclosure[aria-expanded="true"] { background: var(--p-c); color: var(--sobre-p-c); border-color: transparent; }
.exercicio .disclosure[aria-expanded="true"] .ico { transform: rotate(180deg); }
.exercicio .dica-texto { position: relative; margin-top: 14px; padding: 14px 18px; border-radius: var(--raio-4); background: var(--sup); box-shadow: inset 0 0 0 1px var(--contorno-sutil); font-size: .88em; line-height: 1.5; color: var(--sobre); }
.exercicio .dica-texto:not([hidden]), .exercicio .resolucao:not([hidden]) { animation: abre-altura var(--d-6) var(--c-desacelera) both; }
.exercicio .fechando { animation: fecha-altura var(--d-4) var(--c-acelera) both !important; }
@keyframes fecha-altura { to { opacity: 0; transform: translateY(-4px); clip-path: inset(0 0 100% 0 round 16px); } }
.exercicio .resposta { display: flex; align-items: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.exercicio .resposta .pergunta { margin-right: 2px; font-size: 1.02em; }
.campo { height: 48px; width: 112px; padding: 0 16px; border-radius: var(--campo-raio); background: var(--sup-3); border: 1px solid var(--contorno); font: 600 17px/1 var(--sans); font-variant-numeric: tabular-nums; text-align: center; color: var(--sobre); transition: border-color var(--d-3) var(--c-padrao), background-color var(--d-3) var(--c-padrao), box-shadow var(--d-3) var(--c-padrao); }
.campo:focus-visible { outline: none; background: var(--sup); border-color: var(--primaria); box-shadow: var(--anel-foco); }
.campo.certa { border-color: var(--sucesso); background: var(--sucesso-c); color: var(--sobre-sucesso-c); box-shadow: none; }
.campo.errada { border-color: var(--erro); background: var(--erro-c); color: var(--sobre-erro-c); box-shadow: none; }
.exercicio .conferir { --alt: 48px; --pad: 22px; }
.exercicio .resolucao { margin-top: 18px; padding: 18px 20px 6px; border-radius: var(--raio-4); background: var(--sup); box-shadow: inset 0 0 0 1px var(--contorno-sutil); }
.exercicio .resolucao .versalete { margin-bottom: 8px; color: var(--sucesso); }
.exercicio .resolucao .eq { margin: 12px 0; padding-inline: 0; }

/* ─────────────────────────────── o fecho: o livro se fecha com a fita ─────────────────────────────── */
.fecho { position: relative; padding: clamp(56px, 10vh, 120px) var(--lado) clamp(80px, 14vh, 160px); scroll-margin-top: 72px; }
.fecho::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40% 50% at 28% 50%, color-mix(in oklab, var(--verd-300) 10%, transparent), transparent 70%); }
:root[data-tema="escuro"] .fecho::before { background: radial-gradient(40% 50% at 28% 50%, color-mix(in oklab, var(--ambar-500) 8%, transparent), transparent 70%); }
.fecho-grade { position: relative; max-width: 1180px; margin: 0 auto; display: grid; gap: 24px; }
.fecho-objeto { width: 100%; max-width: 400px; margin: 0 auto; }
.fecho-texto { min-width: 0; }
.fecho-titulo { margin: 14px 0 16px; font-family: var(--display); font-size: clamp(44px, 4.8vw, 72px); line-height: var(--lh-colado); letter-spacing: var(--tr-titulo-editorial); color: var(--tinta-titulo); text-wrap: balance; }
.fecho-titulo em { font-style: italic; }
.fecho-lead { max-width: 44ch; font: 400 clamp(17px, .5vw + 15px, 20px)/1.5 var(--sans); color: var(--sobre-2); }
.resumo { margin-top: 28px; padding: 20px 20px 18px; border-radius: var(--raio-cartao); background: var(--sup); border: 1px solid var(--contorno-sutil); box-shadow: var(--elev-1); max-width: 560px; }
.resumo-titulo { font: 650 13px/1.3 var(--ff-antetitulo); letter-spacing: var(--tr-caixa); text-transform: uppercase; color: var(--sobre-3); margin: 0 0 12px 2px; }
.resumo-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.resumo-item { display: grid; justify-items: start; gap: 6px; padding: 12px 12px 12px; border-radius: var(--raio-4); background: var(--sup-3); color: var(--sobre-2); font: 500 13px/1.25 var(--sans); }
.resumo-item svg { width: 18px; height: 18px; }
.resumo-item b { font: 650 22px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--sobre); letter-spacing: -.01em; white-space: nowrap; }
.resumo-item--grifo svg { color: var(--cor-amarelo-texto); }
.resumo-item--nota svg { color: var(--primaria-texto); }
.resumo-item--ex svg { color: var(--cor-verde); }
.resumo-item--tempo svg { color: var(--sobre-3); }
.resumo-item.feito { background: var(--sucesso-c); color: var(--sobre-sucesso-c); }
.resumo-item.feito b, .resumo-item.feito svg { color: inherit; }
.colofao { margin: 14px 2px 0; font: 400 13.5px/1.5 var(--sans); color: var(--sobre-3); }
.proximo { position: relative; margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 16px; max-width: 560px; padding: 16px 20px; border-radius: var(--raio-cartao); background: var(--sup); border: 1px solid var(--contorno-sutil); color: var(--sobre); isolation: isolate; transition: box-shadow var(--d-5) var(--c-expo-saida), transform var(--d-5) var(--c-expo-saida); }
.proximo::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: currentColor; opacity: 0; transition: opacity var(--d-3) var(--c-padrao); }
@media (hover: hover) { .proximo:hover { box-shadow: var(--elev-3); transform: translateY(var(--cartao-sobe)); } .proximo:hover .proximo-seta { transform: translateX(3px); } }
.proximo-rotulo { grid-column: 1; display: inline-flex; align-items: center; gap: 7px; font: 500 13px/1.3 var(--sans); color: var(--sobre-3); }
.proximo-nome { grid-column: 1; display: inline-flex; align-items: center; gap: 10px; font: 400 clamp(22px, 1vw + 16px, 26px)/1.15 var(--display); color: var(--sobre); }
.proximo-nome .pilula { font-size: 12px; height: 24px; min-width: 28px; }
.proximo-seta { grid-column: 2; grid-row: 1 / span 2; width: 20px; height: 20px; color: var(--sobre-2); transition: transform var(--d-4) var(--c-desacelera); }
.fecho-acoes { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.js .fecho:not(.visto) .fecho-texto > * { opacity: 0; transform: translateY(16px); }
.fecho.visto .fecho-texto > * { animation: sobe var(--d-7) var(--c-desacelera) both; animation-delay: calc(var(--i, 0) * 70ms + 260ms); }
@media (min-width: 1024px) {
  .fecho-grade { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(40px, 5vw, 88px); align-items: center; }
  .fecho-objeto { max-width: 560px; }
}
/* coluna única: a fita desce ~55 px abaixo do livro fechado e encostava no antetítulo */
@media (max-width: 1023.98px) { .fecho-grade { row-gap: 56px; } }
@media (max-width: 560px) { .resumo-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fecho-acoes { display: grid; } .fecho-acoes .btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .js .fecho:not(.visto) .fecho-texto > * { opacity: 1; transform: none; } }

/* ─────────────────────────────── a régua de progresso ─────────────────────────────── */
.rodape { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; pointer-events: none; }
.rodape .regua { position: relative; height: 3px; pointer-events: auto; }
.rodape .regua::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; }
.rodape .regua i { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--cor-azul); transform-origin: left; transform: scaleX(0); border-radius: 0 2px 2px 0; transition: transform 120ms linear, background-color var(--d-5) var(--c-padrao); }
.rodape.completo .regua i { background: var(--cor-verde); }
.rodape-chip { position: absolute; right: 20px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--raio-full); background: var(--sup-inv); color: var(--sobre-inv); box-shadow: var(--elev-flutuante); font: 500 13px/1 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(6px); transition: opacity var(--d-4) var(--c-padrao), transform var(--d-4) var(--c-desacelera); }
.rodape-chip b { font-weight: 700; }
.rodape .regua:hover + .rodape-chip { opacity: 1; transform: none; }

/* ─────────────────────────────── o painel de tipografia ─────────────────────────────── */
.painel {
  position: fixed; top: calc(var(--barra-h) + 8px); right: 16px; z-index: 49; width: 348px; display: grid; gap: 18px; padding: 20px;
  background: var(--sup); color: var(--sobre); border: 1px solid var(--contorno-sutil); border-radius: var(--raio-cartao); box-shadow: var(--elev-4);
  font-family: var(--sans);
  animation: painel-entra var(--d-5) var(--c-entra) both; transform-origin: 90% 0;
}
.painel-alca { display: none; }
.barra[data-estado="chamada"] ~ .painel { top: calc(var(--barra-compacta) + 8px); }
@media (min-width: 768px) and (max-width: 1179px) { html.painel-aberto .corpo { padding-right: 380px; } html.painel-aberto .folha { transition: none; } }
@keyframes painel-entra { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
@keyframes folha-sobe { from { transform: translateY(104%); } to { transform: none; } }
.painel-titulo { font: 650 15px/1.2 var(--sans); color: var(--sobre); }
.fontes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fonte { position: relative; display: grid; gap: 4px; justify-items: start; padding: 12px 14px; border-radius: var(--raio-4); text-align: left; background: var(--sup-2); box-shadow: inset 0 0 0 1px var(--contorno); transition: box-shadow var(--d-3) var(--c-padrao), background-color var(--d-3) var(--c-padrao); }
@media (hover: hover) { .fonte:hover { box-shadow: inset 0 0 0 1px var(--contorno-forte); } }
.fonte[aria-checked="true"] { background: var(--p-c); color: var(--sobre-p-c); box-shadow: inset 0 0 0 2px var(--primaria); }
.fonte .ag { font-size: 26px; line-height: 1.1; }
.fonte .ag.serif { font-family: var(--ff-leitura); } .fonte .ag.sans { font-family: var(--ff-instrument); font-weight: 500; }
.fonte .nome { font: 500 12.5px/1.2 var(--sans); color: inherit; opacity: .8; }
.fonte-marca { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--primaria); color: var(--sobre-primaria); transform: scale(0); transition: transform var(--d-4) var(--c-entra); }
.fonte-marca svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fonte[aria-checked="true"] .fonte-marca { transform: scale(1); }
.fonte:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--primaria), var(--anel-foco); }
.slider { display: grid; gap: 6px; }
.slider-cabeca { display: flex; justify-content: space-between; align-items: baseline; font: 600 14px/1.2 var(--sans); color: var(--sobre); }
.slider-cabeca b { font: 600 13px/1 var(--sans); color: var(--primaria-texto); }
.slider input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; margin: 0; background: transparent; cursor: pointer; }
.slider input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(var(--primaria), var(--primaria)) 0 0 / var(--pct, 50%) 100% no-repeat, var(--sup-3); }
.slider input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--sup-3); }
.slider input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--primaria); }
.slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: var(--sup); border: 2px solid var(--primaria); box-shadow: var(--elev-1); transition: transform var(--d-2) var(--c-entra), box-shadow var(--d-3) var(--c-padrao); }
.slider input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--sup); border: 2px solid var(--primaria); box-shadow: var(--elev-1); }
.slider input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); box-shadow: var(--anel-foco-deslizante); }
@media (hover: hover) { .slider input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.08); } }
.slider input[type="range"]:focus-visible { outline: none; }
.slider input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: var(--anel-foco-deslizante); }
.segmento { display: grid; gap: 8px; }
.segmento-cabeca { font: 600 14px/1.2 var(--sans); color: var(--sobre); }
.segmento-opcoes { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; border-radius: var(--raio-full); background: var(--sup-3); box-shadow: inset 0 0 0 1px var(--contorno-sutil); }
.segmento-opcao { position: relative; z-index: 1; min-height: 38px; border-radius: var(--raio-full); font: 500 13.5px/1 var(--sans); color: var(--sobre-2); transition: color var(--d-4) var(--c-padrao); }
.segmento-opcao[aria-checked="true"] { color: var(--sobre); font-weight: 650; }
.segmento-opcao:focus-visible { outline-offset: -2px; border-radius: var(--raio-full); }
.segmento-marca { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border-radius: var(--raio-full); background: var(--sup); box-shadow: var(--elev-1); transition: transform var(--d-6) var(--c-entra); }
.painel-pe { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.painel-nota { font: 500 12.5px/1.3 var(--sans); color: var(--sobre-3); }
.painel-pe .btn { margin-right: -8px; }

/* ─────────────────────────────── o sumário: gaveta lateral e folha de baixo ─────────────────────────────── */
.veu { position: fixed; inset: 0; z-index: 64; background: var(--veu); opacity: 0; transition: opacity var(--d-6) var(--c-padrao); }
.veu.visto { opacity: 1; }
.gaveta {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 65; width: 440px; max-width: 94vw;
  display: flex; flex-direction: column; background: var(--sup); color: var(--sobre); font-family: var(--sans);
  border-radius: var(--raio-cartao) 0 0 var(--raio-cartao); box-shadow: var(--elev-4), 0 0 0 1px var(--contorno-sutil);
  transform: translateX(104%); visibility: hidden;
  transition: transform var(--d-7) var(--c-acelera), visibility 0s linear var(--d-7);
}
.gaveta.aberta { transform: none; visibility: visible; transition: transform var(--d-8) var(--c-desacelera), visibility 0s; }
.gaveta-alca { display: none; }
.gaveta-secao, .gaveta-pe { opacity: 0; transform: translateX(16px); transition: opacity var(--d-4) var(--c-padrao), transform var(--d-6) var(--c-desacelera); }
.gaveta.aberta .gaveta-secao, .gaveta.aberta .gaveta-pe { opacity: 1; transform: none; }
.gaveta.aberta .gaveta-secao:nth-child(1) { transition-delay: 90ms; } .gaveta.aberta .gaveta-secao:nth-child(2) { transition-delay: 140ms; } .gaveta.aberta .gaveta-secao:nth-child(3) { transition-delay: 190ms; } .gaveta.aberta .gaveta-secao:nth-child(4), .gaveta.aberta .gaveta-pe { transition-delay: 230ms; }
.gaveta-cabeca { display: flex; align-items: center; gap: 12px; padding: 20px 16px 14px 24px; }
.gaveta-titulos { display: grid; gap: 4px; flex: 1; min-width: 0; }
.gaveta-sobre { font: 500 12.5px/1.2 var(--sans); color: var(--sobre-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gaveta-titulo { font: 400 32px/1 var(--display); color: var(--sobre); }
.gaveta-corpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 12px 24px; display: grid; gap: 24px; align-content: start; }
.gaveta-rotulo { display: flex; align-items: center; gap: 8px; padding: 0 12px 8px; font: 650 12px/1.3 var(--ff-antetitulo); letter-spacing: var(--tr-caixa); text-transform: uppercase; color: var(--sobre-3); }
.gaveta-rotulo svg { width: 15px; height: 15px; }
.gaveta-rotulo span { color: var(--sobre-2); }
.gaveta-resta { margin-left: auto; white-space: nowrap; font: 500 12px/1 var(--sans); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.indice--gaveta .indice-item { min-height: 50px; }
.indice--gaveta .indice-nome { font-size: 15px; }
.indice--gaveta .indice-sub { margin-left: 58px; }
.volume--gaveta .volume-nome { font-size: 14.5px; }
.gaveta-nota { margin: 10px 12px 0; font: 500 13px/1.45 var(--sans); color: var(--sobre-3); }
.gaveta-tipo { display: none; }
.gaveta-pe { display: none; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -1px 0 var(--contorno-sutil); }
.gaveta-pe .btn { width: 100%; --alt: 52px; --tam: 16px; }
/* a lista das marcações */
.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lista li { display: grid; grid-template-columns: 12px 1fr; column-gap: 12px; align-items: start; padding: 10px 12px; border-radius: var(--raio-4); transition: background-color var(--d-3) var(--c-padrao); }
@media (hover: hover) { .lista li:hover { background: var(--sup-3); } }
.lista .ponto { width: 12px; height: 12px; margin-top: 5px; background: var(--c-amarelo); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .1); }
.lista .ponto[data-cor="verde"] { background: var(--c-verde); } .lista .ponto[data-cor="azul"] { background: var(--c-azul); } .lista .ponto[data-cor="vermelho"] { background: var(--c-vermelho); } .lista .ponto[data-cor="nota"] { background: transparent; box-shadow: inset 0 0 0 2px var(--cor-azul); }
.lista .trecho { display: block; min-height: 32px; text-align: left; font: 400 15px/1.45 var(--ff-leitura); color: var(--sobre); }
.lista .trecho-nota { font: 400 13.5px/1.45 var(--sans); color: var(--sobre-2); margin-top: 4px; padding: 6px 10px; border-radius: var(--raio-2); background: var(--sup-3); }
.lista .onde { font: 500 12px/1.3 var(--sans); color: var(--sobre-3); margin-top: 4px; }
.lista .lista-acoes { display: flex; gap: 2px; margin: 2px 0 0 -10px; }
.lista .lista-acoes .ib { width: 40px; height: 40px; color: var(--sobre-3); }
.lista .lista-acoes .ib svg { width: 16px; height: 16px; }

/* ─────────────────────────────── o toast ─────────────────────────────── */
.toast {
  position: fixed; left: 0; right: 0; margin-inline: auto; width: max-content; bottom: 24px; z-index: 70; display: flex; align-items: center; gap: 12px;
  max-width: min(480px, calc(100vw - 20px)); min-height: 52px; padding: 8px 8px 8px 18px; background: var(--sup-inv); color: var(--sobre-inv);
  border-radius: var(--raio-4); box-shadow: var(--elev-flutuante); font: 500 14px/1.4 var(--sans);
  animation: toast-entra var(--d-5) var(--c-entra) both; transform-origin: 50% 100%;
}
.toast.saindo { animation: toast-sai var(--d-3) var(--c-acelera) both; }
@keyframes toast-entra { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes toast-sai { to { opacity: 0; transform: translateY(6px); } }
.toast .ico { color: var(--toast-ico); width: 20px; height: 20px; }
/* o ícone do toast se desenha (dasharray herda para dentro do <use>) */
.toast .ico.desenha { stroke-dasharray: 64; stroke-dashoffset: 64; animation: traco-desenha 460ms var(--c-padrao) 90ms forwards; }
@keyframes traco-desenha { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .toast .ico.desenha { animation: none; stroke-dashoffset: 0; } }
.toast-acao { min-height: 40px; padding: 0 14px; border-radius: var(--raio-full); color: var(--toast-acao); font: 650 14px/1 var(--sans); position: relative; isolation: isolate; }
.toast-acao::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: currentColor; opacity: 0; transition: opacity var(--d-3) var(--c-padrao); }
@media (hover: hover) { .toast-acao:hover::before { opacity: .14; } }
.toast-fechar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--sobre-inv); opacity: .7; }
@media (hover: hover) { .toast-fechar:hover { opacity: 1; } }
.toast-fechar .ico { width: 16px; height: 16px; color: inherit; }

/* ─────────────────────────────── telas ─────────────────────────────── */
@media (max-width: 1359px) { .barra-resta { display: none; } }
@media (max-width: 1179px) {
  .figura, .bloco.exercicio { margin-inline: 0; }
}
@media (min-width: 1024px) {
  .figura, .bloco.exercicio, .estabelecido { margin-left: -28px; margin-right: -28px; }
}
/* a folha de baixo: celular e tablet (e toque até 1194) */
@media (max-width: 1023px), (pointer: coarse) and (max-width: 1194px) {
  .gaveta { top: auto; left: 0; right: 0; width: auto; max-width: none; max-height: min(88vh, 88svh); border-radius: var(--raio-cartao) var(--raio-cartao) 0 0; transform: translateY(104%); touch-action: pan-y; }
  .gaveta.aberta { transform: translateY(var(--arrasto, 0px)); }
  .gaveta.arrastando { transition: none !important; }
  .gaveta-alca { display: grid; place-items: center; height: 24px; padding-top: 10px; cursor: grab; touch-action: none; }
  .gaveta-alca i { width: 40px; height: 5px; border-radius: 3px; background: var(--contorno-forte); opacity: .6; }
  .gaveta-cabeca { padding-top: 6px; touch-action: none; }
  .gaveta-secao, .gaveta-pe { transform: translateY(12px); }
  .gaveta-corpo { padding-bottom: 32px; }
  .gaveta-tipo { display: block; padding: 0 12px; }
  .gaveta-pe { display: block; }
}
@media (max-width: 1023px) {
  .ib-sumario { display: none; }
  .lugar-cabeca { min-width: 0; }
  .barra-meio { display: none; }
  .barra { grid-template-columns: minmax(0, 1fr) auto; }
  .barra-esq { min-width: 0; }
  .lugar { flex: 1 1 auto; }
}
@media (max-width: 767px) {
  :root { --barra-h: 56px; --barra-compacta: 52px; }
  .barra { padding-right: max(4px, env(safe-area-inset-right)); padding-left: max(2px, env(safe-area-inset-left)); column-gap: 2px; }
  .barra .criar { display: none; }
  .lugar { padding: 2px 6px; column-gap: 6px; }
  .lugar-livro { font-size: 12px; }
  .lugar-cabeca { font-size: 14px; }
  .capitulo h2 .badge { display: flex; width: max-content; margin: 12px 0 0; vertical-align: 0; }
  .capitulo h2 { font-size: clamp(31px, 7.6vw, 36px); }
  .bloco.definicao, .bloco.exemplo { padding: 18px 18px 20px; margin-inline: -4px; }
  .citacao { padding-left: 18px; }
  .estabelecido { padding: 24px 18px 10px; margin-inline: -8px; }
  .sumula li { padding-left: 50px; }
  .sumula-ico { width: 36px; height: 36px; }
  .eq { padding: 6px 0; }
  .cadeia { display: inline-grid; grid-template-columns: auto auto; justify-content: start; align-items: baseline; row-gap: .45em; text-align: left; }
  .cadeia > .elo { display: contents; }
  .cadeia .lado { justify-self: end; }
  .eq .eqnum { display: none; }
  .figura { padding: 16px 14px 18px; margin: 32px -8px; border-radius: var(--raio-5); }
  .fig-cabeca { flex-direction: column; gap: 4px; align-items: flex-start; }
  .figura.acordou.tocada .fig-cabeca .dica { opacity: 1; }
  .fig-rotulo { font-size: 12px; }
  .figura .leituras { gap: 6px; font-size: 15px; }
  .figura .leituras .leitura { padding: 0 10px; min-height: 38px; gap: 6px; }
  .figura .fig-acoes { margin-left: 0; width: 100%; }
  .chip { min-height: 40px; }
  .chip .fig-qual { display: none; }
  .bloco.exercicio { padding: 20px 16px 20px; margin-inline: -8px; border-radius: var(--raio-5); }
  .exercicio .opcao { padding: 10px 16px 10px 12px; border-radius: var(--raio-5); }
  .exercicio .resposta { gap: 10px 8px; }
  .exercicio .resposta .campo { flex: 1; min-width: 110px; }
  .exercicio .conferir { width: 100%; order: 3; }
  .exercicio .resposta .disclosure { order: 4; }
  .cap-nav { grid-template-columns: 1fr; }
  .cap-nav-item--prox { text-align: left; justify-items: start; }
  .fecho-titulo { font-size: clamp(40px, 11vw, 52px); }
  .resumo { padding: 16px 14px 14px; }
  .compor { position: fixed !important; left: 10px !important; right: 10px; top: auto !important; bottom: calc(10px + env(safe-area-inset-bottom)); width: auto !important; box-shadow: var(--elev-flutuante); animation-name: entra-cima; }
  .compor-dica { display: none; }
  .painel, .barra[data-estado="chamada"] ~ .painel { top: auto; bottom: 0; left: 0; right: 0; width: auto; z-index: 66; align-content: start; border-radius: var(--raio-cartao) var(--raio-cartao) 0 0; border-bottom: 0; padding: 12px 20px calc(20px + env(safe-area-inset-bottom)); gap: 18px; box-shadow: var(--elev-4); animation: folha-sobe var(--d-7) var(--c-desacelera) both; }
  .painel-alca { display: block; justify-self: center; width: 40px; height: 5px; border-radius: 3px; background: var(--contorno-forte); opacity: .6; margin-bottom: -4px; }
  .painel .segmento { display: none; }
  .fonte { grid-auto-flow: column; grid-template-columns: auto 1fr; align-items: center; gap: 10px; min-height: 60px; padding-right: 34px; }
  .fonte-marca { top: 50%; right: 10px; margin-top: -10px; }
  .toast { width: auto; left: 10px; right: 10px; max-width: none; bottom: calc(10px + env(safe-area-inset-bottom)); }
  .toast #toast-texto { flex: 1; }
  .rodape-chip { display: none; }
  .nota-cabeca .ib { opacity: 1; width: 40px; height: 40px; }
}
@media (pointer: coarse) {
  .btn--p { --alt: 44px; }
  .exercicio .disclosure { --alt: 44px; }
  .pop .cor { width: 44px; height: 44px; }
  .pop-acao { height: 44px; }
  .indice-sub a { min-height: 44px; }
  .volume--trilho .volume-item, .indice--trilho .indice-item { min-height: 44px; }
  .nota-cabeca .ib { width: 44px; height: 44px; opacity: 1; }
  .lista .lista-acoes .ib { width: 44px; height: 44px; }
  .toast-fechar, .toast-acao { min-height: 44px; min-width: 44px; }
  .nota-ancora { min-height: 44px; }
  .lista .trecho { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .chega *, .chega *::before, .chega *::after { animation: none !important; }
  .vivo::after { animation: none; }
  .banda::before { animation: none !important; }
  .js .bloco.tese strong { background-size: 100% .62em; transition: none; }
}