/* Conceito: uma casa de método à noite, com petróleo profundo, ouro de gravura e salas de pergaminho onde se lê a ciência.
   Família PAPYRO: papel 60 · marinho 30 · ouro 10. Branco óptico proibido: o "branco" é o pólen. */
:root {
  --noite: #020e18;
  --noite-veludo: #041522;
  --petroleo: #09202e;
  --petroleo-veludo: #0c2839;
  --petroleo-suave: #15394f;
  --ouro: #d9b06e;
  --ouro-suave: #c39757;
  --ouro-velho: #8a6f3a;
  --ouro-tinta: #7d5420;
  --champanhe: #dec4a0;
  --polen: #ead8bb;
  --polen-claro: #f1e4cf;
  --polen-cartao: #f0e2c8;
  --tinta: #33291e;
  --tinta-suave: #62533f;
  --nevoa: #b7ab96;
  --linha: rgba(217, 176, 110, 0.18);
  --linha-forte: rgba(217, 176, 110, 0.38);
  --fio: rgba(110, 71, 26, 0.18);
  --fio-forte: rgba(110, 71, 26, 0.34);
  --vidro: rgba(7, 25, 42, 0.66);
  --ramo-vermelho: #d8102a;
  --ramo-laranja: #ff7a00;
  --ramo-azul: #2a8ab5;

  --display: "Cormorant", "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --marca: "Caladea", Cambria, Georgia, serif;
  --texto: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;

  --t-hero: clamp(3rem, 1.7rem + 5.2vw, 6.6rem);
  --t-h2: clamp(2.35rem, 1.5rem + 3.3vw, 4.5rem);
  --t-lead: clamp(1.06rem, 1rem + 0.32vw, 1.25rem);
  --t-small: 0.875rem;
  --t-eyebrow: 0.76rem;

  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  --secao: clamp(88px, 5.5rem + 4vw, 168px);
  --largura: 1240px;
  --raio: 18px;
  --raio-sm: 12px;
  --topo-h: 78px;

  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: calc(var(--topo-h) + 12px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--noite);
  color: var(--polen-claro);
  font-family: var(--texto);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--ouro); color: var(--noite); }
:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul.limpa, ol.limpa { list-style: none; margin: 0; padding: 0; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.envelope {
  width: 100%;
  max-width: calc(var(--largura) + var(--gutter) + var(--gutter-r));
  margin-inline: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter-r);
}
.secao { position: relative; padding-block: var(--secao); isolation: isolate; }

/* grão sobre tudo, quase invisível */
.grao {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- tipografia de vitrine ---------- */
.sobrelinha {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--marca); font-size: var(--t-eyebrow); letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--ouro);
}
.sobrelinha::before { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, currentColor); }
.titulo { font-family: var(--display); font-size: var(--t-h2); line-height: 1.02; letter-spacing: -0.012em; }
.titulo em, .heroi h1 em { color: var(--ouro); font-weight: 500; }
.lead { font-size: var(--t-lead); line-height: 1.62; color: var(--nevoa); max-width: 60ch; }
.cabeca { display: grid; gap: 22px; max-width: 840px; margin-bottom: clamp(48px, 5vw, 80px); }
.cabeca.centro { margin-inline: auto; text-align: center; justify-items: center; }
.cabeca.centro .sobrelinha::after { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, currentColor, transparent); }

.florao { display: flex; align-items: center; gap: 18px; color: var(--ouro-suave); margin-block: clamp(64px, 7vw, 120px); }
.florao::before, .florao::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--linha-forte), transparent); }
.florao i { width: 150px; height: 18px; flex: none; }

/* gravura (traço preto sobre transparente) usada como máscara, na cor da sala; a imagem vem no style do elemento */
.gravura {
  background: currentColor;
  -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat;
  mask-position: center; mask-size: contain; mask-repeat: no-repeat;
}

/* ---------- botões ---------- */
.botao {
  --h: 54px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--h); padding-inline: 26px; border-radius: var(--raio-sm); border: 0;
  font: 650 0.97rem/1 var(--texto); letter-spacing: 0.005em; text-decoration: none; cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease;
  overflow: hidden; white-space: nowrap;
}
.botao svg { width: 18px; height: 18px; flex: none; transition: transform 0.25s ease; }
.botao:hover svg { transform: translateX(3px); }
.botao-ouro {
  color: #1d1408;
  background: linear-gradient(180deg, #ecca8a 0%, var(--ouro) 46%, var(--ouro-suave) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 244, 214, 0.75), inset 0 -1px 0 rgba(95, 73, 36, 0.5), 0 10px 30px -10px rgba(217, 176, 110, 0.55);
}
.botao-ouro::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 244, 214, 0.6), transparent);
  transition: transform 0.75s ease;
}
.botao-ouro:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 244, 214, 0.75), inset 0 -1px 0 rgba(95, 73, 36, 0.5), 0 18px 40px -12px rgba(217, 176, 110, 0.7); }
.botao-ouro:hover::after { transform: translateX(120%) skewX(-18deg); }
.botao-linha { color: var(--champanhe); background: rgba(217, 176, 110, 0.04); box-shadow: inset 0 0 0 1px var(--linha-forte); }
.botao-linha:hover { background: rgba(217, 176, 110, 0.1); color: var(--polen-claro); }
.botao-sm { --h: 42px; padding-inline: 18px; font-size: 0.9rem; }

