/* Página de comerciales: lo que no está ya en estilos.css. */
.comerciales-portada { padding-bottom: 96px; }

.razones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.razon { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 28px; box-shadow: var(--sombra); }
.razon-icono { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--violeta-suave); color: var(--violeta); }
.razon-icono .i { width: 22px; height: 22px; }
.razon h3 { font-size: 19px; margin: 16px 0 8px; }
.razon p { color: var(--texto-suave); }
.razon a { color: var(--violeta-700); }

.comision-despues { margin-top: 10px; font-weight: 700; color: var(--verde); }
.condiciones { display: grid; gap: 12px; max-width: 760px; margin: 48px auto 0; }
.condiciones li { display: flex; gap: 11px; align-items: flex-start; }
.condiciones .i { color: var(--verde); margin-top: 0.22em; }

.pasos.pasos-cuatro { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1020px) {
  .razones, .pasos.pasos-cuatro { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .comerciales-portada { padding-bottom: 64px; }
  .razones, .pasos.pasos-cuatro { grid-template-columns: 1fr; }
}