:root { --violeta: #4F17A8; --naranja: #FF610F; --cian: #05BFE0; --fondo: #0D0619; color-scheme: dark; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden; color: #fff; background: var(--fondo);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased;
  display: grid; grid-template-rows: auto 1fr auto;
}
[hidden] { display: none !important; }

.fondo { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(90% 90% at 50% 40%, #2A0D5C 0%, var(--fondo) 70%); }
.fondo i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .45; animation: flotar 18s ease-in-out infinite alternate; }
.fondo .b1 { width: 40vw; height: 40vw; background: var(--violeta); left: -10vw; top: -12vw; }
.fondo .b2 { width: 30vw; height: 30vw; background: var(--naranja); right: -8vw; bottom: -10vw; opacity: .28; animation-delay: -6s; }
.fondo .b3 { width: 26vw; height: 26vw; background: var(--cian); right: 20vw; top: -14vw; opacity: .2; animation-delay: -12s; }
@keyframes flotar { to { transform: translate(4vw, 3vw) scale(1.1); } }

.cab { display: flex; align-items: center; justify-content: space-between; padding: 3vh 4vw 0; }
.logo { height: 7vh; width: auto; }
.cab-der { display: flex; align-items: center; gap: 1.4vw; font-size: 2.1vh; font-weight: 600; }
.en-vivo { display: inline-flex; align-items: center; gap: .6em; padding: .45em .9em; border-radius: 99px; background: rgba(255, 97, 15, .16); color: #FFB287; font-weight: 800; letter-spacing: .1em; font-size: 1.8vh; }
.punto { width: .8em; height: .8em; border-radius: 50%; background: var(--naranja); animation: latido 1.4s infinite; }
@keyframes latido { 50% { opacity: .3; } }
.instancia { opacity: .8; }

.escena { position: relative; display: grid; padding: 0 4vw; min-height: 0; }
.reposo { align-self: center; text-align: center; }
.reposo .sup { margin: 0 0 2vh; font-size: 2.4vh; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cian); }
.reposo h1 { margin: 0 auto; max-width: 16ch; font-size: 9vh; line-height: 1.02; letter-spacing: -.03em; font-weight: 800; }
.r-sub { margin: 3vh 0 0; font-size: 3vh; opacity: .75; }

.vivo { display: grid; grid-template-columns: 1fr minmax(260px, 26vw); gap: 4vw; align-items: center; min-height: 0; }
.centro { text-align: center; }
.premio { margin: 0; font-size: 4vh; font-weight: 700; color: #FFB287; }
.nombre { margin: 2.4vh 0 1.6vh; font-size: 11vh; line-height: 1.02; letter-spacing: -.03em; font-weight: 800; min-height: 1.05em; overflow-wrap: anywhere; }
.detalle { margin: 0; font-size: 3vh; opacity: .8; }
.vivo.girando .nombre { opacity: .7; }
.vivo.revelado:not(.ausente) .nombre { background: linear-gradient(90deg, #fff, #FFD2B8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vivo.ausente .nombre { text-decoration: line-through; text-decoration-thickness: .08em; opacity: .5; }
.vivo.ausente .detalle { color: #FFB287; opacity: 1; font-weight: 700; }
.pop { animation: pop .8s cubic-bezier(.2, 1.4, .3, 1) both; }
@keyframes pop { 0% { transform: scale(.5); opacity: 0; } 100% { transform: none; opacity: 1; } }

.lista { align-self: stretch; margin: 4vh 0; padding: 2.4vh 1.6vw; border-radius: 2vh; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); overflow: hidden; display: flex; flex-direction: column; }
.lista h2 { margin: 0 0 1.4vh; font-size: 2vh; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.lista ol { margin: 0; padding: 0; list-style: none; overflow: hidden; }
.lista li { display: flex; flex-direction: column; padding: 1.1vh 0; border-top: 1px solid rgba(255, 255, 255, .08); animation: aparecer .5s ease both; }
.lista li:first-child { border-top: 0; }
.g-nombre { font-size: 2.3vh; font-weight: 700; }
.g-premio { font-size: 1.8vh; opacity: .65; }
.vacio { margin: 0; font-size: 2vh; opacity: .6; }
@keyframes aparecer { from { opacity: 0; transform: translateX(10px); } }

.pie { display: flex; align-items: center; gap: 1.6vw; padding: 0 4vw 3vh; }
.qr { width: 12vh; height: 12vh; padding: .7vh; border-radius: 1.2vh; background: #fff; }
.qr img { width: 100%; height: 100%; display: block; }
.pie-sup { margin: 0; font-size: 1.9vh; opacity: .7; }
.pie-url { margin: .2vh 0 0; font-size: 3.4vh; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.sponsors { margin-left: auto; display: flex; gap: 2.4vw; align-items: center; }
.sponsors { flex-wrap: wrap; justify-content: flex-end; max-width: 70vw; row-gap: 1.5vh; }
.sponsors img { width: auto; object-fit: contain; }

.pantalla-completa { position: fixed; right: 12px; bottom: 12px; background: rgba(255, 255, 255, .08); color: #fff; border: 0; border-radius: 8px; width: 36px; height: 36px; font-size: 18px; cursor: pointer; opacity: .25; }
.pantalla-completa:hover { opacity: 1; }
:fullscreen .pantalla-completa { display: none; }
.offline { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); background: #B42318; padding: 6px 14px; border-radius: 8px; font-weight: 700; font-size: 14px; }

@media (max-aspect-ratio: 4/3) {
  .vivo { grid-template-columns: 1fr; }
  .lista { display: none; }
}

.final { align-self: center; min-height: 0; display: flex; flex-direction: column; gap: 3vh; }
.final h1 { margin: 0; text-align: center; font-size: 6vh; letter-spacing: -.02em; font-weight: 800; }
.final-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 3vw; min-height: 0; }
.final-col { padding: 2.4vh 2vw; border-radius: 2vh; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); overflow: hidden; }
.final-col h2 { margin: 0 0 1.4vh; font-size: 2.6vh; color: #FFB287; }
.final-col ol { list-style: none; margin: 0; padding: 0; columns: 1; }
.final-col li { display: flex; justify-content: space-between; gap: 1vw; padding: .9vh 0; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 2.3vh; }
.final-col li:first-child { border-top: 0; }
.final-col .g-nombre { font-weight: 700; font-size: 2.3vh; }
.final-col .g-premio { opacity: .7; font-size: 2vh; }
.final-col ol.dos { columns: 2; column-gap: 2vw; }
.final-col ol.dos li { break-inside: avoid; font-size: 1.9vh; }
.final-col ol.dos .g-nombre { font-size: 1.9vh; }
.final-col ol.dos .g-premio { font-size: 1.6vh; }

/* Sponsor que regala el premio: "Gentileza de [logo]" */
.gentileza { margin: 1.4vh 0 0; display: flex; justify-content: center; align-items: center; gap: 1.2vw; font-size: 2.4vh; font-weight: 600; color: rgba(255, 255, 255, .7); }
.gentileza img { height: 5vh; width: auto; max-width: 22vw; object-fit: contain; }
.gentileza b { color: #fff; font-size: 3vh; }
.g-sponsor { opacity: .8; }

/* Listas de ganadores con scroll (rueda del mouse, barra o teclado) cuando no entran en pantalla */
.escena { grid-template-rows: minmax(0, 1fr); }
.vivo, .final { height: 100%; }
.vivo { align-items: stretch; }
.vivo .centro { align-self: center; }
.lista ol, .final-col ol { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: .6vw;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .3) transparent; }
.lista ol::-webkit-scrollbar, .final-col ol::-webkit-scrollbar { width: 8px; }
.lista ol::-webkit-scrollbar-thumb, .final-col ol::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .28); border-radius: 8px; }
.final { justify-content: center; padding-bottom: 2vh; }
.final-cols { flex: 0 1 auto; min-height: 0; }
.final-col { display: flex; flex-direction: column; min-height: 0; max-height: 100%; }
.final-col ol.dos { columns: auto; }
.sponsors { flex-direction: column; align-items: flex-end; gap: 1.4vh; flex-wrap: nowrap; }
.fila-sp { display: flex; align-items: center; justify-content: flex-end; gap: 2.2vw; }
/* Indica que hay más ganadores abajo */
.lista ol, .final-col ol { -webkit-mask-image: linear-gradient(#000 calc(100% - 4vh), transparent); mask-image: linear-gradient(#000 calc(100% - 4vh), transparent); padding-bottom: 3vh; }

/* Pie: "Seguilo desde el celular" arriba del QR y, al lado, todos los sponsors en una sola fila */
.pie { align-items: flex-end; gap: 3vw; }
.qr-bloque { flex: none; display: flex; flex-direction: column; align-items: center; gap: 1vh; }
.qr-bloque .pie-sup { margin: 0; font-size: 1.9vh; font-weight: 600; opacity: .8; white-space: nowrap; }
.sponsors { flex: 1; min-width: 0; margin-left: 0; max-width: none; flex-direction: row; flex-wrap: nowrap; align-items: center;
  justify-content: space-evenly; gap: 2.4vw; align-self: center; }
.sponsors img { flex: none; object-fit: contain; }
body { grid-template-columns: minmax(0, 1fr); } .pie, .cab, .escena { min-width: 0; }