/* Controle de Espaço — site (landing, privacidade, termos)
   Identidade tirada do próprio app: gradiente rosa→roxo do ícone, balões rosa/azul/amarelo
   e o roxo "Aurora" (tema padrão do app). Fonte do sistema — nenhuma requisição a terceiros. */

:root{
  --bg-top:#FBF4FF;
  --bg-bottom:#F4F6FF;
  --surface:#FFFFFF;
  --surface-2:#F4F1FD;
  --ink:#1D1A2E;
  --ink-2:#565270;
  --ink-3:#8C88A3;
  --line:rgba(29,26,46,0.10);

  --pink:#F2648A;
  --purple:#6C5CE7;
  --violet:#6B3FD6;
  --blue:#3FA2F5;
  --yellow:#F5B82E;
  --green:#2FAE6B;
  --red:#E5484D;

  --brand-grad:linear-gradient(135deg,#F7708F 0%,#6B3FD6 100%);
  --radius:26px;
  --radius-sm:16px;
  --shadow:0 12px 32px -14px rgba(70,40,140,0.28);
  --max:1120px;
  --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg-top:#1E1630; --bg-bottom:#121320;
    --surface:#1C1B29; --surface-2:#252336;
    --ink:#F3F1FF; --ink-2:#C3BFD9; --ink-3:#8E8AA6;
    --line:rgba(255,255,255,0.10);
    --purple:#A29BFE;
    --shadow:0 12px 32px -14px rgba(0,0,0,0.65);
  }
}
:root[data-theme="dark"]{
  --bg-top:#1E1630; --bg-bottom:#121320;
  --surface:#1C1B29; --surface-2:#252336;
  --ink:#F3F1FF; --ink-2:#C3BFD9; --ink-3:#8E8AA6;
  --line:rgba(255,255,255,0.10);
  --purple:#A29BFE;
  --shadow:0 12px 32px -14px rgba(0,0,0,0.65);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--font); color:var(--ink); line-height:1.6; font-size:17px;
  background:var(--bg-bottom);
  background-image:linear-gradient(180deg,var(--bg-top) 0%,var(--bg-bottom) 60%);
  background-attachment:fixed;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; }
:focus-visible{ outline:3px solid var(--purple); outline-offset:3px; border-radius:8px; }

/* Idioma: o conteúdo PT e EN fica no HTML; o <html lang> decide qual aparece. */
html[lang="en"] [data-lang="pt"], html:not([lang="en"]) [data-lang="en"]{ display:none !important; }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 20px; }
@media (max-width:480px){ .wrap{ padding:0 16px; } }

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:20;
  backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px);
  background:color-mix(in srgb, var(--bg-top) 80%, transparent);
  border-bottom:1px solid transparent; transition:border-color .2s;
}
.nav.scrolled{ border-bottom-color:var(--line); }
.nav .wrap{ display:flex; align-items:center; gap:18px; height:68px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:800; font-size:1.15rem; letter-spacing:-0.015em; white-space:nowrap; }
.brand img{ width:36px; height:36px; border-radius:10px; box-shadow:0 4px 12px -4px rgba(107,63,214,.55); }
.nav-links{ display:flex; gap:22px; margin-left:auto; }
.nav-links a{ text-decoration:none; font-weight:600; color:var(--ink-2); font-size:.95rem; }
.nav-links a:hover{ color:var(--ink); }
@media (max-width:820px){ .nav-links{ display:none; } .lang-switch{ margin-left:auto; } }