/* ---------- cabeçalho ---------- */
.topo {
  position: fixed; inset: 0 0 auto; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  transition: background-color 0.35s ease, box-shadow 0.35s ease;
}
.topo.is-rolado { background: rgba(2, 14, 24, 0.8); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 1px 0 var(--linha); }
.topo .envelope { display: flex; align-items: center; gap: 24px; height: var(--topo-h); }
.marca { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.marca img { width: 40px; height: 40px; object-fit: contain; }
.marca span { font-family: var(--marca); font-size: 1.12rem; letter-spacing: 0.34em; color: var(--polen-claro); padding-left: 0.1em; }
.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a { padding: 10px 13px; border-radius: 10px; text-decoration: none; font-size: 0.92rem; color: var(--nevoa); transition: color 0.2s ease, background-color 0.2s ease; }
.nav a:hover { color: var(--polen-claro); background: rgba(217, 176, 110, 0.07); }
.topo-acoes { display: flex; align-items: center; gap: 8px; }
.entrar { font-size: 0.92rem; color: var(--champanhe); text-decoration: none; padding: 10px 12px; }
.entrar:hover { color: var(--polen-claro); }
.menu-btn { display: none; width: 44px; height: 44px; place-items: center; border-radius: 12px; border: 0; background: rgba(217, 176, 110, 0.08); color: var(--polen-claro); cursor: pointer; }
.menu-btn svg { width: 22px; height: 22px; }
@media (max-width: 1060px) {
  .nav, .topo-acoes .entrar { display: none; }
  .menu-btn { display: grid; }
  .topo-acoes { margin-left: auto; }
  .topo.is-aberto { background: rgba(2, 14, 24, 0.97); }
  .topo.is-aberto .nav {
    display: grid; position: absolute; top: 100%; left: 0; right: 0; gap: 2px;
    padding: 8px var(--gutter-r) 24px var(--gutter); background: rgba(2, 14, 24, 0.97); box-shadow: 0 1px 0 var(--linha);
  }
  .topo.is-aberto .nav a { font-size: 1.05rem; padding: 14px 8px; }
}
@media (max-width: 480px) { .topo-acoes .botao { display: none; } }

/* ---------- herói ---------- */
.heroi { position: relative; padding-top: calc(var(--topo-h) + clamp(36px, 5vw, 88px)); padding-bottom: clamp(64px, 6vw, 112px); overflow: hidden; isolation: isolate; }
.heroi::before {
  content: ""; position: absolute; z-index: -1; width: 1200px; height: 1200px; right: -300px; top: -280px;
  background: radial-gradient(closest-side, rgba(217, 176, 110, 0.15), rgba(21, 57, 79, 0.28) 45%, transparent 72%);
}
.heroi::after { content: ""; position: absolute; z-index: -1; inset: auto 0 0; height: 220px; background: linear-gradient(180deg, transparent, var(--noite)); }
.heroi-grade { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 4vw, 72px); }
.heroi-texto { display: grid; gap: 28px; justify-items: start; }
.heroi h1 { font-family: var(--display); font-size: var(--t-hero); line-height: 0.95; letter-spacing: -0.022em; }
.heroi h1 .linha { display: block; }
.heroi .lead { max-width: 52ch; }
.heroi-acoes { display: flex; flex-wrap: wrap; gap: 14px; }
.selos { display: flex; flex-wrap: wrap; gap: 10px 24px; padding-top: 6px; font-size: var(--t-small); color: var(--nevoa); }
.selos li { display: inline-flex; align-items: center; gap: 9px; }
.selos svg { width: 17px; height: 17px; color: var(--ouro); flex: none; }

.palco { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 600px; justify-self: end; }
.palco-aneis { position: absolute; inset: 0; color: var(--ouro); opacity: 0.5; animation: girar 160s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.palco canvas { position: absolute; inset: 9%; width: 82%; height: 82%; cursor: pointer; touch-action: pan-y; }
.fases {
  position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); display: flex; gap: 4px; padding: 5px;
  border-radius: 999px; background: var(--vidro); box-shadow: inset 0 0 0 1px var(--linha);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.fases button {
  display: inline-flex; align-items: baseline; gap: 8px; padding: 9px 16px; border: 0; border-radius: 999px; background: transparent;
  color: var(--nevoa); font: 600 0.84rem/1 var(--texto); cursor: pointer; transition: background-color 0.35s ease, color 0.35s ease;
}
.fases button b { font-family: var(--marca); font-weight: 400; font-size: 0.74rem; letter-spacing: 0.1em; color: var(--ouro-suave); }
.fases button.is-on { background: rgba(217, 176, 110, 0.16); color: var(--polen-claro); }
@media (max-width: 920px) {
  .heroi-grade { grid-template-columns: 1fr; }
  .palco { justify-self: center; max-width: 500px; order: -1; }
}
@media (max-width: 440px) { .fases button { padding: 9px 11px; } }
@media (prefers-reduced-motion: reduce) { .palco-aneis { animation: none; } }

/* ---------- faixa de áreas ---------- */
.faixa { border-block: 1px solid var(--linha); background: var(--noite-veludo); overflow: hidden; }
.faixa-trilho { display: flex; width: max-content; padding-block: 20px; animation: correr 56s linear infinite; }
.faixa:hover .faixa-trilho { animation-play-state: paused; }
@keyframes correr { to { transform: translateX(-50%); } }
.faixa-trilho span { display: inline-flex; align-items: center; gap: 44px; padding-right: 44px; font-family: var(--display); font-size: 1.45rem; font-style: italic; color: var(--champanhe); white-space: nowrap; }
.faixa-trilho span::after { content: "✦"; font-style: normal; font-size: 0.7rem; color: var(--ouro-velho); }
@media (prefers-reduced-motion: reduce) { .faixa-trilho { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } }

/* ======================================================================
   Salas de pergaminho
   ====================================================================== */
.papel {
  color: var(--tinta);
  background:
    radial-gradient(1200px 520px at 12% 0%, rgba(250, 240, 218, 0.6), transparent 60%),
    radial-gradient(900px 640px at 100% 100%, rgba(158, 108, 44, 0.13), transparent 60%),
    var(--polen);
}
.papel::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.4; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .43 0 0 0 0 .3 0 0 0 0 .15 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}
.papel .titulo { color: var(--tinta); }
.papel .titulo em { color: var(--ouro-tinta); }
.papel .sobrelinha { color: var(--ouro-tinta); }
.papel .lead { color: var(--tinta-suave); }
.papel .florao { color: var(--ouro-tinta); }
.papel .florao::before, .papel .florao::after { background: linear-gradient(90deg, transparent, var(--fio-forte), transparent); }
.papel .botao-linha { color: var(--tinta); background: transparent; box-shadow: inset 0 0 0 1px var(--fio-forte); }
.papel .botao-linha:hover { background: rgba(110, 71, 26, 0.07); color: var(--tinta); }

