/* ===============================
   Design tokens
================================ */
:root{
  --bg:#ffffff;
  --surface:#f7f9fc;
  --card:#ffffff;

  --text:#0f172a;     /* slate-900 */
  --muted:#475569;    /* slate-600 */

  --border:#e5eaf0;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow-md:0 8px 24px rgba(15,23,42,.08);
  --shadow-lg:0 18px 48px rgba(15,23,42,.12);

  --brand:#1e40af;    /* blue-800 */
  --brand-600:#2563eb;/* blue-600 */
  --accent:#06b6d4;   /* cyan-500 */
  --brand-50:#eef3ff;

  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:22px;

  --s-8:8px; --s-12:12px; --s-16:16px; --s-20:20px; --s-24:24px; --s-32:32px; --s-40:40px; --s-56:56px;
}

/* ===============================
   Base & utilitários
================================ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.65;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
a{color:var(--brand-600);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1140px;margin-inline:auto;padding:0 var(--s-20)}

.skip-link{
  position:absolute;left:8px;top:-40px;background:#111827;color:#fff;
  padding:8px 12px;border-radius:10px;transition:top .2s;z-index:1000
}
.skip-link:focus{top:8px}

/* Focus states */
:where(a,button,input,textarea,summary):focus-visible{
  outline:2px solid #93c5fd; outline-offset:3px; border-radius:8px;
}

/* ===============================
   Header / Nav
================================ */
header{
  background:#fff; border-bottom:1px solid var(--border); box-shadow:var(--shadow-sm);
}
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-16);
  padding:12px 0;
}
.brand{display:flex;align-items:center;gap:var(--s-12)}
.logo{
  width:38px;height:38px;border-radius:12px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--brand-600),#3b82f6 60%, var(--accent));
  box-shadow:0 10px 28px rgba(37,99,235,.25);
}
.brand-text strong{display:block;font-weight:700;letter-spacing:.2px}
.brand-text small{display:block;color:var(--muted);margin-top:2px}

