/* =====================================================================
   DecoraOAB — site institucional.

   UM tema só, o claro. A identidade é a de `marca/README.md`: uma cor, o
   bordô, sobre neutros puxados para o vinho. Nada de segunda cor de marca
   e nada de degradê do bordô: toda superfície é chapada. Verde e vermelho
   não aparecem no site fora das telas do app; as cinco cores de grande
   área só na lista da Biblioteca.

   Regra de contraste: texto escuro SÓ sobre superfície clara. Toda
   superfície vinho (procedência, coluna do PRO, fechamento, selos das
   lojas) usa exclusivamente --sobre-vinho e --sobre-vinho-suave (o rosé),
   nunca o bordô. O texto terciário (--tinta-3) só vai sobre página,
   cartão e fundo tingido — os pares que passam de 4,5:1.

   Tipografia: Bricolage Grotesque nos títulos e na palavra da marca,
   Instrument Sans no texto. Rótulo é texto pequeno em peso 600, em caixa
   normal (a classe `.mono` manteve o nome por causa das páginas geradas).

   O elemento que é só deste site: o GRIFO, o marca-texto rosé de quem
   estuda no vade-mécum. Ele aparece duas vezes e mais nenhuma: no título
   da abertura e no artigo da folha de fonte.

   Largura: o miolo vai até 1560 px, com margem lateral fluida; o texto
   corrido tem medida própria (ch), e é o número de colunas que cresce com
   a tela, não a linha.

   Preços: os do PRO aparecem em Planos, os mesmos dos painéis das lojas
   (decisão do dono em 04/11/2026). Mudou na loja, muda no site.

   O produto aparece em telas REAIS do app, capturas do iPhone de 6,9"
   (`site/img/iphone-*.webp`, de `scripts/capturas-site.mjs`), dentro de
   `.aparelho`: a moldura do iPhone em CSS, na proporção certa da tela
   (1320:2868), com aro, ilha, botões, barra de status e indicador de
   início. Tudo sai de `--l`, a largura do aparelho.

   Sem seção fixa (sticky/pinned): só o topo acompanha a rolagem, que é a
   do navegador; os links do menu caem no lugar (scroll-margin-top).

   Movimento (movimento.js, anime.js): as notas da abertura se desenham,
   o card da demonstração vira e é arrastado, a régua de exames se marca e
   a curva da lembrança se desenha. Só as notas da abertura e o grifo do
   título nascem no estado inicial (classe `js`), e voltam sozinhos em
   2,5 s se o script não chegar; o resto o script prepara ao carregar.
   ===================================================================== */

:root {
  color-scheme: light only;

  /* A paleta clara de marca/README.md, com os nomes de lá. */
  --pagina: #FAF7F7;
  --papel: #FFFFFF;
  --fundo-marca: #FFF0F3;        /* fundo tingido: a trilha */
  --tinta-marca: #F3EAEE;        /* o bordô a 9% no branco */
  --tinta-forte: #E7D4DC;        /* o bordô a 18% no branco */
  --marca-diluida: #DABDC9;      /* o cartão de trás do símbolo */
  --fio: #EDE8EA;
  --fio-forte: #E2D9DC;
  --marca: #7B123D;
  --marca-press: #690F33;
  --marca-texto: #721138;
  --vinho: #4A1025;              /* o fundo da marca */
  --tinta: #271C20;
  --tinta-2: #6B5A60;
  --tinta-3: #7C6B71;
  --sobre-marca: #FFFFFF;
  --sobre-vinho: #FDF3F5;
  --sobre-vinho-suave: #F2ABBD;
  --fio-vinho: rgba(253, 243, 245, 0.18);
  --grifo: #F4C3D1;              /* o marca-texto: rosé, claro o bastante para a tinta por cima */

  /* Grandes áreas (marca/README.md): `solida` na marca, `texto` no nome. */
  --etica: #9365BA;    --etica-texto: #724992;
  --publico: #3F69BA;  --publico-texto: #2B4F93;
  --civil: #0091B0;    --civil-texto: #006D88;
  --penal: #C08310;    --penal-texto: #966100;
  --trabalho: #597000; --trabalho-texto: #415500;

  /* O iPhone: aro de titânio escuro, borda preta da tela. */
  --aro-1: #4B4448;
  --aro-2: #221D1F;
  --aro-3: #37302F;
  --borda-tela: #0A0809;
  --sombra-aparelho: 0 2px 6px rgba(39, 28, 32, 0.14), 0 22px 44px -12px rgba(39, 28, 32, 0.28), 0 60px 90px -40px rgba(39, 28, 32, 0.35);
  --sombra-leve: 0 1px 2px rgba(74, 16, 37, 0.05), 0 8px 24px rgba(74, 16, 37, 0.07);

  --r-md: 14px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px;

  --display: "Bricolage Grotesque", "Instrument Sans", -apple-system, sans-serif;
  --texto: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --largura: 1560px;
  --pad-x: clamp(16px, 4.5vw, 80px);
  --topo-altura: 68px;
  --secao-y: clamp(72px, 8vw, 136px);
  --vao: clamp(36px, 5vw, 104px);   /* entre as colunas de uma seção */
  --suave: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ───────────────────────────── Base ───────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--pagina); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--pagina);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 600; line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd, figure { margin: 0; }
