/* --- ESTILOS PARA LA TARJETA DE INFORMACIÓN (VERSIÓN REFORZADA) --- */

/* 1. ESTILO DE LA TARJETA (EL 'WRAP') */
/* Usamos !important para asegurar que estos estilos anulen los del tema */
.tarjeta-info-hover .mcb-wrap-inner {
  background-color: #ffffff !important;
  border-radius: 15px !important;
  padding: 40px 50px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.4s ease-in-out !important;
  display: flex !important;
  align-items: center !important;
}

/* 2. ESTILO DEL TÍTULO (COLUMNA IZQUIERDA) */
.tarjeta-info-hover .column:first-child .column_attr p {
  font-size: 28px !important;
  font-weight: 600 !important;
  color: #222222 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  transition: color 0.4s ease-in-out !important;
}

/* 3. ESTILO DE LA DESCRIPCIÓN (COLUMNA DERECHA) */
.tarjeta-info-hover .column:last-child .column_attr p {
  font-size: 16px !important;
  color: #666666 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  transition: color 0.4s ease-in-out !important;
}

/* 4. EFECTO HOVER */
.tarjeta-info-hover .mcb-wrap-inner:hover {
  background-color: #3069fe !important;
}

.tarjeta-info-hover .mcb-wrap-inner:hover * {
  color: #ffffff !important;
}