* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background-color: #ECECEC;
}

/* HEADER */
.header {
  background-color: #1E8A70;
  height: clamp(60px, 8vw, 70px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 300;
  letter-spacing: clamp(6px, 2vw, 12px);
  font-size: clamp(14px, 2vw, 18px);
}

/* MAIN */
.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(60px, 10vw, 110px);
  padding: 0 20px;
}

/* BOTONES */
.buttons {
  display: flex;
  gap: clamp(30px, 8vw, 110px);
  flex-wrap: wrap;
  justify-content: center;
}

/* TARJETAS */
.card {
  width: clamp(160px, 28vw, 235px);
  height: clamp(160px, 28vw, 235px);
  border-radius: clamp(20px, 4vw, 30px);
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;

  font-size: clamp(24px, 5vw, 44px);
  font-weight: 500;
  color: #0A3A2B;

  transition: all 0.25s ease;
}

/* HOVER solo en desktop */
@media (hover: hover) {
  .card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
  }
}

.axon {
  background-color: #9CD263;
}

.mova {
  background-color: #9CCDC6;
  font-style: italic;
}

/* IMAGEN INFERIOR */
.network {
  width: 100%;
  height: clamp(200px, 35vw, 420px);
  margin-top: clamp(20px, 5vw, 40px);

  background: url('../assets/fondo-acme-3.png') no-repeat center bottom;
  background-size: contain;
  opacity: 0.85;
}

/* MOBILE EXTRA AJUSTES */
@media (max-width: 480px) {

  .buttons {
    gap: 25px;
  }

  .card {
    width: 100%;
    max-width: 260px;
  }

  .network {
    height: 200px;
  }
}