/* Inicio de la rifa de la moto Yamaha (5 oct 2026). Misma familia visual que la vitrina de los iPhone (premios.css / nueva-rifa.css):
   negro, cursiva de carreras y un color por premio. Cada rifa trae su tema (assets/js/tema.js). */

/* Hasta saber cuál es la rifa, las vitrinas van ocultas; después solo se ve la del tema. */
html:not([data-tema]) [data-tema] { visibility: hidden; }
html[data-tema="yamaha"] [data-tema="iphone"],
html[data-tema="iphone"] [data-tema="yamaha"] { display: none !important; }

.yz-grid { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.yz-t { position: relative; overflow: hidden; border: 1px solid #24252A; background: #121316; }
.yz-t .lg4-lugar { position: relative; }
.yz-t .lg4-marca { z-index: 0; pointer-events: none; }
.yz-pie { position: relative; z-index: 2; }

/* 1er lugar: la moto a todo el ancho, con luz amarilla detrás */
.yz-p1 { grid-column: 1 / -1; padding: 22px 12px 20px; text-align: center; border-color: #6B5512;
  background: radial-gradient(ellipse 72% 54% at 50% 54%, rgba(255, 200, 20, .52), rgba(255, 150, 0, .17) 56%, transparent 76%), linear-gradient(180deg, #1D1809 0%, #0D0C0A 72%, #080808); }
.yz-p1::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: 74px; height: 30px; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .7), transparent 70%); filter: blur(5px); z-index: 0; }
.yz-p1 .lg4-marca { left: 8px; bottom: auto; top: -16px; font-size: 132px; }
.yz-moto { position: relative; z-index: 1; display: block; width: 94%; max-width: 600px; height: auto; margin: 8px auto 0; filter: drop-shadow(0 22px 20px rgba(0, 0, 0, .72)); }
.yz-p1 .yz-pie { margin-top: 8px; }
.yz-p1 .lg4-lugar { color: #FFC814; font-size: 15px; }
.yz-p1 .lg4-premio { max-width: none; margin-top: 6px; font-size: 42px; }
.yz-p1 .lg-chip { margin-top: 12px; }

/* 2do lugar: iPhone rojo (Burgundy) */
.yz-p2 { grid-column: 1 / -1; min-height: 206px; padding: 16px; border-color: #4A1520;
  background: radial-gradient(circle at 82% 45%, rgba(225, 17, 47, .6), transparent 58%), linear-gradient(135deg, #1D0A0F, #0B0B0D); }
.yz-iphone { position: absolute; right: 8px; bottom: -56px; height: 236px; width: auto; max-width: none; transform: rotate(-12deg); filter: drop-shadow(0 20px 26px rgba(0, 0, 0, .8)); z-index: 1; }
.yz-p2 .lg4-marca { left: -8px; bottom: -34px; }
.yz-p2 .lg4-premio { max-width: 52%; }
.yz-p2 .lg-chip { margin-top: 12px; }

/* 3er y 4to lugar: RD$30,000 en efectivo */
.yz-cash { min-height: 214px; padding: 14px; border-color: #1D4A37;
  background: radial-gradient(circle at 72% 24%, rgba(47, 168, 116, .44), transparent 60%), linear-gradient(160deg, #0F1F19, #0B0B0D); }
.yz-billetes { position: absolute; left: 50%; top: 16px; width: 134px; max-width: 86%; height: auto; transform: translateX(-50%) rotate(-4deg); z-index: 1; filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .65)); }
.yz-cash .yz-pie { position: absolute; left: 14px; right: 8px; bottom: 16px; }
.yz-cash .lg4-lugar { color: #7FE0B3; }
.yz-monto { display: block; margin-top: 8px; font: 800 italic 28px/.95 var(--pz-carrera); color: #FFFFFF; white-space: nowrap; }
.yz-monto small { display: block; margin-top: 7px; font: 700 11px/1 var(--pz-ui); letter-spacing: .16em; text-transform: uppercase; color: #8FD9B6; font-style: normal; }
.yz-cash .lg4-marca { left: auto; right: -6px; bottom: -34px; }

.yz-amarillo, .yz-rojo { background: #F5C400; }
.yz-rojo { background: #D4152C; }

/* Ventana de compra: la moto en lugar de los tres iPhone */
.yz-vitrina { position: relative; margin: 0 auto 14px; text-align: center; }
.yz-vitrina img { display: block; width: 86%; max-width: 360px; height: auto; margin: 0 auto; filter: drop-shadow(0 16px 16px rgba(0, 0, 0, .6)); }
.yz-vitrina .garaje-ref { display: block; margin-top: 6px; }

@media (min-width: 900px) {
  .nr .yz-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .yz-p1 { grid-column: 1 / 3; grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: center; padding: 34px 20px 28px; }
  .yz-p1 .lg4-premio { font-size: 64px; }
  .yz-p2 { grid-column: 3 / 5; grid-row: 1; min-height: 340px; padding: 24px; }
  .yz-p2 .lg4-premio { font-size: 44px; }
  .yz-iphone { height: 360px; right: 8px; bottom: -88px; }
  .yz-cash { min-height: 236px; padding: 20px; }
  .yz-billetes { width: 200px; top: 22px; }
  .yz-monto { font-size: 30px; }
}

/* Mis boletos: a qué rifa pertenece cada boleto (con dos rifas, los números se repiten entre una y otra) */
.ticket-rifa { display: block; margin: 10px 0 0; font: 700 11px/1.3 var(--pz-ui); letter-spacing: .12em; text-transform: uppercase; color: #A9ABB3; }

/* El svg de degradados (0×0) caía en línea y metía una línea vacía (25 px) entre «Quiero participar» y el 1er lugar. */
.lg4 > svg { position: absolute !important; width: 0 !important; height: 0 !important; overflow: hidden; }