@import url('assets/css/menu.css');

/* --- CONTAINER DO TÍTULO DA PÁGINA (Desktop) --- */
#page-title-container {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.page-title {
  font-size: 3vw;
  font-weight: bold;
  color: #00da88;
}

.page-title-white {
  color: white;
}

.page-subtitle {
  font-size: 1.5vw;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 5px;
}

/* --- CONTAINER PRINCIPAL (Desktop) --- */
#cand-content {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: left;
  width: 70%;
  background: rgba(0, 0, 0, 0.5);
  padding: 20px;
  border-radius: 10px;
}

#cand-content p {
  font-family: 'Akrobat Light', sans-serif;
  font-size: 1.2vw;
  color: white;
  margin: 10px 0;
}

/* --- GRADE DE CARTÕES (Desktop) --- */
.cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.card {
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid #00da88;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 218, 136, 0.2);
  text-align: center;
}

.card-title {
  font-size: 1.4vw;
  margin-bottom: 10px;
  color: #00da88;
  text-transform: uppercase;
}

/* Note: Caso o HTML use <p> dentro do .card para benefícios */
.card p {
  font-size: 1vw !important;
  line-height: 1.4;
  margin-bottom: 15px;
}

.card-price {
  font-size: 1vw;
  font-weight: bold;
  margin-bottom: 15px;
  color: #ffffff;
}

.card-price span {
  color: #00da88;
}

.card-button {
  background: #00da88;
  color: #000;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 1vw;
  cursor: pointer;
  transition: background 0.3s ease;
  text-transform: uppercase;
}

.card-button:hover {
  background: #00c76f;
  transform: scale(1.03);
}

@media (max-width: 767px) {
    /* Mantém o posicionamento e dimensões que você já tem */
    #page-title-container {
      position: absolute;
      top: 18%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      width: 90%;
    }
  
    .page-title {
      font-size: 6vw;
      margin-bottom: 10px;
    }
  
    .page-subtitle {
      font-size: 4vw;
    }
  
    #cand-content {
      position: absolute;
      top: 59%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 70%;
      padding: 15px;
    }
  
    /* Aqui vem os ajustes para tornar os cards mais compactos */
    .cards-container {
      grid-template-columns: 1fr;  /* Empilha os cards em 1 coluna */
      gap: 10px;                   /* Reduz o espaço entre eles (era 20px) */
    }
  
    .card {
      padding: 10px;               /* Menos padding interno que no desktop */
    }
  
    .card-title {
      font-size: 4vw;             /* Um pouco menor que antes */
      margin-bottom: 6px;
    }
  
    /* Texto dentro dos cartões (benefícios) */
    .card p {
      font-size: 2.4vw !important;           /* Ajuste conforme desejar */
      margin: 4px 0;
    }
  
    .card-price {
      font-size: 2.5vw;
      margin-bottom: 6px;
    }
  
    .card-button {
      font-size: 2vw;
      padding: 6px 12px;          /* Botão mais compacto */
    }
  }