/* ======================================================================
   A curva do esquecimento
   ====================================================================== */
.curva-grade { display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); gap: clamp(36px, 5vw, 88px); align-items: center; }
.curva-texto { display: grid; gap: 26px; }
.citacao { font-family: var(--display); font-size: clamp(1.32rem, 1.1rem + 0.8vw, 1.72rem); line-height: 1.32; font-style: italic; color: var(--tinta); border-left: 2px solid var(--ouro-tinta); padding-left: 22px; }
.citacao small { display: block; margin-top: 10px; font: 500 var(--t-small)/1.4 var(--texto); font-style: normal; color: var(--tinta-suave); }
.grafico { padding: clamp(18px, 2.4vw, 32px); border-radius: var(--raio); background: rgba(250, 240, 218, 0.55); box-shadow: inset 0 0 0 1px var(--fio), 0 30px 60px -40px rgba(51, 41, 30, 0.45); min-width: 0; }
.grafico-rolagem { overflow-x: auto; }
.grafico svg { width: 100%; min-width: 520px; height: auto; }
.grafico .eixo { stroke: var(--fio-forte); stroke-width: 1; }
.grafico .grade { stroke: var(--fio); stroke-width: 1; stroke-dasharray: 2 5; }
.grafico .rotulo { fill: var(--tinta-suave); font: 500 11px var(--texto); }
.grafico .rotulo-v { fill: var(--tinta); font: 700 11.5px var(--texto); }
.grafico .rotulo-trilho { fill: var(--ouro-tinta); font: 700 10.5px var(--texto); letter-spacing: 0.08em; }
.grafico .curva { fill: none; stroke: var(--tinta); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.grafico .ponto { fill: var(--polen); stroke: var(--tinta); stroke-width: 2; }
.grafico .trilho { stroke: var(--ouro-tinta); stroke-width: 1.4; stroke-dasharray: 3 4; }
.grafico .rev { fill: var(--ouro-tinta); }
.grafico .rev-guia { stroke: var(--ouro-tinta); stroke-width: 1; stroke-dasharray: 1 4; opacity: 0.6; }
.legenda { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; font-size: 0.82rem; color: var(--tinta-suave); }
.legenda span { display: inline-flex; align-items: center; gap: 8px; }
.legenda i { width: 22px; height: 0; border-top: 2px solid var(--tinta); }
.legenda i.losango { width: 9px; height: 9px; border: 0; background: var(--ouro-tinta); transform: rotate(45deg); }
.fonte { margin-top: 8px; font-size: 0.75rem; color: var(--tinta-suave); }
.js .grafico .curva { stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 2.4s cubic-bezier(0.4, 0, 0.2, 1); }
.js .grafico .ponto, .js .grafico .rotulo-v { opacity: 0; transition: opacity 0.5s ease; }
.js .grafico .rev { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.3) rotate(45deg); transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); }
.js .grafico.is-visto .curva { stroke-dashoffset: 0; }
.js .grafico.is-visto .ponto, .js .grafico.is-visto .rotulo-v { opacity: 1; }
.js .grafico.is-visto .rev { opacity: 1; transform: rotate(45deg); }
@media (max-width: 920px) { .curva-grade { grid-template-columns: 1fr; } }

/* ======================================================================
   Dois motores: as duas portas em arco
   ====================================================================== */
