/* ── Tipografías de la maqueta, autoalojadas ──
   Plus Jakarta Sans (UI) y JetBrains Mono (números), bajadas de Google Fonts y
   servidas desde /static: el sitio no carga CSS de terceros. Son variables y
   vienen partidas por unicode-range, así que el navegador baja sólo el trozo
   que necesita. Poppins (titulares) ya estaba en styles.css. */
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/jetbrains-mono/982bf4a9.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/jetbrains-mono/ffa6bbab.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/jetbrains-mono/9cb20f35.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/jetbrains-mono/8ea5e194.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/jetbrains-mono/76306ee8.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/jetbrains-mono/1cd702cd.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/jetbrains-mono/982bf4a9.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/jetbrains-mono/ffa6bbab.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/jetbrains-mono/9cb20f35.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/jetbrains-mono/8ea5e194.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/jetbrains-mono/76306ee8.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/jetbrains-mono/1cd702cd.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/jetbrains-mono/982bf4a9.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/jetbrains-mono/ffa6bbab.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/jetbrains-mono/9cb20f35.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/jetbrains-mono/8ea5e194.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/jetbrains-mono/76306ee8.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/jetbrains-mono/1cd702cd.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/static/fonts/jetbrains-mono/982bf4a9.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/static/fonts/jetbrains-mono/ffa6bbab.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/static/fonts/jetbrains-mono/9cb20f35.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/static/fonts/jetbrains-mono/8ea5e194.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/static/fonts/jetbrains-mono/76306ee8.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/static/fonts/jetbrains-mono/1cd702cd.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/plus-jakarta-sans/9b76284e.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/plus-jakarta-sans/35af93a0.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/plus-jakarta-sans/305d441d.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/plus-jakarta-sans/be25729b.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/plus-jakarta-sans/9b76284e.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/plus-jakarta-sans/35af93a0.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/plus-jakarta-sans/305d441d.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/plus-jakarta-sans/be25729b.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/plus-jakarta-sans/9b76284e.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/plus-jakarta-sans/35af93a0.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/plus-jakarta-sans/305d441d.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/plus-jakarta-sans/be25729b.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/static/fonts/plus-jakarta-sans/9b76284e.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* vietnamese */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/static/fonts/plus-jakarta-sans/35af93a0.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/static/fonts/plus-jakarta-sans/305d441d.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/static/fonts/plus-jakarta-sans/be25729b.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===================================================================
   Inicio — rediseño (maquetas RifaCDE-Inicio-Desktop / -Rediseno)

   Vive aparte de styles.css: es una página entera y así no engorda el
   archivo común ni pisa nada de lo que ya anda. Todo cuelga de .ini-page
   y lleva prefijo `ini-`, porque nombres como .player, .combo o .tier ya
   existen en styles.css con otro significado.

   Mobile-first: lo de arriba es la maqueta del teléfono; el escritorio
   entra en el @media de 1000px, donde el hero y el cuerpo se parten en
   dos columnas.
   =================================================================== */

.ini-page {
    --ini-blue: #1b45d7;
    --ini-blue-deep: #0f2bb0;
    --ini-navy: #0b1233;
    --ini-card: #111c52;
    --ini-card-dark: #0a1030;
    --ini-black: #05061a;
    --ini-ink: #02030d;
    --ini-bd: rgba(255, 255, 255, .10);
    --ini-bd2: rgba(255, 255, 255, .18);
    --ini-dim: rgba(255, 255, 255, .74);
    --ini-faint: rgba(255, 255, 255, .44);
    --ini-gold: #ffd21e;
    --ini-gold-2: #ffe06b;
    --ini-gold-ink: #1a1405;
    --ini-gold-soft: rgba(255, 210, 30, .13);
    --ini-gold-line: rgba(255, 210, 30, .42);
    --ini-ok: #22c55e;
    --ini-bad: #ef4444;
    /* Las tres familias de la maqueta, todas autoalojadas (ver arriba). */
    --ini-disp: 'Poppins', system-ui, sans-serif;
    --ini-ui: 'Plus Jakarta Sans', 'Poppins', system-ui, sans-serif;
    --ini-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

    background: var(--ini-ink);
    font-family: var(--ini-ui);
    color: #fff;
}

.ini-page * { box-sizing: border-box; }
.ini-wrap { width: 100%; margin: 0 auto; padding: 0 12px; }

/* ══════════════ HERO ══════════════ */
.ini-hero {
    padding: 8px 0 12px;
    background:
        radial-gradient(520px 300px at 50% -60px, #2a56ea, transparent 62%),
        linear-gradient(180deg, var(--ini-blue), var(--ini-blue-deep) 52%, var(--ini-navy));
}

/* El escenario: pestañas + reproductor + chat. En el teléfono el pozo y la
   cuenta atrás viven dentro de la misma tarjeta, así que el bloque del pozo
   se pega por abajo (ver .ini-rail más adelante). */
.ini-stage {
    border-radius: 18px 18px 0 0;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(2, 3, 13, .66), rgba(2, 3, 13, .84));
    border: 1px solid var(--ini-gold-line);
    border-bottom: 0;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}

