/* La ventana del sorteo abierto (web-sorteo-ventana): un <dialog> negro y dorado, centrado; en
   el móvil, abajo, como una hoja que sube, para no tapar toda la página y que el pulgar llegue a
   los botones. Entra con un fundido corto, y sin moverse si se piden menos animaciones. */
.sv {
  width: min(440px, calc(100% - 32px)); max-width: none;
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  padding: 0; border: 0; overflow: auto;
  background: #111; color: #fff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
  font-family: var(--font-body, 'Montserrat', system-ui, sans-serif);
}
.sv::backdrop { background: rgba(0, 0, 0, .55); }
.sv-caja { position: relative; }

.sv-img {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10;
  background: #1c1c1c; overflow: hidden;
}
.sv-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-img .ti { font-size: 72px; color: var(--gold, #EFB814); }

.sv-cerrar {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border: 0; background: rgba(0, 0, 0, .6); color: #fff; font-size: 20px; cursor: pointer;
  transition: background-color .15s ease;
}

.sv-txt { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; }
.sv-chapa {
  align-self: flex-start; padding: 3px 8px; background: var(--gold, #EFB814); color: #111;
  font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
}
.sv-titulo {
  margin: 0; color: #fff; font-size: 24px; font-weight: 900; line-height: 1.1;
  letter-spacing: .01em; text-transform: uppercase; overflow-wrap: anywhere;
}
.sv-premio { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: 16px; font-weight: 800; line-height: 1.3; }
.sv-premio small { color: var(--gold, #EFB814); font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.sv-premio span { color: rgba(255, 255, 255, .6); font-size: 12px; font-weight: 600; }
.sv-cuando { margin: 0; color: rgba(255, 255, 255, .78); font-size: 13px; line-height: 1.45; }
.sv-cuando .ti { color: var(--gold, #EFB814); }
.sv-pista {
  margin: 0; padding: 9px 12px; border-left: 3px solid var(--gold, #EFB814);
  background: rgba(239, 184, 20, .12); color: #fff; font-size: 13px; line-height: 1.4;
}
.sv-pista .ti { color: var(--gold, #EFB814); font-size: 16px; vertical-align: -2px; }

.sv-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 6px; }
.sv-participar { flex: 1 1 auto; }
.sv-luego {
  padding: 10px 4px; border: 0; background: none; cursor: pointer;
  color: rgba(255, 255, 255, .7); font: inherit; font-size: 12px; font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
  transition: color .15s ease;
}
.sv-mas { color: var(--gold, #EFB814); font-size: 12px; text-underline-offset: 3px; }
.sv :focus-visible { outline: 2px solid var(--gold, #EFB814); outline-offset: 3px; }

@media (hover: hover) and (pointer: fine) {
  .sv-cerrar:hover { background: #000; }
  .sv-luego:hover { color: #fff; }
}

/* Entrar y salir: lo justo para que no aparezca de golpe. */
.sv[open] { animation: sv-entra .24s cubic-bezier(.23, 1, .32, 1); }
.sv[open]::backdrop { animation: sv-funde .24s ease-out; }
.sv.is-saliendo { animation: sv-sale .16s ease-out forwards; }
.sv.is-saliendo::backdrop { animation: sv-funde-fuera .16s ease-out forwards; }
@keyframes sv-entra { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes sv-sale { to { opacity: 0; transform: translateY(6px) scale(.98); } }
@keyframes sv-sube { from { transform: translateY(100%); } }
@keyframes sv-baja { to { transform: translateY(100%); } }
@keyframes sv-funde { from { opacity: 0; } }
@keyframes sv-funde-fuera { to { opacity: 0; } }

@media (max-width: 600px) {
  .sv { width: 100%; margin: auto 0 0; max-height: 88vh; max-height: 88dvh; }
  .sv-img { aspect-ratio: 16 / 9; }
  .sv-txt { padding: 16px 18px calc(18px + env(safe-area-inset-bottom, 0px)); }
  .sv-titulo { font-size: 21px; }
  .sv[open] { animation-name: sv-sube; }
  .sv.is-saliendo { animation-name: sv-baja; }
}

@media (prefers-reduced-motion: reduce) {
  .sv[open] { animation-name: sv-funde; }
  .sv.is-saliendo { animation-name: sv-funde-fuera; }
}