/* ─── Reset ──────────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    /* ─── Tokens ─────────────────────────────────────────────────── */
    :root {
      --bg:            #0f0f1a;
      --bg2:           #16162a;
      --surface:       rgba(255,255,255,0.05);
      --surface-hover: rgba(255,255,255,0.09);
      --border:        rgba(255,255,255,0.1);
      --text:          #ffffff;
      --muted:         rgba(255,255,255,0.55);
      --a1: #7dd6f7; --a2: #0d4db5;
      --b1: #ffcc00; --b2: #cc2200;
      --accent: #00d9a3;
      --accion:        #a347d4;
      --accion-claro:  #c266e5;
      --accion-oscuro: #6a1b9a;
      --radius-card: 20px;
      --radius-btn:  50px;
      --font: 'Poppins', sans-serif;
      --transition: 0.35s cubic-bezier(0.34,1.56,0.64,1);
    }

    html, body { overflow-x: clip; max-width: 100%; }
    body {
      background: var(--bg); color: var(--text); font-family: var(--font);
      min-height: 100dvh; display: flex; flex-direction: column;
    }
    body::before {
      content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    }

    /* ─── Header ─────────────────────────────────────────────────── */
    header {
      position: sticky; top: 0; z-index: 100;
      display: flex; justify-content: space-evenly; align-items: center;
      padding: 10px 0; gap: 8px;
      background: rgba(15,15,26,0.9); backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--border);
    }
    .header-right { display: flex; flex-direction: column; gap: 6px; align-items: center; }
    .logo {
      justify-self: center;
      text-decoration: none; cursor: pointer;
      display: flex; align-items: center;
    }
    .logo-img { height: 36px; width: auto; display: block; }
    .btn-nav {
      background: var(--surface); border: 1px solid var(--border);
      color: var(--text); font-family: var(--font); font-size: 0.8rem; font-weight: 600;
      padding: 7px 16px; border-radius: var(--radius-btn); cursor: pointer;
      text-decoration: none; transition: background 0.2s, transform 0.15s;
      display: flex; align-items: center; gap: 6px;
      white-space: nowrap;
    }
    .btn-nav:hover { background: var(--surface-hover); transform: scale(1.03); }
    .btn-nav.active { background: rgba(163,71,212,0.2); border-color: var(--accion); color: var(--accion); }
    .btn-nav.crear { background: radial-gradient(ellipse 35% 60% at 18% 25%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.12) 45%, transparent 100%), linear-gradient(135deg, rgba(255,255,255,0.18), transparent 50%), linear-gradient(135deg, var(--accion-claro) 0%, var(--accion) 50%, var(--accion-oscuro) 100%); background-origin: border-box; background-repeat: no-repeat; border: none; color:#fff; box-shadow: 0 3px 12px rgba(163,71,212,0.4); }
    /* Duelos Mundiales: borde gradiente tipo logo (cian → morado → naranja) + glow naranja sutil en 🔥 */
    #btn-nav-explorar:not(.active) {
      background:
        linear-gradient(rgba(15,15,26,0.85), rgba(15,15,26,0.85)) padding-box,
        linear-gradient(135deg, #7dd6f7 0%, #a347d4 50%, #ff9100 100%) border-box;
      border: 1.5px solid transparent;
      text-shadow: 0 0 8px rgba(255,145,0,0.3);
      transition: text-shadow 0.2s, filter 0.2s, transform 0.15s;
    }
    #btn-nav-explorar:not(.active):hover { filter: brightness(1.15); text-shadow: 0 0 14px rgba(255,145,0,0.55); }
    .btn-nav.crear:hover { opacity: 0.9; }

    /* ─── Main ───────────────────────────────────────────────────── */
    main { flex: 1; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding: 0 0 40px; }

    /* ─── VIEW: Duelo ────────────────────────────────────────────── */
    #view-duelo { width: 100%; max-width: 800px; padding: 0 16px; display: flex; flex-direction: column; flex: 1 0 auto; }
    #zona-bottom { margin-top: 40px; text-align: center; padding-top: 16px; }
    .categoria-badge {
      display: inline-flex; align-items: center; gap: 6px;
      background: var(--surface); border: 1px solid var(--border);
      color: var(--muted); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
      padding: 5px 14px; border-radius: var(--radius-btn);
      cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s;
      -webkit-tap-highlight-color: transparent; user-select: none;
    }
    .categoria-badge::after { content: '▾'; margin-left: 4px; opacity: 0.7; font-size: 1.7em; line-height: 1; }
    .categoria-badge:hover { border-color: rgba(163,71,212,0.5); color: var(--text); }
    .categoria-badge:hover::after { opacity: 0.9; }
    .cat-badges { display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap; width: 100%; margin: 24px auto 0; }
    .cat-badge-wrap { position: relative; flex: 1; display: flex; justify-content: center; }
    .origen-badge-wrap { flex: 1; display: flex; justify-content: center; }
    .origen-badge {
      display: inline-flex; align-items: center; gap: 6px;
      background: var(--surface); border: 1px solid var(--border);
      color: var(--muted); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
      padding: 5px 14px; border-radius: var(--radius-btn); user-select: none;
    }
    /* ── Favorito (corazón / estrella) ─────────────────────────────── */
    .fav-btn {
      flex: 0 0 auto; background: none; border: none; cursor: pointer; padding: 4px;
      display: inline-flex; align-items: center; justify-content: center; line-height: 0;
      -webkit-tap-highlight-color: transparent;
    }
    .fav-ico {
      width: 23px; height: 23px; fill: none; stroke: rgba(255,255,255,0.5);
      stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;
      transition: stroke 0.2s, fill 0.2s, transform 0.2s;
    }
    .fav-btn:hover .fav-ico { stroke: var(--fav-color); }
    .fav-btn.fav-on .fav-ico { fill: var(--fav-color); stroke: var(--fav-color); }
    .fav-color-morado   { --fav-color: #a347d4; }
    .fav-color-rojo     { --fav-color: #ff3b5c; }
    .fav-color-amarillo { --fav-color: #ffc83d; }
    .fav-color-blanco   { --fav-color: #ffffff; }
    .fav-btn.fav-pop .fav-ico { animation: favPop 0.7s cubic-bezier(0.34,1.56,0.64,1); }
    @keyframes favPop {
      0%   { transform: scale(1); }
      35%  { transform: scale(1.6); }
      60%  { transform: scale(0.85); }
      80%  { transform: scale(1.12); }
      100% { transform: scale(1); }
    }
    /* Fila Crear + favorito (a su derecha, en la misma línea) */
    .nav-crear-row { display: flex; flex-direction: row; gap: 6px; align-items: center; justify-content: center; }
    /* Botón de menú "Favoritos" — solo icono, misma estética que Crear (morado + halo arriba-izq) */
    .btn-nav-fav {
      background:
        radial-gradient(ellipse 55% 70% at 22% 22%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.12) 45%, transparent 100%),
        linear-gradient(135deg, rgba(255,255,255,0.18), transparent 50%),
        linear-gradient(135deg, var(--accion-claro) 0%, var(--accion) 50%, var(--accion-oscuro) 100%);
      background-origin: border-box; background-repeat: no-repeat;
      border: none; cursor: pointer; line-height: 0;
      padding: 7px; /* mismo padding vertical que Crear → misma altura; icono cuadrado → círculo */
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: 50%; box-shadow: 0 3px 12px rgba(163,71,212,0.4);
      transition: opacity 0.2s, transform 0.15s; -webkit-tap-highlight-color: transparent;
    }
    .btn-nav-fav:hover { opacity: 0.9; transform: scale(1.05); }
    .btn-nav-fav.active { box-shadow: 0 0 0 2px rgba(255,255,255,0.3), 0 3px 12px rgba(163,71,212,0.4); }
    /* Silueta (contorno) si no hay favoritos; relleno cuando hay al menos uno */
    .nav-fav-ico { width: 19px; height: 19px; fill: none; stroke: var(--fav-color, #fff); stroke-width: 2; stroke-linejoin: round; }
    .btn-nav-fav.has-favs .nav-fav-ico { fill: var(--fav-color, #fff); stroke: var(--fav-color, #fff); }

    /* ── Papelera "cambiar voto" en la opción elegida ──────────────── */
    .opcion-papelera {
      position: absolute; z-index: 6; top: 0; right: 0; width: 32px; height: 32px;
      border: none; border-radius: 50%; padding: 0; cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
      background: rgba(0,0,0,0.58); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
      opacity: 0; transform: scale(0.5); pointer-events: none;
      transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34,1.56,0.64,1), background 0.2s;
    }
    .opcion-papelera.visible { opacity: 1; transform: scale(1); pointer-events: auto; }
    .opcion-papelera:hover { background: rgba(220,38,38,0.88); }
    .opcion-papelera svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

    /* Tarjetas de Favoritos (reutilizan .mi-duelo-card) */
    .fav-quitar {
      background: none; border: none; cursor: pointer; padding: 2px; line-height: 0;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: 50%; transition: transform 0.2s, background 0.2s;
      -webkit-tap-highlight-color: transparent;
    }
    .fav-quitar:hover { background: rgba(255,255,255,0.08); transform: scale(1.12); }
    .fav-quitar svg { width: 19px; height: 19px; fill: var(--fav-color, #a347d4); stroke: var(--fav-color, #a347d4); stroke-width: 2; stroke-linejoin: round; }
    .fav-voto-txt { font-size: 0.72rem; color: var(--muted); font-weight: 600; }

    /* Confirmación de borrado de voto (revoto) */
    .revote-confirm {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
      z-index: 12; width: min(88%, 320px); padding: 18px 18px 16px;
      background: #1a1a2e; border: 1px solid var(--border); border-radius: 16px;
      box-shadow: 0 16px 50px rgba(0,0,0,0.7); text-align: center;
      animation: revoteIn 0.22s ease-out;
    }
    @keyframes revoteIn { from { opacity: 0; transform: translate(-50%,-46%) scale(0.94); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
    .revote-confirm-txt { font-size: 0.92rem; font-weight: 600; color: var(--text); line-height: 1.45; margin: 0 0 14px; }
    .revote-confirm-btns { display: flex; gap: 10px; justify-content: center; }
    .revote-btn {
      flex: 1; padding: 10px 12px; border-radius: 10px; font-family: var(--font);
      font-size: 0.9rem; font-weight: 700; cursor: pointer; border: 1px solid transparent;
      transition: background 0.2s, border-color 0.2s, transform 0.1s;
    }
    .revote-btn:active { transform: scale(0.97); }
    .revote-btn-borrar { background: rgba(239,68,68,0.16); border-color: rgba(239,68,68,0.5); color: #ff6b6b; }
    .revote-btn-borrar:hover { background: rgba(239,68,68,0.28); }
    .revote-btn-cancelar { background: rgba(255,255,255,0.06); border-color: var(--border); color: var(--text); }
    .revote-btn-cancelar:hover { background: rgba(255,255,255,0.12); }

    .cat-picker-dropdown {
      position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
      background: #1a1a2e; border: 1px solid var(--border); border-radius: 14px;
      padding: 6px; min-width: 210px; max-height: 320px; overflow-y: auto;
      box-shadow: 0 12px 40px rgba(0,0,0,0.7); z-index: 100;
      display: flex; flex-direction: column; gap: 2px;
      transform-origin: top center;
    }
    .cat-picker-dropdown.abriendo {
      animation: catPickerIn 0.22s cubic-bezier(0.34,1.4,0.64,1) forwards;
    }
    .cat-picker-dropdown.cerrando {
      animation: catPickerOut 0.18s ease forwards;
    }
    @keyframes catPickerIn  { from { opacity:0; transform:translateX(-50%) scaleY(0.7) translateY(-8px); } to { opacity:1; transform:translateX(-50%) scaleY(1) translateY(0); } }
    @keyframes catPickerOut { from { opacity:1; transform:translateX(-50%) scaleY(1) translateY(0); } to { opacity:0; transform:translateX(-50%) scaleY(0.7) translateY(-8px); } }
    .cat-picker-opt {
      display: flex; align-items: center; gap: 8px;
      padding: 9px 14px; border-radius: 10px; cursor: pointer;
      font-size: 0.85rem; font-weight: 600; color: var(--muted);
      transition: background 0.15s, color 0.15s; white-space: nowrap;
    }
    .cat-picker-opt:hover { background: rgba(255,255,255,0.07); color: var(--text); }
    .cat-picker-opt.activa { background: rgba(163,71,212,0.15); color: var(--accion); }
    /* Opción "🔥 Trending" del picker — destacada con gradiente del logo */
    .cat-picker-opt-trending {
      color: #ff9100; font-weight: 800;
      border: 1px solid rgba(255,145,0,0.18);
      margin: 2px 0;
    }
    .cat-picker-opt-trending:hover { background: rgba(255,145,0,0.08); color: #ffb04d; }
    .cat-picker-opt-trending.activa {
      background:
        linear-gradient(rgba(15,15,26,0.7), rgba(15,15,26,0.7)) padding-box,
        linear-gradient(135deg, #7dd6f7 0%, #a347d4 50%, #ff9100 100%) border-box;
      border: 1px solid transparent;
      color: #ff9100;
    }
    .pregunta {
      font-size: clamp(1.6rem,5vw,2.6rem); font-weight: 900; text-align: center;
      line-height: 1.2; margin: 18px 0 28px; padding: 0 4px;
    }
    .opciones-wrapper { position: relative; }
    .opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; }
    .opcion {
      position: relative; overflow: hidden; border-radius: var(--radius-card);
      border: 2px solid transparent; cursor: pointer;
      min-height: 200px; display: flex; flex-direction: column;
      align-items: stretch; justify-content: flex-start; gap: 0;
      padding: 20px 20px; text-align: center;
      transition: transform var(--transition), box-shadow var(--transition), border-color 0.3s, opacity 0.5s ease, filter 0.5s ease;
      -webkit-tap-highlight-color: transparent; user-select: none;
    }
    .opcion-a { background: radial-gradient(ellipse 35% 28% at 50% 14%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.12) 45%, transparent 100%), linear-gradient(180deg, rgba(255,255,255,0.2), transparent 45%), linear-gradient(135deg, #00c4ff 0%, #1976d2 50%, #0d47a1 100%); background-origin: border-box; background-repeat: no-repeat; box-shadow: 0 10px 24px rgba(13,71,161,0.55); }
    .opcion-b { background: radial-gradient(ellipse 35% 28% at 50% 14%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.12) 45%, transparent 100%), linear-gradient(180deg, rgba(255,255,255,0.18), transparent 45%), linear-gradient(135deg, #ff9100 0%, #ff5722 50%, #c62828 100%); background-origin: border-box; background-repeat: no-repeat; box-shadow: 0 10px 24px rgba(198,40,40,0.55); }
    .opcion:not(:disabled):hover { transform: translateY(-4px) scale(1.02); }
    .opcion:not(:disabled):active { transform: scale(0.97); }
    .opcion.ganadora { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.25), 0 16px 40px rgba(0,0,0,0.4); transform: scaleX(1.05); }
    .opcion.perdedora { opacity: 0.35; filter: saturate(0.15) brightness(0.55); transform: scale(0.75); transition: transform 0.5s ease, opacity 0.5s ease, filter 0.5s ease; }
    @keyframes vibrarTarjeta {
      0%,100% { transform: translateX(0) scale(1); }
      15%,45%  { transform: translateX(-6px) scale(1.02); }
      30%,60%  { transform: translateX(6px) scale(1.02); }
      75%      { transform: translateX(-3px) scale(1.01); }
      90%      { transform: translateX(3px) scale(1.01); }
    }
    .opcion.fallado { animation: vibrarTarjeta 0.6s ease-in-out; border-color: rgba(239,68,68,0.55) !important; }
    .opcion-a.has-image, .opcion-b.has-image { background: none; box-shadow: 0 8px 32px rgba(0,0,0,0.5); }
    .opcion.has-image .opcion-texto { text-shadow: 0 2px 8px rgba(0,0,0,0.9); }
    .opcion.has-image .opcion-emoji { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8)); }
    .opcion-icono { width: 3.5rem; height: 3.5rem; object-fit: cover; border-radius: 10px; display: block; pointer-events: none; }
    .opcion-icono.hidden { display: none; }
    .opcion.has-icono .opcion-emoji { display: none; }

    /* CONTENT (visible before vote) */
    .opcion-content {
      flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0;
      transition: opacity 0.25s;
    }
    .opcion.votado .opcion-content { opacity: 0; pointer-events: none; }

    /* Media area: emoji / icon — fills remaining space and keeps content centered */
    .opcion-media {
      flex: 1; display: flex; align-items: center; justify-content: center;
      min-height: 48px;
    }

    .opcion-emoji { font-size: 3.5rem; line-height: 1; display: block; }
    .opcion-texto {
      font-size: clamp(1rem,3vw,1.4rem); font-weight: 700; color: #fff;
      text-shadow: 0 1px 4px rgba(0,0,0,0.4);
      padding-top: 10px; padding-bottom: 8px;
    }

    /* OVERLAY (percentages, visible after vote) */
    .opcion-votos {
      position: absolute; inset: 0;
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
      opacity: 0; pointer-events: none; transition: opacity 0.4s ease;
      border-radius: calc(var(--radius-card) - 2px);
    }
    .opcion.votado .opcion-votos { opacity: 1; }

    .pct-numero { font-size: clamp(2.2rem,8vw,3.5rem); font-weight: 900; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.5); line-height: 1; }
    /* Refresco en vivo: pulso del número + etiqueta para que se note el cambio */
    @keyframes numBump {
      0%   { transform: scale(1); }
      35%  { transform: scale(1.32); text-shadow: 0 0 16px rgba(255,255,255,0.85), 0 2px 8px rgba(0,0,0,0.5); }
      100% { transform: scale(1); }
    }
    .pct-numero.num-bump { animation: numBump 0.6s cubic-bezier(0.34,1.56,0.64,1); }
    @keyframes labelFlash { 0%,100% { opacity: 0.85; } 40% { opacity: 1; color: #fff; } }
    .pct-label.num-bump { animation: labelFlash 0.6s ease; }
    .pct-label  { font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.85); }
    .pct-bar-wrap { width: 80%; height: 10px; background: rgba(255,255,255,0.2); border-radius: 5px; overflow: hidden; }
    .pct-bar { height: 100%; border-radius: 5px; background: rgba(255,255,255,0.9); transform-origin: right; transform: scaleX(0); transition: none; }

    /* Tick centrado horizontalmente y a la altura del resplandor del botón (50% 14%) */
    .voto-badge {
      position: absolute; top: 14%; left: 50%;
      width: 28px; height: 28px; background: rgba(255,255,255,0.9); border-radius: 50%;
      display: flex; align-items: center; justify-content: center; font-size: 0.9rem;
      opacity: 0; transform: translate(-50%,-50%) scale(0);
      transition: opacity 0.3s, transform 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.1s;
    }
    .opcion.ganadora .voto-badge { opacity: 1; transform: translate(-50%,-50%) scale(1); }

    /* VS badge */
    .vs-badge {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
      width: 44px; height: 44px; background: var(--bg); border: 2px solid var(--border);
      border-radius: 50%; display: flex; align-items: center; justify-content: center;
      font-size: 0.75rem; font-weight: 900; color: var(--muted); z-index: 10; pointer-events: none;
    }

    /* ─── Auto-advance ───────────────────────────────────────────── */
    .autoavance-wrap { margin: 24px 0 0; display: none; flex-direction: column; gap: 10px; align-items: center; width: 100%; }
    .autoavance-wrap.visible { display: flex; }
    .autoavance-bar-wrap { width: 100%; height: 4px; background: var(--surface); border-radius: 2px; overflow: hidden; }
    .autoavance-bar { height: 100%; border-radius: 2px; background: linear-gradient(90deg,#f59e0b,#ef4444); width: 100%; transform-origin: left; transform: scaleX(1); }
    .msg-presion { text-align: center; font-size: 1.55rem; font-weight: 900; color: #ef4444; padding: 14px 0 6px; animation: entradaFrase 0.4s ease forwards, vibracion 0.8s 0.4s ease infinite; }
    .autoavance-texto { font-size: 0.75rem; color: var(--muted); font-weight: 600; }

    /* ─── Buttons ────────────────────────────────────────────────── */
    .acciones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 20px; }
    #acciones, #acciones-postVoto { flex-direction: column; align-items: center; }
    .btn {
      font-family: var(--font); font-weight: 700; font-size: 0.85rem;
      border: none; border-radius: var(--radius-btn); cursor: pointer;
      padding: 12px 22px; display: flex; align-items: center; gap: 8px;
      transition: transform 0.15s, box-shadow 0.2s;
      -webkit-tap-highlight-color: transparent;
    }
    .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
    .btn:active { transform: scale(0.96); }
    .btn-siguiente {
      background: none !important; border: none !important; box-shadow: none !important;
      color: var(--muted); font-size: 0.72rem; font-weight: 500;
      padding: 6px 10px; opacity: 0; pointer-events: none;
      transition: opacity 0.5s ease;
    }
    .btn-siguiente:hover { transform: none; box-shadow: none !important; color: var(--text); }
    .btn-siguiente.sig-visible { opacity: 1; pointer-events: auto; }
    .btn-compartir, .btn-retar { background: radial-gradient(ellipse 35% 50% at 18% 20%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.12) 45%, transparent 100%), linear-gradient(135deg, rgba(255,255,255,0.18), transparent 45%), linear-gradient(135deg, var(--accion-claro) 0%, var(--accion) 50%, var(--accion-oscuro) 100%); background-origin: border-box; background-repeat: no-repeat; color: #fff; box-shadow: 0 6px 18px rgba(163,71,212,0.45); font-size: 0.9rem; padding: 14px 28px; font-weight: 800; }
    .btn-primary { background: radial-gradient(ellipse 35% 50% at 18% 20%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.12) 45%, transparent 100%), linear-gradient(135deg, rgba(255,255,255,0.18), transparent 45%), linear-gradient(135deg, var(--accion-claro) 0%, var(--accion) 50%, var(--accion-oscuro) 100%); background-origin: border-box; background-repeat: no-repeat; color: #fff; box-shadow: 0 6px 18px rgba(163,71,212,0.45); }
    .btn-ghost   { background: var(--surface); border: 1px solid var(--border); color: var(--text); }

    /* ─── VIEW: Mis duelos ──────────────────────────────────────── */
    #view-mis-duelos { width: 100%; max-width: 640px; padding: 32px 16px 80px; }
    .mis-duelos-titulo { font-size: 1.6rem; font-weight: 900; margin-bottom: 8px; }
    .mis-duelos-sub { color: var(--muted); font-size: 0.88rem; margin-bottom: 28px; }
    .mi-duelo-card {
      background: var(--bg2); border: 1px solid var(--border);
      border-radius: 16px; overflow: hidden; margin-bottom: 14px;
      cursor: pointer; transition: border-color 0.2s;
    }
    .mi-duelo-card:hover { border-color: rgba(163,71,212,0.4); }
    .mi-duelo-header { padding: 16px 16px 12px; }
    .mi-duelo-pregunta { font-size: 1rem; font-weight: 700; margin-bottom: 8px; line-height: 1.35; }
    .mi-duelo-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .mi-duelo-cat { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); }
    .status-badge { font-size: 0.68rem; font-weight: 700; padding: 2px 9px; border-radius: 20px; }
    .status-publicado { background: rgba(0,217,163,0.15); border: 1px solid var(--accent); color: var(--accent); }
    .status-revision  { background: rgba(245,158,11,0.15); border: 1px solid #f59e0b; color: #f59e0b; }
    .status-rechazado { background: rgba(239,68,68,0.15);  border: 1px solid #ef4444; color: #ef4444; }
    .mi-duelo-opciones { padding: 0 16px 14px; display: flex; flex-direction: column; gap: 8px; }
    .mi-duelo-opc { display: flex; align-items: center; gap: 10px; }
    .mi-duelo-emoji { font-size: 1.1rem; flex-shrink: 0; }
    .mi-duelo-opc-label { font-size: 0.85rem; font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mi-duelo-bar-wrap { width: 72px; height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; flex-shrink: 0; overflow: hidden; }
    .mi-duelo-bar { height: 100%; border-radius: 3px; }
    .mi-duelo-bar-a { background: linear-gradient(90deg,var(--a1),var(--a2)); }
    .mi-duelo-bar-b { background: linear-gradient(90deg,var(--b1),var(--b2)); }
    .mi-duelo-pct { font-size: 0.78rem; font-weight: 700; width: 32px; text-align: right; flex-shrink: 0; }
    .mi-duelo-footer { padding: 10px 16px 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
    .mi-duelo-footer-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
    .mi-duelo-votos { font-size: 0.75rem; color: var(--muted); font-weight: 600; }
    .mi-duelo-progreso-wrap { display: flex; flex-direction: column; gap: 3px; }
    .mi-duelo-progreso-label { font-size: 0.7rem; color: var(--muted); }
    .mi-duelo-progreso-bar-outer { height: 4px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; }
    .mi-duelo-progreso-bar { height: 100%; background: var(--accion); border-radius: 2px; }
    .btn-share-mi { background: radial-gradient(ellipse 35% 60% at 18% 25%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.12) 45%, transparent 100%), linear-gradient(135deg, rgba(255,255,255,0.18), transparent 50%), linear-gradient(135deg, var(--accion-claro) 0%, var(--accion) 50%, var(--accion-oscuro) 100%); background-origin: border-box; background-repeat: no-repeat; border: none; color: #fff; font-family: var(--font); font-size: 0.78rem; font-weight: 700; padding: 6px 14px; border-radius: 50px; cursor: pointer; transition: filter 0.2s; flex-shrink: 0; box-shadow: 0 3px 10px rgba(163,71,212,0.4); }
    .btn-share-mi:hover { filter: brightness(1.1); }

    /* ─── VIEW: Explorar ─────────────────────────────────────────── */
    #view-explorar { width: 100%; max-width: 1100px; padding: 32px 16px; }
    .explorar-header { margin-bottom: 16px; }
    .explorar-titulo { font-size: 1.6rem; font-weight: 900; }
    .explorar-controles { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
    .controles-seccion { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .explorar-busqueda-wrap { position: relative; width: 100%; max-width: 480px; }
    .explorar-busqueda {
      width: 100%; background: var(--surface); border: 1px solid var(--border);
      color: var(--text); font-family: var(--font); font-size: 0.9rem;
      padding: 10px 36px 10px 16px; border-radius: var(--radius-btn);
      outline: none; transition: border-color 0.2s;
    }
    .explorar-busqueda:focus { border-color: rgba(163,71,212,0.6); }
    .explorar-busqueda::placeholder { color: var(--muted); }
    .explorar-busqueda-clear {
      position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
      background: none; border: none; color: var(--muted); cursor: pointer;
      font-size: 1rem; line-height: 1; padding: 4px; display: none;
      transition: color 0.15s;
    }
    .explorar-busqueda-clear:hover { color: var(--text); }
    .controles-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--muted); flex-shrink: 0; }
    .filtros { display: flex; gap: 8px; flex-wrap: wrap; }
    .filtros-select {
      display: none;
      background: var(--surface); border: 1px solid var(--border);
      color: var(--text); font-family: var(--font); font-size: 0.85rem;
      padding: 8px 12px; border-radius: var(--radius-btn);
      cursor: pointer; outline: none;
    }
    .filtros-select:focus { border-color: rgba(163,71,212,0.6); }
    @media (max-width: 600px) {
      .filtros-select { display: block; }
      #filtros { display: none; }
      /* Evita el auto-zoom de iOS al enfocar campos (Safari ignora user-scalable=no) */
      input, select, textarea { font-size: 16px !important; }
    }
    .filtro {
      background: var(--surface); border: 1px solid var(--border);
      color: var(--muted); font-family: var(--font); font-size: 0.78rem; font-weight: 600;
      padding: 6px 14px; border-radius: var(--radius-btn); cursor: pointer; transition: all 0.2s; text-transform: capitalize;
    }
    .filtro:hover { background: var(--surface-hover); color: var(--text); }
    .filtro.activo { background: rgba(163,71,212,0.15); border-color: var(--accion); color: var(--accion); }
    .filtro-extra {
      background: var(--surface); border: 1px solid var(--border);
      color: var(--muted); font-family: var(--font); font-size: 0.78rem; font-weight: 600;
      padding: 6px 14px; border-radius: var(--radius-btn); cursor: pointer; transition: all 0.2s;
    }
    .filtro-extra:hover { background: var(--surface-hover); color: var(--text); }
    .filtro-extra.activo { background: rgba(0,217,163,0.12); border-color: var(--accent); color: var(--accent); }
    .duelos-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 14px; }
    .duelo-card {
      background: var(--bg2); border: 1px solid var(--border);
      border-radius: var(--radius-card); overflow: hidden; cursor: pointer;
      text-decoration: none; color: var(--text);
      transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; display: flex; flex-direction: column;
    }
    .duelo-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.4); border-color: rgba(163,71,212,0.3); }
    .duelo-card-banner { height: 8px; background: linear-gradient(90deg,var(--a1),var(--b2)); }
    .duelo-card-body { padding: 16px; flex: 1; }
    .duelo-card-cat { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); margin-bottom: 6px; }
    .duelo-card-pregunta { font-size: 0.95rem; font-weight: 700; margin-bottom: 12px; line-height: 1.3; }
    .duelo-card-opciones { display: flex; gap: 6px; }
    .duelo-card-opc { flex: 1; padding: 8px 10px; border-radius: 10px; font-size: 0.78rem; font-weight: 600; text-align: center; color: #fff; }
    .duelo-card-opc-a { background: linear-gradient(135deg,var(--a1),var(--a2)); }
    .duelo-card-opc-b { background: linear-gradient(135deg,var(--b1),var(--b2)); }
    .duelo-card-footer { padding: 10px 16px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
    .duelo-card-votos { font-size: 0.72rem; color: var(--muted); font-weight: 600; }
    /* "Votado" → más discreto (sin borde, gris-verde tenue) */
    .voted-chip { background: transparent; color: rgba(0,217,163,0.55); font-size: 0.65rem; font-weight: 600; padding: 2px 6px; border-radius: 20px; }
    /* "Vota" → CTA llamativo en naranja con pulso muy sutil para invitar al click */
    .vota-cta {
      background: linear-gradient(135deg, #ff9100, #ff5e62);
      color: #fff; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.3px;
      padding: 4px 12px; border-radius: 20px;
      box-shadow: 0 2px 10px rgba(255,94,98,0.35);
      animation: vota-pulse 2.2s ease-in-out infinite;
    }
    @keyframes vota-pulse {
      0%, 100% { box-shadow: 0 2px 10px rgba(255,94,98,0.30); transform: translateZ(0) scale(1); }
      50%      { box-shadow: 0 2px 16px rgba(255,145,0,0.55); transform: translateZ(0) scale(1.04); }
    }
    /* Card sin votar: leve resalte sobre las votadas */
    .duelo-card.sinvotar { box-shadow: 0 0 0 1px rgba(255,145,0,0.08); }
    .duelo-card.yavoto   { opacity: 0.86; }
    .duelo-card.yavoto:hover { opacity: 1; }

    /* ─── Semáforo moderación ────────────────────────────────────── */
    .semaforo-mod { display: none; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 50px; border: 1px solid; font-size: 0.82rem; font-weight: 600; margin-bottom: 12px; transition: opacity 0.3s; }
    .semaforo-mod.visible { display: flex; }
    .semaforo-mod.verde    { background: rgba(0,217,163,0.08); border-color: rgba(0,217,163,0.3); color: var(--accent); }
    .semaforo-mod.amarillo { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.3); color: #f59e0b; }
    .semaforo-mod.rojo     { background: rgba(239,68,68,0.08);  border-color: rgba(239,68,68,0.3);  color: #ef4444; }

    /* ─── VIEW: Crear duelo ──────────────────────────────────────── */
    #view-crear { width: 100%; max-width: 640px; padding: 32px 16px; }
    .crear-titulo { font-size: 1.6rem; font-weight: 900; margin-bottom: 8px; }
    .crear-subtitulo { color: var(--muted); font-size: 0.88rem; margin-bottom: 28px; }
    .form-group { margin-bottom: 20px; }
    .form-label { display: block; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--muted); margin-bottom: 8px; }
    .form-input {
      width: 100%; background: var(--bg2); border: 1px solid var(--border); color: var(--text);
      font-family: var(--font); font-size: 1rem; font-weight: 600;
      padding: 14px 18px; border-radius: 14px; outline: none;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .form-input:focus { border-color: var(--accion); box-shadow: 0 0 0 3px rgba(163,71,212,0.15); }
    .form-input::placeholder { color: var(--muted); font-weight: 400; }

    .cat-pills { display: flex; flex-wrap: wrap; gap: 8px; }
    .cat-pill {
      background: var(--surface); border: 1px solid var(--border);
      color: var(--muted); font-family: var(--font); font-size: 0.78rem; font-weight: 600;
      padding: 6px 14px; border-radius: var(--radius-btn); cursor: pointer; transition: all 0.2s;
    }
    .cat-pill:hover { background: var(--surface-hover); color: var(--text); }
    .cat-pill.activa { background: rgba(163,71,212,0.2); border-color: var(--accion); color: var(--accion); }

    /* Emoji input row */
    .opcion-input-row { display: flex; gap: 10px; align-items: flex-start; }
    .emoji-btn-wrap { flex-shrink: 0; }
    .emoji-btn {
      width: 56px; height: 56px; border-radius: 14px; border: 1px solid var(--border);
      background: var(--bg2); font-size: 1.6rem; cursor: pointer; display: flex;
      align-items: center; justify-content: center; transition: border-color 0.2s, transform 0.15s;
    }
    .emoji-btn:hover { border-color: var(--accion); transform: scale(1.08); }
    .opcion-input-wrap { flex: 1; }

    /* Emoji suggestions */
    .emoji-suggestions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; min-height: 36px; align-items: center; }
    .emoji-badge-ia {
      font-size: 0.62rem; font-weight: 700; letter-spacing: 0.5px;
      background: rgba(163,71,212,0.15); border: 1px solid rgba(163,71,212,0.4);
      color: var(--accion); padding: 2px 7px; border-radius: 20px; white-space: nowrap; flex-shrink: 0;
    }
    .emoji-suggestion {
      font-size: 1.3rem; width: 36px; height: 36px; border-radius: 8px;
      background: var(--surface); border: 1px solid var(--border);
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      transition: background 0.15s, transform 0.15s;
    }
    .emoji-suggestion:hover { background: var(--surface-hover); transform: scale(1.15); }
    .sug-next {
      height: 28px; min-width: 26px; padding: 0 7px; border-radius: 8px; flex-shrink: 0;
      background: transparent; border: 1px dashed var(--border); color: var(--muted);
      font-size: 0.95rem; font-weight: 700; line-height: 1; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: color 0.15s, border-color 0.15s;
    }
    .sug-next:hover { color: var(--text); border-color: var(--muted); }

    /* Opcion cards preview */
    .opciones-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
    .preview-card { border-radius: 14px; padding: 16px; text-align: center; min-height: 80px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
    .preview-card-a { background: linear-gradient(145deg,var(--a1),var(--a2)); }
    .preview-card-b { background: linear-gradient(145deg,var(--b1),var(--b2)); }
    .preview-card span { font-size: 1.4rem; }
    .preview-card p { font-size: 0.85rem; font-weight: 700; color: rgba(255,255,255,0.9); }

    /* ─── Emoji Picker Modal ─────────────────────────────────────── */
    .picker-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 500;
      display: flex; align-items: flex-end; justify-content: center;
      opacity: 0; pointer-events: none; transition: opacity 0.25s;
    }
    .picker-overlay.open { opacity: 1; pointer-events: all; }
    .picker-modal {
      background: #1e1e36; border: 1px solid var(--border); border-radius: 24px 24px 0 0;
      width: 100%; max-width: 500px; max-height: 60dvh;
      display: flex; flex-direction: column;
      transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
    }
    .picker-overlay.open .picker-modal { transform: translateY(0); }
    .picker-handle { width: 40px; height: 4px; background: var(--border); border-radius: 2px; margin: 12px auto 0; }
    .picker-search-wrap { padding: 10px 16px 4px; }
    .picker-search {
      width: 100%; background: var(--surface); border: 1px solid var(--border);
      border-radius: 12px; color: var(--text); font-family: var(--font); font-size: 0.9rem;
      padding: 8px 14px 8px 36px; outline: none; transition: border-color 0.2s;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: 10px center;
    }
    .picker-search:focus { border-color: var(--accion); }
    .picker-search::placeholder { color: var(--muted); }
    .picker-no-results { text-align: center; color: var(--muted); font-size: 0.85rem; padding: 24px 0; }
    .picker-header { padding: 8px 16px 8px; display: flex; gap: 6px; flex-wrap: wrap; }
    .picker-cat-btn {
      background: var(--surface); border: 1px solid var(--border); color: var(--muted);
      font-family: var(--font); font-size: 0.7rem; font-weight: 600;
      padding: 4px 10px; border-radius: 20px; cursor: pointer; transition: all 0.15s;
    }
    .picker-cat-btn.activa { background: rgba(163,71,212,0.2); border-color: var(--accion); color: var(--accion); }
    .picker-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(44px,1fr)); gap: 4px; padding: 8px 16px 24px; overflow-y: auto; flex: 1; }
    .picker-emoji { font-size: 1.5rem; padding: 6px; border-radius: 10px; cursor: pointer; text-align: center; transition: background 0.1s, transform 0.1s; }
    .picker-emoji:hover { background: var(--surface-hover); transform: scale(1.2); }


    /* ─── Snackbar ───────────────────────────────────────────────── */
    #snackbar {
      position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(100px);
      background: #1e1e3a; border: 1px solid var(--border); color: var(--text);
      font-size: 0.85rem; font-weight: 600; padding: 12px 22px; border-radius: var(--radius-btn);
      box-shadow: 0 8px 24px rgba(0,0,0,0.4); transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
      z-index: 999; pointer-events: none;
      width: max-content; max-width: calc(100vw - 32px);
      white-space: normal; text-align: center; line-height: 1.4;
    }
    #snackbar.visible { transform: translateX(-50%) translateY(0); }

    /* ─── Chip "Créalo aquí" post-voto ───────────────────────────── */
    .chip-crear {
      margin: 14px auto 0; display: inline-flex; align-items: center; gap: 6px;
      background: rgba(163,71,212,0.1); border: 1px dashed rgba(163,71,212,0.45);
      color: var(--accion); font-family: var(--font); font-size: 0.82rem; font-weight: 600;
      padding: 8px 16px; border-radius: var(--radius-btn); cursor: pointer;
      transition: background 0.2s, border-color 0.2s, transform 0.15s;
    }
    .chip-crear:hover { background: rgba(163,71,212,0.2); border-color: var(--accion); transform: scale(1.02); }

    /* ─── Reportar ───────────────────────────────────────────────── */
    .btn-reportar {
      background: none; border: none; color: rgba(255,255,255,0.28); font-family: var(--font);
      font-size: 0.72rem; cursor: pointer; padding: 8px 14px; border-radius: var(--radius-btn);
      transition: color 0.2s; margin-top: 4px;
    }
    .btn-reportar:hover { color: #f87171; }

    /* ─── Share CTA creador ──────────────────────────────────────── */
    .share-cta-creador {
      margin-bottom: 12px; padding: 16px; border-radius: 14px;
      background: rgba(163,71,212,0.08); border: 1px solid rgba(163,71,212,0.25);
      text-align: center;
    }
    .share-cta-titulo { font-size: 0.9rem; font-weight: 700; color: var(--accion); margin-bottom: 4px; }
    .share-cta-votos { font-size: 0.82rem; font-weight: 600; color: var(--accent); margin-bottom: 6px; }
    .share-cta-sub { font-size: 0.78rem; color: var(--muted); margin-bottom: 12px; }
    .share-cta-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
    .btn-wa { background: #25d366; color: #fff; border: none; font-family: var(--font);
      font-size: 0.82rem; font-weight: 700; padding: 8px 16px; border-radius: var(--radius-btn);
      cursor: pointer; }
    .btn-wa:hover { background: #1ebe5c; }
    .progreso-votos-wrap { margin-top: 4px; }
    .progreso-votos-label { font-size: 0.72rem; color: var(--muted); margin-bottom: 5px; }
    .progreso-votos-bar-outer { height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; }
    .progreso-votos-bar { height: 100%; background: var(--accion); border-radius: 3px; transition: width 0.6s ease; }

    /* ─── Banner pendiente ───────────────────────────────────────── */
    .banner-pendiente {
      display: flex; align-items: center; gap: 10px; justify-content: space-between;
      background: rgba(163,71,212,0.1); border: 1px solid rgba(163,71,212,0.25);
      border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; font-size: 0.8rem;
    }
    .banner-pendiente-txt { color: var(--fg); flex: 1; text-align: center; }
    .banner-pendiente-txt strong { color: var(--accion); }
    .banner-pendiente-btns { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
    .btn-banner-share { background: linear-gradient(135deg,var(--accion-claro),var(--accion-oscuro)); color: #fff; border: none; font-family: var(--font);
      font-size: 0.75rem; font-weight: 700; padding: 5px 10px; border-radius: 8px; cursor: pointer; }
    .btn-banner-close { background: none; border: none; color: var(--muted); font-size: 1rem;
      cursor: pointer; padding: 2px 4px; line-height: 1; }

    /* ─── Utilities ──────────────────────────────────────────────── */
    .hidden { display: none !important; }
    .fade-out { animation: fadeOut 0.3s ease forwards; }
    .fade-in  { animation: fadeIn  0.4s ease forwards; }
    @keyframes fadeOut { to { opacity: 0; transform: translateY(-10px); } }
    @keyframes fadeIn  { from { opacity: 0; transform: translateY(10px); } }

    /* ─── Logo tagline ───────────────────────────────────────────── */
    .logo-wrap {
      display: flex; flex-direction: column; align-items: center; gap: 1px;
      cursor: pointer; user-select: none;
      transition: transform 0.2s ease, filter 0.2s ease;
      -webkit-tap-highlight-color: transparent;
    }
    .logo-wrap:hover { transform: scale(1.04); filter: brightness(1.08); }
    .logo-wrap:active { transform: scale(0.98); }
    .logo-wrap:focus-visible { outline: 2px solid var(--accion); outline-offset: 4px; border-radius: 6px; }
    .logo-tagline { font-size: 0.6rem; color: var(--muted); font-weight: 600; letter-spacing: 0.3px; white-space: nowrap; opacity: 0.7; }

    /* ─── Votos hoy badge ────────────────────────────────────────── */

    /* Trending badge — gradiente del logo (cian → morado → naranja)
       Es un botón que lleva al filtro trending en Explorar, pero solo se
       activa tras SKIP_DELAY_SECONDS (igual que "Saltar duelo") para evitar
       clics accidentales antes de leer el duelo. */
    .trending-badge {
      display: inline-flex; align-items: center; gap: 6px;
      margin: 14px auto 0;
      padding: 5px 14px;
      border-radius: var(--radius-btn);
      font-family: var(--font);
      font-weight: 900; font-size: 0.8rem; letter-spacing: 1.5px;
      text-transform: uppercase;
      background:
        linear-gradient(rgba(15,15,26,0.85), rgba(15,15,26,0.85)) padding-box,
        linear-gradient(135deg, #7dd6f7 0%, #a347d4 50%, #ff9100 100%) border-box;
      border: 1.5px solid transparent;
      animation: trending-pulse 2.4s ease-in-out infinite;
      cursor: default;
      pointer-events: none;
      transition: transform 0.18s ease-out, filter 0.18s ease-out;
      user-select: none; -webkit-tap-highlight-color: transparent;
    }
    .trending-badge.clickable { cursor: pointer; pointer-events: auto; }
    .trending-badge.clickable:hover  { transform: scale(1.05); filter: brightness(1.12); }
    .trending-badge.clickable:active { transform: scale(0.97); }
    .trending-label {
      background: linear-gradient(135deg, #7dd6f7 0%, #a347d4 50%, #ff9100 100%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
    }
    .trending-flame {
      font-size: 1em; line-height: 1;
      filter: drop-shadow(0 0 6px rgba(255,145,0,0.55));
      -webkit-text-fill-color: initial;
    }
    @keyframes trending-pulse {
      0%, 100% { box-shadow: 0 0 0 rgba(255,145,0,0); }
      50%      { box-shadow: 0 0 18px rgba(255,145,0,0.35); }
    }
    /* Badge en cards — esquina superior derecha */
    .duelo-card { position: relative; }
    .votos-hoy-badge { text-align: center; font-size: 0.72rem; font-weight: 600; color: var(--muted); margin: 10px auto 0; letter-spacing: 0.2px; }
    .votos-hoy-badge.trending { color: #ff9100; font-weight: 700; }

    .trending-badge-card {
      position: absolute; top: 12px; right: 8px; z-index: 2;
      display: inline-flex; align-items: center; gap: 3px;
      padding: 3px 8px;
      border-radius: 12px;
      font-family: var(--font);
      font-weight: 900; font-size: 0.6rem; letter-spacing: 1px;
      text-transform: uppercase;
      background:
        linear-gradient(rgba(15,15,26,0.92), rgba(15,15,26,0.92)) padding-box,
        linear-gradient(135deg, #7dd6f7 0%, #a347d4 50%, #ff9100 100%) border-box;
      border: 1px solid transparent;
      pointer-events: none;
    }
    .trending-badge-card .trending-label {
      background: linear-gradient(135deg, #7dd6f7 0%, #a347d4 50%, #ff9100 100%);
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .trending-badge-card .trending-flame {
      filter: drop-shadow(0 0 4px rgba(255,145,0,0.6));
      -webkit-text-fill-color: initial;
    }

    /* ─── Resultado social proof ─────────────────────────────────── */
    .resultado-social {
      width: 100%; text-align: center;
      font-size: clamp(1.3rem, 5vw, 1.8rem); font-weight: 900;
      padding: 18px 16px 4px; letter-spacing: -0.02em; line-height: 1.2;
      animation: entradaFrase 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
    }
    @keyframes entradaFrase {
      from { opacity: 0; transform: translateY(14px) scale(0.94); }
      to   { opacity: 1; transform: none; }
    }

    /* ─── Frase emocional modo overlay ──────────────────────────── */
    .resultado-social.overlay-frase {
      --frase-rotate: -15deg;
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      z-index: 20; pointer-events: none;
      font-size: clamp(1.8rem, 7.5vw, 2.8rem); font-weight: 900;
      letter-spacing: -0.02em; line-height: 1.2; text-align: center;
      animation: fraseOverlayActual 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
    }
    .resultado-social.overlay-frase.frase-ef-combate {
      animation: fraseOverlayCombate 0.55s cubic-bezier(0.34,1.56,0.64,1) both;
    }
    .resultado-social.overlay-frase.frase-ef-revelacion {
      animation: fraseOverlayRevelacion 0.65s cubic-bezier(0.34,1.56,0.64,1) both;
    }
    .resultado-social.overlay-frase.frase-ef-flash {
      animation: fraseOverlayFlash 0.45s ease-out both;
    }
    /* Texto en relieve: sin fondo, outline + sombra proyectada */
    .frase-pill {
      display: inline-block;
      transform: rotate(var(--frase-rotate, -15deg));
      -webkit-text-stroke: 2px rgba(0,0,0,0.75);
      text-shadow:
        -1px -1px 0 rgba(0,0,0,0.8),
         1px -1px 0 rgba(0,0,0,0.8),
        -1px  1px 0 rgba(0,0,0,0.8),
         1px  1px 0 rgba(0,0,0,0.8),
         4px  5px 10px rgba(0,0,0,0.95),
         0    8px 24px rgba(0,0,0,0.7);
    }
    @keyframes fraseOverlayActual {
      from { opacity: 0; transform: scale(0.82) translateY(24px); }
      to   { opacity: 1; transform: none; }
    }
    @keyframes fraseOverlayCombate {
      0%   { opacity: 0; transform: scale(0.45) translateY(80px); }
      70%  { opacity: 1; transform: scale(1.07) translateY(-14px); }
      100% { opacity: 1; transform: none; }
    }
    @keyframes fraseOverlayRevelacion {
      from { opacity: 0; transform: scale(0.15); }
      to   { opacity: 1; transform: none; }
    }
    @keyframes fraseOverlayFlash {
      0%   { opacity: 0; transform: scale(2.2); }
      50%  { opacity: 1; transform: scale(0.95); }
      100% { opacity: 1; transform: none; }
    }
    @keyframes vibracion {
      0%,100% { transform: translateX(0); }
      10%     { transform: translateX(-4px) rotate(-0.5deg); }
      20%     { transform: translateX(4px)  rotate( 0.5deg); }
      30%     { transform: translateX(-4px) rotate(-0.5deg); }
      40%     { transform: translateX(4px)  rotate( 0.5deg); }
      55%     { transform: translateX(-3px) rotate(-0.3deg); }
      65%     { transform: translateX(3px)  rotate( 0.3deg); }
      80%     { transform: translateX(-1px); }
      90%     { transform: translateX(1px); }
    }
    @keyframes vibracionSuave {
      0%,100% { transform: translateX(0); }
      20%     { transform: translateX(-3px) rotate(-0.3deg); }
      40%     { transform: translateX(3px)  rotate( 0.3deg); }
      60%     { transform: translateX(-2px); }
      80%     { transform: translateX(2px); }
    }
    @keyframes reminderManos {
      0%,100%  { transform: translateY(0) scale(1); }
      40%,60%  { transform: translateY(-8px) scale(1.15); }
    }
    @keyframes reminderLatido {
      0%,100%  { transform: scale(1); }
      10%      { transform: scale(1.07); }
      20%      { transform: scale(1); }
      30%      { transform: scale(1.04); }
      45%      { transform: scale(1); }
    }
    @keyframes reminderDestello {
      0%,100%  { text-shadow: 0 0 0 transparent; filter: brightness(1); }
      50%      { text-shadow: 0 0 18px rgba(239,68,68,0.75); filter: brightness(1.35); }
    }
    .msg-presion .r-hand {
      display: inline-block;
      animation: reminderManos var(--r-dur, 1.1s) 0.9s ease-in-out infinite;
    }

    /* ─── Animaciones de entrada de duelo ───────────────────────── */
    @keyframes introBlurSharp {
      from { opacity: 0; filter: blur(10px); transform: scale(0.97); }
      to   { opacity: 1; filter: blur(0);    transform: none; }
    }
    @keyframes introScalePop {
      from { opacity: 0; transform: scale(0.2); }
      65%  { transform: scale(1.18); }
      to   { opacity: 1; transform: scale(1); }
    }
    @keyframes introSlideLeft {
      from { opacity: 0; transform: translateX(-45px); }
      to   { opacity: 1; transform: none; }
    }
    @keyframes introSlideRight {
      from { opacity: 0; transform: translateX(45px); }
      to   { opacity: 1; transform: none; }
    }
    @keyframes introSlideUp {
      from { opacity: 0; transform: translateY(28px) scale(0.95); }
      to   { opacity: 1; transform: none; }
    }
    @keyframes introFlash {
      0%  { opacity: 0; }
      25% { opacity: 1; }
      45% { opacity: 0.45; }
      65% { opacity: 1; }
      82% { opacity: 0.7; }
      to  { opacity: 1; }
    }
    @keyframes introFadeIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    @keyframes introImpacto {
      from { opacity: 0; transform: scale(0.35); }
      55%  { transform: scale(1.14); }
      78%  { transform: scale(0.96); }
      to   { opacity: 1; transform: scale(1); }
    }
    @keyframes introGlitch {
      0%       { opacity: 0; transform: translate(0,0); text-shadow: none; }
      8%       { opacity: 1; transform: translate(-5px,0); text-shadow: 5px 0 #f00,-5px 0 #0ff; }
      14%      { transform: translate(5px,0);  text-shadow: -5px 0 #f00, 5px 0 #0ff; }
      20%      { transform: translate(-4px,0); text-shadow: 4px 0 #f0f,-4px 0 #0ff; }
      26%      { transform: translate(4px,0);  text-shadow: none; }
      32%      { transform: translate(-2px,0); }
      38%,100% { transform: translate(0,0); opacity: 1; text-shadow: none; }
    }
    @keyframes introZoom {
      from { opacity: 0; transform: scale(3.2); }
      55%  { opacity: 1; transform: scale(0.94); }
      to   { opacity: 1; transform: scale(1); }
    }
    @keyframes introCaida {
      from { opacity: 0; transform: translateY(-70px) scale(1.08); }
      55%  { transform: translateY(12px) scale(0.97); }
      75%  { transform: translateY(-6px) scale(1.01); }
      90%  { transform: translateY(3px); }
      to   { opacity: 1; transform: none; }
    }

    /* ─── Hint primera visita ────────────────────────────────────── */
    .hint-toca { text-align: center; font-size: 0.78rem; color: var(--muted); font-weight: 600; margin: 10px 0 0; letter-spacing: 0.3px; animation: pulseHint 2s ease-in-out infinite; }
    @keyframes pulseHint { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.9; } }

    /* ─── Borrar votos ───────────────────────────────────────────── */
    .btn-borrar-votos {
      background: none; border: none; color: var(--muted); font-family: var(--font);
      font-size: 0.72rem; cursor: pointer; padding: 0;
      text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px;
    }
    .btn-borrar-votos:hover { color: #ef4444; }

    /* ─── Animación aparición secuencial de botones ─────────────── */
    @keyframes aparecerBtn {
      from { opacity: 0; transform: translateY(16px) scale(0.95); }
      to   { opacity: 1; transform: translateY(0)    scale(1); }
    }
    .postvoto-oculto {
      opacity: 0 !important;
      transform: translateY(16px) scale(0.95) !important;
      pointer-events: none !important;
      transition: none !important;
      animation: none !important;
    }
    .postvoto-aparece {
      animation: aparecerBtn 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }
    /* btn-compartir (pre-voto): aparece con retraso igual que btn-siguiente */
    #acciones .btn-compartir {
      opacity: 0;
      pointer-events: none;
      transform: translateY(10px) scale(0.97);
      transition: none;
    }
    #acciones .btn-compartir.compartir-visible {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0) scale(1);
      animation: aparecerBtn 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    /* ─── Espaciado uniforme post-voto ───────────────────────────── */
    /* btn-retar (pad 12px) → chip-crear (pad 8px) → btn-siguiente (pad 6px):
       el gap visual sería 30/24px. Compensamos con margin-top extra en siguiente. */
    #acciones-postVoto .btn-siguiente { margin-top: 14px; }
    /* ─── Jerarquía dinámica de botones post-voto ────────────────── */
    /* Etapa 2 (medio): retar y siguiente al mismo nivel */
    body[data-jerarquia="2"] #acciones-postVoto .btn-retar {
      background: var(--surface); border: 1px solid var(--border); color: var(--text);
      box-shadow: none; font-size: 0.85rem; padding: 12px 22px; font-weight: 700;
    }
    body[data-jerarquia="2"] #acciones-postVoto .btn-siguiente.sig-visible {
      background: var(--surface) !important; border: 1px solid var(--border) !important;
      color: var(--text) !important; font-size: 0.85rem !important;
      font-weight: 700 !important; padding: 12px 22px !important;
    }
    /* Etapa 3 (recurrente): siguiente destacado, retar secundario */
    body[data-jerarquia="3"] #acciones-postVoto .btn-retar {
      background: var(--surface); border: 1px solid var(--border); color: var(--text);
      box-shadow: none; font-size: 0.85rem; padding: 12px 22px; font-weight: 700;
    }
    body[data-jerarquia="3"] #acciones-postVoto .btn-siguiente.sig-visible {
      background: radial-gradient(ellipse 35% 50% at 18% 20%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.12) 45%, transparent 100%), linear-gradient(135deg, rgba(255,255,255,0.18), transparent 45%), linear-gradient(135deg, var(--accion-claro) 0%, var(--accion) 50%, var(--accion-oscuro) 100%) !important;
      background-origin: border-box !important; background-repeat: no-repeat !important;
      color: #fff !important; box-shadow: 0 6px 18px rgba(163,71,212,0.45) !important;
      font-size: 0.9rem !important; padding: 14px 28px !important;
      font-weight: 800 !important; border: none !important;
    }
    body[data-jerarquia="3"] #acciones-postVoto .btn-siguiente.sig-visible:hover {
      color: #fff !important;
    }

    /* ─── Sponsor banner ─────────────────────────────────────────── */
    .sponsor-banner {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 5px 14px; border-radius: var(--radius-btn);
      border: 1px solid rgba(255,255,255,0.07);
      white-space: nowrap;
    }
    .sponsor-banner.hidden { display: none; }
    .sponsor-label { color: var(--muted); font-size: 0.72rem; letter-spacing: 0.04em; font-weight: 600; }
    .sponsor-logo { height: 18px; max-width: 70px; object-fit: contain; border-radius: 3px; }
    #sponsor-emoji-el { font-size: 1rem; line-height: 1; }
    #sponsor-texto-el { font-size: 0.72rem; font-weight: 700; color: var(--text); letter-spacing: 0.02em; }

    /* ─── Age gate ───────────────────────────────────────────────── */
    .age-gate-overlay {
      position: fixed; inset: 0; background: rgba(15,15,26,0.97);
      z-index: 900; display: flex; align-items: center; justify-content: center; padding: 24px;
    }
    .age-gate-overlay.hidden { display: none; }
    .age-gate-box {
      max-width: 400px; width: 100%; text-align: center;
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 24px; padding: 40px 28px;
    }
    .age-gate-icon { font-size: 3rem; margin-bottom: 14px; }
    .age-gate-title { font-size: 1.25rem; font-weight: 800; margin-bottom: 12px; }
    .age-gate-desc { color: var(--muted); font-size: 0.88rem; line-height: 1.65; margin-bottom: 28px; }
    .age-gate-actions { display: flex; flex-direction: column; gap: 10px; }
    .age-gate-actions .btn { width: 100%; justify-content: center; }
    .age-gate-actions .btn:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }

    /* ─── Footer ─────────────────────────────────────────────────── */
    footer { position: relative; z-index: 1; text-align: center; padding: 14px 20px; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.72rem; line-height: 1.8; }
    footer a { color: var(--accent); text-decoration: none; }
    footer a:hover { text-decoration: underline; text-decoration-style: dotted; }
    .footer-links { margin-bottom: 2px; }
    .footer-actions { }
    .btn-footer-link {
      background: none; border: none; color: var(--accent); font-family: var(--font);
      font-size: 0.72rem; cursor: pointer; padding: 0;
    }
    .btn-footer-link:hover { text-decoration: underline; text-decoration-style: dotted; }

    /* ─── Modal de info (Términos / Acerca de) ───────────────────── */
    .info-modal-overlay {
      position: fixed; inset: 0; background: rgba(15,15,26,0.92);
      z-index: 950; display: flex; align-items: center; justify-content: center; padding: 20px;
    }
    .info-modal-overlay.hidden { display: none; }
    .info-modal-box {
      max-width: 600px; width: 100%; max-height: 82vh; display: flex; flex-direction: column;
      background: var(--surface); border: 1px solid var(--border); border-radius: 20px; overflow: hidden;
    }
    .info-modal-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 18px 22px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0;
    }
    .info-modal-title { font-size: 0.95rem; font-weight: 700; }
    .info-modal-close {
      background: none; border: none; color: var(--muted); font-size: 1.1rem;
      cursor: pointer; padding: 4px 8px; border-radius: 8px; line-height: 1;
    }
    .info-modal-close:hover { color: var(--text); background: var(--border); }
    .info-modal-body {
      overflow-y: auto; padding: 20px 22px 28px; font-size: 0.82rem;
      line-height: 1.75; color: var(--muted);
    }
    .info-modal-body h2 { font-size: 0.95rem; font-weight: 800; color: var(--text); margin: 22px 0 8px; }
    .info-modal-body h2:first-child { margin-top: 0; }
    .info-modal-body h3 { font-size: 0.84rem; font-weight: 700; color: var(--text); margin: 16px 0 6px; }
    .info-modal-body p { margin: 0 0 10px; }
    .info-modal-body ul { margin: 0 0 10px; padding-left: 18px; }
    .info-modal-body li { margin-bottom: 5px; }
    .info-modal-body strong { color: var(--text); }
    .info-modal-body a { color: var(--accent); text-decoration: none; }
    .info-modal-body a:hover { text-decoration: underline; }
    .info-modal-body hr { border: none; border-top: 1px solid var(--border); margin: 24px 0; }
    .info-modal-footer {
      display: flex; gap: 10px; padding: 14px 22px 18px;
      border-top: 1px solid var(--border); flex-shrink: 0;
    }
    .info-modal-footer .btn { flex: 1; }
    .btn-danger {
      background: linear-gradient(135deg, #ef4444, #b91c1c);
      color: #fff; border: none;
    }
    .btn-danger:hover { filter: brightness(1.12); }

    /* ─── Responsive ─────────────────────────────────────────────── */
    @media (max-width: 500px) {
      .opcion { min-height: 160px; padding: 20px 14px; }
      .opcion-emoji { font-size: 2.8rem; }
      .vs-badge { width: 36px; height: 36px; font-size: 0.65rem; }
    }
    @media (max-width: 360px) {
      .opciones { grid-template-columns: 1fr; }
      .vs-badge { display: none; }
      .opciones-preview { grid-template-columns: 1fr; }
    }