.hero-plataforma { align-items: center; min-height: auto; padding: 56px 0 64px; }
.hero-plataforma h1 { font-size: clamp(2.6rem, 9vw, 4.4rem); }
.hero-dos { display: grid; gap: 12px; align-items: center; }
.hero-cara { width: min(70vw, 260px); height: auto; justify-self: center; grid-row: 1; }

@media (min-width: 820px) {
  .hero-plataforma { padding: 88px 0; }
  .hero-dos { grid-template-columns: 1.5fr 1fr; gap: 48px; }
  .hero-cara { grid-row: auto; width: 100%; max-width: 320px; }
}

.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.pasos li {
  position: relative;
  padding: 22px 20px 20px 78px;
  background: #fff;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.pasos b {
  position: absolute;
  left: 18px;
  top: 20px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--oro);
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: 1.5rem;
}
.pasos h3 { font-size: 1.35rem; margin-bottom: .3em; }
.pasos p { margin: 0; color: var(--tinta-suave); }

.ventajas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.ventajas div {
  padding: 22px;
  background: var(--crema);
  border-radius: var(--radio);
  box-shadow: 0 6px 0 var(--oro-osc);
}
.ventajas span { font-size: 34px; line-height: 1; }
.ventajas h3 { font-size: 1.3rem; margin: .6em 0 .3em; }
.ventajas p { margin: 0; color: var(--tinta-suave); }

.precio-grid { display: grid; gap: 8px; }
.plan {
  width: 100%;
  max-width: 440px;
  padding: 28px 26px;
  background: #fff;
  border: 4px solid var(--oro);
  border-radius: 24px;
  box-shadow: var(--sombra);
}
.plan-nombre { margin: 0; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--rojo); }
.plan-precio { margin: 4px 0 18px; font-size: 1.1rem; }
.plan-precio b { font-family: var(--f-titulo); font-weight: 400; font-size: 3.2rem; }
.plan-precio small { color: var(--tinta-suave); }
.plan ul { margin: 0 0 24px; padding: 0; list-style: none; display: grid; gap: 10px; }
.plan li { position: relative; padding-left: 28px; }
.plan li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #2a9d55;
  font-weight: 800;
}
.plan-nota { margin: 16px 0 0; font-size: .88rem; color: var(--tinta-suave); }

@media (min-width: 760px) {
  .pasos { grid-template-columns: repeat(3, 1fr); }
  .ventajas { grid-template-columns: repeat(3, 1fr); }
  .precio-grid { grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
  .precio-grid .plan { justify-self: end; }
}