/* Maqueta do site VROMI (não publicado). */
:root { --ink:#0F172A; --muted:#56657A; --line:#E2E8F0; --bg:#F4F7FC; --card:#FFFFFF; --blue:#1A6FF5; --blue-dark:#1356C7; --soft:#DDE9FD; --ok:#16A34A; --ok-soft:#F0FDF4; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.55 "Nunito Sans",system-ui,sans-serif; }
a { color:inherit; text-decoration:none; }
.wrap { max-width:1120px; margin:0 auto; padding:0 max(16px,env(safe-area-inset-left)); }
h1,h2,h3,.brand { font-family:"Baloo 2",sans-serif; font-weight:800; letter-spacing:-.5px; }
h1 { font-size:clamp(44px,6vw,72px); line-height:1.02; margin:0 0 18px; text-wrap:balance; }
h2 { font-size:clamp(32px,4vw,46px); line-height:1.05; margin:0 0 12px; text-wrap:balance; }
h3 { font-size:22px; line-height:1.15; margin:0 0 6px; }
p { margin:0; }
.muted { color:var(--muted); }
.eyebrow { font-weight:800; font-size:13px; letter-spacing:1.6px; text-transform:uppercase; color:var(--blue); margin-bottom:10px; }

/* navegação */
nav.top { display:flex; align-items:center; justify-content:space-between; padding:22px 0; }
.brand { display:flex; align-items:center; gap:1px; font-size:26px; }
.brand svg { width:30px; height:30px; }
.links { display:flex; gap:28px; font-weight:800; font-size:15px; align-items:center; }
.btn { display:inline-flex; align-items:center; gap:10px; font-weight:800; border-radius:16px; padding:14px 22px; }
.btn.primary { background:var(--blue); color:#fff; box-shadow:0 4px 0 var(--blue-dark); }
.btn.white { background:#fff; color:var(--blue-dark); box-shadow:0 4px 0 rgba(0,0,0,.15); }
.btn.ghost { border:2px solid rgba(255,255,255,.4); color:#fff; }
.store { display:inline-flex; align-items:center; gap:12px; background:#0F172A; color:#fff; border-radius:14px; padding:10px 18px; }
.store small { display:block; font-size:11px; opacity:.75; line-height:1.1; }
.store b { display:block; font-size:18px; line-height:1.1; }

/* hero */
.hero { background:linear-gradient(135deg,#2E81FE,var(--blue-dark)); color:#fff; padding-bottom:80px; overflow:hidden; }
.hero .grid { display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; padding-top:40px; }
.hero .lead { font-size:21px; font-weight:700; opacity:.92; max-width:520px; }
.hero .cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.stats { display:flex; gap:36px; margin-top:38px; }
.stats b { display:block; font-family:"Baloo 2"; font-size:34px; line-height:1; }
.stats span { font-size:14px; font-weight:700; opacity:.85; }

/* telemóvel */
.phones { position:relative; height:560px; }
.phone { position:absolute; width:270px; height:550px; border-radius:42px; background:#0F172A; padding:12px; box-shadow:0 30px 60px rgba(4,20,60,.35); }
.phone .scr { width:100%; height:100%; border-radius:32px; background:var(--bg); overflow:hidden; color:var(--ink); padding:18px 14px; font-size:12px; }
.phone.a { left:30px; top:10px; transform:rotate(-4deg); }
.phone.b { left:230px; top:30px; transform:rotate(5deg); }
.scr .bar { height:8px; border-radius:4px; background:var(--soft); overflow:hidden; margin:8px 0 14px; }
.scr .bar i { display:block; height:100%; width:40%; background:var(--blue); border-radius:4px; }
.scr .q { background:#fff; border:2px solid var(--line); border-radius:16px; overflow:hidden; }
.scr .q img { width:100%; height:120px; object-fit:cover; display:block; }
.scr .q p { font-weight:800; padding:10px 10px 6px; font-size:12.5px; line-height:1.3; }
.scr .o { margin:6px 10px; border:2px solid var(--line); border-radius:12px; padding:8px 10px; font-weight:700; display:flex; gap:8px; align-items:center; }
.scr .o b { width:22px; height:22px; border-radius:7px; background:var(--soft); color:var(--blue-dark); display:grid; place-items:center; font-size:11px; flex:none; }
.scr .o.ok { border-color:var(--ok); background:var(--ok-soft); } .scr .o.ok b { background:var(--ok); color:#fff; }
.scr h4 { font-family:"Baloo 2"; font-size:20px; margin:0; }
.ring { width:120px; height:120px; border-radius:50%; margin:14px auto; background:conic-gradient(var(--blue) 0 78%, var(--soft) 0); display:grid; place-items:center; }
.ring div { width:92px; height:92px; border-radius:50%; background:var(--bg); display:grid; place-items:center; font-family:"Baloo 2"; font-size:26px; }
.tile { background:#fff; border:2px solid var(--line); border-radius:14px; padding:10px 12px; margin-top:8px; display:flex; justify-content:space-between; font-weight:800; }
.tile span { color:var(--muted); font-weight:700; }

/* secções */
section { padding:84px 0; }
.center { text-align:center; max-width:700px; margin:0 auto 44px; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.step, .feat, .plan, .faq div, .card { background:var(--card); border:2px solid var(--line); border-radius:24px; padding:26px; }
.step .n { width:44px; height:44px; border-radius:14px; background:var(--blue); color:#fff; display:grid; place-items:center; font-family:"Baloo 2"; font-size:22px; margin-bottom:16px; }
.feats { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.feat { display:flex; gap:18px; }
.feat .i { flex:none; width:52px; height:52px; border-radius:16px; background:var(--soft); color:var(--blue); display:grid; place-items:center; }

/* testa-te */
.quiz { display:grid; grid-template-columns:1fr 1fr; gap:0; background:#fff; border:2px solid var(--line); border-radius:28px; overflow:hidden; }
.quiz img { width:100%; height:100%; object-fit:cover; display:block; min-height:320px; }
.quiz .body { padding:34px; }
.opt { display:flex; gap:14px; align-items:center; border:2px solid var(--line); border-radius:16px; padding:14px 16px; font-weight:800; margin-top:10px; }
.opt b { width:34px; height:34px; border-radius:10px; background:var(--soft); color:var(--blue-dark); display:grid; place-items:center; flex:none; }
.opt.ok { border-color:var(--ok); background:var(--ok-soft); } .opt.ok b { background:var(--ok); color:#fff; }
.why { margin-top:14px; background:var(--ok-soft); border-radius:14px; padding:12px 14px; font-weight:700; color:#14532D; font-size:15px; }

/* planos */
.plans { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
.plan .price { font-family:"Baloo 2"; font-size:44px; line-height:1; margin:10px 0 4px; }
.plan ul { list-style:none; padding:0; margin:18px 0 0; display:grid; gap:8px; font-weight:700; }
.plan li::before { content:""; display:inline-block; width:8px; height:8px; border-radius:4px; background:var(--blue); margin-right:10px; vertical-align:middle; }
.plan.best { border-color:var(--blue); box-shadow:0 0 0 4px var(--soft); position:relative; }
.tag { position:absolute; top:-14px; left:24px; background:var(--blue); color:#fff; font-weight:800; font-size:12px; letter-spacing:1px; text-transform:uppercase; padding:5px 12px; border-radius:999px; }

/* faq */
.faq { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.faq h3 { font-size:19px; }

/* faixa final */
.band { background:linear-gradient(135deg,#2E81FE,var(--blue-dark)); color:#fff; border-radius:32px; padding:56px; display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap; }
footer { padding:40px 0 60px; color:var(--muted); font-size:14px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; }

/* escolas */
.dash { background:#fff; border-radius:24px; box-shadow:0 30px 60px rgba(4,20,60,.35); color:var(--ink); overflow:hidden; font-size:14px; }
.dash .head { padding:16px 20px; border-bottom:2px solid var(--line); display:flex; justify-content:space-between; font-weight:800; }
.dash table { width:100%; border-collapse:collapse; }
.dash td, .dash th { white-space:nowrap; padding:12px 14px; text-align:left; border-bottom:1px solid var(--line); }
.dash th { font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); }
.chip { font-weight:800; font-size:12px; padding:4px 10px; border-radius:999px; }
.chip.g { background:var(--ok-soft); color:var(--ok); } .chip.y { background:#FEF9C3; color:#854D0E; } .chip.r { background:#FEE2E2; color:#B91C1C; }
.meter { height:8px; border-radius:4px; background:var(--soft); width:110px; overflow:hidden; } .meter i { display:block; height:100%; background:var(--blue); }
.kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.kpi b { display:block; font-family:"Baloo 2"; font-size:40px; color:var(--blue); line-height:1; }
form.lead-form { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
form.lead-form label { font-weight:800; font-size:14px; display:block; margin-bottom:6px; }
form.lead-form .in { border:2px solid var(--line); border-radius:14px; padding:13px 14px; color:var(--muted); background:#fff; }

.hero .grid > *, .quiz > *, .feat > div { min-width:0; }
.dash { overflow-x:auto; }
.stats { flex-wrap:wrap; row-gap:16px; }

@media (max-width: 860px) {
  .phones { overflow:hidden; }
  .links .btn { padding:10px 14px; font-size:14px; white-space:nowrap; }
  .brand span { display:none; }
  .quiz img { min-height:220px; max-height:260px; }
  .hero .grid, .quiz, .feats, .steps, .plans, .faq, .kpis, form.lead-form { grid-template-columns:1fr; }
  .links a:not(.btn) { display:none; }
  .phones { height:520px; transform:scale(.82); transform-origin:left top; }
  .band { padding:32px; }
}

/* formulário real (/escolas) */
form.lead-form input[type=text], form.lead-form input[type=number] { width:100%; font:inherit; border:2px solid var(--line); border-radius:14px; padding:13px 14px; background:#fff; color:var(--ink); }
form.lead-form input:focus { outline:none; border-color:var(--blue); }
form.lead-form .full { grid-column:1 / -1; }
form.lead-form .consent { display:flex; gap:10px; align-items:flex-start; font-size:15px; color:var(--muted); font-weight:400; }
form.lead-form .consent input { width:20px; height:20px; margin-top:2px; accent-color:var(--blue); flex:none; }
form.lead-form .consent a { color:var(--blue); font-weight:700; }
form.lead-form button { width:100%; font:800 17px "Nunito Sans",sans-serif; color:#fff; background:var(--blue); border:0; border-radius:16px; padding:15px; cursor:pointer; box-shadow:0 4px 0 var(--blue-dark); }
form.lead-form button:active { transform:translateY(3px); box-shadow:0 1px 0 var(--blue-dark); }
form.lead-form button[disabled] { opacity:.6; cursor:default; }
.msg { font-weight:800; font-size:15px; margin:0; } .msg.err { color:#DC2626; }
.caption { font-size:13px; font-weight:700; opacity:.8; margin-top:10px; text-align:center; }
.done { text-align:center; padding:12px 0; }
.done .tick { width:64px; height:64px; border-radius:50%; background:var(--ok-soft); color:var(--ok); display:grid; place-items:center; margin:0 auto 12px; }

/* página inicial (lista de espera enquanto a app não está nas lojas) */
.wl { display:flex; gap:10px; margin-top:28px; max-width:520px; }
.wl input[type=email] { flex:1; min-width:0; font:inherit; padding:14px 16px; border:2px solid transparent; border-radius:16px; color:var(--ink); background:#fff; }
.wl input[type=email]:focus { outline:none; border-color:var(--ink); }
.wl button { flex:none; font:800 17px "Nunito Sans",sans-serif; color:var(--blue-dark); background:#fff; border:0; border-radius:16px; padding:0 20px; cursor:pointer; box-shadow:0 4px 0 rgba(0,0,0,.18); }
.wl button:active { transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.18); }
.wl button[disabled] { opacity:.6; cursor:default; }
.wl-consent { display:flex; gap:10px; align-items:flex-start; margin-top:12px; font-size:14px; font-weight:700; opacity:.92; max-width:520px; }
.wl-consent input { width:18px; height:18px; margin-top:2px; accent-color:#fff; flex:none; }
.wl-consent a { color:#fff; text-decoration:underline; }
.wl-msg { margin-top:10px; font-weight:800; font-size:15px; min-height:1.4em; }
.wl-done { margin-top:28px; display:flex; gap:12px; align-items:center; background:rgba(255,255,255,.14); border-radius:16px; padding:14px 16px; font-weight:800; max-width:520px; }
.soon { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; align-items:center; }
.soon .store { opacity:.55; cursor:default; }
.soon small.note { font-weight:800; font-size:13px; opacity:.85; }
.phone .scr.shot { padding:0; background:#fff; }
.phone .scr.shot img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
.opt { cursor:pointer; background:#fff; font:inherit; width:100%; text-align:left; color:inherit; }
.opt:hover { border-color:var(--lineDark, #CBD5E1); }
.opt.bad { border-color:#DC2626; background:#FEF2F2; } .opt.bad b { background:#DC2626; color:#fff; }
.why[hidden] { display:none; }
.schools { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; background:var(--card); border:2px solid var(--line); border-radius:24px; padding:26px; }
.schools .btn { background:var(--ink); color:#fff; }
footer a:hover, .links a:hover { text-decoration:underline; }
@media (max-width: 560px) { .wl { flex-direction:column; } .wl button { padding:14px; } }
/* Telemóvel: um só ecrã da app, centrado e direito (dois inclinados ficavam cortados). */
@media (max-width: 860px) {
  .phones { height:auto; transform:none; overflow:visible; display:flex; justify-content:center; margin-top:8px; }
  .phone, .phone.a { position:relative; left:auto; top:auto; transform:none; width:240px; height:500px; }
  .phone.b { display:none; }
}

/* páginas de SEO (/sinais, /perguntas) */
.hero.slim { padding-bottom:40px; }
.hero.slim h1 { margin-top:6px; }
.crumbs { font-size:14px; font-weight:700; opacity:.85; margin:8px 0 0; }
.crumbs a { text-decoration:underline; }
.intro { font-size:18px; color:var(--muted); max-width:760px; margin:0 0 24px; }
.hubs { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px; }
.hub { background:var(--card); border:2px solid var(--line); border-radius:20px; padding:20px; display:block; }
.hub:hover { border-color:var(--blue); }
.hub .thumbs { display:flex; gap:6px; margin-bottom:12px; }
h2.sub { font-size:24px; margin:28px 0 12px; }
.signs { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; }
.signs figure { margin:0; background:var(--card); border:2px solid var(--line); border-radius:16px; padding:14px 10px; text-align:center; }
.signs img { width:96px; height:96px; object-fit:contain; }
.signs figcaption { font-size:14px; font-weight:700; margin-top:8px; }
.signs figcaption b { display:block; color:var(--blue); font-size:12px; }
.qs { display:grid; gap:16px; }
.qcard { background:var(--card); border:2px solid var(--line); border-radius:20px; overflow:hidden; display:grid; grid-template-columns:minmax(0,320px) 1fr; }
.qcard > img { width:100%; height:100%; object-fit:cover; min-height:200px; }
.qcard .qbody { padding:20px; min-width:0; }
.qcard .qbody:only-child { grid-column:1 / -1; }
.qn { font-weight:800; font-size:13px; color:var(--blue); margin:0 0 4px; }
.qcard h3 { font-size:20px; }
.qopts { list-style:none; padding:0; margin:12px 0; display:grid; gap:8px; }
.qopts li { display:flex; gap:10px; align-items:flex-start; font-weight:700; }
.qopts b { flex:none; width:26px; height:26px; border-radius:8px; background:var(--soft); color:var(--blue-dark); display:grid; place-items:center; font-size:13px; }
details summary { cursor:pointer; font-weight:800; color:var(--blue); }
.ans { color:var(--ok); margin:10px 0 4px; }
@media (max-width: 700px) { .qcard { grid-template-columns:1fr; } .qcard > img { max-height:220px; } }