.ini-tabs { display: none; gap: 2px; padding: 6px 6px 0; }
.ini-tabs.on { display: flex; }
.ini-tab {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
    height: 36px; border: 0; border-radius: 11px 11px 0 0; cursor: pointer;
    background: transparent; color: var(--ini-faint);
    font-family: var(--ini-ui); font-size: 11.5px; font-weight: 800;
}
.ini-tab.on { background: rgba(255, 255, 255, .08); color: #fff; }
.ini-tab-live {
    width: 8px; height: 8px; border-radius: 99px; background: var(--ini-bad);
    animation: iniLivePulse 1.6s infinite;
}
@keyframes iniLivePulse {
    0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, .6); }
    70%  { box-shadow: 0 0 0 7px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.ini-player {
    position: relative; aspect-ratio: 16/9; margin: 6px 6px 8px;
    border-radius: 13px; overflow: hidden;
    background: radial-gradient(300px 160px at 50% 40%, #13204f, #04050f);
    display: grid; place-items: center;
}
.ini-player video,
.ini-player iframe { width: 100%; height: 100%; border: 0; object-fit: contain; background: #000; }
.ini-player-logo { height: 44px; width: auto; opacity: .92; }
.ini-player-off { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ini-player-off-txt { font-size: 10px; font-weight: 800; letter-spacing: .2em; color: var(--ini-dim); }
.ini-playbtn {
    width: 54px; height: 54px; border-radius: 99px; display: grid; place-items: center;
    background: rgba(255, 255, 255, .14); border: 1.5px solid rgba(255, 255, 255, .55);
    backdrop-filter: blur(4px);
}
.ini-badge-live {
    position: absolute; top: 9px; left: 9px; z-index: 3;
    display: flex; align-items: center; gap: 5px;
    background: var(--ini-bad); border-radius: 7px; padding: 4px 9px;
    font-size: 10px; font-weight: 800; letter-spacing: .07em;
}
.ini-badge-live i { width: 5px; height: 5px; border-radius: 99px; background: #fff; display: block; }
.ini-views {
    position: absolute; top: 9px; right: 9px; z-index: 3;
    display: flex; align-items: center; gap: 5px;
    background: rgba(2, 3, 13, .7); border: 1px solid var(--ini-bd2);
    border-radius: 7px; padding: 3px 8px;
    font-size: 10px; font-weight: 700; font-family: var(--ini-mono);
}

/* Barra del chat, justo debajo del reproductor */
.ini-chatbar {
    display: none; align-items: center; gap: 10px;
    width: calc(100% - 16px); margin: 0 8px 8px; padding: 10px 14px;
    border-radius: 13px; background: rgba(255, 255, 255, .06);
    border: 1px solid var(--ini-bd2); cursor: pointer;
    color: #fff; font-family: var(--ini-ui); text-align: left;
}
.ini-chatbar.on { display: flex; }
.ini-chatbar:hover { border-color: var(--ini-gold); }
.ini-chatbar-t { display: block; font-size: 13px; font-weight: 800; }
.ini-chatbar-s { display: block; font-size: 11px; color: var(--ini-faint); margin-top: 2px; }
.ini-chatbar-n {
    margin-left: auto; display: flex; align-items: center; gap: 6px;
    font-family: var(--ini-mono); font-size: 11.5px; font-weight: 700; color: var(--ini-dim);
}
.ini-chatbar-n i { width: 7px; height: 7px; border-radius: 99px; background: var(--ini-ok); display: block; }

/* Pie del escenario (sólo escritorio: en el teléfono no entra) */
.ini-sfoot { display: none; align-items: center; gap: 14px; padding: 12px 18px 14px; border-top: 1px solid var(--ini-bd); }
.ini-sfoot-tt { font-size: 13px; color: var(--ini-dim); }
.ini-sfoot-tt b { display: block; font-family: var(--ini-disp); font-size: 15px; color: #fff; font-weight: 800; }

/* ── El pozo, la cuenta atrás y el botón ──
   En el teléfono son la parte de abajo de la misma tarjeta del escenario;
   en escritorio se van a la columna derecha (.ini-rail). */
.ini-pozo-box {
    border: 1px solid var(--ini-gold-line); border-top: 0; border-radius: 0 0 18px 18px;
    background: linear-gradient(180deg, rgba(2, 3, 13, .84), rgba(2, 3, 13, .9));
    padding: 0 0 6px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
.ini-grow-desk { display: none; }
/* Sin el pozo debajo (pestaña de la paralela), el escenario cierra su borde */
.ini-stage.solo { border-bottom: 1px solid var(--ini-gold-line); border-radius: 18px; }
.ini-pozo { padding: 0 14px 6px; text-align: center; }
.ini-pozo-lab { font-size: 10px; font-weight: 800; letter-spacing: .32em; color: var(--ini-dim); }
.ini-pozo-val {
    font-family: var(--ini-disp); font-weight: 800; font-size: clamp(34px, 10vw, 44px);
    color: var(--ini-gold); letter-spacing: -.035em; line-height: 1.05; margin-top: 2px;
    text-shadow: 0 6px 26px rgba(255, 184, 0, .3);
}
.ini-pozo-val small, .ini-pozo-val span {
    font-family: var(--ini-ui); font-size: 16px; color: var(--ini-dim);
    font-weight: 700; margin-left: 6px; letter-spacing: 0;
}
.ini-who { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: var(--ini-dim); }
.ini-who b { font-family: var(--ini-mono); color: #fff; }

.ini-cdwrap { display: flex; align-items: center; gap: 8px; padding: 0 6px 6px; }
.ini-cdlab { position: relative; align-self: stretch; flex: 0 0 14px; min-height: 0; }
.ini-cdlab i {
    position: absolute; inset: 0; writing-mode: vertical-rl; transform: rotate(180deg);
    display: flex; align-items: center; justify-content: center; font-style: normal;
    font-size: 9px; font-weight: 800; letter-spacing: .06em; color: var(--ini-faint);
    white-space: nowrap; overflow: hidden;
}
.ini-cd { flex: 1; display: flex; gap: 7px; align-items: stretch; min-width: 0; }
.ini-cd > div {
    flex: 1 1 0; aspect-ratio: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px;
    background: rgba(2, 3, 13, .6); border: 1px solid var(--ini-bd);
    border-radius: 13px; text-align: center; min-width: 0; overflow: hidden;
}
.ini-cd b { display: block; font-family: var(--ini-disp); font-size: clamp(24px, 9vw, 38px); font-weight: 800; line-height: .95; }
.ini-cd span { display: block; font-size: clamp(8px, 2.4vw, 11px); letter-spacing: .06em; color: var(--ini-faint); font-weight: 800; white-space: nowrap; }
.ini-cd > div.sg b, .ini-cd > div.sg span { color: var(--ini-bad); }

.ini-when {
    display: flex; align-items: center; gap: 9px; margin-top: 11px; padding: 9px 12px;
    border-radius: 12px; background: rgba(2, 3, 13, .42); border: 1px solid var(--ini-bd2); font-size: 12px;
}
.ini-when b { font-family: var(--ini-disp); font-size: 10px; letter-spacing: .1em; color: var(--ini-gold); white-space: nowrap; }
.ini-when span { color: var(--ini-dim); }

.ini-cta {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; height: 56px; margin-top: 12px; border: 0; border-radius: 99px;
    background: linear-gradient(160deg, var(--ini-gold), #ffb800); color: var(--ini-gold-ink);
    font-family: var(--ini-disp); font-weight: 800; font-size: 18px; letter-spacing: .02em;
    box-shadow: 0 12px 28px rgba(255, 184, 0, .3); cursor: pointer; text-decoration: none;
}
.ini-cta:hover { filter: brightness(1.06); color: var(--ini-gold-ink); }

.ini-grow {
    display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px;
    border-radius: 14px; border: 1px solid var(--ini-gold-line);
    background: linear-gradient(120deg, var(--ini-gold-soft), transparent 72%), var(--ini-card-dark);
}
.ini-grow-tx { font-size: 12px; color: var(--ini-dim); line-height: 1.4; }
.ini-grow-tx b { display: block; color: var(--ini-gold); font-size: 13px; }

/* ══════════════ CUERPO ══════════════ */
.ini-main {
    padding: 0 0 26px;
    background: linear-gradient(180deg, #0b1233 0, #060a22 180px, var(--ini-ink) 520px);
}
.ini-sec { margin-top: 22px; }
.ini-sech { display: flex; align-items: baseline; gap: 9px; margin-bottom: 11px; }
.ini-sech h2 { font-family: var(--ini-disp); font-size: 17px; font-weight: 800; margin: 0; letter-spacing: -.02em; }
.ini-sech span { font-size: 11px; color: var(--ini-faint); margin-left: auto; text-align: right; }

/* Distribución de premios */
.ini-top1 {
    position: relative; overflow: hidden; border-radius: 16px; padding: 14px 16px;
    background: linear-gradient(135deg, #ffe25a, var(--ini-gold) 38%, #f5a800);
    color: var(--ini-gold-ink); display: flex; align-items: center; gap: 13px;
}
/* Los lugares que pagan lo mismo que el 1º usan esta misma tarjeta, así que puede
   haber varias seguidas: el aire entre ellas es el de las filas. */
.ini-top1 + .ini-top1 { margin-top: 7px; }
.ini-top1-ring { position: absolute; right: -26px; top: -30px; width: 110px; height: 110px; border-radius: 99px; background: rgba(255, 255, 255, .2); }
.ini-top1-pl {
    position: relative; width: 42px; height: 42px; border-radius: 13px; flex: 0 0 42px;
    background: rgba(10, 8, 0, .2); display: grid; place-items: center;
    font-family: var(--ini-disp); font-size: 17px; font-weight: 800;
}
.ini-top1-tx { position: relative; min-width: 0; }
.ini-top1-tx small { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .16em; color: rgba(60, 40, 0, .72); }
.ini-top1-tx b { display: block; font-family: var(--ini-disp); font-size: 25px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.ini-top1-tx b i { font-style: normal; font-family: var(--ini-ui); font-size: 13px; margin-left: 3px; }
.ini-top1-pct { position: relative; margin-left: auto; text-align: right; font-family: var(--ini-disp); font-size: 22px; font-weight: 800; }
.ini-top1-pct small { display: block; font-family: var(--ini-ui); font-size: 9px; font-weight: 800; letter-spacing: .1em; color: rgba(60, 40, 0, .7); }

.ini-tier {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-top: 7px;
    border-radius: 14px; background: var(--ini-card-dark); border: 1px solid var(--ini-bd);
}
.ini-tier-pl { min-width: 62px; font-family: var(--ini-disp); font-size: 14px; font-weight: 800; }
.ini-tier-pl small { display: block; font-family: var(--ini-ui); font-size: 9px; font-weight: 700; color: var(--ini-faint); letter-spacing: .06em; margin-top: 2px; }
.ini-tier-pct { font-family: var(--ini-mono); font-size: 12.5px; font-weight: 800; color: var(--ini-dim); background: rgba(255, 255, 255, .06); border-radius: 7px; padding: 3px 8px; }
.ini-tier-amt { margin-left: auto; text-align: right; font-family: var(--ini-disp); font-size: 16px; font-weight: 800; color: var(--ini-gold); white-space: nowrap; }
.ini-tier-amt i { font-style: normal; font-family: var(--ini-ui); font-size: 10px; color: var(--ini-faint); margin-left: 3px; font-weight: 700; }

/* Agrupado (Configuración → Página de inicio): cada grupo es una tarjeta, no una
   línea. Son pocas y cada una vale por varios lugares, así que se muestran
   grandes —apenas por debajo de la del 1º, que sigue mandando—. Sin agrupar son
   una por lugar y van en filas, que es lo que aguanta treinta seguidas. */
.ini-tiers.bloques { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-top: 9px; }
.ini-tiers.bloques .ini-tier {
    flex-direction: column; align-items: flex-start; gap: 0;
    margin-top: 0; padding: 13px 15px; border-radius: 15px;
}
.ini-tiers.bloques .ini-tier-pl { min-width: 0; font-size: 16px; order: 0; }
.ini-tiers.bloques .ini-tier-pl small { font-size: 9.5px; margin-top: 3px; }
.ini-tiers.bloques .ini-tier-amt { margin-left: 0; text-align: left; font-size: 21px; margin-top: 10px; order: 1; }
.ini-tiers.bloques .ini-tier-amt i { font-size: 11px; margin-left: 4px; }
.ini-tiers.bloques .ini-tier-pct { margin-top: 8px; font-size: 12px; padding: 3px 9px; order: 2; }

.ini-note { display: flex; align-items: center; gap: 9px; margin-top: 10px; font-size: 11px; color: var(--ini-faint); line-height: 1.4; }

/* Transmisión paralela + venta EXTRA */
.ini-para {
    display: none; margin-top: 12px; border-radius: 18px;
    border: 1px solid rgba(239, 68, 68, .45);
    background: linear-gradient(180deg, #141334, var(--ini-card-dark));
}
.ini-para.on { display: block; }
.ini-parah {
    display: flex; align-items: center; gap: 9px; padding: 11px 14px;
    border-radius: 17px 17px 0 0;
    background: linear-gradient(120deg, rgba(239, 68, 68, .28), transparent 76%);
}
.ini-parah-t { font-size: 9.5px; font-weight: 800; letter-spacing: .16em; color: #ffb4b4; }
.ini-parah-n { font-family: var(--ini-disp); font-size: 15px; font-weight: 800; line-height: 1.2; }
.ini-parah-badge {
    margin-left: auto; display: flex; align-items: center; gap: 5px;
    background: var(--ini-bad); border-radius: 7px; padding: 3px 9px;
    font-size: 9.5px; font-weight: 800; letter-spacing: .06em;
}
.ini-parah-badge i { width: 5px; height: 5px; border-radius: 99px; background: #fff; display: block; }
.ini-parab { padding: 0 14px 14px; }
/* Transmisión sola (modalidad «stream»): sólo la cabecera con el nombre. */
.ini-para.es-stream .ini-parab { display: none; }
.ini-para.es-stream .ini-parah { border-radius: inherit; }

.ini-prize { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 13px; background: rgba(2, 3, 13, .5); border: 1px solid var(--ini-bd); }
.ini-prize-ph {
    width: 52px; height: 52px; border-radius: 11px; flex: 0 0 52px;
    border: 1.5px dashed var(--ini-bd2); display: grid; place-items: center;
    color: var(--ini-faint); overflow: hidden;
}
.ini-prize-ph img { width: 100%; height: 100%; object-fit: cover; }
/* Con foto, el recuadro punteado se queda de fondo y la imagen se apoya encima,
   desbordándolo un poco por los cuatro lados. El desborde es menor que el
   padding de la tarjeta (12px en el teléfono, 14 en escritorio), así que el
   premio respira y nunca llega a pegarse al borde del bloque. */
.ini-prize-ph.con-foto { overflow: visible; position: relative; z-index: 2; }
.ini-prize-ph.con-foto img {
    width: 130%; height: 130%; margin: -15%;
    object-fit: contain;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .55));
    pointer-events: none;
}
.ini-prize small { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .14em; color: var(--ini-faint); }
.ini-prize b { font-family: var(--ini-disp); font-size: 16px; font-weight: 800; line-height: 1.25; }
.ini-prize-tm { margin-left: auto; text-align: right; }
.ini-prize-tm b { font-family: var(--ini-mono); font-size: 17px; color: #fff; }

.ini-combos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 10px; }
.ini-combo {
    position: relative; border-radius: 12px; padding: 9px 3px 8px; text-align: center;
    background: var(--ini-black); border: 1.5px solid var(--ini-bd); cursor: pointer;
}
.ini-combo.on { border-color: var(--ini-gold); background: linear-gradient(180deg, rgba(255, 210, 30, .14), rgba(5, 6, 26, .9)); }
.ini-combo b { display: block; font-family: var(--ini-disp); font-size: 20px; font-weight: 800; line-height: 1; color: #fff; }
.ini-combo.on b { color: var(--ini-gold); }
.ini-combo small { display: block; font-size: 7.5px; letter-spacing: .08em; color: var(--ini-faint); font-weight: 800; margin: 3px 0 5px; }
.ini-combo-pr { font-family: var(--ini-mono); font-size: 10px; font-weight: 800; color: var(--ini-dim); white-space: nowrap; }
.ini-combo-off {
    position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
    background: var(--ini-ok); color: #04220f; font-size: 8px; font-weight: 800;
    border-radius: 5px; padding: 1px 5px; white-space: nowrap;
}

.ini-parafoot { display: flex; align-items: center; gap: 10px; margin-top: 11px; }
.ini-parafoot-bal { font-size: 10.5px; color: var(--ini-faint); line-height: 1.3; }
.ini-parafoot-bal b { display: block; font-family: var(--ini-mono); font-size: 12.5px; color: var(--ini-ok); }
.ini-parafoot button {
    margin-left: auto; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 20px;
    border: 0; border-radius: 99px; background: linear-gradient(160deg, var(--ini-gold), #ffb800);
    color: var(--ini-gold-ink); font-family: var(--ini-disp); font-weight: 800; font-size: 14px; cursor: pointer;
}
.ini-parafoot button:disabled { opacity: .55; cursor: default; }

/* Redes */
.ini-social {
    display: flex; align-items: center; margin-top: 22px; border-radius: 99px;
    background: var(--ini-black); border: 1px solid var(--ini-gold-line); overflow: hidden;
}
.ini-social b {
    display: flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 99px;
    background: linear-gradient(160deg, var(--ini-gold), #ffb800); color: var(--ini-gold-ink);
    font-family: var(--ini-disp); font-size: 12px; font-weight: 800; letter-spacing: .02em;
}
.ini-social-ic { display: flex; gap: 10px; margin-left: auto; padding: 0 18px; }
.ini-social-ic a { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; overflow: hidden; }
.ini-social-ic img { width: 100%; height: 100%; object-fit: contain; }

/* ══════════════ CHAT ══════════════ */
.ini-cbg {
    position: fixed; inset: 0; z-index: 90; background: rgba(2, 3, 13, .6);
    backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: .2s;
}
.ini-cbg.on { opacity: 1; pointer-events: auto; }
.ini-cpanel {
    position: fixed; z-index: 91; left: 50%; bottom: 0; width: 100%; max-width: 480px; height: 82vh;
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, #0b1130, var(--ini-ink));
    border: 1px solid var(--ini-gold-line); border-bottom: 0; border-radius: 20px 20px 0 0;
    box-shadow: 0 -24px 60px rgba(0, 0, 0, .6);
    transform: translate(-50%, 102%); transition: transform .26s cubic-bezier(.4, 0, .2, 1);
}
.ini-cpanel.on { transform: translate(-50%, 0); }
.ini-cpanel::before {
    content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 42px; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .28);
}
.ini-chead { display: flex; align-items: center; gap: 11px; padding: 20px 16px 13px; border-bottom: 1px solid var(--ini-bd); }
.ini-chead-tt { font-family: var(--ini-disp); font-size: 15px; font-weight: 800; line-height: 1.2; }
.ini-chead-ss { font-size: 11px; color: var(--ini-faint); display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.ini-chead-ss i { width: 7px; height: 7px; border-radius: 99px; background: var(--ini-ok); display: block; }
.ini-cx {
    margin-left: auto; display: grid; place-items: center; width: 34px; height: 34px;
    border-radius: 99px; background: rgba(255, 255, 255, .07); border: 1px solid var(--ini-bd2);
    color: var(--ini-dim); cursor: pointer;
}
.ini-cx:hover { color: #fff; border-color: var(--ini-gold); }
.ini-cbody { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 11px; }
.ini-cmsg { display: flex; gap: 9px; align-items: flex-start; }
.ini-cmsg-ava {
    width: 28px; height: 28px; border-radius: 99px; flex: 0 0 28px; display: grid; place-items: center;
    font-family: var(--ini-mono); font-size: 11px; font-weight: 700; background: rgba(255, 255, 255, .09);
}
.ini-cmsg-tx { font-size: 12.5px; line-height: 1.45; color: var(--ini-dim); min-width: 0; word-break: break-word; }
.ini-cmsg-tx b { color: #8fb4ff; margin-right: 6px; }
.ini-cmsg.vip .ini-cmsg-ava { background: rgba(255, 210, 30, .25); }
.ini-cmsg.vip .ini-cmsg-tx b { color: var(--ini-gold); }
.ini-cmsg.admin .ini-cmsg-tx b { color: var(--ini-gold); }
.ini-cmsg.moderator .ini-cmsg-tx b { color: #3b82f6; }
.ini-ctag {
    font-size: 8.5px; font-weight: 800; background: var(--ini-gold-soft); color: var(--ini-gold);
    border: 1px solid var(--ini-gold-line); border-radius: 4px; padding: 1px 4px; margin-right: 5px;
}
.ini-csys {
    display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: 11px;
    background: rgba(239, 68, 68, .15); border: 1px solid rgba(239, 68, 68, .4);
    font-size: 11.5px; font-weight: 700; color: #ffb4b4;
}
.ini-cfoot { border-top: 1px solid var(--ini-bd); padding: 11px 14px 14px; display: flex; flex-direction: column; gap: 9px; }
.ini-cemo { display: flex; gap: 7px; }
.ini-cemo span {
    width: 34px; height: 34px; border-radius: 99px; display: grid; place-items: center;
    background: rgba(255, 255, 255, .06); border: 1px solid var(--ini-bd2); font-size: 15px; cursor: pointer;
}
.ini-cemo span:hover { border-color: var(--ini-gold); }
.ini-cin { display: flex; align-items: center; gap: 9px; }
.ini-cin input {
    flex: 1; height: 44px; border-radius: 99px; border: 1px solid var(--ini-bd2);
    background: rgba(255, 255, 255, .06); color: #fff; font-family: var(--ini-ui);
    font-size: 13px; padding: 0 16px; outline: 0;
}
.ini-cin input:focus { border-color: var(--ini-gold); }
.ini-cin button {
    width: 44px; height: 44px; flex: 0 0 44px; border: 0; border-radius: 99px;
    background: linear-gradient(160deg, var(--ini-gold), #ffb800); color: var(--ini-gold-ink);
    display: grid; place-items: center; cursor: pointer;
}
.ini-cnote { padding: 10px 14px; text-align: center; font-size: 11.5px; color: var(--ini-faint); border-top: 1px solid var(--ini-bd); }

/* ══════════════ ESCRITORIO ══════════════ */
@media (min-width: 1000px) {
    .ini-wrap { max-width: 1280px; padding: 0 28px; }

    .ini-hero {
        padding: 0;
        background:
            radial-gradient(900px 460px at 30% -120px, #2a56ea, transparent 62%),
            linear-gradient(180deg, var(--ini-blue), var(--ini-blue-deep) 48%, var(--ini-navy));
        border-bottom: 1px solid var(--ini-bd);
    }
    .ini-hero .ini-wrap {
        display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
        gap: 24px; align-items: start;
    }
    .ini-hero .ini-stage { grid-column: 1; grid-row: 1; }
    .ini-hero .ini-rail,
    .ini-hero .ini-para { grid-column: 2; grid-row: 1; }
    .ini-hero .ini-wrap { padding-top: 20px; padding-bottom: 24px; }
    .ini-main .ini-wrap { padding-top: 30px; padding-bottom: 40px; }

    /* En escritorio el escenario vuelve a ser una tarjeta cerrada y el pozo se
       va a la columna de la derecha. */
    .ini-stage { border-radius: 20px; border-bottom: 1px solid var(--ini-gold-line); box-shadow: 0 26px 60px rgba(0, 0, 0, .5); }
    .ini-tabs { padding: 8px 8px 0; gap: 3px; }
    .ini-tab { flex: 0 0 auto; height: 40px; padding: 0 18px; border-radius: 12px 12px 0 0; font-size: 13px; }
    .ini-player { margin: 8px; border-radius: 15px; }
    .ini-player-logo { height: 74px; }
    .ini-player-off { gap: 13px; }
    .ini-player-off-txt { font-size: 11px; letter-spacing: .24em; }
    .ini-playbtn { width: 68px; height: 68px; }
    .ini-badge-live { top: 14px; left: 14px; padding: 5px 11px; font-size: 11px; }
    .ini-badge-live i { width: 6px; height: 6px; }
    .ini-views { top: 14px; right: 14px; padding: 5px 11px; font-size: 11.5px; }
    .ini-sfoot { display: flex; }

    .ini-rail {
        position: sticky; top: 88px; border: 1px solid var(--ini-bd2); border-radius: 20px;
        padding: 18px 22px; text-align: center;
        background: linear-gradient(180deg, rgba(2, 3, 13, .55), rgba(2, 3, 13, .8));
    }
    .ini-pozo-box { border: 0; border-radius: 0; background: none; padding: 0; box-shadow: none; }
    .ini-grow-desk { display: flex; }
    .ini-grow-mob { display: none; }
    .ini-pozo { padding: 0; }
    .ini-pozo-lab { font-size: 11px; letter-spacing: .34em; }
    .ini-pozo-val { font-size: clamp(38px, 3.6vw, 52px); margin-top: 6px; }
    .ini-pozo-val small, .ini-pozo-val span { font-size: 18px; margin-left: 7px; }
    .ini-who { margin-top: 9px; font-size: 13px; }
    .ini-cdwrap { display: block; padding: 0; }
    .ini-cdlab { flex: none; margin: 14px 0 8px; }
    .ini-cdlab i {
        position: static; writing-mode: horizontal-tb; transform: none;
        font-size: 9.5px; letter-spacing: .22em; display: block; text-align: center;
    }
    .ini-cd { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
    .ini-cd > div { aspect-ratio: auto; padding: 11px 2px; border-radius: 13px; }
    .ini-cd b { font-size: 26px; line-height: 1; }
    .ini-cd span { font-size: 8.5px; letter-spacing: .1em; margin-top: 4px; }
    .ini-when { margin-top: 14px; padding: 11px 14px; font-size: 12.5px; text-align: left; }
    .ini-cta { height: 60px; margin-top: 14px; font-size: 19px; }
    .ini-grow { margin-top: 14px; text-align: left; background: linear-gradient(120deg, var(--ini-gold-soft), transparent 72%), rgba(2, 3, 13, .5); }

    .ini-main { padding: 0; }
    .ini-sec { margin-top: 0; }
    .ini-sech { margin-bottom: 14px; }
    .ini-sech h2 { font-size: 22px; }
    .ini-sech span { font-size: 12.5px; }

    .ini-para { margin-top: 0; border-radius: 20px; }
    .ini-parah { padding: 14px 18px; gap: 10px; border-radius: 19px 19px 0 0; }
    .ini-parah-t { font-size: 10px; }
    .ini-parah-n { font-size: 18px; }
    .ini-parah-badge { padding: 4px 10px; font-size: 10px; }
    .ini-parab { padding: 0 18px 18px; }
    .ini-prize { gap: 14px; padding: 13px 14px; border-radius: 14px; }
    .ini-prize-ph { width: 60px; height: 60px; flex: 0 0 60px; border-radius: 12px; }
    .ini-prize small { font-size: 10px; }
    .ini-prize b { font-size: 18px; }
    .ini-prize-tm b { font-size: 20px; }
    .ini-combos { grid-template-columns: repeat(2, 1fr); gap: 9px; margin-top: 12px; }
    .ini-combo { padding: 12px 6px 11px; border-radius: 13px; }
    .ini-combo b { font-size: 24px; }
    .ini-combo small { font-size: 8.5px; letter-spacing: .1em; margin: 4px 0 6px; }
    .ini-combo-pr { font-size: 12px; }
    .ini-combo-off { font-size: 8.5px; padding: 2px 7px; }
    .ini-parafoot { gap: 12px; margin-top: 13px; }
    .ini-parafoot-bal { font-size: 11px; }
    .ini-parafoot-bal b { font-size: 14px; }
    .ini-parafoot button { height: 50px; padding: 0 24px; font-size: 15px; }

    .ini-top1 { border-radius: 18px; padding: 20px 24px; gap: 18px; }
    .ini-top1 + .ini-top1 { margin-top: 8px; }
    .ini-top1-ring { right: -34px; top: -44px; width: 150px; height: 150px; }
    .ini-top1-pl { width: 54px; height: 54px; flex: 0 0 54px; border-radius: 16px; font-size: 22px; }
    .ini-top1-tx small { font-size: 10px; letter-spacing: .18em; }
    .ini-top1-tx b { font-size: 34px; }
    .ini-top1-tx b i { font-size: 15px; margin-left: 4px; }
    .ini-top1-pct { font-size: 28px; }
    .ini-top1-pct small { font-size: 9.5px; }

    /* Agrupado: tres columnas y tarjetas grandes. En columna el orden es el de
       la maqueta —lugar, monto y recién abajo el porcentaje—; el HTML los trae
       en el orden de la fila (lugar, porcentaje, monto a la derecha), así que
       acá se reordenan. El monto queda en 26px contra los 34px del 1º: se lee
       de lejos, pero el premio mayor sigue mandando. */
    .ini-tiers.bloques { grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
    .ini-tiers.bloques .ini-tier { padding: 17px 20px; border-radius: 16px; }
    .ini-tiers.bloques .ini-tier-pl { font-size: 18px; }
    .ini-tiers.bloques .ini-tier-pl small { font-size: 10px; }
    .ini-tiers.bloques .ini-tier-amt { font-size: 26px; margin-top: 12px; }
    .ini-tiers.bloques .ini-tier-amt i { font-size: 12px; }
    .ini-tiers.bloques .ini-tier-pct { font-size: 12.5px; }

    /* Sin agrupar son una por lugar: filas, algo más holgadas que en el teléfono. */
    .ini-tiers:not(.bloques) .ini-tier { padding: 13px 18px; margin-top: 8px; border-radius: 15px; }
    .ini-tiers:not(.bloques) .ini-tier-pl { font-size: 15px; min-width: 76px; }
    .ini-tiers:not(.bloques) .ini-tier-amt { font-size: 19px; }
    .ini-note { margin-top: 12px; font-size: 12px; }

    .ini-social { margin-top: 16px; }
    .ini-social b { height: 52px; padding: 0 22px; font-size: 13px; }
    .ini-social-ic { gap: 11px; padding: 0 20px; }
    .ini-social-ic a { width: 34px; height: 34px; border-radius: 10px; }

    /* El chat pasa a ser un panel lateral */
    .ini-cpanel {
        left: auto; right: 0; top: 0; bottom: 0; height: auto; width: 390px; max-width: 100%;
        border-left: 1px solid var(--ini-bd2); border-top: 0; border-right: 0;
        border-radius: 0; box-shadow: -24px 0 60px rgba(0, 0, 0, .6);
        transform: translateX(102%);
    }
    .ini-cpanel.on { transform: none; }
    .ini-cpanel::before { display: none; }
    .ini-chead { padding-top: 16px; }
}

/* Entre el teléfono y el escritorio: la tarjeta sigue entera pero con aire */
@media (min-width: 560px) and (max-width: 999px) {
    .ini-wrap { max-width: 720px; padding: 0 20px; }
    .ini-combos { grid-template-columns: repeat(4, 1fr); }
}

/* ══════════════ Reproductor a pantalla completa ══════════════ */
.ini-player-ghost { display: none; margin: 6px 6px 8px; border-radius: 13px; background: rgba(2, 3, 13, .55); }
.ini-player-ghost.on { display: block; }
.ini-player.expanded { position: fixed; z-index: 1000; margin: 0; }
.ini-player.animating { transition: top .4s cubic-bezier(.4,0,.2,1), left .4s cubic-bezier(.4,0,.2,1), width .4s cubic-bezier(.4,0,.2,1), height .4s cubic-bezier(.4,0,.2,1); }
.ini-overlay {
    position: fixed; inset: 0; z-index: 999; background: rgba(0, 0, 0, .8);
    opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.ini-overlay.on { opacity: 1; visibility: visible; }
.ini-player-ctrl { position: absolute; right: 9px; bottom: 9px; z-index: 4; display: flex; gap: 6px; }
.ini-pc-btn {
    width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer;
    border-radius: 9px; border: 1px solid var(--ini-bd2); background: rgba(2, 3, 13, .68); color: #fff;
}
.ini-pc-btn:hover { border-color: var(--ini-gold); color: var(--ini-gold); }
.ini-player-msg { display: grid; place-items: center; width: 100%; height: 100%; }
.ini-player-msg a { color: var(--ini-gold); font-weight: 700; }

/* Avisos del bloque EXTRA (ventas pausadas, mínimo de tickets, etc.) */
.ini-combos-aviso {
    grid-column: 1 / -1; margin-top: 10px; padding: 12px 14px; border-radius: 12px;
    background: rgba(2, 3, 13, .5); border: 1px dashed var(--ini-bd2);
    font-size: 11.5px; color: var(--ini-dim); line-height: 1.45; text-align: center;
}
.ini-combo.caro { opacity: .45; }
.ini-combo.caro::after {
    content: ""; position: absolute; inset: 0; border-radius: 12px;
    background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255, 255, 255, .05) 6px 12px);
}

/* ══════════════ El chat, revestido para el inicio ══════════════
   El markup y el JS son los de /transmision (partials/chat_live.html); acá
   sólo cambia la piel: el botón vive debajo del reproductor, así que la
   pestaña lateral sobra, y en el teléfono el cajón pasa a ser hoja inferior. */
.ini-page .chat-tab { display: none !important; }
.ini-page .chat-drawer {
    top: auto; right: 0; left: 0; bottom: 0; width: auto; max-width: none; height: 82vh;
    background: linear-gradient(180deg, #0b1130, var(--ini-ink));
    border: 1px solid var(--ini-gold-line); border-bottom: 0; border-radius: 20px 20px 0 0;
    box-shadow: 0 -24px 60px rgba(0, 0, 0, .6);
    transform: translateY(102%);
}
.ini-page .chat-drawer.open { transform: translateY(0); }
.ini-page .chat-drawer::before {
    content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 42px; height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .28);
}
.ini-page .chat-drawer-header { padding-top: 20px; }

@media (min-width: 1000px) {
    /* En escritorio vuelve a ser panel lateral, como en la maqueta */
    .ini-page .chat-drawer {
        top: 0; left: auto; right: 0; bottom: 0; width: 390px; height: auto;
        border: 0; border-left: 1px solid var(--ini-bd2); border-radius: 0;
        box-shadow: -24px 0 60px rgba(0, 0, 0, .6);
        transform: translateX(102%);
    }
    .ini-page .chat-drawer.open { transform: translateX(0); }
    .ini-page .chat-drawer::before { display: none; }
    .ini-page .chat-drawer-header { padding-top: 16px; }
}

/* ══════════════ Tema VIP ══════════════
   El resto del sitio apaga el azul cuando el usuario es VIP, pero la maqueta
   del inicio ES azul: el degradado se queda igual para todos y el VIP sólo
   suma un guiño dorado en el fondo profundo. Pintarlo de negro acá se comía
   el hero entero. */
body[data-vip="true"] .ini-hero {
    background:
        radial-gradient(520px 300px at 50% -60px, #2f5cf0, transparent 62%),
        linear-gradient(180deg, var(--ini-blue), var(--ini-blue-deep) 52%, var(--ini-navy));
}
@media (min-width: 1000px) {
    body[data-vip="true"] .ini-hero {
        background:
            radial-gradient(900px 460px at 30% -120px, #2f5cf0, transparent 62%),
            linear-gradient(180deg, var(--ini-blue), var(--ini-blue-deep) 48%, var(--ini-navy));
    }
}

/* El ticket PROMO gratis. Ocupa el lugar del botón de un ticket, así que se
   distingue por el borde celeste mientras NO está elegido; al elegirlo toma el
   dorado como cualquier otro, para que se vea igual de "marcado". */
.ini-combo.promo {
    border-color: #6aa6ff;
    background: linear-gradient(180deg, rgba(106, 166, 255, .12), rgba(5, 6, 26, .92));
}
.ini-combo.promo .ini-combo-off { background: #2f6bff; color: #fff; }
.ini-combo.promo .ini-combo-pr { color: #6aa6ff; letter-spacing: .1em; }
.ini-combo.promo.on {
    border-color: var(--ini-gold);
    background: linear-gradient(180deg, rgba(255, 210, 30, .14), rgba(5, 6, 26, .9));
}
.ini-combo.promo.on b { color: var(--ini-gold); }
.ini-combo.promo.on .ini-combo-off { background: var(--ini-gold); color: var(--ini-gold-ink); }
.ini-combo.promo.on .ini-combo-pr { color: var(--ini-gold); }

/* ══════════════ Ajustes del teléfono ══════════════ */

/* La barra del chat: el texto se recorta y el contador nunca se parte en dos */
.ini-chatbar > span:not(.ini-chatbar-n) { flex: 1 1 auto; min-width: 0; }
.ini-chatbar-t,
.ini-chatbar-s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ini-chatbar-n { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 430px) {
    .ini-chatbar { padding: 9px 12px; gap: 8px; }
    .ini-chatbar-s { display: none; }   /* en pantallas angostas sobra el subtítulo */
}

/* Los combos pasan a una fila que se desliza: entran cuatro y el resto se
   alcanza arrastrando. El quinto asoma a propósito, para que se vea que hay
   más. El padding de arriba es para que el cartel de descuento —que sobresale
   por encima de la tarjeta— no quede cortado por el recorte del scroll. */
@media (max-width: 999px) {
    .ini-combos {
        display: flex; gap: 7px; margin-top: 2px; padding: 10px 0 4px;
        overflow-x: auto; overscroll-behavior-x: contain;
        scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .ini-combos::-webkit-scrollbar { display: none; }
    .ini-combo { flex: 0 0 calc((100% - 30px) / 4.25); scroll-snap-align: start; }
    .ini-combos-aviso { flex: 1 1 100%; margin-top: 0; }
}

/* Venta EXTRA dentro del riel (sorteo principal EN VIVO) */
.ini-venta-rail {
    margin-top: 12px; padding: 12px; border-radius: 16px;
    background: rgba(2, 3, 13, .5); border: 1px solid var(--ini-gold-line);
    text-align: left;
}
.ini-venta-tit {
    display: flex; align-items: center; gap: 7px;
    font-family: var(--ini-disp); font-size: 11px; font-weight: 800;
    letter-spacing: .14em; color: var(--ini-gold);
}
.ini-venta-rail .ini-combos { margin-top: 8px; }
.ini-venta-rail .ini-note { margin-top: 10px; }

/* Aviso del reproductor mientras la transmisión vuelve (ver iniMontarHls). */
.ini-player-reconecta {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
    padding: 8px 16px; border-radius: 99px; background: rgba(0, 0, 0, .6);
    color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .02em; pointer-events: none;
}

/* Reproductor en pantalla completa real (teléfono, ver iniPantallaCompletaMovil):
   negro de borde a borde, el video entero sin recortar. */
.ini-player.pantalla-completa,
.ini-player:fullscreen {
    width: 100vw; height: 100vh; max-width: none; margin: 0; aspect-ratio: auto; border-radius: 0; background: #000;
}
.ini-player.pantalla-completa video,
.ini-player:fullscreen video {
    width: 100%; height: 100%; object-fit: contain; background: #000;
}