/* ===== Reset básico ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:"Inter", Arial, sans-serif;
  background:#0f172a;                /* dark azul marinho */
  color:#e2e8f0;                      /* cinza claro */
  line-height:1.6;
}

/* ===== Variáveis ===== */
:root{
  --primary:#38bdf8;                  /* azul claro cian */
  --primary-dark:#0ea5e9;
  --bg-dark:#0f172a;
  --bg-card:#1e293b;
  --text-light:#f1f5f9;
  --text-muted:#94a3b8;
  --radius:14px;
  --maxw:1080px;
}

/* ===== Layout ===== */
.container{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 20px;
}
main{
  padding:40px 0 80px;
}
.section{
  margin:60px 0;
}
h1,h2,h3{
  color:var(--text-light);
  margin-bottom:18px;
  line-height:1.25;
}
p{margin-bottom:14px;color:#cbd5e1;}
a{color:var(--primary);}

/* ===== Botão ===== */
.btn{
  display:inline-block;
  padding:14px 22px;
  background:var(--primary);
  color:#0f172a;
  font-weight:600;
  text-decoration:none;
  border-radius:var(--radius);
  transition:.2s;
}
.btn:hover{background:var(--primary-dark);color:#fff;}

/* ===== HEADER / NAV ===== */
header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(12px);
  background:rgba(15,23,42,.6);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.navbar{
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo{
  font-weight:700;
  color:var(--primary);
  font-size:20px;
  text-decoration:none;
}
nav a{
  color:#e2e8f0;
  text-decoration:none;
  margin-left:26px;
  font-weight:500;
  transition:.2s;
}
nav a:hover{color:var(--primary);}

/* ===== HERO ===== */
.hero{
  position:relative;
  min-height:60vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:60px 20px;
  background:url("../img/capa.jpg") center/cover no-repeat;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
}
.hero > *{position:relative;z-index:1;}
.hero h1{
  font-size:42px;
  margin-bottom:18px;
}
.hero p{
  font-size:18px;
  max-width:760px;
  margin:0 auto 26px;
  color:#f8fafc;
}

/* ===== Cards / blocos ===== */
.card{
  background:var(--bg-card);
  padding:28px 24px;
  border-radius:var(--radius);
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  margin-bottom:24px;
}

/* ===== Vídeo responsivo ===== */
.video-wrapper{
  position:relative;
  width:100%;
  max-width:920px;
  margin:0 auto;
  aspect-ratio:16/9;
  background:#000;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,.4);
}
.video-wrapper iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
@supports not (aspect-ratio: 16 / 9){
  .video-wrapper{height:0;padding-top:56.25%;}
  .video-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%;}
}

/* ===== Footer ===== */
footer{
  background:#020617;
  color:var(--text-muted);
  padding:26px 0;
  font-size:14px;
}
footer a{color:var(--primary);}
footer .mini{
  opacity:.7;
  margin-top:6px;
}

/* ===== Responsividade ===== */
@media(max-width:640px){
  .hero h1{font-size:32px;}
  nav a{margin-left:14px;font-size:15px;}
}