@font-face{font-family:"Schibsted Grotesk";src:url("fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url("fonts/schibsted-grotesk-latin-ext-wght-normal.woff2") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1EFF}
:root{--cupula:#05060A;--luz:#F5F3EE;--luz-2:#B9B7C4;--luz-3:#8E8C9C;--sol:#FFB547;--linha:rgba(245,243,238,.14);--prata:#9FB4D8;--sombra:#1B1D2A;--erro:#FF8A7A}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--cupula);color:var(--luz);font-family:"Schibsted Grotesk",system-ui,sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh;line-height:1.5}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:var(--prata)}
:focus-visible{outline:2px solid var(--prata);outline-offset:3px}
main{max-width:460px;margin:0 auto;padding:32px 16px 64px}
.kicker{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--luz-3)}
h1{font-size:clamp(36px,10.5vw,48px);font-weight:650;line-height:1;letter-spacing:-.04em;margin-top:12px;text-wrap:balance}
h2{font-size:clamp(28px,8vw,34px);font-weight:620;line-height:1.05;letter-spacing:-.03em;text-wrap:balance}
.sub{color:var(--luz-2);margin-top:14px;font-size:17px}
.nota{font-size:13px;color:var(--luz-3);margin-top:12px;text-align:center}
.frase{font-size:20px;line-height:1.35;margin:12px 0 10px}
.texto{color:var(--luz-2);font-size:17px}
.par{font-size:13px;color:var(--luz-3)}
.cta{display:block;width:100%;padding:17px;border-radius:999px;background:var(--luz);color:var(--cupula);font-weight:650;font-size:17px;margin-top:22px;text-align:center;text-decoration:none}
.cta:disabled{opacity:.5}
.sec{display:block;width:100%;padding:15px;border-radius:999px;border:1px solid var(--linha);margin-top:10px;text-align:center;text-decoration:none;color:var(--luz)}
.link{display:block;margin:16px auto 0;color:var(--luz-3);text-decoration:underline;text-underline-offset:3px;font-size:15px}
.erro{color:var(--erro);font-size:15px;margin-top:12px;min-height:1px}
.aviso{background:var(--sombra);border-radius:14px;padding:14px 16px;margin-bottom:18px;color:var(--luz-2);font-size:15px}

/* abertura */
.oval{width:min(240px,62vw);margin:8px auto 30px}
.oval svg{width:100%;display:block}
.oval .gira{transform-origin:50% 50%;animation:gira 40s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

/* relação */
.chips{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.chips button{padding:16px 18px;border:1px solid var(--linha);border-radius:16px;text-align:left;font-size:17px}
.chips button[aria-pressed="true"]{border-color:var(--luz);background:var(--sombra)}

/* formulário */
form{margin-top:24px}
label{display:block;font-size:14px;color:var(--luz-2);margin:18px 0 6px}
input[type=text],input[type=email],input[type=time],input[inputmode]{width:100%;padding:15px 16px;border-radius:14px;border:1px solid var(--linha);background:var(--sombra);font-size:17px}
input::placeholder{color:var(--luz-3)}
.check{display:flex;gap:10px;align-items:center;margin-top:10px;color:var(--luz-2);font-size:15px}
.check input{width:20px;height:20px;accent-color:var(--luz)}
.dica{font-size:13px;color:var(--luz-3);margin-top:6px}
.cidade{position:relative}
.sugestoes{list-style:none;position:absolute;left:0;right:0;top:100%;margin-top:4px;background:var(--sombra);border:1px solid var(--linha);border-radius:14px;overflow:hidden;z-index:5}
.sugestoes li{padding:13px 16px;cursor:pointer;border-top:1px solid var(--linha)}
.sugestoes li:first-child{border-top:0}
.sugestoes li[aria-selected="true"],.sugestoes li:hover{background:#262838}
.fora{font-size:13px;color:var(--luz-3);text-decoration:underline;margin-top:8px}

/* roda */
.roda svg{width:100%;display:block;overflow:visible}
.aro{fill:none;stroke:var(--linha)}
.glifo{font-size:14px;text-anchor:middle;dominant-baseline:central}
.ga{fill:var(--luz)} .gb{fill:var(--prata)}
.fio{stroke:var(--luz-2);stroke-width:1;fill:none}
.fio.flui{stroke:var(--prata)}
.fio.conj{stroke:var(--sol);stroke-width:1.6}
.fio.tensa{stroke:var(--luz)}
.fio.trancado{stroke:var(--luz-3);stroke-dasharray:3 5}
.alvo{stroke:transparent;stroke-width:20;cursor:pointer}

/* espera: meia roda */
.meia-roda{position:relative;width:min(300px,80vw);margin:28px auto 8px}
.meia-roda .nevoa{position:absolute;top:-4%;bottom:-4%;right:-2%;width:52%;background:linear-gradient(90deg,transparent,var(--cupula) 30%);}
.meia-roda .vidro,.espelho .vidro{position:absolute;left:50%;top:-14px;bottom:-14px;width:1px;background:linear-gradient(transparent,var(--prata),transparent)}
.caixa{margin-top:28px;padding:20px 18px;border-radius:20px;background:var(--sombra)}
.caixa form{margin-top:4px}
.caixa .linha{display:flex;gap:8px}
.caixa .linha input{flex:1;min-width:0}
.caixa .linha button{padding:0 18px;border-radius:14px;background:var(--luz);color:var(--cupula);font-weight:600}

/* revelação */
.espelho{position:relative;width:min(340px,100%);aspect-ratio:1;margin:30px auto 6px}
.meia{position:absolute;inset:0;transition:transform 1.4s cubic-bezier(.7,0,.2,1)}
.meia.esq{transform:translateX(-26%) scale(.47)}
.meia.dir{transform:translateX(26%) scale(.47)}
.camada-fios{position:absolute;inset:0}
.camada-fios .fio{stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 1.6s ease 1.3s}
.espelho .vidro{transition:opacity .6s 1s}
.fechado .meia{transform:none}
.fechado .vidro{opacity:0}
.fechado .camada-fios .fio{stroke-dashoffset:0}
.fechado .camada-fios .fio.trancado{stroke-dasharray:3 5}
.legenda-roda{display:flex;justify-content:center;gap:18px;font-size:13px;color:var(--luz-3);margin-top:10px}
.legenda-roda b{font-weight:500}
.surge{animation:surge .9s ease both}
@keyframes surge{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* fios, um por tela */
html.leitura{scroll-snap-type:y proximity}
.carta{min-height:82svh;display:flex;flex-direction:column;justify-content:center;scroll-snap-align:start;padding:40px 0 24px;border-top:1px solid var(--linha)}
.carta h2{margin-top:10px}
.borrado{filter:blur(6px);user-select:none;pointer-events:none}
.pay{margin-top:24px;padding:22px 18px;border-radius:20px;background:var(--sombra)}
.pay h3{font-size:21px;font-weight:600;line-height:1.25;letter-spacing:-.02em;margin-top:8px}
.pay details{margin-top:14px;font-size:15px;color:var(--luz-2)}
.pay summary{cursor:pointer;text-align:center;color:var(--luz-3);text-decoration:underline;list-style:none}
.pay summary::-webkit-details-marker{display:none}
.bloco{padding-top:40px}
.bloco > h2{margin-bottom:6px}
.bloco .item{padding:22px 0;border-top:1px solid var(--linha)}
.bloco .item h3{font-size:22px;font-weight:620;letter-spacing:-.02em;margin:6px 0 8px}

/* story */
.story-prev{width:min(260px,70vw);margin:22px auto 0;border-radius:16px;overflow:hidden;border:1px solid var(--linha)}
.story-prev canvas{width:100%;display:block}
.rodape{margin-top:56px;text-align:center;font-size:13px;color:var(--luz-3)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}