.lang-switch{ display:flex; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:3px; }
.lang-switch button{
  font:inherit; font-weight:700; font-size:.8rem; border:0; background:transparent; color:var(--ink-3);
  padding:6px 12px; border-radius:999px; cursor:pointer; min-height:32px;
}
.lang-switch button.active{ background:var(--brand-grad); color:#fff; }

/* ---------- HERO ---------- */
.hero{ padding:56px 0 40px; }
.hero .wrap.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
@media (max-width:900px){ .hero .wrap.split{ grid-template-columns:1fr; gap:40px; } }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.85rem;
  background:var(--surface); border:1px solid var(--line); padding:6px 14px; border-radius:999px; color:var(--ink-2);
}
.eyebrow .dot{ width:8px; height:8px; border-radius:50%; background:var(--pink); }
h1{ font-size:clamp(2.3rem,5.2vw,3.7rem); line-height:1.05; letter-spacing:-0.03em; font-weight:800; margin:18px 0 0; text-wrap:balance; }
.grad{ background:var(--brand-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lead{ font-size:clamp(1.05rem,1.8vw,1.2rem); color:var(--ink-2); margin:20px 0 0; max-width:34em; }
.cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; align-items:center; }

.store{
  display:inline-flex; align-items:center; gap:12px; text-decoration:none;
  background:var(--ink); color:var(--surface); border-radius:16px; padding:10px 18px 10px 14px; min-height:56px;
  transition:transform .15s;
}
.store:hover{ transform:translateY(-2px); }
.store svg{ width:26px; height:26px; flex:none; }
.store small{ display:block; font-size:.7rem; font-weight:600; opacity:.75; line-height:1.1; }
.store b{ display:block; font-size:1.05rem; font-weight:800; line-height:1.15; }
.store.soon{ background:var(--surface); color:var(--ink); border:1px solid var(--line); cursor:default; }
.store.soon:hover{ transform:none; }
.btn-ghost{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-weight:700; color:var(--ink); padding:12px 18px; border-radius:999px; border:1px solid var(--line); background:var(--surface); min-height:48px; }
.btn-ghost:hover{ border-color:var(--purple); color:var(--purple); }
.hint{ font-size:.88rem; color:var(--ink-3); margin-top:14px; }
.hint b{ color:var(--ink-2); }

/* Hero visual: ícone + cartões que imitam o app */
.hero-art{ position:relative; max-width:460px; width:100%; margin:0 auto; aspect-ratio:1/1.02; }
.hero-art .icon{ position:absolute; top:0; left:4%; width:34%; border-radius:24%; box-shadow:0 24px 48px -18px rgba(107,63,214,.6); animation:bob 6s ease-in-out infinite; z-index:2; }
.mock{
  position:absolute; background:var(--surface); border:1px solid var(--line); border-radius:20px;
  box-shadow:var(--shadow); padding:16px 18px; font-size:.86rem;
}
.mock .mt{ font-weight:800; font-size:.95rem; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.mock .ms{ color:var(--ink-3); font-size:.78rem; font-weight:600; margin-top:2px; }
.mock .pill{ font-size:.7rem; font-weight:800; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.pill.ok{ background:color-mix(in srgb,var(--green) 15%,transparent); color:var(--green); }
.pill.bad{ background:color-mix(in srgb,var(--red) 14%,transparent); color:var(--red); }
.pill.sch{ background:color-mix(in srgb,var(--purple) 15%,transparent); color:var(--purple); }
.mock-res{ top:21%; right:0; width:64%; animation:bob 7s ease-in-out infinite; animation-delay:-2s; }
.mock-res .row{ display:flex; gap:10px; align-items:center; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.mock-res .day{ width:44px; height:48px; border-radius:12px; background:var(--brand-grad); color:#fff; display:grid; place-items:center; text-align:center; line-height:1; flex:none; }
.mock-res .day b{ font-size:1.15rem; display:block; }
.mock-res .day span{ font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.mock-chk{ bottom:0; left:0; width:74%; animation:bob 8s ease-in-out infinite; animation-delay:-4s; }
.mock-chk ul{ list-style:none; margin:12px 0 0; padding:0; display:grid; gap:8px; }
.mock-chk li{ display:flex; justify-content:space-between; gap:10px; align-items:center; font-weight:600; color:var(--ink-2); }
.mock-chk li .q{ font-variant-numeric:tabular-nums; color:var(--ink-3); font-size:.78rem; margin-left:auto; margin-right:8px; }
.mock-chk .sig{ margin-top:12px; padding-top:10px; border-top:1px dashed var(--line); display:flex; align-items:center; justify-content:space-between; color:var(--ink-3); font-size:.76rem; font-weight:600; }
.mock-chk .sig svg{ width:84px; height:24px; color:var(--ink); }
@keyframes bob{ 0%,100%{ translate:0 0; } 50%{ translate:0 -8px; } }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
@media (max-width:480px){ .hero-art{ aspect-ratio:1/1.25; } .hero-art .icon{ width:30%; } .mock{ padding:13px 14px; font-size:.8rem; } .mock-res{ top:21%; width:80%; } .mock-chk{ width:88%; bottom:0; } }

/* ---------- STATS ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:28px 0 0; }
@media (max-width:760px){ .stats{ grid-template-columns:repeat(2,1fr); } }
.stats .s{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px 18px; }
.stats b{ display:block; font-size:1.6rem; font-weight:800; letter-spacing:-0.02em; line-height:1.15; }
.stats span{ font-size:.88rem; color:var(--ink-2); font-weight:600; }

/* ---------- SECTIONS ---------- */
section{ padding:72px 0; }
.sec-head{ max-width:44em; margin-bottom:34px; }
.kicker{ font-weight:800; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--pink); }
h2{ font-size:clamp(1.8rem,3.6vw,2.6rem); line-height:1.12; letter-spacing:-0.025em; font-weight:800; margin:8px 0 0; text-wrap:balance; }
.sec-head p{ color:var(--ink-2); font-size:1.08rem; margin:14px 0 0; }

.grid{ display:grid; gap:18px; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:980px){ .g4{ grid-template-columns:repeat(2,1fr); } .g3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .g2,.g3,.g4{ grid-template-columns:1fr; } }

.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow); }
.card h3{ font-size:1.15rem; font-weight:800; margin:14px 0 0; letter-spacing:-0.01em; }
.card p{ color:var(--ink-2); margin:8px 0 0; font-size:.98rem; }
.badge-ic{ width:50px; height:50px; border-radius:15px; display:grid; place-items:center; color:#fff; }
.badge-ic svg{ width:26px; height:26px; }

/* Passo a passo */
.step{ position:relative; }
.step .n{ font-weight:800; font-size:.8rem; letter-spacing:.08em; color:var(--ink-3); }
.step h3{ margin-top:10px; }

.band{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.list-check{ list-style:none; padding:0; margin:0; display:grid; gap:16px; }
.list-check li{ display:grid; grid-template-columns:30px 1fr; gap:12px; align-items:start; }
.list-check .ck{ width:30px; height:30px; border-radius:10px; display:grid; place-items:center; background:color-mix(in srgb,var(--purple) 15%,transparent); color:var(--purple); }
.list-check .ck svg{ width:18px; height:18px; }
.list-check b{ display:block; font-weight:800; }
.list-check span{ color:var(--ink-2); font-size:.97rem; }

.privacy-hero{ background:var(--brand-grad); color:#fff; border-radius:var(--radius); padding:clamp(28px,5vw,52px); position:relative; overflow:hidden; }
.privacy-hero h2{ color:#fff; }
.privacy-hero p{ color:rgba(255,255,255,.9); }
.privacy-hero .grid{ margin-top:26px; }
.pv{ background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.24); border-radius:var(--radius-sm); padding:18px; }
.pv b{ display:block; font-weight:800; font-size:1.03rem; }
.pv span{ font-size:.93rem; color:rgba(255,255,255,.9); }
.btn-light{ display:inline-flex; align-items:center; gap:8px; margin-top:26px; background:#fff; color:#4a2a9e; text-decoration:none; font-weight:800; padding:12px 20px; border-radius:999px; min-height:48px; }

/* Preço */
.price-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:18px; align-items:stretch; }
@media (max-width:820px){ .price-grid{ grid-template-columns:1fr; } }
.price-card{ display:flex; flex-direction:column; }
.price-card .tag{ font-weight:800; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.price-card .big{ font-size:clamp(2.2rem,4.4vw,3rem); font-weight:800; letter-spacing:-0.03em; line-height:1.05; margin-top:12px; }
.price-card .sub{ color:var(--ink-2); margin-top:8px; }
.price-card ul{ list-style:none; padding:0; margin:20px 0 0; display:grid; gap:10px; }
.price-card li{ padding-left:26px; position:relative; color:var(--ink-2); }
.price-card li::before{ content:""; position:absolute; left:0; top:.45em; width:14px; height:8px; border-left:2.5px solid var(--purple); border-bottom:2.5px solid var(--purple); transform:rotate(-45deg); }
.price-card .fine{ margin-top:auto; padding-top:20px; font-size:.85rem; color:var(--ink-3); }
.price-card.hl{ border:0; background:linear-gradient(var(--surface),var(--surface)) padding-box, var(--brand-grad) border-box; border:2px solid transparent; }

/* FAQ */
.faq{ display:grid; gap:12px; max-width:820px; }
.faq details{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:4px 22px; }
.faq summary{ cursor:pointer; font-weight:800; padding:16px 0; list-style:none; display:flex; justify-content:space-between; gap:12px; min-height:48px; align-items:center; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-size:1.4rem; color:var(--purple); flex:none; transition:transform .2s; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ margin:0 0 18px; color:var(--ink-2); }
.faq code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em; background:var(--surface-2); padding:2px 6px; border-radius:6px; color:var(--ink); }

.contact{ text-align:center; }
.contact .card{ padding:clamp(28px,5vw,52px); }
.contact p{ max-width:36em; margin-left:auto; margin-right:auto; }
.btn{ display:inline-flex; align-items:center; gap:8px; background:var(--brand-grad); color:#fff; text-decoration:none; font-weight:800; padding:13px 22px; border-radius:999px; min-height:48px; margin-top:22px; }

/* FOOTER */
footer{ padding:40px 0 56px; color:var(--ink-3); font-size:.88rem; }
footer .wrap{ display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; justify-content:space-between; }
footer nav{ display:flex; flex-wrap:wrap; gap:18px; }
footer a{ text-decoration:none; font-weight:600; color:var(--ink-2); }
footer a:hover{ color:var(--ink); }
.trng-seal{ display:inline-flex; align-items:center; gap:8px; font-weight:700; }
.trng-seal i{ font-style:normal; font-weight:800; letter-spacing:.04em; color:#C9A227; }

/* ---------- PÁGINAS LEGAIS ---------- */
.legal{ padding:48px 0 24px; }
.legal .doc{ max-width:780px; margin:0 auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(24px,5vw,56px); box-shadow:var(--shadow); }
.legal h1{ font-size:clamp(2rem,4.4vw,2.7rem); margin:0; }
.legal .meta{ color:var(--ink-3); font-weight:600; font-size:.9rem; margin-top:10px; }
.legal h2{ font-size:1.28rem; margin:36px 0 0; }
.legal p, .legal li{ color:var(--ink-2); }
.legal ul{ padding-left:1.2em; }
.legal li{ margin:6px 0; }
.legal .tldr{ background:var(--surface-2); border-radius:var(--radius-sm); padding:18px 22px; margin-top:24px; }
.legal .tldr p{ margin:6px 0; color:var(--ink); }
.legal table{ width:100%; border-collapse:collapse; margin-top:14px; font-size:.93rem; }
.legal th, .legal td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
.legal th{ color:var(--ink); font-weight:800; }
.legal td{ color:var(--ink-2); }
.table-scroll{ overflow-x:auto; }

.reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }