/* Sonhos no Mapa: a noite do eusouodu (planetário), mais funda e mais azul, com luz de Lua em vez de ouro de Sol. */
@font-face { font-family: "Schibsted Grotesk"; src: url("/fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
:root {
  --fundo: #0A0B1C; --papel: rgba(237, 230, 211, .045);
  --tinta: #EDE6D3; --suave: #ABA7C2;
  --lua: #E8D9A8; --lua-fundo: rgba(232, 217, 168, .12);
  --lilas: #C9B8FF;
  --linha: rgba(237, 230, 211, .13); --linha-lua: rgba(232, 217, 168, .38);
  --texto: "Schibsted Grotesk", system-ui, sans-serif;
  --titulo: "Cormorant Garamond", Georgia, serif;
  --glifo: "Apple Symbols", "Segoe UI Symbol", "Noto Sans Symbols 2", "Noto Sans Symbols", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--tinta); font: 400 17px/1.65 var(--texto); -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1.1px 1.1px at 14% 20%, rgba(237,230,211,.75), transparent),
    radial-gradient(1px 1px at 70% 8%, rgba(237,230,211,.5), transparent),
    radial-gradient(1.3px 1.3px at 40% 46%, rgba(201,184,255,.8), transparent),
    radial-gradient(1px 1px at 86% 64%, rgba(232,217,168,.6), transparent);
  background-size: 280px 280px; background-color: var(--fundo); background-attachment: fixed;
}
body::before { content: ""; position: fixed; inset: auto 0 0 0; height: 50vh; pointer-events: none; z-index: -1; background: radial-gradient(120% 90% at 50% 125%, rgba(120, 104, 220, .22), transparent 65%); }
::selection { background: var(--lua); color: var(--fundo); }
:focus-visible { outline: 1.5px solid var(--lua); outline-offset: 4px; }
.pagina { max-width: 680px; margin: 0 auto; padding: 20px 16px 72px; }
h1, h2, h3 { font-family: var(--titulo); font-weight: 500; letter-spacing: -.01em; line-height: 1.02; margin: 0 0 16px; text-wrap: balance; }
h2 { font-size: clamp(32px, 8vw, 46px); }
p { margin: 0 0 1em; }
.suave { color: var(--suave); }
.etapa, .rotulo { display: block; font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--lilas); margin: 0 0 12px; }
.topo { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--suave); }
.topo a { color: var(--tinta); font-weight: 650; letter-spacing: -.02em; font-size: 17px; text-decoration: none; }

.heroi { margin-top: 28px; text-align: center; }
.heroi h1 { font-size: clamp(46px, 13vw, 84px); font-style: italic; color: var(--tinta); }
.heroi .sub { font-size: clamp(17px, 4.4vw, 21px); line-height: 1.5; color: var(--suave); max-width: 30em; margin: 14px auto 0; text-wrap: pretty; }
.lua { display: block; width: min(200px, 56%); margin: 0 auto 4px; overflow: visible; }
.lua .halo { fill: none; stroke: var(--linha-lua); stroke-dasharray: 1 7; animation: gira 60s linear infinite; transform-origin: 100px 92px; }
.lua .agua { fill: none; stroke: var(--lilas); stroke-opacity: .45; stroke-width: 1.4; animation: onda 6s ease-in-out infinite alternate; }
.lua .agua + .agua { animation-delay: -3s; stroke-opacity: .25; }
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes onda { to { transform: translateX(-10px); } }

