/* Enlaces de pago de bonos (Alex, 6/11/2026): el mismo vale que /bonos de la web (web-propuesta/public/css/estilo.css), con el
   formulario limpio debajo. Va después de reserva.css. Al confirmarse el pago, el vale se dibuja con un trazo (unos 2 s, sin librerías). */
.lectura.pago{max-width:520px;margin:24px auto 28px;padding:0 16px}
.pago:focus{outline:none}

/* ── El vale ── */
.bono{--corte:116px;--muesca:11px;--fondo:var(--blanco);--texto:var(--tinta);--tenue:var(--suave);--troquel:var(--linea);filter:drop-shadow(0 0 .6px rgba(20,42,37,.5)) drop-shadow(0 16px 26px rgba(20,42,37,.08))}
.bono-dos{--fondo:var(--posidonia);--texto:#fff;--tenue:#BFD6CF;--troquel:rgba(255,255,255,.34);filter:drop-shadow(0 18px 30px rgba(20,42,37,.24))}
.bono-papel{background:var(--fondo);color:var(--texto);border-radius:22px;
  -webkit-mask:radial-gradient(circle var(--muesca) at 0 var(--corte),#0000 calc(var(--muesca) - .5px),#000 var(--muesca)),radial-gradient(circle var(--muesca) at 100% var(--corte),#0000 calc(var(--muesca) - .5px),#000 var(--muesca));-webkit-mask-composite:source-in;
  mask:radial-gradient(circle var(--muesca) at 0 var(--corte),#0000 calc(var(--muesca) - .5px),#000 var(--muesca)),radial-gradient(circle var(--muesca) at 100% var(--corte),#0000 calc(var(--muesca) - .5px),#000 var(--muesca));mask-composite:intersect}
.bono-cab{box-sizing:border-box;height:var(--corte);margin:0 22px;padding:22px 2px 0;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;border-bottom:1.5px dashed var(--troquel)}
body.pub .bono-cab h1{margin:0;font:500 28px/1.1 var(--serif);color:inherit;letter-spacing:0}
body.pub .bono-tipo{margin:6px 0 0;font-size:16px;line-height:1.3;color:var(--tenue)}
body.pub .bono-precio{margin:-4px 0 0;font:500 64px/1 var(--serif);color:inherit;white-space:nowrap;font-variant-numeric:lining-nums}
body.pub .bono-concepto{margin:0;padding:18px 24px 22px;font-size:16px;line-height:1.5;color:inherit}

/* ── Formulario ── */
.pago-form{display:grid;gap:14px;margin-top:26px}
body.pub .pago-form .field{margin:0}
body.pub .pago-form .check{margin:2px 0 4px}
body.pub .pago-form .cta{width:100%}
body.pub .pago-condiciones{margin:0;font-size:14px;line-height:1.5;color:var(--suave)}
.pago-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
body.pub .pago-seguro{display:flex;gap:10px;margin:16px 2px 0;font-size:14px;line-height:1.5;color:var(--suave)}
.pago-seguro svg{flex:none;margin-top:2px;color:var(--agua-osc)}
.pago-error{margin:0;padding:12px 14px;border-radius:12px;background:#FBEFEF;color:var(--error);font-size:15px;line-height:1.45}

/* ── Vueltas sin confirmar ── */
.pago-tarjeta{background:var(--blanco);border:1px solid var(--linea);border-radius:22px;padding:30px 22px 26px}
.pago-res{text-align:center}
body.pub .pago-res h1{margin:0 0 10px;font-size:32px}
body.pub .pago-res p{margin:0 0 16px;font-size:17px;line-height:1.5;color:var(--tinta)}
.pago-res .spin{margin:0 auto 18px}
body.pub .pago-res .cta,body.pub .pago-final .cta{display:flex;align-items:center;justify-content:center;width:100%;text-decoration:none;color:#fff}
body.pub .pago-wa{display:block;margin-top:14px;font-size:15px;color:var(--posidonia);text-align:center}

/* ── Pago confirmado: el vale dibujado ── */
.vale{position:relative;--borde-vale:var(--agua-osc)}
.vale-trazo{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.vale-fondo{fill:var(--blanco)}
.vale-linea{fill:none;stroke:var(--borde-vale);stroke-width:1.5}
.vale-corte{stroke:var(--linea);stroke-width:1.5;stroke-dasharray:5 5}
.vale-sup,.vale-inf{position:relative;text-align:center}
.vale-sup{padding:28px 24px 20px}
.vale-inf{padding:20px 24px 26px}
.vale-sello{position:relative;display:block;width:56px;height:56px;margin:0 auto 14px}
.vale-sello::before{content:"";position:absolute;inset:-18px;border-radius:50%;background:radial-gradient(circle,rgba(0,181,171,.26),rgba(0,181,171,0) 68%)}
.vale-sello svg{position:relative;display:block;width:56px;height:56px;fill:none;stroke:var(--agua-osc);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body.pub .vale h1{margin:0;font-size:30px;line-height:1.15}
body.pub .vale-importe{margin:0;font:500 60px/1 var(--serif);color:var(--hondo);font-variant-numeric:lining-nums}
body.pub .vale-pend{margin:10px 0 0;font-size:16px;line-height:1.4;color:var(--tinta)}
.pago-final{margin-top:22px;text-align:center}
body.pub .pago-final p{margin:0 0 6px;font-size:18px;line-height:1.45;color:var(--tinta)}
body.pub .pago-final .pago-correo{margin:0 0 18px;font-size:15px;color:var(--suave)}

/* Solo con el vale recién confirmado y sin «reducir movimiento»: sin la clase, o con movimiento reducido, se ve directamente el estado final. */
@media (prefers-reduced-motion:no-preference){
  .vale.anim .vale-linea{stroke-dasharray:1;animation:vale-trazar 1.15s cubic-bezier(.65,0,.35,1) both}
  .vale.anim .vale-fondo{animation:vale-aparece .55s cubic-bezier(.23,1,.32,1) .75s both}
  .vale.anim .vale-corte{animation:vale-aparece .35s ease-out .9s both}
  .vale.anim .vale-sello svg{animation:vale-aparece .1s linear .85s both}
  .vale.anim .vale-sello circle{stroke-dasharray:1;animation:vale-trazar .55s cubic-bezier(.65,0,.35,1) .85s both}
  .vale.anim .vale-sello path{stroke-dasharray:1;animation:vale-trazar .35s cubic-bezier(.23,1,.32,1) 1.2s both}
  .vale.anim .vale-sello::before{animation:vale-luz .9s ease-out 1.15s both}
  .vale.anim h1{animation:vale-entra .45s cubic-bezier(.23,1,.32,1) 1.25s both}
  .vale.anim .vale-importe{animation:vale-entra .45s cubic-bezier(.23,1,.32,1) 1.35s both}
  .vale.anim .vale-pend{animation:vale-entra .45s cubic-bezier(.23,1,.32,1) 1.45s both}
  .vale.anim + .pago-final{animation:vale-entra .4s cubic-bezier(.23,1,.32,1) 1.6s both}
}
@keyframes vale-trazar{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes vale-aparece{from{opacity:0}to{opacity:1}}
@keyframes vale-luz{0%{opacity:0;transform:scale(.8)}45%{opacity:1;transform:scale(1.25)}100%{opacity:1;transform:scale(1)}}
@keyframes vale-entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

.pago-pie{max-width:520px;margin:0 auto 32px;padding:0 16px;font-size:13px;line-height:1.5;color:var(--suave);text-align:center}
.pago-pie a{color:var(--posidonia)}
@media (min-width:560px){
  .lectura.pago{margin-top:36px}
  body.pub .bono-cab h1{font-size:30px}
  body.pub .vale h1{font-size:34px}
  body.pub .vale-importe{font-size:68px}
}