.hero-plan{
  align-items: center;
}

.hero-badges{
  margin-top: 14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.pill{
  display:inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.18);
  color: rgba(228,221,255,0.92);
  font-size: .88rem;
}

.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}

.block{
  padding: 16px;
}

.media{
  padding: 12px;
}

.media img{
  width: 100%;
  display:block;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.14);
}

figcaption{
  margin-top: 10px;
  font-size: .9rem;
  color: rgba(228,221,255,0.78);
  line-height: 1.5;
}

.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }

.callout{
  margin-top: 14px;
  padding: 14px 16px;
}

.mini{
  padding: 14px 14px;
}

.mini h3{
  font-size: 1.02rem;
  margin-bottom: 8px;
}

/* Botón ghost, coherente al sitio */
.btn-ghost{
  background: rgba(0,0,0,0.18);
}

/* === MOBILE FIRST === */
@media (max-width: 900px){
  .split{ grid-template-columns: 1fr; }

  .hero-media{ display:none; } /* opcional: deja solo texto en móvil para velocidad */

  .grid-3{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
}