:root{
    --brand:#005288;
    --brand-dark:#005A9E;
    --bg:#f9f9f9;
    --text:#333;
    --accent:#0078D7;
    --nav-height:64px;
    --max-width:1100px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    font-family:Arial, sans-serif;
    margin:0;
    padding:calc(var(--nav-height) + 20px) 16px 40px;
    background-color:var(--bg);
    color:var(--text);
    line-height:1.45;
}

.skip-link{
    position:absolute;
    left:-999px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}
.skip-link:focus{
    left:8px;
    top:8px;
    width:auto;
    height:auto;
    background:#fff;
    padding:8px;
    z-index:2000;
    border:2px solid var(--brand);
    color:var(--brand);
}

.site-nav{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:var(--nav-height);
    background:var(--brand);
    color:#fff;
    z-index:1000;
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 16px;
}
.site-nav .brand img{height:40px; display:block}
.nav-list{list-style:none; margin:0; padding:0; display:flex; gap:12px; align-items:center;}
.nav-list a{color:#fff; text-decoration:none; padding:8px 10px; display:inline-block;}
.nav-list a:focus{outline:2px solid rgba(255,255,255,0.85); outline-offset:2px}
.nav-list a.active{font-weight:700; border-bottom:2px solid rgba(255,255,255,0.9)}

.container{max-width:var(--max-width); margin:0 auto;}
.column{padding:20px; text-align:center}

.spacer{height:8px}
.anchor-spacer{height:60px}

/* Layout helpers for partner/social images */
.partners img, .socials img, .qrcodes img{margin:8px; max-width:100%; height:auto}
.partners, .socials, .qrcodes{display:flex; flex-wrap:wrap; justify-content:center; gap:12px}

/* Corrige posicionamento dos marcadores <li> dentro de .column
   Mantém a lista centralizada na página, mas o texto e os marcadores alinhados à esquerda. */
.column ul {
    margin: 0;                 /* remove margem padrão que desloca a lista */
    padding-left: 1.2em;       /* espaço para o marcador ficar próximo do texto */
    text-align: left;          /* garante que o conteúdo da lista seja alinhado à esquerda */
    display: inline-block;     /* permite centralizar a caixa da lista dentro de .column */
    max-width: 100%;           /* evita overflow em telas pequenas */
    vertical-align: top;
    list-style-position: outside;
}

/* Garante espaçamento consistente entre itens da lista */
.column ul li {
    margin: 0.25em 0;
}

/* Responsive */
@media (max-width:768px){
    .nav-list{overflow:auto; gap:8px}
    .container{padding:10px}
    body{padding:calc(var(--nav-height) + 10px) 12px 20px}
    .column ul { padding-left: 1.1em; }
}