/* ============================================================================
   Alio · La página de pago
   ----------------------------------------------------------------------------
   Una sola columna estrecha y dos pasos numerados. No es minimalismo: quien
   llega aquí ya decidió pagar, y a partir de ese momento cada elemento que no
   sirva para completar el pago es una oportunidad de abandonarlo.
   ========================================================================== */

.pago {
  max-width: 620px;
  margin: 0 auto;
  padding: clamp(36px, 7vh, 64px) var(--gutter) clamp(56px, 10vh, 96px);
}

/* --- Cabecera ------------------------------------------------------------- */

.pago__cab {
  text-align: center;
  padding-bottom: clamp(28px, 4vh, 40px);
  border-bottom: 1px solid var(--p-border);
}

.pago__kicker {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--p-brass);
}

.pago__titulo {
  margin: var(--sp-8) 0 0;
  font-size: var(--text-h3);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
}

.pago__precio {
  margin: var(--sp-16) 0 0;
  font-size: clamp(40px, 7vw, 56px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-display);
}

.pago__precio span {
  margin-right: 2px;
  font-size: 0.52em;
  vertical-align: 0.44em;
  color: var(--p-sub);
}

.pago__precio small {
  font-size: 0.3em;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--p-sub);
}

.pago__nota {
  margin: var(--sp-16) auto 0;
  max-width: 46ch;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--p-sub);
}

/* --- Pasos ---------------------------------------------------------------- */

.pago__paso {
  margin-top: clamp(28px, 4vh, 40px);
}

/* El paso 2 se apaga hasta que hay sesión, pero NO se deshabilita: sigue
   pulsable, y al tocarlo abre el diálogo de la cuenta. Un bloque que no
   responde se lee como una página rota; uno que responde llevándote a lo que
   falta, se lee como una instrucción. */
.pago__paso.is-bloqueado {
  opacity: 0.5;
}

.pago__h2 {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  margin: 0 0 var(--sp-16);
  font-size: var(--text-lg);
  font-weight: 600;
}

.pago__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--p-slate);
  color: var(--p-on-slate);
  font-size: var(--text-sm);
  font-weight: 600;
}

.pago__texto {
  margin: 0 0 var(--sp-16);
  font-size: var(--text-body);
  line-height: 1.55;
  color: var(--p-sub);
}

.pago__cuenta {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  margin: 0;
  padding: var(--sp-16);
  border-radius: 14px;
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  font-size: var(--text-body);
  overflow-wrap: anywhere;
}

.pago__cuenta svg {
  flex: none;
  color: var(--sem-in);
}

.pago__ya {
  margin-top: var(--sp-12);
  padding: var(--sp-16);
  border-radius: 14px;
  background: var(--p-brass-soft);
  color: var(--p-on-brass);
  font-size: var(--text-sm);
  line-height: 1.55;
}

/* El aviso que NO tranquiliza: «ya pagas en la tienda, aquí pagarías dos veces».
   No estrena color —la paleta del sitio no tiene un tono de advertencia y
   inventarlo aquí lo dejaría suelto—: se apoya en el mismo fondo y gana peso con
   una barra de pizarra a la izquierda, que es lo que separa un dato de un aviso.
   El enlace va subrayado porque en un aviso el subrayado ES la señal de que hay
   algo que hacer. */
.pago__ya--ojo {
  border-left: 4px solid var(--p-slate);
  border-radius: 4px 14px 14px 4px;
}

.pago__ya--ojo a {
  color: inherit;
  text-decoration: underline;
}

/* --- El selector de método -----------------------------------------------
   Radios de verdad, no botones: el teclado los recorre con las flechas y el
   lector de pantalla anuncia «1 de 3». El círculo se dibuja a mano porque el
   nativo no se puede agrandar, y a 14 px es un blanco imposible con el pulgar.
   ------------------------------------------------------------------------ */

.metodos {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: var(--sp-12);
}

