/*==================================================
  ESTILOS GERAIS
  ==================================================*/
 
html {
  scroll-behavior: smooth;
}
 
body {
  background-color: #ffffff;
}

/*==================================================
  FONTES
  ==================================================*/
@font-face {
  font-family: 'Neogrotesk Ess Alt';
  src: url('includes/font/Fontspring-DEMO-neogroteskessalt-ultralight.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: 'Neogrotesk Ess Alt';
  src: url('includes/font/Fontspring-DEMO-neogroteskessalt-light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Neogrotesk Ess Alt';
  src: url('includes/font/Fontspring-DEMO-neogroteskessalt-regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Neogrotesk Ess Alt';
  src: url('includes/font/Fontspring-DEMO-neogroteskessalt-bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Neogrotesk Ess Alt';
  src: url('includes/font/Fontspring-DEMO-neogroteskessalt-black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: 'Neogrotesk Ess Alt';
  src: url('includes/font/Fontspring-DEMO-neogroteskessalt-ultralightit.otf') format('opentype');
  font-weight: 200;
  font-style: italic;
}
@font-face {
  font-family: 'Neogrotesk Ess Alt';
  src: url('includes/font/Fontspring-DEMO-neogroteskessalt-lightit.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: 'Neogrotesk Ess Alt';
  src: url('includes/font/Fontspring-DEMO-neogroteskessalt-regularit.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'Neogrotesk Ess Alt';
  src: url('includes/font/Fontspring-DEMO-neogroteskessalt-boldit.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: 'Neogrotesk Ess Alt';
  src: url('includes/font/Fontspring-DEMO-neogroteskessalt-blackit.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
}

/*==================================================
  SEÇÕES DE CONTEÚDO: DESKTOP
  ==================================================*/
.why-vivermais-section1 {
  background-color: #01544f;
  /* Padding normal, pois o layout não será afetado */
  padding: 60px 20px;
  margin-top: 0;
  color: white;
  font-family: 'Neogrotesk Ess Alt', sans-serif;
  text-align: center;
}

.why-vivermais-section1 .container1 {
  max-width: 1200px;
  margin: 0 auto;
}

.why-vivermais-section1 h2 {
  text-align: center;
  font-size: 40px;
  font-weight: 900;
  margin-top: 40px;
  margin-bottom: 0;
  line-height: 1.2;
}

/* --- MUDANÇA FINAL E CORRETA --- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  max-width: 65%;
  margin: 0 auto; /* A centralização volta a ser automática */

  /* --- A MÁGICA ESTÁ AQUI --- */
  position: relative; /* Necessário para o z-index funcionar */
  z-index: 10; /* Garante que fique sobre o vídeo */
  transform: translateY(-120px); /* << AJUSTE AQUI para mover o bloco para cima SEM quebrar o layout */
  margin-bottom: -120px; /* << Compensa o espaço vazio que o transform cria embaixo */

  /* Efeitos visuais */
  border-radius: 0px;
  overflow: hidden; 
  box-shadow: 0 0 30px rgba(0,0,0,0.15);
}

/* << AJUSTE: O seletor agora é a.feature-item */
a.feature-item {
  padding: 20px;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  aspect-ratio: 1 / 1;
  color: white; /* Garante que o texto permaneça branco */
  text-decoration: none; /* Remove o sublinhado do link */
  transition: transform 0.15s ease-in-out; /* Adiciona transição suave */
}

/* << NOVO: Efeito ao passar o mouse */
a.feature-item:hover {
    transform: scale(1.02); /* Aumenta levemente o botão */
}

/* << NOVO: Efeito ao clicar */
a.feature-item:active {
    transform: scale(0.98); /* Diminui levemente o botão para dar feedback de clique */
    transition-duration: 0.05s;
}


/* Cores alternadas para os botões (agora como links) */
a.feature-item:nth-child(odd) {
  background-color: #40ac53; /* Cor escura */
}
a.feature-item:nth-child(even) {
  background-color: #4ece60; /* Cor clara */
}

.feature-item .icon {
  margin-bottom: 15px;
  height: 64px;
  display: flex;
  align-items: center;
}

/* Regra geral para o tamanho dos ícones */
.feature-item .icon img {
  width: 55px;
  height: 55px;
}

.feature-item h3 {
  font-size: 1.5rem;
  font-weight: 700; /* Bold */
  margin: 0 0 10px 0;
  color: white;
  font-family: 'Neogrotesk Ess Alt', sans-serif;
}

.feature-item p {
  font-size: 1rem;
  line-height: 1.5;
  color: white;
  margin: 0;
  font-family: 'Neogrotesk Ess Alt', sans-serif;
  font-weight: 300; /* Light */
}

.why-vivermais-section2 {
  background-color: #40ac53;
  padding: 0;
  color: white;
  font-weight: 100;
  font-family: 'Neogrotesk Ess Alt', sans-serif;
}

.why-vivermais-section2 .main-container {
  max-width: 700px;
  margin: 0 auto;
  padding: 0;
}

.why-vivermais-section2 .content-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
}

.why-vivermais-section2 .text-content {
  flex: 1;
  min-width: 300px;
  text-align: left;
  padding-right: 20px;
  font-family: 'Neogrotesk Ess Alt', sans-serif;
  font-weight: 200;
}

.why-vivermais-section2 .image-content {
  flex: 1;
  min-width: 350px;
  text-align: center;
}

.why-vivermais-section2 img {
  max-width: 100%;
  height: auto;
  display: block;
}

.why-vivermais-section3 {
  background-color: white;
  padding: 20px;
  font-family: 'Neogrotesk Ess Alt', sans-serif;
}

.why-vivermais-section3 .container3 {
  max-width: 800px;
  margin: 0 auto;
  color: #40ac53;
  text-align: center;
  font-size: 26px;
  letter-spacing: 5px;
  font-weight: 800;
  font-family: 'Neogrotesk Ess Alt', sans-serif;
}

/*==================================================
  MEDIA QUERIES: MOBILE
  ==================================================*/

/* --- Tablets (telas médias) --- */
@media (max-width: 992px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 colunas */
    max-width: 90%; /* Ajuste a largura para telas menores */
   
    /* Reduzimos um pouco o efeito para tablets */
    transform: translateY(-80px);
    margin-bottom: -80px;
  }
}

/* --- Celulares (telas pequenas) --- */
@media (max-width: 768px) {
  /* --- Bloco 1 Mobile --- */
  .why-vivermais-section1 h2 {
    font-size: 30px;
    margin-top: 30px;
  }
 
  .features-grid {
    grid-template-columns: 1fr; /* Grid passa a ter 1 coluna */
   
    /* Desativamos completamente o efeito em telas pequenas */
    transform: none;
    margin-bottom: 0;
   
    border-radius: 0;
    box-shadow: none;
    max-width: 100%;
  }

  /* --- Bloco 2 Mobile --- */
  .why-vivermais-section2 .content-wrapper {
    flex-direction: column;
  }
  .why-vivermais-section2 .text-content {
    padding-top: 20px;
    padding-left: 20px;
    text-align: center;
  }

  /* --- Bloco 3 Mobile --- */
  .why-vivermais-section3 .container3 {
    font-size: 22px;
  }
}

/* ============================================= */
/* AJUSTE ESPECÍFICO PARA O ÍCONE FORÇA COLETIVA */
/* ============================================= */
.feature-item .icon img[src*="forca-coletiva"] {
  width: 72px;
  height: 72px;
}