/* Checo Rifa · paquetes por monto en «Elige tus boletos» (publicado el 24 sep 2026).
   Elegida por Angel: propuesta 2 «Billetes». Maquetas: ~/Desktop/rifa-checo-disenos/paquetes/.
   Los montos los calcula webapp.js (renderPaquetes) como boletos × precio: siempre exactos. */
.campaign-app #checkout .pq { margin: 16px 0 0; } /* debajo de «Cantidad de boletos» (Angel, 24 sep) */
.campaign-app #checkout .pq[hidden] { display: none; }
.campaign-app #checkout .pq-titulo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 10px; font: 800 11px/1.2 var(--g-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--g-suave); }
.campaign-app #checkout .pq-titulo small { font: 600 11px/1.2 var(--g-ui); letter-spacing: .04em; text-transform: none; color: rgba(255, 255, 255, .55); text-align: right; }
.campaign-app #checkout .pq-cromo { background: var(--g-cromo); -webkit-background-clip: text; background-clip: text; color: transparent; }
.campaign-app #checkout .pq2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.campaign-app #checkout .pq2 button { position: relative; display: block; width: 100%; text-align: left; padding: 12px 12px 11px; min-height: 92px; border: 1px solid #3A3B42; border-radius: 6px; overflow: hidden; cursor: pointer; font-family: var(--g-ui); color: #fff;
  background: repeating-radial-gradient(circle at 110% -10%, rgba(255, 255, 255, .05) 0 1px, transparent 1px 6px), linear-gradient(135deg, #1B1C21, #0E0F12); }
.campaign-app #checkout .pq2 button::before { content: 'RD$'; position: absolute; right: 10px; top: 8px; font: 800 10px/1 var(--g-ui); letter-spacing: .12em; color: rgba(255, 255, 255, .35); }
.campaign-app #checkout .pq2 .monto { display: block; margin-top: 14px; font: 800 italic 30px/.9 var(--g-carrera); white-space: nowrap; color: #FFFFFF; } /* blanco puro (Angel: «en blanco, no en gris») */
.campaign-app #checkout .pq2 .bol { display: inline-block; margin-top: 8px; padding: 4px 7px; font: 800 11px/1 var(--g-ui); letter-spacing: .04em; background: #26272D; transform: skewX(-10deg); }
.campaign-app #checkout .pq2 button:hover { border-color: #55565E; }
.campaign-app #checkout .pq2 button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.campaign-app #checkout .pq2 button.sel { border-color: var(--g-rojo); background: repeating-radial-gradient(circle at 110% -10%, rgba(255, 77, 102, .12) 0 1px, transparent 1px 6px), linear-gradient(135deg, #3A0D17, #12080B); box-shadow: 0 10px 24px -12px rgba(225, 17, 47, .9); }
.campaign-app #checkout .pq2 button.sel .bol { background: var(--g-rojo); }
.campaign-app #checkout .pq2 button.sel::after { content: '✓'; position: absolute; left: 12px; top: 8px; font: 800 12px/1 var(--g-ui); color: var(--g-neon); }
@media (max-width: 360px) { .campaign-app #checkout .pq2 .monto { font-size: 26px; } }
/* «Total a pagar» también en blanco puro (Angel, 24 sep 2026: «en blanco, no en gris»). */
.campaign-app #checkout .quantity-total > b { background: none; color: #FFFFFF; -webkit-text-fill-color: #FFFFFF; }