/* ---------------------------------------------- */
/* 1. CONFIGURAÇÕES GLOBAIS E VARIÁVEIS           */
/* ---------------------------------------------- */

:root {
  --cor-primaria: #1976D2; /* Topo e lado esquerdo */
  --cor-primaria-clara: #E6F0F8; /* Tom pastel para fundos */
  --cor-texto: #333333;
  --cor-texto-claro: #5f6c7b;
  --cor-fundo: #FFFFFF;
  --cor-destaque: #1976D2; /* Cor para links e botões dos Cards */

  --fonte-titulo: 'Poppins', sans-serif;
  --fonte-texto: 'Inter', sans-serif;

  --raio-borda: 16px; /* Cantos bem arredondados */
  --sombra-suave: 0 4px 15px rgba(0, 0, 0, 0.07);
  --sombra-hover: 0 6px 20px rgba(0, 0, 0, 0.12);
}

body {
  font-family: var(--fonte-texto);
  color: var(--cor-texto);
  background-color: var(--cor-fundo);
}

/* ---------------------------------------------- */
/* 2. NOVO TOPO (HERO SECTION)                    */
/* ---------------------------------------------- */

.hero-section {
  background: linear-gradient(135deg, var(--cor-primaria) 0%, #C9E2F1 100%);/* Topo lado direito */
  color: white;
  padding: 80px 0;
  position: relative;
  overflow: hidden; /* Garante que o SVG não "vaze" */
  display: flex;
  align-items: center;
  min-height: 40vh;
}

.hero-content h1 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 2.8rem;
  margin-bottom: 16px;
}

.hero-content .subtitle {
  font-size: 1.2rem;
  font-weight: 400;
  opacity: 0.9;
  max-width: 600px;
}

/* Estilo para a nova logo no topo */
.hero-logo {
  max-height: 100px; /* Defina a altura máxima da sua logo */
  margin-bottom: 24px; /* Espaço entre a logo e o título principal */
}

.fluid-shape {
  position: absolute;
  top: -20%;
  right: -15%;
  width: 50%;
  height: 140%;
  z-index: 0;
  opacity: 0.5;
}

.hero-content {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------- */
/* 3. MODERNIZAÇÃO DOS CARDS                      */
/* ---------------------------------------------- */

.card {
  border-radius: var(--raio-borda);
  box-shadow: var(--sombra-suave);
  border: none;
  transition: all 0.3s ease-in-out;
}

.card:hover {
  transform: translateY(-8px); /* Efeito de "levantar" */
  box-shadow: var(--sombra-hover);
}

.card .card-image img {
  border-radius: var(--raio-borda) var(--raio-borda) 0 0;
}

.card .card-content {
  padding: 24px;
}

.card .card-content p.cardsHome {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--cor-texto);
}

.card .card-action {
  background-color: transparent !important;
  border-top: 1px solid #EEE;
  padding: 16px 24px;
}

.card .card-action a {
  color: var(--cor-destaque) !important;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8rem;
  transition: color 0.2s ease;
}

.card .card-action a:hover {
  color: var(--cor-primaria) !important;
}

/* ---------------------------------------------- */
/* 4. AJUSTES EM OUTROS COMPONENTES               */
/* ---------------------------------------------- */

/* --- NOVO AJUSTE: Círculos dos Serviços Online --- */
.servicosEspaco .center img.circle {
  max-width: 100px; /* Tamanho reduzido */
  height: 100px;    /* Altura fixa para garantir a forma de círculo */
  object-fit: cover; /* Evita que a imagem se distorça */
  border: 3px solid var(--cor-primaria-clara);
  transition: all 0.3s ease;
}

.servicosEspaco .center:hover .circle {
  transform: scale(1.1);
  border-color: var(--cor-destaque);
}


/* --- NOVO AJUSTE: Altura padrão dos Destaques --- */
.highlights-column-content {
    display: flex;
    flex-direction: column;
    height: 100%; /* Faz o container preencher a altura da coluna do grid */
}

.highlights-column-content .destaque {
    flex: 1; /* Faz com que cada destaque ocupe o mesmo espaço vertical */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Empurra o conteúdo para cima e o link para baixo */
}

/* Ajustes gerais nos destaques */
.destaque {
    border-radius: var(--raio-borda);
    box-shadow: var(--sombra-suave);
    margin-bottom: 20px;
    overflow: hidden; /* Garante que o conteúdo se ajuste ao raio da borda */
}
.destaque .titulodestaque {
    background-color: var(--cor-primaria) !important;
    font-family: var(--fonte-titulo);
    padding: 12px;
    margin-top: 0; /* Remove margem padrão do h5 */
}

.destaque .pDestaque {
    padding: 0 20px 20px 20px; /* Ajusta o padding do parágrafo */
    
}

.destaque .pDestaque .linkDestaque {
  color: var(--cor-primaria);

}


/* Modernizando o menu */
.nav-extended {
    background-color: var(--cor-primaria) !important;
}

/* Modernizando o rodapé */
.page-footer {
    background-color: var(--cor-primaria) !important;
}

/* Escondendo o slider em telas de tablet para dar espaço aos destaques */
@media (max-width: 992px) {
    .slider.destaque {
        display: none;
    }
}

/* ---------------------------------------------- */
/* AJUSTES PARA O ALERTA DE SOLICITAÇÃO NÃO ENCONTRADA */
/* ---------------------------------------------- */

.alert-solicitacao-nao-encontrada {
    /* Garante margem adequada nas laterais */
    margin-left: 15px !important;
    margin-right: 15px !important;
    
    /* Padding interno mais generoso */
    padding: 20px !important;
    
    /* Texto um pouco maior para melhor legibilidade */
    font-size: 1.1rem;
    
    /* Modernização seguindo as variáveis CSS já definidas */
    border-radius: var(--raio-borda);
    box-shadow: var(--sombra-suave);
    
    /* Cor de fundo mais suave para o alerta de erro */
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

/* Ajuste responsivo para telas menores */
@media (max-width: 576px) {
    .alert-solicitacao-nao-encontrada {
        margin-left: 10px !important;
        margin-right: 10px !important;
        padding: 15px !important;
        font-size: 1rem;
    }
}

/* Ajuste para o container do conteúdo centralizado */
.conteudo-centralizado {
    /* Remove padding extra que pode estar limitando o espaço */
    padding: 0;
}

/* Ajuste no panel-body para dar mais espaço */
.panel-body .conteudo-centralizado .row {
    margin-left: 0;
    margin-right: 0;
}