.portas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 36px); }
.porta {
  position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden; isolation: isolate;
  border-radius: 320px 320px var(--raio) var(--raio) / 260px 260px var(--raio) var(--raio);
  background: linear-gradient(180deg, var(--petroleo-veludo), var(--noite-veludo) 70%);
  box-shadow: inset 0 0 0 1px var(--linha-forte), 0 40px 80px -46px rgba(2, 14, 24, 0.85);
  color: var(--polen-claro);
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.55s ease;
}
.porta:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px var(--ouro-suave), 0 54px 90px -50px rgba(2, 14, 24, 0.95); }
.porta-vista { position: relative; aspect-ratio: 5 / 4; overflow: hidden; margin: 12px 12px 0; border-radius: 310px 310px 8px 8px / 250px 250px 8px 8px; }
.porta-vista::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2, 14, 24, 0.05) 40%, var(--petroleo-veludo)); }
.porta-vista img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.porta:hover .porta-vista img { transform: scale(1.045); }
.porta-corpo { display: grid; align-content: start; gap: 18px; padding: 0 clamp(24px, 3vw, 44px) clamp(28px, 3vw, 44px); margin-top: -28px; position: relative; }
.porta-nome { font-family: var(--display); font-size: clamp(2.2rem, 1.6rem + 1.7vw, 3.2rem); line-height: 1; }
.porta-nome small { display: block; margin-bottom: 12px; font-family: var(--marca); font-size: 0.72rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ouro); }
.porta-frase { font-family: var(--display); font-style: italic; font-size: 1.34rem; line-height: 1.35; color: var(--champanhe); }
.porta ul { display: grid; gap: 10px; color: var(--nevoa); font-size: 0.96rem; }
.porta li, .plano li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: start; }
.porta li svg { width: 18px; height: 18px; margin-top: 4px; color: var(--ouro); }
.porta-acoes { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 6px; }
.ja-tenho a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.95rem; color: var(--ouro); text-decoration: none; }
.ja-tenho a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ja-tenho svg { width: 16px; height: 16px; }
.papel .ja-tenho a { color: var(--ouro-tinta); }
.papel .porta .botao-linha { color: var(--champanhe); background: rgba(217, 176, 110, 0.04); box-shadow: inset 0 0 0 1px var(--linha-forte); }
.papel .porta .botao-linha:hover { color: var(--polen-claro); background: rgba(217, 176, 110, 0.1); }
.selo-estado {
  position: absolute; top: 30px; left: 50%; transform: translateX(-50%); z-index: 2; padding: 7px 14px; border-radius: 999px;
  font: 700 0.68rem/1 var(--texto); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  color: var(--noite); background: var(--champanhe); box-shadow: 0 6px 20px -6px rgba(2, 14, 24, 0.6);
}
@media (max-width: 860px) {
  .portas { grid-template-columns: 1fr; }
  .porta { border-radius: 240px 240px var(--raio) var(--raio) / 190px 190px var(--raio) var(--raio); }
  .porta-vista { border-radius: 230px 230px 8px 8px / 180px 180px 8px 8px; }
}

/* ======================================================================
   Salas de produto
   ====================================================================== */
.sala-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 96px); align-items: start; }
.sala-texto { display: grid; gap: 26px; align-content: start; }
.etapas { display: grid; }
.etapa { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: 17px 0; border-top: 1px solid var(--linha); }
.etapa:last-child { border-bottom: 1px solid var(--linha); }
.etapa-num { font-family: var(--display); font-size: 1.9rem; line-height: 1; font-style: italic; color: var(--ouro); font-variant-numeric: lining-nums; }
.etapa h3 { font-family: var(--texto); font-size: 1.02rem; font-weight: 700; margin-bottom: 3px; }
.etapa p { font-size: 0.94rem; color: var(--nevoa); }
.papel .etapa { border-color: var(--fio); }
.papel .etapa-num { color: var(--ouro-tinta); }
.papel .etapa p { color: var(--tinta-suave); }
@media (max-width: 980px) { .sala-grade { grid-template-columns: 1fr; } }

/* números da casa */
.numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(56px, 6vw, 96px); border-block: 1px solid var(--linha); }
.numero { display: grid; gap: 6px; padding: 28px clamp(12px, 2vw, 28px); border-left: 1px solid var(--linha); }
.numero:first-child { border-left: 0; padding-left: 0; }
.numero strong { font-family: var(--display); font-size: clamp(2.6rem, 2rem + 2vw, 3.8rem); font-weight: 500; line-height: 1; color: var(--polen-claro); font-variant-numeric: lining-nums; }
.numero span { font-size: 0.9rem; color: var(--nevoa); }
@media (max-width: 760px) {
  .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .numero:nth-child(3) { border-left: 0; padding-left: 0; }
  .numero:nth-child(n+3) { border-top: 1px solid var(--linha); }
}

/* treino do dia, em escala real de minutos */
.treino { margin-top: 28px; display: grid; gap: 14px; }
.treino-cabeca { display: flex; justify-content: space-between; gap: 16px; font-size: 0.84rem; color: var(--nevoa); }
.treino-cabeca b { font-family: var(--marca); font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.72rem; color: var(--ouro); }
.treino-barra { display: flex; gap: 4px; height: 12px; }
.treino-barra i { flex: var(--min) 1 0; border-radius: 3px; background: linear-gradient(90deg, var(--ouro-suave), var(--ouro)); opacity: calc(0.45 + var(--n) * 0.13); }
.treino-rotulos { display: flex; gap: 4px; font-size: 0.76rem; line-height: 1.3; color: var(--nevoa); }
.treino-rotulos span { flex: var(--min) 1 0; min-width: 0; }
.treino-rotulos small { display: block; color: var(--ouro-suave); font-weight: 700; }
@media (max-width: 560px) {
  .treino-rotulos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
  .treino-rotulos span { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; align-items: baseline; }
  .treino-rotulos small { grid-row: span 2; }
}