img { max-width: 100%; height: auto; }
strong { font-weight: 600; }
button { font: inherit; color: inherit; }
.mono { font-size: 14px; font-weight: 600; color: var(--tinta-3); }
.kicker { margin-bottom: 12px; color: var(--marca-texto); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pular { position: absolute; left: -9999px; top: 12px; z-index: 100; background: var(--marca); color: var(--sobre-marca); padding: 12px 20px; border-radius: var(--r-md); }
.pular:focus { left: 16px; }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 3px; border-radius: 6px; }
.secao-vinho :focus-visible, .fechamento :focus-visible { outline-color: var(--sobre-vinho); }

/* Os links do menu caem logo abaixo do topo, em qualquer seção. */
[id] { scroll-margin-top: calc(var(--topo-altura) + 8px); }

.miolo { width: min(100% - 2 * var(--pad-x), var(--largura)); margin-inline: auto; }
.titulo { font-size: clamp(32px, 3.5vw, 54px); max-width: 20ch; }
.lead { font-size: clamp(17.5px, 1.35vw, 20.5px); line-height: 1.55; color: var(--tinta-2); max-width: 54ch; }
.titulo + .lead { margin-top: 18px; }

/* O grifo: uma faixa rosé na metade de baixo da linha, como marca-texto.
   Em várias linhas, a faixa corre de uma linha para a outra (o fundo de
   um inline quebrado é um só). */
.grifo {
  background-image: linear-gradient(var(--grifo), var(--grifo));
  background-repeat: no-repeat;
  background-position: 0 86%;
  background-size: 100% 0.4em;
  padding: 0 0.04em;
}

/* ───────────────────────────── Topo ───────────────────────────── */

.topo { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--topo-altura); background: rgba(250, 247, 247, 0.9); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); transition: box-shadow 200ms; }
.topo-compacto { box-shadow: 0 1px 0 var(--fio-forte); }
.topo-faixa { position: relative; width: min(100% - 2 * var(--pad-x), var(--largura)); height: 100%; margin: 0 auto; display: flex; align-items: center; gap: 32px; }

/* A marca: o símbolo solto (dois cartões e o §) e a palavra, que aqui é
   texto vivo na Bricolage Grotesque 600, corpo óptico 96, tracking −1,5%:
   "Decora" na tinta, "OAB" no bordô. As proporções são as de
   `marca/final/decoraoab-lockup.svg`: o símbolo tem 0,99 do corpo, o vão
   até a palavra é 0,16 e o cartão da frente desce 0,086 abaixo da
   baseline (o `top` do símbolo). */
.marca { display: inline-flex; align-items: baseline; gap: 0.16em; font-family: var(--display); font-weight: 600; font-size: 22px; font-variation-settings: "opsz" 96; letter-spacing: -0.015em; line-height: 1; color: var(--tinta); }
.marca-simbolo { position: relative; top: 0.086em; height: 0.992em; width: auto; flex: none; overflow: visible; }
.simbolo-tras { fill: var(--marca-diluida); }
.simbolo-frente { fill: var(--marca); }
.simbolo-sinal { fill: none; stroke: #FFFFFF; stroke-width: 5.78; stroke-linecap: round; stroke-linejoin: round; }
.marca-oab { color: var(--marca); }

.menu { display: flex; gap: 28px; margin-left: auto; font-weight: 500; font-size: 15px; color: var(--tinta-2); }
.menu a { position: relative; padding: 8px 0; white-space: nowrap; transition: color 160ms; }
.menu a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 1px; background: var(--marca); transform: scaleX(0); transform-origin: 0 50%; transition: transform 220ms var(--suave); }
.menu a:hover, .menu a.ativo { color: var(--tinta); }
.menu a:hover::after, .menu a.ativo::after { transform: scaleX(1); }

/* O menu do celular: <details>, sem script. O botão tem 44 px de alvo. */
.menu-movel { display: none; }
.menu-movel summary { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; border-radius: 12px; cursor: pointer; list-style: none; }
.menu-movel summary::-webkit-details-marker { display: none; }
.menu-movel-icone, .menu-movel-icone::before, .menu-movel-icone::after { display: block; width: 20px; height: 2px; border-radius: 1px; background: var(--tinta); transition: transform 200ms; }
.menu-movel-icone { position: relative; }
.menu-movel-icone::before, .menu-movel-icone::after { content: ""; position: absolute; left: 0; }
.menu-movel-icone::before { top: -6px; }
.menu-movel-icone::after { top: 6px; }
.menu-movel[open] .menu-movel-icone { background: transparent; }
.menu-movel[open] .menu-movel-icone::before { transform: translateY(6px) rotate(45deg); }
.menu-movel[open] .menu-movel-icone::after { transform: translateY(-6px) rotate(-45deg); }
.menu-movel-lista { position: absolute; top: 100%; left: calc(-1 * var(--pad-x)); right: calc(-1 * var(--pad-x)); display: grid; padding: 6px var(--pad-x) 14px; background: var(--pagina); box-shadow: 0 1px 0 var(--fio-forte), 0 24px 40px rgba(74, 16, 37, 0.10); }
.menu-movel-lista a { padding: 13px 0; font-weight: 500; border-bottom: 1px solid var(--fio); }
.menu-movel-lista a:last-child { border-bottom: 0; }

/* ───────────────────────────── Botões ───────────────────────────── */

.btn { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 22px; border-radius: var(--r-pill); font-weight: 600; font-size: 15px; white-space: nowrap; transition: background-color 160ms, transform 160ms; }
.btn:active { transform: scale(0.97); }
.btn-marca { background: var(--marca); color: var(--sobre-marca); }
.btn-marca:hover { background: var(--marca-press); }
.btn-topo { height: 40px; padding: 0 18px; font-size: 14px; }

