/* areadepracticas.css — cards públicas (Corregido sin conflictos de rejilla) */
html, body { background-color: #ffffff !important; }

.entorno-cards {
  padding: 20px;
}

.section-title {
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  color: var(--gray-dark);
  margin: 30px 0 20px;
}

.section-title:after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: var(--primary);
  margin: 10px auto 0;
  border-radius: 3px;
}

.card {
  border-radius: 12px;
  height: 500px;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: 0.3s;
  background: linear-gradient(145deg, #ffffff, #f8f9fa);
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 5px;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  z-index: 1;
}

.card-img-top { 
  height: 280px; 
  object-fit: cover; 
}

.card-body { 
  flex: 1; 
  overflow-y: auto; 
  padding: 15px; 
}

.card-title { 
  font-size: 18px; 
  font-weight: 700; 
}

.card-text { 
  font-size: 14px; 
  color: var(--gray-text); 
}

.card-footer-fixed {
  padding: 12px;
  text-align: center;
  background: #f8f9fa;
  border-top: 1px solid #eee;
  position: sticky;
  bottom: 0;
}

.card-scroll-content {
  flex: 1;
  overflow-y: auto;
}

.card-scroll-content::-webkit-scrollbar { 
  width: 5px; 
}

.card-scroll-content::-webkit-scrollbar-thumb { 
  background: var(--primary); 
  border-radius: 3px; 
}

/* --- Responsividad --- */

@media (max-width: 768px) {
  .entorno-cards { 
    padding: 10px; 
  }
  .section-title { 
    font-size: 22px; 
  }
  .card { 
    height: auto; 
  }
  .card-img-top { 
    height: 200px; 
  }
}

@media (max-width: 575px) {
  .entorno-cards { 
    padding: 5px; 
  }
  .card-img-top { 
    height: 160px; 
  }
}