* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --azul: #00256f;
  --azul-claro: #0a67d8;
  --azul-escuro: #061a4a;
  --laranja: #ff8a00;
  --amarelo: #ffc533;
  --cinza: #f4f7fb;
  --texto: #1f2637;
  --muted: #5c667d;
  --branco: #ffffff;
  --linha: #dce5f3;
}

html { scroll-behavior: smooth; }
body { font-family: "Segoe UI", Arial, sans-serif; color: var(--texto); background: var(--branco); }
img { display: block; max-width: 100%; }

/* NAV */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 999;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 12px clamp(28px,5vw,90px);
  background: rgba(255,255,255,0.98);
  box-shadow: 0 2px 14px rgba(0,37,111,0.08);
  backdrop-filter: blur(10px);
}
.logo-nav { display: inline-flex; align-items: center; gap: 14px; color: var(--azul); font-size: 1.1rem; font-weight: 800; text-decoration: none; }
.logo-nav img { width: 52px; height: 52px; border-radius: 50%; object-fit: contain; }
.nav ul { display: flex; gap: 24px; list-style: none; }
.nav a { color: var(--azul); font-size: 1rem; font-weight: 700; text-decoration: none; transition: color .2s; }
.nav a:hover { color: var(--laranja); }
.nav-buttons { display: flex; align-items: center; gap: 10px; }
.nav-btn-siga { background: var(--laranja); color: var(--azul-escuro); padding: 6px 16px; border-radius: 6px; font-weight: 700; font-size: 1rem; text-decoration: none; }
.nav-btn-cadastro { background: var(--azul-claro); color: #fff; padding: 6px 16px; border-radius: 6px; font-weight: 700; font-size: 1rem; text-decoration: none; }

/* HERO */
#hero {
  position: relative; display: flex; min-height: 100vh;
  align-items: center; justify-content: center; overflow: hidden;
  padding: 130px clamp(24px,5vw,90px) 72px;
  color: var(--branco);
  background:
    linear-gradient(110deg, rgba(0,37,111,.9) 0%, rgba(0,56,140,.83) 52%, rgba(10,103,216,.74) 100%),
    url("ARTE/FUNDO LOGO.png") center / cover;
}
.hero-content {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0,.95fr) minmax(320px,1fr);
  align-items: center; gap: clamp(40px,6vw,90px); width: min(1200px,100%);
}
.hero-badge { color: var(--laranja); font-size: 1rem; font-weight: 900; text-transform: uppercase; margin-bottom: 24px; }
#hero h1 { color: var(--branco); font-size: clamp(2.6rem,5vw,5.5rem); font-weight: 900; line-height: 1.05; margin-bottom: 22px; }
#hero p { color: rgba(255,255,255,.92); font-size: clamp(1rem,1.8vw,1.4rem); line-height: 1.6; margin-bottom: 40px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-hero {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 30px; border: 2px solid var(--laranja);
  border-radius: 8px; background: var(--laranja); color: var(--azul-escuro);
  font-size: 1rem; font-weight: 900; text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}
.btn-hero:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.25); }
.btn-outline { border-color: rgba(255,255,255,.7); background: transparent; color: var(--branco); }
.hero-preview {
  position: relative; min-height: clamp(300px,42vw,560px);
  border: 8px solid rgba(255,255,255,.13); border-radius: 8px; overflow: hidden;
  background: linear-gradient(rgba(54,118,211,.7),rgba(54,118,211,.7)), url("ARTE/FUNDO LOGO.png") center/cover;
}

/* SEÇÕES */
section { padding: 80px 24px; }
.container { width: min(1000px,100%); margin: 0 auto; }
.section-label { margin-bottom: 10px; color: var(--azul-claro); font-size: .75rem; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; }
h2 { margin-bottom: 20px; color: var(--azul-escuro); font-size: clamp(1.7rem,3.5vw,2.6rem); font-weight: 900; line-height: 1.2; }
.divider { width: 52px; height: 4px; margin-bottom: 32px; border-radius: 999px; background: var(--laranja); }

/* QUEM SOMOS */
#quem-somos { background: var(--branco); }
#quem-somos .flex { display: flex; align-items: center; gap: 60px; flex-wrap: wrap; }
#quem-somos .texto { flex: 1; min-width: 280px; }
#quem-somos p { color: var(--muted); font-size: 1rem; line-height: 1.8; }
#quem-somos p + p { margin-top: 14px; }
.card-destaque {
  width: min(300px,100%); padding: 36px 32px; border-radius: 8px; color: var(--branco);
  background: linear-gradient(135deg, rgba(10,103,216,.9), rgba(6,26,74,.96)), url("ARTE/LOGO CURTA.png") center/78% no-repeat;
  box-shadow: 0 20px 45px rgba(0,37,111,.18);
}
.card-destaque .numero { color: var(--amarelo); font-size: 3rem; font-weight: 900; line-height: 1; }
.card-destaque .bairro { color: var(--branco); font-size: 1.8rem; font-weight: 900; line-height: 1.1; }
.card-destaque .desc { margin-top: 8px; color: rgba(255,255,255,.82); font-size: .88rem; line-height: 1.5; }
.card-destaque hr { margin: 20px 0; border: 0; border-top: 1px solid rgba(255,255,255,.22); }

/* MVV */
#mvv { background: var(--cinza); }
.mvv-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.mvv-card { background: var(--branco); border-radius: 8px; padding: 30px 24px; border-top: 4px solid var(--azul-claro); }
.mvv-card .icon { font-size: 2rem; font-weight: 900; color: var(--azul-claro); margin-bottom: 14px; }
.mvv-card h3 { color: var(--azul-escuro); font-size: .92rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; }
.mvv-card p { color: var(--muted); font-size: .95rem; line-height: 1.78; }