/* Os selos das lojas. `.loja` é o selo; em <a> (quando o app estiver
   publicado) ele ganha o hover. `.loja-breve` é o estado de hoje: um
   <span>, sem link e sem gesto de toque. Vinho com texto claro. */
.lojas { display: flex; flex-wrap: wrap; gap: 12px; }
.loja { display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 20px 0 15px; border-radius: 14px; background: var(--vinho); color: var(--sobre-vinho); }
a.loja { transition: transform 160ms; }
a.loja:hover { transform: translateY(-2px); }
a.loja:active { transform: scale(0.97); }
.loja-breve { cursor: default; }
.loja-icone { width: 24px; height: 24px; fill: currentColor; }
.loja-txt { display: flex; flex-direction: column; line-height: 1.12; }
.loja-txt small { font-size: 11.5px; color: var(--sobre-vinho-suave); }
.loja-txt strong { font-size: 16.5px; }

/* ───────────────────────────── Aparelho ─────────────────────────────
   O iPhone de 6,9", em pé. Medidas do aparelho real em fração da largura
   `--l`: borda de 3,08% em volta da tela (o aro de titânio e a borda
   preta), o que dá ao corpo a razão 1 : 2,1005 e deixa a tela em
   1320:2868 exatos. Raio de fora 16,3% × 7,76%; da tela, 14,09% × 6,49%
   (os 62 pt do canto do iPhone sobre 440 pt de largura). A ilha, a barra
   de status e o indicador de início usam `cqw`, a largura da tela. */
