/* ===== Reset básico e preferências de fonte ===== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;
  line-height:1.6;
  color:#f7f7ff;
  background:radial-gradient(1200px 600px at 15% 85%, #ffd000 0%, #ffb703 25%, rgba(255,183,3,.0) 55%),
             radial-gradient(800px 500px at 90% 70%, #ffcc00 0%, rgba(255,204,0,.0) 55%),
             linear-gradient(135deg,#1e1f50,#3b2a6e 60%,#1e1f50);
  /* Mantém o footer no fim da página */
  display:flex;
  flex-direction:column;
  min-height:100vh;     /* fallback */
  min-height:100svh;    /* corrige em iOS/Safari */
}

main{flex:1 1 auto}

:root{
  --maxw:1100px;
  --gap:20px;
  --radius:18px;
  --shadow:0 10px 25px rgba(0,0,0,.25);
  --primary:#ffd000;
  --accent:#ef476f;
}

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

.sr-only{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* ===== Cabeçalho ===== */
.site-header{padding:24px 0}
.site-title{margin:0; font-size:clamp(1.5rem,3.5vw,2.4rem); letter-spacing:.5px}
.site-subtitle{margin:.25rem 0 0; opacity:.85}

/* ===== Seção do banner ===== */
.hero{padding:10px 0 24px}
.banner-link{display:block}
.banner-img{
  width:100%;
  height:auto;
  display:block;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:4px solid rgba(255,255,255,.15);
  background: #222;
  aspect-ratio: 16 / 9; /* garante proporção amigável em telas estreitas */
}
.banner-link:focus-visible{outline:3px dashed var(--primary); outline-offset:6px}
.banner-link:hover .banner-img{transform:translateY(-1px); transition:transform .15s ease}

.help-text{font-size:.95rem; opacity:.8; margin:.75rem 0 0}

/* ===== Conteúdo ===== */
.about{padding:24px 0 40px}
.about h2{font-size:clamp(1.25rem,3vw,1.6rem)}
.about p{max-width:75ch}

/* ===== Rodapé ===== */
.site-footer{border-top:1px solid rgba(255,255,255,.15); padding:18px 0; opacity:.9}

/* ===== Responsividade ===== */
@media (max-width:768px){
  .site-header{padding:18px 0}
  .about{padding:18px 0 28px}
}

@media (prefers-color-scheme: light){
  body{color:#1b1b1f; background:linear-gradient(135deg,#faf7ff,#f0effa)}
  .banner-img{border-color:rgba(0,0,0,.08)}
}