@font-face { font-family: 'Cormorant'; src: url('/fontes/cormorant-garamond-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant'; src: url('/fontes/cormorant-garamond-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant'; src: url('/fontes/cormorant-garamond-latin-500-italic.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Literata'; src: url('/fontes/literata-latin-opsz-normal.woff2') format('woff2'); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Literata'; src: url('/fontes/literata-latin-opsz-italic.woff2') format('woff2'); font-weight: 200 900; font-style: italic; font-display: swap; }

/* Linho, marfim, tinta café e ouro velho */
:root {
  --fundo: #F3EDE3;
  --papel: #FAF7F1;
  --areia: #E9E0D2;
  --tinta: #2B2620;
  --suave: #74695D;
  --ouro: #A8873F;
  --ouro-texto: #86692B;
  --ouro-claro: #C9AE72;
  --linha: rgba(43, 38, 32, 0.12);
  --linha-ouro: rgba(168, 135, 63, 0.45);
  --display: 'Cormorant', 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  --texto: 'Literata', Georgia, serif;
  --glifo: 'Apple Symbols', 'Segoe UI Symbol', 'Noto Sans Symbols 2', 'Noto Sans Symbols', 'DejaVu Sans', sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; color: var(--tinta); background: var(--fundo);
  font-family: var(--texto); font-size: 17px; line-height: 1.75; font-weight: 380;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--ouro-claro); color: var(--tinta); }
a { color: var(--ouro-texto); text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 1.5px solid var(--ouro); outline-offset: 4px; }
.pagina { max-width: 620px; margin: 0 auto; padding: 0 22px 72px; }
.estreita { max-width: 33em; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.08; margin: 0; letter-spacing: -0.005em; }
h2 { font-size: clamp(34px, 8.5vw, 44px); margin-bottom: 20px; }
p { margin: 0 0 1em; }
.nevoa { color: var(--suave); }

/* Fio dourado que separa seções: o único ornamento */
.secao::before, form.nascimento::before, .leitura section:not(.segundo):not(.oferta)::before {
  content: ''; display: block; width: 44px; height: 1px; background: var(--ouro); margin: 0 0 30px;
}

/* ---------- Venda ---------- */
.abertura { text-align: center; padding: 40px 0 12px; }
.orbita { position: relative; width: min(320px, 82vw); aspect-ratio: 1; margin: 0 auto; }
.orbita svg.anel { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbita .gira { transform-origin: 50% 50%; transform-box: fill-box; animation: girar 240s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.orbita .centro { position: absolute; inset: 31%; display: grid; place-items: center; color: var(--ouro); }
.orbita .centro svg { width: 100%; height: 100%; transition: opacity .9s ease; }
.abertura h1 {
  font-style: italic; font-weight: 500; font-size: clamp(48px, 13.5vw, 84px); line-height: .98;
  letter-spacing: -0.02em; margin: 34px auto 22px; max-width: 8.5em; text-wrap: balance;
}
.abertura .sub { color: var(--suave); margin: 0 auto 32px; text-wrap: pretty; }
.cta {
  display: inline-block; padding: 17px 34px; border: 0; border-radius: 2px; cursor: pointer;
  background: var(--tinta); color: var(--papel); font: 500 17px/1.2 var(--texto); letter-spacing: .01em; text-decoration: none;
  transition: background .25s ease;
}
.cta:hover { background: #45392C; }
.preco-linha { color: var(--suave); font-size: 15px; margin-top: 16px; }
.preco-linha b { color: var(--ouro-texto); font-weight: 500; }

.secao { margin-top: 96px; }
.passos { list-style: none; margin: 0; padding: 0; counter-reset: p; }
.passos li { display: grid; grid-template-columns: 48px 1fr; gap: 4px 12px; padding: 20px 0; border-top: 1px solid var(--linha); }
.passos li:last-child { border-bottom: 1px solid var(--linha); }
.passos li::before {
  counter-increment: p; content: counter(p, upper-roman); grid-row: span 2;
  font-family: var(--display); font-style: italic; font-size: 30px; color: var(--ouro); line-height: 1.05;
}
.passos strong { font-weight: 500; }
.passos span { color: var(--suave); font-size: 16px; }

.trecho { margin: 0; padding: 34px 28px 28px; background: var(--papel); border: 1px solid var(--linha); }
.trecho .cab { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; color: var(--ouro); }
.trecho .cab svg { width: 44px; height: 44px; flex: none; }
.trecho .cab b { font-family: var(--display); font-size: 30px; font-weight: 500; color: var(--tinta); display: block; line-height: 1; }
.trecho .cab i { font-family: var(--display); font-size: 19px; color: var(--ouro-texto); }
.trecho blockquote { margin: 0; font-size: 18px; font-style: italic; line-height: 1.7; }
.trecho figcaption { color: var(--suave); font-size: 14px; margin-top: 16px; }

.panteao { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linha); border-left: 1px solid var(--linha); }
.panteao li { text-align: center; padding: 20px 6px 18px; border-right: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.panteao svg { width: 40px; height: 40px; color: var(--ouro); display: block; margin: 0 auto 10px; }
.panteao b { display: block; font-family: var(--display); font-size: 21px; font-weight: 500; line-height: 1.1; }
.panteao i { display: block; font-family: var(--display); font-style: italic; font-size: 15px; line-height: 1.3; color: var(--suave); margin-top: 4px; }
@media (min-width: 560px) { .panteao { grid-template-columns: repeat(4, 1fr); } }

form.nascimento { margin-top: 96px; padding: 0; scroll-margin-top: 24px; }
.campo { margin-top: 22px; position: relative; }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.duas > .campo { min-width: 0; }
label { display: block; font-size: 14px; color: var(--suave); margin-bottom: 6px; letter-spacing: .01em; }
input[type=text], input[type=date], input[type=time] {
  width: 100%; min-width: 0; min-height: 52px; font: inherit; font-size: 17px; color: var(--tinta);
  background: var(--papel); border: 1px solid var(--linha); border-radius: 2px; padding: 12px 14px; color-scheme: light;
  -webkit-appearance: none; appearance: none; transition: border-color .2s ease;
}
input:focus { border-color: var(--ouro); outline: none; }
input:disabled { opacity: .45; }
.check { display: flex; gap: 10px; align-items: center; margin: 14px 0 0; font-size: 15px; color: var(--suave); cursor: pointer; }
.check input[type=checkbox] {
  -webkit-appearance: none; appearance: none; flex: none; width: 20px; height: 20px; border-radius: 2px; margin: 0;
  border: 1px solid var(--linha-ouro); background: var(--papel); display: grid; place-items: center; cursor: pointer;
}
.check input[type=checkbox]:checked { background: var(--ouro); border-color: var(--ouro); }
.check input[type=checkbox]:checked::after { content: ''; width: 5px; height: 10px; border: solid var(--papel); border-width: 0 1.5px 1.5px 0; transform: translateY(-1px) rotate(45deg); }
.dica { font-size: 14px; color: var(--suave); margin: 8px 0 0; line-height: 1.55; }
.sugestoes { list-style: none; margin: 4px 0 0; padding: 4px 0; position: absolute; left: 0; right: 0; z-index: 5; background: var(--papel); border: 1px solid var(--linha-ouro); box-shadow: 0 18px 40px rgba(43, 38, 32, .1); }
.sugestoes li { padding: 11px 14px; cursor: pointer; }
.sugestoes li[aria-selected=true], .sugestoes li:hover { background: var(--fundo); color: var(--ouro-texto); }
.link-botao { background: none; border: 0; color: var(--ouro-texto); font: inherit; font-size: 15px; padding: 0; margin-top: 10px; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; }
.botao {
  display: block; width: 100%; margin-top: 32px; padding: 18px; border: 0; border-radius: 2px; cursor: pointer;
  background: var(--tinta); color: var(--papel); font: 500 17px/1.2 var(--texto); letter-spacing: .01em; text-align: center; text-decoration: none;
  transition: background .25s ease;
}
.botao:hover { background: #45392C; }
.botao:disabled { opacity: .6; cursor: wait; }
.botao.vazado { background: transparent; color: var(--tinta); border: 1px solid var(--linha-ouro); }
.botao.vazado:hover { border-color: var(--ouro); background: var(--papel); }
.erro { color: #9A3B2E; font-size: 15px; margin: 12px 0 0; min-height: 1em; }
.seguro { text-align: center; color: var(--suave); font-size: 14px; margin-top: 14px; }

.perguntas details { border-top: 1px solid var(--linha); padding: 18px 0; }
.perguntas details:last-child { border-bottom: 1px solid var(--linha); }
.perguntas summary { cursor: pointer; font-weight: 450; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after { content: '+'; color: var(--ouro); font-family: var(--display); font-size: 26px; line-height: .9; }
.perguntas details[open] summary::after { content: '−'; }
.perguntas details p { color: var(--suave); margin: 10px 0 0; font-size: 16px; }

.rodape { text-align: center; color: var(--suave); font-size: 14px; margin-top: 88px; }
.rodape svg { width: 26px; height: 26px; color: var(--ouro); display: block; margin: 0 auto 12px; }

/* ---------- Leitura ---------- */
.espera { text-align: center; padding: 24vh 0 0; color: var(--suave); }
.espera .pulso { width: 64px; height: 64px; margin: 0 auto 22px; color: var(--ouro); animation: pulso 2.6s ease-in-out infinite; }
@keyframes pulso { 50% { opacity: .35; } }
.espera p { max-width: 26em; margin: 0 auto; }

.leitura .topo { text-align: center; padding: 48px 0 8px; }
.leitura .emblema { width: 116px; height: 116px; margin: 0 auto; color: var(--ouro); }
.leitura .emblema path { stroke-dasharray: 400; stroke-dashoffset: 400; animation: tracar 2.8s ease forwards; }
@keyframes tracar { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .leitura .emblema path { animation: none; stroke-dashoffset: 0; } .orbita .gira { animation: none; } .espera .pulso { animation: none; } }
.leitura .para { color: var(--suave); font-size: 15px; margin: 26px 0 0; }
.leitura h1 { font-style: italic; font-weight: 500; font-size: clamp(66px, 19vw, 120px); line-height: .92; letter-spacing: -0.025em; margin: 8px 0 12px; }
.leitura .titulo { font-family: var(--display); font-style: italic; font-size: 25px; color: var(--ouro-texto); margin: 0; }

.roda-bloco { margin: 52px -22px 0; padding: 30px 22px 28px; background: var(--papel); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.roda-bloco svg.roda { display: block; width: 100%; max-width: 430px; margin: 0 auto; overflow: visible; }
.roda .glifo { font-family: var(--glifo); }
.roda .claro { fill: var(--tinta); }
.roda .fraco { fill: var(--suave); }
.roda .tracar { stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: tracar 2.2s ease forwards; }
.roda .surge { opacity: 0; animation: surgir .6s ease forwards; }
@keyframes surgir { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .roda .tracar { animation: none; stroke-dashoffset: 0; } .roda .surge { animation: none; opacity: 1; } }
.resumo { display: flex; justify-content: center; gap: 6px 24px; flex-wrap: wrap; margin: 20px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--suave); }
.resumo b { color: var(--tinta); font-weight: 500; }
.legenda { text-align: center; font-size: 14px; color: var(--suave); margin: 10px auto 0; max-width: 30em; }
.legenda i { color: var(--ouro-texto); font-style: normal; }

.leitura section { margin-top: 72px; }
.capitular::first-letter {
  font-family: var(--display); font-weight: 500; float: left; font-size: 4.8em; line-height: .78;
  padding: 6px 10px 0 0; color: var(--ouro);
}
.sinais { list-style: none; padding: 0; margin: 0 0 1.4em; border-top: 1px solid var(--linha); }
.sinais li { position: relative; padding: 15px 0 15px 30px; border-bottom: 1px solid var(--linha); line-height: 1.55; }
.sinais li::before { content: '✦\FE0E'; position: absolute; left: 2px; top: 15px; color: var(--ouro); font-family: var(--glifo); font-size: 14px; }
.exercicio { padding: 26px 24px 24px; background: var(--papel); border: 1px solid var(--linha); margin-bottom: 14px; }
.exercicio h3 { font-size: 28px; margin-bottom: 8px; }
.exercicio p { margin: 0; }
.exercicio .pauta { display: none; }
.segundo { display: grid; grid-template-columns: 60px 1fr; gap: 18px; align-items: start; padding: 30px 0; border-top: 1px solid var(--linha-ouro); border-bottom: 1px solid var(--linha-ouro); }
.segundo svg { width: 60px; height: 60px; color: var(--ouro); }
.segundo h2 { font-size: 30px; margin-bottom: 4px; }
.segundo .sub { font-family: var(--display); font-style: italic; color: var(--ouro-texto); font-size: 19px; margin-bottom: 12px; }
.segundo p:last-child { margin: 0; }
.oferta { padding: 30px 26px; background: var(--areia); }
.oferta p { font-family: var(--display); font-size: 25px; line-height: 1.25; font-weight: 500; }
.oferta .botao { margin-top: 10px; }
.acoes { display: grid; gap: 10px; margin-top: 72px; }
.acoes .botao { margin-top: 0; }
.guardar { font-size: 14px; color: var(--suave); margin-top: 16px; text-align: center; }

@media (max-width: 520px) {
  .segundo { grid-template-columns: 1fr; gap: 8px; }
  .segundo svg { width: 48px; height: 48px; }
}

@media print {
  @page { margin: 18mm 16mm; }
  body { background: #fff !important; font-size: 11.5pt; line-height: 1.6; }
  .acoes, .guardar, .oferta .botao { display: none !important; }
  .leitura .emblema path, .roda .tracar { animation: none !important; stroke-dashoffset: 0 !important; }
  .roda .surge { opacity: 1 !important; animation: none !important; }
  .roda-bloco { background: none; border: 0; break-inside: avoid; }
  .exercicio { background: none; break-inside: avoid; }
  .exercicio .pauta { display: block; height: 4.2cm; margin-top: 10px; background: repeating-linear-gradient(transparent 0 .69cm, #d8d0c3 .69cm .7cm); }
  .segundo { break-inside: avoid; }
  .oferta { background: none; border: 1px solid var(--linha-ouro); }
  .leitura section { margin-top: 30px; }
  h2 { break-after: avoid; }
}