/* Ritmo — design system do Bruno Vieira (Fabricando) */
@font-face{font-family:"Big Shoulders Display";font-weight:700;font-style:normal;font-display:swap;src:url(/assets/fonts/big-shoulders-display-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Big Shoulders Display";font-weight:800;font-style:normal;font-display:swap;src:url(/assets/fonts/big-shoulders-display-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/figtree-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-weight:600;font-style:normal;font-display:swap;src:url(/assets/fonts/figtree-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-weight:700;font-style:normal;font-display:swap;src:url(/assets/fonts/figtree-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-weight:400;font-style:italic;font-display:swap;src:url(/assets/fonts/instrument-serif-latin-400-italic.woff2) format("woff2")}

:root{
  --chao:#0E0D0C; --sup:#1A1917; --sup2:#25231F; --linha:#36322C; --linha2:#4A453D;
  --tinta:#F2EDE3; --tinta2:#A9A296; --tinta3:#8C857A; --corpo:#C9C2B5;
  --ouro:#C9A24A; --ouro-claro:#E6CB85; --veu:#2A2416; --veu-linha:#4A3E22; --sobre-ouro:#14110A;
  --ritmo:#86B9A0; --alerta:#E38459; --dupla:#8FB0DE; --dupla-fundo:#1B2230; --dupla-linha:#2E3A4E;
  --zap:#1D3A2F; --zap-txt:#E9F3EE;
  --f-display:"Big Shoulders Display","Arial Narrow",sans-serif;
  --f-sans:"Figtree","Segoe UI",system-ui,sans-serif;
  --f-voz:"Instrument Serif",Georgia,serif;
  --r-sm:6px; --r-md:14px; --r-lg:22px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--chao);color:var(--tinta);font-family:var(--f-sans);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{min-height:100dvh}
button,input,textarea{font:inherit;color:inherit}
a{color:var(--ouro-claro)}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--ouro-claro);outline-offset:2px}
.app{max-width:480px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 24px 0;min-height:44px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.marca b{display:block;font-size:14px;font-weight:600;line-height:1.15}
.marca small{display:block;font-size:11px;color:var(--tinta2);line-height:1.2}
.passo{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--ouro)}
.tela{flex:1;display:flex;flex-direction:column;gap:20px;padding:22px 24px 28px;animation:entra .45s ease-out both}
.rot{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--ouro);text-transform:uppercase}
.h-xl{margin:0;font-family:var(--f-display);font-weight:800;font-size:46px;line-height:.98;text-transform:uppercase;text-wrap:balance}
.h-l{margin:0;font-family:var(--f-display);font-weight:800;font-size:36px;line-height:1;text-transform:uppercase;text-wrap:balance}
.h-m{margin:0;font-family:var(--f-display);font-weight:800;font-size:28px;line-height:1;text-transform:uppercase}
.h-q{margin:0;font-family:var(--f-display);font-weight:700;font-size:33px;line-height:1.06;text-wrap:balance}
.p{margin:0;font-size:16px;line-height:1.5;color:var(--corpo)}
.ps{margin:0;font-size:14px;line-height:1.5;color:var(--tinta2)}
.voz{margin:0;font-family:var(--f-voz);font-style:italic;font-size:22px;line-height:1.3;color:var(--ouro-claro)}
.aviso{margin:0;font-size:11px;line-height:1.45;color:var(--tinta3)}
.stack{display:flex;flex-direction:column;gap:10px}
.row{display:flex;gap:8px;align-items:center}
.wrap{display:flex;flex-wrap:wrap;gap:8px}
.card{display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:var(--r-lg);background:var(--sup);border:1px solid var(--linha)}
.card-veu{display:flex;flex-direction:column;gap:10px;padding:16px 18px;border-radius:var(--r-lg);background:var(--veu);border:1px solid var(--veu-linha)}
.card-dupla{display:flex;flex-direction:column;gap:12px;padding:16px 18px;border-radius:var(--r-lg);background:var(--sup);border:1px solid var(--dupla-linha)}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 20px;border:none;border-radius:var(--r-md);background:var(--ouro);color:var(--sobre-ouro);font-size:17px;font-weight:700;text-decoration:none;cursor:pointer;transition:background .2s,transform .1s}
.btn:active{transform:scale(.98)}
.btn:hover{color:var(--sobre-ouro)}
.btn[disabled]{background:var(--sup2);color:var(--tinta3);cursor:default}
.btn.pulso{animation:pulso 1.8s ease-out infinite}
.btn-sec{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 16px;border-radius:12px;border:1.5px solid var(--ouro);background:transparent;color:var(--tinta);font-size:15px;font-weight:700;text-decoration:none;cursor:pointer}
.btn-sec:hover{color:var(--tinta)}
.btn-dupla{border-color:var(--dupla)}
.btn-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;border:none;background:transparent;color:var(--ouro-claro);font-size:14px;font-weight:600;cursor:pointer;text-decoration:none}
.btn-mudo{min-height:44px;border:none;background:transparent;color:var(--tinta3);font-size:13px;text-decoration:underline;cursor:pointer;padding:0 4px}
.voltar{align-self:flex-start;display:flex;align-items:center;gap:6px;min-height:44px;padding:0;border:none;background:transparent;color:#DDD6C9;font-size:15px;cursor:pointer}
.opt{display:flex;align-items:center;gap:14px;width:100%;min-height:60px;padding:12px 16px;border-radius:var(--r-md);text-align:left;font-size:16px;line-height:1.35;cursor:pointer;border:1.5px solid var(--linha);background:var(--sup);color:#DDD6C9;transition:background .2s,border-color .2s}
.opt.on{border-color:var(--ouro);background:var(--veu);color:var(--tinta)}
.opt.feito{border-color:var(--veu-linha);background:var(--veu);color:var(--tinta2);text-decoration:line-through;text-decoration-color:#6E5A2A}
.los{width:28px;height:28px;flex-shrink:0;transform:rotate(45deg) scale(.78);border-radius:6px;border:1.5px solid var(--linha2);display:flex;align-items:center;justify-content:center;transition:background .2s}
.on .los{background:var(--ouro);border-color:var(--ouro)}
.los svg{transform:rotate(-45deg)}
.caixa{width:26px;height:26px;flex-shrink:0;border-radius:8px;border:1.5px solid var(--linha2);display:flex;align-items:center;justify-content:center}
.feito .caixa{background:var(--ouro);border-color:var(--ouro)}
.chk path{stroke-dasharray:24;animation:check .35s ease-out both}
.chip{min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--linha);background:var(--sup);color:#DDD6C9;font-size:15px;font-weight:500;cursor:pointer;transition:background .2s,border-color .2s}
.chip.on{border-color:var(--ouro);background:var(--veu);color:var(--tinta)}
.campo{display:flex;flex-direction:column;gap:8px}
.campo label{font-size:14px;font-weight:600}
.input{height:52px;padding:0 16px;border-radius:var(--r-md);border:1.5px solid var(--linha);background:var(--sup);color:var(--tinta);font-size:16px;width:100%}
textarea.input{height:auto;min-height:96px;padding:12px 16px;font-size:13px;line-height:1.4;resize:vertical;word-break:break-all}
.bolha{align-self:flex-end;max-width:318px;padding:12px 14px;border-radius:16px 16px 4px 16px;background:var(--zap);color:var(--zap-txt);font-size:14px;line-height:1.45;white-space:pre-line;overflow-wrap:anywhere}
.ico-caixa{width:44px;height:44px;flex-shrink:0;border-radius:12px;background:var(--sup);border:1px solid var(--linha);display:flex;align-items:center;justify-content:center;color:var(--ouro)}
.radar{border-radius:var(--r-lg);background:var(--sup);border:1px solid var(--linha);display:flex;justify-content:center;padding:6px 0}
.radar svg{width:100%;max-width:340px;height:auto}
.cresce{transform-origin:150px 150px;animation:cresce .9s cubic-bezier(.2,.8,.2,1) both}
.toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:999px;background:var(--veu);border:1px solid var(--ouro);color:var(--tinta);font-size:15px;font-weight:600;white-space:nowrap;z-index:10;pointer-events:none;animation:toast 1.1s ease-out both}
.rodape{display:flex;flex-direction:column;gap:6px;padding:16px 24px 24px;border-top:1px solid #23262A}
.rodape .row{font-size:12px;color:var(--tinta2);gap:8px}
.rodape p{margin:0;font-size:11px;line-height:1.45;color:var(--tinta3)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@keyframes entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes zig{0%,35%{opacity:1}55%,100%{opacity:0}}
@keyframes onda{0%,40%{stroke-dashoffset:560}100%{stroke-dashoffset:0}}
@keyframes ondaUma{from{stroke-dashoffset:600}to{stroke-dashoffset:0}}
@keyframes cresce{from{transform:scale(.15);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes toast{0%{opacity:0;transform:translate(-50%,12px)}18%{opacity:1;transform:translate(-50%,0)}82%{opacity:1}100%{opacity:0;transform:translate(-50%,-6px)}}
@keyframes pulso{0%{box-shadow:0 0 0 0 rgba(201,162,74,.55)}100%{box-shadow:0 0 0 16px rgba(201,162,74,0)}}
@keyframes check{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
@keyframes brilho{0%{transform:rotate(45deg) scale(.3);opacity:0}60%{transform:rotate(45deg) scale(1.12);opacity:1}100%{transform:rotate(45deg) scale(1);opacity:1}}
@keyframes raio{0%{opacity:0;transform:scale(.4)}40%{opacity:1}100%{opacity:0;transform:scale(1.35)}}
@keyframes gira{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}