.aparelho {
  --l: 300px;
  position: relative; flex: none;
  width: var(--l); aspect-ratio: 1 / 2.1005;
  padding: calc(var(--l) * 0.0308);
  border-radius: 16.3% / 7.76%;
  background: linear-gradient(140deg, var(--aro-1) 0%, var(--aro-2) 38%, var(--aro-3) 72%, var(--aro-2) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    inset 0 0 0 calc(var(--l) * 0.012) rgba(0, 0, 0, 0.18),
    var(--sombra-aparelho);
}
/* Os botões: ação e volume à esquerda (cópias pela sombra), o lateral à
   direita. */
.aparelho::before, .aparelho::after { content: ""; position: absolute; width: calc(var(--l) * 0.011); border-radius: 2px; background: var(--aro-2); }
.aparelho::before { left: calc(var(--l) * -0.008); top: 17.5%; height: 4.5%; box-shadow: 0 calc(var(--l) * 0.16) 0 0 var(--aro-2), 0 calc(var(--l) * 0.31) 0 0 var(--aro-2); }
.aparelho::after { right: calc(var(--l) * -0.008); top: 27%; height: 11%; }
.aparelho-tela {
  position: relative; height: 100%; overflow: hidden; container-type: inline-size;
  border-radius: 14.09% / 6.49%;
  background: #FAF8F7;
  box-shadow: 0 0 0 calc(var(--l) * 0.014) var(--borda-tela);
}
.aparelho-tela > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ios-barra {
  position: absolute; left: 0; right: 0; top: 0; height: 13.6cqw;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.6cqw 8.2cqw 0 11.4cqw; color: #111; pointer-events: none;
}
.ios-hora { font-family: -apple-system, "SF Pro Text", var(--texto); font-size: 4cqw; font-weight: 600; letter-spacing: -0.01em; line-height: 1; font-variant-numeric: tabular-nums; }
.ios-ilha { position: absolute; left: 50%; top: 2.55cqw; width: 28.6cqw; height: 8.5cqw; margin-left: -14.3cqw; border-radius: 999px; background: #050405; }
.ios-icones { width: 16.4cqw; height: auto; fill: currentColor; }
.ios-inicio { position: absolute; left: 50%; bottom: 1.9cqw; width: 31.8cqw; height: 1.15cqw; margin-left: -15.9cqw; border-radius: 999px; background: #111; opacity: 0.9; pointer-events: none; }

/* ───────────────────────────── Abertura ─────────────────────────────
   O texto à esquerda; à direita o verso de um card, anotado à margem. */

.abertura { padding: calc(var(--topo-altura) + clamp(40px, 5.5vw, 96px)) 0 clamp(56px, 6vw, 104px); }
.abertura-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.sobretitulo { margin-bottom: 20px; font-size: 16px; font-weight: 600; color: var(--marca-texto); }
.titulo-abertura { font-size: clamp(42px, 5.1vw, 84px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; max-width: 14ch; }
.abertura-texto .lead { margin: 28px 0 34px; max-width: 46ch; }
.nota { margin-top: 18px; font-size: 15px; color: var(--tinta-2); }

/* O card anotado. As notas ficam à direita do aparelho; cada uma tem a
   altura do ponto que aponta (em % da altura do aparelho, medida nos
   pixels da captura) e um fio até o número sobre a borda do card. */
.anotado { --lf: clamp(270px, 24vw, 400px); --fio: clamp(28px, 2.6vw, 52px); position: relative; display: grid; grid-template-columns: var(--lf) minmax(0, 1fr); justify-self: center; width: 100%; max-width: calc(var(--lf) + 420px); }
.aparelho-abertura { --l: var(--lf); }
.alvo { --t: calc(var(--lf) * 0.078); position: absolute; left: 91%; z-index: 2; display: grid; place-items: center; width: var(--t); height: var(--t); margin: calc(var(--t) / -2) 0 0 calc(var(--t) / -2); border-radius: 50%; background: var(--marca); color: var(--sobre-marca); font-size: calc(var(--t) * 0.52); font-weight: 600; line-height: 1; box-shadow: 0 0 0 2px #FFFFFF, 0 4px 10px rgba(74, 16, 37, 0.3); }
.alvo-1, .nota-1 { top: 30.9%; }
.alvo-2, .nota-2 { top: 48.1%; }
.alvo-3, .nota-3 { top: 60%; }
.alvo-4, .nota-4 { top: 81.9%; }
.notas-legenda { position: relative; }
.notas { position: absolute; inset: 0; }
.nota-card { position: absolute; left: 0; right: 0; display: flex; align-items: center; transform: translateY(-50%); }
.nota-fio { order: -1; flex: none; width: calc(var(--lf) * 0.051 + var(--fio)); margin-left: calc(var(--lf) * -0.051); height: 1.5px; background: var(--marca); transform-origin: 0 50%; }
.nota-n { display: none; }
.nota-texto { padding-left: 14px; font-size: 16px; line-height: 1.4; color: var(--tinta-2); max-width: 27ch; }
.nota-texto strong { color: var(--tinta); }

/* ───────────────────────────── Números ───────────────────────────── */

.numeros { background: var(--papel); box-shadow: inset 0 1px 0 var(--fio-forte), inset 0 -1px 0 var(--fio-forte); }
.numeros-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.numeros-grade > div { padding: clamp(28px, 3.2vw, 48px) clamp(18px, 2.4vw, 40px); border-left: 1px solid var(--fio-forte); }
.numeros-grade > div:first-child { padding-left: 0; border-left: 0; }
.numeros-grade > div:last-child { padding-right: 0; }
.numeros dt { font-family: var(--display); font-size: clamp(36px, 3.6vw, 56px); font-weight: 700; letter-spacing: -0.035em; line-height: 1; color: var(--marca); font-variant-numeric: tabular-nums; }
.numeros dd { margin-top: 12px; font-size: 15.5px; line-height: 1.45; color: var(--tinta-2); max-width: 30ch; }
.numeros dd strong { color: var(--tinta); }

/* ───────────────────────────── Seções ───────────────────────────── */

.secao { padding: var(--secao-y) 0; }
.secao-papel { background: var(--papel); box-shadow: inset 0 1px 0 var(--fio-forte), inset 0 -1px 0 var(--fio-forte); }
.secao-tingida { background: var(--fundo-marca); }
/* O fundo da marca, chapado. Todo texto aqui é claro. */
.secao-vinho { background: var(--vinho); color: var(--sobre-vinho); }
.secao-vinho .lead { color: var(--sobre-vinho); }

/* Como funciona: os passos, o aparelho da demonstração e a volta do card. */
.metodo-grade { display: grid; grid-template-columns: minmax(0, 1.05fr) auto minmax(0, 0.95fr); gap: var(--vao); align-items: center; }
.passos { margin-top: clamp(28px, 3vw, 44px); display: grid; gap: 10px; }
.passo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; width: 100%; padding: 18px 22px 20px 18px; text-align: left; border: 0; border-radius: var(--r-lg); background: transparent; cursor: pointer; transition: background-color 220ms, box-shadow 220ms; }
.passo:hover { background: var(--tinta-marca); }
.passo[aria-current="step"] { background: var(--papel); box-shadow: inset 0 0 0 1px var(--fio-forte), var(--sombra-leve); }
.passo-n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--marca-diluida); color: var(--marca-texto); font-family: var(--display); font-size: 17px; font-weight: 600; transition: background-color 220ms, color 220ms, box-shadow 220ms; }
.passo[aria-current="step"] .passo-n { background: var(--marca); color: var(--sobre-marca); box-shadow: none; }
.passo-corpo { display: grid; gap: 6px; padding-top: 4px; }
.passo-titulo { font-family: var(--display); font-size: 21px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--tinta); }
.passo-desc { font-size: 16px; line-height: 1.55; color: var(--tinta-2); }

.demo { justify-self: center; }
.aparelho-demo { --l: clamp(260px, 20vw, 340px); }
/* As camadas: a tela sem o card (frente ou verso) e o card, que vira
   (rotateY) e é arrastado (translate + rotate). Posição e tamanho do card
   são os da captura: 60, 414, 1200 × 2070 px em 1320 × 2868. */
.demo-base { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 420ms ease; }
.demo-base-verso { opacity: 0; }
.demo[data-passo="2"] .demo-base-verso, .demo[data-passo="3"] .demo-base-verso { opacity: 1; }
.demo-arrasto { position: absolute; left: 4.545%; top: 14.435%; width: 90.91%; height: 72.18%; perspective: 1600px; transform-origin: 50% 130%; transition: transform 820ms cubic-bezier(0.25, 0.8, 0.25, 1) 120ms; }
.demo[data-passo="3"] .demo-arrasto { transform: translateX(17%) rotate(5deg); }
.demo-card { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 760ms cubic-bezier(0.3, 0.7, 0.2, 1); }
.demo[data-passo="2"] .demo-card, .demo[data-passo="3"] .demo-card { transform: rotateY(180deg); }
.demo-face { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 6.25% / 3.62%; -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 0 1cqw 4cqw rgba(39, 28, 32, 0.10); }
.demo-verso { transform: rotateY(180deg); }
/* O dedo: um toque no meio do card (passo 1 → 2) e o arrasto (passo 3). */
.dedo { position: absolute; left: 50%; top: 50%; width: 14cqw; height: 14cqw; margin: -7cqw 0 0 -7cqw; border-radius: 50%; background: rgba(39, 28, 32, 0.16); box-shadow: inset 0 0 0 0.6cqw rgba(255, 255, 255, 0.9), 0 0 0 0.3cqw rgba(39, 28, 32, 0.18), 0 1cqw 3cqw rgba(39, 28, 32, 0.2); opacity: 0; pointer-events: none; }
.demo.tocando .dedo { animation: toque 560ms var(--suave) both; }
.demo[data-passo="3"] .dedo { left: 68%; animation: arrastar 900ms cubic-bezier(0.25, 0.8, 0.25, 1) 60ms both; }
@keyframes toque { 0% { opacity: 0; transform: scale(1.25); } 35% { opacity: 1; transform: scale(0.88); } 100% { opacity: 0; transform: scale(1); } }
@keyframes arrastar { 0% { opacity: 0; transform: translateX(-20cqw); } 18% { opacity: 1; transform: translateX(-20cqw); } 100% { opacity: 1; transform: translateX(0); } }

.volta h3 { font-size: clamp(22px, 1.8vw, 27px); }
.volta > p { margin-top: 12px; color: var(--tinta-2); max-width: 44ch; }
.curva { margin-top: 28px; padding: 22px 22px 18px; border-radius: var(--r-lg); background: var(--papel); box-shadow: inset 0 0 0 1px var(--fio-forte); }
.curva svg { display: block; width: 100%; height: auto; overflow: visible; }
.curva-eixo { stroke: var(--fio-forte); stroke-width: 1.5; }
.curva-linha { fill: none; stroke: var(--marca); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.curva-revisao { fill: var(--marca); stroke: var(--papel); stroke-width: 2.5; }
.curva-rotulo { font-family: var(--texto); font-size: 12.5px; font-weight: 500; fill: var(--tinta-3); }
.curva figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--tinta-3); }

