/* SEÇÃO 2 */

.secao2 {
  width: 100%;
  padding: 8% 8% 0;
  display: flex; /* Adicionado para o gap e align-items funcionarem */
  align-items: center;
  gap: 4vw;
}

.card2 {
  display: none;
}

.texto_mob {
  display: none;
}

.etapa {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 9;
  gap: 4vw;
}

.etapa img {
  width: 12vw;
  cursor: pointer;
}

.etapa .card {
  display: flex;
  flex-direction: column;
  /* Empilha os itens verticalmente */
  align-items: center;
  /* Centraliza os itens horizontalmente */
  text-align: center;
  /* Centraliza o texto */
  position: relative;
  background-color: #91b900;
  width: 50%;
  border-radius: 4vw;
  padding: 1vw 2vw 3vw;
}

/* Configurações das Setas */
.etapa .card .seta1 {
  position: absolute;
  width: 137vw;
  opacity: 0.7;
  right: -30%;
  top: -190%;
}

.etapa .card .seta2 {
  position: absolute;
  width: 17vw;
  opacity: 0.7;
  right: -10%;
  top: -85%;
}

.etapa .card .seta3 {
  position: absolute;
  width: 17vw;
  opacity: 0.7;
  right: -18%;
  top: -90%;
  transform: rotate(-8deg);
}

.etapa .card .seta4 {
  position: absolute;
  width: 20vw;
  opacity: 0.7;
  right: -12%;
  top: -105%;
  transform: rotate(10deg);
}

.etapa .card h2 {
  font-size: 7vw;
}

.etapa .card p {
  font-size: clamp(16px, 1.5vw, 1.5vw);
}

/* FOOTER */

/* MEDIA QUERIES */

@media screen and (max-width: 820px) {
  header .menu_opener {
    display: block;
  }

  header .menu_closer {
    display: none;
  }

  header .icon {
    background-color: transparent;
  }

  header .open {
    display: block;
  }

  .card1 {
    display: none;
  }

  .card2 {
    display: block;
    flex-direction: column;
    align-items: center;
    position: relative;
    border-radius: 4vw;
    padding: 1vw 2vw 3vw;
    margin-bottom: 5vw;
  }

  .etapa {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 9;
    gap: 4vw;
  }

  .etapa .card {
    width: 100%;
    padding: 4vw;
    align-items: center;
  }

  .path_pc {
    display: none;
  }

  .botoes--footer {
    margin: 0px 15px;
  }

  .botoes--footer span {
    position: absolute;
    text-align: center;
    margin-top: -10vw;
    margin-bottom: 10vw;
    font-size: 1.5em;
    margin-left: -20px;
  }

  .p_mob {
    display: flex;
  }

  .texto_mob {
    display: block; /* Alterado para aparecer no mobile */
    font-size: 1em;
  }
}

/* --- SOLUÇÃO DEFINITIVA COM CONTAINER ISOLADO --- */

/* Cria uma caixa dedicada para as imagens manterem o espaço no Flexbox */
.container-img {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Garante o espaço baseado na maior imagem (tabela de 400px ou largura mobile) */
  min-width: 12vw;
}

/* Estado padrão de transição suave */
.container-img img {
  transition:
    opacity 0.4s ease-in-out,
    visibility 0.4s ease-in-out;
  opacity: 1;
  visibility: visible;
}

/* A segunda imagem fica perfeitamente centralizada em cima da primeira */
.container-img img:nth-of-type(2) {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* QUANDO CLICAR: A primeira imagem some no lugar */
.etapa.mostrar-tabela .container-img img:nth-of-type(1) {
  opacity: 0;
  visibility: hidden;
}

/* QUANDO CLICAR: A segunda imagem aparece centralizada no mesmo eixo */
.etapa.mostrar-tabela .container-img img:nth-of-type(2) {
  opacity: 1;
  visibility: visible;
}

/* Ajuste específico para telas menores */
@media screen and (max-width: 820px) {
  .container-img {
    width: 100%;
    min-height: 350px; /* Garante que o container não suma no mobile */
  }
}

/* Remove o azul padrão para quem usa o mouse */
a:focus:not(:focus-visible) {
  outline: none;
}

/* Cria um estilo bonito e personalizado apenas para quem usa o teclado */
a:focus-visible {
  outline: 2px dashed #333;
  outline-offset: 4px;
}