/* teste de bolso: dois números */
.bolso { position: relative; border-radius: var(--raio); background: linear-gradient(180deg, rgba(12, 40, 57, 0.9), rgba(4, 21, 34, 0.95)); box-shadow: inset 0 0 0 1px var(--linha-forte), 0 50px 90px -50px rgba(0, 0, 0, 0.85); overflow: hidden; }
.bolso-barra { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 22px; border-bottom: 1px solid var(--linha); font-size: 0.82rem; color: var(--nevoa); }
.bolso-barra b { font-family: var(--marca); font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.72rem; color: var(--ouro); }
.relogio { font-variant-numeric: tabular-nums; color: var(--champanhe); }
.bolso-corpo { padding: clamp(22px, 3vw, 34px); display: grid; gap: 22px; min-height: 420px; align-content: start; }
.bolso-corpo h3 { font-family: var(--display); font-size: 1.9rem; line-height: 1.1; }
.bolso-corpo > p { color: var(--nevoa); }
.bolso-texto { font-family: var(--display); font-size: clamp(1.14rem, 1rem + 0.5vw, 1.34rem); line-height: 1.72; color: var(--polen-claro); }
.pergunta { display: grid; gap: 10px; border: 0; padding: 0; margin: 0; }
.pergunta legend { font-weight: 700; margin-bottom: 4px; padding: 0; }
.pergunta label { display: flex; gap: 12px; align-items: flex-start; padding: 11px 14px; border-radius: 10px; cursor: pointer; background: rgba(241, 228, 207, 0.04); box-shadow: inset 0 0 0 1px var(--linha); font-size: 0.95rem; color: var(--nevoa); transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease; }
.pergunta label:hover { background: rgba(217, 176, 110, 0.08); color: var(--polen-claro); }
.pergunta input { accent-color: var(--ouro); margin-top: 5px; flex: none; }
.pergunta label:has(input:checked) { box-shadow: inset 0 0 0 1px var(--ouro); color: var(--polen-claro); background: rgba(217, 176, 110, 0.1); }
.dois { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linha); border-radius: var(--raio-sm); overflow: hidden; }
.dois div { display: grid; gap: 4px; padding: 22px; background: var(--noite-veludo); }
.dois strong { font-family: var(--display); font-size: clamp(2.8rem, 2rem + 2.4vw, 3.8rem); font-weight: 500; line-height: 1; color: var(--ouro); font-variant-numeric: lining-nums; }
.dois span { font-size: 0.84rem; color: var(--nevoa); }
.bolso-acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.bolso-nota { font-size: 0.86rem; color: var(--nevoa); padding-top: 18px; border-top: 1px solid var(--linha); }