/* Procedência: o texto e, ao lado, a folha de fonte transcrita do app. */
.procedencia-grade { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: var(--vao); align-items: center; }
.prontuario { margin-top: 40px; border-top: 1px solid var(--fio-vinho); }
.prontuario > div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 4px 24px; padding: 20px 0; border-bottom: 1px solid var(--fio-vinho); }
.prontuario dt { font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: var(--sobre-vinho-suave); }
.prontuario dd { font-size: 16.5px; line-height: 1.5; color: var(--sobre-vinho); max-width: 46ch; }

.folha { justify-self: end; width: min(100%, 640px); }
.folha-papel { padding: clamp(26px, 3.2vw, 48px); border-radius: 26px; background: #FFFDFC; color: var(--tinta); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 40px 80px -30px rgba(10, 2, 6, 0.7); }
.folha-cabeca { font-size: 15px; font-weight: 600; color: var(--tinta); }
.folha-tema { margin-top: 2px; font-size: 14.5px; color: var(--tinta-3); }
.folha-norma { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(14px, 2vw, 28px); align-items: center; margin-top: clamp(22px, 2.6vw, 36px); padding-bottom: clamp(22px, 2.6vw, 34px); border-bottom: 1px solid var(--fio-forte); }
.folha-paragrafo { font-family: var(--display); font-size: clamp(88px, 9vw, 150px); font-weight: 500; line-height: 0.8; color: var(--marca); font-variation-settings: "opsz" 96; }
.folha-rotulo { font-size: 14px; font-weight: 600; color: var(--tinta-3); }
.folha-lei { margin-top: 4px; font-family: var(--display); font-size: clamp(22px, 2vw, 30px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.folha-artigo { margin-top: 2px; font-family: var(--display); font-size: clamp(52px, 5.4vw, 88px); font-weight: 700; letter-spacing: -0.045em; line-height: 1; }
.folha-exames { margin-top: clamp(20px, 2.4vw, 30px); }

/* A régua dos exames: 2010 a 2026, cada exame no ponto do ano dele; os
   rótulos alternam em cima e embaixo para não se tocarem. */
.regua { position: relative; height: 118px; margin: 10px 8px 0; }
.regua::before { content: ""; position: absolute; left: 0; right: 0; top: 58px; height: 2px; border-radius: 1px; background: var(--tinta-forte); }
.regua-marca { position: absolute; top: 0; height: 100%; width: 0; }
.regua-marca::before { content: ""; position: absolute; left: -6px; top: 53px; width: 12px; height: 12px; border-radius: 50%; background: var(--marca); box-shadow: 0 0 0 3px #FFFDFC; }
.regua-marca > span { position: absolute; left: 0; transform: translateX(-50%); white-space: nowrap; text-align: center; }
.regua-exame { top: 0; font-size: 15px; font-weight: 600; color: var(--tinta); }
.regua-ano { top: 20px; font-size: 13px; color: var(--tinta-3); }
.regua-2011 { left: 6.25%; }
.regua-2016 { left: 37.5%; }
.regua-2023 { left: 81.25%; }
.regua-2025 { left: 93.75%; }
.regua-2026 { left: 100%; }
.regua-2016 .regua-exame, .regua-2025 .regua-exame { top: 74px; }
.regua-2016 .regua-ano, .regua-2025 .regua-ano { top: 94px; }

.regua-eixo { display: flex; justify-content: space-between; margin: 6px 8px 0; font-size: 12.5px; color: var(--tinta-3); }
.folha-pe { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--fio-forte); font-size: 15px; color: var(--tinta-2); }
.folha figcaption { margin-top: 20px; font-size: 14.5px; line-height: 1.5; color: var(--sobre-vinho-suave); max-width: 56ch; }

/* Trilha e Biblioteca: duas telas desencontradas ao lado do texto. */
.trilha-grade { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--vao); align-items: center; }
.biblioteca-grade { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--vao); align-items: center; }
.trilha-visual, .biblioteca-visual { display: flex; align-items: flex-start; gap: clamp(18px, 2vw, 36px); }
.trilha-visual .aparelho, .biblioteca-visual .aparelho { --l: clamp(220px, 17vw, 300px); }
.trilha-visual .aparelho-b, .biblioteca-visual .aparelho-a { margin-top: clamp(48px, 6vw, 110px); }
.trilha-texto .lead { max-width: 48ch; }
.fatos { margin-top: clamp(32px, 3.4vw, 52px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px clamp(24px, 3vw, 52px); }
.fatos li { padding-top: 18px; border-top: 2px solid var(--marca-diluida); }
.fatos h3 { font-size: 20px; margin-bottom: 8px; }
.fatos p { font-size: 16px; line-height: 1.55; color: var(--tinta-2); max-width: 42ch; }

.areas { margin-top: 34px; border-top: 1px solid var(--fio-forte); }
.area { --cor: var(--marca); --cor-texto: var(--marca-texto); display: grid; grid-template-columns: 7.2em minmax(0, 1fr); gap: 2px 20px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--fio-forte); }
.area h3 { position: relative; padding-left: 20px; font-size: 18.5px; color: var(--cor-texto); }
.area h3::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 10px; height: 10px; border-radius: 3px; background: var(--cor); }
.area p { font-size: 15.5px; line-height: 1.5; color: var(--tinta-2); }
.area-etica { --cor: var(--etica); --cor-texto: var(--etica-texto); }
.area-publico { --cor: var(--publico); --cor-texto: var(--publico-texto); }
.area-civil { --cor: var(--civil); --cor-texto: var(--civil-texto); }
.area-penal { --cor: var(--penal); --cor-texto: var(--penal-texto); }
.area-trabalho { --cor: var(--trabalho); --cor-texto: var(--trabalho-texto); }
.nota-acervo { margin-top: 24px; font-size: 14.5px; line-height: 1.6; color: var(--tinta-2); max-width: 80ch; }

