/* Paleta sóbria, a mesma do sistema: azul de ação sobre fundo claro. O site tem que parecer
     o produto que a pessoa vai usar - e o produto é uma ferramenta de trabalho, não um cartaz. */
  :root{
    --bg:#f4f7fb; --surface:#ffffff; --surface-2:#f8fafc;
    --line:#e2e8f0; --line-strong:#cbd5e1;
    --ink:#0f172a; --ink-2:#475569; --ink-3:#64748b;
    --brand:#0369a1; --brand-d:#075985; --brand-soft:#e0f2fe;
    --ok:#15803d; --ok-soft:#dcfce7;
    --alerta:#b91c1c; --alerta-soft:#fee2e2;
    --navy:#0f172a;
    --radius:16px;
    --shadow:0 1px 2px rgba(15,23,42,.04), 0 8px 24px -12px rgba(15,23,42,.12);
    --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); -webkit-font-smoothing:antialiased}
  img,svg{display:block}
  a{color:inherit}
  .wrap{max-width:1100px; margin:0 auto; padding:0 24px}

  /* ---------- header ---------- */
  header{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
  .nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 24px; max-width:1100px; margin:0 auto}
  .brand{display:flex; align-items:center; gap:10px; text-decoration:none}
  .brand .mark{width:36px; height:36px; border-radius:10px; background:var(--navy); display:flex; align-items:center; justify-content:center}
  .brand .mark svg{width:20px; height:20px; stroke:#38bdf8; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
  .brand .word{font-weight:800; font-size:20px; letter-spacing:-.02em}
  .nav-acoes{display:flex; align-items:center; gap:10px}

  .btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:12px 20px; border-radius:10px;
       font-weight:600; font-size:15px; text-decoration:none; border:1px solid transparent; cursor:pointer; white-space:nowrap;
       transition:background .15s ease, border-color .15s ease, transform .1s ease}
  .btn:active{transform:translateY(1px)}
  .btn-primary{background:var(--brand); color:#fff}
  .btn-primary:hover{background:var(--brand-d)}
  .btn-primary svg{width:18px; height:18px}
  .btn-sec{background:var(--surface); border-color:var(--line-strong); color:var(--ink)}
  .btn-sec:hover{border-color:var(--brand); color:var(--brand-d)}
  .btn-clientes{background:var(--surface); border-color:var(--line-strong); color:var(--ink); padding:10px 16px; font-size:14px}
  .btn-clientes:hover{border-color:var(--brand); color:var(--brand-d)}
  .nav .btn-primary{padding:10px 16px; font-size:14px}

  /* ---------- hero ---------- */
  .hero{padding:64px 0 56px}
  .hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center}
  .selo{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--brand-d);
        background:var(--brand-soft); border-radius:999px; padding:6px 14px; margin-bottom:20px}
  h1{font-size:clamp(34px,5vw,52px); line-height:1.08; letter-spacing:-.03em; font-weight:800; margin:0 0 18px}
  .hero p.lead{font-size:18px; line-height:1.6; color:var(--ink-2); max-width:520px; margin:0 0 28px}
  .hero-ctas{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:14px}
  .hero-nota{font-size:14px; color:var(--ink-3)}

  /* cartão do hero: a tela que a pessoa vai usar, não um desenho bonito */
  .cartao{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
  .cartao-topo{background:var(--navy); color:#fff; padding:14px 18px; display:flex; justify-content:space-between; align-items:center; font-size:14px}
  .cartao-topo b{font-weight:700}
  .cartao-topo span{color:#94a3b8; font-size:13px}
  .cartao-corpo{padding:18px}
  .legenda{display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-3); font-weight:600; margin-bottom:14px}
  .legenda i{display:inline-block; width:10px; height:10px; border-radius:3px; vertical-align:-1px; margin-right:6px}
  .legenda .meus{background:#bae6fd; border:1px solid #7dd3fc}
  .legenda .outros{background:#fef08a; border:1px solid #fde047}
  .legenda .deve{background:#fff; border:2px solid var(--alerta)}
  .poltronas{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
  .p{aspect-ratio:1/1; border-radius:10px 10px 7px 7px; border:1.5px solid var(--line-strong); border-bottom-width:4px;
     background:var(--surface-2); display:flex; flex-direction:column; align-items:center; justify-content:center;
     font-weight:800; font-size:13px; color:#475569}
  .p small{font-size:10px; font-weight:700; margin-top:2px}
  .p.meus{background:linear-gradient(180deg,#e0f2fe,#bae6fd); border-color:#7dd3fc; color:var(--brand-d)}
  .p.outros{background:linear-gradient(180deg,#fefce8,#fef08a); border-color:#fde047; color:#854d0e}
  .p.deve{border-color:var(--alerta); box-shadow:inset 0 0 0 3px var(--alerta)}
  .cartao-pe{border-top:1px solid var(--line); padding:14px 18px; display:flex; justify-content:space-between; font-size:14px}
  .cartao-pe .k{color:var(--ink-3)}
  .cartao-pe .v{font-weight:700}
  .cartao-pe .v.deve{color:var(--alerta)}

  /* ---------- seções ---------- */
  section{padding:72px 0}
  .kicker{font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--brand); margin-bottom:12px}
  h2{font-size:clamp(28px,3.6vw,38px); line-height:1.15; letter-spacing:-.025em; font-weight:800; margin:0 0 14px}
  .lead{color:var(--ink-2); font-size:17px; line-height:1.65; max-width:620px; margin:0}

  /* antes / depois */
  .compare{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:36px}
  .compare-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow)}
  .compare-card h3{font-size:18px; font-weight:800; margin:0 0 16px}
  .compare-card.bad h3{color:var(--alerta)}
  .compare-card.good h3{color:var(--ok)}
  .compare-card ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px}
  .compare-card li{display:flex; gap:10px; font-size:15px; line-height:1.5; color:var(--ink-2)}
  .compare-card li::before{font-weight:800; flex:none}
  .compare-card.bad li::before{content:'✕'; color:var(--alerta)}
  .compare-card.good li::before{content:'✓'; color:var(--ok)}

  /* recursos */
  .features{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:36px}
  .feat{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow)}
  .feat .ic{width:40px; height:40px; border-radius:10px; background:var(--brand-soft); display:flex; align-items:center; justify-content:center; margin-bottom:14px}
  .feat .ic svg{width:20px; height:20px; stroke:var(--brand-d); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
  .feat h4{font-size:17px; font-weight:800; margin:0 0 6px; letter-spacing:-.01em}
  .feat p{font-size:14.5px; line-height:1.6; color:var(--ink-2); margin:0}

  /* passos */
  .steps{margin-top:36px; display:flex; flex-direction:column; gap:14px}
  .step{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; display:flex; gap:18px; box-shadow:var(--shadow)}
  .step .n{width:38px; height:38px; border-radius:50%; background:var(--brand); color:#fff; flex:none; display:flex; align-items:center; justify-content:center; font-weight:800}
  .step h4{font-size:17px; font-weight:800; margin:6px 0 6px}
  .step p{color:var(--ink-2); font-size:15px; line-height:1.6; margin:0}

  /* preço */
  .preco-card{max-width:520px; margin:36px auto 0; background:var(--surface); border:1px solid var(--line);
              border-radius:20px; padding:34px 32px; box-shadow:var(--shadow); text-align:center}
  .preco-valor{font-size:52px; font-weight:800; letter-spacing:-.03em; line-height:1; margin:8px 0 4px}
  .preco-valor small{font-size:18px; font-weight:600; color:var(--ink-3)}
  .preco-sub{color:var(--ink-2); font-size:15px; margin-bottom:22px}
  .preco-lista{list-style:none; margin:0 0 26px; padding:0; text-align:left; display:flex; flex-direction:column; gap:11px}
  .preco-lista li{display:flex; gap:10px; font-size:15px; color:var(--ink); line-height:1.5}
  .preco-lista li::before{content:'✓'; color:var(--ok); font-weight:800; flex:none}
  .preco-card .btn{width:100%}
  .preco-divisor{border-top:1px dashed var(--line-strong); margin:6px 0 22px}

  /* dados / segurança */
  .trust{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center}
  .trust-lista{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
  .trust-lista .row{display:flex; justify-content:space-between; gap:16px; padding:15px 20px; border-bottom:1px solid var(--line); font-size:14.5px}
  .trust-lista .row:last-child{border-bottom:0}
  .trust-lista .row span:first-child{color:var(--ink-2)}
  .trust-lista .row .v{font-weight:700; text-align:right}
  .trust-lista .row .v.ok{color:var(--ok)}

  /* faq */
  .faq{margin-top:32px; display:flex; flex-direction:column; gap:10px}
  .faq details{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px 20px; box-shadow:var(--shadow)}
  .faq summary{font-weight:700; cursor:pointer; list-style:none; font-size:16px}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:'+'; float:right; color:var(--brand); font-weight:800}
  .faq details[open] summary::after{content:'–'}
  .faq p{color:var(--ink-2); font-size:15px; line-height:1.65; margin:10px 0 0}

  /* cta final */
  .cta-final{background:var(--navy); color:#fff; text-align:center; padding:64px 0}
  .cta-final h2{color:#fff; margin-bottom:10px}
  .cta-final p{color:#94a3b8; font-size:17px; margin:0 0 26px}
  .cta-final .btn-primary{background:#38bdf8; color:#0b2434}
  .cta-final .btn-primary:hover{background:#7dd3fc}
  .cta-final .btn-sec{background:transparent; border-color:#334155; color:#e2e8f0}
  .cta-final .btn-sec:hover{border-color:#64748b; color:#fff}
  .cta-final .acoes{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

  footer{background:var(--navy); color:#94a3b8; padding:28px 0 40px; font-size:14px; border-top:1px solid #1e293b}
  footer .fwrap{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center}
  footer a{color:#e2e8f0; text-decoration:none; font-weight:600}
  footer a:hover{text-decoration:underline}

  @media (max-width:900px){
    .hero-grid,.compare,.features,.trust{grid-template-columns:1fr}
    .features{gap:14px}
    .hero{padding:44px 0 40px}
    section{padding:56px 0}
    .nav{padding:12px 18px}
    .nav .btn-primary{display:none}      /* no celular a barra fica só com Área do cliente */
  }

  /* ---------- páginas internas (suporte, privacidade, condições) ---------- */
  .pagina{padding:56px 0 72px}
  .wrap-texto{max-width:760px}
  .titulo-pagina{font-size:clamp(30px,4vw,42px); line-height:1.12; letter-spacing:-.03em; font-weight:800; margin:0 0 16px}
  .sub-secao{font-size:22px; font-weight:800; letter-spacing:-.02em; margin:38px 0 10px}
  .texto{color:var(--ink-2); font-size:16px; line-height:1.75; margin:0 0 14px}
  .texto a{color:var(--brand-d); font-weight:600}
  .lista-texto{margin:0 0 14px; padding-left:22px; color:var(--ink-2); font-size:16px; line-height:1.8}
  .rodape-nota{margin-top:40px; padding-top:18px; border-top:1px solid var(--line); color:var(--ink-3); font-size:14px; line-height:1.6}

  .contato-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:28px 0 8px}
  .contato-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow)}
  .contato-card h3{font-size:19px; font-weight:800; margin:0 0 8px}
  .contato-valor{font-size:22px; font-weight:800; margin:0 0 8px; letter-spacing:-.01em}
  .contato-obs{color:var(--ink-2); font-size:14.5px; line-height:1.6; margin:0 0 16px}
  .contato-card .btn{width:100%}

  .contato-linhas{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); margin-top:16px}
  .contato-linhas .row{display:flex; justify-content:space-between; gap:16px; padding:15px 20px; border-bottom:1px solid var(--line); font-size:15px}
  .contato-linhas .row:last-child{border-bottom:0}
  .contato-linhas .row span{color:var(--ink-2)}
  .contato-linhas .row .v{font-weight:700; color:var(--brand-d); text-decoration:none; text-align:right}
  .contato-linhas .row .v:hover{text-decoration:underline}

  @media (max-width:900px){ .contato-grid{grid-template-columns:1fr} }