/* ---------- Colores corporativos ---------- */
:root {
  --azul: #5889A9;
  --rojo: #901003;
  --blanco: #ffffff;
  --negro: #000000;
  --glass-bg: rgba(255, 255, 255, 0.13);
  --glass-border: rgba(255, 255, 255, 0.35);
  --shadow-neo: rgba(0, 0, 0, 0.25);
}

main {
        margin-top: 7%;
        background-color: #5889a9ad;
}

/* ---------- HERO ---------- */
.hero-hibrido {
  text-align: center;
  padding: 70px 20px 40px;
}

.hero-hibrido h1 {
  font-size: 42px;
  font-weight: 800;
  color: var(--blanco);
}

.hero-hibrido p {
  max-width: 700px;
  margin: 10px auto;
  color: #444;
  font-size: 18px;
  color: var(--blanco);
}

/* ---------- GRID ---------- */
.grid-hibrido {
  max-width: 1300px;
  margin: 40px auto 0px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 40px;
  padding-bottom: 92px;
}

/* ---------- TARJETAS 3D GLASS ---------- */
.card-hibrido {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  padding: 35px 25px;
  border-radius: 18px;
  text-align: center;
  cursor: pointer;

  /* 3D settings */
  transform-style: preserve-3d;
  perspective: 900px;
  transition: transform .45s ease, box-shadow .45s ease, border-color .45s ease;
  
  box-shadow: 
    0 8px 25px rgba(0,0,0,.20),
    inset 0 0 25px rgba(255,255,255,0.05);
}

/* ---------- EFECTO 3D DINÁMICO ---------- */
.card-hibrido:hover {
  transform: translateY(-18px) rotateX(9deg) rotateY(-9deg);
  border-color: var(--blanco);
  box-shadow: 
    0 25px 60px rgba(0,0,0,.28),
    inset 0 0 35px rgba(255,255,255,0.15);
  background: #5889a9ad;
}

/* Botón */
.contenedor-boton-contacto {
  text-align: center;
  margin-top: -3%;
  padding-bottom: 50px;
}

.boton-contacto {
  display: inline-block;
  padding: 14px 28px;
  background: #0077ff;
  color: #fff;
  border-radius: 8px;
  font-size: 18px;
  text-decoration: none;
  transition: 0.3s ease;
}

.boton-contacto:hover {
  background: #005fcc;
}

/* ---------- ICONOS GLASS ---------- */
.icono-hibrido {
  font-size: 55px;
  margin-bottom: 18px;
  background: var(--rojo);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.25));
}

/* ---------- TEXTOS ---------- */
.card-hibrido h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--negro);
  margin-bottom: 10px;
}

.card-hibrido p {
  font-size: 15px;
  color: #eee;
  letter-spacing: .3px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 600px) {
  .hero-hibrido h1 { font-size: 32px; }
  .card-hibrido:hover { transform: translateY(-10px); }
}

/* Justificar el texto del párrafo dentro de cada card */
.card-hibrido p {
  text-align: center;
}

/* Alinear la lista a la izquierda */
.card-hibrido ul {
  text-align: left;
  padding-left: 20px; /* asegura indentación elegante */
}

/* Alinear cada li a la izquierda sin afectar diseño */
.card-hibrido ul li {
  text-align: left;
  margin-bottom: 6px;
}