/* Planos: uma tabela, com a coluna do PRO no vinho. Sem valor: o preço é
   o da loja e aparece na tela de compra. */
.planos-cabeca { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px var(--vao); align-items: end; }
.planos-cabeca .titulo { max-width: 18ch; }
.planos-cabeca .lead { margin-top: 0; }
.planos { width: 100%; margin-top: clamp(36px, 4vw, 56px); border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.planos th, .planos td { padding: 20px clamp(18px, 2vw, 32px); text-align: left; vertical-align: top; font-size: 16.5px; line-height: 1.5; }
.planos thead th { padding-top: 26px; padding-bottom: 14px; font-family: var(--display); font-size: clamp(24px, 2vw, 30px); font-weight: 600; letter-spacing: -0.02em; }
.planos thead td { width: 22%; }
.planos tbody th { font-family: var(--display); font-size: 18.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--tinta); padding-left: 0; }
.planos tbody td { color: var(--tinta-2); }
.planos tbody th, .planos tbody td { border-top: 1px solid var(--fio-forte); }
.planos .col-pro { background: var(--vinho); color: var(--sobre-vinho); }
.planos tbody .col-pro { border-top-color: var(--fio-vinho); }
.planos thead .col-pro { border-radius: var(--r-xl) var(--r-xl) 0 0; }
.planos tbody tr:last-child .col-pro { border-radius: 0 0 var(--r-xl) var(--r-xl); padding-bottom: 28px; }
/* Os preços do PRO, os das lojas. O número grande é o valor por mês; o
   cobrado de fato vem logo abaixo. O anual, o mais barato, no vinho. */
.precos { margin-top: clamp(44px, 4.6vw, 72px); }
.precos-titulo { font-size: clamp(24px, 2vw, 30px); }
.precos-lista { margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 22px); }
.preco { padding: clamp(20px, 2vw, 30px); border-radius: var(--r-xl); background: var(--pagina); box-shadow: inset 0 0 0 1px var(--fio-forte); }
.preco-periodo { font-size: 15.5px; font-weight: 600; color: var(--marca-texto); }
.preco-valor { margin-top: 10px; }
.preco-numero { font-family: var(--display); font-size: clamp(34px, 3.2vw, 50px); font-weight: 700; letter-spacing: -0.035em; line-height: 1; color: var(--tinta); font-variant-numeric: tabular-nums; }
.preco-numero, .preco-unidade { display: block; }
.preco-unidade { margin-top: 6px; font-size: 16px; font-weight: 500; color: var(--tinta-2); }
.preco-cobrado { margin-top: 10px; font-size: 15px; color: var(--tinta-2); }
.preco-destaque { background: var(--vinho); box-shadow: 0 24px 48px -24px rgba(74, 16, 37, 0.6); }
.preco-destaque .preco-periodo { color: var(--sobre-vinho-suave); }
.preco-destaque .preco-numero { color: #FFFFFF; }
.preco-destaque .preco-unidade, .preco-destaque .preco-cobrado { color: var(--sobre-vinho); }
.nota-planos { margin-top: 28px; font-size: 15px; color: var(--tinta-2); max-width: 82ch; }

/* Dúvidas: details/summary, que abre e fecha sem JS, em duas colunas. */
.duvidas-grade { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 2fr); gap: var(--vao); align-items: start; }
.duvidas-cabeca a, .duvidas details a, .artigo a { color: var(--marca-texto); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.duvidas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 3vw, 56px); align-items: start; }
.duvidas-coluna { border-top: 1px solid var(--fio-forte); }
.duvidas details { border-bottom: 1px solid var(--fio-forte); }
.duvidas summary { position: relative; display: block; padding: 20px 44px 20px 0; font-family: var(--display); font-size: clamp(18px, 1.35vw, 20px); font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; cursor: pointer; list-style: none; transition: color 160ms; }
.duvidas summary::-webkit-details-marker { display: none; }
.duvidas summary:hover { color: var(--marca-texto); }
/* O sinal de abrir: dois traços que viram um ao abrir. */
.duvidas summary::before, .duvidas summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 16px; height: 2px; margin-top: -1px; border-radius: 1px; background: var(--marca); transition: transform 220ms var(--suave); }
.duvidas summary::after { transform: rotate(90deg); }
.duvidas details[open] summary::after { transform: rotate(0deg); }
.duvidas details p { padding: 0 44px 22px 0; color: var(--tinta-2); max-width: 66ch; }

