:root{
--max-width: 980px;
--gap: 16px;
--bg: #ffffff;
--text: #222;
}


*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial}
body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}


.container{
max-width:var(--max-width);
margin:0 auto;
padding:24px;
display:flex;
align-items:center;
gap:var(--gap);
justify-content:center;
flex-direction:column;
}


.site-header{
padding:12px 0 16px;
}
.site-header .container, .site-footer .container {text-align:center; align-items:center; justify-content:center;}
.site-header .logo img {max-width: 100%; height:auto;}

.site-info h1{margin:12px 0 4px;font-size:1.6rem}
.site-info .tagline{margin:0;color:#555}


.site-content{
padding:40px 0;
text-align:center;
}

.site-footer{
background:#CCC;
padding:18px 0;
}

.site-footer .container{padding:8px;}
.site-footer p{margin:0;text-align:center}


/* Responsividade simples */
@media(min-width:720px){
.container{padding:32px; flex-direction:row;justify-content:space-between}
.site-info{align-self:center;text-align:left}
.site-content{padding:56px 0;text-align:left}
}