/* AÇÕES */
#acoes { background: var(--branco); }
.acoes-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.acao-card { background: var(--cinza); border-radius: 8px; padding: 26px 22px; border: 1px solid var(--linha); transition: box-shadow .2s, transform .2s; }
.acao-card:hover { box-shadow: 0 6px 20px rgba(0,37,111,.1); transform: translateY(-3px); }
.acao-card .icon { color: var(--laranja); font-size: .75rem; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
.acao-card h4 { color: var(--azul-escuro); font-size: 1.1rem; font-weight: 800; margin-bottom: 8px; }
.acao-card p { color: var(--muted); font-size: .93rem; line-height: 1.7; }

/* REDES */
#redes {
  padding: 72px clamp(24px,5vw,90px);
  background: linear-gradient(110deg, rgba(0,37,111,.93), rgba(10,103,216,.86)), url("ARTE/FUNDO LOGO.png") center/cover;
  text-align: center;
}
#redes .section-label { color: var(--laranja); }
#redes h2 { color: var(--branco); }
.redes-grid { display: flex; flex-wrap: nowrap; justify-content: center; gap: 12px; max-width: 900px; margin: 36px auto 0; }
.rede-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  flex: 1; min-width: 0; padding: 13px 14px; border-radius: 8px;
  color: var(--branco); font-size: .88rem; font-weight: 900;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0,0,0,.22);
  transition: transform .2s, box-shadow .2s;
}
.rede-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.3); }
.rede-instagram { background: linear-gradient(45deg,#f09433,#dc2743,#bc1888); }
.rede-facebook  { background: #1877f2; }
.rede-youtube   { background: #ff0000; }
.rede-kwai      { background: var(--laranja); color: var(--azul-escuro); }
.rede-tiktok    { background: #010101; }

/* TRANSPARÊNCIA */
#transparencia { background: var(--cinza); }
.transp-intro { color: var(--muted); font-size: 1rem; line-height: 1.8; max-width: 640px; margin-bottom: 36px; }
.docs-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 14px; }
.doc-card {
  background: var(--branco); border-radius: 8px; padding: 22px 18px;
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--linha); border-left: 4px solid var(--azul-claro);
  text-decoration: none; transition: box-shadow .2s, transform .2s;
}
.doc-card:hover { box-shadow: 0 6px 18px rgba(0,37,111,.1); transform: translateY(-2px); }
.doc-icon { font-size: 1.1rem; font-weight: 900; color: var(--branco); background: var(--azul-claro); padding: 8px 10px; border-radius: 6px; flex-shrink: 0; }
.doc-card h4 { color: var(--azul-escuro); font-size: .95rem; font-weight: 800; margin-bottom: 3px; }
.doc-card span { color: var(--muted); font-size: .82rem; }

/* CONTATO */
#contato {
  background: var(--azul-escuro); color: var(--branco);
  padding: 72px clamp(24px,5vw,90px);
}
.contato-grid { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 60px; }
.contato-logo { display: flex; align-items: center; justify-content: center; }
.contato-logo img { width: clamp(160px,18vw,260px); border-radius: 50%; opacity: .92; filter: drop-shadow(0 8px 32px rgba(0,0,0,.35)); }
#contato .section-label { color: var(--laranja); }
#contato h2 { color: var(--branco); }
#contato p, #contato address { color: rgba(255,255,255,.78); font-size: 1rem; line-height: 1.7; font-style: normal; }
#contato address { margin-top: 24px; }
#contato strong { display: block; color: var(--branco); font-size: .85rem; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; margin-top: 20px; }
#contato strong.contato-label-first { margin-top: 0; }
#contato a { color: var(--branco); }

/* FOOTER */
footer {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px clamp(24px,5vw,90px);
  background: #03102e; color: rgba(255,255,255,.7); font-size: .9rem;
}
footer p { margin: 0; }
.footer-left { display: flex; flex-direction: column; gap: 2px; }
.footer-local { font-size: .82rem; opacity: .75; }

/* RESPONSIVO */
@media (max-width: 860px) {
  .hero-content { grid-template-columns: 1fr; }
  .contato-grid { grid-template-columns: 1fr; }
  .contato-logo { display: none; }
  #hero { min-height: auto; padding-top: 220px; padding-bottom: 60px; }
  .mvv-grid, .acoes-grid { grid-template-columns: repeat(2,1fr); }
  .redes-grid { flex-wrap: wrap; gap: 10px; }
  .rede-btn { flex: 0 0 calc(50% - 5px); }
  footer { flex-direction: column; align-items: flex-start; }

  /* NAV MOBILE */
  .nav {
    flex-direction: column;
    align-items: center;
    padding: 10px 16px;
    gap: 6px;
    text-align: center;
  }
  .logo-nav { flex-direction: column; align-items: center; gap: 4px; }
  .logo-nav img { width: 52px; height: 52px; }
  .logo-nav span { display: block; font-size: .72rem; font-weight: 800; color: var(--azul); line-height: 1.2; text-align: center; }
  .nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; width: 100%; }
  .nav ul li a { font-size: .75rem; white-space: nowrap; font-weight: 700; }
  .nav-buttons { width: 100%; justify-content: center; gap: 8px; }
  .nav-btn-siga, .nav-btn-cadastro { font-size: .75rem !important; padding: 3px 8px; text-align: center; border-radius: 5px; font-weight: 700; }
  #hero-badge { display: none; }
}
@media (max-width: 560px) {
  .mvv-grid, .acoes-grid { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; }
  .btn-hero { width: 100%; }
  .card-destaque { width: 100%; }
  .rede-btn { flex: 0 0 calc(50% - 5px); font-size: .82rem; padding: 11px 8px; }
}