/* Fechamento: o vinho de ponta a ponta. Os selos aqui são claros, com o
   texto no vinho (texto escuro sobre superfície clara). */
.fechamento { padding: clamp(72px, 8vw, 128px) 0; background: var(--vinho); color: var(--sobre-vinho); }
.fechamento-grade { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--vao); align-items: end; }
.titulo-grande { font-size: clamp(38px, 5vw, 80px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; max-width: 14ch; }
.fechamento .lead { color: var(--sobre-vinho); margin-bottom: 22px; }
.fechamento .loja { background: var(--sobre-vinho); color: var(--vinho); }
.fechamento .loja-txt small { color: var(--marca-texto); }

/* 404. */
.pagina-404 { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 48px 0; text-align: center; }
.pagina-404 .miolo { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.pagina-404 .marca { font-size: 26px; margin-bottom: 20px; }
.pagina-404 .titulo-grande { color: var(--marca); max-width: none; }
.pagina-404 .kicker { margin-bottom: 0; }
.pagina-404-volta { margin-top: 10px; }
.pagina-404-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin-top: 8px; }
.pagina-404-links a:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }

/* ───────────────────────────── Rodapé ───────────────────────────── */

.rodape { padding: clamp(44px, 5vw, 64px) 0 28px; }
.rodape-faixa { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px 64px; }
.rodape-marca p { margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--tinta-2); max-width: 34ch; }
.rodape-links { display: flex; gap: clamp(40px, 7vw, 120px); font-size: 15px; font-weight: 500; color: var(--tinta-2); }
.rodape-links ul { display: grid; gap: 10px; align-content: start; }
.rodape-links a { display: inline-block; padding: 2px 0; }
.rodape-links a:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }
.rodape-base { display: flex; align-items: baseline; justify-content: space-between; gap: 32px; margin-top: clamp(32px, 4vw, 48px); padding-top: 20px; border-top: 1px solid var(--fio-forte); }
.disclaimer { font-size: 13.5px; line-height: 1.5; color: var(--tinta-3); max-width: 84ch; }
.copyright { flex: none; font-size: 13.5px; color: var(--tinta-3); }

/* ───────────────────────────── Movimento ─────────────────────────────
   Só a abertura nasce no estado inicial, e só com a classe `js`. Se o
   movimento.js não chegar a rodar (fora do ar, cache velho), tudo volta
   sozinho em 2,5 s; quando ele roda, marca `movimento-pronto` e assume. */
.js .grifo-titulo { background-size: 0% 0.4em; }
.js .nota-texto { opacity: 0; }
.js .nota-fio { transform: scaleX(0); }
.js .alvo { transform: scale(0); }
.js:not(.movimento-pronto) .grifo-titulo { animation: grifar 600ms var(--suave) 2.5s forwards; }
.js:not(.movimento-pronto) .nota-texto { animation: mostrar 400ms 2.5s forwards; }
.js:not(.movimento-pronto) .nota-fio, .js:not(.movimento-pronto) .alvo { animation: crescer 400ms 2.5s forwards; }
@keyframes grifar { to { background-size: 100% 0.4em; } }
@keyframes mostrar { to { opacity: 1; } }
@keyframes crescer { to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .grifo-titulo { background-size: 100% 0.4em; }
  .js .nota-texto { opacity: 1; }
  .js .nota-fio, .js .alvo { transform: none; }
  .js:not(.movimento-pronto) .grifo-titulo, .js:not(.movimento-pronto) .nota-texto, .js:not(.movimento-pronto) .nota-fio, .js:not(.movimento-pronto) .alvo { animation: none; }
  .demo-base, .demo-arrasto, .demo-card, .passo, .passo-n { transition: none; }
  .demo.tocando .dedo { animation: none; }
  .demo[data-passo="3"] .dedo { animation: none; opacity: 1; }
  .btn, a.loja, .menu a::after, .menu-movel-icone, .menu-movel-icone::before, .menu-movel-icone::after, .duvidas summary::before, .duvidas summary::after { transition: none; }
}

/* ───────────────────────────── Responsivo ───────────────────────────── */

@media (max-width: 1240px) {
  .metodo-grade { grid-template-columns: minmax(0, 1fr) auto; }
  .volta { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--vao); align-items: start; }
  .volta h3, .volta > p { grid-column: 1; }
  .curva { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}
