@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..60,400;12..60,700;12..60,800&family=Public+Sans:wght@400;600;700&family=IBM+Plex+Mono:wght@400;600&display=swap');

    :root {
      --tinta:  #0F0A0D;
      --hueso:  #F2E8D5;
      --rojo:   #B21E35;
      --oro:    #E8A33D;
      --jade:   #1F7A5C;
      --humo:   #6B6259;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; background: var(--tinta); overflow-x: hidden; }
    html.gate-locked { overflow: hidden; }
    body { background: transparent; color: #fff; font-family: 'Public Sans', system-ui, sans-serif; }

    .font-display { font-family: 'Bricolage Grotesque', system-ui, sans-serif; }
    .font-mono    { font-family: 'IBM Plex Mono', monospace; }

    .scrollbar-hide { scrollbar-width: none; }
    .scrollbar-hide::-webkit-scrollbar { display: none; }

    @keyframes glow-spin { to { transform: rotate(360deg); } }
    .glow-wrap { position: relative; isolation: isolate; }
    .glow-wrap::before {
      content: '';
      position: absolute; inset: -40%;
      background: conic-gradient(from 0deg at 50% 60%,
        transparent 0deg, rgba(31,122,92,.35) 60deg,
        rgba(232,163,61,.15) 120deg, transparent 180deg);
      filter: blur(48px);
      animation: glow-spin 8s linear infinite;
      pointer-events: none; z-index: -1;
    }

    .trust-chip {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--hueso); color: var(--tinta);
      border-radius: 9999px; padding: 6px 14px;
      font-size: .8rem; font-weight: 600;
      border: 1.5px solid rgba(178,30,53,.3); white-space: nowrap;
      font-family: 'IBM Plex Mono', monospace;
    }

    /* ══════════════════════════════
       AGE GATE (idéntico al vertical de casinos)
    ══════════════════════════════ */
    #age-gate {
      position: fixed; inset: 0; z-index: 9999;
      background: rgba(15,10,13,.96);
      backdrop-filter: blur(10px);
      display: flex; align-items: center; justify-content: center;
      padding: 24px;
    }
    #age-gate[hidden] { display: none; }
    .age-gate-card {
      max-width: 420px; width: 100%; text-align: center;
      background: var(--hueso); color: var(--tinta);
      border: 4px solid var(--rojo); border-radius: 1rem;
      padding: 40px 28px;
    }

    /* ══════════════════════════════
       FONDO ANIMADO DEL VERTICAL DE DEPORTES
       Mismo mecanismo que #lobby-bg en casinos (fijo, detrás de todo el
       vertical) pero con temática de cancha/estadio en vez de lobby de
       casino: líneas de cancha en el piso, balón central girando,
       iconografía deportiva a la deriva, sin el letrero "CASINO LOBBY".
    ══════════════════════════════ */
    #sports-bg {
      position: fixed; inset: 0; z-index: -1; overflow: hidden;
      /* contain:paint recorta de verdad la geometría 3D de .field-lines
         (perspective+rotateX); ver la misma nota en #lobby-bg de index.html
         — sin esto puede filtrarse al scrollWidth del documento en móvil. */
      contain: paint;
      pointer-events: none;
      background:
        radial-gradient(circle at 25% 15%, rgba(31,122,92,.30), transparent 55%),
        radial-gradient(circle at 78% 65%, rgba(232,163,61,.20), transparent 55%),
        var(--tinta);
    }
    /* Líneas de cancha desplazándose, mismo truco de "caminata" que el piso
       del lobby de casinos pero con franjas verdes tipo campo de juego */
    #sports-bg .field-lines {
      position: absolute; left: -10%; right: -10%; bottom: 0; height: 55%;
      background-image: repeating-linear-gradient(100deg,
        rgba(232,163,61,.10) 0 2px, transparent 2px 90px,
        rgba(31,122,92,.14) 90px 92px, transparent 92px 180px);
      background-size: 200% 100%;
      animation: field-walk 22s linear infinite;
      transform: perspective(600px) rotateX(55deg);
      transform-origin: bottom;
      opacity: .6;
    }
    @keyframes field-walk { from { background-position: 0 0; } to { background-position: -1600px 0; } }

    #sports-bg .field-ring {
      position: absolute; top: 42%; left: 50%; width: 720px; height: 720px;
      margin: -360px 0 0 -360px; border-radius: 50%;
      background: repeating-conic-gradient(var(--jade) 0deg 9deg, transparent 9deg 18deg);
      opacity: .10;
      animation: glow-spin 70s linear infinite;
    }
    /* Medallón central: sin video real de estadio disponible, se resuelve
       con un balón CSS girando lentamente como acento ambiental (mismo
       contenedor aislado que el video de ruleta en casinos, listo para
       sustituirse por un clip real más adelante). */
    #sports-bg .field-ball {
      position: absolute; top: 42%; left: 50%; width: 260px; height: 260px;
      margin: -130px 0 0 -130px; border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, #fff 0%, #e8e4d8 35%, #b8b2a0 70%, #6b6660 100%);
      opacity: .16;
      animation: glow-spin 40s linear infinite;
      box-shadow: 0 0 90px 24px rgba(232,163,61,.08);
    }
    #sports-bg .field-ball::before, #sports-bg .field-ball::after {
      content: ''; position: absolute; inset: 0; border-radius: 50%;
      background:
        repeating-conic-gradient(from 0deg, rgba(15,10,13,.5) 0deg 6deg, transparent 6deg 36deg);
    }
    @keyframes drift { 0% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(12px,-22px) rotate(14deg); } 100% { transform: translate(0,0) rotate(0deg); } }
    #sports-bg .drift-icon {
      position: absolute; font-size: 2rem; opacity: .28;
      animation: drift 7s ease-in-out infinite;
      filter: drop-shadow(0 4px 8px rgba(0,0,0,.4));
    }
    #sports-bg .drift-icon:nth-child(odd) { animation-duration: 9s; }

    @keyframes neon-flicker {
      0%, 19%, 21%, 23%, 54%, 56%, 100% { opacity: 1; }
      20%, 22%, 55% { opacity: .35; }
    }
    #sports-bg .neon-sign {
      position: absolute; top: 64px; right: 4%; left: auto;
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-size: clamp(.9rem, 2.2vw, 1.5rem); font-weight: 800; letter-spacing: .04em;
      color: var(--jade); text-shadow: 0 0 12px rgba(31,122,92,.9), 0 0 30px rgba(31,122,92,.5);
      animation: neon-flicker 6s linear infinite;
      white-space: nowrap; opacity: .8;
    }
    @media (max-width: 640px) {
      #sports-bg .neon-sign { display: none; }
    }

    .site-header    { padding: 96px 16px 32px; }
    .top10-section  { padding: 80px 16px; }
    .top10-intro    { padding: 24px; margin-bottom: 40px; }
    .top10-grid-wrap{ padding: 24px; }
    @media (max-width: 640px) {
      .site-header    { padding: 68px 16px 18px; }
      .top10-section  { padding: 28px 16px 60px; }
      .top10-intro    { padding: 16px; margin-bottom: 16px; }
      .top10-grid-wrap{ padding: 14px; }
    }

    #sports-bg .lobby-fade {
      position: absolute; inset: 0;
      background: linear-gradient(to bottom, rgba(15,10,13,0) 0%, rgba(15,10,13,.55) 100%);
    }

    .glass-panel {
      background: rgba(15,10,13,.68);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 1rem;
    }

    /* ══════════════════════════════
       CARTAS DEL RANKING (mismo componente visual que casinos, sin la
       cara de carta de póker en el volteo — no aplica el motivo de baraja
       al vertical de deportes)
    ══════════════════════════════ */
    .poker-card {
      position: relative;
      background: var(--hueso); color: var(--tinta);
      border: 3px solid var(--jade); border-radius: 18px;
      display: flex; flex-direction: column; overflow: hidden;
      transition: transform 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
      transform-style: preserve-3d; perspective: 900px;
    }
    .poker-card:hover {
      transform: translateY(-6px);
      border-color: var(--oro);
      box-shadow: 0 12px 32px rgba(232,163,61,.18);
    }
    @keyframes card-deal {
      0%   { transform: translateY(0) rotateY(0deg) rotate(0deg) scale(1); box-shadow: 0 12px 32px rgba(232,163,61,.18); }
      30%  { transform: translateY(-40px) rotateY(180deg) rotate(-6deg) scale(1.08); box-shadow: 0 30px 60px rgba(0,0,0,.5); }
      60%  { transform: translateY(-18px) rotateY(360deg) rotate(4deg) scale(1.04); }
      100% { transform: translateY(0) rotateY(360deg) rotate(0deg) scale(1); box-shadow: 0 12px 32px rgba(232,163,61,.18); }
    }
    .poker-card.dealing { animation: card-deal 1200ms cubic-bezier(.34,1.2,.64,1); z-index: 5; }

    /* Cara de la carta: aparece encima de la tarjeta durante el volteo y se
       desvanece al terminar. Dura lo mismo que card-deal (1200 ms, igual que
       el vertical de casinos) para que ambas terminen a la vez. El borde es
       jade, no rojo, por la paleta de deportes. */
    .card-flip-face {
      position: absolute; inset: 0; border-radius: 16px; overflow: hidden;
      opacity: 0; pointer-events: none; z-index: 4;
      background: #fff; border: 3px solid var(--jade); box-sizing: border-box;
    }
    .card-flip-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
    @keyframes card-flip-face-show {
      0%, 12%   { opacity: 0; }
      22%, 78%  { opacity: 1; }
      92%, 100% { opacity: 0; }
    }
    .poker-card.dealing .card-flip-face { animation: card-flip-face-show 1200ms ease; }

    .loteria-num { font-family: 'IBM Plex Mono', monospace; font-size: 1.5rem; font-weight: 600; color: var(--jade); }
    .score-big   { font-family: 'IBM Plex Mono', monospace; font-size: 1.75rem; font-weight: 600; color: var(--tinta); }

    .legend-badge {
      position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
      background: var(--jade); color: #fff; font-family: 'IBM Plex Mono', monospace;
      font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
      padding: 4px 10px; border-radius: 9999px; white-space: nowrap; z-index: 2;
      box-shadow: 0 2px 8px rgba(0,0,0,.35);
    }

    .btn-casino {
      display: inline-flex; align-items: center; justify-content: center; gap: 10px;
      background: var(--jade); color: #fff; padding: 12px 24px 12px 12px;
      border-radius: .5rem; font-weight: 700; font-size: .875rem;
      border: none; text-decoration: none; cursor: pointer;
      transition: background 150ms, transform 150ms;
    }
    .btn-casino:hover { background: #175f48; transform: translateY(-1px); }
    .btn-casino:active { transform: translateY(0) scale(.97); }
    .btn-casino.btn-ghost {
      background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.2); color: #fff;
    }
    .btn-casino.btn-ghost:hover { background: rgba(255,255,255,.1); }

    /* Círculo sólido de marca, no ficha de casino: el control principal de
       música del vertical de deportes no debe llevar el patrón a rayas de
       ficha de póker que comparte el componente base con el vertical de
       casinos (los niveles de volumen ya aportan el motivo de balón). */
    .chip-btn {
      width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
      background: radial-gradient(circle at 32% 28%, #2a9873, var(--jade) 65%);
      border: 3px solid var(--tinta); box-shadow: 0 2px 6px rgba(0,0,0,.4);
      display: inline-flex; align-items: center; justify-content: center;
      cursor: pointer; transition: transform 150ms;
    }
    .chip-btn:hover { transform: scale(1.08) rotate(8deg); }
    .chip-btn:active { transform: scale(.92); }
    .chip-btn .chip-inner {
      width: 26px; height: 26px; border-radius: 50%; background: var(--tinta);
      display: flex; align-items: center; justify-content: center; font-size: 12px;
    }

    #music-toggle {
      position: fixed; right: 20px; bottom: 20px; z-index: 60;
      width: 54px; height: 54px;
      transition: bottom .2s ease;
    }
    /* El banner de publicidad es una tarjeta flotante al pie (alto variable
       según el viewport, hasta ~250px); cuando está visible, el control de
       música sube lo suficiente para no quedar tapado en ningún ancho. */
    body.promo-banner-open #music-toggle { bottom: 270px; }
    /* El elemento trae "display:flex" en su propio style para cuando está
       visible; sin !important aquí, esa regla inline gana sobre el
       "display:none" implícito del atributo [hidden] y la pieza se vería
       incluso antes de confirmar la edad. */
    /* El atributo [hidden] solo aplica "display:none" con la especificidad
       más baja: cualquier "display" en el style en línea del propio elemento
       lo gana y la pieza queda visible aunque el JS la marque como oculta.
       Estos elementos declaran su display de estado visible en línea, así que
       necesitan la regla !important para que [hidden] funcione de verdad. */
    #promo-banner[hidden], #promo-overlay[hidden],
    #momios-stale-badge[hidden] { display: none !important; }

    /* ══════════════════════════════
       CREATIVIDAD PUBLICITARIA DE PLAYDOIT — recreada en vector/CSS
       El creativo original venía como tira JPEG de 259 px de alto: en
       pantallas de alta densidad el navegador tenía que ampliarlo ~2x y se
       veía blando, además de traer franjas blancas de separación entre
       paneles. Reconstruida con el logotipo SVG y tipografía, queda nítida
       a cualquier densidad, sin marcos, y pesa ~6 KB en vez de ~80 KB.
       Colores tomados del creativo oficial (rojo #ED1C24, verde #00A651).
       Se dimensiona en unidades de contenedor (cqw) para que todo escale
       en proporción con el banner, en escritorio y en móvil.
    ══════════════════════════════ */
    .promo-creative {
      container-type: inline-size;
      position: relative; width: 100%; height: 100%; overflow: hidden;
      background: radial-gradient(circle at 20% 15%, #F52A31 0%, #ED1C24 48%, #BC121B 100%);
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      display: flex; flex-direction: column;
    }
    /* Retícula diagonal tenue: evoca la red/cancha del creativo original */
    .promo-creative__mesh {
      position: absolute; inset: -10%; pointer-events: none; opacity: .16;
      background-image:
        linear-gradient(114deg, rgba(255,255,255,.55) 0 1.5px, transparent 1.5px 46px),
        linear-gradient(66deg,  rgba(255,255,255,.55) 0 1.5px, transparent 1.5px 46px);
    }
    /* Medallón decorativo del lado derecho */
    .promo-creative__badge {
      position: absolute; right: -9cqw; top: 46%; transform: translateY(-50%);
      width: 44cqw; height: 44cqw; border-radius: 50%;
      background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.20), rgba(255,255,255,.05) 62%, transparent 74%);
      pointer-events: none;
    }
    .promo-creative__badge::after {
      content: ''; position: absolute; inset: 15%;
      border-radius: 50%; border: .8cqw solid rgba(255,255,255,.20);
    }

    /* El cuerpo ocupa el alto disponible y la franja legal queda debajo en
       flujo normal, para que nunca tape el botón de llamada a la acción. */
    .promo-creative__body {
      position: relative; z-index: 1; flex: 1; min-height: 0;
      padding: 8cqw 6cqw 1.5cqw;
      display: flex; flex-direction: column; align-items: flex-start;
      justify-content: center; gap: 1.7cqw;
    }
    .promo-creative__logo { display: block; width: 27cqw; height: auto; }
    .promo-creative__kicker {
      font-size: 2.8cqw; font-weight: 700; color: #fff;
      text-transform: uppercase; letter-spacing: .2em; opacity: .92;
    }
    /* Cintas negras inclinadas con tipografía blanca, como el creativo real */
    .promo-creative__ribbon {
      display: inline-block; background: #0C0C05; transform: skewX(-8deg);
      padding: .8cqw 2.2cqw; box-shadow: .45cqw .45cqw 0 rgba(0,0,0,.22);
    }
    .promo-creative__ribbon > span {
      display: inline-block; transform: skewX(8deg);
      color: #fff; font-weight: 800; line-height: 1.08;
      text-transform: uppercase; letter-spacing: .01em; white-space: nowrap;
    }
    .promo-creative__headline > span { font-size: 4.8cqw; }
    .promo-creative__amount > span { font-size: 7cqw; }

    .promo-creative__cta {
      display: inline-block; margin-top: .8cqw;
      background: #00A651; color: #fff;
      font-size: 3cqw; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
      padding: 1.3cqw 3.6cqw; border-radius: .5cqw;
      box-shadow: 0 .5cqw 1.4cqw rgba(0,0,0,.32);
    }
    /* Franja legal inferior, igual que el creativo oficial */
    .promo-creative__legal {
      position: relative; z-index: 1; flex-shrink: 0;
      display: flex; align-items: center; gap: 1.5cqw;
      padding: 1.2cqw 6cqw; background: rgba(0,0,0,.36);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 1.95cqw; line-height: 1.2; color: rgba(255,255,255,.8);
      white-space: nowrap; overflow: hidden;
    }
    .promo-creative__legal .pd-18 {
      flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
      width: 3.9cqw; height: 3.9cqw; border-radius: 50%;
      border: .3cqw solid rgba(255,255,255,.85); font-weight: 700; font-size: 1.7cqw;
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    }

    /* ── Variante del vertical de deportes: red de portería en el medallón ── */
    .promo-creative--deportes .promo-creative__badge::after {
      inset: 6%; border: none; border-radius: 50%;
      background:
        repeating-linear-gradient(0deg,  rgba(255,255,255,.20) 0 1.5px, transparent 1.5px 11%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.20) 0 1.5px, transparent 1.5px 11%);
    }
    #music-toggle .chip-inner { width: 30px; height: 30px; font-size: 16px; }
    @keyframes music-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(31,122,92,.5);} 50% { box-shadow: 0 0 0 10px rgba(31,122,92,0);} }
    #music-toggle.playing { animation: music-pulse 1.8s ease-out infinite; }
    #music-toggle.attention { animation: music-pulse 1.5s ease-out infinite; }

    /* Control de volumen del vertical de deportes: mismos niveles apilados
       y empalmados que en casinos, pero representados con balones de los
       cuatro deportes más seguidos en México en vez de fichas con
       denominación monetaria. */
    #music-chip-stack { pointer-events: none; }
    .vol-chip {
      position: fixed; right: 26px;
      width: 32px; height: 32px; border-radius: 50%;
      border: 2px solid rgba(0,0,0,.6);
      cursor: pointer; pointer-events: auto;
      background: var(--chip-color);
      box-shadow: 0 3px 7px rgba(0,0,0,.55),
                  inset 0 2px 3px rgba(255,255,255,.3),
                  inset 0 -3px 4px rgba(0,0,0,.4);
      animation: vol-chip-in 300ms cubic-bezier(.34,1.4,.64,1) backwards;
      transition: transform 140ms ease, filter 180ms ease, opacity 180ms ease;
      display: flex; align-items: center; justify-content: center;
      font-size: 15px; line-height: 1;
    }
    .vol-chip .vol-icon { position: relative; z-index: 2; }
    .vol-chip::after {
      content: ''; position: absolute; inset: 5px; border-radius: 50%;
      box-shadow: inset 0 1px 2px rgba(255,255,255,.35), inset 0 -1px 2px rgba(0,0,0,.35);
    }
    .vol-chip.inactive { filter: grayscale(.85) brightness(.45); opacity: .55; }
    .vol-chip:hover { transform: translateX(-4px) scale(1.07); }
    .vol-chip.leaving { animation: vol-chip-out 220ms ease forwards; }
    @keyframes vol-chip-in {
      0%   { transform: translateY(16px) scale(.5); opacity: 0; }
      70%  { transform: translateY(-2px) scale(1.05); opacity: 1; }
      100% { transform: translateY(0) scale(1); opacity: 1; }
    }
    @keyframes vol-chip-out { to { transform: translateY(14px) scale(.5); opacity: 0; } }

    .logo-frame {
      position: relative; overflow: hidden; box-sizing: border-box;
      background: linear-gradient(180deg, #FDFBF6 0%, #F4EEE1 100%);
      border: 1px solid rgba(31,122,92,.25) !important;
      box-shadow: inset 0 0 0 1px rgba(232,163,61,.32),
                  inset 0 2px 10px rgba(15,10,13,.07);
      display: flex; align-items: center; justify-content: center;
      padding: 10px 14px;
    }
    .logo-frame::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(ellipse 72% 80% at 50% 44%,
        rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 72%);
    }
    .logo-frame-inner {
      position: relative; z-index: 1; width: 100%; height: 100%;
      display: flex; align-items: center; justify-content: center;
    }
    .logo-frame-inner img { width: 100%; height: 100%; object-fit: contain; display: block; }
    /* Placa oscura para los logotipos que el operador solo publica en
       versión blanca (Strendus, Winner.mx): sobre el marco claro serían
       invisibles, y recolorear una marca ajena la falsearía. */
    .logo-frame-inner img.on-dark {
      background: linear-gradient(180deg, #241D22 0%, var(--tinta) 100%);
      border-radius: .35rem; padding: 10px 14px;
    }

    a.logo-frame.casino-logo-link {
      cursor: pointer; text-decoration: none;
      transition: transform 160ms ease, box-shadow 160ms ease;
    }
    a.logo-frame.casino-logo-link:hover,
    a.logo-frame.casino-logo-link:focus-visible {
      transform: scale(1.03);
      box-shadow: 0 6px 18px rgba(31,122,92,.4);
      outline: none;
    }
    a.logo-frame.casino-logo-link::after {
      content: '↗'; position: absolute; top: 4px; right: 7px; z-index: 2;
      font-size: 12px; font-weight: 700; color: var(--jade); opacity: 0;
      transition: opacity 160ms ease;
    }
    a.logo-frame.casino-logo-link:hover::after,
    a.logo-frame.casino-logo-link:focus-visible::after { opacity: .9; }

    .logo-badge {
      display: inline-flex; align-items: center; gap: 8px;
      font-family: 'Bricolage Grotesque', system-ui, sans-serif;
      font-weight: 800; color: var(--jade);
    }
    .logo-badge .logo-dot {
      width: 10px; height: 10px; border-radius: 50%; background: var(--oro);
      box-shadow: 0 0 0 3px rgba(232,163,61,.25);
      flex-shrink: 0;
    }

    .info-card {
      background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
      border-radius: .75rem; padding: 20px;
    }

    /* Nav activo: indica en cuál vertical está el usuario */
    .nav-link[aria-current="page"] { color: #fff; border-bottom: 2px solid var(--jade); padding-bottom: 2px; }

    /* Momios accionables: cada resultado es un botón que agrega la selección
       al boleto. El pago se calcula ahí, no en la tarjeta. */
    .momios-layout { margin-top: 20px; display: grid; gap: 16px; align-items: start; }
    #momios-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }

    @media (min-width: 1024px) {
      .momios-layout { grid-template-columns: minmax(0, 1fr) 320px; }
      .boleto { position: sticky; top: 24px; }
    }

    .momio-btn {
      flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
      text-align: center; color: inherit; font-family: inherit; cursor: pointer;
      background: rgba(255,255,255,.6); border: 1px solid transparent;
      border-radius: .5rem; padding: 8px 6px;
      transition: background 150ms, border-color 150ms, transform 150ms;
    }
    .momio-btn:hover { background: rgba(255,255,255,.9); border-color: var(--jade); transform: translateY(-1px); }
    .momio-btn:active { transform: translateY(0) scale(.97); }
    .momio-btn:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; }
    .momio-btn__label { font-size: 9px; color: var(--humo); }
    .momio-btn__odds { font-weight: 700; }

    /* Seleccionado: jade sólido, el mismo verde del CTA principal, para que
       se lea como "esto ya está en el boleto" y no como hover. */
    .momio-btn--activo,
    .momio-btn--activo:hover { background: var(--jade); border-color: var(--jade); color: #fff; }
    .momio-btn--activo .momio-btn__label { color: rgba(255,255,255,.75); }
    .momio-btn--activo .momio-btn__odds::after { content: " ✓"; font-size: .75em; }

    /* ── Boleto ── */
    .boleto {
      background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
      border-radius: .75rem; padding: 16px;
    }
    .boleto__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .boleto__title { font-size: .95rem; font-weight: 700; }
    .boleto__count {
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px;
      border-radius: 9999px; background: var(--jade); color: #fff;
      font-size: 11px; font-weight: 700;
    }
    /* Vaciar es una acción destructiva pero barata de rehacer: se muestra como
       chip legible en vez de enlace tenue, sin llegar al peso del CTA. */
    .boleto__clear {
      display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
      background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22);
      border-radius: 9999px; padding: 4px 10px; cursor: pointer;
      font-family: inherit; font-size: .7rem; font-weight: 700; color: inherit;
      transition: background 150ms, border-color 150ms, color 150ms;
    }
    .boleto__clear:hover { background: rgba(179,38,30,.16); border-color: #B3261E; color: #F2B8B5; }
    .boleto__clear:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; }
    .boleto__clear[hidden] { display: none; }
    .boleto__empty { margin-top: 10px; font-size: .78rem; color: var(--humo); }
    .boleto__items { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
    .boleto__item {
      display: flex; align-items: center; gap: 8px;
      background: rgba(255,255,255,.6); border-radius: .5rem; padding: 8px 10px;
    }
    .boleto__item-texto { flex: 1; min-width: 0; }
    .boleto__item-pick {
      display: block; font-size: .8rem; font-weight: 700;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .boleto__item-partido {
      display: block; font-size: .65rem; color: var(--humo);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .boleto__item-odd { font-weight: 700; font-size: .85rem; }
    .boleto__item-quitar {
      background: none; border: none; cursor: pointer; padding: 2px 4px;
      color: var(--humo); font-size: .8rem; line-height: 1;
    }
    .boleto__item-quitar:hover { color: #B3261E; }
    .boleto__summary { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14); }
    .boleto__line { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: .78rem; color: var(--humo); }
    .boleto__odds { font-size: 1rem; color: inherit; }
    .boleto__stake-row { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: .78rem; color: var(--humo); }
    .boleto__stake {
      flex: 1; min-width: 0; background: rgba(255,255,255,.6);
      border: 1px solid rgba(255,255,255,.2); border-radius: .375rem; padding: 6px 8px;
      font-family: inherit; font-size: .85rem; font-weight: 700; color: inherit;
    }
    .boleto__stake:focus-visible { outline: 2px solid var(--jade); outline-offset: 1px; }
    .boleto__line--payout { margin-top: 10px; }
    .boleto__payout { font-size: 1.15rem; color: var(--jade); }
    .boleto__profit { font-size: .7rem; color: var(--humo); text-align: right; }
    .boleto__cta { width: 100%; margin-top: 12px; padding-left: 24px; }
    .boleto__note { margin-top: 8px; font-size: .65rem; color: var(--humo); line-height: 1.5; }

    /* En pantallas chicas el boleto se ancla abajo y solo aparece cuando hay
       algo dentro, para no tapar contenido mientras el usuario elige. */
    @media (max-width: 1023px) {
      .boleto { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
        border-radius: .75rem .75rem 0 0; max-height: 70vh; overflow-y: auto;
        background: #14110E; border-color: rgba(255,255,255,.2);
        box-shadow: 0 -8px 32px rgba(0,0,0,.45);
        transform: translateY(100%); transition: transform 200ms;
      }
      .boleto--con-seleccion { transform: translateY(0); }
      .boleto__empty { display: none; }
    }

    /* Calificación externa: se distingue del score editorial por ser enlace a
       la fuente, para que el lector pueda comprobarla. */
    .sportsbook-rating {
      font-size: 10px; color: var(--humo); text-decoration: underline;
      text-decoration-style: dotted; text-underline-offset: 2px;
    }
    .sportsbook-rating:hover { color: var(--jade); }

    /* Opiniones citadas: plegadas por defecto para que la tarjeta siga
       comparándose de un vistazo, y con el mismo trato para las ocho casas. */
    .opiniones { margin-top: 4px; }
    .opiniones__toggle {
      cursor: pointer; list-style: none;
      font-family: 'IBM Plex Mono', monospace; font-size: 9px;
      text-transform: uppercase; letter-spacing: .08em; color: var(--humo);
      padding: 6px 0; border-top: 1px solid rgba(107,98,89,.2);
    }
    .opiniones__toggle::-webkit-details-marker { display: none; }
    .opiniones__toggle::before { content: "▸ "; }
    .opiniones[open] .opiniones__toggle::before { content: "▾ "; }
    .opiniones__toggle:hover { color: var(--jade); }
    .opiniones__toggle:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; }

    .opinion {
      margin: 0 0 8px; padding: 8px 10px;
      background: rgba(255,255,255,.5); border-left: 3px solid var(--oro);
      border-radius: .25rem;
    }
    .opinion__texto { font-size: .78rem; font-style: italic; line-height: 1.45; }
    .opinion__pie {
      margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px;
      font-family: 'IBM Plex Mono', monospace; font-size: 9px; color: var(--humo);
    }
    .opinion__pie a { color: var(--jade); text-decoration: none; }
    .opinion__pie a:hover { text-decoration: underline; }
    .opiniones__nota { font-size: 9px; color: var(--humo); line-height: 1.5; }

    /* ── Ruleta "¿Qué apostar?" ── */
    .que-apostar__grid { display: grid; gap: 32px; align-items: center; }
    @media (min-width: 768px) {
      .que-apostar__grid { grid-template-columns: 1fr auto; }
    }

    /* Puntero que marca la casilla ganadora, arriba de la rueda. */
    .apostar-puntero {
      width: 0; height: 0; z-index: 10;
      border-left: 14px solid transparent;
      border-right: 14px solid transparent;
      border-bottom: 24px solid var(--oro);
    }

    .apostar-result {
      margin-top: 20px; padding: 18px;
      background: var(--hueso); color: var(--tinta);
      border: 3px solid var(--jade); border-radius: .75rem;
    }
    .apostar-result__label {
      font-size: 9px; color: var(--humo);
      text-transform: uppercase; letter-spacing: .1em;
    }
    .apostar-result h3 { font-size: 1.4rem; font-weight: 700; margin-top: 2px; line-height: 1.2; }
    .apostar-partido { font-size: .8rem; color: var(--humo); margin-top: 4px; }
    .apostar-momio {
      display: flex; align-items: baseline; gap: 8px; margin-top: 12px;
      font-size: 1.6rem; font-weight: 700; color: var(--jade);
    }
    .apostar-momio__label {
      font-size: 9px; color: var(--humo);
      text-transform: uppercase; letter-spacing: .1em;
    }
    .apostar-add { width: 100%; margin-top: 14px; padding-left: 24px; justify-content: center; }
    .apostar-add:disabled { opacity: .6; cursor: default; }

/* Volver arriba: aparece al bajar, discreto y fuera del camino del contenido. */
.to-top {
  position: fixed; right: 16px; bottom: 16px; z-index: 30;
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--jade); color: #fff; border: 2px solid rgba(255,255,255,.25);
  font-size: 1.25rem; line-height: 1; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  transition: background 150ms, transform 150ms, bottom 200ms;
}
.to-top:hover { background: #175f48; transform: translateY(-2px); }
.to-top:active { transform: translateY(0) scale(.95); }
.to-top:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }
.to-top[hidden] { display: none; }

/* Cuando el boleto está anclado abajo en móvil, el botón sube para no quedar
   debajo de él. */
@media (max-width: 1023px) {
  body.con-boleto .to-top { bottom: calc(16px + 30vh); }
}

    .btn-inline {
      background: none; border: none; cursor: pointer; padding: 0;
      font-family: inherit; font-size: .8rem; color: var(--humo);
      text-decoration: underline; text-align: center;
    }
    .btn-inline:hover { color: var(--tinta); }
    .btn-inline:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; }
    .apostar-ir-boleto { width: 100%; margin-top: 10px; }
    .apostar-ir-boleto[hidden] { display: none; }