.reglamento-hero {
  text-align:center;
  margin-bottom:40px;
}

.reglamento-hero h1 {
  font-size:48px;
  color:#f5c518;
  margin-bottom:15px;
}

.reglamento-hero p {
  max-width:700px;
  margin:auto;
  color:#cbd5e1;
  font-size:18px;
}

#reglamento-container {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:20px;
}

.rule-card {
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  overflow:hidden;

  transition:all .2s ease;
}

.rule-card:hover {
  transform:translateY(-4px);

  box-shadow:
  0 10px 25px rgba(0,0,0,.35);
}

.rule-header {
  background:rgba(245,197,24,.12);

  color:#f5c518;

  font-weight:700;

  padding:16px 20px;

  border-bottom:1px solid rgba(245,197,24,.15);
}

.rule-list {
  list-style:none;

  margin:0;
  padding:18px;
}

.rule-list li {

  padding:10px 0;

  border-bottom:
  1px solid rgba(255,255,255,.06);

  color:#e5e7eb;
}

.rule-list li:last-child {
  border-bottom:none;
}

@media(max-width:768px){

  .reglamento-hero h1{
    font-size:34px;
  }

}