/* ===============================
   HERO (BANNER PRINCIPAL)
   =============================== */
.hero {
  max-width: 1200px;
  margin: 90px auto;
  padding: 150px 40px;
  text-align: center;

    /* Imagen + capa azul encima */
  background:
    linear-gradient(
      rgba(14,116,144,.65),
      rgba(14,116,144,.45)
    ),
    url("https://images.unsplash.com/photo-1507525428034-b723cf961d3e");

  background-size: cover;
  background-position: center;
  border-radius: 10px;
  color: #fff;
}

/* TITULO PRINCIPAL */
.hero h1 {
  font-size: 46px;
  font-weight: 800;
  max-width: 720px;
  margin: auto;
}

/* TEXTO DESCRIPTIVO */
.hero p {
  margin-top: 20px;
  font-size: 18px;
  opacity: .9;
}

/* CONTENEDOR DE BOTONES */
.hero-buttons {
  margin-top: 40px;
}

/* ===============================
   CARDS / TARJETAS
   =============================== */
.cards {
  display: flex;
  gap: 30px;
  justify-content: center;
  flex-wrap: wrap;
}
/* CARD INDIVIDUAL */
.card {
  width: 280px;
  padding: 26px;

  background: rgba(255,255,255,.85);
  backdrop-filter: blur(14px);
  border-radius: 24px;

  box-shadow: 0 20px 45px rgba(0,0,0,.1);
  transition: transform .3s ease;
}

/* EFECTO AL PASAR EL MOUSE */
.card:hover {
  transform: translateY(-10px);
}