/* aparelhos com capturas reais */
.vitrine { position: relative; padding-bottom: 10%; margin-right: 6%; }
.tela-desk { position: relative; border-radius: 14px; overflow: hidden; background: #0b1721; box-shadow: 0 0 0 1px rgba(110, 71, 26, 0.25), 0 50px 90px -40px rgba(51, 41, 30, 0.55), 0 18px 36px -24px rgba(51, 41, 30, 0.4); }
.tela-desk::before { content: ""; display: block; height: 24px; background: linear-gradient(180deg, #13212d, #0d1923); }
.tela-desk::after { content: ""; position: absolute; top: 8px; left: 14px; width: 40px; height: 8px; background: radial-gradient(circle 3.5px at 4px 4px, #3a4a57 98%, transparent) 0 0 / 14px 8px repeat-x; }
.tela-desk img { width: 100%; height: auto; }
.tela-cel { position: absolute; right: -8%; bottom: 0; width: 30%; aspect-ratio: 540 / 1060; border-radius: 26px; padding: 6px; background: linear-gradient(160deg, #22313d, #0a141c); box-shadow: 0 40px 70px -30px rgba(2, 14, 24, 0.75), inset 0 0 0 1px rgba(241, 228, 207, 0.08); }
.tela-cel img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 21px; }

.palacio-citacao { font-family: var(--display); font-style: italic; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.25; color: var(--tinta); }
.palacio-citacao::before { content: ""; display: block; width: 46px; height: 46px; margin-bottom: 14px; background: var(--ouro-tinta); -webkit-mask: url("../img/rosa.svg") center / contain no-repeat; mask: url("../img/rosa.svg") center / contain no-repeat; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(40px, 4vw, 64px); }
.chip { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: rgba(250, 240, 218, 0.6); box-shadow: inset 0 0 0 1px var(--fio-forte); font-size: 0.9rem; color: var(--tinta); }
.chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--ouro-tinta)); flex: none; }

/* ======================================================================
   A ciência: fichas de biblioteca sobre a mesa escura
   ====================================================================== */
.fichas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.ficha {
  position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto auto; gap: 14px; padding: 30px 24px 22px; border-radius: 4px;
  color: var(--tinta); background: linear-gradient(180deg, var(--polen-cartao), var(--polen));
  box-shadow: 0 1px 0 rgba(250, 240, 218, 0.6) inset, 0 30px 50px -30px rgba(0, 0, 0, 0.7);
  transform: rotate(var(--r, 0deg)); transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ficha:hover { transform: rotate(0deg) translateY(-6px); }
.ficha::before { content: ""; position: absolute; top: 12px; left: 50%; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: var(--noite); box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.5); opacity: 0.85; }
.ficha-forca { justify-self: start; margin-top: 10px; padding: 5px 10px; border-radius: 999px; font: 700 0.66rem/1 var(--texto); letter-spacing: 0.14em; text-transform: uppercase; color: var(--polen-claro); background: var(--forca, var(--ouro-tinta)); }
.ficha h3 { font-family: var(--display); font-size: 1.62rem; line-height: 1.08; }
.ficha .dado { font-family: var(--display); font-size: 2.5rem; line-height: 1; font-variant-numeric: lining-nums; color: var(--ouro-tinta); }
.ficha .dado small { font-family: var(--texto); font-size: 0.78rem; color: var(--tinta-suave); margin-left: 4px; }
.ficha p { font-size: 0.92rem; color: var(--tinta-suave); }
.ficha .na-papyro { font-size: 0.88rem; color: var(--tinta); font-weight: 600; }
.ficha cite { font-style: normal; font-size: 0.74rem; line-height: 1.45; color: var(--tinta-suave); border-top: 1px dashed var(--fio-forte); padding-top: 12px; }
.honestidade { margin-top: clamp(36px, 4vw, 56px); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; padding: 24px 28px; border-radius: var(--raio); box-shadow: inset 0 0 0 1px var(--linha-forte); background: rgba(217, 176, 110, 0.05); }
.honestidade svg { width: 26px; height: 26px; color: var(--ouro); margin-top: 2px; }
.honestidade h3 { font-family: var(--display); font-size: 1.5rem; margin-bottom: 6px; }
.honestidade p { color: var(--nevoa); max-width: 80ch; }
@media (max-width: 1100px) { .fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; } }
@media (max-width: 580px) { .fichas { grid-template-columns: 1fr; } .ficha { transform: none; } }

/* ======================================================================
   Planos
   ====================================================================== */
.planos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.plano { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 22px; padding: clamp(26px, 2.6vw, 36px); border-radius: var(--raio); background: rgba(250, 240, 218, 0.62); box-shadow: inset 0 0 0 1px var(--fio), 0 30px 60px -46px rgba(51, 41, 30, 0.6); }
.plano.destaque { background: linear-gradient(180deg, var(--petroleo-veludo), var(--noite)); color: var(--polen-claro); box-shadow: inset 0 0 0 1px var(--ouro-suave), 0 50px 80px -40px rgba(2, 14, 24, 0.7); }
.plano-topo { display: grid; gap: 8px; }
.plano-topo small { font-family: var(--marca); font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ouro-tinta); }
.plano.destaque .plano-topo small { color: var(--ouro); }
.plano h3 { font-family: var(--display); font-size: 2.05rem; line-height: 1.04; }
.plano-topo p { font-size: 0.92rem; color: var(--tinta-suave); }
.plano.destaque .plano-topo p { color: var(--nevoa); }
.plano-preco { display: grid; gap: 4px; padding-block: 18px; border-block: 1px solid var(--fio); }
.plano.destaque .plano-preco { border-color: var(--linha); }
.plano-preco strong { font-family: var(--display); font-size: 2.6rem; font-weight: 500; line-height: 1; font-variant-numeric: lining-nums; }
.plano-preco strong small { font-family: var(--texto); font-size: 0.95rem; font-weight: 600; letter-spacing: 0; margin-right: 4px; vertical-align: 0.5em; color: var(--champanhe); }
.plano-preco span { font-size: 0.84rem; color: var(--tinta-suave); }
.plano-preco[hidden] { display: none; }
.ciclo { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(2, 14, 24, 0.6); box-shadow: inset 0 0 0 1px var(--linha); margin-bottom: -6px; }
.ciclo button { height: 36px; border: 0; border-radius: 999px; background: transparent; color: var(--nevoa); font: 700 0.84rem/1 var(--texto); cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease; }
.ciclo button[aria-checked="true"] { background: rgba(217, 176, 110, 0.18); color: var(--polen-claro); }
.ciclo button[data-ciclo="anual"]::after { content: " · -32%"; color: var(--ouro); }
.plano.destaque .plano-preco span { color: var(--nevoa); }
.plano ul { display: grid; gap: 11px; align-content: start; font-size: 0.94rem; }
.plano li svg { width: 18px; height: 18px; margin-top: 4px; color: var(--ouro-tinta); }
.plano.destaque li svg { color: var(--ouro); }
.plano .botao { width: 100%; }
.plano-fita { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: 7px 16px; border-radius: 999px; background: linear-gradient(180deg, #ecca8a, var(--ouro-suave)); color: #1d1408; font: 800 0.68rem/1 var(--texto); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
.aviso-preco { margin-top: 26px; text-align: center; font-size: 0.86rem; color: var(--tinta-suave); }
@media (max-width: 1000px) { .planos { grid-template-columns: 1fr; max-width: 540px; margin-inline: auto; gap: 30px; } }

/* ======================================================================
   Sua conta, seus dados
   ====================================================================== */
#dados { overflow: hidden; }
.rosa-fundo { position: absolute; z-index: -1; width: 760px; height: 760px; right: -240px; top: 50%; margin-top: -380px; color: var(--ouro); opacity: 0.06; }
.garantias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--linha); border-radius: var(--raio); overflow: hidden; box-shadow: 0 0 0 1px var(--linha); }
.garantia { display: grid; align-content: start; gap: 12px; padding: clamp(26px, 2.6vw, 36px); background: var(--noite); }
.garantia svg { width: 28px; height: 28px; color: var(--ouro); }
.garantia h3 { font-family: var(--display); font-size: 1.55rem; line-height: 1.12; }
.garantia p { font-size: 0.94rem; color: var(--nevoa); }
.garantia small { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ouro-suave); font-weight: 700; }
@media (max-width: 920px) { .garantias { grid-template-columns: 1fr; } }

