/* ==========================================================================
   Landing pages BrainSide — VENCE, BrainSide OS e BrainSide Controle
   Família visual do site brainside.top (paleta, Archivo + Manrope, cantos
   retos, ornamentos geométricos), com ritmo mais comercial.
   Uma folha só para as três LPs: o que muda é o conteúdo.
   ========================================================================== */

:root{
  --navy:#0B1A3A; --navy-deep:#081430; --navy-card:#12264F; --navy-mid:#1B3E7A;
  --blue:#2B6BF3; --blue-hover:#1F5AE0; --blue-light:#4D8DFF; --blue-pale:#9DBEFF;
  --warm:#E0826F;
  --bg:#FFFFFF; --bg-alt:#F2F5FB;
  --ink:#0B1A3A; --text:#33415C; --muted:#5A6B85;
  --line:#DCE4F0; --on-navy-line:rgba(157,190,255,.18);
  --ok:#157A4C; --no:#B23A2A;
  --fd:Archivo, system-ui, -apple-system, sans-serif;
  --fb:Manrope, system-ui, -apple-system, sans-serif;
  --maxw:1200px; --gut:clamp(16px, 5vw, 72px); --sec:clamp(64px, 8vw, 112px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:84px; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--fb); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img,svg{ max-width:100%; display:block; }
a{ color:var(--blue); }
h1,h2,h3{ font-family:var(--fd); font-weight:800; color:var(--ink); letter-spacing:-.02em; line-height:1.08; margin:0; text-wrap:balance; }
p{ margin:0; text-wrap:pretty; }
ul,ol{ margin:0; padding:0; list-style:none; }
figure{ margin:0; }
:focus-visible{ outline:3px solid var(--blue-light); outline-offset:3px; }

.skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--blue); color:#fff; padding:12px 20px; font:700 15px var(--fd); }
.skip:focus{ left:8px; top:8px; }

