.hero-torneo{
            background: #0a2342; /* azul marino */
            color:#fff; border-radius:16px; padding:24px; 
                border:2px solid #08F7FE; /* contorneo azul neón */
            box-shadow:0 0 0 4px rgba(8,247,254,.15), 0 10px 24px rgba(0,0,0,.15);
            position:relative; overflow:hidden;
        }
        .hero-torneo:after{ content:""; position:absolute; inset:auto -40px -40px auto; width:220px; height:220px; border-radius:50%; background: radial-gradient(circle at center, rgba(8,247,254,.35), rgba(8,247,254,0) 60%); filter:blur(2px); }
    .hero-logo{ width:96px; height:96px; border-radius:14px; background:transparent; display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow:none; }
    .hero-logo img{ max-width:100%; max-height:100%; object-fit:contain; box-sizing:border-box; }
    /* Bubble wrapper for logo to keep contrast */
    .hero-logo .tournament-logo-wrap{ display:inline-block; padding:8px; border-radius:14px; background: rgba(255, 255, 255, 0.2); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border:1px solid rgba(255, 255, 255, 0.24); }
    .hero-logo .tournament-logo-wrap img{ width:64px; height:64px; object-fit:contain; display:block; }
    @media (max-width: 600px) {
        .hero-torneo .d-flex {
            flex-direction: column !important;
            align-items: center !important;
            text-align: center !important;
            gap: 3px !important;
            font-size: 0.7rem;
        }

        #torname {
            font-size: 1.2rem !important;
        }

        .hero-torneo .flex-grow-1 { width: 100%; }
        .hero-logo { margin: 0 auto !important; }
        .hero-logo .tournament-logo-wrap{ padding:10px; border-radius:50% !important; }
          /* Ajustes para que SOLO las leyendas de estado (activo), categorías y equipos
              queden en la misma fila y ocupen todo el ancho del contenedor en móvil.
              Se ha agregado un contenedor `.meta-chips-right` que agrupa esos 3 badges. */
          .meta-chips-right { display:flex; gap:8px; width:100%; }
          /* Allow the three right-side chips to size naturally and avoid clipping.
              Use padding instead of forcing ellipsis so small screens still show content. */
          .meta-chips-right > .meta-chip { flex: 1 1 auto; min-width: 0; justify-content: center; text-align: center; padding:6px 12px; white-space: nowrap; box-sizing: border-box; }
          .meta-chip { display: inline-flex; }
    }
    .hero-logo.has-image img{ border:none; box-shadow:none; }
    .hero-title{ margin:0; font-weight:800; letter-spacing:.2px; }
    .hero-desc{ margin:4px 0 10px 0; opacity:.95; }
    .meta-chips{ display:flex; flex-wrap:wrap; gap:8px; }
    .meta-chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.1); border:1px solid rgba(8,247,254,.35); color:#eaf7ff; font-weight:600; }
            .meta-chip i{ color:#08F7FE; }
        .section-card{ border:1px solid rgba(8,247,254,.35); border-radius:14px; overflow:hidden; box-shadow:0 10px 24px rgba(0,0,0,.08); }
    .section-card .card-header{ background: linear-gradient(135deg, #c2c2c2ff, #eaf2ff); border-bottom:1px solid rgba(8,247,254,.2); }
    /* Cards de categoría elegantes y profesionales */
    .category-card{
        background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(248,251,255,0.98) 100%);
        border: 1px solid rgba(8,247,254,.25);
        border-radius:16px;
        box-shadow: 0 8px 32px rgba(10, 35, 66, 0.08), 0 4px 16px rgba(8, 247, 254, 0.12);
        transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
        backdrop-filter: blur(10px);
    }
    .category-card::before{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #0a2342 0%, #08F7FE 50%, #00cfff 100%);
        opacity: 0.8;
    }
    .category-card:hover{
        box-shadow: 0 20px 60px rgb(10, 35, 66), 0 8px 12px rgb(8, 246, 254);
        border-color: rgb(8, 246, 254);
    }
    .category-card:hover::before{
        opacity: 1;
        height: 5px;
    }
    .badge-info-soft{ background:rgba(13,110,253,.1); color:#0d6efd; border:1px solid rgba(13,110,253,.25); }
    .badge-elim{ background:rgba(255,193,7,.12); color:#c88a00; border:1px solid rgba(255,193,7,.35); }
    .btn-navy{ background:#0a2342; border:1px solid #0a2342; color:#fff; }
    .btn-navy:hover{ background:#0d2245; border-color:#0d2245; }
            .btn-neon{ background:#08F7FE; border:1px solid #06c3ca; color:#0a2342; }
        .btn-neon:hover{ background:#7ef9ff; border-color:#08F7FE; color:#08243f; }
    .subtle{ color:#0a2342; opacity:.9; }
    .text-navy{ color:#0a2342 !important; }