/* ======================================================================
   Perguntas
   ====================================================================== */
.faq-grade { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.faq-grade .cabeca { position: sticky; top: calc(var(--topo-h) + 40px); margin-bottom: 0; }
.perguntas { display: grid; border-top: 1px solid var(--fio-forte); }
.perguntas details { border-bottom: 1px solid var(--fio-forte); }
.perguntas summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 4px; cursor: pointer; list-style: none; font-family: var(--display); font-size: clamp(1.24rem, 1.1rem + 0.5vw, 1.52rem); line-height: 1.25; color: var(--tinta); }
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after {
  content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--fio-forte);
  background: linear-gradient(var(--ouro-tinta), var(--ouro-tinta)) center / 12px 1.5px no-repeat, linear-gradient(var(--ouro-tinta), var(--ouro-tinta)) center / 1.5px 12px no-repeat;
  transition: transform 0.3s ease;
}
.perguntas details[open] summary::after { transform: rotate(45deg); }
.perguntas summary:hover { color: var(--ouro-tinta); }
.resposta { padding: 0 4px 26px; max-width: 64ch; color: var(--tinta-suave); display: grid; gap: 12px; }
@media (max-width: 920px) { .faq-grade { grid-template-columns: 1fr; } .faq-grade .cabeca { position: static; } }

/* ======================================================================
   Chamada final: o convite
   ====================================================================== */
.final { overflow: hidden; }
.final::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 0; width: 1200px; height: 900px; margin-left: -600px; background: radial-gradient(closest-side, rgba(217, 176, 110, 0.13), transparent 70%); }
.final-cabeca { text-align: center; display: grid; justify-items: center; gap: 22px; }
.final .templo { width: min(520px, 86%); aspect-ratio: 512 / 343; color: var(--ouro); opacity: 0.92; margin-bottom: 8px; }
.final .titulo { font-size: clamp(2.7rem, 1.6rem + 4.2vw, 5.6rem); max-width: 15ch; }
.convite { margin: clamp(40px, 4vw, 56px) auto 0; max-width: 760px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: clamp(22px, 3vw, 36px); border-radius: var(--raio); background: var(--vidro); box-shadow: inset 0 0 0 1px var(--linha-forte), 0 50px 90px -50px rgba(0, 0, 0, 0.9); }
.campo { display: grid; gap: 8px; min-width: 0; }
.campo label { font-family: var(--marca); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--champanhe); }
.campo input, .campo select {
  width: 100%; height: 52px; padding: 0 16px; border-radius: var(--raio-sm); border: 0;
  background: rgba(2, 14, 24, 0.7); color: var(--polen-claro); font: 500 1rem var(--texto);
  box-shadow: inset 0 0 0 1px var(--linha-forte); transition: box-shadow 0.2s ease;
}
.campo select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ouro) 50%), linear-gradient(135deg, var(--ouro) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.campo input::placeholder { color: rgba(183, 171, 150, 0.6); }
.campo input:focus, .campo select:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--ouro); }
.convite .botao { grid-column: 1 / -1; width: 100%; }
.convite-nota { grid-column: 1 / -1; font-size: 0.82rem; color: var(--nevoa); text-align: center; }
.convite-ok { grid-column: 1 / -1; display: grid; justify-items: center; gap: 10px; text-align: center; padding: 18px 0; }
.convite-ok h3 { font-family: var(--display); font-size: 2rem; }
.convite-ok p { color: var(--nevoa); max-width: 50ch; }
@media (max-width: 640px) { .convite { grid-template-columns: 1fr; } }

/* ---------- rodapé ---------- */
.rodape { border-top: 1px solid var(--linha); background: var(--noite-veludo); padding-block: 64px 36px; font-size: 0.9rem; color: var(--nevoa); }
.rodape-grade { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.rodape-marca { display: grid; gap: 16px; align-content: start; max-width: 36ch; }
.rodape h4 { font-family: var(--marca); font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ouro); margin-bottom: 16px; font-weight: 400; }
.rodape ul { display: grid; gap: 10px; }
.rodape a { text-decoration: none; color: var(--nevoa); }
.rodape a:hover { color: var(--polen-claro); }
.rodape-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 52px; padding-top: 24px; border-top: 1px solid var(--linha); font-size: 0.8rem; }
@media (max-width: 860px) { .rodape-grade { grid-template-columns: 1fr 1fr; } .rodape-marca { grid-column: 1 / -1; } }

