<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Open Sans', sans-serif;
    background: #f8fafc;
    color: #1f1f1f;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

/* 1. TOPO ACESSIBILIDADE */
.topo-acessibilidade {
    background: #004899;
    color: white;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 0 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    flex-wrap: wrap;
}

.topo-acessibilidade a,
.topo-acessibilidade button {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    display: flex;
    align-items: center;
    gap: 6px;
}

.topo-acessibilidade a:hover,
.topo-acessibilidade button:hover {
    opacity: 0.85;
    text-decoration: underline;
}

.topo-acessibilidade a:focus,
.topo-acessibilidade button:focus {
    outline: 2px solid #ffcc00;
    outline-offset: 3px;
    border-radius: 3px;
}

/* 2. CABEÇALHO */
.cabecalho {
    height: 145px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 70px;
    background: white;
    border-bottom: 1px solid #e2e8f0;
}

.logo { display: flex; align-items: center; }
.logo img { width: 360px; max-width: 100%; height: auto; display: block; }

.cards-cabecalho { display: flex; gap: 25px; }

.card-topo {
    width: 280px;
    height: 85px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: #fff;
}
.card-topo .icone-wrapper { font-size: 32px; color: #009846; }
.card-topo .icone-wrapper.azul-icon { color: #ffb300; }
.card-topo strong { color: #2d3748; font-family: 'Montserrat', sans-serif; font-size: 15px; }
.card-topo small { color: #718096; font-size: 11px; }

/* 3. MENU */
.menu {
    background: #004899;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 999;
}
.menu > ul {
    display: flex;
    list-style: none;
    gap: 10px;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
}
.menu > ul > li { position: relative; }
.menu > ul > li > a { display: block; padding: 15px 18px; color: white; }
.menu > ul > li:hover { background: #003570; }

.menu ul.submenu {
    display: none;
    position: absolute;
    top: 48px;
    left: 0;
    background: white;
    min-width: 300px;
    list-style: none;
    flex-direction: column;
    padding: 10px 0;
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
    z-index: 9999;
}
.menu ul.submenu li { width: 100%; background: white; }
.menu ul.submenu li a {
    display: block;
    color: #1f1f1f;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}
.menu ul.submenu li a:hover { background: #f1f5f9; color: #004899; }
.menu li.dropdown:hover > ul.submenu { display: flex; }

/* 4. BANNER PRINCIPAL */
.banner {
    height: 450px;
    background:
        linear-gradient(to right, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.8) 40%, rgba(255,255,255,0) 80%),
        url("cabedelo.jpg");
    background-size: cover;
    background-position: top right;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 70px;
    border-bottom: 4px solid #009846;
}
.banner-texto h2 { font-family: 'Montserrat', sans-serif; font-size: 46px; font-weight: 800; color: #004899; line-height: 1.2; }
.banner-texto h2 span { color: #009846; }
.banner-texto p { margin: 22px 0; font-size: 18px; color: #4a5568; line-height: 1.5; }
.botao { display: inline-block; background: #004899; color: white; padding: 14px 32px; border-radius: 4px; font-family: 'Montserrat', sans-serif; font-weight: 700; text-transform: uppercase; font-size: 13px; }
.botao:hover { background: #003570; }
.banner-lateral { width: 350px; display: flex; flex-direction: column; gap: 12px; }
.card-lateral { background: white; border-radius: 6px; padding: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); border-left: 4px solid #0071bc; display: flex; align-items: center; gap: 15px; text-decoration: none; color: inherit; }
.card-lateral:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.12); }
.card-lateral .ico { font-size: 20px; color: #004899; }
.card-lateral strong { color: #004899; font-family: 'Montserrat', sans-serif; font-size: 14px; }

/* 5. ACESSO RÁPIDO */
.container { max-width: 1320px; margin: 0 auto; padding: 50px 30px; }
.titulo-secao-centro { text-align: center; margin-bottom: 40px; }
.titulo-secao-centro h2 { font-family: 'Montserrat', sans-serif; font-size: 26px; color: #004899; text-transform: uppercase; letter-spacing: 1px; }
.titulo-secao-centro .barra-verde { width: 80px; height: 4px; background: #009846; margin: 8px auto 0; }
.grid-servicos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.servico { height: 140px; background: white; border: 1px solid #e2e8f0; border-radius: 8px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.02); font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; color: #4a5568; text-align: center; cursor: pointer; }
.servico:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0,0,0,0.08); border-color: #004899; }
.servico .icone { font-size: 32px; }
.servico:nth-child(odd) .icone { color: #004899; }
.servico:nth-child(even) .icone { color: #009846; }

/* 6. NOTÍCIAS */
.noticias-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; border-bottom: 2px solid #e2e8f0; padding-bottom: 10px; }
.noticias-topo h2 { font-family: 'Montserrat', sans-serif; color: #004899; font-size: 26px; }
.noticias-topo .btn-noticias { background: transparent; color: #004899; border: 1px solid #004899; padding: 8px 16px; border-radius: 4px; font-weight: 700; font-size: 12px; }
.noticias-topo .btn-noticias:hover { background: #004899; color: white; }
.grid-noticias { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.noticia { 
    background: white; 
    border: 1px solid #e2e8f0; 
    border-radius: 8px; 
    overflow: hidden; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.04); 
    display: flex !important;
    flex-direction: column !important;
}

.noticia .img-placeholder { 
    width: 100% !important; 
    height: 180px !important; 
    background: #e2e8f0 !important; 
    display: block !important; 
    overflow: hidden !important;
    position: relative !important;
}

.noticia .img-placeholder i.fas {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    font-size: 0px !important;
    color: transparent !important;
}

.noticia .img-placeholder img {
    width: 100% !important;
    height: 180px !important;
    object-fit: cover !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

.noticia-conteudo { 
    padding: 18px !important; 
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.noticia-data { font-size: 12px; color: #718096; margin-bottom: 8px; font-weight: 600; }
.noticia h3 { font-family: 'Montserrat', sans-serif; color: #004899; font-size: 15px; margin-bottom: 10px; line-height: 1.4; }
.noticia p { font-size: 13px; color: #4a5568; line-height: 1.5; }

/* 7. INDICADORES */
.indicadores h2 { font-family: 'Montserrat', sans-serif; color: #004899; font-size: 24px; margin-bottom: 20px; }
.grid-indicadores { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.indicador { height: 110px; background: white; border: 1px solid #e2e8f0; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 15px; box-shadow: 0 4px 6px rgba(0,0,0,0.02); }
.indicador .icone { font-size: 28px; color: #004899; }
.indicador.verde .icone { color: #009846; }
.indicador span { font-size: 13px; color: #718096; font-weight: 600; }
.indicador strong { font-family: 'Montserrat', sans-serif; font-size: 24px; color: #004899; display: block; }
.indicador.verde strong { color: #009846; }

/* 8. DESTAQUES */
.destaques h2 { font-family: 'Montserrat', sans-serif; color: #004899; font-size: 24px; margin-bottom: 20px; }
.grid-destaques { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.destaque { height: 140px; border-radius: 8px; color: white; display: flex; flex-direction: column; justify-content: center; align-items: center; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 16px; text-align: center; padding: 20px; cursor: pointer; }
.destaque.azul { background: #003570; }
.destaque.verde-bg { background: #007a38; }
.destaque:hover { opacity: 0.95; transform: scale(1.02); }

/* 9. GESTÃO DIGITAL */
.gestao-digital { background: #0b1a30; color: white; padding: 50px 70px; display: flex; align-items: center; gap: 40px; }
.gestao-digital h2 { font-family: 'Montserrat', sans-serif; font-size: 36px; font-weight: 800; width: 240px; line-height: 1.1; border-right: 2px solid #1a2e4c; }
.gestao-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; flex: 1; }
.gestao-card { background: white; color: #0b1a30; min-height: 160px; border-radius: 6px; padding: 20px; text-align: center; }
.gestao-card .icone { font-size: 32px; margin-bottom: 12px; color: #004899; }
.gestao-card strong { font-family: 'Montserrat', sans-serif; font-size: 14px; display: block; margin-bottom: 6px; }
.gestao-card small { color: #718096; font-size: 11px; }

/* 10. CONTATOS */
.contatos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px; padding: 40px 70px; background: white; border-top: 1px solid #e2e8f0; }
.contato-item { display: flex; align-items: center; gap: 15px; font-size: 14px; color: #4a5568; }
.contato-item .icone { font-size: 24px; color: #004899; }

/* 11. RODAPÉ */
.rodape { background: #004899; color: white; padding: 50px 70px; display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 40px; border-top: 4px solid #009846; }
.rodape h2 { font-family: 'Montserrat', sans-serif; font-size: 30px; margin-bottom: 10px; }
.rodape p, .rodape li { font-size: 14px; line-height: 1.8; color: #e2e8f0; }
.rodape ul { list-style: none; }
.rodape ul li { cursor: pointer; margin-bottom: 8px; }
.rodape ul li:hover { text-decoration: underline; }


/* ALTO CONTRASTE */
body.alto-contraste {
    background: #000 !important;
    color: #fff !important;
}

body.alto-contraste * {
    background-image: none !important;
    box-shadow: none !important;
}

body.alto-contraste p,
body.alto-contraste span,
body.alto-contraste h1,
body.alto-contraste h2,
body.alto-contraste h3,
body.alto-contraste h4,
body.alto-contraste h5,
body.alto-contraste h6,
body.alto-contraste strong,
body.alto-contraste small,
body.alto-contraste li,
body.alto-contraste a,
body.alto-contraste button {
    color: #fff !important;
}

body.alto-contraste .menu,
body.alto-contraste .topo-acessibilidade,
body.alto-contraste .rodape,
body.alto-contraste .gestao-digital {
    background: #000 !important;
}

body.alto-contraste .cabecalho,
body.alto-contraste .noticia-card,
body.alto-contraste .indice-noticias,
body.alto-contraste .card-topo,
body.alto-contraste .servico,
body.alto-contraste .noticia,
body.alto-contraste .indicador,
body.alto-contraste .gestao-card,
body.alto-contraste .card-lateral,
body.alto-contraste .destaque {
    background: #111 !important;
    border: 1px solid #fff !important;
}

body.alto-contraste .submenu,
body.alto-contraste .submenu li,
body.alto-contraste .submenu li a {
    background: #111 !important;
    color: #fff !important;
}

body.alto-contraste .submenu li a:hover {
    background: #222 !important;
}

body.alto-contraste .botao,
body.alto-contraste .busca-site button {
    background: #fff !important;
    color: #000 !important;
}


/* RESPONSIVIDADE */
@media(max-width: 1024px) {
    .cabecalho, .banner, .gestao-digital, .contatos, .rodape { padding: 30px; flex-direction: column; height: auto; }
    .cards-cabecalho { flex-direction: column; width: 100%; }
    .card-topo { width: 100%; }
    .logo img { width: 300px; }
    .menu { height: auto; padding: 10px 0; }
    .menu > ul { flex-direction: column; width: 100%; gap: 0; }
    .menu ul.submenu { position: static; box-shadow: none; width: 100%; }
    .grid-servicos { grid-template-columns: repeat(3, 1fr); }
    .grid-noticias { grid-template-columns: repeat(2, 1fr); }
    .grid-indicadores { grid-template-columns: repeat(2, 1fr); }
    .grid-destaques { grid-template-columns: repeat(2, 1fr); }
    .gestao-cards { grid-template-columns: repeat(2, 1fr); }
    .contatos { grid-template-columns: 1fr; }
    .rodape { grid-template-columns: 1fr; }
    .gestao-digital h2 { border-right: none; padding-bottom: 15px; }
    .banner-lateral { width: 100%; margin-top: 20px; }
}
</style>