body {
    font-family: 'Poppins', sans-serif;
    --coemp-dark-blue: #0D2B4A;
    --coemp-orange: #F58220;
    --coemp-light-bg: #F7F7F7;
    --coemp-text-secondary: #5F6C7B;
}
/* Estilos para o efeito 3D flip card */
.perspective {
    perspective: 1000px;
}
.flip-card-inner {
    transition: transform 0.7s;
    transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.flip-card-back {
    transform: rotateY(180deg);
}
/* Estilos para o acordeão FAQ */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out, border 0.3s ease-in-out;
    border: 2px solid transparent;
    border-top: 0;
}
.faq-item.open .faq-answer {
     max-height: 500px;
     border-color: var(--coemp-orange);
}
 .faq-item.open .faq-question {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.faq-answer-content {
    padding: 1.5rem;
}
.faq-answer-content p {
   text-align: justify;
}
.faq-icon {
    font-size: 2.5rem;
    font-weight: 200;
    transition: transform 0.3s ease-out;
}
 .faq-item.open .faq-icon {
    transform: rotate(45deg);
}
/* Estilo para borda na seção pilares */
#pilares .bg-white {
    border: 2px solid var(--coemp-orange);
}
/* Estilos para o menu lateral */
#side-menu {
    transition: width 0.3s ease;
}
#side-menu .menu-text {
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    transition: opacity 0.2s ease, max-width 0.3s ease 0.1s;
}
#side-menu:hover {
    width: 256px;
}
#side-menu:hover .menu-text {
    opacity: 1;
    max-width: 150px;
    transition: opacity 0.2s ease 0.1s, max-width 0.3s ease;
}
/* Estilos para animação de fade-in */
.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --------------- ANIMAÇÕES INTERATIVAS - PILARES --------------- */

/* Animação para a Missão */
@keyframes ir-para-frente {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(8px);
    opacity: 0.5;
  }
  100% {
    transform: translateX(0);
  }
}

/* Animação para a Lâmpada (Visão) */
@keyframes brilhar-lampada {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

/* Animação para os Valores */
@keyframes realce-verificado {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
}

/* Aplica a animação da Missão ao passar o mouse */
#missao:hover .icone-missao {
  animation: ir-para-frente 1.2s ease-in-out infinite;
}

/* Aplica a animação de brilho ao passar o mouse na Visão */
#visao #bulb {
    transform: rotate(180deg) scale(0.8);
    transform-origin: center;
}

/* Aplica a animação de brilho aos raios da nova lâmpada */
#visao:hover .ray {
  animation: brilhar-lampada 1s ease-in-out infinite;
}

/* --- Ajustes de Cor para Ícone de Valores --- */
#valores .icone-valores-escudo,
#valores .icone-valores-verificado {
    stroke: var(--coemp-dark-blue); /* Define a cor do escudo e do verificado como azul */
}

/* Aplica a animação dos Valores ao passar o mouse */
#valores:hover .icone-valores-verificado {
  /* Define o ponto de origem da animação para o centro do ícone */
  transform-origin: center;
  animation: realce-verificado 0.6s ease-in-out infinite;
}

/* ===== CÓDIGO DO LOGO - VERSÃO FINAL AJUSTADA ===== */

.logo {
    padding-top: 5px;
    display: flex;
    justify-content: center;
    min-height: 48px;
    /* Adicionado para evitar que o texto quebre a linha */
    white-space: nowrap; 
}

.logo a {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
}

/* "COEMP" no estado contraído (Padrão) */
.logo-main {
    font-size: 1.4rem; /* AJUSTE: Tamanho menor para caber no menu contraído */
    font-weight: 700;
    color: var(--coemp-orange);
    /* Adicionando transição para a mudança de tamanho */
    transition: font-size 0.3s ease-in-out; 
}

.logo-sub {
    font-size: 0.54rem;
    color: var(--coemp-orange);
    text-transform: uppercase;
    letter-spacing: 0.24em;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.2s ease, max-height 0.3s ease;
}

/* --- ESTADO EXPANDIDO (AO PASSAR O MOUSE) --- */

/* "COEMP" volta a ser grande */
#side-menu:hover .logo-main {
    font-size: 2rem; 
}

/* "Contabilidade Empresarial" reaparece */
#side-menu:hover .logo-sub {
    opacity: 1;
    max-height: 50px;
    margin-top: 3px;
    transition: opacity 0.2s ease 0.1s, max-height 0.3s ease;
}

/* ===== AJUSTE DE ROLAGEM PARA ÂNCORAS DO MENU ===== */
/*
  Este código adiciona um espaçamento no topo das seções quando
  você clica em um link no menu lateral (ex: Contato).
  Isso evita que o título da seção fique cortado no topo da página.
*/
#inicio,
#pilares,
#servicos,
#como-funciona,
#faq,
#contato {
    scroll-margin-top: -2rem; /* 80px de espaçamento. Você pode ajustar este valor se precisar (ex: 4rem ou 6rem). */
}