@media (max-width: 1100px) {
  .menu { gap: 20px; }
  .topo-faixa { gap: 22px; }
  .numeros-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .numeros-grade > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .numeros-grade > div:nth-child(even) { padding-right: 0; }
  .numeros-grade > div:nth-child(n + 3) { border-top: 1px solid var(--fio-forte); }
  .anotado { --lf: clamp(250px, 26vw, 300px); }
  .nota-texto { font-size: 15px; }
  .duvidas-grade { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 900px) {
  .menu { display: none; }
  .menu-movel { display: block; }
  .btn-topo { margin-left: auto; }
  .topo-faixa { gap: 12px; }
  .abertura-grade, .procedencia-grade, .trilha-grade, .biblioteca-grade, .fechamento-grade, .metodo-grade, .planos-cabeca { grid-template-columns: minmax(0, 1fr); }
  /* No celular as notas viram uma lista numerada embaixo do aparelho, e o
     número fica na borda do card. */
  .anotado { --lf: clamp(240px, 64vw, 330px); grid-template-columns: minmax(0, 1fr); justify-items: center; max-width: 560px; margin-inline: auto; }
  .notas-legenda { width: 100%; }
  .notas { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; margin-top: 30px; }
  .nota-card { position: static; transform: none; align-items: flex-start; gap: 10px; }
  .nota-fio { display: none; }
  .nota-n { display: grid; flex: none; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--marca); color: var(--sobre-marca); font-size: 13px; font-weight: 600; }
  .nota-texto { padding-left: 0; font-size: 15px; }
  .metodo-texto { max-width: 640px; }
  .demo { order: 2; }
  .volta { order: 3; display: block; max-width: 640px; }
  .curva { margin-top: 24px; }
  .procedencia-texto { max-width: 640px; }
  .folha { justify-self: stretch; width: auto; max-width: 640px; }
  .trilha-visual, .biblioteca-visual { justify-content: center; }
  .trilha-visual .aparelho, .biblioteca-visual .aparelho { --l: clamp(150px, 41vw, 270px); }
  .trilha-visual { order: 2; }
  .fechamento-grade { align-items: start; }
}
@media (max-width: 720px) {
  .fatos { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .precos-lista { grid-template-columns: minmax(0, 1fr); }
  .duvidas { grid-template-columns: minmax(0, 1fr); }
  .duvidas-coluna + .duvidas-coluna { border-top: 0; }
  .rodape-faixa, .rodape-base { flex-direction: column; align-items: flex-start; }
  .rodape-base { gap: 14px; }
  .duvidas summary { padding-right: 36px; }
  .duvidas details p { padding-right: 0; }
  .prontuario > div, .area { grid-template-columns: minmax(0, 1fr); }
  /* A tabela de planos vira uma lista: o recurso em cima, Grátis e PRO
     lado a lado. */
  .planos, .planos thead, .planos tbody { display: block; }
  .planos tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 10px; }
  .planos thead td { display: none; }
  .planos thead th { padding: 10px 14px; font-size: 22px; }
  .planos thead .col-pro { border-radius: var(--r-md); }
  .planos tbody th { grid-column: 1 / -1; padding: 20px 0 8px; font-size: 17.5px; border-top: 0; }
  .planos tbody td { padding: 12px 14px; font-size: 15px; border-top: 0; border-radius: var(--r-md); }
  .planos tbody td:not(.col-pro) { background: var(--pagina); box-shadow: inset 0 0 0 1px var(--fio-forte); }
  .planos tbody tr:last-child .col-pro { border-radius: var(--r-md); padding-bottom: 12px; }
}
@media (max-width: 560px) {
  .notas { grid-template-columns: minmax(0, 1fr); }
  /* A régua não cabe: vira lista de exame e ano. */
  .regua { height: auto; margin: 12px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
  .regua::before, .regua-marca::before { display: none; }
  .regua-marca { position: relative; left: auto; width: auto; height: auto; display: flex; align-items: baseline; gap: 8px; padding-left: 16px; }
  .regua-marca > span, .regua-2025 > span, .regua-2026 > span { position: static; transform: none; }
  .regua-marca::after { content: ""; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; border-radius: 50%; background: var(--marca); }
  .regua-eixo { display: none; }
}
@media (max-width: 480px) {
  .numeros-grade { grid-template-columns: minmax(0, 1fr); }
  .numeros-grade > div { display: grid; grid-template-columns: 7.2em minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 20px 0; border-left: 0; }
  .numeros-grade > div:nth-child(n + 2) { border-top: 1px solid var(--fio-forte); }
  .numeros dt { font-size: 30px; }
  .numeros dd { margin-top: 0; }
  .loja { height: 52px; padding: 0 15px 0 12px; }
  .loja-txt strong { font-size: 15.5px; }
  .btn-topo { padding: 0 15px; }
  .passo { padding: 16px 14px 18px 12px; gap: 12px; }
}

/* ─────────────── Página de texto: termos, política, exclusão ───────────────
   Gerada por scripts/politica-site.mjs. Medida de leitura (72ch), títulos
   de seção menores que o da página e o topo já compacto (não há JS lá). */
.pagina-texto { padding: calc(var(--topo-altura) + clamp(40px, 6vw, 80px)) 0 var(--secao-y); }
.artigo { max-width: 72ch; }
.artigo .titulo { max-width: none; }
.artigo-data { margin-top: 18px; }
.artigo .lead { margin-top: 22px; max-width: none; }
.artigo h2 { font-size: clamp(21px, 2vw, 26px); margin-top: 44px; }
.artigo h2 + p, .artigo p + p { margin-top: 12px; }