.wrap{ max-width:var(--maxw); margin:0 auto; }
.wrap--estreito{ max-width:860px; }
.sec{ padding:var(--sec) var(--gut); position:relative; }
.sec--alt{ background:var(--bg-alt); }
.sec--navy{ background:var(--navy); color:#DCE6FA; overflow:hidden; }
.sec--navy h2,.sec--navy h3{ color:#fff; }
.sec--blue{ background:var(--blue); color:#fff; overflow:hidden; }

/* Ornamentos */
.orn{ position:absolute; pointer-events:none; }
.orn--dots{ width:180px; height:120px; right:4%; top:48px; background-image:radial-gradient(rgba(157,190,255,.35) 1.5px, transparent 1.6px); background-size:16px 16px; }
.orn--dots-light{ background-image:radial-gradient(rgba(255,255,255,.35) 1.5px, transparent 1.6px); left:3%; right:auto; top:auto; bottom:24px; }
.orn--sq-light{ width:220px; height:220px; border:2px solid rgba(255,255,255,.10); transform:rotate(18deg); left:-80px; bottom:-90px; }
.orn--canto{ left:auto; right:-70px; top:-80px; bottom:auto; }

/* Botões */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:12px 22px; font:700 16px/1.2 var(--fd); text-decoration:none; border:2px solid transparent; transition:background .18s, color .18s, border-color .18s; text-align:center; }
.btn--primary{ background:var(--blue); color:#fff; }
.btn--primary:hover{ background:var(--blue-hover); }
.btn--ghost{ border-color:rgba(157,190,255,.55); color:#fff; }
.btn--ghost:hover{ border-color:#fff; }
.btn--white{ background:#fff; color:var(--navy); }
.btn--white:hover{ background:var(--navy); color:#fff; }
.btn--sm{ min-height:44px; padding:10px 16px; font-size:15px; }

/* Cabeçalho */
.topo{ position:sticky; top:0; z-index:50; background:var(--navy); border-bottom:1px solid var(--on-navy-line); }
.topo__in{ max-width:var(--maxw); margin:0 auto; padding:12px var(--gut); display:flex; align-items:center; gap:24px; }
.marca{ display:flex; align-items:center; gap:12px; text-decoration:none; color:#fff; flex-shrink:0; }
.marca__txt{ display:flex; flex-direction:column; line-height:1.1; }
.marca__nome{ font:800 19px var(--fd); letter-spacing:-.01em; }
.marca__sub{ font:600 11px var(--fb); letter-spacing:.12em; text-transform:uppercase; color:var(--blue-pale); }
.topo__nav{ display:flex; gap:22px; margin-left:auto; }
.topo__nav a{ color:#DCE6FA; text-decoration:none; font:600 15px var(--fb); padding:8px 0; }
.topo__nav a:hover{ color:#fff; text-decoration:underline; text-underline-offset:6px; }
.topo .btn{ margin-left:8px; }
@media (max-width:980px){ .topo__nav{ display:none; } .topo .btn{ margin-left:auto; } }
@media (max-width:520px){ .so-largo{ display:none; } .marca__sub{ display:none; } .marca svg{ width:26px; height:29px; } .marca__nome{ font-size:17px; } .topo__in{ gap:12px; } }

/* Hero */
.hero{ background:var(--navy); color:#DCE6FA; position:relative; overflow:hidden; padding:clamp(48px, 7vw, 96px) var(--gut) clamp(56px, 8vw, 104px); }
.hero__in{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr); gap:clamp(32px, 5vw, 64px); align-items:center; position:relative; }
.hero__cat{ display:inline-block; font:700 13px var(--fb); letter-spacing:.14em; text-transform:uppercase; color:var(--blue-pale); border-left:3px solid var(--blue); padding-left:12px; margin-bottom:20px; }
.hero h1{ color:#fff; font-size:clamp(34px, 5.2vw, 60px); }
.hero__sub{ margin-top:20px; font-size:clamp(17px, 1.6vw, 19px); color:#DCE6FA; max-width:560px; }
.hero__acoes{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.hero__nota{ margin-top:20px; padding:12px 14px; border:1px solid var(--on-navy-line); background:rgba(255,255,255,.04); font-size:15px; color:#fff; max-width:560px; }
.hero__lista{ margin-top:28px; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px 20px; font-size:15px; }
.hero__lista li{ padding-left:24px; position:relative; }
.hero__lista li::before{ content:"✓"; position:absolute; left:0; color:var(--blue-light); font-weight:800; }
@media (max-width:980px){ .hero__in{ grid-template-columns:minmax(0, 1fr); } }
@media (max-width:520px){ .hero__lista{ grid-template-columns:minmax(0, 1fr); } .hero__acoes .btn{ width:100%; } }

/* Janela de navegador em volta das telas reais */
.janela{ display:flex; gap:6px; padding:10px 12px; background:#E3E9F4; border-bottom:1px solid var(--line); }
.janela span{ width:10px; height:10px; border-radius:50%; background:#B7C3D9; }
.hero__tela{ background:#fff; box-shadow:0 30px 60px -20px rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.08); }
.hero__tela img{ width:100%; height:auto; }
.hero__tela figcaption{ background:var(--navy-card); color:#DCE6FA; font-size:13px; padding:8px 12px; }

/* Mini-fluxo do hero do BrainSide OS */
.hero__fluxo{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; padding:24px; border:1px solid var(--on-navy-line); background:var(--navy-card); counter-reset:e; }
.mini-etapa{ display:flex; align-items:center; gap:10px; padding:14px; background:var(--navy); border:1px solid var(--on-navy-line); color:#fff; font:700 16px var(--fd); }
.mini-etapa b{ color:var(--blue-pale); font:800 13px var(--fd); }
.hero__fluxo-nota{ grid-column:1 / -1; font-size:13px; color:var(--blue-pale); }

/* Títulos de seção */
.sec-head{ max-width:760px; margin-bottom:clamp(32px, 4vw, 48px); }
.eyebrow{ font:700 13px var(--fb); letter-spacing:.14em; text-transform:uppercase; color:var(--blue-hover); margin-bottom:14px; }
.eyebrow__num{ display:inline-block; min-width:32px; padding:2px 6px; margin-right:6px; background:var(--blue); color:#fff; text-align:center; }
.sec--navy .eyebrow{ color:var(--blue-pale); }
.sec-head h2{ font-size:clamp(28px, 3.6vw, 42px); }
.lead{ margin-top:16px; font-size:18px; color:var(--muted); }
.sec--navy .lead{ color:#C9D6F0; }

/* Problema */
.dores{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
.dores li{ display:flex; gap:14px; padding:20px; border:1px solid var(--line); background:#fff; color:var(--ink); font-weight:600; }
.dores__x{ flex-shrink:0; width:28px; height:28px; display:grid; place-items:center; background:#FBE9E5; color:var(--no); font:800 18px var(--fd); }

/* Benefícios */
.beneficios{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; }
.beneficios li{ padding:24px; background:#fff; border-top:4px solid var(--blue); }
.beneficios h3{ font-size:20px; margin-bottom:8px; }

/* Recursos */
.recursos{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; }
.recurso{ padding:28px 24px; border:1px solid var(--line); background:#fff; }
.recurso__num{ font:800 14px var(--fd); color:var(--blue-hover); margin-bottom:10px; }
.recurso h3{ font-size:21px; }
.recurso__sub{ margin-top:6px; color:var(--muted); font-size:15px; }
.recurso ul{ margin-top:16px; display:grid; gap:8px; font-size:15px; }
.recurso li{ padding-left:18px; position:relative; }
.recurso li::before{ content:""; position:absolute; left:0; top:.62em; width:8px; height:8px; background:var(--blue); }
.nota-destaque{ margin-top:28px; padding:18px 20px; border-left:4px solid var(--navy); background:var(--bg-alt); color:var(--ink); font-weight:600; }

/* Passos (Como funciona) */
.passos{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:12px; counter-reset:p; }
.passos li{ padding:22px 18px; background:var(--navy-card); border:1px solid var(--on-navy-line); }
.passos__n{ font:700 12px var(--fb); letter-spacing:.14em; text-transform:uppercase; color:var(--blue-pale); margin-bottom:10px; }
.passos h3{ font-size:19px; margin-bottom:8px; }
.passos p:last-child{ font-size:15px; color:#C9D6F0; }

/* Diagrama do fluxo (BrainSide OS) */
.diagrama__etapas{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:28px 20px; }
.etapa{ position:relative; padding:22px 18px 18px; background:var(--navy-card); border:1px solid var(--on-navy-line); }
.etapa::after{ content:""; position:absolute; top:34px; right:-21px; width:20px; height:2px; background:var(--blue-light); }
.etapa:nth-child(4n)::after,.etapa:last-child::after{ display:none; }
.etapa__n{ display:inline-grid; place-items:center; width:36px; height:36px; background:var(--blue); color:#fff; font:800 14px var(--fd); margin-bottom:12px; }
.etapa__t{ font-size:20px; }
.etapa__d{ margin-top:6px; font-size:15px; color:#C9D6F0; }
.etapa__tag{ margin-top:12px; padding-top:10px; border-top:1px dashed var(--on-navy-line); font-size:13px; color:var(--blue-pale); }
.diagrama__leg{ margin-top:24px; font-size:14px; color:#C9D6F0; }

/* Público */
.publico{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; }
.publico li{ padding:24px; border:1px solid var(--line); border-left:4px solid var(--blue); }
.publico h3{ font-size:20px; margin-bottom:8px; }
.publico__ex{ margin-top:24px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; color:var(--muted); }
.publico__ex > span:first-child{ font-weight:700; color:var(--ink); margin-right:4px; }
.chip{ padding:6px 12px; background:var(--bg-alt); border:1px solid var(--line); color:var(--ink); font-size:14px; font-weight:600; }

/* Situações de uso */
.situacoes{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
.situacoes__col{ padding:28px; background:#fff; border:1px solid var(--line); }
.situacoes__col h3{ font-size:20px; margin-bottom:16px; }
.situacoes__col ul{ display:grid; gap:12px; }
.situacoes__col li{ padding-left:30px; position:relative; }
.situacoes__col li::before{ position:absolute; left:0; top:0; width:22px; height:22px; display:grid; place-items:center; font:800 14px/22px var(--fd); text-align:center; }
.situacoes__col--sim li::before{ content:"✓"; background:#E3F4EA; color:var(--ok); }
.situacoes__col--nao li::before{ content:"×"; background:#FBE9E5; color:var(--no); }

/* Telas */
.telas{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px; }
.tela{ border:1px solid var(--line); background:#fff; box-shadow:0 18px 40px -24px rgba(11,26,58,.35); }
.tela img{ width:100%; height:auto; border-bottom:1px solid var(--line); }
.tela figcaption{ padding:16px 18px; font-size:15px; }
.tela figcaption strong{ display:block; font-family:var(--fd); font-size:17px; color:var(--ink); margin-bottom:4px; }
.telas__aviso{ margin-top:20px; font-size:14px; color:var(--muted); }

/* FAQ */
.faq{ display:grid; gap:10px; }
.faq details{ background:#fff; border:1px solid var(--line); }
.faq summary{ cursor:pointer; list-style:none; padding:18px 52px 18px 20px; position:relative; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:20px; top:50%; transform:translateY(-50%); font:700 24px var(--fd); color:var(--blue); }
.faq details[open] summary::after{ content:"–"; }
.faq summary h3{ font-size:18px; line-height:1.35; letter-spacing:-.01em; }
.faq details p{ padding:0 20px 20px; }

/* CTA final */
.cta-final__in{ text-align:center; max-width:760px; position:relative; }
.cta-final h2{ color:#fff; font-size:clamp(28px, 3.8vw, 44px); }
.cta-final p{ margin:16px auto 28px; font-size:18px; color:#fff; }

/* Rodapé */
.rodape{ background:var(--navy-deep); color:#C9D6F0; padding:36px var(--gut); font-size:15px; }
.rodape__in{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 32px; }
.rodape__marca{ display:flex; align-items:center; gap:12px; flex:1 1 320px; }
.rodape__marca strong{ color:#fff; }
.rodape__links{ display:flex; flex-wrap:wrap; gap:8px 20px; }
.rodape__links a{ color:#fff; text-underline-offset:4px; padding:6px 0; }
.rodape__copy{ color:#AEBEDC; }

/* 404 */
.erro404{ min-height:100vh; display:grid; place-content:center; justify-items:center; gap:16px; text-align:center; padding:32px 16px; background:var(--navy); color:#DCE6FA; }
.erro404 h1{ color:#fff; font-size:34px; }

/* Responsivo */
@media (max-width:1100px){
  .passos{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .diagrama__etapas{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .etapa:nth-child(4n)::after{ display:block; }
  .etapa:nth-child(2n)::after{ display:none; }
}
@media (max-width:900px){
  .beneficios,.recursos,.publico{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .telas{ grid-template-columns:minmax(0, 1fr); }
}
@media (max-width:680px){
  .dores,.beneficios,.recursos,.publico,.situacoes,.passos,.diagrama__etapas{ grid-template-columns:minmax(0, 1fr); }
  .etapa::after{ display:block !important; top:auto; bottom:-21px; right:auto; left:34px; width:2px; height:20px; }
  .etapa:last-child::after{ display:none !important; }
  .diagrama__etapas{ gap:20px; }
  .hero__fluxo{ padding:16px; gap:8px; }
  .mini-etapa{ padding:12px 10px; font-size:15px; }
  .hero .orn--dots{ display:none; }
  .situacoes__col,.recurso{ padding:22px 18px; }
}
.telas > .tela:last-child:nth-child(odd){ grid-column:1 / -1; }