.metodo {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  padding: var(--sp-16) var(--sp-20);
  border-radius: 16px;
  border: 1px solid var(--p-border);
  background: var(--p-surface);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.metodo:hover {
  border-color: var(--p-slate);
}

.metodo.is-elegido {
  border-color: var(--p-slate);
  background: var(--p-slate-soft);
}

/* El radio nativo se esconde pero SIGUE existiendo: es lo que da el foco, las
   flechas y el estado al lector de pantalla. `opacity: 0` y no `display: none`
   —eso último lo sacaría del recorrido del teclado. */
.metodo input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.metodo__marca {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--p-border);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.metodo.is-elegido .metodo__marca {
  border-color: var(--p-slate);
  /* El punto interior es una sombra hacia dentro: así no hace falta un segundo
     elemento ni un pseudo que haya que centrar. */
  box-shadow: inset 0 0 0 5px var(--p-slate);
}

/* El foco se pinta sobre la TARJETA, no sobre el radio escondido: si no, el
   anillo aparecería en un punto de 1 px que nadie ve. */
.metodo:focus-within {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.metodo__texto {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.metodo__texto b {
  font-size: var(--text-body);
  font-weight: 600;
}

.metodo__texto em {
  font-style: normal;
  font-size: var(--text-sm);
  color: var(--p-sub);
}

.metodo__monto {
  flex: none;
  font-size: var(--text-body);
  font-weight: 600;
  white-space: nowrap;
}

/* --- El panel que aparece al elegir --------------------------------------- */

.panel {
  margin-top: var(--sp-20);
  padding: var(--sp-20);
  border-radius: 16px;
  border: 1px solid var(--p-border);
  background: var(--p-surface);
}

.panel__aviso {
  margin: 0;
  padding: var(--sp-16);
  border-radius: 12px;
  /* Ámbar, no rojo: que la confirmación sea a mano no es un fallo, es cómo
     funcionan estos dos métodos. Pero tiene que verse ANTES de pagar. */
  background: #fdf5e3;
  color: #6a4d10;
  font-size: var(--text-sm);
  line-height: 1.55;
}

.panel__pasos {
  margin: var(--sp-20) 0 0;
  padding-left: 20px;
  display: grid;
  gap: var(--sp-16);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--p-sub);
}

.panel__pie {
  margin: var(--sp-12) 0 0;
  font-size: var(--text-caption);
  line-height: 1.55;
  color: var(--p-sub);
}

/* --- Los datos que hay que copiar ---------------------------------------- */

.datos {
  margin-top: var(--sp-12);
  border-radius: 12px;
  border: 1px solid var(--p-border);
  background: var(--p-bg);
  overflow: hidden;
}

.datos__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-8) var(--sp-16);
  padding: 10px var(--sp-16);
  font-size: var(--text-sm);
}

.datos__fila + .datos__fila {
  border-top: 1px solid var(--p-border);
}

.datos__fila span {
  color: var(--p-sub);
}

.datos__fila b {
  /* Números que se van a dictar o teclear: tabulares para que no bailen. */
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--p-text);
}

/* --- Copiar --------------------------------------------------------------
   UNO SOLO, y cierra el bloque. Con un botón por fila había cuatro cosas que
   tocar para hacer un pago, y entre toque y toque hay que salir a la app del
   banco y volver: el que copia rápido pierde la cuenta de por dónde iba.

   Se ve SIEMPRE, no al pasar el ratón: en un teléfono —que es donde se hace un
   Pago Móvil— no hay ratón que pasar.
   ------------------------------------------------------------------------ */

.datos__pie {
  padding: var(--sp-12) var(--sp-16);
  border-top: 1px solid var(--p-border);
  background: var(--p-surface);
}

.datos__copiar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--p-border);
  background: var(--p-bg);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--p-text);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.datos__copiar:hover {
  border-color: var(--p-slate);
  color: var(--p-text);
}

.datos__copiar:focus-visible {
  outline: none;
  border-color: var(--p-slate);
  box-shadow: 0 0 0 3px var(--p-slate-soft);
}