/* ---------- aparecer ao rolar (a página já nasce legível; só os blocos abaixo da dobra esperam) ---------- */
.revela { transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js .revela.espera { opacity: 0.001; transform: translateY(26px); }
@media (prefers-reduced-motion: reduce) { .js .revela.espera { opacity: 1; transform: none; } .revela { transition: none; } }

/* ---------- marcação de conteúdo pendente (só no protótipo) ---------- */
.pendente { position: relative; outline: 1px dashed rgba(216, 16, 42, 0.6); outline-offset: 5px; }
.pendente::after { content: attr(data-pendente); position: absolute; top: -12px; right: 6px; z-index: 3; padding: 3px 8px; border-radius: 6px; background: #8a0a1b; color: var(--polen-claro); font: 700 0.6rem/1.2 var(--texto); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }


/* ======================================================================
   Identidade PAPYRO: papel primeiro (papel 60 · marinho 30 · ouro 10).
   O herói é uma folha de pólen onde a gravura se desenha em tinta; o ouro vira detalhe, não brilho.
   Afasta a receita "céu noturno + ouro + partículas brilhantes", que é a de outros cursos.
   ====================================================================== */
.heroi {
  color: var(--tinta);
  background:
    radial-gradient(1100px 620px at 76% 28%, rgba(250, 240, 218, 0.8), transparent 62%),
    radial-gradient(900px 700px at 0% 100%, rgba(158, 108, 44, 0.13), transparent 60%),
    var(--polen);
}
.heroi::before { /* fibra do papel no lugar da luz de vela */
  width: auto; height: auto; inset: 0; right: auto; top: auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .43 0 0 0 0 .3 0 0 0 0 .15 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  opacity: 0.5; mix-blend-mode: multiply;
}
.heroi::after { height: 90px; background: linear-gradient(180deg, transparent, rgba(110, 71, 26, 0.07)); }
.heroi h1 { color: var(--tinta); }
.heroi h1 em { color: var(--ouro-tinta); }
.heroi .sobrelinha { color: var(--ouro-tinta); }
.heroi .lead { color: var(--tinta-suave); }
.heroi .selos { color: var(--tinta-suave); }
.heroi .selos svg { color: var(--ouro-tinta); }
.heroi .botao-linha { color: var(--tinta); background: transparent; box-shadow: inset 0 0 0 1px var(--fio-forte); }
.heroi .botao-linha:hover { background: rgba(110, 71, 26, 0.07); color: var(--tinta); }
.palco-aneis { color: var(--tinta); opacity: 0.2; }
.palco canvas { mix-blend-mode: multiply; }
.fases { background: rgba(250, 240, 218, 0.78); box-shadow: inset 0 0 0 1px var(--fio-forte); }
.fases button { color: var(--tinta-suave); }
.fases button b { color: var(--ouro-tinta); }
.fases button.is-on { background: var(--tinta); color: var(--polen-claro); }
.fases button.is-on b { color: var(--champanhe); }

/* cabeçalho de papel, em cima do herói e ao rolar */
.topo .marca span { color: var(--tinta); }
.topo .nav a { color: var(--tinta-suave); }
.topo .nav a:hover { color: var(--tinta); background: rgba(110, 71, 26, 0.07); }
.topo .entrar { color: var(--tinta); }
.topo .entrar:hover { color: var(--ouro-tinta); }
.topo .menu-btn { color: var(--tinta); background: rgba(110, 71, 26, 0.08); }
.topo.is-rolado { background: rgba(234, 216, 187, 0.9); box-shadow: 0 1px 0 var(--fio); }
@media (max-width: 1060px) {
  .topo.is-aberto, .topo.is-aberto .nav { background: rgba(234, 216, 187, 0.98); box-shadow: 0 1px 0 var(--fio); }
}

/* botão principal: no papel, marinho com filete de ouro; nas salas escuras, papel com tinta. Nada de pílula dourada. */
.botao-ouro {
  color: var(--polen-claro);
  background: linear-gradient(180deg, var(--petroleo-veludo), var(--noite));
  box-shadow: inset 0 0 0 1px rgba(217, 176, 110, 0.5), 0 14px 30px -16px rgba(2, 14, 24, 0.6);
}
.botao-ouro::after { background: linear-gradient(90deg, transparent, rgba(217, 176, 110, 0.25), transparent); }
.botao-ouro:hover { box-shadow: inset 0 0 0 1px var(--ouro), 0 18px 36px -16px rgba(2, 14, 24, 0.65); }
.porta .botao-ouro, .bolso .botao-ouro, .plano.destaque .botao-ouro, .convite .botao-ouro, .final .botao-ouro, #leitura .botao-ouro {
  color: var(--tinta);
  background: linear-gradient(180deg, var(--polen-claro), var(--polen));
  box-shadow: inset 0 0 0 1px rgba(110, 71, 26, 0.35), 0 14px 30px -16px rgba(0, 0, 0, 0.65);
}
.porta .botao-ouro::after, .bolso .botao-ouro::after, .plano.destaque .botao-ouro::after, .convite .botao-ouro::after, #leitura .botao-ouro::after {
  background: linear-gradient(90deg, transparent, rgba(255, 248, 230, 0.7), transparent);
}
.porta .botao-ouro:hover, .bolso .botao-ouro:hover, .plano.destaque .botao-ouro:hover, .convite .botao-ouro:hover, #leitura .botao-ouro:hover {
  box-shadow: inset 0 0 0 1px var(--ouro-tinta), 0 18px 36px -16px rgba(0, 0, 0, 0.7);
}
.plano-fita { background: var(--tinta); color: var(--polen-claro); }

/* "Seus dados" vira sala de papel: o escuro fica para a Leitura, a Ciência e o convite */
.papel .garantias { background: var(--fio); box-shadow: 0 0 0 1px var(--fio); }
.papel .garantia { background: rgba(250, 240, 218, 0.72); }
.papel .garantia h3 { color: var(--tinta); }
.papel .garantia p { color: var(--tinta-suave); }
.papel .garantia svg, .papel .garantia small { color: var(--ouro-tinta); }
.papel .rosa-fundo { color: var(--tinta); opacity: 0.05; }