/* hairpay.app: página inicial, política e termos (E1). Tokens do design system HairPay; fontes dentro do site, as
   mesmas do app (assets/fonts, recorte latino), sem buscar nada no Google Fonts. */
@font-face{font-family:"Funnel Display";src:url(/fonts/FunnelDisplay-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Geist";src:url(/fonts/Geist-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Geist";src:url(/fonts/Geist-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/fonts/GeistMono-500.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --surface:#f5f6f4;--raised:#ffffff;--sunken:#eaede9;--line:#d6dbd6;--line-strong:#7e8a86;
  --ink:#0e1416;--muted:#56615d;--grafite:#0e1416;--porcelana:#eef2ef;
  --pago:#087356;--pago-soft:#ddf2e9;
  --display:"Funnel Display","Geist",system-ui,sans-serif;
  --sans:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface);color:var(--ink);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--pago)}a:hover{color:#065c45}
a:focus-visible,button:focus-visible{outline:2px solid var(--pago);outline-offset:2px}
h1,h2,h3{text-wrap:balance}

/* cabeçalho e rodapé */
.cab{position:sticky;top:0;z-index:5;background:rgba(245,246,244,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.cab-in{max-width:1200px;margin:0 auto;padding:14px clamp(16px,4vw,32px);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cab-in .marca{display:flex;margin-right:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 18px;border-radius:12px;font:600 15px/1 var(--sans);text-decoration:none}
.btn-pago{background:var(--pago);color:#fff}.btn-pago:hover{color:#fff;background:#065c45}
.btn-borda{border:1px solid var(--line-strong);background:var(--raised);color:var(--ink)}.btn-borda:hover{color:var(--ink)}
.btn-g{height:52px;padding:0 26px;font-size:16px}
/* "Em breve" no lugar dos botões até o app abrir (Rael, 07/10/2026): parece botão, mas não é clicável. */
.btn-breve{background:var(--sunken);color:var(--muted);cursor:default;user-select:none}
.selo-breve{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:999px;background:var(--sunken);color:var(--ink);font:600 12px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase}
.rodape{background:#0b1012;color:#9ba7a3}
.rodape-in{max-width:1200px;margin:0 auto;padding:28px clamp(16px,4vw,32px) 36px;display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;font-size:13px;line-height:18px}
.rodape a{color:#9ba7a3}
.rodape .fim{margin-left:auto}

/* página legal */
.legal-topo{background:var(--grafite);color:var(--porcelana);padding:28px 16px 32px}
.legal-topo .in,.legal-corpo{max-width:720px;margin:0 auto}
.legal-topo h1{font:600 clamp(30px,6vw,42px)/1.08 var(--display);letter-spacing:-.025em;margin:28px 0 8px}
.legal-topo p{color:#9ba7a3;margin:0;font-size:14px}
.legal-topo nav{display:flex;gap:20px;margin-top:20px;font-size:14px}
.legal-topo nav a{color:#c9d1ce}.legal-topo nav a[aria-current]{color:var(--porcelana);font-weight:600;text-decoration:none}
.legal-corpo{padding:28px 16px 64px}
.legal-corpo .data{font:500 13px/1.4 var(--mono);color:var(--muted);margin:0 0 12px}
.legal-corpo h2{font:600 21px/1.25 var(--display);letter-spacing:-.015em;margin:30px 0 6px;display:flex;gap:10px}
.legal-corpo h2 span{font:500 14px/1.9 var(--mono);color:var(--muted);min-width:22px}
.legal-corpo h3{font:600 16px/1.4 var(--sans);margin:16px 0 0}
.legal-corpo p,.legal-corpo li{max-width:66ch}
.legal-corpo p{margin:6px 0}
.legal-corpo ul{margin:6px 0;padding-left:20px;display:grid;gap:6px}
.papel{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:10px 0}
.papel div{background:var(--raised);border:1px solid var(--line);border-radius:12px;padding:14px 16px;min-width:0}
.papel b{display:block;font-weight:600;margin-bottom:4px}
.papel small{color:var(--muted);font-size:14px;line-height:1.5;display:block}
.tabela{overflow-x:auto;margin:8px 0;border:1px solid var(--line);border-radius:12px;background:var(--raised)}
.tabela table{border-collapse:collapse;width:100%;font-size:15px}
.tabela th,.tabela td{text-align:left;padding:10px 14px;border-top:1px solid var(--line);vertical-align:top}
.tabela thead th{border-top:0;font:500 12px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--sunken)}

@keyframes assenta{0%{transform:translateY(-22px);opacity:0}60%{transform:translateY(2px);opacity:1}100%{transform:translateY(0);opacity:1}}
.assenta{animation:assenta 640ms cubic-bezier(.2,.8,.2,1) 900ms both}
@media (prefers-reduced-motion:reduce){.assenta{animation:none}}