.cartao { margin-top: 32px; padding: 22px 20px; border: 1px solid var(--linha-lua); border-radius: 18px; background: var(--papel); }
label { display: block; font-size: 15px; color: var(--suave); margin: 18px 0 6px; }
.rotulo { margin-top: 0; }
textarea, input[type="text"], input[type="email"], input[type="date"], input[type="time"] {
  width: 100%; font: inherit; color: var(--tinta); background: rgba(10, 11, 28, .6); border: 1px solid var(--linha); border-radius: 12px; padding: 12px 14px; min-height: 46px;
}
textarea { resize: vertical; line-height: 1.55; }
#sonho { font: 500 21px/1.5 var(--titulo); }
textarea:focus, input:focus { border-color: var(--linha-lua); outline: none; }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.duas label { margin-top: 18px; }
.marca { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; }
.marca input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--lua); flex: none; }
button { font: 600 16px var(--texto); color: var(--fundo); background: var(--lua); border: 0; border-radius: 999px; padding: 12px 22px; margin-top: 16px; cursor: pointer; min-height: 48px; }
button:disabled { opacity: .6; cursor: progress; }
button.secundario { background: transparent; color: var(--lua); border: 1px solid var(--linha-lua); }
#form > button[type="submit"], #associacoes > button[type="submit"] { width: 100%; font-size: 17px; min-height: 54px; box-shadow: 0 0 34px rgba(232, 217, 168, .25); }
#associacoes .secundario { width: 100%; }
.nota { margin: 12px 0 0; font-size: 14px; text-align: center; }
.nota-email { font-size: 14px; margin: 6px 0 0; }
.erro { color: #FF9C8A; min-height: 1em; margin-top: 10px; }
.aguarde { margin-top: 32px; text-align: center; color: var(--suave); font-size: 18px; }
.aguarde::before { content: ""; display: block; width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 50%; box-shadow: inset -10px 4px 0 0 var(--lua); animation: gira 3s linear infinite; }

.nascimento { border: 0; padding: 0; margin: 28px 0 0; min-width: 0; }
.nota-nasc { margin: -4px 0 0; font-size: 15px; }
.campo-cidade { position: relative; }
.sugestoes { list-style: none; padding: 4px 0; margin: 4px 0 0; position: absolute; left: 0; right: 0; z-index: 5; background: #14152C; border: 1px solid var(--linha-lua); border-radius: 12px; overflow: hidden; }
.sugestoes li { padding: 11px 14px; cursor: pointer; }
.sugestoes li[aria-selected=true], .sugestoes li:hover { background: var(--lua-fundo); color: var(--lua); }
.link-botao { min-height: 44px; background: none; color: var(--lua); font: 400 15px var(--texto); padding: 0; margin-top: 4px; text-decoration: underline; text-underline-offset: 3px; border-radius: 0; }

.perguntas { list-style: none; padding: 0; margin: 20px 0 28px; display: grid; gap: 22px; counter-reset: q; }
.perguntas li { counter-increment: q; }
.perguntas .imagem { font: italic 500 22px/1.25 var(--titulo); color: var(--lua); margin: 0 0 4px; }
.perguntas .imagem::before { content: counter(q) ". "; font-style: normal; color: var(--lilas); }
.perguntas label { margin-top: 0; color: var(--tinta); }

.landing { margin-top: 88px; }
body:has(#form[hidden]) .landing { display: none; }
.passos { list-style: none; padding: 0; margin: 0; counter-reset: passo; display: grid; gap: 28px; }
.passos li { counter-increment: passo; position: relative; padding-left: 54px; }
.passos li::before { content: counter(passo); position: absolute; left: 0; top: 2px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: italic 600 20px var(--titulo); color: var(--fundo); background: var(--lua); box-shadow: 0 0 20px rgba(232, 217, 168, .45); }
.passos h3 { font-size: 26px; margin: 0 0 4px; }
.passos p { color: var(--suave); margin: 0; }
.sonho-exemplo { margin: 0 0 8px; padding: 18px 20px; border-left: 2px solid var(--linha-lua); font: italic 500 21px/1.5 var(--titulo); color: var(--tinta); background: var(--papel); border-radius: 0 14px 14px 0; }
.cuidado { margin: 0; padding-left: 20px; color: var(--suave); display: grid; gap: 10px; }
.cuidado li::marker { color: var(--lua); }
.linha-arquivo div { display: flex; gap: 8px; margin-top: 8px; }
.linha-arquivo button { margin-top: 0; flex: none; }

/* A leitura */
.leitura { margin-top: 40px; }
.leitura > h2 { font-size: clamp(40px, 11vw, 64px); font-style: italic; }
.essencia { font: 500 clamp(22px, 5.6vw, 28px)/1.35 var(--titulo); color: var(--lua); }
.constelacao { margin: 32px 0; text-align: center; }
.constelacao svg { width: min(100%, 420px); overflow: visible; }
.constelacao figcaption { font-size: 14px; margin-top: 8px; }
#ceu-sonho .roda { fill: none; stroke: var(--linha); }
#ceu-sonho .fio { fill: none; stroke: var(--lilas); stroke-opacity: .55; stroke-width: 1; stroke-dasharray: 600; stroke-dashoffset: 600; animation: traca 4s ease-out .4s forwards; }
#ceu-sonho .estrela { fill: var(--lua); filter: drop-shadow(0 0 6px var(--lua)); animation: acende .8s ease-out both; }
#ceu-sonho text { fill: var(--tinta); font: italic 500 13px var(--titulo); text-anchor: middle; animation: acende .8s ease-out both; }
#ceu-sonho text { font-style: normal; font-size: 15px; }
.legenda { text-align: left; margin: 24px 0 0; padding-left: 24px; display: grid; gap: 10px; font-size: 16px; }
.legenda li::marker { color: var(--lua); font-family: var(--titulo); }
.legenda b { font: italic 500 20px var(--titulo); color: var(--lua); font-weight: 500; }
.legenda .glifo { color: var(--lilas); font-family: var(--glifo); }
#ceu-sonho .glifo { fill: var(--lilas); font: 11px var(--glifo); font-style: normal; }
@keyframes traca { to { stroke-dashoffset: 0; } }
@keyframes acende { from { opacity: 0; } }
.atos { list-style: none; padding: 0; margin: 0 0 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.atos li { border: 1px solid var(--linha); border-radius: 14px; padding: 14px; font-size: 15px; color: var(--suave); }
.atos b { display: block; font: italic 500 19px var(--titulo); color: var(--lua); margin-bottom: 4px; }
.secao { margin-top: 48px; }
.secao h3 { font-size: clamp(28px, 7vw, 36px); font-style: italic; }
.secao p { font-size: 18px; line-height: 1.72; }
.pergunta-fica { margin: 56px 0; padding: 26px 22px; border: 1px solid var(--linha-lua); border-radius: 18px; text-align: center; }
.pergunta-fica p:last-child { font: italic 500 clamp(24px, 6vw, 30px)/1.3 var(--titulo); margin: 0; }
.mandala img { display: block; width: 100%; border-radius: 12px; background: #fff; margin-bottom: 12px; }
.lista-arquivo { padding-left: 22px; display: grid; gap: 18px; }
.lista-arquivo a { color: var(--lua); font: italic 500 22px var(--titulo); }
.grave { border-color: rgba(255, 156, 138, .5); }
.rodape { margin-top: 72px; font-size: 13px; }

@media (max-width: 380px) { .duas, .atos { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lua .halo, .lua .agua, .aguarde::before, #ceu-sonho * { animation: none !important; stroke-dashoffset: 0 !important; }
}
@media print {
  body { background: #fff; color: #000; }
  body::before, .topo, .landing, #form, #associacoes, .constelacao, .atos, #l-secoes, .pergunta-fica, .leitura > *:not(.mandala), .mandala .rotulo, .mandala p, button, .rodape { display: none !important; }
  .mandala img { border-radius: 0; }
}