/* ================================================================
   Estilo de presentación "Sortea": el dado en 3D, el ingreso y el
   escenario del sorteo en vivo (orbita.js). Solo se carga cuando la
   instancia tiene Configuración → Marca → Estilo = Sortea.
   Los puntos del dado, los botones y los brillos usan --sd-acento, el
   color principal de la entidad; el rosado de Sortea queda solo en la
   palabra «sortea».
   ================================================================ */
:root {
  --sd-fondo: #07080B;
  --sd-superficie: #0E1117;
  --sd-superficie-2: #141821;
  --sd-linea: #232937;
  --sd-linea-2: #313848;
  --sd-rosa: #FF5C9A;            /* solo la palabra «sortea» */
  --sd-acento: #FF5C9A;          /* color principal de la entidad: lo pone cada página */
  --sd-acento-texto: #0B0F19;
  --sd-texto: #FFFFFF;
  --sd-texto-2: #AEB6C5;
  --sd-texto-3: #7D8799;
}

/* La palabra «sortea»: el único rosado que se conserva con los colores de cada entidad. */
.sd-palabra { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 19px; letter-spacing: -.02em; color: var(--sd-rosa); }

/* ── El dado ───────────────────────────────────────────────────── */
.sd-dado-escena { perspective: calc(var(--dd, 120px) * 6); width: var(--dd, 120px); height: var(--dd, 120px); }
.sd-dado { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.sd-cara {
  position: absolute; inset: 0; box-sizing: border-box; border-radius: 22%;
  background: radial-gradient(circle at 30% 25%, #ffffff 0%, #F2F3F7 55%, #D9DCE5 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), inset 0 calc(var(--dd, 120px) * -.07) calc(var(--dd, 120px) * .16) rgba(25,35,70,.2);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr));
  padding: 15%; backface-visibility: hidden;
}
.sd-punto { width: 64%; height: 64%; margin: auto; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in oklab, var(--sd-acento) 52%, #fff), var(--sd-acento) 55%, color-mix(in oklab, var(--sd-acento) 72%, #000)); box-shadow: 0 0 calc(var(--dd, 120px) * .07) color-mix(in srgb, var(--sd-acento) 55%, transparent); }
/* Núcleo: tres planos interiores que tapan el hueco entre caras redondeadas (si no, de lado parecen dos fichas). */
.sd-nucleo, .sd-nucleo::before, .sd-nucleo::after { position: absolute; inset: 2%; border-radius: 18%; background: #DCDFE7; }
.sd-nucleo { transform-style: preserve-3d; }
.sd-nucleo::before, .sd-nucleo::after { content: ""; inset: 0; }
.sd-nucleo::before { transform: rotateY(90deg); }
.sd-nucleo::after { transform: rotateX(90deg); }
.sd-p-tl{grid-area:1/1}.sd-p-tr{grid-area:1/3}.sd-p-ml{grid-area:2/1}.sd-p-c{grid-area:2/2}.sd-p-mr{grid-area:2/3}.sd-p-bl{grid-area:3/1}.sd-p-br{grid-area:3/3}
.sd-cara.f { transform: translateZ(calc(var(--dd, 120px) / 2)); }
.sd-cara.b { transform: rotateY(180deg) translateZ(calc(var(--dd, 120px) / 2)); }
.sd-cara.r { transform: rotateY(90deg) translateZ(calc(var(--dd, 120px) / 2)); }
.sd-cara.l { transform: rotateY(-90deg) translateZ(calc(var(--dd, 120px) / 2)); }
.sd-cara.t { transform: rotateX(90deg) translateZ(calc(var(--dd, 120px) / 2)); }
.sd-cara.d { transform: rotateX(-90deg) translateZ(calc(var(--dd, 120px) / 2)); }
.sd-dado-mini .sd-cara { padding: 13%; box-shadow: none; }
.sd-dado-mini .sd-punto { box-shadow: none; }

.sd-flota { animation: sd-flota 18s ease-in-out infinite; }
.sd-flota-mini { animation: sd-flota 11s ease-in-out infinite; }
.sd-rueda { animation: sd-rueda .85s linear infinite; }
.sd-aterriza { animation: sd-aterriza 1s cubic-bezier(.15,.85,.3,1.08) both; }
@keyframes sd-flota {
  0%   { transform: rotateX(-20deg) rotateY(-30deg) rotateZ(0deg); }
  20%  { transform: rotateX(38deg)  rotateY(58deg)  rotateZ(10deg); }
  40%  { transform: rotateX(-12deg) rotateY(142deg) rotateZ(-14deg); }
  60%  { transform: rotateX(78deg)  rotateY(92deg)  rotateZ(6deg); }
  80%  { transform: rotateX(18deg)  rotateY(-24deg) rotateZ(-10deg); }
  100% { transform: rotateX(-20deg) rotateY(-30deg) rotateZ(0deg); }
}
@keyframes sd-rueda { to { transform: rotateX(720deg) rotateY(1080deg) rotateZ(360deg); } }
@keyframes sd-aterriza {
  from { transform: rotateX(560deg) rotateY(-500deg) rotateZ(120deg); }
  to   { transform: rotateX(-16deg) rotateY(20deg) rotateZ(0deg); }
}
.sd-vaiven { animation: sd-vaiven 4.5s ease-in-out infinite; }
@keyframes sd-vaiven { 0%,100% { transform: translateY(-6%); } 50% { transform: translateY(6%); } }
.sd-sombra { border-radius: 50%; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--sd-acento) 50%, transparent), transparent 70%); animation: sd-sombra 4.5s ease-in-out infinite; }
@keyframes sd-sombra { 0%,100% { transform: scale(.85); opacity: .55; } 50% { transform: scale(1.05); opacity: .9; } }

@media (prefers-reduced-motion: reduce) {
  .sd-flota, .sd-flota-mini, .sd-vaiven, .sd-sombra { animation: none; }
}

/* ── Ingreso ───────────────────────────────────────────────────── */
.sd-ingreso, #orbita-escena {
  --sd-fondo: color-mix(in oklab, var(--sd-acento) 9%, #05060A);
  --sd-superficie: color-mix(in oklab, var(--sd-acento) 6%, #0C0F15);
  --sd-superficie-2: color-mix(in oklab, var(--sd-acento) 8%, #131720);
  --sd-acento-luz: color-mix(in oklab, var(--sd-acento) 58%, #fff);
}
.sd-ingreso { margin: 0; min-height: 100vh; display: flex; background: var(--sd-fondo); color: var(--sd-texto); font-family: 'Manrope', system-ui, sans-serif; }
.sd-ingreso-escenario { flex: 1 1 auto; position: relative; overflow: hidden; min-height: 100vh; }
.sd-luz { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .45; pointer-events: none; }
.sd-luz-1 { left: 18%; top: 18%; width: 34vw; height: 34vw; max-width: 460px; max-height: 460px; background: var(--sd-acento); animation: sd-luz-1 16s ease-in-out infinite alternate; }
.sd-luz-2 { left: 34%; top: 40%; width: 28vw; height: 28vw; max-width: 380px; max-height: 380px; background: var(--sd-acento-luz); opacity: .3; animation: sd-luz-2 19s ease-in-out infinite alternate; }
@keyframes sd-luz-1 { from { transform: translate(0,0); } to { transform: translate(8vw,6vh); } }
@keyframes sd-luz-2 { from { transform: translate(0,0); } to { transform: translate(-7vw,-5vh); } }
.sd-ingreso-marca { position: absolute; left: 48px; top: 40px; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 26px; letter-spacing: -.01em; color: var(--sd-rosa); }
.sd-ingreso-dado { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 28px; }
.sd-ingreso-texto { position: absolute; left: 48px; right: 48px; bottom: 52px; max-width: 620px; display: flex; flex-direction: column; gap: 10px; }
.sd-ingreso-texto h1 { margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.04; letter-spacing: -.02em; }
.sd-ingreso-texto p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--sd-texto-2); }
.sd-ingreso-panel { width: 480px; flex: 0 0 480px; box-sizing: border-box; background: var(--sd-superficie); border-left: 1px solid rgba(255,255,255,.07); padding: 56px 52px 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.sd-entidad { display: flex; align-items: center; gap: 14px; }
.sd-entidad-logo { width: 60px; height: 60px; border-radius: 16px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; flex: 0 0 60px; }
.sd-entidad-logo img { max-width: 86%; max-height: 86%; object-fit: contain; }
.sd-entidad-logo.sd-marca-con-fondo { box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
/* Con fondo propio el logo llena el recuadro, que toma su proporción (los logos anchos no quedan diminutos). */
.sd-entidad-logo.sd-marca-con-fondo, .orb-entidad .sd-entidad-logo.sd-marca-con-fondo { width: auto; flex: 0 0 auto; }
.sd-entidad-logo.sd-marca-con-fondo img { height: 100%; width: auto; max-width: 200px; max-height: 100%; }
.sd-entidad-nombre { font-size: 18px; font-weight: 800; }
.sd-entidad-sub { font-size: 13px; color: var(--sd-texto-3); }
.sd-titulo { margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 36px; letter-spacing: -.02em; }
.sd-subtitulo { margin: 6px 0 0; font-size: 15px; color: var(--sd-texto-2); }
.sd-form { display: flex; flex-direction: column; gap: 16px; }
.sd-campo { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 700; color: #C9D0DB; }
.sd-input { height: 50px; box-sizing: border-box; padding: 0 16px; border-radius: 14px; border: 1px solid var(--sd-linea-2); background: var(--sd-fondo); color: #fff; font-family: inherit; font-size: 15px; transition: border-color .2s, box-shadow .2s; }
.sd-input:focus { outline: none; border-color: var(--sd-acento-luz); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sd-acento) 35%, transparent); }
.sd-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.sd-fila label { display: flex; align-items: center; gap: 8px; color: var(--sd-texto-2); }
.sd-fila input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--sd-acento); }
.sd-enlace { color: var(--sd-acento-luz); font-weight: 700; text-decoration: none; }
.sd-enlace:hover { color: #fff; }
.sd-boton { height: 56px; border: 0; border-radius: 999px; background: var(--sd-acento); color: var(--sd-acento-texto); font-family: inherit; font-size: 17px; font-weight: 800; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 10px 30px -10px color-mix(in srgb, var(--sd-acento) 85%, transparent); transition: transform .15s, box-shadow .2s; }
.sd-boton:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 14px 40px -10px color-mix(in srgb, var(--sd-acento) 95%, transparent); }
.sd-boton:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.sd-error { font-size: 13px; color: #FF9A9A; }
.sd-aviso { padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--sd-acento) 14%, transparent); border: 1px solid color-mix(in srgb, var(--sd-acento) 45%, transparent); font-size: 14px; }
.sd-pie { font-size: 13px; color: #586274; }
.sd-pie strong { color: var(--sd-rosa); font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; }
/* Sin color-mix() (navegadores viejos): fondo oscuro fijo en el ingreso y el escenario. */
@supports not (color: color-mix(in oklab, red, red)) {
  .sd-ingreso, #orbita-escena { --sd-fondo: #05060A; --sd-superficie: #0C0F15; --sd-superficie-2: #131720; --sd-acento-luz: #FFFFFF; }
}

/* Recuperar y restablecer contraseña: sus formularios (clases login-*) con el aspecto del ingreso. */
.sd-form-clasico { display: flex; flex-direction: column; gap: 22px; }
.sd-form-clasico .login-welcome-title { margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 32px; letter-spacing: -.02em; }
.sd-form-clasico .login-welcome-sub { margin: 6px 0 0; font-size: 15px; color: var(--sd-texto-2); }
.sd-form-clasico .login-form { display: flex; flex-direction: column; gap: 16px; }
.sd-form-clasico .login-field { display: flex; flex-direction: column; gap: 8px; }
.sd-form-clasico .login-label { font-size: 13px; font-weight: 700; color: #C9D0DB; text-transform: lowercase; letter-spacing: 0; }
.sd-form-clasico .login-label::first-letter { text-transform: uppercase; }
.sd-form-clasico .login-input { width: 100%; height: 50px; box-sizing: border-box; padding: 0 16px; border-radius: 14px; border: 1px solid var(--sd-linea-2); background: var(--sd-fondo); color: #fff; font-family: inherit; font-size: 15px; }
.sd-form-clasico .login-input[readonly] { color: var(--sd-texto-2); }
.sd-form-clasico .login-input:focus { outline: none; border-color: var(--sd-acento-luz); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sd-acento) 35%, transparent); }
.sd-form-clasico .login-password-wrap { position: relative; }
.sd-form-clasico .login-password-wrap .login-input { padding-right: 48px; }
.sd-form-clasico .toggle-pass { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; background: none; color: var(--sd-texto-3); cursor: pointer; padding: 6px; }
.sd-form-clasico .toggle-pass svg { width: 20px; height: 20px; }
.sd-form-clasico .login-btn { height: 56px; border: 0; border-radius: 999px; background: var(--sd-acento); color: var(--sd-acento-texto); font-family: inherit; font-size: 17px; font-weight: 800; cursor: pointer; margin-top: 4px; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 10px 30px -10px color-mix(in srgb, var(--sd-acento) 85%, transparent); }
.sd-form-clasico .login-btn:hover { transform: translateY(-2px); }
.sd-form-clasico .login-error { font-size: 13px; color: #FF9A9A; }
.sd-form-clasico .login-alert { padding: 12px 14px; border-radius: 12px; font-size: 14px; background: color-mix(in srgb, var(--sd-acento) 14%, transparent); border: 1px solid color-mix(in srgb, var(--sd-acento) 45%, transparent); }
.sd-form-clasico .login-links a { color: var(--sd-acento-luz); font-weight: 700; text-decoration: none; font-size: 14px; }
.sd-form-clasico .login-links a:hover { color: #fff; }

/* Resultado de la consulta pública de inscripción (verificar-sortea). */
.sd-resultado { padding: 18px 20px; border-radius: 16px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.sd-resultado p { margin: 0; color: var(--sd-texto-2); line-height: 1.5; }
.sd-resultado-titulo { display: flex; align-items: center; gap: 10px; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 20px; }
.sd-resultado-icono { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-family: 'Manrope', sans-serif; font-size: 16px; font-weight: 800; }
.sd-resultado-ok { background: color-mix(in srgb, var(--sd-acento) 14%, transparent); border: 1px solid color-mix(in srgb, var(--sd-acento) 50%, transparent); }
.sd-resultado-ok .sd-resultado-icono { background: var(--sd-acento); color: var(--sd-acento-texto); }
.sd-resultado-no { background: rgba(255, 120, 120, .08); border: 1px solid rgba(255, 120, 120, .35); }
.sd-resultado-no .sd-resultado-icono { background: #FF8A8A; color: #2A0B0B; }
.sd-resultado dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; }
.sd-resultado dt { color: var(--sd-texto-3); font-weight: 700; }
.sd-resultado dd { margin: 0; font-weight: 700; }

/* Resultado público de un sorteo (resultados/publico-sortea). */
.sd-publico { flex-direction: column; position: relative; overflow-x: hidden; }
.sd-publico-cabecera { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 28px clamp(20px, 4vw, 48px); }
.sd-publico-marca { display: flex; align-items: center; gap: 10px; }
.sd-publico-centro { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 16px clamp(20px, 4vw, 48px) 32px; text-align: center; }
.sd-publico-etiqueta { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; letter-spacing: .34em; color: var(--sd-acento-luz); }
.sd-publico-etiqueta i { width: 28px; height: 2px; background: var(--sd-acento); }
.sd-publico-premio { margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: clamp(30px, 4.2vw, 60px); line-height: 1.04; letter-spacing: -.02em; max-width: 1000px; }
.sd-publico-ganadores { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 8px; width: 100%; max-width: 1100px; }
.sd-publico-ganador { flex: 1 1 260px; max-width: 360px; box-sizing: border-box; padding: 20px 22px; border-radius: 20px; text-align: left; border: 1px solid color-mix(in srgb, var(--sd-acento) 45%, transparent); background: linear-gradient(180deg, var(--sd-superficie-2), var(--sd-superficie)); box-shadow: 0 0 50px -20px color-mix(in srgb, var(--sd-acento) 70%, transparent); }
.sd-publico-puesto { font-size: 11px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--sd-acento-luz); }
.sd-publico-ganador h2 { margin: 8px 0 6px; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: clamp(20px, 2vw, 28px); line-height: 1.1; }
.sd-publico-ganador p { margin: 0; font-size: 14px; color: var(--sd-texto-2); }
.sd-publico-nota { margin: 0; max-width: 520px; font-size: 16px; line-height: 1.5; color: var(--sd-texto-2); }
.sd-publico-qr { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 18px; }
.sd-publico-qr #qr-resultado { border-radius: 14px; background: #fff; padding: 8px; line-height: 0; }
.sd-publico-qr #qr-resultado img, .sd-publico-qr #qr-resultado canvas { display: block; }
.sd-publico-qr small { font-size: 12px; color: var(--sd-texto-3); }
.sd-publico-pie { position: relative; z-index: 1; padding: 20px; text-align: center; font-size: 13px; color: #586274; }
.sd-publico-pie strong { color: var(--sd-rosa); font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; }
.sd-muro-centro { justify-content: flex-start; padding-bottom: 110px; }
.sd-muro-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; width: 100%; max-width: 1400px; margin-top: 10px; }
.sd-muro-tarjeta { max-width: none; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; animation: orb-pop .55s cubic-bezier(.2,1.4,.4,1) both; }
.sd-muro-emoji { font-size: 44px; line-height: 1; margin-bottom: 6px; font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; }
.sd-muro-tarjeta h2 { margin: 4px 0 2px; }
.sd-muro-imagen { width: 100%; max-height: 150px; object-fit: contain; margin-bottom: 8px; filter: drop-shadow(0 16px 20px rgba(0,0,0,.5)); }
.sd-publico-imagen { max-width: min(86vw, 760px); max-height: 38vh; object-fit: contain; border-radius: 20px; filter: drop-shadow(0 30px 40px rgba(0,0,0,.6)); }
.sd-muro-premio { margin-top: 10px; display: inline-block; padding: 7px 14px; border-radius: 999px; background: var(--sd-acento); color: var(--sd-acento-texto); font-size: 13px; font-weight: 800; }
.sd-muro-reacciones { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; gap: 8px; padding: 10px 16px; border-radius: 999px; background: rgba(10, 12, 18, .7); border: 1px solid rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.sd-muro-reacciones .reaccion-btn { border: 0; background: none; font-size: 26px; line-height: 1; padding: 4px 8px; border-radius: 50%; cursor: pointer; transition: transform .15s; }
.sd-muro-reacciones .reaccion-btn:hover { transform: scale(1.25); background: rgba(255, 255, 255, .08); }
.sd-muro-flota { position: fixed; bottom: 90px; z-index: 6; font-size: 40px; pointer-events: none; animation: sd-muro-flota 2.5s ease-out forwards; }
@keyframes sd-muro-flota { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-300px) scale(1.5); } }
@media (max-width: 600px) { .sd-publico-cabecera { padding: 20px; } .sd-publico-marca .sd-dado-escena { display: none; } .sd-muro-rejilla { grid-template-columns: 1fr; } }

@media (max-width: 900px) {
  .sd-ingreso { flex-direction: column; }
  .sd-ingreso-escenario { min-height: 280px; flex: 0 0 280px; }
  .sd-ingreso-texto { display: none; }
  .sd-ingreso-dado { top: 56%; gap: 16px; }
  .sd-ingreso-dado .sd-dado-escena { --dd: 130px !important; }
  .sd-ingreso-dado .sd-sombra { width: 110px !important; height: 18px !important; }
  .sd-ingreso-panel { width: auto; flex: 1 1 auto; padding: 36px 24px; border-left: 0; border-top: 1px solid rgba(255,255,255,.07); }
}

/* ── Escenario del sorteo en vivo (orbita.js) ──────────────────── */
#orbita-escena { position: fixed; inset: 0; z-index: 1000000; display: none; background: var(--sd-fondo); color: #fff; font-family: 'Manrope', system-ui, sans-serif; overflow: hidden; }
#orbita-escena.visible { display: block; }
#orbita-escena canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* fel-theme.css fija el color de los títulos con !important: en el escenario van en blanco. */
#orbita-escena h1, #orbita-escena h2, #orbita-escena .orb-nombre, #orbita-escena .orb-t-nombre { color: #fff !important; }
.orb-cabecera { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 3.4vh 3.4vw; z-index: 2; }
.orb-entidad { display: flex; align-items: center; gap: 14px; }
.orb-entidad .sd-entidad-logo { width: clamp(44px, 4.4vw, 64px); height: clamp(44px, 4.4vw, 64px); flex-basis: auto; }
.orb-entidad-nombre { font-size: clamp(15px, 1.4vw, 20px); font-weight: 800; }
.orb-derecha { display: flex; align-items: center; gap: 18px; }
.orb-vivo { display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--sd-linea); font-size: 13px; font-weight: 800; letter-spacing: .1em; }
.orb-vivo span { width: 8px; height: 8px; border-radius: 50%; background: var(--sd-acento-luz); animation: orb-vivo 1.6s ease-out infinite; }
@keyframes orb-vivo { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sd-acento-luz) 60%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
.orb-marca { display: flex; align-items: center; gap: 10px; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: clamp(18px, 1.7vw, 24px); color: var(--sd-rosa); }
.orb-premio { position: absolute; top: 13vh; left: 4vw; right: 4vw; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; z-index: 2; }
.orb-etiqueta { display: flex; align-items: center; gap: 10px; font-size: clamp(11px, 1vw, 14px); font-weight: 800; letter-spacing: .34em; color: var(--sd-acento-luz); }
.orb-etiqueta i { width: 28px; height: 2px; background: var(--sd-acento); display: inline-block; }
.orb-premio h1 { margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: clamp(32px, 4.4vw, 68px); line-height: 1.02; letter-spacing: -.02em; }
.orb-dado { position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 2vh; transition: opacity .4s, transform .5s; }
.orb-dado.oculto { opacity: 0; transform: translate(-50%, -50%) scale(.4); pointer-events: none; }
.orb-cuenta { position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%); z-index: 3; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: clamp(90px, 16vw, 240px); color: #fff; opacity: 0; pointer-events: none; text-shadow: 0 0 60px color-mix(in srgb, var(--sd-acento) 70%, transparent); }
.orb-cuenta.late { animation: orb-late .95s ease-out both; }
@keyframes orb-late { 0% { opacity: 0; transform: translate(-50%,-50%) scale(1.8); } 30% { opacity: .9; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(.9); } }
.orb-ganadores { position: absolute; left: 4vw; right: 4vw; top: 30vh; bottom: 16vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.4vh; z-index: 3; text-align: center; }
.orb-nombre { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; line-height: 1; letter-spacing: -.02em; text-shadow: 0 0 40px color-mix(in srgb, var(--sd-acento) 55%, transparent); animation: orb-aparece .9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes orb-aparece { from { opacity: 0; letter-spacing: .06em; filter: blur(8px); } to { opacity: 1; letter-spacing: -.02em; filter: blur(0); } }
.orb-chip { display: inline-block; padding: 7px 16px; border-radius: 999px; background: var(--sd-acento); color: var(--sd-acento-texto); font-weight: 800; font-size: clamp(13px, 1.1vw, 17px); }
.orb-pop { animation: orb-pop .55s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes orb-pop { from { transform: scale(.7) translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.orb-rejilla { display: grid; gap: 14px; width: 100%; max-width: 1200px; }
.orb-tarjeta { box-sizing: border-box; border-radius: 18px; border: 1px solid var(--sd-linea-2); background: linear-gradient(180deg, var(--sd-superficie-2), var(--sd-superficie)); padding: 16px 20px; display: flex; flex-direction: column; gap: 6px; text-align: left; transition: transform .25s, box-shadow .25s, border-color .25s, opacity .8s, filter .8s; }
.orb-tarjeta .orb-t-etiqueta { font-size: 11px; font-weight: 800; letter-spacing: .22em; color: var(--sd-acento-luz); }
.orb-tarjeta .orb-t-nombre { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: clamp(18px, 1.8vw, 26px); line-height: 1.08; }
.orb-tarjeta .orb-t-sub { font-size: 13px; color: var(--sd-texto-2); }
.orb-agua .orb-tarjeta { -webkit-box-reflect: below 8px linear-gradient(transparent 62%, rgba(255,255,255,.14)); }
.orb-resaltada { border-color: var(--sd-acento-luz) !important; box-shadow: 0 0 0 1px var(--sd-acento-luz), 0 0 40px color-mix(in srgb, var(--sd-acento) 55%, transparent); transform: translateY(-6px); }
.orb-ganadora { border-color: var(--sd-acento-luz) !important; box-shadow: 0 0 0 2px var(--sd-acento-luz), 0 0 70px color-mix(in srgb, var(--sd-acento) 70%, transparent); transform: translateY(-16px) scale(1.06); }
.orb-hundida { transform: translateY(36px) scale(.94); opacity: .28; filter: blur(1.5px) saturate(.4); }
.orb-linea-agua { width: 80%; height: 1px; margin-top: 4vh; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--sd-acento-luz) 55%, transparent), color-mix(in srgb, var(--sd-acento) 55%, transparent), transparent); }
.orb-pie { position: absolute; left: 0; right: 0; bottom: 4vh; display: flex; justify-content: center; gap: 14px; z-index: 4; }
.orb-boton { height: 56px; padding: 0 34px; border: 0; border-radius: 999px; background: var(--sd-acento); color: var(--sd-acento-texto); font-family: inherit; font-size: 17px; font-weight: 800; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 10px 30px -10px color-mix(in srgb, var(--sd-acento) 85%, transparent); transition: transform .15s; }
.orb-boton:hover { transform: translateY(-2px); }
.orb-boton.secundario { background: transparent; color: #fff; border: 1px solid var(--sd-linea-2); box-shadow: none; }
.orb-boton:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.orb-boton[disabled] { opacity: .5; cursor: default; transform: none; }
/* Imagen del premio en el escenario (orbita.js): presentación antes de sortear, sobre los
   candidatos al agua y arriba del ganador. Nunca se superpone con otro elemento. */
.orb-detalle { margin-top: 2px; font-size: clamp(14px, 1.3vw, 18px); font-weight: 700; color: var(--sd-texto-2); }
.orb-detalle:empty { display: none; }
.orb-imagen { position: absolute; left: 50%; top: 30vh; height: 40vh; z-index: 1; display: flex; justify-content: center; opacity: 0; pointer-events: none; transform: translateX(-50%) scale(.94); transition: opacity .7s ease, top .8s cubic-bezier(.2,.8,.2,1), height .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1), filter .8s ease; }
.orb-imagen::before { content: ""; position: absolute; left: 50%; top: 58%; width: 130%; height: 80%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--sd-acento) 40%, transparent), transparent); filter: blur(34px); z-index: -1; }
.orb-imagen img { height: 100%; width: auto; max-width: 86vw; object-fit: contain; border-radius: 22px; box-shadow: 0 34px 90px -34px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.08); }
.orb-imagen.orb-recorte img { border-radius: 0; box-shadow: none; filter: drop-shadow(0 34px 38px rgba(0,0,0,.6)); }
.orb-imagen.visible { opacity: 1; transform: translateX(-50%) scale(1); }
/* La posición y el alto los calcula orbita.js (ubicarImagen) según el espacio libre. */
.orb-imagen-presentacion img { animation: orb-flota-imagen 7s ease-in-out infinite; }
/* Reflejo solo para recortes con transparencia: en una foto con fondo se vería como un bloque. */
.orb-imagen-presentacion.orb-recorte img, .orb-imagen-agua.orb-recorte img { -webkit-box-reflect: below 6px linear-gradient(transparent 72%, rgba(255,255,255,.16)); }
/* Al ocultarse se va de inmediato, para no quedar ni un instante bajo lo que aparece. */
.orb-imagen:not(.visible) { transition: none; }
.orb-imagen.orb-sin-espacio { opacity: 0 !important; }
/* En zonas fijas la posición cambia sin animación (la imagen aparece ya ubicada). */
.orb-imagen-agua, .orb-imagen-final { transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
#orbita-escena.orb-con-imagen-agua .orb-ganadores { top: 48vh; }
/* Ganador con imagen: el bloque baja 10vh (su centro 5vh, igual que las partículas en orbita.js). */
#orbita-escena.orb-final-con-imagen .orb-ganadores { top: 40vh; }
@keyframes orb-flota-imagen { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.2%); } }
@media (prefers-reduced-motion: reduce) { .orb-imagen-presentacion img { animation: none; } }

.orb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }