:root{
  /* Paleta CINZA (fria, sem bege/amarelo) */
  --fg:#111827;          /* texto */
  --muted:#4B5563;       /* texto secundário */
  --border:#E5E7EB;      /* bordas */
  --soft:#F8FAFC;        /* fundo */
  --card:#FFFFFF;        /* cards */
  --primary:#374151;     /* CTA */
  --primary2:#111827;    /* hover/ênfase */
  --accent:#6B7280;      /* detalhes */

  --radius:18px;
  --shadow:0 14px 34px rgba(2,6,23,.10);
  --max:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,sans-serif;
  color:var(--fg);
  background:
    radial-gradient(980px 460px at 12% 0%, rgba(17,24,39,.07), transparent 62%),
    radial-gradient(980px 460px at 88% 0%, rgba(107,114,128,.08), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, var(--soft) 52%, #ffffff 100%);
  line-height:1.55;
}

a{color:inherit}
a:hover{color:var(--primary2)}

.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:12px;top:12px;width:auto;height:auto;padding:10px 12px;background:#fff;border:1px solid var(--border);border-radius:12px;z-index:9999}

.container{max-width:var(--max);margin:0 auto;padding:0 18px}

header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(248,250,252,.92);
  backdrop-filter:saturate(120%) blur(10px);
  border-bottom:1px solid var(--border);
}
header::after{
  content:"";
  display:block;
  height:2px;
  background:linear-gradient(90deg, var(--primary2), var(--accent), var(--primary2));
  opacity:.65;
}

.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}
.brand{display:flex;flex-direction:column;gap:2px;text-decoration:none}
.brand b{font-size:14px;letter-spacing:.3px}
.brand small{font-size:12px;color:rgba(17,24,39,.65)}

.menu{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.menu a:not(.btn){text-decoration:none;color:rgba(17,24,39,.72);font-size:14px;padding:8px 10px;border-radius:12px}
.menu a:hover{background:rgba(17,24,39,.05);color:var(--fg)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 14px;border-radius:14px;border:1px solid transparent;
  text-decoration:none;font-weight:800;font-size:14px;cursor:pointer;
}
.btn-primary{
  background:linear-gradient(180deg, var(--primary), var(--primary2));
  color:#fff;
  box-shadow:0 12px 26px rgba(2,6,23,.18);
}
.btn-primary:hover{filter:brightness(.98)}
.btn-ghost{background:rgba(255,255,255,.85);border-color:rgba(17,24,39,.14);color:var(--fg)}
.btn-ghost:hover{background:#fff;border-color:rgba(17,24,39,.22)}

section{padding:22px 0}

.hero{padding:34px 0 22px;position:relative;overflow:hidden}
.hero::before{
  content:"";
  position:absolute;inset:-60px -60px auto -60px;
  height:520px;
  background:
    radial-gradient(720px 360px at 22% 16%, rgba(17,24,39,.06), transparent 60%),
    radial-gradient(680px 340px at 78% 18%, rgba(107,114,128,.07), transparent 60%);
  pointer-events:none;
}
/* Remove qualquer arte decorativa por imagem */
.hero::after{display:none !important}

.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:center}
.hero-copy{position:relative}

.badge{
  display:inline-flex;gap:8px;align-items:center;
  font-size:12px;color:rgba(17,24,39,.70);
  border:1px solid var(--border);
  background:rgba(255,255,255,.80);
  border-radius:999px;padding:6px 10px
}

h1{font-size:34px;line-height:1.15;margin:10px 0 10px}
.lead{font-size:16px;color:rgba(17,24,39,.86);max-width:64ch}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.note{font-size:12px;color:rgba(17,24,39,.62);margin-top:10px}

.panel{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(17,24,39,.12);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px
}

.kv{display:grid;gap:10px}
.kv .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kv .item{border:1px solid rgba(17,24,39,.12);border-radius:14px;padding:12px;background:linear-gradient(180deg,#fff,#fbfdff)}
.kv .item b{display:block;font-size:13px}
.kv .item span{display:block;color:rgba(17,24,39,.66);font-size:12px;margin-top:4px}
.kv .item .nowrap{white-space:nowrap}

h2{font-size:22px;margin:0 0 10px}
h3{font-size:16px;margin:16px 0 8px}
p{margin:0 0 10px}
ul{margin:10px 0 0 18px}

.section-pattern{
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(17,24,39,.025) 45%, rgba(255,255,255,0));
}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}

.card{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(17,24,39,.12);
  border-radius:var(--radius);
  padding:14px;
  box-shadow:0 10px 28px rgba(2,6,23,.06);
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;left:0;top:0;right:0;height:3px;
  background:linear-gradient(90deg, rgba(17,24,39,.50), rgba(107,114,128,.55));
  opacity:.75;
}
.card a{color:var(--primary2);text-decoration:none;font-weight:800}
.card a:hover{text-decoration:underline}

.card-theme{display:flex;flex-direction:column;gap:8px}
.card-icon{width:54px;height:54px;border-radius:14px}

.step{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:flex-start;margin:10px 0}
.step .n{
  width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, rgba(17,24,39,.08), rgba(255,255,255,.92));
  border:1px solid rgba(17,24,39,.12);
  font-weight:900;color:var(--primary2)
}

