/* ===== BASE ===== */
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-family:Arial, Helvetica, sans-serif;
}

body{
  background:#0c0f14;
  color:#e8f5f5;
}

/* ===== HEADER ===== */
.top{
  text-align:center;
  padding:35px 20px;
  background:linear-gradient(180deg,#071a1c,#0f2c30);
  border-bottom:1px solid #123a3f;
}

.top h1{
  letter-spacing:2px;
  font-size:26px;
  color:#7ff6ef;
  margin-bottom:6px;
}

.top p{
  color:#9dd9d7;
  font-size:13px;
}

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

.hero h2{
  font-size:20px;
  color:#c9ffff;
  margin-bottom:18px;
}

/* BOTONES DE ACCIÓN */
.actions{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

.btn{
  padding:10px 16px;
  border-radius:10px;
  border:1px solid #1c4f52;
  background:#0c1f21;
  color:#d8ffff;
  text-decoration:none;
  transition:.25s;
  font-size:14px;
}
.btn:hover{
  border-color:#35e6da;
  color:#35e6da;
}

.btn.primary{
  background:#35e6da;
  color:#022e2d;
  border-color:#35e6da;
}
.btn.primary:hover{
  background:#5ff7ef;
}

.btn.secondary{
  background:#0f2e33;
}

/* ===== GRID TARJETAS ===== */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:18px;
  padding:25px 20px 40px;
  max-width:1100px;
  margin:auto;
}

.card{
  background:#0f1c20;
  border:1px solid #163c3f;
  border-radius:14px;
  padding:18px;
  transition:.25s;
}
.card:hover{
  border-color:#35e6da;
  transform:translateY(-2px);
}

.card h3{
  color:#bffdf9;
  margin-bottom:8px;
  font-size:16px;
}
.card p{
  color:#a9c9c7;
  font-size:13px;
  line-height:1.45;
}

/* ===== FOOTER ===== */
.footer{
  text-align:center;
  padding:20px 10px 28px;
  background:#071719;
  border-top:1px solid #123738;
  color:#8fb9b7;
  font-size:12px;
}

/* ===== RESPONSIVE ===== */
@media(max-width:720px){
  .hero h2{ font-size:18px; }
  .btn{ padding:9px 14px; }
}