/* El acuse cambia el COLOR además del texto: «Copiar» y «Copiado» se
   diferencian en una letra al final, y con el ojo en el formulario del banco
   eso no se nota. */
.datos__copiar.is-copiado {
  border-color: var(--sem-in);
  color: var(--sem-in);
  background: var(--p-bg);
}

.datos__copiar svg {
  flex: none;
}

.datos__copiar.is-copiado svg {
  display: none;
}

.datos__tasa {
  margin: 0;
  padding: 10px var(--sp-16);
  border-top: 1px solid var(--p-border);
  background: var(--p-surface);
  font-size: var(--text-caption);
  line-height: 1.55;
  color: var(--p-sub);
}

/* --- El formulario del aviso --------------------------------------------- */

.manualForm {
  display: grid;
  gap: var(--sp-16);
  margin-top: var(--sp-20);
  padding-top: var(--sp-20);
  border-top: 1px solid var(--p-border);
}

.manualForm .btn {
  width: 100%;
}

/* --- Sin rieles y pie ----------------------------------------------------- */

.pago__vacio {
  margin: 0;
  padding: var(--sp-20);
  border-radius: 14px;
  border: 1px dashed var(--p-border);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--p-sub);
}

.pago__vacio a {
  color: var(--p-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pago__legal {
  margin: clamp(28px, 4vh, 40px) 0 0;
  padding-top: var(--sp-20);
  border-top: 1px solid var(--p-border);
  font-size: var(--text-caption);
  line-height: 1.6;
  color: var(--p-sub);
}

.pago__legal a {
  color: var(--p-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ============================================================================
   LA PÁGINA DE GRACIAS
   ----------------------------------------------------------------------------
   Estrecha y centrada a propósito: aquí no hay nada que decidir. El trámite
   terminó y lo único que queda es leer qué pasa ahora, así que la página no
   compite consigo misma por la atención.
   ========================================================================== */

.gracias {
  max-width: 560px;
  margin: 0 auto;
  padding: clamp(40px, 8vh, 72px) var(--gutter) clamp(56px, 10vh, 96px);
  text-align: center;
}

/* El sello va en VERDE y no en latón. El latón es de Premium, y aquí todavía
   no hay Premium: hay un pago recibido, que es otra cosa. Prometerlo con el
   color de la celebración sería adelantar un acceso que aún no está dado. */
.gracias__sello {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto var(--sp-24);
  border-radius: 50%;
  background: var(--p-surface);
  border: 2px solid var(--sem-in);
  color: var(--sem-in);
}

.gracias__titulo {
  margin: 0 0 var(--sp-12);
  font-size: var(--text-h3);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  color: var(--p-text);
}

.gracias__bajada {
  margin: 0;
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--p-sub);
}

.gracias__bajada b {
  color: var(--p-text);
  font-weight: 600;
}

/* El detalle recupera la alineación de fila: son datos, y un dato centrado
   obliga a buscar dónde empieza cada uno. */
.gracias__datos {
  margin-top: var(--sp-24);
  text-align: left;
}

.gracias__pasos {
  margin-top: clamp(28px, 4vh, 40px);
  padding: var(--sp-24);
  border-radius: 18px;
  border: 1px solid var(--p-border);
  background: var(--p-surface);
  text-align: left;
}

.gracias__pasos h2 {
  margin: 0 0 var(--sp-16);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--p-sub);
}

.gracias__pasos ul {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: var(--sp-12);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--p-sub);
}

.gracias__pasos b {
  color: var(--p-text);
  font-weight: 600;
}

.gracias__botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-12);
  margin-top: clamp(28px, 4vh, 40px);
}

.gracias__ayuda {
  margin: var(--sp-24) 0 0;
  font-size: var(--text-caption);
  line-height: 1.6;
  color: var(--p-sub);
}

.gracias__ayuda a {
  color: var(--p-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}