/* Base e tema */
:root{
  --bg: #ffffff;
  --text: #0f172a;
  --muted: #475569;
  --primary: #0F6CBD; /* azul moderno */
  --primary-600: #0b58a0;
  --accent: #00BFA6; /* verde água */
  --border: #e2e8f0;
  --surface: #f8fafc;
  --shadow: 0 10px 30px rgba(2, 23, 42, 0.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6; font-size:16px;
}
.container{width:min(1120px, 92%); margin-inline:auto}

/* Acessibilidade */
.skip-link{position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{left:16px; top:16px; width:auto; height:auto; background:#000; color:#fff; padding:8px 12px; border-radius:8px}

/* Topbar */
.topbar{background:var(--surface); border-bottom:1px solid var(--border); font-size:14px}
.topbar-inner{display:flex; justify-content:space-between; align-items:center; padding:8px 0; color:var(--muted)}
.topbar .sep{opacity:.5; margin:0 8px}

/* Navbar */
.navbar{position:sticky; top:0; z-index:30; background:rgba(255,255,255,.8); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--border)}
.navbar.light{position:static; backdrop-filter:none}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{color:var(--text); text-decoration:none; font-weight:700}
.nav-links{display:flex; gap:18px; list-style:none; padding:0; margin:0}
.nav-links a{color:var(--muted); text-decoration:none; padding:8px 10px; border-radius:8px}
.nav-links a:hover, .nav-links a.active{color:var(--text); background:var(--surface)}
.nav-links .divider{width:1px; background:var(--border); margin:0 6px}
.nav-toggle{display:none; background:none; border:none; padding:8px; cursor:pointer}
.nav-toggle span{display:block; width:22px; height:2px; background:var(--text); margin:4px 0}
@media (max-width: 860px){
  .nav-toggle{display:block}
  .nav-links{position:absolute; top:60px; left:0; right:0; padding:12px; background:#fff; border-bottom:1px solid var(--border); flex-direction:column; display:none}
  .nav-links.open{display:flex}
}

/* Hero */
.hero{padding:64px 0 24px; background:linear-gradient(180deg, #ffffff 0%, #fbfdff 100%)}
.hero-inner{display:grid; grid-template-columns: 1.2fr 1fr; gap:32px; align-items:center}
.hero-copy h1{font-size: clamp(28px, 4.5vw, 44px); line-height:1.15; margin:0 0 12px}
.hero-copy p{color:var(--muted); margin:0 0 16px}
.hero-cta{display:flex; gap:12px; margin:16px 0 8px}
.hero-bullets{color:var(--muted); padding-left:18px}
.hero-art{position:relative; height:320px}
.glass-card{position:absolute; inset:auto 24px 24px auto; width:72%; height:72%; background:rgba(255,255,255,0.6); border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow); backdrop-filter: blur(6px)}
.accent-circle{position:absolute; right:-24px; top:-24px; width:220px; height:220px; border-radius:50%; background: radial-gradient(120px 120px at 60% 40%, var(--accent), transparent 70%)}
@media (max-width: 920px){
  .hero-inner{grid-template-columns:1fr}
  .hero-art{order:-1; height:220px}
}

/* Botões */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border-radius:12px; text-decoration:none; font-weight:600; transition:.2s ease; border:1px solid transparent}
.btn-primary{background:var(--primary); color:#fff; border-color:var(--primary-600)}
.btn-primary:hover{background:var(--primary-600)}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--border)}
.btn-ghost:hover{background:var(--surface)}

/* Seções */
.section{padding:56px 0}
.section.alt{background:var(--surface)}
.section-header h2{margin:0 0 6px}
.section-header p{margin:0; color:var(--muted)}

/* Cards e grids */
.grid{display:grid; gap:18px}
.cards-3{grid-template-columns: repeat(3, 1fr)}
.cards-4{grid-template-columns: repeat(4, 1fr)}
@media (max-width: 920px){
  .cards-3, .cards-4{grid-template-columns: 1fr}
}
.card{background:#fff; border:1px solid var(--border); border-radius:16px; padding:18px; box-shadow: var(--shadow)}
.card.soft{box-shadow: 0 6px 18px rgba(2,23,42,0.06)}
.card.quote p{font-size:18px; margin:0 0 8px}
.card .author{color:var(--muted); font-weight:600}

/* Timeline */
.timeline{list-style:none; padding:0; margin:0; border-left:2px solid var(--border)}
.timeline li{padding:0 0 16px 16px; position:relative}
.timeline li::before{content:""; position:absolute; left:-8px; top:6px; width:10px; height:10px; border-radius:50%; background:var(--primary)}
.timeline h4{margin:0 0 4px}
.timeline p{margin:0; color:var(--muted)}

/* Contato */
.contact-box{display:block}
.contact-list{list-style:none; padding:0; margin:0 0 10px}
.contact-list li{padding:6px 0; border-bottom:1px dashed var(--border)}
.contact-list li:last-child{border-bottom:none}
.note{color:var(--muted)}

/* Rodapé */
.footer{border-top:1px solid var(--border); background:#fff; padding:22px 0}
.footer-inner{display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.footer-links{display:flex; gap:14px; list-style:none; padding:0; margin:0}
.footer-links a{color:var(--muted); text-decoration:none}
.footer-links a:hover{color:var(--text)}

/* Aviso de cookies */
.cookie-banner{position:fixed; left:0; right:0; bottom:0; background:#fff; border-top:1px solid var(--border); box-shadow:0 -10px 30px rgba(2,23,42,0.06); padding:12px 0}
.cookie-inner{display:flex; align-items:center; justify-content:space-between; gap:12px}
.cookie-banner p{margin:0; color:var(--muted)}

/* Páginas legais */
.legal .legal-doc{max-width: 80ch}
.legal h1{margin-bottom:8px}
.legal h2{margin-top:22px}

/* Efeitos ao rolar (reveal) */
.reveal{opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1; transform:none}