/* Pulso · páginas de la compra (gracias y recuperar) y de la baja de la lista. Van sobre site.css y la plantilla
   de las legales. */

.compra .entrada { margin-top: 18px; font-size: 20px; line-height: 1.5; color: var(--tinta); text-wrap: pretty; }

.compra ol.pasos { margin-top: 14px; padding-left: 0; counter-reset: paso; }
.compra ol.pasos li {
  position: relative;
  margin-top: 12px;
  padding-left: 40px;
  counter-increment: paso;
}
.compra ol.pasos li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: 1px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gris-2);
  color: var(--tinta);
  font: 600 14px/26px var(--sans);
  text-align: center;
}

.compra .ruta { color: var(--tinta); font-weight: 600; overflow-wrap: anywhere; }

.compra .form { margin: 28px 0 0; }
.compra .form-nota { margin-top: 14px; text-wrap: pretty; }

@media (max-width: 560px) {
  .compra .entrada { font-size: 18px; }
  .compra .form-fila { flex-direction: column; align-items: stretch; gap: 10px; padding: 0; background: transparent; box-shadow: none; border-radius: 0; }
  .compra .form-fila:focus-within { outline: 0; }
  .compra .form-fila input { flex: none; height: 52px; padding: 0 20px; border-radius: 999px; background: var(--gris); box-shadow: 0 0 0 1px var(--linea) inset; }
  .compra .form-fila input:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
  .compra .boton-naranja { height: 52px; }
}

/* ---------- Gracias, con la compra lista (js/compra.js) ---------- */

.compra [hidden] { display: none !important; } /* gana a «.compra a.boton-naranja { display: inline-flex }» */

.compra a.boton-naranja,
.boton-tinta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  font: 600 16px var(--sans);
  text-decoration: none;
  white-space: nowrap;
}
.compra a.boton-naranja:focus-visible { outline-color: var(--tinta); }
.boton-tinta { background: var(--tinta); color: var(--blanco); transition: background-color 0.2s ease, transform 0.2s ease; }
.boton-tinta:hover { background: #2a2833; }
.boton-tinta:active { transform: scale(0.98); }

.compra ol.pasos-compra li { display: flex; align-items: center; min-height: 48px; margin-top: 16px; color: var(--tinta); }
.compra ol.pasos-compra li::before { top: 50%; transform: translateY(-50%); }

.compra .preparando { display: flex; align-items: center; gap: 14px; }
.rueda {
  flex: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--gris-2);
  border-top-color: var(--naranja);
  border-radius: 50%;
  animation: rueda 0.9s linear infinite;
}
@keyframes rueda { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rueda { animation-duration: 2.4s; } }

.licencia {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 10px 10px 10px 18px;
  border-radius: 18px;
  background: var(--gris);
  box-shadow: 0 0 0 1px var(--linea) inset;
}
.licencia code {
  flex: 1;
  min-width: 0;
  font: 13px/1.5 var(--mono);
  color: var(--tinta);
  word-break: break-all;
  line-break: anywhere; /* corta por el borde, nunca tras un guion: el guion es parte de la licencia */
  hyphens: none;
  user-select: all;
}
.licencia .boton-claro { flex: none; border: 0; box-shadow: 0 0 0 1px var(--linea) inset; cursor: pointer; }
.licencia .boton-claro:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
.compra .licencia-de { margin-top: 10px; font-size: 15px; color: var(--suave); }

@media (max-width: 560px) {
  .licencia { flex-direction: column; align-items: stretch; padding: 14px; }
  .licencia .boton-claro { height: 48px; }
}

/* ---------- Baja de la lista (baja.html, en/unsubscribe.html; js/baja.js) ---------- */

.compra .baja-accion { margin-top: 28px; }
.compra .baja-accion .boton-naranja { height: 52px; padding: 0 28px; }
.compra .baja-accion .boton-naranja:focus-visible { outline-color: var(--tinta); }
.compra .baja-accion .form-estado { color: var(--tinta); }
@media (max-width: 560px) {
  .compra .baja-accion .boton-naranja { width: 100%; }
}