.nav{display:flex;align-items:center;gap:var(--s-12)}
.nav-toggle{
  display:none;background:#f3f6fb;border:1px solid var(--border);border-radius:10px;padding:8px 12px;cursor:pointer
}
.nav-links{display:flex;gap:var(--s-12)}
.nav-links a{
  color:#0f172a; font-weight:600; padding:8px 10px; border-radius:10px; transition:background .2s ease;
}
.nav-links a:hover{background:#f3f6fb}

/* ===============================
   Hero
================================ */
.hero{
  background:
    radial-gradient(1200px 600px at 0% -20%, rgba(6,182,212,.12), transparent 60%),
    linear-gradient(180deg, rgba(37,99,235,.06), transparent 50%),
    #fff;
  border-bottom:1px solid var(--border);
}
.hero-wrap{
  display:grid; grid-template-columns:1.1fr .9fr; gap:var(--s-32); align-items:center;
  padding:var(--s-40) 0;
}
.hero h1{
  font-size:clamp(1.8rem,3.2vw,2.4rem); line-height:1.2; margin-bottom:var(--s-12);
}
.hero p{color:var(--muted);max-width:60ch}
.badges{display:flex;gap:var(--s-8);flex-wrap:wrap;margin-top:var(--s-12)}
.badge{
  background:#f3f6fb; border:1px solid var(--border); color:#0f172a;
  padding:6px 12px; border-radius:999px; font-size:.86rem;
}
.hero-card{
  background:#0b1325; color:#e5e7eb; border:1px solid #1f2a3a; border-radius:var(--r-xl);
  padding:18px; box-shadow:var(--shadow-md);
}
.hero-list{display:grid;gap:10px;margin-top:6px;list-style:none}
.hero-item{display:flex;gap:10px;align-items:flex-start}
.dot{width:10px;height:10px;border-radius:50%;background:var(--accent);margin-top:6px;flex:0 0 auto}

/* ===============================
   Seções / Títulos
================================ */
section{padding:var(--s-56) 0}
section.alt{background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.section-head{
  display:flex; align-items:end; justify-content:space-between; gap:var(--s-16);
  margin-bottom:var(--s-16); border-bottom:1px solid var(--border); padding-bottom:10px;
}
.section-head h2{font-size:1.35rem}
.section-head p{color:var(--muted)}

/* ===============================
   Grid & Cards
================================ */
.grid{display:grid; gap:var(--s-20); grid-template-columns:repeat(12,1fr)}
.grid > *{grid-column:span 4}
.grid-2 > *{grid-column:span 6}

.card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--r-md);
  padding:18px; box-shadow:var(--shadow-sm);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card:hover{transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:#dbe3ec}
.card h3{font-size:1.06rem; margin-bottom:6px}
.card p{color:var(--muted)}

/* ===============================
   Lista de artigos
================================ */
.articles{display:grid; gap:var(--s-16)}
.article{
  display:flex; gap:var(--s-16); align-items:flex-start; padding:14px; border-radius:var(--r-md);
  border:1px solid var(--border); background:var(--card); box-shadow:var(--shadow-sm);
}
.thumb{
  width:120px; aspect-ratio:3/2; border-radius:12px; background:#e8eef7; flex:0 0 auto; overflow:hidden;
  box-shadow:inset 0 0 0 1px #dde6f2;
}
.thumb img{width:100%;height:100%;object-fit:cover}
.article h3{font-size:1.02rem}
.meta{font-size:.86rem;color:var(--muted)}
.excerpt{color:var(--muted);margin-top:4px}

/* ===============================
   FAQ
================================ */
.faq{display:grid; gap:12px}
details{
  background:var(--card); border:1px solid var(--border); border-radius:var(--r-md); padding:16px;
  box-shadow:var(--shadow-sm);
}
details summary{cursor:pointer; font-weight:600}
details p{margin-top:8px; color:var(--muted)}

/* ===============================
   Formulário
================================ */
.form{max-width:720px;margin:0 auto}
.form-grid{
  display:grid; gap:12px; grid-template-columns:1fr 1fr; margin-top:8px;
}
.form-grid .full{grid-column:1/-1}
.form input, .form textarea{
  width:100%; padding:12px; border:1px solid var(--border); border-radius:12px; background:#fff;
  font-size:1rem; transition:border-color .16s, box-shadow .16s;
}
.form input:focus, .form textarea:focus{
  border-color:#bfd7ff; box-shadow:0 0 0 4px var(--brand-50); outline:none;
}
.form-actions{margin-top:10px;display:flex;gap:10px;align-items:center}
.btn{
  display:inline-block; background:var(--brand-600); color:#fff; border:0; border-radius:12px;
  padding:10px 16px; font-weight:700; cursor:pointer; box-shadow:var(--shadow-sm);
  transition:transform .12s ease, box-shadow .16s ease, background .16s ease;
}
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow-md); background:#1d4ed8}
.btn:active{transform:translateY(0); box-shadow:var(--shadow-sm)}
.btn-secondary{background:#e5e7eb;color:#0f172a}
.btn-secondary:hover{background:#dfe3ea}

/* ===============================
   Footer
================================ */
footer{
  border-top:1px solid var(--border); background:#fff; color:#334155; margin-top:var(--s-40);
}
.footer-wrap{
  display:grid; gap:var(--s-16); grid-template-columns:1fr auto; align-items:center;
  padding:18px 0;
}
.footer-links a{color:#334155;margin-left:14px}
.footer-links a:hover{color:#0f172a}

/* ===============================
   Cookie banner
================================ */
.cookie{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:9999;
  background:#0b1220; color:#e5e7eb; border:1px solid #1f2a3a; border-radius:16px;
  box-shadow:var(--shadow-lg);
  display:flex; gap:14px; align-items:flex-start; padding:14px 16px;
}
.cookie-text{flex:1}
.cookie-text small{display:block;color:#cbd5e1;margin-top:4px}
.cookie-actions{display:flex;gap:8px}

/* ===============================
   Responsivo
================================ */
@media (max-width:960px){
  .hero-wrap{grid-template-columns:1fr}
  .grid > *{grid-column:span 12}
  .grid-2 > *{grid-column:span 12}
  .footer-wrap{grid-template-columns:1fr}
  .nav-toggle{display:inline-flex}
  .nav-links{display:none}
  .nav-links.open{display:flex;flex-direction:column;position:absolute;right:20px;top:64px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);padding:10px;width:min(280px,85vw)}
  .nav-links a{padding:10px;border-radius:8px}
}

/* Acessibilidade: reduz movimento */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}