.callout{
  background:linear-gradient(135deg, #0b1220, #111827);
  color:#fff;border-radius:var(--radius);padding:18px;
  border:1px solid rgba(255,255,255,.10);
  border-top:3px solid rgba(255,255,255,.16);
}
.callout p{color:rgba(255,255,255,.86)}

.footer{margin-top:24px;border-top:1px solid var(--border);padding:20px 0 34px;color:rgba(17,24,39,.65);font-size:13px}
.footer strong{color:var(--fg)}
.footer a{color:inherit}

/* ===== Mobile nav: hamburger ===== */
.menu-desktop{display:flex}
.navdrop{display:none;position:relative}
.navdrop summary{list-style:none;cursor:pointer}
.navdrop summary::-webkit-details-marker{display:none}

.burger{
  width:44px;height:44px;border-radius:14px;
  border:1px solid rgba(17,24,39,.14);
  background:rgba(255,255,255,.85);
  position:relative;
  display:inline-block;
}
.burger::before,.burger::after{
  content:"";
  position:absolute;left:12px;right:12px;
  height:2px;background:rgba(17,24,39,.72);
  border-radius:2px;
}
.burger::before{top:16px}
.burger::after{top:26px}
.navdrop[open] .burger::after{transform:rotate(-45deg);top:21px}
.navdrop[open] .burger::before{transform:rotate(45deg);top:21px}

.navdrop .drop{
  position:absolute;
  right:0;
  top:56px;
  width:min(340px, 92vw);
  padding:10px;
  border:1px solid rgba(17,24,39,.12);
  border-radius:18px;
  background:rgba(255,255,255,.96);
  box-shadow:0 16px 46px rgba(2,6,23,.14);
  display:grid;
  gap:8px;
  max-height: calc(100vh - 96px);
  overflow:auto;
}
.navdrop .drop a{
  display:block;
  padding:12px 12px;
  border-radius:14px;
  text-decoration:none;
}
.navdrop .drop a:not(.btn){color:rgba(17,24,39,.86)}
.navdrop .drop a:not(.btn):hover{background:rgba(17,24,39,.06)}
.navdrop .drop .btn{width:100%}

/* ===== Mobile CTA (apenas 1: FAB) ===== */
.mobilebar{display:none !important}
.fab{display:none}
@media (max-width:900px){
  header{position:static;backdrop-filter:none}

  .menu-desktop{display:none}
  .navdrop{display:block}

  /* Mobile menu overlay */
  .navdrop{position:relative}
  .navdrop[open]::before{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(2,6,23,.42);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index:11000;
  }
  .navdrop[open] summary{position:relative; z-index:11100}
  .navdrop[open] .drop{
    position:fixed;
    top:72px;
    right:12px;
    left:12px;
    width:auto;
    max-width:420px;
    margin-left:auto;
    margin-right:auto;
    z-index:11200;
  }


  .hero-grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr}

  h1{font-size:30px}
  .hero-actions{gap:10px}
  .hero-actions a{width:100%}

  body{padding-bottom:84px}

  .fab{
    display:inline-flex;align-items:center;justify-content:center;
    position:fixed;right:16px;
    bottom:calc(16px + env(safe-area-inset-bottom));
    z-index:9999;
    padding:12px 14px;border-radius:999px;
    min-width: 168px; letter-spacing: .2px;
    background:linear-gradient(180deg, var(--primary), var(--primary2));
    color:#fff;text-decoration:none;font-weight:900;font-size:14px;
    box-shadow:0 18px 44px rgba(2,6,23,.22);
    border:1px solid rgba(255,255,255,.12)
  }
  .fab:focus{outline:3px solid rgba(17,24,39,.25);outline-offset:2px}
}

/* ===== Modal ===== */
.modal{position:fixed;inset:0;background:rgba(2,6,23,.55);display:none;align-items:center;justify-content:center;padding:18px;z-index:2000}
.modal[aria-hidden="false"]{display:flex}
.modal-dialog{width:min(560px,100%);background:#fff;border-radius:18px;border:1px solid rgba(17,24,39,.12);box-shadow:var(--shadow);padding:16px}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.modal-head b{font-size:15px}
.icon-btn{border:1px solid rgba(17,24,39,.14);background:#fff;border-radius:12px;width:40px;height:40px;cursor:pointer}
.icon-btn:hover{background:rgba(17,24,39,.04)}
.field{margin-top:12px}
.field label{display:block;font-size:13px;font-weight:900;margin-bottom:6px}
.field .help{font-size:12px;color:rgba(17,24,39,.62);margin-top:6px}
.select,.radios{border:1px solid rgba(17,24,39,.12);border-radius:14px;padding:10px;background:#fff}
.radios{display:grid;gap:8px}
.radio{display:flex;gap:10px;align-items:flex-start;padding:8px;border-radius:12px}
.radio:hover{background:rgba(17,24,39,.04)}
.radio input{margin-top:3px}
.error{color:#b42318;font-size:12px;margin-top:8px;display:none}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:14px}
small.muted{color:rgba(17,24,39,.62)}