/* ---------- pagar y ver el pedido ---------------------------------
   Mismo sistema que la cuenta: rótulo en versales, raya, renglones, y
   todo en la retícula de 8 px. Lo único nuevo son los campos del envío,
   que heredan la línea de abajo de /entrar/ en un tamaño más chico,
   porque aquí son nueve y allá era uno. */

.pago { padding-top: 4.8rem; padding-bottom: 10rem; }
.pago__volver {
  display: inline-block; margin-bottom: 3.2rem; font-size: 1.4rem; letter-spacing: 0.02em;
  color: rgb(var(--s1-fg)); text-decoration: underline; text-decoration-color: rgb(var(--marca));
  text-decoration-thickness: 1.5px; text-underline-offset: 4px;
}
.pago__titulo {
  font-family: var(--font-heading); font-weight: 400; font-size: 4.4rem;
  line-height: 1.1; letter-spacing: 0.01em; margin: 0; text-wrap: balance;
}
.pago .cesta__vacia { text-align: left; padding: 3.2rem 0 0; }
/* Arriba, cuando el inventario corrigio la cesta antes de llenar nada. */
.pago__ajuste { margin: 2.4rem 0 0; max-width: 72rem; }

.pago__cuerpo {
  display: grid; grid-template-columns: minmax(0, 1fr) 38rem; gap: 7.2rem;
  align-items: start; margin-top: 4.8rem;
}

.pago__sesion {
  margin: 0 0 4rem; padding: 1.6rem 2rem; background: rgba(var(--s2-bg), 0.32);
  border: 1px solid rgba(var(--s1-fg), 0.12); font-size: 1.4rem; line-height: 1.6; font-weight: 400;
}
.pago__sesion b { font-weight: 400; overflow-wrap: anywhere; }
.pago__pronto { margin-top: 1.6rem; }

.pago__grupo { border: 0; margin: 0; padding: 0; min-width: 0; }
.pago__grupo + .pago__grupo { margin-top: 5.6rem; }
.pago__grupo legend { padding: 0; margin-bottom: 2.4rem; }

.pago__campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.2rem 3.2rem; }
.pago__campo { display: flex; flex-direction: column; min-width: 0; }
.pago__campo--ancho { grid-column: 1 / -1; }
.pago__etiqueta { font-size: 1.4rem; line-height: 1.4; letter-spacing: 0.02em; color: rgba(var(--s1-fg), 0.74); margin-bottom: 0.8rem; }
.pago__etiqueta em { font-style: normal; color: rgba(var(--s1-fg), 0.74); }
.pago__input {
  width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid rgb(var(--s1-fg)); border-radius: 0;
  background: none; padding: 0.7rem 0 1rem; margin: -0.7rem 0 0; height: 4.4rem;
  font-family: var(--font-body); font-size: 1.7rem; font-weight: 300; line-height: 1.5;
  color: rgb(var(--s1-fg)); -webkit-appearance: none; appearance: none;
}
.pago__input::placeholder { color: rgba(var(--s1-fg), 0.62); font-size: 1.5rem; }
.pago__input:focus { outline: none; border-bottom-width: 2px; padding-bottom: 0.9rem; }
.pago__select {
  cursor: pointer; padding-right: 2.4rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%231A1A1A' stroke-width='1.2'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E") no-repeat right 0.2rem top 1.9rem / 1.1rem auto;
}
.pago__select:invalid { color: rgba(var(--s1-fg), 0.62); }
.pago__ayuda { margin-top: 0.8rem; font-size: 1.35rem; line-height: 1.5; font-weight: 400; color: rgba(var(--s1-fg), 0.74); }
/* La talla de los anillos: una nota abajo, en el mismo gris de las ayudas. */
.pago__nota { margin: 2.4rem 0 0; font-size: 1.4rem; line-height: 1.65; font-weight: 400; color: rgba(var(--s1-fg), 0.74); max-width: 56ch; }

/* El envío: a lo mucho dos renglones (la más económica y, si de verdad
   llega antes, la más rápida). Blanco con línea fina; el elegido en lila
   con línea de tinta. Esquinas rectas, como todo en la tienda. */
