:root{
  --burgundy:#61112b;
  --gold:#c28d39;
  --vanilla:#efe5d2;
  --bordeaux-noir:#1c0a10;
  --bg-base:#12060a;
  --approve:#4a9d6c;
  --reject:#c2564f;
  --glass-bg:rgba(255,255,255,0.06);
  --glass-border:rgba(255,255,255,0.12);
  --glass-shadow:0 10px 40px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(circle at 15% -10%, rgba(97,17,43,0.55), transparent 45%),
    radial-gradient(circle at 100% 15%, rgba(194,141,57,0.14), transparent 42%),
    radial-gradient(circle at 15% 100%, rgba(97,17,43,0.35), transparent 48%),
    var(--bg-base);
  color:var(--vanilla);
  font-family:'Avenir','Helvetica Neue',Arial,sans-serif;
  min-height:100vh;
}
a{color:inherit;text-decoration:none;}
a:hover{color:var(--gold);}

@font-face{font-family:'The Seasons';src:url('../assets/fonts/the-seasons-regular.ttf') format('truetype');font-weight:400;font-style:normal;}
@font-face{font-family:'The Seasons';src:url('../assets/fonts/the-seasons-bold.ttf') format('truetype');font-weight:700;font-style:normal;}
@font-face{font-family:'Avenir';src:url('../assets/fonts/avenir-regular.ttf') format('truetype');font-weight:400;font-style:normal;}

.ticket-header{padding:24px 28px;}
.ticket-header .brand{font-family:'The Seasons',serif;font-size:20px;color:var(--vanilla);}

.ticket-main{max-width:560px;margin:0 auto;padding:24px 28px 80px;}
h1{font-family:'The Seasons',serif;font-weight:700;font-size:clamp(32px,6vw,44px);margin:0 0 6px;}
.event-meta{font-size:14px;letter-spacing:1px;text-transform:uppercase;color:var(--gold);margin:0 0 40px;}

.cover-image{width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;margin-bottom:24px;box-shadow:var(--glass-shadow);background:rgba(255,255,255,0.05);}
.cover-image img{width:100%;height:100%;object-fit:cover;display:block;}

.glass-card{
  background:var(--glass-bg);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:16px;padding:22px 24px;margin-bottom:24px;
}

.ticket-row{display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-bottom:1px solid rgba(255,255,255,0.1);gap:16px;}
.ticket-row:last-of-type{border-bottom:none;padding-bottom:6px;}
.ticket-row.is-sold-out{opacity:0.5;}
.ticket-info{display:flex;flex-direction:column;gap:2px;}
.ticket-name{font-family:'The Seasons',serif;font-size:20px;}
.ticket-desc{font-size:13px;color:rgba(239,229,210,0.6);}
.ticket-price{font-size:14px;color:var(--gold);margin-top:4px;}
.sold-out-tag{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:rgba(239,229,210,0.45);}

