/* Tienda: pantalla de "proximamente" con el lenguaje visual de la landing. */

/* La pagina tiene poco contenido: sin esto, en pantallas altas queda una
   franja de fondo vacia debajo del pie. */
.pag-corta {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.pag-corta .soon { flex: 1; }

.soon {
  background: var(--green);
  color: var(--linen);
  position: relative;
  overflow: hidden;
}

.soon__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 56px;
  padding-block: 88px 100px;
}

.soon h1 {
  font-size: clamp(2.3rem, 5.5vw, 3.8rem);
  margin-bottom: 20px;
}
.soon h1 em { font-style: normal; color: var(--yellow); }

.soon__lead {
  font-size: 1.1rem;
  opacity: .92;
  max-width: 48ch;
  margin-bottom: 28px;
}

/* La lista hereda .checklist de la landing; solo ajustamos el color del tilde
   para que se lea sobre el verde. */
.soon__list { margin-bottom: 34px; }
.soon__list li { color: var(--linen); }
.soon__list li::before { background: var(--mint); color: var(--green); }

.soon__ctas { gap: 14px; }
.soon .btn--dark { border-color: var(--linen); }

.soon__art img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.soon .footer__bottom a { color: var(--linen); }

@media (max-width: 960px) {
  .soon__inner { grid-template-columns: 1fr; padding-block: 64px 72px; gap: 36px; }
  .soon__art { display: none; }
}