.pago__envio-nota { margin: 0; font-size: 1.45rem; line-height: 1.65; font-weight: 300; max-width: 56ch; }
.pago__envio-nota a, .pago__otra-vez { color: inherit; text-decoration: underline; text-decoration-color: rgb(var(--marca)); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.pago__otra-vez { background: none; border: 0; padding: 0; margin: 0; font: inherit; font-weight: 400; cursor: pointer; }
.pago__envios { display: grid; gap: 1.2rem; margin-top: 2rem; }
.pago__envios[hidden] { display: none; }
.pago__envio {
  display: flex; align-items: center; gap: 1.6rem; min-height: 6.4rem; padding: 1.4rem 1.8rem;
  border: 1px solid rgba(var(--s1-fg), 0.24); background: rgb(var(--s1-bg)); cursor: pointer;
}
.pago__envio input { flex: none; width: 1.8rem; height: 1.8rem; margin: 0; accent-color: rgb(var(--s1-fg)); cursor: pointer; }
.pago__envio-txt { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; flex: 1; }
.pago__envio-nom { font-size: 1.55rem; line-height: 1.4; }
.pago__envio-dia { font-size: 1.35rem; line-height: 1.5; font-weight: 300; }
.pago__envio-marca { font-size: 1.35rem; line-height: 1.5; letter-spacing: 0.02em; }
.pago__envio-precio { flex: none; font-size: 1.55rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pago__envio.is-elegida { border-color: rgb(var(--s1-fg)); background: rgba(var(--s2-bg), 0.45); }
.pago__envio:focus-within { outline: 2px solid rgb(var(--s1-fg)); outline-offset: 2px; }
.pago__envios-grupo.is-mal .pago__envio-nota { color: rgb(164, 52, 47); }
/* En el telefono el precio (ya con "MXN") baja a su propio renglon, alineado
   con el texto: al lado le dejaba al texto 100 px y se partia palabra por palabra. */
@media screen and (max-width: 480px) {
  .pago__envio { flex-wrap: wrap; align-items: flex-start; row-gap: 0.4rem; }
  .pago__envio input { margin-top: 0.15rem; }
  .pago__envio-txt { flex: 1 1 0; }
  .pago__envio-precio { flex-basis: 100%; padding-left: 3.4rem; }
}

.pago__campo.is-mal .pago__etiqueta,
.pago__campo.is-mal .pago__ayuda { color: rgb(164, 52, 47); }
.pago__campo.is-mal .pago__input { border-bottom-color: rgb(164, 52, 47); }

.pago__resumen { top: 2.4rem; }
.pago__piezas { list-style: none; margin: 0 0 0.8rem; padding: 0 0 0.8rem; border-bottom: 1px solid rgba(var(--s1-fg), 0.16); }
.pago__piezas li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.6rem;
  padding: 0.8rem 0; font-size: 1.4rem; line-height: 1.45; font-variant-numeric: tabular-nums;
}
.pago__piezas li span:first-child { min-width: 0; overflow-wrap: anywhere; }
.pago__piezas li span:last-child { flex: none; }
.pago__error {
  margin: 1.6rem 0 0; padding: 1.4rem 1.6rem; border-left: 2px solid rgb(164, 52, 47);
  background: rgba(255, 255, 255, 0.6); font-size: 1.35rem; line-height: 1.6;
}
.pago__error a { color: inherit; text-underline-offset: 3px; }
.pago__resumen .boton { margin-top: 2.4rem; }
/* El botón de la tienda es lila, y aquí el resumen también: sobre lila se
   perdía. En esta caja el botón va en tinta. */
.pago__resumen .boton--negro { background: rgb(var(--s1-fg)); color: rgb(var(--s1-bg)); }
.pago__resumen .boton.is-espera { background: rgba(var(--s1-fg), 0.55); color: #fff; letter-spacing: 0.02em; cursor: progress; }
.pago__micro { margin-top: 1.6rem; }
.pago__legal { margin: 0.8rem 0 0; text-align: center; font-size: 1.35rem; line-height: 1.6; color: rgba(var(--s1-fg), 0.74); }
.pago__legal a { color: inherit; text-underline-offset: 3px; }

/* ---- el pedido ---- */
.pedido { max-width: 72rem; padding-top: 6.4rem; padding-bottom: 10rem; }
.pedido .cuenta__rotulo { margin-bottom: 1.2rem; }
.pedido__texto {
  margin: 2.4rem 0 0; max-width: 56rem; font-size: 1.6rem; line-height: 1.7; font-weight: 300; text-wrap: pretty;
}
.pedido__texto b { font-weight: 400; overflow-wrap: anywhere; }

.pedido__pasos {
  list-style: none; margin: 5.6rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.pedido__paso {
  position: relative; padding: 2.4rem 1.6rem 0 0;
  border-top: 1px solid rgba(var(--s1-fg), 0.16);
}
.pedido__punto {
  position: absolute; top: -0.6rem; left: 0; width: 1.1rem; height: 1.1rem; box-sizing: border-box;
  border-radius: 50%; background: rgb(var(--s1-bg)); border: 1px solid rgba(var(--s1-fg), 0.3);
}
.pedido__paso-t { font-size: 1.45rem; line-height: 1.4; color: rgba(var(--s1-fg), 0.74); }
.pedido__paso.is-hecho { border-top-color: rgb(var(--s1-fg)); }
.pedido__paso.is-hecho .pedido__punto { background: rgb(var(--s1-fg)); border-color: rgb(var(--s1-fg)); }
.pedido__paso.is-hecho .pedido__paso-t { color: rgb(var(--s1-fg)); }
.pedido__paso.is-ahora .pedido__punto { box-shadow: 0 0 0 4px rgb(var(--marca)); }
.pedido__paso.is-ahora .pedido__paso-t { font-family: var(--font-body); font-weight: 500; font-size: 1.6rem; }
.pedido__paso.is-ahora { border-top-color: rgba(var(--s1-fg), 0.16); }

.pedido__acciones { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 4rem; }
.pedido__acciones .boton { width: 24rem; margin-top: 0; }

.pedido__detalle { margin-top: 7.2rem; }
.pedido__totales { margin-top: 0.8rem; }
.pedido__destino { margin: 2.4rem 0 0; font-size: 1.4rem; line-height: 1.6; font-weight: 400; color: rgba(var(--s1-fg), 0.74); }

.pedido__espera { display: inline-block; width: 1.2rem; height: 1.2rem; margin-left: 1rem; vertical-align: 0.4rem;
  border: 1px solid rgba(var(--s1-fg), 0.25); border-top-color: rgb(var(--s1-fg)); border-radius: 50%;
  animation: pedido-gira 0.9s linear infinite; }
@keyframes pedido-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pedido__espera { animation: none; } }

@media screen and (max-width: 989px) {
  .pago__cuerpo { grid-template-columns: 1fr; gap: 4.8rem; }
  .pago__resumen { position: static; }
}
@media screen and (max-width: 749px) {
  .pago { padding-top: 3.2rem; padding-bottom: 8rem; }
  .pago__volver { margin-bottom: 2.4rem; }
  .pago__titulo { font-size: 3.4rem; }
  .pago__cuerpo { margin-top: 3.2rem; }
  .pago__campos { grid-template-columns: 1fr; gap: 2.8rem; }
  .pago__grupo + .pago__grupo { margin-top: 4.8rem; }
  .pedido { padding-top: 4rem; padding-bottom: 8rem; }
  .pedido__pasos { grid-template-columns: 1fr; margin-top: 4rem; }
  .pedido__paso { border-top: 0; border-left: 1px solid rgba(var(--s1-fg), 0.16); padding: 0 0 2.8rem 2.4rem; }
  .pedido__paso:last-child { padding-bottom: 0; border-left-color: transparent; }
  .pedido__punto { top: 0.35rem; left: -0.6rem; }
  .pedido__paso.is-hecho { border-left-color: rgb(var(--s1-fg)); }
  .pedido__paso.is-ahora { border-left-color: rgba(var(--s1-fg), 0.16); }
  .pedido__acciones { flex-direction: column; }
  .pedido__acciones .boton { width: 100%; }
}