.avail-bar-wrap{margin-top:6px;}
.avail-bar-label{display:flex;justify-content:space-between;font-size:11px;letter-spacing:0.5px;text-transform:uppercase;color:rgba(239,229,210,0.6);margin-bottom:8px;}
.avail-bar-label span:last-child{color:var(--gold);}
.avail-bar-track{height:8px;border-radius:5px;background:rgba(255,255,255,0.1);overflow:hidden;}
.avail-bar-fill{
  height:100%;border-radius:5px;width:0%;transition:width 0.35s cubic-bezier(.22,.9,.3,1);
  background-size:200% 100%;animation:gold-shimmer 2.4s linear infinite;
}
.avail-bar-fill-gold{background:linear-gradient(90deg, #a97a2e, var(--gold), #f5dca0, var(--gold), #a97a2e);background-size:200% 100%;}
.avail-bar-fill-silver{background:linear-gradient(90deg, #8a8f98, #cfd3d8, #f4f6f8, #cfd3d8, #8a8f98);background-size:200% 100%;}
@keyframes gold-shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
.ticket-block{margin-bottom:6px;}
.ticket-block .avail-bar-wrap{margin-top:2px;margin-bottom:14px;}

select, input, textarea{
  font-family:'Avenir',sans-serif;
  font-size:16px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,0.18);
  border-radius:8px;
  background:rgba(255,255,255,0.06);
  color:var(--vanilla);
  width:100%;
}
select{width:auto;min-width:70px;}
select option{background:var(--bordeaux-noir);color:var(--vanilla);}
input:focus, select:focus, textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(194,141,57,0.15);}

.field{margin-bottom:18px;display:flex;flex-direction:column;gap:6px;}
.field label{font-size:13px;letter-spacing:0.5px;text-transform:uppercase;color:var(--vanilla);}

.consent{display:flex;align-items:flex-start;gap:10px;margin:24px 0;font-size:14px;line-height:1.5;}
.consent input{width:auto;margin-top:3px;}

.btn-primary{
  width:100%;
  padding:16px;
  margin-top:24px;
  color:var(--bordeaux-noir);
  border:none;
  border-radius:8px;
  font-size:15px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  cursor:pointer;
  background:linear-gradient(90deg, #a97a2e, var(--gold), #f5dca0, var(--gold), #a97a2e);
  background-size:200% 100%;animation:gold-shimmer 3s linear infinite;
  box-shadow:0 8px 24px rgba(194,141,57,0.28);
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(194,141,57,0.35);}
.btn-primary.is-loading, .btn-approve.is-loading, .btn-reject.is-loading{cursor:wait;opacity:0.85;transform:none !important;}
.btn-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(0,0,0,0.25);border-top-color:currentColor;border-radius:50%;animation:btn-spin 0.7s linear infinite;vertical-align:-2px;margin-right:8px;}
@keyframes btn-spin{to{transform:rotate(360deg);}}

.btn-approve, .btn-reject{
  width:100%;
  padding:20px;
  border:none;
  border-radius:8px;
  font-size:17px;
  font-weight:700;
  cursor:pointer;
  color:#fff;
  margin-bottom:14px;
}
.btn-approve{background:var(--approve);}
.btn-reject{background:var(--reject);}

.summary{background:var(--glass-bg);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);border-radius:16px;padding:20px 24px;margin:24px 0;}
.summary-row{display:flex;justify-content:space-between;padding:6px 0;font-size:14px;}
.summary-total{display:flex;justify-content:space-between;padding-top:12px;margin-top:8px;border-top:1px solid rgba(255,255,255,0.12);font-family:'The Seasons',serif;font-size:20px;}

.errors{background:rgba(194,86,79,0.15);border:1px solid var(--reject);color:#e28c86;padding:14px 16px;border-radius:10px;margin-bottom:20px;font-size:14px;}
.errors ul{margin:0;padding-left:18px;}

.empty{color:rgba(239,229,210,0.55);}
.back-link{display:inline-block;margin-top:20px;font-size:13px;letter-spacing:1px;text-transform:uppercase;}

.status-badge{display:inline-block;padding:6px 14px;border-radius:20px;font-size:12px;letter-spacing:1px;text-transform:uppercase;margin-bottom:20px;}
.status-badge.paid{background:rgba(74,157,108,0.18);color:#7fd19f;}
.status-badge.failed, .status-badge.cancelled{background:rgba(194,86,79,0.18);color:#e28c86;}

.result-overlay{
  position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:32px;transition:opacity 0.6s ease, visibility 0.6s ease;
}
.result-overlay.is-success{background:radial-gradient(circle at 50% 30%, #2f7a52, #1a4a34);}
.result-overlay.is-failed{background:radial-gradient(circle at 50% 30%, #a8433c, #5e1f1c);}
.result-overlay img{width:150px;height:150px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,0.5);box-shadow:0 12px 40px rgba(0,0,0,0.4);margin-bottom:24px;animation:result-pop 0.6s cubic-bezier(.22,1.4,.4,1);}
.result-overlay h2{font-family:'The Seasons',serif;font-size:clamp(26px,6vw,38px);color:#fff;margin:0 0 12px;max-width:520px;}
.result-overlay p{color:rgba(255,255,255,0.85);font-size:15px;max-width:440px;margin:0 0 28px;}
.result-overlay button{background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.4);color:#fff;padding:12px 28px;border-radius:30px;font-size:13px;letter-spacing:1px;text-transform:uppercase;cursor:pointer;}
.result-overlay.is-hidden{opacity:0;visibility:hidden;pointer-events:none;}
@keyframes result-pop{0%{transform:scale(0.6);opacity:0;}100%{transform:scale(1);opacity:1;}}

/* ══════════════════════════════════════════════════════════════
   Estados del pago: capa en vidrio sobre la página
   AvalPay funciona por redirección, así que la compradora vuelve
   del banco ANTES de que llegue la confirmación. El estado de
   espera con consulta periódica es el que sostiene ese momento.
   ══════════════════════════════════════════════════════════════ */
/* position:fixed reforzado: algunos temas ponen position:relative a los hijos
   directos de body, y eso dejaría la capa al final del documento. */
body > .pg-capa,
.pg-capa{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:24px;opacity:0;pointer-events:none;
  background:rgba(8,10,14,0.72);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  transition:opacity 0.42s ease;
}
.pg-capa.es-visible{opacity:1;pointer-events:auto;}

.pg-panel{
  position:relative;width:min(440px,100%);padding:44px 36px 38px;
  border-radius:20px;text-align:center;overflow:hidden;
  background:linear-gradient(150deg,rgba(255,255,255,0.1),rgba(255,255,255,0.02) 52%,rgba(255,255,255,0.08)),rgba(11,11,12,0.8);
  border:1px solid rgba(183,203,216,0.22);
  box-shadow:0 34px 90px rgba(0,0,0,0.6),inset 0 1.5px 0 rgba(255,246,235,0.18),inset 0 -1.5px 3px rgba(0,0,0,0.3);
  transform:translateY(16px) scale(0.97);
  transition:transform 0.46s cubic-bezier(.22,.9,.3,1);
}
.pg-capa.es-visible .pg-panel{transform:translateY(0) scale(1);}
/* Reflejo especular, igual que el resto del vidrio del sitio */
.pg-panel::after{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:20px;
  background:linear-gradient(118deg,rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 26%,rgba(255,255,255,0) 76%,rgba(255,255,255,0.14) 100%);
  mix-blend-mode:screen;opacity:0.62;
}
.pg-panel > *{position:relative;z-index:1;}

/* ── El emblema: cambia de forma según el estado ── */
.pg-emblema{
  width:84px;height:84px;margin:0 auto 26px;position:relative;
  display:flex;align-items:center;justify-content:center;
}
/* Anillo que gira mientras se espera */
.pg-anillo{
  position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(183,203,216,0.16);
  border-top-color:#d9c08a;
  animation:pg-gira 1.05s linear infinite;
}
.pg-anillo-2{
  position:absolute;inset:11px;border-radius:50%;
  border:1.5px solid transparent;border-bottom-color:rgba(217,192,138,0.4);
  animation:pg-gira 1.7s linear infinite reverse;
}
@keyframes pg-gira{to{transform:rotate(360deg);}}

/* Marca de verificación y cruz, dibujadas con trazo */
.pg-icono{width:40px;height:40px;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.pg-icono path,.pg-icono line{stroke-dasharray:60;stroke-dashoffset:60;}
.pg-capa.es-visible .pg-icono path,.pg-capa.es-visible .pg-icono line{
  animation:pg-traza 0.62s 0.18s cubic-bezier(.65,0,.35,1) forwards;
}
.pg-capa.es-visible .pg-icono line:nth-child(2){animation-delay:0.34s;}
@keyframes pg-traza{to{stroke-dashoffset:0;}}

/* Aro de halo que se expande al resolverse */
.pg-halo{
  position:absolute;inset:0;border-radius:50%;border:2px solid currentColor;
  opacity:0;
}
.pg-capa.es-visible .pg-halo{animation:pg-halo 1.1s 0.1s cubic-bezier(.2,.8,.3,1) forwards;}
@keyframes pg-halo{
  0%{transform:scale(0.7);opacity:0.65;}
  100%{transform:scale(1.5);opacity:0;}
}

/* Variantes por resultado */
.pg-capa[data-tono="ok"] .pg-emblema{color:#6fcf97;}
.pg-capa[data-tono="ok"] .pg-icono{stroke:#6fcf97;}
.pg-capa[data-tono="espera-larga"] .pg-emblema{color:#d9c08a;}
.pg-capa[data-tono="espera-larga"] .pg-icono{stroke:#d9c08a;}
.pg-capa[data-tono="espera-larga"] .pg-panel{border-color:rgba(217,192,138,0.34);}
.pg-capa[data-tono="mal"] .pg-emblema{color:#e28c86;}
.pg-capa[data-tono="mal"] .pg-icono{stroke:#e28c86;}
.pg-capa[data-tono="ok"] .pg-panel{border-color:rgba(111,207,151,0.32);}
.pg-capa[data-tono="mal"] .pg-panel{border-color:rgba(226,140,134,0.32);}

/* ── Textos ── */
.pg-rot{
  font-size:9.5px;letter-spacing:3px;text-transform:uppercase;
  color:#d9c08a;margin-bottom:12px;
}
.pg-titulo{
  font-family:Georgia,'Times New Roman',serif;font-weight:500;
  font-size:clamp(19px,2.4vw,24px);line-height:1.3;letter-spacing:0.012em;
  color:#f6f1e8;margin:0 0 10px;
}
.pg-detalle{
  font-size:13.5px;line-height:1.62;color:rgba(246,241,232,0.62);
  margin:0 auto;max-width:34ch;
}
/* El texto se renueva al cambiar de estado, no salta */
.pg-texto.es-entrando{animation:pg-texto 0.4s cubic-bezier(.22,.9,.3,1) both;}
@keyframes pg-texto{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:translateY(0);}}

/* ── Tres puntos que laten mientras se espera ── */
.pg-puntos{display:flex;gap:6px;justify-content:center;margin-top:20px;}
.pg-puntos span{
  width:5px;height:5px;border-radius:50%;background:#d9c08a;
  animation:pg-late 1.25s ease-in-out infinite;
}
.pg-puntos span:nth-child(2){animation-delay:0.16s;}
.pg-puntos span:nth-child(3){animation-delay:0.32s;}
@keyframes pg-late{0%,100%{opacity:0.22;transform:translateY(0);}50%{opacity:1;transform:translateY(-3px);}}

/* ── Barra de avance indeterminada: para la espera del banco ── */
.pg-avance{
  height:2px;border-radius:99px;margin-top:26px;overflow:hidden;
  background:rgba(183,203,216,0.14);
}
.pg-avance i{
  display:block;height:100%;width:38%;border-radius:99px;
  background:linear-gradient(90deg,transparent,#d9c08a,#c28d39,transparent);
  animation:pg-recorre 1.6s ease-in-out infinite;
}
@keyframes pg-recorre{0%{transform:translateX(-100%);}100%{transform:translateX(320%);}}

/* Botón secundario: contorno tenue. Acompaña sin competir con el dorado. */
.btn-secondary{
  -webkit-appearance:none;appearance:none;
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;box-sizing:border-box;
  padding:15px 16px;margin-top:10px;
  font-family:inherit;font-size:13.5px;font-weight:600;
  letter-spacing:1px;text-transform:uppercase;text-decoration:none;
  color:rgba(246,241,232,0.82);
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.22);
  border-radius:8px;cursor:pointer;
  transition:background 0.2s ease,border-color 0.2s ease,color 0.2s ease;
}
.btn-secondary:hover{
  background:rgba(255,255,255,0.1);
  border-color:rgba(255,255,255,0.4);
  color:#f6f1e8;
}
.btn-secondary:active{transform:translateY(1px);}

/* ── Acciones (solo en estados resueltos) ── */
.pg-acciones{display:flex;flex-direction:column;gap:10px;margin-top:28px;}
.pg-acciones:empty{display:none;}
.pg-acciones .btn-primary,.pg-acciones .btn-secondary{width:100%;margin:0;}
/* Las acciones pueden ser <a> (van a otra página) o <button> (ejecutan algo
   aquí, como cancelar). Los <button> no heredan la tipografía ni pierden el
   aspecto nativo por sí solos, así que se igualan a mano. */
.pg-acciones .btn-primary,.pg-acciones .btn-secondary{
  -webkit-appearance:none;appearance:none;
  font-family:inherit;text-align:center;text-decoration:none;
  display:flex;align-items:center;justify-content:center;
  box-sizing:border-box;
}

/* Aviso de continuación: el ciclo sigue solo, sin dejar a nadie esperando */
.pg-sigue{
  margin:16px 0 0;font-size:11.5px;letter-spacing:0.5px;
  color:rgba(246,241,232,0.45);
  font-variant-numeric:tabular-nums;
}

/* Nota de tranquilidad: el dinero no se pierde si cierra la pestaña */
.pg-seguro{
  display:flex;align-items:center;gap:8px;justify-content:center;
  margin-top:22px;font-size:11px;letter-spacing:0.4px;color:rgba(246,241,232,0.42);
}
.pg-seguro svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;}

@media (max-width:640px){
  .pg-panel{padding:36px 24px 30px;border-radius:18px;}
  .pg-panel::after{border-radius:18px;}
  .pg-emblema{width:70px;height:70px;margin-bottom:22px;}
}
@media (prefers-reduced-motion:reduce){
  .pg-anillo,.pg-anillo-2,.pg-puntos span,.pg-avance i,.pg-halo{animation:none;}
  .pg-capa,.pg-panel{transition-duration:0.01ms;}
  .pg-capa.es-visible .pg-icono path,.pg-capa.es-visible .pg-icono line{stroke-dashoffset:0;animation:none;}
}

/* ══════════════════════════════════════════════════════════════
   Titulares: una entrada, una persona (como los pasajeros de un vuelo)
   ══════════════════════════════════════════════════════════════ */
.tit-bloque{
  margin:8px 0 24px;padding:24px;border-radius:16px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.1);
}
.tit-cabeza{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px;}
.tit-rotulo{font-size:9.5px;letter-spacing:3px;text-transform:uppercase;color:#d9c08a;margin-bottom:9px;}
.tit-titulo{font-family:Georgia,'Times New Roman',serif;font-size:20px;line-height:1.25;margin:0 0 8px;}
.tit-nota{font-size:12.5px;line-height:1.6;margin:0;max-width:46ch;opacity:0.62;}
.tit-cuenta{
  flex-shrink:0;text-align:center;padding:10px 14px;border-radius:10px;
  background:rgba(217,192,138,0.1);border:1px solid rgba(217,192,138,0.24);
  font-family:Georgia,serif;font-size:21px;line-height:1;color:#d9c08a;
}
.tit-cuenta span{display:block;font-family:inherit;font-size:8.5px;letter-spacing:1.6px;text-transform:uppercase;opacity:0.7;margin-top:5px;}

/* Compro ahora, reparto después */
.tit-despues{
  display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  padding:15px 16px;margin-bottom:18px;border-radius:12px;
  background:rgba(255,255,255,0.02);border:1px dashed rgba(217,192,138,0.3);
  transition:background 0.2s,border-color 0.2s;
}
.tit-despues:hover{background:rgba(217,192,138,0.05);border-color:rgba(217,192,138,0.5);}
.tit-despues input{margin-top:2px;flex-shrink:0;width:17px;height:17px;accent-color:#b99a5e;}
.tit-despues span{font-size:12.5px;line-height:1.6;opacity:0.72;}
.tit-despues b{display:block;font-size:13.5px;margin-bottom:3px;opacity:1;}
.tit-despues i{font-style:italic;}

/* Cada persona */
.tit-lista{display:flex;flex-direction:column;gap:14px;transition:opacity 0.3s;}
.tit-lista.es-inactiva{opacity:0.32;pointer-events:none;}
.tit-persona{padding:16px;border-radius:12px;background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.08);}
.tit-persona.es-yo{border-style:dashed;border-color:rgba(217,192,138,0.28);background:rgba(217,192,138,0.04);}
.tit-persona-cabeza{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.tit-num{
  width:24px;height:24px;flex-shrink:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(217,192,138,0.15);border:1px solid rgba(217,192,138,0.32);
  font-size:11.5px;font-weight:700;color:#d9c08a;
}
.tit-tipo{font-size:11px;letter-spacing:1.8px;text-transform:uppercase;opacity:0.62;}
.tit-marca{
  margin-left:auto;padding:4px 10px;border-radius:99px;font-size:9.5px;
  letter-spacing:1.4px;text-transform:uppercase;
  background:rgba(217,192,138,0.18);color:#d9c08a;
}
.tit-yo-nota{font-size:12px;line-height:1.55;margin:0;opacity:0.55;}
.tit-campos{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.tit-campos .field:first-child{grid-column:1/-1;}
.tit-persona .field{margin:0;}
.tit-persona label{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;opacity:0.55;margin-bottom:6px;display:block;}

@media (max-width:640px){
  .tit-bloque{padding:18px 15px;border-radius:14px;}
  .tit-cabeza{flex-direction:column;gap:12px;}
  .tit-cuenta{align-self:flex-start;}
  .tit-campos{grid-template-columns:1fr;}
  /* Altura cómoda para el pulgar */
  .tit-persona input{min-height:46px;}
}

/* Titulares: el correo primero, con verificación en vivo */
.tit-campo-correo{grid-column:1/-1;position:relative;}
.tit-resto{display:grid;grid-template-columns:1fr 1fr;gap:12px;grid-column:1/-1;}
.tit-campo-ancho{grid-column:1/-1;}

/* Indicador dentro del campo: anillo girando mientras consulta,
   palomita cuando encuentra la cuenta */
.tit-lupa{
  position:absolute;right:14px;top:50%;margin-top:4px;width:17px;height:17px;
  display:none;pointer-events:none;
}
.tit-persona[data-estado="buscando"] .tit-lupa{
  display:block;border-radius:50%;
  border:2px solid rgba(217,192,138,0.22);border-top-color:#d9c08a;
  animation:tit-girar 0.7s linear infinite;
}
.tit-persona[data-estado="existe"] .tit-lupa{
  display:block;background:#8fd6a6;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
}
@keyframes tit-girar{to{transform:rotate(360deg);}}

/* Glow del campo mientras verifica y al resolver */
.tit-persona[data-estado="buscando"] .tit-campo-correo input{
  border-color:rgba(217,192,138,0.5);
  box-shadow:0 0 0 3px rgba(217,192,138,0.1), 0 0 22px rgba(217,192,138,0.16);
  animation:tit-glow 1.5s ease-in-out infinite;
}
.tit-persona[data-estado="existe"] .tit-campo-correo input{
  border-color:rgba(143,214,166,0.55);box-shadow:0 0 0 3px rgba(143,214,166,0.1);
}
.tit-persona[data-estado="soy-yo"] .tit-campo-correo input{
  border-color:rgba(232,147,140,0.55);box-shadow:0 0 0 3px rgba(232,147,140,0.1);
}
@keyframes tit-glow{
  0%,100%{box-shadow:0 0 0 3px rgba(217,192,138,0.07), 0 0 16px rgba(217,192,138,0.1);}
  50%{box-shadow:0 0 0 4px rgba(217,192,138,0.14), 0 0 28px rgba(217,192,138,0.24);}
}
.tit-resto[hidden]{display:none;}
.tit-aviso{
  font-size:13px;font-weight:600;line-height:1.5;margin:10px 0 0;padding-left:18px;position:relative;
  letter-spacing:0.2px;
}
.tit-aviso::before{
  content:'';position:absolute;left:0;top:6px;width:8px;height:8px;border-radius:50%;
  background:currentColor;opacity:1;
}
/* Amarillo brillante: son instrucciones, tienen que leerse de una */
.tit-persona[data-estado="buscando"] .tit-aviso,
.tit-persona[data-estado="escribiendo"] .tit-aviso{color:#ffd24a;}
.tit-persona[data-estado="escribiendo"] .tit-aviso::before{opacity:1;}
/* Mientras escribe: borde encendido tenue, sin el latido de la consulta */
.tit-persona[data-estado="escribiendo"] .tit-campo-correo input{
  border-color:rgba(217,192,138,0.34);box-shadow:0 0 0 3px rgba(217,192,138,0.05);
}
.tit-persona[data-estado="buscando"] .tit-aviso::before{animation:tit-latir 1s ease-in-out infinite;}
.tit-persona[data-estado="existe"] .tit-aviso{color:#a8e8bd;padding-left:22px;}
.tit-persona[data-estado="existe"] .tit-aviso::before{
  content:'';top:3px;width:12px;height:12px;border-radius:0;background:currentColor;opacity:1;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/contain no-repeat;
}
.tit-persona[data-estado="nueva"] .tit-aviso{color:#ffd24a;}
.tit-persona[data-estado="soy-yo"] .tit-aviso{color:#ff9f97;}
.tit-persona[data-estado="existe"]{border-color:rgba(143,214,166,0.3);background:rgba(143,214,166,0.04);}
.tit-persona[data-estado="soy-yo"]{border-color:rgba(232,147,140,0.35);background:rgba(232,147,140,0.04);}
@keyframes tit-latir{0%,100%{opacity:0.25;}50%{opacity:0.9;}}
@media (max-width:640px){
  .tit-resto{grid-template-columns:1fr;}
}

/* Motivo técnico del fallo (solo simulador) */
.pg-tecnico{white-space:pre-wrap;
  display:block;margin:14px auto 0;padding:10px 12px;max-width:100%;
  font-family:'Courier New',monospace;font-size:10.5px;line-height:1.5;
  text-align:left;word-break:break-word;border-radius:8px;
  background:rgba(232,147,140,0.08);border:1px solid rgba(232,147,140,0.22);
  color:rgba(239,229,210,0.75);
}

/* "Esta entrada es para mí": liberar la primera para regalarla */
.tit-mia{
  display:flex;align-items:center;gap:10px;cursor:pointer;margin-bottom:10px;
  font-size:13.5px;
}
.tit-mia input{width:17px;height:17px;flex-shrink:0;accent-color:#b99a5e;}
.tit-mia span{opacity:0.9;}
.tit-yo-libre{color:#ffd24a;opacity:0.9;}

/* Nota de regalo, opcional */
.tit-nota-regalo{grid-column:1/-1;margin-top:12px;}
.tit-nota-abrir{
  background:none;border:none;padding:0;cursor:pointer;
  font-family:inherit;font-size:12.5px;letter-spacing:0.3px;
  color:#d9c08a;text-decoration:underline;text-underline-offset:3px;
}
.tit-nota-abrir:hover{color:#ffd24a;}
.tit-nota-campo label{
  font-size:10px;letter-spacing:1.4px;text-transform:uppercase;
  opacity:0.55;margin-bottom:6px;display:block;
}
.tit-nota-campo label span{text-transform:none;letter-spacing:0;opacity:0.7;}
.tit-nota-campo textarea{
  width:100%;box-sizing:border-box;resize:vertical;min-height:58px;
  font-family:inherit;font-size:13.5px;line-height:1.5;
}

/* Informe de error al equipo, bajo la pantalla de fallo */
.pg-informe{
  margin:18px auto 0;max-width:420px;text-align:left;
  padding:16px 18px;border-radius:12px;
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.12);
}
.pg-informe-intro{font-size:12.5px;line-height:1.6;margin:0 0 12px;opacity:0.8;}
.pg-informe-nota{
  width:100%;box-sizing:border-box;resize:vertical;min-height:52px;margin-bottom:12px;
  font-family:inherit;font-size:13px;line-height:1.5;
}
.pg-informe-btn{width:100%;}
.pg-informe-estado{
  font-size:12.5px;line-height:1.6;margin:12px 0 0;color:#ffd24a;
}
.pg-informe.es-enviado{border-color:rgba(143,214,166,0.34);background:rgba(143,214,166,0.06);}
.pg-informe.es-enviado .pg-informe-intro{display:none;}
.pg-informe.es-enviado .pg-informe-estado{color:#a8e8bd;margin:0;}

/* Aviso de modo de prueba en la pantalla de pago */
.pg-aviso-prueba{
  font-size:12.5px;line-height:1.6;margin:0 0 18px;padding:12px 15px;border-radius:10px;
  background:rgba(255,210,74,0.08);border:1px solid rgba(255,210,74,0.28);color:#ffd24a;
}
.pg-aviso-prueba strong{display:block;font-size:10px;letter-spacing:2px;text-transform:uppercase;margin-bottom:5px;}

/* Detalle de la transacción — campos que exige el manual de la pasarela */
.tx-detalle{
  margin:22px 0;padding:18px 20px;border-radius:12px;text-align:left;
  background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.09);
}
.tx-detalle-titulo{
  font-size:9.5px;letter-spacing:2.2px;text-transform:uppercase;
  color:#d9c08a;margin-bottom:13px;
}
.tx-fila{
  display:flex;justify-content:space-between;gap:16px;
  padding:8px 0;font-size:13px;border-bottom:1px solid rgba(255,255,255,0.05);
}
.tx-fila:last-child{border-bottom:none;}
.tx-fila span{opacity:0.6;}
.tx-fila strong{text-align:right;word-break:break-word;}
.summary-total small{font-size:12px;opacity:0.6;letter-spacing:1px;}

/* Aviso de transacción pendiente — control de doble pago */
.aviso-pendiente{
  margin:0 0 24px;padding:20px 22px;border-radius:14px;
  background:linear-gradient(150deg,rgba(255,210,74,0.14),rgba(255,210,74,0.04) 52%,rgba(255,210,74,0.1));
  backdrop-filter:blur(18px) saturate(165%);-webkit-backdrop-filter:blur(18px) saturate(165%);
  border:1px solid rgba(255,210,74,0.42);
  box-shadow:0 0 26px rgba(255,210,74,0.1),inset 0 1.5px 0 rgba(255,255,255,0.2);
}
.aviso-pendiente-rotulo{
  font-size:9.5px;letter-spacing:2.4px;text-transform:uppercase;
  color:#ffd24a;margin-bottom:10px;font-weight:700;
}
.aviso-pendiente p{font-size:13.5px;line-height:1.65;margin:0 0 16px;opacity:0.9;}
.aviso-pendiente strong{color:#ffd24a;}
.aviso-pendiente-acciones{display:flex;gap:10px;flex-wrap:wrap;}
.aviso-pendiente-acciones a{margin:0;}
@media (max-width:640px){
  .aviso-pendiente{padding:16px 17px;}
  .aviso-pendiente-acciones{flex-direction:column;}
  .aviso-pendiente-acciones a{width:100%;text-align:center;}
}

/* Motivo técnico devuelto por el banco, cuando no se puede abrir la pasarela */
.pg-aviso-motivo{
  margin:14px 0 18px;padding:13px 16px;border-radius:10px;
  background:rgba(226,140,134,0.09);border:1px solid rgba(226,140,134,0.3);
  font-size:12.5px;line-height:1.6;color:#e8b8b4;word-break:break-word;
}
.pg-aviso-motivo strong{color:#e28c86;}

/* ══════════════════════════════════════════════════════════════
   Medios de pago aceptados
   ══════════════════════════════════════════════════════════════ */
.ck-medios{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:22px 0 0;}
.ck-medios-rot{
  font-size:9.5px;letter-spacing:2.2px;text-transform:uppercase;
  color:rgba(246,241,232,0.42);flex-shrink:0;
}
.ck-medios-lista{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.ck-medio{
  height:26px;width:auto;display:block;border-radius:4px;
  /* Los logos vienen sobre su propio fondo de marca; atenuados en reposo
     acompañan sin gritar, y se avivan al pasar el cursor. */
  opacity:0.62;filter:saturate(0.85);
  transition:opacity 0.25s ease, filter 0.25s ease, transform 0.25s ease;
  animation:ck-medio-entra 0.5s cubic-bezier(.2,.8,.2,1) backwards;
  animation-delay:calc(var(--ck-m, 0) * 70ms + 200ms);
}
.ck-medios-lista:hover .ck-medio{opacity:0.4;}
.ck-medios-lista .ck-medio:hover{opacity:1;filter:saturate(1);transform:translateY(-2px);}
.ck-medio-txt{
  height:auto;padding:6px 10px;font-size:10.5px;font-weight:600;
  letter-spacing:0.6px;color:rgba(246,241,232,0.8);
  background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.14);
  border-radius:5px;white-space:nowrap;opacity:0.72;filter:none;
}
@keyframes ck-medio-entra{from{opacity:0;transform:translateY(6px);}}
@media (max-width:640px){
  .ck-medios{gap:10px;margin-top:18px;}
  .ck-medio{height:22px;}
}
@media (prefers-reduced-motion:reduce){
  .ck-medio{animation:none;}
  .ck-medios-lista .ck-medio:hover{transform:none;}
}

/* Elegir cuál entrada es la tuya */
.tit-elige{
  display:flex;flex-direction:column;gap:9px;margin:0 0 16px;
  padding:13px 15px;border-radius:12px;
  background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.08);
}
.tit-elige-txt{font-size:12.5px;line-height:1.5;opacity:0.7;}
.tit-ninguna{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:13px;}
.tit-ninguna input,.tit-mia input{width:17px;height:17px;flex-shrink:0;accent-color:#b99a5e;}
/* ".tit-persona label" da estilo de etiqueta de campo (mayúsculas, gris,
   10px). La opción "Esta es la mía" es otra cosa: se restituye. */
.tit-persona label.tit-mia{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  margin:0 0 12px;font-size:13.5px;letter-spacing:0;text-transform:none;opacity:1;
}
.tit-persona label.tit-mia span{opacity:0.82;}
.tit-persona.es-yo label.tit-mia span{color:#d9c08a;font-weight:600;opacity:1;}

/* El atributo hidden no gana contra un display escrito en CSS: .tit-campos
   es grid, así que la tarjeta "Tú" seguía mostrando los campos de otra
   persona aunque el JS la marcara oculta. Esto se impone a todo el bloque. */
.tit-bloque [hidden]{display:none !important;}

/* "Esta es la mía" en una sola línea */
.tit-persona label.tit-mia{width:auto;max-width:none;}
.tit-persona label.tit-mia input{flex:0 0 auto;width:17px;margin:0;}
.tit-persona label.tit-mia span{flex:1 1 auto;min-width:0;white-space:nowrap;}

/* Beneficios de cada entrada, bajo la frase de venta */
.ticket-beneficios{list-style:none;margin:10px 0 4px;padding:0;display:flex;flex-direction:column;gap:7px;}
.ticket-beneficios li{position:relative;padding-left:18px;font-size:13px;line-height:1.5;opacity:0.86;}
.ticket-beneficios li::before{
  content:'';position:absolute;left:0;top:0.55em;width:6px;height:6px;border-radius:50%;
  background:#d9c08a;box-shadow:0 0 7px rgba(217,192,138,0.5);
}

/* Aceptación electrónica */
.acep-bloque{margin:4px 0 0;}
.acep-rotulo{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#d9c08a;margin:0 0 10px;}
.acep-rotulo-sub{margin-top:18px;}
.acep-bloque .consent{margin-bottom:10px;}
.acep-bloque .consent a{color:#d9c08a;text-decoration:underline;text-underline-offset:3px;}
.acep-nota{font-size:11.5px;opacity:.5;margin:6px 0 0;}


/* ── WhatsApp con país ── */
.tel-campo{display:flex;gap:8px;}
.tel-campo select{flex:0 0 auto;width:auto;max-width:46%;padding-right:28px;}
.tel-campo input{flex:1 1 auto;min-width:0;font-variant-numeric:tabular-nums;letter-spacing:0.02em;}
.tel-ayuda{font-size:12px;opacity:.62;margin-top:2px;}
.tel-ayuda.es-error{opacity:1;color:#ffd24a;font-weight:700;}
.ck-confirma-titulo{font-size:22px;margin:0 0 6px;}
.ck-confirma-texto{font-size:14px;opacity:.75;margin:0 0 20px;line-height:1.5;}
.ck-confirma-pie{font-size:12.5px;opacity:.6;margin:16px 0 0;text-align:center;}
.ck-confirma-pie a{color:inherit;text-decoration:underline;}
@media (max-width:420px){ .tel-campo select{max-width:52%;font-size:14px;} }