* {
      font-family: 'Inter', sans-serif;
    }
    body {
      background: #f8fafc;
    }
    /* Cores institucionais azul e branco */
    :root {
      --azul-escuro: #0a58ca;
      --azul-primario: #0d6efd;
      --azul-claro: #e7f1ff;
      --branco: #ffffff;
    }
    .bg-azul-claro { background-color: var(--azul-claro); }
    .text-azul { color: var(--azul-escuro); }
    .btn-azul { background-color: var(--azul-primario); color: white; border-radius: 50px; padding: 10px 28px; font-weight: 600; transition: all 0.2s; }
    .btn-azul:hover { background-color: #0b5ed7; transform: translateY(-2px); color: white; }
    
    /* Hero com imagem de fundo personalizada + parallax */
    .hero-section {
      background: linear-gradient(rgba(0, 20, 40, 0.7), rgba(0, 20, 40, 0.75)), url('images/blickpixel-pylon.jpg');
      background-size: cover;
      background-position: center 30%;
      background-attachment: fixed;  /* Efeito parallax */
      color: white;
      padding: 100px 0;
      border-radius: 0 0 2rem 2rem;
      margin-bottom: 2rem;
    }
    /* Para melhor performance em mobile, desativa parallax */
    @media (max-width: 768px) {
      .hero-section {
        background-attachment: scroll;
        padding: 60px 0;
      }
    }
    .logo-icon-custom {
      background: var(--azul-primario);
      width: 50px;
      height: 50px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
    }
    /* Navbar com ícones nos links */
    .navbar-nav .nav-link i {
      margin-right: 8px;
      font-size: 0.9rem;
    }
    .navbar-nav .nav-link {
      font-weight: 500;
      color: #1e2a3a;
      transition: 0.2s;
    }
    .navbar-nav .nav-link:hover {
      color: var(--azul-primario);
    }
    .btn-outline-primary-custom {
      border: 1px solid var(--azul-primario);
      border-radius: 40px;
      padding: 6px 20px;
      color: var(--azul-primario);
      transition: 0.2s;
    }
    .btn-outline-primary-custom:hover {
      background: var(--azul-primario);
      color: white;
    }

    /* Ajuste para seções estilo aplicativo: ocupar quase toda largura */
    .app-section {
      padding-left: 12px;
      padding-right: 12px;
    }
    @media (min-width: 768px) {
      .app-section {
        padding-left: 24px;
        padding-right: 24px;
      }
    }
    /* Para os containers internos, usamos padding reduzido */
    .container-app {
      width: 100%;
      padding-right: 12px;
      padding-left: 12px;
      margin-right: auto;
      margin-left: auto;
    }
    @media (min-width: 1400px) {
      .container-app {
        max-width: 1320px;  /* ainda centraliza em telas muito grandes, mas com laterais próximas */
      }
    }
    /* Cards de serviços duas colunas */
    .service-card-two-col {
      transition: all 0.25s;
      border: none;
      border-radius: 1.5rem;
      background: white;
      box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05);
    }
    .service-card-two-col:hover { transform: translateY(-5px); box-shadow: 0 20px 30px -12px rgba(0,0,0,0.1); }
    
    /* Blog & Eventos - imagem maior que o corpo e arredondada */
    .event-card-modern {
      border-radius: 1.5rem;
      overflow: hidden;
      transition: all 0.3s ease;
      background: white;
      border: none;
      box-shadow: 0 8px 20px rgba(0,0,0,0.05);
      display: flex;
      flex-direction: column;
    }
    .event-card-modern:hover { transform: translateY(-6px); box-shadow: 0 18px 30px rgba(0,0,0,0.12); }
    .event-img-modern {
      height: 260px;
      background-size: cover;
      background-position: center;
      transition: transform 0.5s;
      border-radius: 1.2rem 1.2rem 0 0;
    }
    .event-card-modern:hover .event-img-modern { transform: scale(1.02); }
    .event-body {
      padding: 1.25rem;
    }
    /* Canal de Denúncia com fundo separador (gradiente suave) */
    .denuncia-bg-separator {
      background: linear-gradient(135deg, #eef2ff 0%, #ffffff 100%);
      border-top: 1px solid rgba(13,110,253,0.2);
      border-bottom: 1px solid rgba(13,110,253,0.2);
    }
    .consulta-response {
      background: #eef2ff;
      border-radius: 1rem;
      padding: 1rem;
      margin-top: 1rem;
      border-left: 4px solid #0a58ca;
    }
    footer {
      background: #0a2540;
      color: #dee2e6;
    }
    .value-badge { background: white; border-radius: 2rem; padding: 0.75rem 1.5rem; text-align: center; height: 100%; transition: all 0.2s; border: 1px solid rgba(0,0,0,0.05); }
    .value-badge i { font-size: 2rem; color: #0d6efd; margin-bottom: 0.8rem; }
    
    /* Ajuste extra para aproximar do estilo app: remover espaçamentos padrão */
    section {
      padding: 60px 0;
    }
    .bg-azul-claro, .denuncia-bg-separator, #contato {
      padding-left: 0;
      padding-right: 0;
    }
    .row {
      margin-left: 0;
      margin-right: 0;
    }
    .card, .value-badge {
      border-radius: 1.2rem;
    }