*{margin:0;padding:0;box-sizing:border-box}
    body,html{
      width:100%;
      min-height:100vh;
      background-color:#030303;
      overflow-x:hidden;
      font-family:'Rajdhani',sans-serif;
      color:#fff;
    }
    input,button,select,textarea{
      font-family:'Rajdhani',sans-serif;
    }

    /* ========== FONDO REPLICA (global + partículas) ========== */
    body{ background-color:#030303; line-height:1.6; }
    body::before{
      content:"";
      position:fixed;
      top:-100px;
      left:-100px;
      width:500px;
      height:500px;
      border-radius:50%;
      filter:blur(120px);
      opacity:.2;
      background:#FFE000;
      animation:replicaFloat 20s infinite ease-in-out;
      z-index:1;
      pointer-events:none;
    }
    body::after{
      content:"";
      position:fixed;
      bottom:-100px;
      right:-100px;
      width:500px;
      height:500px;
      border-radius:50%;
      filter:blur(120px);
      opacity:.18;
      background:#FFE000;
      animation:replicaFloat 25s infinite ease-in-out reverse;
      z-index:1;
      pointer-events:none;
    }
    @keyframes replicaFloat{
      0%,100%{ transform:translate(0,0); }
      50%{ transform:translate(50px,50px); }
    }
    .bg-wrapper{
      position:fixed;
      inset:0;
      background-color:#030303;
      background-image:
        radial-gradient(circle at 0% 0%, rgba(255, 212, 0, 0.14) 0%, transparent 45%),
        radial-gradient(circle at 100% 100%, rgba(255, 212, 0, 0.08) 0%, transparent 48%),
        linear-gradient(rgba(255, 224, 0, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 224, 0, 0.055) 1px, transparent 1px);
      background-size:100% 100%, 100% 100%, 62px 62px, 62px 62px;
      z-index:0;
      pointer-events:none;
    }
    #particles-js{
      position:absolute;
      inset:0;
      z-index:2;
      pointer-events:none;
    }
    #particles-js canvas{
      opacity:.95;
    }

    /* ========== SVG ICONS ========== */
    .svg-icon{width:60px;height:60px;margin-bottom:20px;filter:drop-shadow(0 0 10px rgba(255,215,0,.5))}
    .svg-icon-large{width:80px;height:80px}
    .svg-icon-small{width:48px;height:48px}

    /* ========== NAVBAR ========== */

    /* --- Dropdown "Más..." --- */
    .more-menu{position:relative; display:flex; align-items:center;}
    .more-btn{display:flex; align-items:center; gap:8px;}
    .more-btn .chev{opacity:.9; font-size:.9em;}
    .more-dropdown{
      position:absolute;
      top: calc(100% + 10px);
      right: 0;
      min-width: 200px;
      padding: 10px;
      border-radius: 16px;
      background: rgba(8,8,10,.88);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255,215,0,.20);
      box-shadow: 0 18px 45px rgba(0,0,0,.55), 0 0 28px rgba(255,215,0,.08);
      display:none;
      z-index: 9999;
    }
    .more-dropdown.open{display:block; animation: dropIn .16s ease-out;}
    @keyframes dropIn{from{transform:translateY(-6px);opacity:0}to{transform:translateY(0);opacity:1}}
    .more-item{
      display:block;
      padding: 10px 12px;
      border-radius: 12px;
      color:#fff;
      text-decoration:none;
      letter-spacing:1.4px;
      font-weight:800;
      text-transform:uppercase;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.04);
    }
    .more-item:hover{
      background: rgba(255,215,0,.12);
      border-color: rgba(255,215,0,.30);
    }

    .navbar{
      position:fixed;top:0;left:0;width:100%;height:86px;
      background:rgba(0,0,0,.86);
      backdrop-filter:blur(10px);
      border-bottom:2px solid #FFD700;
      z-index:1000;
      display:flex;align-items:center;
      padding:0 5%;
      box-shadow:0 4px 25px rgba(255,215,0,.25);
      gap:18px;
    }

    .brand{
      display:flex;align-items:center;gap:12px;min-width:max-content;
      cursor:pointer;user-select:none;
    }
    .brand-badge{
      width:38px;height:38px;border-radius:12px;
      background:linear-gradient(135deg,#FFFF00,#FFD700);
      box-shadow:0 0 20px rgba(255,215,0,.45);
      display:grid;place-items:center;color:#000;font-weight:900;
      position:relative;overflow:hidden;
    }
    .brand-badge::before{
      content:'';
      position:absolute;inset:-40%;
      background:conic-gradient(from 180deg, rgba(255,255,0,.0), rgba(255,215,0,.25), rgba(255,235,59,.22), rgba(255,255,0,.0));
      animation:spin 3.2s linear infinite;
    }
    .brand-badge span{position:relative;z-index:1}
    .brand-title{
      font-weight:900;
      letter-spacing:3px;
      text-transform:uppercase;
      color:#FFFF00;
      text-shadow:0 0 16px rgba(255,215,0,.55);
      line-height:1;
    }
    .brand-sub{
      font-size:.78rem;color:#FFD700;opacity:.9;letter-spacing:1px
    }
    @keyframes spin{to{transform:rotate(360deg)}}

    /*
      IMPORTANTE:
      - En desktop, cuando el usuario se loguea, el menú crece y puede desbordar.
      - Para que NO se “corte” (y puedas desplazarte), hacemos que el menú sea
        un contenedor flexible con scroll horizontal.
    */
    .nav-spacer{display:none}

    .nav-left{
      display:flex;gap:14px;align-items:center;
      flex:1 1 auto;min-width:0;
      justify-content:center;
      flex-wrap:nowrap;
      overflow-x:auto;overflow-y:hidden;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
    }
    .nav-left::-webkit-scrollbar{display:none;}
    .nav-item{
      color:#FFFF00;text-decoration:none;font-size:1.05rem;font-weight:900;
      text-transform:uppercase;letter-spacing:2px;
      position:relative;padding:10px 18px;cursor:pointer;
      transition:transform .22s ease, box-shadow .22s ease, color .22s ease;
      border-radius:14px;
      background:rgba(0,0,0,.25);
      border:1px solid rgba(255,215,0,.35);
      box-shadow:0 0 18px rgba(255,215,0,.12);
      isolation:isolate;
    }
    /* Borde neon constante */
    .nav-item::before{
      content:'';
      position:absolute;inset:-2px;
      border-radius:16px;
      background:conic-gradient(from 180deg,
        rgba(255,255,0,.0),
        rgba(255,215,0,.65),
        rgba(255,235,59,.18),
        rgba(255,215,0,.16),
        rgba(255,255,0,.0)
      );
      filter:blur(8px);
      opacity:.75;
      animation:spin 4s linear infinite;
      z-index:-2;
    }
    /* Fondo interno para que el borde se vea pro */
    .nav-item::after{
      content:'';
      position:absolute;inset:1px;
      border-radius:13px;
      background:rgba(0,0,0,.65);
      z-index:-1;
      transition:background .22s ease;
    }
    /* Hover: cambio de color (sin efectos raros) */
    .nav-item:hover{
      color:#000;
      transform:translateY(-2px);
      box-shadow:0 0 28px rgba(255,215,0,.35), 0 0 40px rgba(255,235,59,.10);
    }
    .nav-item:hover::after{
      background:linear-gradient(135deg,#FFFF00,#FFD700);
    }
    /* Active: se queda resaltado */
    .nav-item.active{
      color:#000;
    }
    .nav-item.active::after{
      background:linear-gradient(135deg,#FFFF00,#FFD700);
    }
.nav-right{display:flex;gap:12px;align-items:center;flex:0 0 auto}

    .btn-auth{
      padding:12px 26px;border:2px solid rgba(255,255,0,.9);
      background:rgba(0,0,0,.15);
      color:#FFFF00;font-size:1rem;font-weight:900;
      text-transform:uppercase;cursor:pointer;
      position:relative;overflow:hidden;
      transition:transform .25s ease, box-shadow .25s ease, color .25s ease, border-color .25s ease;
      border-radius:14px;
      letter-spacing:1px;
      box-shadow:0 0 18px rgba(255,215,0,.18);
      isolation:isolate;
    }
    .btn-auth::before{
      content:'';
      position:absolute;inset:-35%;
      background:conic-gradient(from 180deg, rgba(255,255,0,.0), rgba(255,215,0,.75), rgba(255,235,59,.28), rgba(255,215,0,.24), rgba(255,255,0,.0));
      animation:spin 2.6s linear infinite;
      opacity:.0;
      transition:opacity .25s ease;
      z-index:-2;
    }
    .btn-auth::after{
      content:'';
      position:absolute;inset:2px;border-radius:12px;
      background:rgba(0,0,0,.55);
      z-index:-1;
    }
    .btn-auth:hover{
      transform:translateY(-2px) scale(1.05);
      box-shadow:0 0 32px rgba(255,215,0,.45), 0 0 55px rgba(255,235,59,.12);
      border-color:#FFD700;
      color:#000;
    }
    .btn-auth:hover::before{opacity:1}
    .btn-register{
      background:linear-gradient(135deg,#FFFF00,#FFD700);
      color:#000;border:none;
      box-shadow:0 0 25px rgba(255,215,0,.45), 0 0 22px rgba(255,0,255,.10);
    }
    .btn-register::after{background:transparent}
    .btn-register:hover{box-shadow:0 0 45px rgba(255,215,0,.75), 0 0 55px rgba(255,235,59,.15)}
    .btn-register:hover{color:#000}

    /* ========== HAMBURGER BUTTON (MOBILE ONLY) ========== */
    .nav-hamburger{
      display:none;
      background:rgba(255,215,0,.1);
      border:2px solid #FFD700;
      cursor:pointer;
      color:#FFFF00;font-size:1.6rem;
      padding:8px 14px;line-height:1;
      z-index:1001;
      border-radius:10px;
      transition:all .2s ease;
      box-shadow:0 0 15px rgba(255,215,0,.2);
    }
    .nav-hamburger:hover{
      color:#000;
      background:linear-gradient(135deg,#FFFF00,#FFD700);
      transform:scale(1.1);
      box-shadow:0 0 25px rgba(255,215,0,.5);
    }

    /* ========== SIDEBAR MENU (MOBILE ONLY) ========== */
    .sidebar-overlay{
      position:fixed;top:0;left:0;width:100%;height:100%;
      background:rgba(0,0,0,.75);
      backdrop-filter:blur(8px);
      z-index:1001;
      opacity:0;visibility:hidden;
      transition:all 0.3s ease;
    }
    .sidebar-overlay.active{
      opacity:1;visibility:visible;
    }

    .sidebar-menu{
      position:fixed;top:0;right:-290px;
      width:260px;height:100vh;
      background:linear-gradient(180deg, rgba(0,0,0,.98) 0%, rgba(15,15,15,.96) 100%);
      z-index:1002;
      overflow-y:auto;
      transition:right 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      padding:100px 0 40px 0;
      border-left:3px solid #FFD700;
      box-shadow:-15px 0 50px rgba(255,215,0,.25), inset 0 0 40px rgba(255,215,0,.08);
    }
    .sidebar-menu.active{right:0;}
    .sidebar-menu::-webkit-scrollbar{
      width:6px;
    }
    .sidebar-menu::-webkit-scrollbar-thumb{
      background:rgba(255,215,0,.4);
      border-radius:3px;
    }
    .sidebar-menu::-webkit-scrollbar-thumb:hover{
      background:rgba(255,215,0,.7);
    }

    .sidebar-close{
      position:absolute;top:20px;right:20px;
      background:rgba(255,215,0,.1);
      border:2px solid #FFD700;
      color:#FFFF00;font-size:1.6rem;
      cursor:pointer;padding:8px 12px;
      transition:all .2s ease;
      border-radius:8px;
      width:40px;height:40px;
      display:flex;align-items:center;
      justify-content:center;
      box-shadow:0 0 15px rgba(255,215,0,.2);
    }
    .sidebar-close:hover{
      color:#000;
      background:linear-gradient(135deg,#FFFF00,#FFD700);
      transform:rotate(90deg) scale(1.1);
      box-shadow:0 0 25px rgba(255,215,0,.5);
    }

    .sidebar-menu-item{
      display:block;
      padding:16px 20px;
      color:#FFFF00;text-decoration:none;
      font-size:1.05rem;font-weight:800;
      text-transform:uppercase;
      letter-spacing:1.5px;
      border-bottom:1px solid rgba(255,215,0,.2);
      transition:all .25s ease;
      border-left:4px solid transparent;
      position:relative;
      background:rgba(255,215,0,.02);
    }
    .sidebar-menu-item:before{
      content:'';
      position:absolute;left:0;top:0;bottom:0;
      width:4px;background:linear-gradient(180deg,#FFFF00,#FFD700);
      transform:scaleY(0);
      transform-origin:top;
      transition:transform .25s ease;
    }
    .sidebar-menu-item:hover{
      background:linear-gradient(90deg, rgba(255,215,0,.15) 0%, rgba(255,255,0,.05) 100%);
      padding-left:24px;
      text-shadow:0 0 12px rgba(255,215,0,.6);
      box-shadow:inset 0 0 20px rgba(255,215,0,.1);
    }
    .sidebar-menu-item:hover:before{
      transform:scaleY(1);
    }

    /* ========== MEDIA QUERIES PARA MOBILE ========== */
    /* ========== CONTENIDO PRINCIPAL ========== */
    .main-content{
  position:relative;
  z-index:5;
  padding-top:86px;
  min-height:100vh;

  /* ✅ espacio para que el widget fijo NO tape botones */
  padding-bottom:140px;
}

    .section{display:none;padding:60px 5%;animation:fadeIn .5s ease}
    .section.active{display:block}
    .section-overlay{position:fixed;top:86px;left:0;right:0;bottom:0;overflow-y:auto;overflow-x:hidden;padding:60px 5%;z-index:50;}
    body.section-locked{overflow:hidden;}
    @keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

    /* ========== HERO SECTION ========== */
    .hero{
      min-height:calc(100vh - 86px);
      display:flex;flex-direction:column;justify-content:center;align-items:center;
      text-align:center;padding:90px 5% 70px;
    }
    .hero h1{
      font-size:5rem;color:#FFFF00;text-transform:uppercase;letter-spacing:15px;
      text-shadow:0 0 30px rgba(255,215,0,.8), 0 0 60px rgba(255,215,0,.4);
      margin-bottom:16px;animation:glowPulse 2s infinite;
    }
    @keyframes glowPulse{
      0%,100%{text-shadow:0 0 30px rgba(255,215,0,.8), 0 0 60px rgba(255,215,0,.4)}
      50%{text-shadow:0 0 45px rgba(255,215,0,1), 0 0 90px rgba(255,215,0,.55)}
    }
    .hero p{
      font-size:1.45rem;color:#FFD700;max-width:920px;margin-bottom:28px;line-height:1.85;
    }

    .hero-highlights{
      display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
      margin:10px 0 34px;
      max-width:980px;
    }
    .pill{
      padding:10px 16px;border-radius:999px;
      border:1px solid rgba(255,215,0,.7);
      background:rgba(20,20,20,.55);
      color:#fff;letter-spacing:.5px;
      box-shadow:0 0 20px rgba(255,215,0,.12);
      position:relative;overflow:hidden;
    }
    .pill strong{color:#FFFF00}
    .pill::before{
      content:'';
      position:absolute;inset:-60%;
      background:radial-gradient(circle, rgba(255,255,0,.20), transparent 55%);
      opacity:.8;
      animation:floatGlow 4.2s ease-in-out infinite;
    }
    @keyframes floatGlow{0%,100%{transform:translate(-8px,-6px)}50%{transform:translate(8px,6px)}}

    .cta-button{
      padding:18px 48px;font-size:1.2rem;
      background:linear-gradient(135deg,#FFFF00,#FFD700);
      color:#000;border:none;border-radius:999px;
      cursor:pointer;font-weight:900;text-transform:uppercase;
      letter-spacing:2px;
      box-shadow:0 12px 44px rgba(255,215,0,.5), 0 0 26px rgba(255,235,59,.10);
      transition:transform .25s ease, box-shadow .25s ease;
      position:relative;overflow:hidden;
    }
    .cta-button::before{
      content:'';
      position:absolute;inset:-40%;
      background:conic-gradient(from 180deg, rgba(255,255,255,.0), rgba(255,255,255,.26), rgba(255,255,255,.0));
      animation:spin 3.6s linear infinite;
      opacity:.55;
    }
    .cta-button::after{
      content:'';
      position:absolute;inset:2px;border-radius:999px;
      background:linear-gradient(135deg,#FFFF00,#FFD700);
      z-index:-1;
    }
    .cta-button:hover{
      transform:scale(1.08) translateY(-4px);
      box-shadow:0 18px 60px rgba(255,215,0,.82), 0 0 65px rgba(255,235,59,.10);
    }

    .microcopy{
      margin-top:18px;
      color:#ddd;
      font-size:.98rem;
      opacity:.92;
      max-width:980px;
      line-height:1.6;
    }
    .microcopy span{
      color:#FFD700;
      font-weight:700;
    }

    /* ========== CARDS GRID ========== */
    .cards-container{
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
      gap:30px;margin-top:55px;
    }
        .card-3d{
      background:rgba(0,0,0,.90);
      border:2px solid rgba(255,215,0,.78);
      border-radius:16px;
      padding:26px 30px;
      position:relative;overflow:hidden;
      cursor:pointer;
      transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
      box-shadow:0 10px 30px rgba(255,215,0,.18);
      text-align:center;
    }
    /* Glow dorado (evita colores raros y que se pierda el texto) */
    .card-3d::before{
      content:'';
      position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;
      background:linear-gradient(45deg,
        rgba(255,255,0,.0),
        rgba(255,215,0,.95),
        rgba(255,255,0,.0)
      );
      background-size:260% 260%;
      border-radius:16px;
      z-index:-1;
      animation:borderSnakeGold 4.8s linear infinite;
      opacity:0;
      transition:opacity .22s ease;
      filter:blur(12px);
    }
    .card-3d:hover::before{opacity:.72}
    @keyframes borderSnakeGold{
      0%{background-position:0% 50%}
      50%{background-position:100% 50%}
      100%{background-position:0% 50%}
    }
    .card-3d:hover{
      transform:translateY(-10px);
      border-color:#FFD700;
      box-shadow:0 22px 55px rgba(255,215,0,.38);
    }

.card-3d h3{color:#FFD700;font-size:1.5rem;margin-bottom:10px;text-transform:uppercase;letter-spacing:2px;text-shadow:0 0 14px rgba(255,215,0,.35), 0 2px 0 rgba(0,0,0,.55)}
    .card-3d p{color:#FFD700;font-size:1rem;line-height:1.55;text-shadow:0 2px 0 rgba(0,0,0,.55)}
    .card-icon{display:inline-block;animation:float 3s ease-in-out infinite}
    @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

    /* ========== BLOQUE “ÚNETE” (extra texto atractivo) ========== */
    .join-strip{
      margin-top:70px;
      background:linear-gradient(135deg, rgba(184,134,11,.08), rgba(139,117,0,.06), rgba(255,215,0,.04));
      border:2px solid #8B7500;
      border-radius:22px;
      padding:42px 36px;
      box-shadow:0 0 50px rgba(184,134,11,.25), 0 0 90px rgba(139,117,0,.15), inset 0 0 30px rgba(255,215,0,.08);
      position:relative;overflow:hidden;
    }
    .join-strip::before{
      content:'';
      position:absolute;inset:-30%;
      background:conic-gradient(from 0deg, rgba(255,255,0,.0), rgba(255,255,0,.5), rgba(184,134,11,.4), rgba(218,165,32,.3), rgba(255,255,0,.0));
      animation:spin 4.8s linear infinite;
      opacity:.9;
      pointer-events:none; /* ✅ evita que tape clicks (inputs/botones) */
      z-index:0;
      filter: blur(3px);
    }
    .join-strip > *{position:relative;z-index:1;} /* ✅ asegura que el contenido quede arriba */
    .join-strip-inner{position:relative;z-index:1;display:grid;gap:10px}
    .join-strip h2{
      font-size:2.2rem;color:#FFD700;letter-spacing:3px;text-transform:uppercase;
      text-shadow:0 0 20px rgba(255,215,0,.5), 0 0 40px rgba(139,117,0,.3);
    }
    .join-strip p{color:#fff;line-height:1.75;font-size:1.08rem;max-width:980px;text-shadow:0 0 10px rgba(255,255,0,.2), 0 2px 4px rgba(0,0,0,.5)}
    .join-actions{
      margin-top:18px;
      display:flex;flex-wrap:wrap;gap:12px;
      justify-content:flex-start;
    }
    .ghost-btn{
      padding:12px 18px;border-radius:14px;
      border:2px solid rgba(255,200,0,.55);
      background:rgba(0,0,0,.35);
      color:#fff;font-weight:800;letter-spacing:1px;
      cursor:pointer;
      transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
      position:relative;overflow:hidden;
      box-shadow:0 0 15px rgba(255,200,0,.18), inset 0 0 10px rgba(255,200,0,.05);
    }
    .ghost-btn::before{
      content:'';
      position:absolute;inset:-45%;
      background:radial-gradient(circle, rgba(255,200,0,.25), transparent 55%);
      opacity:.0;
      transition:opacity .25s ease;
    }
    .ghost-btn:hover{
      transform:translateY(-2px) scale(1.01);
      border-color:rgba(255,255,0,.75);
      box-shadow:0 0 30px rgba(255,255,0,.3), 0 0 50px rgba(218,165,32,.22), inset 0 0 15px rgba(255,215,0,.1);
    }
    .ghost-btn:hover::before{opacity:1}

    /* ========== DISEÑO ALTERNATIVO 2: Efecto Onda Dinámica ========== */
    .join-strip-design-2{
      margin-top:70px;
      background:linear-gradient(90deg, rgba(184,134,11,.08), rgba(255,255,0,.08), rgba(218,165,32,.08));
      border:2px solid rgba(218,165,32,.7);
      border-radius:22px;
      padding:42px 36px;
      box-shadow:0 0 60px rgba(184,134,11,.35), 0 0 100px rgba(255,255,0,.25), inset 0 0 40px rgba(218,165,32,.1);
      position:relative;overflow:hidden;
    }
    .join-strip-design-2::before{
      content:'';
      position:absolute;inset:-50%;
      background:linear-gradient(45deg, transparent 30%, rgba(255,255,0,.6) 50%, transparent 70%);
      animation:slide 3.5s linear infinite;
      pointer-events:none;
      z-index:0;
    }
    @keyframes slide{0%{transform:translate(-100%,-100%)}100%{transform:translate(100%,100%)}}
    .join-strip-design-2::after{
      content:'';
      position:absolute;inset:0;
      background:radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,.3) 100%);
      z-index:0;
      pointer-events:none;
    }
    .join-strip-design-2 > *{position:relative;z-index:1;}
    .join-strip-design-2-inner{position:relative;z-index:1;display:grid;gap:10px}
    .join-strip-design-2 h2{
      font-size:2.2rem;color:#FF6600;letter-spacing:3px;text-transform:uppercase;
      text-shadow:0 0 25px rgba(218,165,32,.6), 0 0 50px rgba(255,255,0,.35);
      animation:glow-pulse 2.5s ease-in-out infinite;
    }
    @keyframes glow-pulse{0%,100%{text-shadow:0 0 20px rgba(218,165,32,.5), 0 0 40px rgba(255,255,0,.25)}50%{text-shadow:0 0 30px rgba(218,165,32,.7), 0 0 60px rgba(255,255,0,.4)}}
    .join-strip-design-2 p{color:#fff;line-height:1.75;font-size:1.08rem;max-width:980px;text-shadow:0 0 12px rgba(218,165,32,.25), 0 2px 4px rgba(0,0,0,.6)}

    /* ========== DISEÑO ALTERNATIVO 3: Efecto Rayos Eléctricos ========== */
    .join-strip-design-3{
      margin-top:70px;
      background:linear-gradient(135deg, rgba(255,255,0,.08), rgba(184,134,11,.06), rgba(255,215,0,.05));
      border:2.5px solid rgba(255,200,0,.75);
      border-radius:22px;
      padding:42px 36px;
      box-shadow:
        0 0 70px rgba(255,255,0,.4),
        0 0 110px rgba(184,134,11,.3),
        0 0 160px rgba(218,165,32,.25),
        inset 0 0 50px rgba(255,255,0,.12),
        0 6px 35px rgba(218,165,32,.3),
        0 0 30px rgba(255,255,0,.2) inset;
      position:relative;overflow:hidden;
      animation:pulse-border 2s ease-in-out infinite;
    }
    @keyframes pulse-border{
      0%,100%{border-color:rgba(255,200,0,.75)}
      50%{border-color:rgba(255,255,0,.85);box-shadow:0 0 90px rgba(255,255,0,.55), 0 0 140px rgba(184,134,11,.4), 0 0 190px rgba(218,165,32,.35), inset 0 0 70px rgba(255,255,0,.15), 0 6px 45px rgba(218,165,32,.4), 0 0 40px rgba(255,255,0,.25) inset}
    }
    .join-strip-design-3::before{
      content:'';
      position:absolute;inset:0;
      background:
        linear-gradient(110deg, transparent 10%, rgba(255,255,0,.25) 40%, rgba(218,165,32,.2) 50%, transparent 90%),
        linear-gradient(65deg, transparent 20%, rgba(184,134,11,.18) 50%, transparent 95%),
        linear-gradient(25deg, transparent 30%, rgba(255,255,0,.15) 60%, transparent 85%);
      animation:lightning-burst 2.2s ease-in-out infinite;
      pointer-events:none;
      z-index:0;
      filter: brightness(1.08);
    }
    @keyframes lightning-burst{
      0%{opacity:0;transform:scaleX(0.95) scaleY(0.99)}
      25%{opacity:.35;transform:scaleX(1.02) scaleY(1.01)}
      50%{opacity:.65;transform:scaleX(1.06) scaleY(1.03);filter:brightness(1.15)}
      75%{opacity:.4;transform:scaleX(0.98) scaleY(1)}
      100%{opacity:0;transform:scaleX(0.95) scaleY(0.99)}
    }
    .join-strip-design-3::after{
      content:'';
      position:absolute;inset:0;
      background:radial-gradient(circle at top right, rgba(255,255,0,.1) 0%, transparent 60%);
      z-index:0;
      pointer-events:none;
    }
    .join-strip-design-3 > *{position:relative;z-index:1;}
    .join-strip-design-3-inner{position:relative;z-index:1;display:grid;gap:10px}
    .join-strip-design-3 h2{
      font-size:2.2rem;color:#FFFF00;letter-spacing:3px;text-transform:uppercase;
      text-shadow:
        0 0 28px rgba(255,255,0,.6),
        0 0 55px rgba(218,165,32,.4),
        0 0 85px rgba(184,134,11,.35),
        0 2px 5px rgba(0,0,0,.5);
      animation:electro-flicker 0.12s infinite, glow-surge 2.8s ease-in-out infinite;
    }
    @keyframes electro-flicker{
      0%,100%{opacity:1;text-shadow:0 0 32px rgba(255,255,0,.7), 0 0 70px rgba(218,165,32,.5), 0 0 105px rgba(184,134,11,.45), 0 2px 5px rgba(0,0,0,.5)}
      50%{opacity:.92;text-shadow:0 0 22px rgba(255,255,0,.5), 0 0 45px rgba(218,165,32,.35), 0 0 70px rgba(184,134,11,.3), 0 2px 5px rgba(0,0,0,.5)}
    }
    @keyframes glow-surge{
      0%,100%{filter:brightness(1) drop-shadow(0 0 8px rgba(255,255,0,0.2))}
      50%{filter:brightness(1.12) drop-shadow(0 0 20px rgba(218,165,32,0.4))}
    }
    .join-strip-design-3 p{color:#fff;line-height:1.75;font-size:1.08rem;max-width:980px;text-shadow:0 0 14px rgba(255,255,0,.3), 0 0 25px rgba(218,165,32,.18), 0 2px 6px rgba(0,0,0,.8);animation:pulse-text 3s ease-in-out infinite}
    @keyframes pulse-text{
      0%,100%{opacity:.97;text-shadow:0 0 12px rgba(255,255,0,.25), 0 0 20px rgba(218,165,32,.15), 0 2px 6px rgba(0,0,0,.8)}
      50%{opacity:1;text-shadow:0 0 18px rgba(255,255,0,.4), 0 0 32px rgba(218,165,32,.25), 0 2px 6px rgba(0,0,0,.8)}
    }

    /* ========== MAPA SECTION ========== */
    .map-section{margin-top:80px}
    .map-section h2{
      text-align:center;font-size:3rem;color:#FFFF00;
      text-transform:uppercase;letter-spacing:5px;margin-bottom:40px;
      text-shadow:0 0 20px rgba(255,215,0,.6);
    }
    #mapContainer{
      width:100%;height:600px;
      background:rgba(0,0,0,.6);
      border:3px solid #FFD700;border-radius:20px;
      box-shadow:0 10px 50px rgba(255,215,0,.3);
    }

    /* ========== TESTIMONIOS ========== */
    .testimonios{margin-top:80px}
    .testimonios h2{
      text-align:center;font-size:3rem;color:#FFFF00;text-transform:uppercase;
      letter-spacing:5px;margin-bottom:60px;
      text-shadow:0 0 20px rgba(255,215,0,.6);
    }
    .testimonios-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:25px}
    .testimonio-card{
      background:rgba(30,30,30,.92);
      border:2px solid #FFD700;border-radius:12px;
      padding:25px;position:relative;overflow:hidden;
      transition:transform .25s ease, box-shadow .25s ease;
    }
    .testimonio-card::before{
      content:'"';
      position:absolute;top:-20px;left:10px;
      font-size:8rem;color:rgba(255,215,0,.10);
      font-family:Georgia,serif;
    }
    .testimonio-card:hover{
      transform:scale(1.04);
      box-shadow:0 15px 40px rgba(255,215,0,.35);
    }
    .testimonio-header{display:flex;align-items:center;margin-bottom:15px}
    .testimonio-avatar{
      width:60px;height:60px;border-radius:50%;
      background:linear-gradient(135deg,#FFFF00,#FFD700);
      display:flex;align-items:center;justify-content:center;
      font-size:1.5rem;font-weight:900;color:#000;margin-right:15px;
      box-shadow:0 0 20px rgba(255,215,0,.25);
    }
    .testimonio-info h4{color:#FFFF00;font-size:1.2rem;margin-bottom:5px}
    .testimonio-info .role{color:#FFD700;font-size:.9rem}
    .testimonio-text{color:#ddd;line-height:1.6;font-style:italic}
    .stars{color:#FFD700;font-size:1.2rem;margin-top:10px}

    /* ========== SERVICIOS SECTION ========== */
    .servicios-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
      gap:30px;margin-top:40px;
    }
    .servicio-card{
      background:linear-gradient(135deg, rgba(40,40,40,.92), rgba(20,20,20,.92));
      border:2px solid transparent;border-radius:16px;
      padding:30px;text-align:center;
      position:relative;overflow:hidden;cursor:pointer;
      transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    }
    .servicio-card::before{
      content:'';
      position:absolute;top:0;left:-100%;width:100%;height:100%;
      background:linear-gradient(90deg, transparent, rgba(255,215,0,.18), transparent);
      transition:left .5s ease;
    }
    .servicio-card:hover::before{left:100%}
    .servicio-card:hover{
      border-color:#FFFF00;
      transform:translateY(-10px) scale(1.04);
      box-shadow:0 20px 50px rgba(255,215,0,.35);
    }

    /* ========== APUESTAS SECTION ========== */
    .apuestas-banner{
      position: relative !important;
      width: 100% !important;
      padding: 50px 30px !important;
      margin-top: 40px !important;
      border-radius: 22px !important;
      border: 1px solid rgba(255, 51, 51, 0.22) !important;
      background: radial-gradient(circle at 82% 8%, rgba(255,116,0,.16), transparent 34%), linear-gradient(160deg, #0d0d0d, #040404 70%) !important;
      box-shadow: 0 16px 38px rgba(0,0,0,.78), inset 0 0 24px rgba(255, 215, 0, 0.04) !important;
      transform-style: preserve-3d !important;
      perspective: 1200px !important;
      overflow: hidden !important;
      text-align: center !important;
      transition: transform .1s ease, box-shadow .4s ease, border-color .4s ease !important;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .apuestas-banner::before{
      display: none !important;
    }
    .apuestas-banner:hover {
      border-color: rgba(255, 215, 0, .52) !important;
      box-shadow: 0 0 34px rgba(255, 61, 20, .18), inset 0 0 28px rgba(255, 215, 0, .09) !important;
    }
    .apuestas-banner .oracle-particles {
      position: absolute !important;
      inset: 0 !important;
      transform: translateZ(20px) !important;
      pointer-events: none !important;
    }
    .apuestas-banner .oracle-particle {
      position: absolute !important;
      border-radius: 50% !important;
      background: #ffd700 !important;
      box-shadow: 0 0 8px #ff3333 !important;
      animation: oracleParticleFloat 3s infinite ease-in-out alternate !important;
      opacity: .65 !important;
    }
    .apuestas-banner .oracle-particle.p1 { width: 6px !important; height: 6px !important; top: 15% !important; left: 15% !important; animation-delay: 0s !important; }
    .apuestas-banner .oracle-particle.p2 { width: 5px !important; height: 5px !important; top: 75% !important; left: 85% !important; animation-delay: 1s !important; }
    .apuestas-banner .oracle-particle.p3 { width: 8px !important; height: 8px !important; top: 50% !important; left: 10% !important; animation-delay: 2s !important; }
    
    .apuestas-banner .oracle-content {
      position: relative !important;
      z-index: 1 !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      transform-style: preserve-3d !important;
    }
    .apuestas-banner .vip-badge {
      transform: translateZ(38px) !important;
      margin-bottom: 20px !important;
    }
    .apuestas-banner h2 {
      font-size: 2.8rem !important;
      color: #f4f4f4 !important;
      margin-bottom: 16px !important;
      transform: translateZ(58px) !important;
      text-shadow: 0 2px 4px #000 !important;
      font-weight: 800 !important;
      letter-spacing: .02em !important;
      text-transform: uppercase !important;
    }
    .apuestas-banner p {
      font-size: 1.25rem !important;
      color: #b8b8b8 !important;
      margin-bottom: 26px !important;
      transform: translateZ(42px) !important;
      line-height: 1.8 !important;
      max-width: 800px !important;
    }
    .apuestas-banner .cta-button {
      transform: translateZ(52px) !important;
      border: 1px solid rgba(255,193,76,.82) !important;
      background: linear-gradient(140deg, rgba(255,128,24,.42), rgba(255,58,58,.28)) !important;
      color: #fff2d8 !important;
      box-shadow: 0 8px 18px rgba(255,69,36,.18) !important;
      padding: 16px 40px !important;
      font-size: 1.15rem !important;
      border-radius: 14px !important;
      text-transform: uppercase !important;
      letter-spacing: .08em !important;
      font-weight: 900 !important;
      transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease !important;
      cursor: pointer !important;
    }
    .apuestas-banner .cta-button:hover {
      transform: translateY(-2px) translateZ(52px) !important;
      border-color: rgba(255,232,158,.98) !important;
      background: linear-gradient(140deg, rgba(255,161,46,.56), rgba(255,77,46,.4)) !important;
      box-shadow: 0 12px 22px rgba(255,81,38,.3) !important;
      color: #fff !important;
    }
    .apuestas-banner .tip-text {
      margin-top: 24px !important;
      color: #9f9f9f !important;
      font-size: .98rem !important;
      transform: translateZ(38px) !important;
    }
    .apuestas-banner .tip-text b {
      color: #ffd700 !important;
    }
    @media (max-width: 920px) {
      .apuestas-banner { padding: 40px 20px !important; }
      .apuestas-banner h2 { font-size: 2rem !important; }
      .apuestas-banner p { font-size: 1.05rem !important; }
    }
    @media (max-width: 520px) {
      .apuestas-banner { padding: 30px 15px !important; }
      .apuestas-banner h2 { font-size: 1.6rem !important; }
    }

    .vip-badge{
      display:inline-flex;align-items:center;gap:10px;
      padding:14px 36px;
      background:linear-gradient(135deg,#FFD700,#FFFF00);
      color:#000;font-size:1.3rem;font-weight:900;
      text-transform:uppercase;letter-spacing:3px;
      border-radius:999px;
      box-shadow:0 10px 30px rgba(255,215,0,.5);
      margin-bottom:26px;
      animation:pulse 2s infinite;
      position:relative;
    }
    @keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

    /* ========== MINI CARRUSEL SOLIDARIO (esquina inferior izquierda) ========== */
    /* ========== MINI CARRUSEL SOLIDARIO (más pequeño y sin tapar) ========== */
.support-carousel{
  position:fixed;
  left:16px; bottom:16px;
  width:min(320px, calc(100vw - 32px));  /* ✅ más pequeño */
  z-index:1200;
  pointer-events:none; /* no estorba el scroll */
}

.support-card{
  pointer-events:auto;
  display:flex; gap:12px; align-items:flex-start;
  background:rgba(10,10,10,.78);
  border:2px solid rgba(255,215,0,.85);
  border-radius:16px;
  padding:12px 12px;                 /* ✅ menos padding */
  box-shadow:0 14px 44px rgba(255,215,0,.18), 0 0 22px rgba(255,235,59,.08);
  position:relative; overflow:hidden;
  transform:translateY(14px);
  opacity:0;
  transition:opacity .55s ease, transform .55s ease;
  backdrop-filter:blur(10px);
}

.support-card.show{ opacity:1; transform:translateY(0); }

.support-card::before{
  content:'';
  position:absolute; inset:-45%;
  background:conic-gradient(from 180deg, rgba(255,255,0,.0), rgba(255,215,0,.30), rgba(255,235,59,.16), rgba(255,215,0,.14), rgba(255,255,0,.0));
  animation:spin 7.5s linear infinite;
  opacity:.8;
  filter:blur(10px);
}
.support-card::after{
  content:'';
  position:absolute; inset:2px; border-radius:14px;
  background:rgba(0,0,0,.62);
  z-index:0;
}

.support-icon{
  width:40px; height:40px;           /* ✅ más pequeño */
  border-radius:12px;
  background:linear-gradient(135deg,#FFFF00,#FFD700);
  display:grid; place-items:center;
  flex:0 0 auto;
  box-shadow:0 0 16px rgba(255,215,0,.30);
  position:relative; z-index:1;
}
.support-icon svg{
  width:22px; height:22px;           /* ✅ tamaño del SVG */
  fill:#000;
}

.support-text{ position:relative; z-index:1; min-width:0; }
.support-title{
  color:#FFFF00; font-weight:900; letter-spacing:1px;
  text-transform:uppercase; font-size:.90rem;
  margin-bottom:4px;
}
.support-body{
  color:#ddd; font-size:.90rem; line-height:1.35;
}
.support-tag{
  display:inline-block;
  padding:6px 10px; border-radius:999px;
  border:1px solid rgba(255,235,59,.25);
  color:#FFD700; font-weight:900; font-size:.78rem;
  background:rgba(0,0,0,.35);
}

.support-help{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 12px;
  border-radius:999px;
  font-weight:900;
  letter-spacing:.6px;
  text-decoration:none;
  color:#000;
  background:linear-gradient(135deg,#FFFF00,#FFD700);
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 10px 22px rgba(255,215,0,.20), 0 0 14px rgba(255,235,59,.08);
  transition:transform .2s ease, box-shadow .2s ease;
  white-space:nowrap;
}
.support-help:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(255,215,0,.35), 0 0 22px rgba(255,235,59,.12);
}

/* ===============================
   ✅ WIDGET "CÓDIGO PREMIUM" (ADMIN)
   - Flotante y anclado (esquina inferior derecha)
   - MISMO LOOK "PRONÓSTICO VIP"
   =============================== */
.vip-float{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:1600;
  width:min(320px, calc(100vw - 36px));
  cursor:pointer;
  display:none;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transform-style:preserve-3d;
  transition:transform .18s ease, opacity .22s ease;
}
.vip-float.is-visible{
  display:block;
  visibility:visible;
  opacity:1;
  pointer-events:auto;
}
.vip-float:hover{ transform:translateY(-3px) scale(1.01); }

.vipmini-card{
  position:relative;
  width:100%;
  background:#000;
  border-radius:18px;
  padding:3px;
  overflow:hidden;
  box-shadow:0 18px 44px rgba(0,0,0,.9), 0 0 28px rgba(204,255,0,.12);
}
.vipmini-card::before{
  content:'';
  position:absolute;
  width:170%;
  height:170%;
  left:-35%;
  top:-35%;
  background:conic-gradient(transparent, transparent, transparent, #ccff00, #FFD700, #ccff00);
  animation: vipmini-rotate 4s linear infinite;
  opacity:.95;
}
@keyframes vipmini-rotate{ 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }

.vipmini-content{
  position:relative;
  z-index:1;
  width:100%;
  border-radius:16px;
  padding:14px 14px 12px;
  background:#0a0a0a;
  overflow:hidden;
}
.vipmini-content::before{
  content:'';
  position:absolute;
  top:-55%;
  left:-55%;
  width:210%;
  height:210%;
  background: radial-gradient(circle at 50% 50%, rgba(204,255,0,.16) 0%, rgba(255,215,0,.05) 32%, transparent 62%);
  animation: vipmini-pulse 6s ease-in-out infinite alternate;
  z-index:-2;
}
.vipmini-content::after{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:18px 18px;
  opacity:.45;
  z-index:-1;
}

@keyframes vipmini-pulse{
  0%{transform:scale(.9) translate(3%,3%); opacity:.55}
  100%{transform:scale(1.18) translate(-3%,-3%); opacity:1}
}

.vipmini-top{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.vipmini-lock{
  width:40px;height:40px;border-radius:14px;
  display:grid;place-items:center;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(255,215,0,.55);
  box-shadow:0 0 18px rgba(255,215,0,.18);
  color:#FFD700;
}
.vipmini-title{
  font-weight:1000;
  color:#FFD700;
  letter-spacing:2px;
  text-transform:uppercase;
  line-height:1.05;
  text-shadow:0 0 16px rgba(255,215,0,.40);
}
.vipmini-sub{
  color:#ddd;
  opacity:.92;
  font-weight:800;
  font-size:.88rem;
}

.vipmini-odd{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(0,0,0,.40);
  border:1px solid rgba(204,255,0,.25);
}
.vipmini-odd .lbl{ color:#fff; font-weight:900; opacity:.92; }
.vipmini-odd .val{ color:#ccff00; font-weight:1000; font-size:1.15rem; text-shadow:0 0 16px rgba(204,255,0,.35); }

.vipmini-stake{
  margin-top:10px;
}
.vipmini-stake-head{
  display:flex;
  justify-content:space-between;
  font-weight:900;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.8px;
  color:#bbb;
  margin-bottom:7px;
}
.vipmini-stake-bar{
  width:100%;
  height:6px;
  background:#1a1a1a;
  border-radius:999px;
  overflow:hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.8);
}
.vipmini-stake-fill{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, #FFD700, #ccff00);
  box-shadow:0 0 15px rgba(204,255,0,.55);
}

.vipmini-badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}
.vipmini-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 12px;
  border-radius:999px;
  font-weight:1000;
  letter-spacing:1px;
  text-transform:uppercase;
  font-size:.75rem;
  background: rgba(255,235,59,.16);
  border: 1px solid rgba(255,235,59,.35);
  color:#fff;
}
.vipmini-badge:empty{ display:none; }

.vipmini-hint{
  margin-top:10px;
  color:#bbb;
  font-weight:800;
  font-size:.86rem;
  line-height:1.25;
}

.vipmini-btn{
  margin-top:12px;
  width:100%;
  border:none;
  border-radius:30px;
  padding:12px 14px;
  font-weight:1000;
  letter-spacing:1px;
  text-transform:uppercase;
  cursor:pointer;
  background: linear-gradient(90deg, #FFD700, #ccff00);
  color:#050505;
  box-shadow:0 10px 26px rgba(204,255,0,.22);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.vipmini-btn i{ font-size:1rem; }

/* ✨ Brillo/palpitar para "CASI AGOTADO" */

/* --- CONTENIDO DEL WIDGET VIP (compacto, misma estética del Pronóstico VIP) --- */
.vip-inner{
  position:relative;
  width:100%;
  border-radius:18px;
  padding:2px;
  overflow:hidden;
  background:#000;
  box-shadow:0 18px 45px rgba(0,0,0,.65), 0 0 30px rgba(204,255,0,.10);
}
.vip-inner::before{
  content:'';
  position:absolute;
  inset:-40%;
  background:conic-gradient(transparent, transparent, transparent, #ccff00, #FFD700, #ccff00);
  animation:vipBorderSpin 4s linear infinite;
  opacity:.95;
}
@keyframes vipBorderSpin{ to{ transform:rotate(360deg);} }

.vip-content{
  position:relative;
  z-index:1;
  border-radius:16px;
  padding:14px 14px 12px;
  background-color:#0a0a0a;
  overflow:hidden;
}
.vip-content::before{
  content:'';
  position:absolute;
  inset:-60%;
  background:radial-gradient(circle at 50% 50%,
    rgba(204,255,0,.14) 0%,
    rgba(255,215,0,.06) 28%,
    transparent 62%);
  animation:vipPulseGlow 6s ease-in-out infinite alternate;
  z-index:-2;
}
.vip-content::after{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:18px 18px;
  opacity:.45;
  z-index:-1;
}
@keyframes vipPulseGlow{
  0%{ transform:scale(.92) translate(4%,4%); opacity:.55; }
  100%{ transform:scale(1.12) translate(-4%,-4%); opacity:1; }
}

.vip-top{ display:flex; gap:10px; align-items:flex-start; margin-bottom:10px; }
.vip-lock{
  width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(204,255,0,.10);
  border:1px solid rgba(204,255,0,.25);
  box-shadow:0 0 14px rgba(255,215,0,.22);
}
.vip-head{ flex:1; min-width:0; }
.vip-title{
  font-weight:900; letter-spacing:1px;
  color:#FFD700; text-transform:uppercase; line-height:1.1;
}
.vip-sub{ margin-top:2px; font-size:12px; color:rgba(255,255,255,.78); }

.vip-odd{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 12px; border-radius:12px;
  background:linear-gradient(135deg, rgba(204,255,0,.10), rgba(0,0,0,.85));
  border:1px solid rgba(204,255,0,.28);
  margin-bottom:10px;
  position:relative; overflow:hidden;
}
.vip-odd::after{
  content:'';
  position:absolute; top:0; left:-120%;
  width:55%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(204,255,0,.18), transparent);
  animation:vipScan 3s linear infinite;
}
@keyframes vipScan{ to{ left:220%; } }

.vip-cta{
  font-size:12px; letter-spacing:1px;
  color:rgba(255,255,255,.8); text-transform:uppercase;
}
#vipCuota{
  font-size:26px;
  font-weight:900;
  color:#ccff00;
  text-shadow:0 0 18px rgba(204,255,0,.55);
}

.vip-mini-stake{ margin-bottom:10px; }
.vip-stake-row{
  display:flex; justify-content:space-between;
  font-size:12px; color:rgba(255,255,255,.75);
  margin-bottom:6px; text-transform:uppercase; font-weight:700;
}
.vip-stake-val{ color:#ccff00; }

.vip-stake-bar{
  height:6px; background:#151515; border-radius:10px; overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.85);
}
.vip-stake-fill{
  height:100%;
  background:linear-gradient(90deg, #FFD700, #ccff00);
  box-shadow:0 0 14px rgba(204,255,0,.55);
  width:0%;
}

.vip-meta{ display:flex; gap:8px; align-items:center; }
.vip-chip{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 12px; border-radius:999px;
  font-size:12px; font-weight:900;
  letter-spacing:1px; text-transform:uppercase;
}
.vip-chip-warn{
  background:rgba(128,0,128,.35);
  border:1px solid rgba(255,0,255,.25);
  color:#fff;
  box-shadow:0 0 20px rgba(255,0,255,.12);
}

/* Botón (mismo concepto del grande, versión compacta) */
.vip-btn{
  margin-top:10px;
  display:flex; justify-content:center; align-items:center; gap:10px;
  border-radius:999px;
  padding:12px 12px;
  background:linear-gradient(90deg, #FFD700, #ccff00);
  color:#050505;
  font-weight:900; letter-spacing:1px;
  text-transform:uppercase;
  box-shadow:0 10px 30px rgba(204,255,0,.22);
}
.vip-btn-ico{ display:flex; align-items:center; justify-content:center; }

.vip-glow{
  animation: vip-glow 1.2s ease-in-out infinite;
}
@keyframes vip-glow{
  0%{ box-shadow:0 0 0 rgba(255,0,255,0), 0 0 10px rgba(255,0,255,.15); transform:translateZ(0) scale(1); }
  50%{ box-shadow:0 0 18px rgba(255,0,255,.55), 0 0 34px rgba(255,0,255,.28); transform:translateZ(0) scale(1.03); }
  100%{ box-shadow:0 0 0 rgba(255,0,255,0), 0 0 10px rgba(255,0,255,.15); transform:translateZ(0) scale(1); }
}

/* ===============================
   ✅ VIP CARD (PREMIUM) estilo 3D
   - Solo afecta la tarjeta VIP en el grid de apuestas
   =================

   - Solo afecta la tarjeta VIP en el grid de apuestas
   =============================== */
.vip3d-wrapper{
  position:relative;
  width:100%;
  min-height: 520px;
  transform-style:preserve-3d;
  perspective: 1000px;
}

.vip3d-card{
  position:relative;
  width:100%;
  height:100%;
  background:#000;
  border-radius:20px;
  padding:3px;
  overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.9), 0 0 40px rgba(204,255,0,.12);
}

.vip3d-card::before{
  content:'';
  position:absolute;
  width:150%;
  height:150%;
  left:-25%;
  top:-25%;
  background:conic-gradient(transparent, transparent, transparent, #ccff00, #FFD700, #ccff00);
  animation: vip-rotate-border 4s linear infinite;
  opacity:.95;
}
@keyframes vip-rotate-border{ 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }

.vip3d-content{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  border-radius:18px;
  padding:28px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:#0a0a0a;
  overflow:hidden;
  transform-style:preserve-3d;
}

.vip3d-content::before{
  content:'';
  position:absolute;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  background: radial-gradient(circle at 50% 50%, rgba(204,255,0,.14) 0%, rgba(255,215,0,.05) 30%, transparent 60%);
  animation: vip-pulse 6s ease-in-out infinite alternate;
  z-index:-2;
}
.vip3d-content::after{
  content:'';
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:20px 20px;
  z-index:-1;
  opacity:.5;
}
@keyframes vip-pulse{
  0%{transform:scale(.85) translate(4%,4%); opacity:.55}
  100%{transform:scale(1.2) translate(-4%,-4%); opacity:1}
}

.vip3d-icon{
  width:56px; height:56px;
  margin-bottom:14px;
  filter: drop-shadow(0 0 12px #FFD700);
  transform: translateZ(30px);
}

.vip3d-badge{
  position:absolute;
  left:14px;
  top:14px;
  padding:7px 12px;
  border-radius:999px;
  font-weight:1000;
  letter-spacing:1.5px;
  text-transform:uppercase;
  background: linear-gradient(135deg, #FFFF00, #FFD700);
  color:#000;
  box-shadow:0 10px 28px rgba(255,215,0,.22);
  transform: translateZ(40px);
}

.vip3d-title{
  color:#FFD700;
  font-size:22px;
  font-weight:1000;
  letter-spacing:2px;
  text-transform:uppercase;
  margin: 6px 0 18px;
  text-shadow:0 0 10px rgba(255,215,0,.35);
  transform: translateZ(25px);
}

.vip3d-date{
  color:#ddd;
  opacity:.9;
  font-weight:800;
  font-size:.86rem;
  margin-top:-8px;
  transform: translateZ(18px);
}

.vip3d-oddbox{
  width:100%;
  max-width: 260px;
  background: linear-gradient(135deg, rgba(204,255,0,.10), rgba(0,0,0,.82));
  border:1px solid rgba(204,255,0,.40);
  padding:12px 20px;
  border-radius:14px;
  margin: 18px 0 18px;
  box-shadow:0 8px 20px rgba(0,0,0,.5), inset 0 0 15px rgba(204,255,0,.10);
  position:relative;
  overflow:hidden;
  transform: translateZ(40px);
}
.vip3d-oddbox::after{
  content:'';
  position:absolute;
  top:0; left:-100%;
  width:50%; height:100%;
  background: linear-gradient(90deg, transparent, rgba(204,255,0,.22), transparent);
  animation: vip-scan 3s linear infinite;
}
@keyframes vip-scan{ 100%{ left:200% } }

.vip3d-oddbox .lbl{
  display:block;
  color:#fff;
  opacity:.85;
  font-size:11px;
  letter-spacing:2px;
  margin-bottom:6px;
}
.vip3d-oddbox .val{
  display:block;
  color:#ccff00;
  font-size:38px;
  font-weight:1000;
  text-shadow:0 0 20px rgba(204,255,0,.55);
}

.vip3d-stake{
  width:100%;
  margin: 0 0 18px;
  transform: translateZ(25px);
}
.vip3d-stake-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#bbb;
  font-size:13px;
  margin-bottom:8px;
  font-weight:900;
  text-transform:uppercase;
}
.vip3d-stake-head b{ color:#ccff00; letter-spacing:.4px; }
.vip3d-stake-bar{
  width:100%;
  height:6px;
  background:#1a1a1a;
  border-radius:10px;
  overflow:hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.85);
}
.vip3d-stake-fill{
  height:100%;
  background: linear-gradient(90deg, #FFD700, #ccff00);
  box-shadow:0 0 15px #ccff00;
}


.vip3d-urgency{
  margin-top:10px;
  padding:8px 14px;
  border-radius:999px;
  font-weight:1000;
  letter-spacing:1.2px;
  text-transform:uppercase;
  background: rgba(255,0,255,.16);
  border: 1px solid rgba(255,0,255,.35);
  color:#fff;
  transform: translateZ(22px);
  /* Brillo/palpitar para urgencia */
  animation: vip-glow 1.2s ease-in-out infinite;
}

.vip3d-desc{
  color:#aaa;
  font-size:14px;
  line-height:1.6;
  margin-top: 14px;
  margin-bottom: auto;
  padding:0 10px;
  transform: translateZ(20px);
}
.vip3d-desc strong{
  color:#fff;
  text-shadow:0 0 5px rgba(255,255,255,.25);
}

.vip3d-btn{
  width:100%;
  max-width: 280px;
  margin-top:18px;
  background: linear-gradient(90deg, #FFD700, #ccff00);
  color:#050505;
  border:none;
  padding:14px 18px;
  font-size:15px;
  font-weight:1000;
  border-radius:30px;
  cursor:pointer;
  text-transform:uppercase;
  letter-spacing:1px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  transform: translateZ(35px);
  box-shadow:0 5px 20px rgba(204,255,0,.25);
}
.vip3d-btn:hover{
  transform: translateZ(45px) scale(1.03);
  box-shadow:0 10px 30px rgba(204,255,0,.55);
  background: linear-gradient(90deg, #ccff00, #FFD700);
}

/* En móvil aún más compacto */
/* ========== RESPONSIVE ========== */
    /* Respeta accesibilidad */
    .support-help{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 12px;
  border-radius:999px;
  font-weight:900;
  letter-spacing:.6px;
  text-decoration:none;
  color:#000;
  background:linear-gradient(135deg,#FFFF00,#FFD700);
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 10px 26px rgba(255,215,0,.25), 0 0 18px rgba(0,255,255,.08);
  transition:transform .2s ease, box-shadow .2s ease;
}
.support-help:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(255,215,0,.40), 0 0 26px rgba(0,255,255,.12);
}
/* =========================================================
   ✅ PARCHE RESPONSIVE (PEGAR AL FINAL DEL <style>)
   No rompe tu código: solo sobreescribe tamaños/orden en móvil
   ========================================================= */

/* Mejor base responsive en textos y anchos */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }

/* Evita que elementos muy largos expandan el viewport */
.section, .hero, .navbar { max-width: 100%; }

/* -----------------------------
   1) Tablets / pantallas medianas
   ----------------------------- */
/* -----------------------------
   2) Móvil / <= 768px (tu principal problema)
   Reordena navbar y baja tamaños
   ----------------------------- */
/* -----------------------------
   3) Móvil pequeño / <= 480px
   Ajuste extra para que NO se vea “tocho”
   ----------------------------- */
/* -----------------------------
   4) MUY pequeño / <= 360px
   (Opcional) ocultar RAE para evitar apretado
   ----------------------------- */
/* ========== PANEL DATA (Agentes/Agencias/Productos/Feed/Apuestas) ========== */
    .nav-left{overflow-x:auto; scrollbar-width:none;}
    .nav-left::-webkit-scrollbar{display:none;}

    .user-chip{
      display:flex;align-items:center;gap:10px;
      padding:10px 14px;border-radius:14px;
      border:1px solid rgba(255,215,0,.35);
      background:rgba(0,0,0,.35);
      box-shadow:0 0 18px rgba(255,215,0,.12);
      max-width:260px;
    }
    .user-dot{
      width:10px;height:10px;border-radius:999px;
      background:#00ff6a;
      box-shadow:0 0 12px rgba(0,255,106,.6);
      flex:0 0 auto;
    }
    .user-name{
      font-weight:900;letter-spacing:1px;color:#FFFF00;font-size:.92rem;
      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    }

    .panel-head{ text-align:center; margin-bottom: 28px; }
    .panel-head h1{
      font-size: 3.4rem;
      color:#FFFF00;
      text-shadow:0 0 30px rgba(255,215,0,0.8);
      margin-bottom: 12px;
      letter-spacing:6px;
      text-transform:uppercase;
    }
    .panel-head p{
      font-size:1.22rem;
      color:#FFD700;
      max-width: 980px;
      margin:0 auto;
      line-height:1.75;
    }

    .filter-bar{
      display:flex;flex-wrap:wrap;gap:12px;
      justify-content:center;
      margin: 18px 0 34px;
    }
    .f-input,.f-select{
      min-width: 220px;
      padding: 12px 14px;
      border-radius: 14px;
      background: rgba(0,0,0,.55);
      border: 1px solid rgba(255,215,0,.55);
      color:#fff;
      outline:none;
      box-shadow: 0 0 20px rgba(255,215,0,.08);
    }
    .f-input::placeholder{ color: rgba(255,255,255,.55); }
    .f-input:focus,.f-select:focus{
      border-color:#FFFF00;
      box-shadow:0 0 26px rgba(255,215,0,.20);
    }

    .data-grid{
      display:grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 22px;
    }

    .pro-card{
      background:linear-gradient(135deg, rgba(25,25,25,.92) 0%, rgba(15,15,15,.88) 100%);
      border:1.5px solid rgba(255,215,0,.45);
      border-radius:20px;
      padding:24px;
      position:relative;
      overflow:hidden;
      box-shadow:0 8px 24px rgba(0,0,0,.4), 0 0 0 1px rgba(255,215,0,.15) inset;
      transition: all .3s cubic-bezier(.22,.75,.3,1);
      backdrop-filter:blur(8px);
    }
    .pro-card::before{
      content:'';
      position:absolute;
      top:-50%;
      left:-50%;
      width:200%;
      height:200%;
      background:radial-gradient(circle, rgba(255,215,0,.1) 0%, transparent 70%);
      pointer-events:none;
      opacity:0;
      transition:opacity .3s ease;
    }
    .pro-card:hover{
      transform: translateY(-8px) scale(1.02);
      border-color:rgba(255,215,0,.75);
      box-shadow:0 16px 48px rgba(255,215,0,.25), 0 0 0 1px rgba(255,215,0,.35) inset;
    }
    .pro-card:hover::before{
      opacity:1;
    }
    .pro-card .badge{
      display:inline-block;
      padding:8px 14px;
      border-radius:999px;
      font-weight:900;
      letter-spacing:1.2px;
      text-transform:uppercase;
      font-size:.85rem;
      color:#000;
      background: linear-gradient(135deg,#FFFF00 0%,#FFD700 100%);
      margin-bottom: 16px;
      box-shadow:0 4px 12px rgba(255,215,0,.3);
      position:relative;
      z-index:2;
    }
    .pro-card .title{
      font-size:1.6rem;
      color:#FFFF00;
      margin: 0 0 10px;
      text-transform:uppercase;
      letter-spacing:1.5px;
      line-height:1.15;
      text-shadow:0 2px 8px rgba(255,215,0,.2);
      position:relative;
      z-index:2;
    }
    .pro-card .sub{
      color:#e0e0e0;
      opacity:.95;
      font-size:1.05rem;
      margin-bottom: 14px;
      line-height:1.6;
      position:relative;
      z-index:2;
    }

    .pro-card-user{
      background:linear-gradient(180deg, rgba(50,8,12,.94), rgba(18,0,0,.96));
      border-color:rgba(255,88,88,.58);
      box-shadow:0 12px 32px rgba(255,64,64,.16), inset 0 1px 0 rgba(255,255,255,.04);
    }
    .pro-card-user:hover{
      box-shadow:0 22px 60px rgba(255,64,64,.22);
    }
    .pro-card-user .badge{
      background:linear-gradient(135deg,#ff7979,#ff3b3b);
      color:#fff;
      box-shadow:0 10px 24px rgba(255,70,70,.22);
    }
    .pro-card-user .title{
      color:#ffb3b3;
      text-shadow:0 0 16px rgba(255,90,90,.18);
    }

    .vip3d-card.admin-green{
      box-shadow:0 20px 50px rgba(0,0,0,.9), 0 0 40px rgba(73,255,138,.14);
    }
    .vip3d-card.admin-green::before{
      background:conic-gradient(transparent, transparent, transparent, #49ff8a, #b8ff35, #49ff8a);
    }
    .vip3d-content.admin-green{
      background:linear-gradient(180deg,#07140c 0%, #050905 100%);
    }
    .vip3d-content.admin-green::before{
      background:radial-gradient(circle at 50% 50%, rgba(73,255,138,.14) 0%, rgba(184,255,53,.06) 32%, transparent 60%);
    }
    .vip3d-content.admin-green .vip3d-icon{
      filter:drop-shadow(0 0 12px #7dff89);
    }
    .vip3d-content.admin-green .vip3d-title{
      color:#cfff8a;
      text-shadow:0 0 12px rgba(73,255,138,.28);
    }
    .vip3d-content.admin-green .vip3d-date{
      color:#e8ffe8;
    }
    .vip3d-content.admin-green .vip3d-oddbox{
      background:linear-gradient(135deg, rgba(73,255,138,.12), rgba(0,0,0,.82));
      border-color:rgba(73,255,138,.42);
      box-shadow:0 8px 20px rgba(0,0,0,.5), inset 0 0 15px rgba(73,255,138,.12);
    }
    .vip3d-content.admin-green .vip3d-oddbox::after{
      background:linear-gradient(90deg, transparent, rgba(73,255,138,.26), transparent);
    }
    .vip3d-content.admin-green .vip3d-oddbox .val,
    .vip3d-content.admin-green .vip3d-stake-head b{
      color:#8bff72;
      text-shadow:0 0 18px rgba(73,255,138,.38);
    }
    .vip3d-content.admin-green .vip3d-stake-fill{
      background:linear-gradient(90deg,#FFD700,#49ff8a);
      box-shadow:0 0 15px rgba(73,255,138,.5);
    }
    .vip3d-content.admin-green .vip3d-btn{
      background:linear-gradient(90deg,#d7ff63,#49ff8a);
      box-shadow:0 5px 20px rgba(73,255,138,.26);
    }
    .vip3d-content.admin-green .vip3d-btn:hover{
      background:linear-gradient(90deg,#49ff8a,#d7ff63);
      box-shadow:0 10px 30px rgba(73,255,138,.38);
    }
    .vip3d-timer{
      width:100%;
      margin:2px 0 16px;
      padding:10px 12px;
      border-radius:14px;
      background:linear-gradient(135deg, rgba(73,255,138,.10), rgba(0,0,0,.75));
      border:1px solid rgba(73,255,138,.22);
      transform:translateZ(24px);
      box-shadow:inset 0 0 14px rgba(73,255,138,.08);
    }
    .vip3d-timer-head{
      display:flex;
      justify-content:space-between;
      gap:10px;
      margin-bottom:8px;
      font-size:11px;
      font-weight:900;
      letter-spacing:1.1px;
      text-transform:uppercase;
      color:rgba(255,255,255,.82);
    }
    .vip3d-timer-value{
      color:#8bff72;
      text-shadow:0 0 14px rgba(73,255,138,.30);
    }
    .vip3d-timer-bar{
      width:100%;
      height:7px;
      background:#132015;
      border-radius:999px;
      overflow:hidden;
      box-shadow:inset 0 1px 3px rgba(0,0,0,.8);
    }
    .vip3d-timer-fill{
      height:100%;
      width:100%;
      border-radius:999px;
      background:linear-gradient(90deg,#49ff8a,#d7ff63);
      box-shadow:0 0 14px rgba(73,255,138,.45);
      transform-origin:left center;
    }

    .vip-countdown-row{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      margin-top:10px;
      font-size:11px;
      font-weight:900;
      letter-spacing:1px;
      text-transform:uppercase;
      color:rgba(255,255,255,.82);
    }
    .vip-countdown-value{
      color:#8bff72;
      text-shadow:0 0 12px rgba(73,255,138,.28);
    }
    .vip-countdown-bar{
      margin-top:7px;
      width:100%;
      height:5px;
      background:#152117;
      border-radius:999px;
      overflow:hidden;
      box-shadow:inset 0 1px 3px rgba(0,0,0,.85);
    }
    .vip-countdown-fill{
      width:100%;
      height:100%;
      background:linear-gradient(90deg,#49ff8a,#d7ff63);
      box-shadow:0 0 12px rgba(73,255,138,.45);
      transform-origin:left center;
    }

    .stars-icons{display:flex; gap:4px; justify-content:center; margin: 10px 0 12px;}
    .stars-icons i{ color: rgba(255,255,255,.18); }
    .stars-icons i.on{ color: rgba(255,215,0,1); }

    .pro-actions{
      display:flex;gap:10px;justify-content:center;
      flex-wrap:wrap;
      margin-top: 14px;
    }
    .btn-mini{
      border: 2px solid rgba(255,215,0,.75);
      background: rgba(0,0,0,.25);
      color:#FFFF00;
      font-weight:900;
      letter-spacing:1px;
      text-transform:uppercase;
      padding: 10px 14px;
      border-radius: 14px;
      cursor:pointer;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      gap:8px;
    }
    .btn-mini:hover{
      transform: translateY(-2px);
      box-shadow:0 0 26px rgba(255,215,0,.25);
      background: rgba(255,215,0,.14);
    }
    .btn-mini.primary{
      background: linear-gradient(135deg,#FFFF00,#FFD700);
      color:#000;
      border:none;
    }
    .btn-mini.primary:hover{ box-shadow:0 0 36px rgba(255,215,0,.55); }
    .btn-mini.wa{
      border-color: rgba(37,211,102,.85);
      color:#25D366;
    }
    .btn-mini.wa:hover{ box-shadow:0 0 28px rgba(37,211,102,.25); background: rgba(37,211,102,.10); }
    .btn-mini.disabled, .btn-mini:disabled{
      opacity:.55;
      cursor:not-allowed;
      transform:none;
      box-shadow:none;
    }

    .tabs{
      display:flex; gap:10px; justify-content:center;
      margin: 10px 0 6px;
      flex-wrap:wrap;
    }
    .tab{
      padding: 10px 18px;
      border-radius: 999px;
      border:1px solid rgba(255,215,0,.55);
      background: rgba(0,0,0,.35);
      color:#FFD700;
      font-weight:900;
      cursor:pointer;
      letter-spacing:1px;
      text-transform:uppercase;
    }
    .tab.active{
      background: linear-gradient(135deg,#FFFF00,#FFD700);
      color:#000;
      border-color:transparent;
      box-shadow:0 0 24px rgba(255,215,0,.25);
    }

    .pro-img{
      width: 100%;
      height: 200px;
      object-fit: cover;
      border-radius: 14px;
      border:1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.04);
    }

    /* ===== Modals (gold theme) ===== */
    .modal{
      position:fixed; inset:0;
      background: rgba(0,0,0,.72);
      backdrop-filter: blur(10px);
      display:none;
      align-items:center;
      justify-content:center;
      z-index: 1200;
      padding: 16px;
    }
    .modal.open{ display:flex; }
    .sheet{
      width: min(560px, 96vw);
      background: rgba(0,0,0,.85);
      border:2px solid rgba(255,215,0,.75);
      border-radius: 20px;
      box-shadow: 0 30px 120px rgba(0,0,0,.75);
      overflow:hidden;
    }
    .sheethead{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding: 14px 16px;
      border-bottom:1px solid rgba(255,255,255,.10);
    }
    .sheethead b{
      color:#FFFF00;
      letter-spacing:1px;
      text-transform:uppercase;
    }
    .sheethead .x{
      width: 44px; height: 44px;
      border-radius: 14px;
      border:1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.06);
      color:#fff;
      cursor:pointer;
    }
    .sheethead .x:hover{
      border-color: rgba(255,215,0,.35);
      box-shadow:0 0 26px rgba(255,215,0,.12);
    }
    .sheetbody{ padding: 16px; }
    .ta{
      width:100%;
      min-height: 110px;
      padding: 12px 14px;
      border-radius: 14px;
      background: rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.14);
      color:#fff;
      outline:none;
      resize: vertical;
    }
    .ta:focus{
      border-color:#FFFF00;
      box-shadow:0 0 26px rgba(255,215,0,.18);
    }
    .tiny{ color: rgba(255,255,255,.75); font-size: .95rem; line-height:1.55; }
    .grid-mini{ display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }


.map-frame{
  width:100%;
  height: 190px;
  border-radius: 18px;
  overflow:hidden;
  margin-top: 14px;
  border: 1px solid rgba(255,215,0,.28);
  background: rgba(0,0,0,.35);
  box-shadow: 0 0 22px rgba(255,215,0,.10);
}
.map-frame iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}


    .pwd-hint{ font-size:.92rem; color: rgba(255,255,255,.70); line-height:1.55; }
    .pwd-row{ display:grid; gap:6px; margin-top: 10px; }
    .pwd-row label{
      color:#FFD700;
      font-weight:900;
      letter-spacing:1px;
      text-transform:uppercase;
      font-size:.82rem;
    }
    .pwd-row input{
      width:100%;
      padding: 12px 14px;
      border-radius: 14px;
      background: rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.14);
      color:#fff;
      outline:none;
    }
    .pwd-msg{
      margin-top: 12px;
      min-height: 20px;
      color: rgba(255,255,255,.85);
      font-weight:700;
    }

    /* --- Navbar fixes v3 (look like 90% zoom @100% + no solape) --- */
    /* Convertimos navbar a grid: marca | menú (scroll si falta) | auth */
    .navbar{
      display: grid !important;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      column-gap: 18px;
      row-gap: 0;
      min-height: 78px;
      height: auto;
      flex-wrap: nowrap !important; /* anulamos wraps previos */
    }
    .brand{min-width: 260px;}
    .nav-left{
      min-width: 0 !important;
      display: flex;
      flex-wrap: nowrap !important;
      justify-content: flex-start;
      overflow-x: auto;         /* si no cabe, scroll horizontal */
      overflow-y: hidden;
      scrollbar-width: none;    /* Firefox */
      -ms-overflow-style: none; /* IE/Edge legacy */
      padding-right: 6px;
      gap: 10px;
    }
    .nav-left::-webkit-scrollbar{display:none;}

    /* Compactamos para “sensación 90% zoom” */
    .brand-badge{width:40px;height:40px;border-radius:13px;}
    .brand-logo{width:30px;height:30px;}
    .brand-title{font-size: 1.05rem; letter-spacing: 2px;}
    .brand-sub{font-size: .86rem;}
    .nav-item{
      padding: 9px 14px;
      font-size: .92rem;
      letter-spacing: 1.5px;
      border-radius: 15px;
    }
    .btn-auth{
      padding: 11px 16px;
      font-size: .92rem;
      border-radius: 18px;
      white-space: nowrap;
    }

    /* En resoluciones medias: ocultamos subtítulo para dejar aire */
    /* En móviles: permitimos 2 filas (menú abajo) porque el scroll en móvil es incómodo */
    /* =========================================================
   ✅ NAVBAR (FIX DEFINITIVO)
   - Todo en 1 sola línea
   - Si no entra: scroll horizontal suave (sin romper)
   ========================================================= */
.navbar{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:0 4% !important;
  height:86px !important;
  min-height:86px;
  flex-wrap:nowrap;
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
  flex:0 0 auto;
}

.brand-sub{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:280px;}

.nav-left{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
  white-space:nowrap;
  padding:0 6px;
}
.nav-left::-webkit-scrollbar{display:none;}

.nav-right{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}

.nav-item{
  padding:8px 12px;
  font-size:clamp(.74rem, 0.85vw, .92rem);
  letter-spacing:1.15px;
  border-radius:16px;
  white-space:nowrap;
}

.btn-auth{
  padding:10px 14px;
  font-size:clamp(.74rem, 0.9vw, .92rem);
  border-radius:18px;
  white-space:nowrap;
}

.more-menu{flex:0 0 auto;}
.nav-spacer{display:none !important;}

/* ===== Sorteos de Agentes (HOME) - Slider 3D CENTRADO ===== */
.sorteos3d-wrap{
  width: min(1200px, 92vw);
  margin: 50px auto 40px auto;
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

.sorteos3d-wrap:empty{
  display: none !important;
}

.sorteos3d{
  position: relative;
  width: 100%;
  max-width: 920px;
  height: clamp(280px, 40vw, 500px);
  perspective: 1400px;
  border: 1px solid rgba(255, 230, 0, .25);
  border-radius: 22px;
  overflow: hidden;
  background: rgba(0,0,0,.22);
  box-shadow: 0 0 40px rgba(255, 230, 0, .10) inset, 0 14px 40px rgba(0,0,0,.55);
  margin: 0 auto;
}

.sorteos3d-track{
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.sorteos3d-slide{
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(920px, 90vw);
  height: 88%;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%);
  transition: transform 700ms cubic-bezier(.2,.8,.2,1), opacity 700ms ease, filter 700ms ease;
  border-radius: 18px;
  overflow: hidden;
  will-change: transform;
  box-shadow: 0 10px 40px rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}


.sorteos3d-slide::before{
  content:"";
  position:absolute;
  inset:-30px;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  filter: blur(18px) brightness(.55);
  transform: scale(1.15);
  z-index: 0;
}
.sorteos3d-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  position: relative;
  z-index: 1;
  filter: saturate(1.08) contrast(1.02);
}

.sorteos3d-slide::after{
  content:"";
  position:absolute;
  inset:0;
  box-shadow: 0 0 0 1px rgba(255,230,0,.20) inset, 0 0 60px rgba(255,230,0,.10) inset;
  pointer-events:none;
}

.sorteos3d-slide.is-center{ opacity: 1; filter: none; }
.sorteos3d-slide.is-side{ opacity: .75; filter: saturate(.85) brightness(.85); }

.sorteos3d-nav{
  position:absolute;
  inset: 0;
  pointer-events:none;
}

.sorteos3d-btn{
  pointer-events:auto;
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255,230,0,.35);
  background: rgba(0,0,0,.35);
  color: rgba(255,230,0,.95);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  backdrop-filter: blur(8px);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  font-size: 26px;
  line-height: 1;
}

.sorteos3d-btn:hover{
  transform: translateY(-50%) scale(1.05);
  background: rgba(0,0,0,.55);
  border-color: rgba(255,230,0,.6);
}

.sorteos3d-btn:active{ transform: translateY(-50%) scale(.98); }

.sorteos3d-btn.prev{ left: 12px; }
.sorteos3d-btn.next{ right: 12px; }

.sorteos3d-dots{
  position:absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display:flex;
  gap: 8px;
  pointer-events:auto;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,230,0,.18);
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(8px);
}

.sorteos3d-dot{
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: rgba(255,230,0,.25);
  border: 1px solid rgba(255,230,0,.15);
  cursor:pointer;
  transition: transform .15s ease, background .15s ease;
}
.sorteos3d-dot.is-active{
  background: rgba(255,230,0,.95);
  transform: scale(1.25);
}

.sorteos3d-caption{
  position:absolute;
  left:14px;
  top:12px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(0,0,0,.48);
  border:1px solid rgba(255,255,255,.12);
  font-size:.72rem;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:#fff;
  pointer-events:none;
}

.brand-sub{display:none !important;}
.brand-title{
  font-size: 1.30rem !important;
  letter-spacing: 3.5px !important;
}


    /* ===========================
       AYUDAS SOLIDARIAS (mejor UI)
    ============================ */
    .ayudas-section{ padding: 60px 5%; }
    .ayudas-header{ text-align:center; margin-bottom: 28px; }
    .ayudas-title{
      font-size: 3.2rem;
      color: #FFFF00;
      text-shadow: 0 0 30px rgba(255,215,0,0.8);
      margin: 0 0 10px;
      letter-spacing: .06em;
    }
    .ayudas-subtitle{
      font-size: 1.15rem;
      color: #FFD700;
      max-width: 980px;
      margin: 0 auto;
      line-height: 1.8;
      opacity: .95;
    }
    .ayudas-cta{ margin-top:14px; display:flex; justify-content:center; }
    .ayudas-storyBtn{
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:10px 14px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.06);
      color:#fff;
      transition:.18s ease;
    }
    .ayudas-storyBtn:hover{ transform: translateY(-1px); background:rgba(255,255,255,.10); }

    .ayudas-gridWrap{ max-width: 1160px; margin: 0 auto; }

/* Cards más grandes, tipo “imagen a un lado + texto al lado” */
.ayudas-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(520px, 1fr));
  gap: 18px;
  justify-content:center;
}

/* Card horizontal */
.ayuda-card{
  display:flex;
  align-items:stretch;
  border:1px solid rgba(255,215,0,.30);
  background:rgba(0,0,0,.35);
  border-radius:22px;
  overflow:hidden;
  backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(255,215,0,.06), 0 18px 60px rgba(0,0,0,.55);
  position:relative;
  min-height: 230px;
}
.ayuda-card::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(520px 240px at 20% 0%, rgba(255,215,0,.18), transparent 65%);
  pointer-events:none;
}

/* Imagen a la izquierda */
.ayuda-imgWrap{
  width: 42%;
  min-width: 220px;
  background:#0b0b0b;
  position:relative;
  overflow:hidden;
}
.ayuda-imgWrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  filter: contrast(1.05) saturate(1.05);
}
.ayuda-imgWrap::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:55%;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,.78));
}

/* Contenido a la derecha */
.ayuda-body{
  flex:1;
  padding:16px 18px 18px;
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
}

.ayuda-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:8px;
}
.ayuda-date{
  font-size:12px;
  color:#d6d6d6;
  opacity:.85;
  white-space:nowrap;
  margin-top:2px;
}

.ayuda-title,
.ayuda-name{
  font-size:18px;
  font-weight:900;
  letter-spacing:.5px;
  margin:0 0 6px;
  color:#ffd700;
  text-transform:uppercase;
}
.ayuda-story{
  margin:0 0 12px;
  color:#e7e7e7;
  opacity:.92;
  line-height:1.35;
  font-size:14.5px;
  display:-webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow:hidden;
}
.ayuda-meta{
  opacity:.78;
  font-size:12px;
  color:#d6d6d6;
  margin-top:auto; /* empuja meta + botones abajo */
}
.ayuda-actions{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }
.ayuda-btn{
  cursor:pointer;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:10px 12px;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:.18s ease;
}
.ayuda-btn:hover{ transform: translateY(-1px); background:rgba(255,255,255,.12); }
.ayuda-btn.primary{
  background: rgba(255,214,0,.18);
  color:#ffd600;
  border-color: rgba(255,214,0,.35);
}
.ayuda-btn.primary:hover{ background: rgba(255,214,0,.26); }

.ayudas-empty{ opacity:.75; margin-top:12px; font-size:13px; text-align:center; }

/* Responsive: en móvil se apilan */
/* =========================================================
   ✅ FIX solicitado: 
   1) Barra visible para desplazarte LADO A LADO en la navbar
   2) Scroll hacia ABAJO en "Ayudas" (y secciones overlay) sin que se tape
   - Solo sobreescribe estilos existentes (no rompe lógica)
   ========================================================= */

/* 1) Navbar: mostrar scrollbar horizontal (antes estaba oculto) */
.nav-left{
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(255,215,0,.45) rgba(0,0,0,.25);
}
.nav-left::-webkit-scrollbar{
  display:block !important;
  height: 7px;
}
.nav-left::-webkit-scrollbar-track{
  background: rgba(0,0,0,.25);
  border-radius: 999px;
}
.nav-left::-webkit-scrollbar-thumb{
  background: rgba(255,215,0,.45);
  border-radius: 999px;
  border: 1px solid rgba(255,215,0,.25);
}
.nav-left::-webkit-scrollbar-thumb:hover{
  background: rgba(255,215,0,.65);
}

/* 2) Secciones overlay (Agentes/Agencias/Productos/Feed/Apuestas/Ayudas):
   más padding abajo para que NO lo tapen los widgets fijos (VIP + solidario)
   y scroll suave en móvil */
.section-overlay{
  -webkit-overflow-scrolling: touch;
  padding-bottom: 240px;
}

/* Ajuste extra en pantallas pequeñas */
/* =========================================================
   ✅ BOTÓN ESPECIAL SOLO PARA "ÚNETENOS" (NAVBAR)
   - No afecta a ningún otro item del menú
   - Estilo núcleo neón (adaptado a paleta ECUABET)
   ========================================================= */
.nav-item.join-core{
  position:relative;
  background:linear-gradient(135deg,#fff25a 0%, #ffd400 52%, #f3c300 100%);
  color:#050505;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:2px;
  padding:14px 26px;
  border:1px solid rgba(255,235,90,.92);
  border-radius:50px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:12px;
  z-index:1;
  box-shadow:0 10px 28px rgba(255,215,0,.34), 0 0 22px rgba(255,215,0,.18);
  transform:none;
}

.nav-item.join-core::before{
  content:'';
  position:absolute;
  inset:-3px;
  border-radius:50px;
  background:linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,245,120,.90), rgba(255,210,0,.20));
  filter:blur(10px);
  opacity:.75;
  z-index:-2;
}

.nav-item.join-core::after{
  content:'';
  position:absolute;
  inset:1px;
  border-radius:48px;
  background:linear-gradient(135deg,rgba(255,255,255,.18), rgba(255,255,255,0));
  z-index:-1;
}

@keyframes join-core-spin{
  0%{ background-position:0% 50%; }
  100%{ background-position:200% 50%; }
}

.nav-item.join-core .join-icon{
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid #050505;
  position:relative;
  flex:0 0 auto;
  box-shadow:none;
}
.nav-item.join-core .join-icon::after{
  content:'';
  position:absolute;
  inset:4px;
  border-radius:50%;
  background:#050505;
  box-shadow:none;
}

.nav-item.join-core:hover{
  color:#050505;
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(255,215,0,.42), 0 0 26px rgba(255,215,0,.22);
}
.nav-item.join-core:hover::after{
  background:linear-gradient(135deg,rgba(255,255,255,.28), rgba(255,255,255,.04));
}
.nav-item.join-core:hover .join-icon{
  border-color:#050505;
}
.nav-item.join-core:hover .join-icon::after{
  background:#050505;
}

/* Ajuste compacto para que no reviente en móvil */
/* =========================================================
   ✅ FIX NAVBAR EXTREMOS (NO SE TAPA IZQ/DER)
   - Mantiene visible el botón de la derecha (Iniciar sesión / Salir)
   - Evita que el menú se vaya “hasta el máximo” y se corte
   - Solo CSS (no toca JS ni lógica)
   ========================================================= */
.navbar{
  padding-left:16px !important;
  padding-right:16px !important;
  overflow:hidden;              /* evita desbordes horizontales del nav completo */
}

/* El menú scrollea, pero arranca alineado a la izquierda */
.nav-left{
  justify-content:flex-start !important;
  padding-left:8px !important;
  padding-right:14px !important; /* espacio antes del bloque derecho */
  scroll-padding-left:12px;
  scroll-padding-right:12px;
}

/* Mantén el bloque derecho “pegado” y siempre visible */
.nav-right{
  position:sticky;
  right:0;
  z-index:3;
  padding-left:12px;
  background:rgba(0,0,0,.86);
  backdrop-filter:blur(10px);
  border-left:1px solid rgba(255,215,0,.18);
  border-top-left-radius:14px;
  border-bottom-left-radius:14px;
}

/* En pantallas pequeñas no pegamos sticky para que no se vea raro */
/* =========================================================
   ✅ FIX DEFINITIVO (MÓVIL): CSS limpio + compacto real
   - Se eliminó el bloque roto que estaba dejando el <style> inválido.
   - Este bloque va al FINAL y gana por especificidad + !important.
   ========================================================= */

/* =========================================================
   FIX SOLO BOTON MAS
   ========================================================= */
.navbar{overflow:visible !important;}
#moreMenu{position:relative; z-index:200001; overflow:visible;}
#moreMenu .more-btn{position:relative; z-index:200002;}
#moreMenu .more-dropdown{
  display:none !important;
  position:fixed !important;
  top:0;
  left:0;
  right:auto !important;
  min-width:220px;
  max-width:min(280px, calc(100vw - 24px));
  z-index:200003 !important;
}
#moreMenu.open .more-dropdown{display:block !important;}



/* ===== 🔥 TRABAJA CON NOSOTROS - BORDE NEON GIRATORIO MÁXIMO 🔥 ===== */
.nav-item.join-core{
  position:relative !important;
  isolation:isolate;
  overflow:visible !important;
  background:linear-gradient(135deg,#FFFF00 0%, #FFD700 50%, #FFEB3B 100%) !important;
  background-size:200% 200%;
  color:#000000 !important;
  border:2px solid transparent !important;
  border-radius:50px !important;
  padding:14px 28px !important;
  font-weight:1000 !important;
  letter-spacing:2.2px !important;
  text-transform:uppercase !important;
  font-size:1.1rem !important;
  cursor:pointer;
  display:inline-flex !important;
  align-items:center !important;
  gap:12px !important;
  box-shadow:
    0 0 20px rgba(255,255,0,0.9),
    0 0 40px rgba(255,215,0,0.7),
    0 0 60px rgba(255,235,59,0.5),
    0 8px 32px rgba(255,215,0,0.5),
    inset 0 0 20px rgba(255,255,255,0.25) !important;
  animation:joinPulsate 1.8s ease-in-out infinite !important;
  transition:all 0.3s ease !important;
}

/* ✨ BORDE NEON GIRATORIO - SOLO AMARILLO Y DORADO ✨ */
.nav-item.join-core::before{
  content:'' !important;
  position:absolute;
  inset:-8px;
  border-radius:50px;
  padding:3px;
  background:conic-gradient(
    from 0deg,
    #FFFF00 0deg,
    #FFD700 30deg,
    #FFEB3B 60deg,
    #FFFF00 90deg,
    #FFD700 120deg,
    #FFEB3B 150deg,
    #FFFF00 180deg,
    #FFD700 210deg,
    #FFEB3B 240deg,
    #FFFF00 270deg,
    #FFD700 300deg,
    #FFEB3B 330deg,
    #FFFF00 360deg
  );
  filter:blur(8px) brightness(1.5);
  opacity:0.95 !important;
  animation:neonBorderSpin 2.5s linear infinite !important;
  z-index:-2 !important;
}

/* 🎨 FONDO INTERIOR GRADIENTE - SOLO AMARILLOS DORADOS ✨ */
.nav-item.join-core::after{
  content:'' !important;
  position:absolute;
  inset:-5px;
  border-radius:50px;
  background:linear-gradient(135deg,#FFFF00, #FFD700, #FFEB3B);
  filter:blur(12px);
  opacity:0.75 !important;
  z-index:-3 !important;
  animation:neonGlow 2s ease-in-out infinite !important;
}

/* Icono especial */
.nav-item.join-core .join-icon{
  width:22px;
  height:22px;
  border-radius:50%;
  border:2.5px solid #000000;
  position:relative;
  flex:0 0 auto;
  animation:iconBounce 1.8s ease-in-out infinite;
}

.nav-item.join-core .join-icon::after{
  content:'' !important;
  position:absolute;
  inset:5px;
  border-radius:50%;
  background:#000000;
  animation:iconSpin 3s linear infinite;
}

/* ESTADO HOVER - MODO MÁXIMO */
.nav-item.join-core:hover{
  transform:translateY(-4px) scale(1.08) !important;
  letter-spacing:3px !important;
  box-shadow:
    0 0 30px rgba(255,255,0,1),
    0 0 50px rgba(255,215,0,0.95),
    0 0 70px rgba(255,235,59,0.7),
    0 12px 40px rgba(255,215,0,0.7),
    inset 0 0 25px rgba(255,255,255,0.35) !important;
}

.nav-item.join-core:hover::before{
  animation:neonBorderSpin 1.2s linear infinite !important;
  filter:blur(10px) brightness(1.8);
  opacity:1 !important;
  inset:-10px;
}

.nav-item.join-core:hover::after{
  animation:neonGlow 1s ease-in-out infinite !important;
  opacity:0.95 !important;
}

.nav-item.join-core:hover .join-icon{
  animation:iconBounce 0.9s ease-in-out infinite;
  box-shadow:0 0 0 3px rgba(255,255,0,0.6), 0 0 12px rgba(255,215,0,1);
}

.nav-item.join-core:active{
  transform:translateY(-2px) scale(1.05) !important;
  box-shadow:
    0 0 40px rgba(255,255,0,1),
    0 0 60px rgba(255,215,0,1),
    0 0 80px rgba(255,235,59,0.8),
    0 6px 30px rgba(255,215,0,0.8),
    inset 0 0 30px rgba(255,255,255,0.4) !important;
}

/* 🎬 ANIMACIONES - PALETA ÚNICA 🎬 */
@keyframes neonBorderSpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

@keyframes neonGlow{
  0%, 100%{
    box-shadow:
      0 0 15px rgba(255,255,0,0.6),
      0 0 25px rgba(255,215,0,0.4);
    opacity:0.7;
  }
  50%{
    box-shadow:
      0 0 30px rgba(255,255,0,0.9),
      0 0 50px rgba(255,215,0,0.7);
    opacity:0.95;
  }
}

@keyframes joinPulsate{
  0%, 100%{
    background-position:0% 50%;
    box-shadow:
      0 0 20px rgba(255,255,0,0.9),
      0 0 40px rgba(255,215,0,0.7),
      0 0 60px rgba(255,235,59,0.5),
      0 8px 32px rgba(255,215,0,0.5),
      inset 0 0 20px rgba(255,255,255,0.25);
  }
  50%{
    background-position:100% 50%;
    box-shadow:
      0 0 30px rgba(255,255,0,1),
      0 0 50px rgba(255,215,0,0.9),
      0 0 80px rgba(255,235,59,0.6),
      0 10px 40px rgba(255,215,0,0.6),
      inset 0 0 25px rgba(255,255,255,0.35);
  }
}

@keyframes iconBounce{
  0%, 100%{transform:translateY(0px) scale(1)}
  50%{transform:translateY(-3px) scale(1.1)}
}

@keyframes iconSpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

/* ===== Cards de apuestas públicas mejoradas ===== */
.bet-card{
  position:relative;
  min-height:280px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
}
.bet-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(420px 180px at 100% 0%, rgba(255,90,90,.13), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  pointer-events:none;
}
.bet-card::after{
  content:'';
  position:absolute;
  right:-24px;
  bottom:-28px;
  width:118px;
  height:118px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,215,0,.14), rgba(255,215,0,0));
  pointer-events:none;
}
.bet-card-head,
.bet-card-meta,
.bet-card-odds,
.bet-card-desc,
.bet-card-foot{position:relative; z-index:1;}
.bet-card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  margin-top:2px;
}
.bet-card-badgewrap{display:flex; flex-direction:column; gap:10px;}
.bet-card-badgewrap .badge{margin-bottom:0; align-self:flex-start;}
.bet-card-title{
  font-size:2rem;
  line-height:1;
  color:#ffd0d0;
  text-transform:uppercase;
  letter-spacing:1.2px;
  text-shadow:0 0 14px rgba(255,90,90,.18);
}
.bet-card-icon{
  width:58px;
  height:58px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, rgba(255,214,0,.16), rgba(255,80,80,.10));
  border:1px solid rgba(255,214,0,.22);
  box-shadow:0 0 22px rgba(255,214,0,.10);
  flex:0 0 auto;
}
.bet-card-icon svg{width:30px;height:30px;display:block;}
.bet-card-meta{
  display:grid;
  gap:8px;
  margin-top:14px;
}
.bet-card-line{
  display:flex;
  align-items:center;
  gap:8px;
  color:rgba(255,255,255,.88);
  font-size:1rem;
}
.bet-card-line i{width:16px; text-align:center; color:#ffe26b;}
.bet-card-odds{
  margin-top:16px;
  padding:14px 15px;
  border-radius:16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  background:linear-gradient(135deg, rgba(255,210,0,.10), rgba(120,0,0,.18));
  border:1px solid rgba(255,214,0,.24);
  box-shadow:inset 0 0 24px rgba(255,214,0,.06);
}
.bet-card-odds-label{
  display:flex;
  flex-direction:column;
  gap:6px;
  color:rgba(255,255,255,.82);
  font-size:.84rem;
  text-transform:uppercase;
  letter-spacing:1.1px;
}
.bet-card-odds-label strong{color:#fff1a6;font-size:1.05rem;letter-spacing:.4px;text-transform:none;}
.bet-card-code{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  font-size:.78rem;
  color:#fff;
  max-width:100%;
}
.bet-card-code b{color:#ffe05b;}
.bet-card-cuota{
  font-size:2rem;
  font-weight:1000;
  line-height:1;
  color:#fff16a;
  text-shadow:0 0 18px rgba(255,215,0,.20);
  flex:0 0 auto;
}
.bet-card-desc{
  margin-top:14px;
  padding:13px 14px;
  border-radius:15px;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.08);
  color:#f0dddd;
  line-height:1.62;
  min-height:92px;
}
.bet-card-foot{
  margin-top:16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.bet-card-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 11px;
  border-radius:999px;
  background:rgba(255,214,0,.10);
  border:1px solid rgba(255,214,0,.18);
  color:#ffe978;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.7px;
  text-transform:uppercase;
}
.bet-card .pro-actions{margin-top:0; justify-content:flex-end;}
.bet-card .btn-mini{min-width:142px; justify-content:center;}
html{ -webkit-text-size-adjust:100%; }
  img,svg,video,canvas,iframe{ max-width:100%; height:auto; }
  .navbar,.main-content,.section,.hero{ max-width:100%; }
  .section-overlay{ overscroll-behavior:contain; }

  #vipFloat.vip-float{
    width:min(272px, calc(100vw - 28px));
    right:14px;
    bottom:14px;
  }
  #vipFloat .vip-content{
    padding:11px 11px 10px;
    border-radius:14px;
  }
  #vipFloat .vip-lock{
    width:30px;
    height:30px;
    border-radius:9px;
  }
  #vipFloat .vip-title{ font-size:11px; letter-spacing:.8px; }
  #vipFloat .vip-sub{ font-size:11px; }
  #vipFloat .vip-odd{ padding:9px 10px; border-radius:11px; margin-bottom:8px; }
  #vipFloat #vipCuota{ font-size:18px; }
  #vipFloat .vip-stake-row,
  #vipFloat .vip-countdown-row{ font-size:10px; }
  #vipFloat .vip-stake-bar{ height:5px; }
  #vipFloat .vip-chip{ padding:6px 9px; font-size:10px; }
  #vipFloat .vip-btn{ padding:10px 10px; font-size:.8rem; margin-top:8px; }
  #vipFloat .vip-btn svg{ width:14px; height:14px; }

  .nav-mobile-top,
  .nav-mobile-bottom{
    display:contents;
  }

  /* ===== Ajustes solicitados (navbar + feed en inicio + agencias + zoom img) ===== */
.nav-item-hidden,
.sidebar-menu-item.nav-item-hidden{
  display:none !important;
}

.inicio-feed-block{
  margin-top:80px;
  padding:30px 24px;
  border-radius:22px;
  border:1px solid rgba(255,215,0,.35);
  background:
    radial-gradient(circle at 10% 10%, rgba(255,215,0,.12), transparent 46%),
    linear-gradient(145deg, rgba(8,8,8,.86), rgba(18,18,18,.78));
  box-shadow:0 20px 55px rgba(0,0,0,.45), 0 0 28px rgba(255,215,0,.08);
}
.inicio-feed-head{
  margin-bottom:14px;
}
.inicio-feed-head h2{
  margin:0 0 8px;
  font-size:2rem;
  letter-spacing:1px;
  color:#ffe75a;
  text-transform:uppercase;
}
.inicio-feed-head p{
  margin:0 0 14px;
  color:rgba(255,255,255,.82);
}

.pro-card.pro-card-agencia{
  background:
    radial-gradient(circle at 15% 10%, rgba(255,224,102,.18), transparent 45%),
    linear-gradient(165deg, rgba(20,20,20,.9), rgba(8,8,8,.92));
  border:1px solid rgba(255,215,0,.55);
  box-shadow:
    0 16px 36px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.02) inset,
    0 0 24px rgba(255,215,0,.14);
}
.pro-card.pro-card-agencia::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:18px;
  padding:1px;
  background:linear-gradient(130deg, rgba(255,255,0,.88), rgba(255,215,0,.2), rgba(255,255,0,.85));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.8;
  pointer-events:none;
}
.pro-card.pro-card-agencia:hover{
  transform:translateY(-8px) scale(1.01);
  box-shadow:0 22px 55px rgba(255,215,0,.22), 0 24px 42px rgba(0,0,0,.45);
}
.pro-card.pro-card-agencia .title{
  color:#fff06b;
  text-shadow:0 0 14px rgba(255,215,0,.2);
}
.pro-card.pro-card-agencia .tiny{
  color:rgba(255,255,255,.83);
}
.pro-card.pro-card-agencia .map-frame{
  border-color:rgba(255,255,0,.36);
  box-shadow:0 0 18px rgba(255,215,0,.18);
}

.main-content img:not(.no-zoom){
  cursor:zoom-in;
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.main-content img:not(.no-zoom):hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(0,0,0,.4), 0 0 24px rgba(255,215,0,.18);
  filter:saturate(1.06);
}

.img-lightbox{
  position:fixed;
  inset:0;
  z-index:2500;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(8px);
}
.img-lightbox.open{ display:flex; }
.img-lightbox-close{
  position:absolute;
  top:18px;
  right:18px;
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:26px;
  line-height:1;
  cursor:pointer;
}
.img-lightbox-close:hover{
  border-color:rgba(255,215,0,.5);
  box-shadow:0 0 20px rgba(255,215,0,.25);
}
.img-lightbox-image{
  max-width:min(1200px, 94vw);
  max-height:82vh;
  width:auto;
  height:auto;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 30px 90px rgba(0,0,0,.6), 0 0 35px rgba(255,215,0,.22);
}
.img-lightbox-caption{
  position:absolute;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  max-width:min(1100px, 92vw);
  text-align:center;
  color:rgba(255,255,255,.92);
  font-weight:700;
  letter-spacing:.4px;
}

/* ===== Navbar clean + botón trabajo snake ===== */
.brand-title{ display:none !important; }
.nav-logo-main{
  display:block;
  width:clamp(130px, 15vw, 250px);
  max-height:56px;
  object-fit:contain;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.35));
}

.navbar{
  background:rgba(5,5,5,.9) !important;
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,215,0,.45) !important;
  box-shadow:0 8px 24px rgba(0,0,0,.45) !important;
}

.nav-left .nav-item{
  background:rgba(255,215,0,.08) !important;
  border:1px solid rgba(255,215,0,.34) !important;
  box-shadow:none !important;
  color:#ffe96b !important;
  text-shadow:none !important;
}
.nav-left .nav-item::before,
.nav-left .nav-item::after{
  content:none !important;
  display:none !important;
}
.nav-left .nav-item:hover{
  background:rgba(255,215,0,.18) !important;
  border-color:rgba(255,235,125,.7) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset, 0 6px 18px rgba(255,215,0,.18) !important;
  transform:translateY(-1px);
}
.nav-left .nav-item.active{
  background:linear-gradient(135deg,#ffef62,#ffd322) !important;
  color:#111 !important;
  border-color:transparent !important;
  box-shadow:0 10px 22px rgba(255,215,0,.3) !important;
}

.nav-mobile-bottom .join-core{
  position:relative !important;
  isolation:isolate;
  overflow:hidden !important;
  border-radius:999px !important;
  border:1px solid transparent !important;
  padding:12px 22px !important;
  background:linear-gradient(145deg,#090909,#121212) !important;
  color:#fff06a !important;
  text-shadow:none !important;
  letter-spacing:1.1px !important;
  font-weight:900 !important;
  box-shadow:0 12px 28px rgba(0,0,0,.5), 0 0 20px rgba(255,215,0,.14) !important;
}
.nav-mobile-bottom .join-core::before{
  content:"";
  position:absolute;
  inset:-140%;
  background:conic-gradient(
    from 0deg,
    transparent 0deg 70deg,
    rgba(255,255,0,.9) 92deg 120deg,
    rgba(255,215,0,1) 130deg 165deg,
    transparent 190deg 360deg
  );
  animation:joinSnakeSpin 3.2s linear infinite;
  z-index:0;
}
.nav-mobile-bottom .join-core::after{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:999px;
  background:linear-gradient(145deg,#090909,#161616);
  z-index:1;
}
.nav-mobile-bottom .join-core > *,
.nav-mobile-bottom .join-core{
  position:relative;
  z-index:2;
}
.nav-mobile-bottom .join-core:hover{
  transform:translateY(-2px) scale(1.01) !important;
  color:#fff36f !important;
  box-shadow:0 14px 32px rgba(0,0,0,.55), 0 0 28px rgba(255,215,0,.28) !important;
}
.nav-mobile-bottom .join-core .join-icon{
  width:18px !important;
  height:18px !important;
  border:2px solid #ffe153 !important;
  box-shadow:0 0 12px rgba(255,215,0,.38);
}
.nav-mobile-bottom .join-core .join-icon::after{
  background:#ffe153 !important;
}

@keyframes joinSnakeSpin{
  to{ transform:rotate(360deg); }
}

/* ===== Navbar estilo replica (adaptada a botones actuales) ===== */
.nav-live-strip{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:30px;
  z-index:1400;
  overflow:hidden;
  white-space:nowrap;
  background:linear-gradient(90deg, #07130c 0%, #181205 48%, #07130c 100%);
  border-bottom:1px solid rgba(204,255,0,.22);
  box-shadow:0 8px 20px rgba(0,0,0,.5), inset 0 -1px 0 rgba(255,215,0,.18);
}
.nav-live-strip::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.06) 20%, transparent 40%);
  animation:liveStripScan 6s linear infinite;
}
.nav-live-track{
  display:inline-flex;
  align-items:center;
  gap:34px;
  min-width:max-content;
  height:100%;
  padding:0 24px;
  animation:scrollTicker 24s linear infinite;
}
.nav-live-track span{
  color:#dfe7dc;
  font-weight:700;
  font-size:.8rem;
  letter-spacing:.9px;
  text-transform:uppercase;
  white-space:nowrap;
  text-shadow:0 0 8px rgba(0,0,0,.35);
}
.nav-live-track span:first-child{
  color:#ccff8a;
  font-weight:900;
}
#liveMsg2{
  color:#ffe27a;
}
@keyframes scrollTicker{
  0%{ transform:translateX(100%); }
  100%{ transform:translateX(-100%); }
}
@keyframes liveStripScan{
  0%{ transform:translateX(-120%); opacity:0; }
  12%{ opacity:.8; }
  40%,100%{ transform:translateX(180%); opacity:0; }
}

.navbar.navbar-pro-v2{
  top:30px !important;
  height:78px !important;
  min-height:78px !important;
  padding:0 26px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
  background:rgba(5,5,5,.85) !important;
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.05) !important;
  box-shadow:0 12px 24px rgba(0,0,0,.35), 0 0 18px rgba(255,215,0,.08) !important;
}
.navbar.navbar-pro-v2 .nav-spacer{ display:none !important; }
.navbar.navbar-pro-v2 .brand{
  flex:0 0 auto;
  margin-right:10px;
  display:flex;
  align-items:center;
}
.navbar.navbar-pro-v2 .nav-brand-pill{
  padding:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  display:flex;
  align-items:center;
}
.navbar.navbar-pro-v2 .nav-brand-pill .nav-logo-main{
  width:clamp(140px, 13vw, 220px);
  max-height:52px;
  object-fit:contain;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.35));
}

.navbar.navbar-pro-v2 .nav-mobile-top{
  flex:1;
  min-width:0;
  display:flex !important;
  align-items:center;
  gap:12px;
}
.navbar.navbar-pro-v2 .nav-left{
  flex:1;
  justify-content:center !important;
  gap:6px !important;
  overflow-x:auto;
}
.navbar.navbar-pro-v2 .nav-left .nav-item{
  background:transparent !important;
  border:1px solid transparent !important;
  border-radius:6px !important;
  color:#bcbcbc !important;
  box-shadow:none !important;
  text-transform:none !important;
  letter-spacing:.3px !important;
  font-size:.95rem !important;
  font-weight:700 !important;
  padding:8px 14px !important;
  transition:all .2s ease;
  text-decoration:none;
}
.navbar.navbar-pro-v2 .nav-left .nav-item::before,
.navbar.navbar-pro-v2 .nav-left .nav-item::after{
  display:none !important;
  content:none !important;
}
.navbar.navbar-pro-v2 .nav-left .nav-item:hover{
  color:#ffd700 !important;
  background:rgba(255,212,0,.05) !important;
  border-color:rgba(255,212,0,.2) !important;
  text-shadow:0 0 10px rgba(255,224,0,.45);
  transform:translateY(-1px);
}
.navbar.navbar-pro-v2 .nav-left .nav-item.active{
  background:linear-gradient(135deg,#ffe100,#ffd21f) !important;
  color:#111 !important;
  border-color:transparent !important;
  box-shadow:0 10px 22px rgba(255,214,0,.26) !important;
}

.navbar.navbar-pro-v2 .more-menu{ margin-left:4px; }
.navbar.navbar-pro-v2 .more-btn{ font-weight:800; }

.navbar.navbar-pro-v2 .nav-mobile-bottom{
  margin-left:auto;
  display:flex !important;
  align-items:center;
  gap:10px;
}
.navbar.navbar-pro-v2 .join-core{ display:none !important; }
.navbar.navbar-pro-v2 .nav-right{
  display:flex;
  align-items:center;
  gap:10px;
}
.navbar.navbar-pro-v2 .btn-work-cta{
  position:relative;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border-radius:0 !important;
  padding:12px 28px !important;
  min-width:268px;
  font-size:1rem;
  font-weight:900;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:#080808;
  border:2px solid rgba(255,245,170,.95) !important;
  background:linear-gradient(95deg,#fff9b8 0%,#ffe300 34%,#ffc900 68%,#ffb800 100%) !important;
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 12px 50%);
  box-shadow:0 0 0 1px rgba(255,255,255,.34) inset, 0 18px 34px rgba(255,214,0,.62), 0 0 26px rgba(255,224,0,.62), 0 6px 18px rgba(0,0,0,.5) !important;
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
  animation:workCtaHeroPulse 1.7s ease-in-out infinite;
  font-family:'Rajdhani',sans-serif;
}
.navbar.navbar-pro-v2 .btn-work-cta::before{
  content:"";
  position:absolute;
  inset:-10px;
  background:radial-gradient(circle, rgba(255,224,0,.7) 0%, rgba(255,224,0,.38) 35%, rgba(255,224,0,0) 72%);
  filter:blur(12px);
  z-index:-1;
  animation:workCtaAura 1.7s ease-in-out infinite;
}
.navbar.navbar-pro-v2 .btn-work-cta::after{
  content:"";
  position:absolute;
  inset:-190% -55%;
  background:linear-gradient(104deg, transparent 43%, rgba(255,255,255,.94) 50%, transparent 57%);
  transform:translateX(-130%) rotate(9deg);
  animation:workCtaSweep 2s linear infinite;
  pointer-events:none;
}
.navbar.navbar-pro-v2 .btn-work-cta:hover{
  transform:translateY(-2px) scale(1.04);
  filter:saturate(1.16) brightness(1.04);
  background:linear-gradient(95deg,#fffce0 0%,#ffef75 34%,#ffd335 67%,#ffc000 100%) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.4) inset, 0 24px 40px rgba(255,214,0,.72), 0 0 42px rgba(255,224,0,.78), 0 8px 20px rgba(0,0,0,.54) !important;
}
.navbar.navbar-pro-v2 .btn-work-cta:active{
  transform:translateY(0) scale(.99);
}
@keyframes workCtaHeroPulse{
  0%,100%{ box-shadow:0 0 0 1px rgba(255,255,255,.34) inset, 0 18px 34px rgba(255,214,0,.62), 0 0 26px rgba(255,224,0,.62), 0 6px 18px rgba(0,0,0,.5); }
  50%{ box-shadow:0 0 0 1px rgba(255,255,255,.52) inset, 0 26px 42px rgba(255,214,0,.84), 0 0 48px rgba(255,224,0,.82), 0 10px 24px rgba(0,0,0,.58); }
}
@keyframes workCtaAura{
  0%,100%{ opacity:.6; transform:scale(.98); }
  50%{ opacity:1; transform:scale(1.03); }
}
@keyframes workCtaSweep{
  0%{ transform:translateX(-130%) rotate(9deg); opacity:0; }
  10%{ opacity:.95; }
  42%,100%{ transform:translateX(140%) rotate(9deg); opacity:0; }
}
.navbar.navbar-pro-v2 .btn-auth{
  border-radius:50px !important;
  border:1px solid rgba(255,255,255,.15) !important;
  background:#111 !important;
  color:#f2f2f2 !important;
  box-shadow:none !important;
  font-size:.95rem !important;
  letter-spacing:.3px !important;
  text-transform:none !important;
  padding:9px 18px !important;
}
.navbar.navbar-pro-v2 .btn-auth:hover{
  background:#1f1f1f !important;
  border-color:rgba(255,215,0,.45) !important;
}
.navbar.navbar-pro-v2 .btn-auth.btn-register{
  background:linear-gradient(135deg,#ffe100,#ffd21f) !important;
  border:none !important;
  color:#111 !important;
  box-shadow:0 10px 24px rgba(255,214,0,.28) !important;
}
.navbar.navbar-pro-v2 .btn-auth.btn-register:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(255,214,0,.38) !important;
}

.navbar.navbar-pro-v2 .user-chip{
  border-radius:14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}

.navbar.navbar-pro-v2 .nav-hamburger{ display:none !important; }

.main-content{
  padding-top:140px !important;
}

/* ===== Override Final: CTA + Apuestas + Ayudas ===== */
.navbar.navbar-pro-v2 .btn-work-cta{
  position:relative !important;
  isolation:isolate;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:236px !important;
  padding:10px 20px !important;
  border-radius:4px !important;
  border:0 !important;
  color:#0b0b0b !important;
  font-size:.94rem !important;
  font-weight:1000 !important;
  letter-spacing:1.05px !important;
  text-transform:uppercase !important;
  text-decoration:none !important;
  background:transparent !important;
  box-shadow:0 10px 24px rgba(255,214,0,.28), 0 0 16px rgba(255,214,0,.22) !important;
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
}
.navbar.navbar-pro-v2 .btn-work-cta::before{
  content:"" !important;
  position:absolute !important;
  inset:-2px !important;
  border-radius:6px !important;
  background:conic-gradient(
    from 0deg,
    transparent 0deg 308deg,
    #fffce0 320deg 330deg,
    #ffe100 331deg 346deg,
    #ffbe00 347deg 360deg
  ) !important;
  animation:workSnakeBorder 1.15s linear infinite !important;
  pointer-events:none !important;
  z-index:-2 !important;
}
.navbar.navbar-pro-v2 .btn-work-cta::after{
  content:"" !important;
  position:absolute !important;
  inset:2px !important;
  border-radius:3px !important;
  background:linear-gradient(92deg,#fff8ad 0%,#ffe100 44%,#ffc800 100%) !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset !important;
  pointer-events:none !important;
  z-index:-1 !important;
}
.navbar.navbar-pro-v2 .btn-work-cta:hover{
  transform:translateY(-2px) scale(1.02) !important;
  filter:saturate(1.14) brightness(1.04) !important;
  box-shadow:0 16px 34px rgba(255,214,0,.46), 0 0 26px rgba(255,214,0,.52) !important;
}
.navbar.navbar-pro-v2 .btn-work-cta:active{
  transform:translateY(0) scale(.99) !important;
}
@keyframes workSnakeBorder{
  to{ transform:rotate(360deg); }
}

#gridApuestas.data-grid{
  grid-template-columns:repeat(auto-fit, minmax(360px, 1fr)) !important;
  gap:24px !important;
  align-items:stretch !important;
}
#gridApuestas .vip3d-wrapper{
  min-height:430px !important;
  height:100% !important;
}
#gridApuestas .vip3d-card{
  height:100% !important;
}
#gridApuestas .vip3d-content{
  padding:22px 18px !important;
}
#gridApuestas .vip3d-title{
  font-size:1.9rem !important;
  margin:6px 0 14px !important;
}
#gridApuestas .vip3d-oddbox{
  margin:14px 0 !important;
}
#gridApuestas .vip3d-desc{
  margin-top:10px !important;
  margin-bottom:12px !important;
}
#gridApuestas .bet-card{
  min-height:430px !important;
  padding:20px !important;
}
#gridApuestas .bet-card-title{
  font-size:1.75rem !important;
}
#gridApuestas .bet-card-cuota{
  font-size:1.9rem !important;
}
#gridApuestas .bet-card-desc{
  min-height:110px !important;
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.ayuda-card{
  min-height:250px !important;
}
.ayuda-imgWrap{
  width:44% !important;
  min-width:250px !important;
}
.ayuda-imgWrap img{
  cursor:zoom-in !important;
  position:relative;
  z-index:1;
}
.ayuda-imgWrap::after{
  pointer-events:none !important;
  z-index:2;
}
.ayuda-body{
  padding:18px 20px 18px !important;
}

/* ===== Final Visual Pass: CTA Snake + Sorteos Promo ===== */
.navbar.navbar-pro-v2 .btn-work-cta{
  position:relative !important;
  isolation:isolate !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:238px !important;
  height:46px !important;
  padding:0 18px !important;
  border-radius:2px !important;
  border:2px solid transparent !important;
  clip-path:none !important;
  animation:none !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  color:#111 !important;
  font-size:.88rem !important;
  font-weight:1000 !important;
  letter-spacing:1.15px !important;
  line-height:1 !important;
  text-transform:uppercase !important;
  text-decoration:none !important;
  background:linear-gradient(95deg,#fff8b8 0%, #ffe100 48%, #ffc700 100%) !important;
  box-shadow:0 12px 26px rgba(255,214,0,.32), 0 0 16px rgba(255,214,0,.24), inset 0 0 0 1px rgba(255,255,255,.22) !important;
  transition:transform .2s ease, filter .2s ease, box-shadow .2s ease !important;
  z-index:0 !important;
}
.navbar.navbar-pro-v2 .btn-work-cta .btn-work-cta__label{
  position:relative !important;
  z-index:4 !important;
  color:#101010 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.35) !important;
}
.navbar.navbar-pro-v2 .btn-work-cta::before{
  content:"" !important;
  position:absolute !important;
  inset:-2px !important;
  padding:2px !important;
  border-radius:3px !important;
  background:conic-gradient(
    from 0deg,
    transparent 0deg 270deg,
    rgba(255,255,255,.22) 278deg 292deg,
    #fff6ad 298deg 314deg,
    #ffe100 315deg 334deg,
    #ffbe00 335deg 352deg,
    transparent 353deg 360deg
  ) !important;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite:xor !important;
  mask-composite:exclude !important;
  animation:workSnakeTrace .95s linear infinite !important;
  pointer-events:none !important;
  z-index:2 !important;
}
.navbar.navbar-pro-v2 .btn-work-cta::after{
  content:none !important;
}
.navbar.navbar-pro-v2 .btn-work-cta:hover{
  transform:translateY(-2px) scale(1.02) !important;
  filter:saturate(1.14) brightness(1.03) !important;
  box-shadow:0 16px 34px rgba(255,214,0,.5), 0 0 26px rgba(255,214,0,.58), inset 0 0 0 1px rgba(255,255,255,.34) !important;
}
.navbar.navbar-pro-v2 .btn-work-cta:active{
  transform:translateY(0) scale(.99) !important;
}
@keyframes workSnakeTrace{
  to{ transform:rotate(360deg); }
}

#gridApuestas .pro-card.pro-card-user.bet-card{
  background:linear-gradient(160deg, rgba(70,53,9,.9) 0%, rgba(34,24,4,.92) 52%, rgba(16,12,3,.94) 100%) !important;
  border-color:rgba(255,214,86,.42) !important;
  box-shadow:0 14px 34px rgba(255,196,0,.16), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card::before{
  position:absolute !important;
  inset:0 !important;
  background:
    radial-gradient(420px 210px at 100% 0%, rgba(255,228,120,.15), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)) !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card:hover{
  box-shadow:0 22px 52px rgba(255,196,0,.22), inset 0 1px 0 rgba(255,255,255,.07) !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card .badge{
  background:linear-gradient(135deg,#fff1a8,#ffd200) !important;
  color:#1a1300 !important;
  box-shadow:0 10px 24px rgba(255,214,0,.24) !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card .bet-card-title{
  color:#ffe8aa !important;
  text-shadow:0 0 14px rgba(255,217,95,.2) !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card .bet-card-icon{
  background:linear-gradient(135deg, rgba(255,225,110,.2), rgba(255,185,30,.12)) !important;
  border-color:rgba(255,220,96,.36) !important;
  box-shadow:0 0 20px rgba(255,214,0,.16) !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card .bet-card-odds{
  background:linear-gradient(135deg, rgba(255,214,0,.14), rgba(121,88,13,.28)) !important;
  border-color:rgba(255,214,0,.3) !important;
  box-shadow:inset 0 0 20px rgba(255,214,0,.08) !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card .bet-card-code{
  background:rgba(255,232,160,.08) !important;
  border-color:rgba(255,225,110,.2) !important;
  color:#ffeec2 !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card .bet-card-desc{
  background:rgba(0,0,0,.2) !important;
  border-color:rgba(255,228,125,.15) !important;
  color:#f6e6bf !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card .bet-card-line{
  color:rgba(255,244,214,.9) !important;
}

.sorteos3d-wrap{
  width:min(1160px, 94vw) !important;
  margin:34px auto 46px !important;
  min-height:360px !important;
}
.sorteos3d{
  max-width:1020px !important;
  height:clamp(320px, 40vw, 520px) !important;
  border-radius:24px !important;
  border:1px solid rgba(255,225,70,.48) !important;
  background:
    radial-gradient(circle at 16% -4%, rgba(255,221,55,.24), transparent 40%),
    radial-gradient(circle at 86% 104%, rgba(255,183,0,.2), transparent 42%),
    linear-gradient(160deg, rgba(20,20,20,.72), rgba(5,5,5,.82)) !important;
  box-shadow:
    0 28px 60px rgba(0,0,0,.62),
    0 0 0 1px rgba(255,225,90,.16) inset,
    0 0 36px rgba(255,214,0,.18) !important;
}
.sorteos3d-slide{
  width:min(860px, 80vw) !important;
  height:86% !important;
  border-radius:20px !important;
  border:1px solid rgba(255,255,255,.18) !important;
  background:#090909 !important;
  box-shadow:0 18px 46px rgba(0,0,0,.6) !important;
}
.sorteos3d-slide::before{
  display:none !important;
}
.sorteos3d-slide img{
  transition:transform .55s ease, filter .55s ease !important;
  filter:saturate(1.06) contrast(1.03) !important;
}
.sorteos3d-slide.is-center img{
  transform:scale(1.02) !important;
  filter:saturate(1.12) contrast(1.04) !important;
}
.sorteos3d-slide::after{
  box-shadow:
    0 0 0 1px rgba(255,230,95,.3) inset,
    inset 0 -120px 120px rgba(0,0,0,.18) !important;
}
.sorteos3d-btn{
  width:56px !important;
  height:56px !important;
  border:1px solid rgba(255,230,85,.52) !important;
  background:rgba(0,0,0,.5) !important;
  color:rgba(255,230,45,.96) !important;
  font-size:34px !important;
  box-shadow:0 10px 20px rgba(0,0,0,.45), 0 0 18px rgba(255,214,0,.2) !important;
}
.sorteos3d-btn:hover{
  background:rgba(0,0,0,.66) !important;
  border-color:rgba(255,230,70,.9) !important;
  color:#ffe83a !important;
}
.sorteos3d-dots{
  bottom:14px !important;
  padding:7px 12px !important;
  border-color:rgba(255,230,80,.3) !important;
  background:rgba(0,0,0,.46) !important;
}
.sorteos3d-dot{
  width:7px !important;
  height:7px !important;
  background:rgba(255,230,80,.3) !important;
  border-color:rgba(255,230,80,.18) !important;
}
.sorteos3d-dot.is-active{
  width:20px !important;
  border-radius:999px !important;
  background:#ffe100 !important;
  transform:none !important;
}

/* ===== VIP Float: close button ===== */
#vipFloat .vip-content{
  position:relative;
}
#vipFloat .vip-top{
  padding-right:34px;
}
#vipFloat .vip-float-close{
  position:absolute;
  top:8px;
  right:8px;
  width:24px;
  height:24px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(0,0,0,.58);
  color:#f4f4f4;
  font-size:17px;
  line-height:1;
  font-weight:900;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:5;
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
#vipFloat .vip-float-close:hover{
  transform:scale(1.07);
  border-color:rgba(255,230,70,.55);
  background:rgba(0,0,0,.75);
  box-shadow:0 0 14px rgba(255,214,0,.22);
}

/* ===== Modal Agencias: cards de agentes pro ===== */
#mAgenciaAgentes .sheet{
  width:min(980px, 96vw);
}
#mAgenciaAgentes .sheetbody{
  padding:16px 16px 18px;
}
#mAgenciaAgentes .grid-mini{
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:16px;
}
#mAgenciaAgentes .agent-mini-card{
  padding:16px 14px !important;
  border-radius:18px;
  border:1px solid rgba(255,214,0,.58);
  background:
    radial-gradient(340px 140px at 100% 0%, rgba(255,214,0,.16), transparent 64%),
    linear-gradient(160deg, rgba(9,10,12,.96) 0%, rgba(6,6,8,.98) 100%);
  box-shadow:0 14px 32px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.03);
  overflow:hidden;
}
#mAgenciaAgentes .agent-mini-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(120deg, transparent 0%, rgba(255,230,90,.06) 28%, transparent 55%);
}
#mAgenciaAgentes .agent-mini-head,
#mAgenciaAgentes .agent-mini-contact,
#mAgenciaAgentes .agent-mini-rating-row,
#mAgenciaAgentes .agent-mini-socials,
#mAgenciaAgentes .agent-mini-actions{
  position:relative;
  z-index:1;
}
#mAgenciaAgentes .agent-mini-head{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:10px;
}
#mAgenciaAgentes .agent-mini-avatar{
  width:44px;
  height:44px;
  border-radius:12px;
  flex:0 0 44px;
  display:grid;
  place-items:center;
  font-size:.95rem;
  font-weight:1000;
  letter-spacing:.6px;
  color:#131313;
  background:linear-gradient(140deg,#fff4a0,#ffd200);
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 8px 20px rgba(255,214,0,.28);
}
#mAgenciaAgentes .agent-mini-main{
  min-width:0;
}
#mAgenciaAgentes .agent-mini-name{
  font-size:1.22rem;
  line-height:1.1;
  color:#fff3a8;
  font-weight:900;
  letter-spacing:.7px;
  text-transform:uppercase;
}
#mAgenciaAgentes .agent-mini-loc{
  margin-top:4px;
  color:rgba(255,255,255,.76);
  font-size:.95rem;
}
#mAgenciaAgentes .agent-mini-loc i{
  color:#ffd84a;
}
#mAgenciaAgentes .agent-mini-contact{
  display:grid;
  gap:6px;
  margin:8px 0 6px;
}
#mAgenciaAgentes .agent-mini-line{
  display:flex;
  align-items:center;
  gap:8px;
  color:rgba(255,255,255,.88);
  font-size:.95rem;
}
#mAgenciaAgentes .agent-mini-line i{
  width:16px;
  text-align:center;
  color:#ffd84a;
}
#mAgenciaAgentes .agent-mini-line span{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#mAgenciaAgentes .agent-mini-rating-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
#mAgenciaAgentes .agent-mini-rate{
  font-size:.82rem;
  font-weight:900;
  color:#ffe990;
  border:1px solid rgba(255,214,0,.28);
  border-radius:999px;
  padding:4px 8px;
  background:rgba(255,214,0,.08);
}
#mAgenciaAgentes .agent-mini-socials{
  margin-top:8px !important;
  gap:8px;
}
#mAgenciaAgentes .agent-mini-social{
  width:44px;
  min-width:44px;
  height:44px;
  padding:0;
  justify-content:center;
  border-radius:13px;
  border-width:2px;
}
#mAgenciaAgentes .agent-mini-actions{
  margin-top:10px;
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}
#mAgenciaAgentes .agent-mini-actions .btn-mini{
  justify-content:center;
  width:100%;
  border-radius:13px;
  padding:10px 12px;
}

/* ===== Responsive System (Nueva Base) ===== */
.support-carousel{
  display:none !important;
}
.sidebar-menu-btn{
  width:100%;
  text-align:left;
  font:inherit;
  background:transparent;
  border:none;
  outline:none;
}

@media (max-width: 1200px){
  .navbar.navbar-pro-v2{
    padding:0 3.2% !important;
    gap:12px !important;
    height:76px !important;
  }
  .navbar.navbar-pro-v2 .nav-left{
    gap:10px !important;
  }
  .navbar.navbar-pro-v2 .nav-left .nav-item{
    padding:9px 13px !important;
    font-size:0.95rem !important;
    letter-spacing:0.9px !important;
  }
  .main-content{
    padding-top:128px !important;
  }
  .section{
    padding:56px 5% !important;
  }
  .hero h1{
    font-size:clamp(2.5rem, 5.8vw, 4.2rem) !important;
  }
  .cards-container,
  .data-grid,
  .servicios-grid,
  .ayudas-grid{
    gap:18px !important;
  }
  .pro-card{
    padding:20px !important;
  }
}

@media (max-width: 980px){
  .nav-live-strip{
    display:none !important;
  }
  .navbar.navbar-pro-v2{
    top:0 !important;
    height:74px !important;
    min-height:74px !important;
    padding:8px 10px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    flex-wrap:nowrap !important;
    gap:8px !important;
  }
  .navbar.navbar-pro-v2 .brand{
    order:1 !important;
    display:flex !important;
    align-items:center !important;
    min-width:0 !important;
    margin-right:4px !important;
  }
  .navbar.navbar-pro-v2 .nav-brand-pill{
    border:none !important;
    box-shadow:none !important;
    background:transparent !important;
    padding:0 !important;
  }
  .navbar.navbar-pro-v2 .nav-brand-pill .nav-logo-main{
    width:clamp(118px, 36vw, 170px) !important;
    max-height:42px !important;
    object-fit:contain !important;
  }
  .navbar.navbar-pro-v2 .nav-spacer{
    display:none !important;
  }
  .navbar.navbar-pro-v2 .nav-mobile-bottom{
    order:2 !important;
    margin-left:auto !important;
    display:flex !important;
    align-items:center !important;
    min-width:0 !important;
  }
  .navbar.navbar-pro-v2 .nav-right{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:8px !important;
    min-width:0 !important;
    margin:0 !important;
  }
  .navbar.navbar-pro-v2 .nav-mobile-top{
    order:3 !important;
    display:flex !important;
    flex:0 0 auto !important;
    min-width:auto !important;
    align-items:center !important;
    justify-content:flex-end !important;
    margin-left:4px !important;
    gap:0 !important;
  }
  .navbar.navbar-pro-v2 .nav-mobile-top .nav-left{ display:none !important; }
  .navbar.navbar-pro-v2 .nav-hamburger{
    display:inline-flex !important;
    width:42px !important;
    height:42px !important;
    padding:0 !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:11px !important;
    font-size:1.35rem !important;
  }
  .navbar.navbar-pro-v2 .nav-right .btn-work-cta{
    min-width:190px !important;
    height:40px !important;
    padding:0 12px !important;
    font-size:.74rem !important;
    letter-spacing:.78px !important;
  }
  .navbar.navbar-pro-v2 .nav-right .btn-auth,
  .navbar.navbar-pro-v2 .nav-right .user-chip{
    display:none !important;
  }
  .sidebar-overlay{
    z-index:1205 !important;
  }
  .sidebar-menu{
    width:min(340px, 88vw) !important;
    right:calc(-1 * min(340px, 88vw)) !important;
    padding-top:82px !important;
    z-index:1210 !important;
  }
  .sidebar-menu.active{ right:0 !important; }
  .main-content{
    padding-top:96px !important;
    padding-bottom:118px !important;
  }
  .section{
    padding:42px 4.2% !important;
  }
  .hero{
    min-height:auto !important;
    padding:14px 0 18px !important;
  }
  .hero h1{
    font-size:clamp(2rem, 8.8vw, 3rem) !important;
    letter-spacing:clamp(2px, 1.4vw, 6px) !important;
  }
  .hero p{
    font-size:clamp(.95rem, 2.8vw, 1.06rem) !important;
    line-height:1.65 !important;
  }
  .panel-head h1,
  #agencias h1,
  #productos h1,
  #servicios h1,
  #apuestas h1,
  #ayudas-solidarias h1{
    font-size:clamp(1.9rem, 7vw, 2.8rem) !important;
    letter-spacing:2px !important;
  }
  .panel-head p,
  .microcopy,
  .pro-card .sub{
    font-size:.98rem !important;
    line-height:1.56 !important;
  }
  .cards-container,
  .data-grid,
  .servicios-grid,
  .ayudas-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:16px !important;
  }
  .grid-mini{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:14px !important;
  }
  .filter-bar{
    flex-wrap:wrap !important;
    gap:11px !important;
  }
  .pro-card{
    padding:18px !important;
    border-radius:18px !important;
  }
  .pro-card .badge{
    padding:7px 12px !important;
    font-size:0.82rem !important;
  }
  .pro-card .title{
    font-size:1.5rem !important;
    letter-spacing:1.3px !important;
  }
  .f-input,
  .f-select{
    min-width:220px !important;
    flex:1 1 220px !important;
  }
  .sorteos3d{
    max-width:94vw !important;
    height:clamp(260px, 52vw, 420px) !important;
  }
  .sorteos3d-slide{
    width:min(92vw, 760px) !important;
    border-radius:16px !important;
  }
  .sorteos3d-btn{
    width:46px !important;
    height:46px !important;
    font-size:28px !important;
  }
  #vipFloat.vip-float{
    width:min(260px, calc(100vw - 18px)) !important;
    right:10px !important;
    bottom:10px !important;
  }
}

@media (max-width: 760px){
  .navbar.navbar-pro-v2{
    height:72px !important;
    min-height:72px !important;
    padding:8px 9px !important;
  }
  .navbar.navbar-pro-v2 .nav-brand-pill .nav-logo-main{
    width:clamp(110px, 34vw, 150px) !important;
    max-height:40px !important;
  }
  .navbar.navbar-pro-v2 .nav-right .btn-work-cta{
    min-width:172px !important;
    height:39px !important;
    padding:0 11px !important;
    font-size:0.7rem !important;
    letter-spacing:0.7px !important;
  }
  .navbar.navbar-pro-v2 .nav-hamburger{
    width:40px !important;
    height:40px !important;
    font-size:1.25rem !important;
  }
  .main-content{
    padding-top:92px !important;
  }
  .section{
    padding:38px 4.5% !important;
  }
  .cards-container,
  .data-grid,
  .servicios-grid,
  .ayudas-grid,
  .grid-mini{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }
  .f-input,
  .f-select{
    width:100% !important;
    min-width:0 !important;
  }
  .pro-card{
    padding:16px !important;
    border-radius:16px !important;
  }
  .pro-card .badge{
    padding:6px 11px !important;
    font-size:0.78rem !important;
  }
  .pro-card .title{
    font-size:1.4rem !important;
    letter-spacing:1.2px !important;
  }
  .sheet{
    width:min(560px, 95vw) !important;
    border-radius:16px !important;
  }
  .pro-card,
  .bet-card{
    padding:16px !important;
  }
  #mAgenciaAgentes .sheet{
    width:min(620px, 95vw) !important;
  }
  #mAgenciaAgentes .grid-mini{
    grid-template-columns:1fr !important;
  }
}

@media (max-width: 520px){
  .navbar.navbar-pro-v2{
    padding:7px 8px !important;
    gap:7px !important;
    height:68px !important;
  }
  .navbar.navbar-pro-v2 .nav-brand-pill .nav-logo-main{
    width:clamp(102px, 33vw, 135px) !important;
    max-height:35px !important;
  }
  .navbar.navbar-pro-v2 .nav-right .btn-work-cta{
    min-width:155px !important;
    height:37px !important;
    padding:0 9px !important;
    font-size:0.64rem !important;
    letter-spacing:0.5px !important;
  }
  .navbar.navbar-pro-v2 .btn-work-cta .btn-work-cta__label{
    line-height:1.05 !important;
    text-align:center !important;
  }
  .navbar.navbar-pro-v2 .nav-hamburger{
    width:36px !important;
    height:36px !important;
    border-radius:11px !important;
    font-size:1.12rem !important;
  }
  .sidebar-menu{
    width:min(310px, 90vw) !important;
    right:calc(-1 * min(310px, 90vw)) !important;
    padding-top:78px !important;
  }
  .sidebar-menu-item{
    font-size:0.9rem !important;
    padding:14px 19px !important;
    letter-spacing:0.8px !important;
  }
  .section{
    padding:34px 4% !important;
  }
  .hero h1{
    font-size:clamp(1.65rem, 8.4vw, 2.4rem) !important;
    letter-spacing:1.4px !important;
  }
  .hero p,
  .panel-head p,
  .microcopy{
    font-size:0.92rem !important;
    line-height:1.54 !important;
  }
  .panel-head h1,
  #agencias h1,
  #productos h1,
  #servicios h1,
  #apuestas h1,
  #ayudas-solidarias h1{
    font-size:clamp(1.52rem, 7.4vw, 2.1rem) !important;
    letter-spacing:1.5px !important;
  }
  .sorteos3d{
    height:clamp(230px, 64vw, 330px) !important;
    border-radius:16px !important;
  }
  .sorteos3d-btn{
    width:42px !important;
    height:42px !important;
    font-size:26px !important;
  }
  .sorteos3d-dots{
    bottom:10px !important;
    padding:6px 10px !important;
  }
  #vipFloat.vip-float{
    width:min(240px, calc(100vw - 14px)) !important;
    right:7px !important;
    bottom:7px !important;
  }
  #vipFloat .vip-content{
    padding:10px 10px 9px !important;
  }
  .pro-card{
    padding:15px !important;
    border-radius:16px !important;
  }
  .pro-card .title{
    font-size:1.35rem !important;
  }
}

@media (max-width: 420px){
  .navbar.navbar-pro-v2{
    height:66px !important;
  }
  .navbar.navbar-pro-v2 .nav-right .btn-work-cta{
    min-width:148px !important;
    height:36px !important;
    font-size:0.6rem !important;
    letter-spacing:0.4px !important;
    padding:0 7px !important;
  }
  .main-content{
    padding-top:84px !important;
  }
  .section{
    padding:30px 3.8% !important;
  }
  .pro-card,
  .bet-card{
    padding:15px !important;
    border-radius:15px !important;
  }
  .pro-card .badge{
    padding:6px 10px !important;
    font-size:0.75rem !important;
    margin-bottom:12px !important;
  }
  .pro-card .title{
    font-size:1.3rem !important;
    letter-spacing:1.1px !important;
  }
  .btn-mini{
    padding:10px 11px !important;
    font-size:0.76rem !important;
  }
}

@media (max-width: 320px){
  .navbar.navbar-pro-v2{
    gap:5px !important;
  }
  .navbar.navbar-pro-v2 .nav-brand-pill .nav-logo-main{
    width:96px !important;
    max-height:30px !important;
  }
  .navbar.navbar-pro-v2 .nav-right .btn-work-cta{
    min-width:132px !important;
    height:34px !important;
    font-size:.54rem !important;
    letter-spacing:.08px !important;
  }
  .navbar.navbar-pro-v2 .nav-hamburger{
    width:32px !important;
    height:32px !important;
    font-size:1rem !important;
  }
  .sidebar-menu{
    width:min(278px, 92vw) !important;
    right:calc(-1 * min(278px, 92vw)) !important;
  }
}

@media (max-width: 300px){
  .navbar.navbar-pro-v2 .nav-right .btn-work-cta{
    min-width:124px !important;
    font-size:.5rem !important;
  }
  .section{
    padding:24px 3.2% !important;
  }
}

/* ===== Visual Upgrade: CTA + Sorteos ===== */
.navbar.navbar-pro-v2 .btn-work-cta{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
  border:none !important;
  border-radius:3px !important;
  background:#0b0b0b !important;
  box-shadow:0 0 0 1px rgba(255,214,0,.28) inset, 0 12px 24px rgba(255,214,0,.24) !important;
  animation:workCtaPulse 1.8s ease-in-out infinite !important;
}
.navbar.navbar-pro-v2 .btn-work-cta .btn-work-cta__label{
  position:relative !important;
  z-index:4 !important;
  color:#131313 !important;
  font-weight:1000 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.35) !important;
}
.navbar.navbar-pro-v2 .btn-work-cta::before{
  content:"" !important;
  position:absolute !important;
  inset:-2px !important;
  padding:2px !important;
  border-radius:4px !important;
  background:conic-gradient(
    from 0deg,
    transparent 0deg 260deg,
    rgba(255,255,255,.24) 270deg 285deg,
    #fff7b0 286deg 304deg,
    #ffe100 305deg 328deg,
    #ffbe00 329deg 350deg,
    transparent 351deg 360deg
  ) !important;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite:xor !important;
  mask-composite:exclude !important;
  animation:workCtaSnake 1.05s linear infinite !important;
  z-index:3 !important;
  pointer-events:none !important;
}
.navbar.navbar-pro-v2 .btn-work-cta::after{
  content:"" !important;
  position:absolute !important;
  inset:2px !important;
  border-radius:2px !important;
  background:linear-gradient(95deg,#fff8b0 0%,#ffe100 46%,#ffc500 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.25) !important;
  z-index:1 !important;
  pointer-events:none !important;
}
.navbar.navbar-pro-v2 .btn-work-cta:hover{
  transform:translateY(-2px) scale(1.03) !important;
  box-shadow:0 0 0 1px rgba(255,214,0,.34) inset, 0 16px 34px rgba(255,214,0,.5), 0 0 22px rgba(255,214,0,.55) !important;
  filter:saturate(1.1) !important;
}
@keyframes workCtaSnake{
  to{ transform:rotate(360deg); }
}
@keyframes workCtaPulse{
  0%,100%{ box-shadow:0 0 0 1px rgba(255,214,0,.26) inset, 0 10px 22px rgba(255,214,0,.24); }
  50%{ box-shadow:0 0 0 1px rgba(255,214,0,.44) inset, 0 16px 36px rgba(255,214,0,.44), 0 0 24px rgba(255,214,0,.42); }
}

.sorteos3d{
  border-radius:0 !important;
  border:1px solid rgba(255,220,70,.42) !important;
  background:
    linear-gradient(180deg, rgba(6,6,6,.86), rgba(2,2,2,.9)) !important;
  box-shadow:0 24px 52px rgba(0,0,0,.62), 0 0 0 1px rgba(255,225,90,.12) inset !important;
}
.sorteos3d-slide{
  border-radius:0 !important;
  border:1px solid rgba(255,230,95,.24) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.58) !important;
}
.sorteos3d-slide img{
  border-radius:0 !important;
  filter:saturate(1.08) contrast(1.04) brightness(1.02) !important;
}
.sorteos3d-slide.is-center img{
  transform:scale(1.015) !important;
}
.sorteos3d-slide::after{
  box-shadow:
    0 0 0 1px rgba(255,230,95,.24) inset,
    inset 0 -80px 90px rgba(0,0,0,.14) !important;
}
.sorteos3d-btn{
  border-radius:4px !important;
  width:54px !important;
  height:54px !important;
  border:1px solid rgba(255,230,80,.48) !important;
  background:rgba(0,0,0,.56) !important;
  color:#ffe55c !important;
}
.sorteos3d-btn:hover{
  background:rgba(0,0,0,.72) !important;
  border-color:rgba(255,230,80,.86) !important;
}
.sorteos3d-dots{
  border-radius:4px !important;
}

/* ===== Signature V2: Premium Motion Layer ===== */
.nav-live-strip{
  background:
    linear-gradient(90deg, #08140d 0%, #171305 35%, #251707 65%, #08140d 100%) !important;
  border-bottom:1px solid rgba(255,221,86,.28) !important;
  box-shadow:
    0 8px 24px rgba(0,0,0,.46),
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 -1px 0 rgba(204,255,120,.16) !important;
}
.nav-live-strip::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(110deg, transparent 0%, rgba(255,255,255,.07) 22%, transparent 46%),
    radial-gradient(120px 30px at 18% 50%, rgba(204,255,120,.12), transparent 70%);
  animation:liveStripSweepV2 7s linear infinite;
}
.nav-live-track{
  animation:scrollTicker 27s linear infinite !important;
}
.nav-live-track span{
  color:#e4e8dd !important;
  font-weight:800 !important;
  letter-spacing:.75px !important;
}
#liveMsg1{
  color:#ccff8a !important;
  text-shadow:0 0 12px rgba(180,255,120,.28) !important;
}
#liveMsg2{
  color:#ffe68a !important;
}
#liveMsg3{
  color:#f6f6f6 !important;
}
#liveMsg4{
  color:#ffd768 !important;
}
@keyframes liveStripSweepV2{
  0%{ transform:translateX(-120%); opacity:0; }
  14%{ opacity:.85; }
  40%,100%{ transform:translateX(180%); opacity:0; }
}

.navbar.navbar-pro-v2 .btn-work-cta{
  border-radius:2px !important;
  background:transparent !important;
  box-shadow:
    0 0 0 1px rgba(255,214,0,.3) inset,
    0 14px 32px rgba(255,214,0,.26),
    0 0 18px rgba(255,214,0,.24) !important;
  animation:workCtaPulseV2 1.55s ease-in-out infinite !important;
}
.navbar.navbar-pro-v2 .btn-work-cta::before{
  inset:-2px !important;
  border-radius:3px !important;
  background:conic-gradient(
    from 0deg,
    transparent 0deg 250deg,
    rgba(255,255,255,.2) 260deg 274deg,
    #fff8b6 275deg 294deg,
    #ffe100 295deg 323deg,
    #ffbe00 324deg 348deg,
    transparent 349deg 360deg
  ) !important;
  animation:workCtaSnakeV2 .88s linear infinite !important;
}
.navbar.navbar-pro-v2 .btn-work-cta::after{
  inset:2px !important;
  border-radius:1px !important;
  background:linear-gradient(96deg,#fff9b5 0%,#ffe100 42%,#ffc100 100%) !important;
}
.navbar.navbar-pro-v2 .btn-work-cta .btn-work-cta__label{
  color:#101010 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.42) !important;
}
.navbar.navbar-pro-v2 .btn-work-cta:hover{
  transform:translateY(-2px) scale(1.02) !important;
  box-shadow:
    0 0 0 1px rgba(255,214,0,.42) inset,
    0 18px 40px rgba(255,214,0,.48),
    0 0 28px rgba(255,214,0,.58) !important;
}
@keyframes workCtaSnakeV2{
  to{ transform:rotate(360deg); }
}
@keyframes workCtaPulseV2{
  0%,100%{
    box-shadow:
      0 0 0 1px rgba(255,214,0,.26) inset,
      0 12px 26px rgba(255,214,0,.24),
      0 0 12px rgba(255,214,0,.2);
  }
  50%{
    box-shadow:
      0 0 0 1px rgba(255,214,0,.44) inset,
      0 18px 40px rgba(255,214,0,.46),
      0 0 24px rgba(255,214,0,.46);
  }
}

.sorteos3d{
  border-radius:0 !important;
  border:1px solid rgba(255,228,96,.45) !important;
  background:
    radial-gradient(520px 180px at 50% 100%, rgba(255,202,40,.12), transparent 70%),
    linear-gradient(180deg, rgba(8,8,8,.9), rgba(2,2,2,.94)) !important;
  box-shadow:
    0 26px 56px rgba(0,0,0,.64),
    0 0 0 1px rgba(255,232,120,.14) inset,
    0 0 30px rgba(255,214,0,.14) !important;
}
.sorteos3d::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(180deg, rgba(255,255,255,.02) 0 1px, transparent 1px 42px);
  opacity:.22;
}
.sorteos3d-slide{
  border-radius:0 !important;
  border:1px solid rgba(255,232,120,.24) !important;
  box-shadow:0 16px 34px rgba(0,0,0,.56) !important;
}
.sorteos3d-slide::after{
  box-shadow:
    0 0 0 1px rgba(255,232,120,.22) inset,
    inset 0 -70px 90px rgba(0,0,0,.14),
    inset 0 40px 60px rgba(255,255,255,.03) !important;
}
.sorteos3d-slide img{
  filter:saturate(1.1) contrast(1.05) brightness(1.02) !important;
}
.sorteos3d-btn{
  border-radius:2px !important;
  border:1px solid rgba(255,230,90,.58) !important;
  background:rgba(0,0,0,.62) !important;
  box-shadow:0 10px 22px rgba(0,0,0,.5), 0 0 16px rgba(255,214,0,.22) !important;
}
.sorteos3d-btn:hover{
  border-color:rgba(255,236,120,.92) !important;
  box-shadow:0 12px 26px rgba(0,0,0,.55), 0 0 22px rgba(255,214,0,.38) !important;
}
.sorteos3d-dots{
  border-radius:2px !important;
  border-color:rgba(255,232,120,.32) !important;
  background:rgba(0,0,0,.52) !important;
}

/* ===== Top Strip Mobile ===== */
@media (max-width: 980px){
  .nav-live-strip{
    display:block !important;
    height:24px !important;
    z-index:1405 !important;
  }
  .nav-live-track{
    gap:22px !important;
    padding:0 14px !important;
    animation-duration:22s !important;
  }
  .nav-live-track span{
    font-size:.66rem !important;
    letter-spacing:.45px !important;
  }
  .navbar.navbar-pro-v2{
    top:24px !important;
  }
  .main-content{
    padding-top:104px !important;
  }
}
@media (max-width: 520px){
  .nav-live-strip{
    height:22px !important;
  }
  .nav-live-track{
    gap:16px !important;
    padding:0 10px !important;
    animation-duration:20s !important;
  }
  .nav-live-track span{
    font-size:.6rem !important;
    letter-spacing:.28px !important;
  }
  .navbar.navbar-pro-v2{
    top:22px !important;
  }
  .main-content{
    padding-top:98px !important;
  }
}
@media (max-width: 420px){
  .nav-live-strip{
    height:21px !important;
  }
  .nav-live-track span{
    font-size:.57rem !important;
  }
  .navbar.navbar-pro-v2{
    top:21px !important;
  }
  .main-content{
    padding-top:94px !important;
  }
}

/* ===== Hotfix Visual Final: CTA + Feed + Productos ===== */
.navbar.navbar-pro-v2 .btn-work-cta{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
  background:linear-gradient(98deg,#fff9a8 0%, #ffe100 40%, #ffc300 100%) !important;
  border:1px solid rgba(255,230,130,.66) !important;
  border-radius:10px !important;
  box-shadow:
    0 0 0 1px rgba(255,214,0,.3) inset,
    0 16px 36px rgba(255,214,0,.36),
    0 0 26px rgba(255,214,0,.42) !important;
  animation:workCtaPulseHotfix 1.18s ease-in-out infinite !important;
}
.navbar.navbar-pro-v2 .btn-work-cta::after{
  content:"" !important;
  position:absolute !important;
  inset:2px !important;
  border-radius:8px !important;
  z-index:-1 !important;
  background:
    radial-gradient(120% 140% at 12% 10%, rgba(255,255,255,.48), transparent 42%),
    linear-gradient(96deg,#fff8b0 0%, #ffe100 47%, #ffc200 100%) !important;
}
.navbar.navbar-pro-v2 .btn-work-cta::before{
  content:"" !important;
  position:absolute !important;
  inset:-2px !important;
  border-radius:0 !important;
  z-index:-2 !important;
  background:conic-gradient(
    from 0deg at 50% 50%,
    rgba(255,255,255,0) 0deg 230deg,
    rgba(255,255,255,.3) 231deg 252deg,
    #fff8bd 253deg 275deg,
    #ffe100 276deg 312deg,
    #ffbf00 313deg 348deg,
    rgba(255,255,255,0) 349deg 360deg
  ) !important;
  animation:workCtaSnakeHotfix .9s linear infinite !important;
}
.navbar.navbar-pro-v2 .btn-work-cta .btn-work-cta__label{
  color:#111 !important;
  font-weight:980 !important;
  text-shadow:0 1px 0 rgba(255,255,255,.5) !important;
  letter-spacing:1.15px !important;
}
.navbar.navbar-pro-v2 .btn-work-cta:hover{
  transform:translateY(-2px) scale(1.03) !important;
  box-shadow:
    0 0 0 1px rgba(255,214,0,.48) inset,
    0 22px 44px rgba(255,214,0,.52),
    0 0 38px rgba(255,214,0,.64) !important;
}
@keyframes workCtaSnakeHotfix{
  to{ transform:rotate(360deg); }
}
@keyframes workCtaPulseHotfix{
  0%,100%{
    box-shadow:
      0 0 0 1px rgba(255,214,0,.3) inset,
      0 12px 28px rgba(255,214,0,.34),
      0 0 18px rgba(255,214,0,.32);
  }
  50%{
    box-shadow:
      0 0 0 1px rgba(255,214,0,.56) inset,
      0 22px 44px rgba(255,214,0,.5),
      0 0 34px rgba(255,214,0,.58);
  }
}

#gridFeed .feed-card-clean{
  background:linear-gradient(165deg, rgba(16,16,16,.92), rgba(8,8,8,.96)) !important;
  border-color:rgba(255,218,86,.44) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.42), 0 0 0 1px rgba(255,218,86,.1) inset !important;
}
#gridFeed .feed-card-clean .title{
  margin-bottom:10px !important;
}
#gridFeed .feed-card-clean .feed-card-desc{
  margin-bottom:12px !important;
  color:rgba(255,255,255,.9) !important;
}

#gridProductos{
  /* Evita que una sola tarjeta se estire a todo el ancho */
  grid-template-columns:repeat(auto-fit, minmax(280px, 420px));
  justify-content:start;
}

#gridFeed{
  /* Mismo criterio: una sola tarjeta no debe llenar toda la fila */
  grid-template-columns:repeat(auto-fit, minmax(280px, 420px));
  justify-content:start;
}

#gridProductos .producto-card-horizontal{
  position:relative !important;
  width:100% !important;
  min-height:280px !important;
  padding:0 !important;
  border-radius:20px !important;
  border:1.2px solid rgba(255,215,0,.36) !important;
  background:linear-gradient(160deg, rgba(18,18,18,.96), rgba(8,8,8,.98)) !important;
  box-shadow:
    0 12px 32px rgba(0,0,0,.6),
    inset 0 0 16px rgba(255,215,0,.06) !important;
  display:grid !important;
  grid-template-columns:160px 1fr !important;
  gap:0 !important;
  overflow:hidden !important;
  transition:all .3s cubic-bezier(.22,.75,.3,1) !important;
}
#gridProductos .producto-card-horizontal:hover{
  border-color:rgba(255,215,0,.62) !important;
  box-shadow:
    0 18px 48px rgba(255,215,0,.18),
    inset 0 0 24px rgba(255,215,0,.1) !important;
  transform:translateY(-6px) !important;
}

#gridProductos .producto-card-horizontal .producto-particles{
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  z-index:0 !important;
}
#gridProductos .producto-card-horizontal .producto-particle{
  position:absolute !important;
  border-radius:50% !important;
  background:rgba(255,215,0,.8) !important;
  box-shadow:0 0 6px rgba(255,215,0,.5) !important;
  animation:productoParticleFloat 4s infinite ease-in-out alternate !important;
  opacity:.3 !important;
}
#gridProductos .producto-card-horizontal .producto-particle.p1{
  width:3px !important;
  height:3px !important;
  top:10% !important;
  right:8% !important;
  animation-delay:0s !important;
}
#gridProductos .producto-card-horizontal .producto-particle.p2{
  width:2px !important;
  height:2px !important;
  bottom:15% !important;
  right:12% !important;
  animation-delay:1.2s !important;
}
#gridProductos .producto-card-horizontal .producto-particle.p3{
  width:4px !important;
  height:4px !important;
  top:50% !important;
  right:5% !important;
  animation-delay:2.4s !important;
}
@keyframes productoParticleFloat{
  0%{ transform:translateY(0) scale(1); opacity:.2; }
  100%{ transform:translateY(-15px) scale(1.3); opacity:.6; }
}

#gridProductos .producto-card-horizontal .producto-image-wrap{
  position:relative !important;
  width:160px !important;
  height:100% !important;
  overflow:hidden !important;
  background:radial-gradient(circle at center, rgba(255,215,0,.05) 0%, transparent 70%) !important;
}
#gridProductos .producto-card-horizontal .producto-img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  display:block !important;
  transition:transform .4s cubic-bezier(.22,.75,.3,1) !important;
}
#gridProductos .producto-card-horizontal:hover .producto-img{
  transform:scale(1.08) !important;
}

#gridProductos .producto-card-horizontal .producto-content{
  position:relative !important;
  z-index:1 !important;
  padding:18px 20px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  gap:12px !important;
}

#gridProductos .producto-card-horizontal .producto-header{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
}
#gridProductos .producto-card-horizontal .badge{
  padding:7px 13px !important;
  border-radius:999px !important;
  font-size:0.8rem !important;
  letter-spacing:1px !important;
  font-weight:900 !important;
  color:#000 !important;
  background:linear-gradient(135deg, #FFFF00 0%, #FFD700 100%) !important;
  text-transform:uppercase !important;
  flex-shrink:0 !important;
}

#gridProductos .producto-card-horizontal .producto-stock{
  display:inline-flex !important;
  align-items:center !important;
  gap:5px !important;
  padding:5px 9px !important;
  border-radius:999px !important;
  font-size:0.7rem !important;
  font-weight:900 !important;
  letter-spacing:0.5px !important;
  border:1px solid rgba(255,255,255,.15) !important;
  flex-shrink:0 !important;
}
#gridProductos .producto-card-horizontal .producto-stock svg{
  width:12px !important;
  height:12px !important;
}
#gridProductos .producto-card-horizontal .producto-stock.is-ok{
  color:#d9ffd2 !important;
  background:rgba(74,255,120,.12) !important;
  border-color:rgba(74,255,120,.28) !important;
}
#gridProductos .producto-card-horizontal .producto-stock.is-low{
  color:#fff5d5 !important;
  background:rgba(255,220,0,.14) !important;
  border-color:rgba(255,214,0,.34) !important;
}
#gridProductos .producto-card-horizontal .producto-stock.is-out{
  color:#ffd5d5 !important;
  background:rgba(255,100,100,.12) !important;
  border-color:rgba(255,100,100,.28) !important;
}

#gridProductos .producto-card-horizontal .producto-mid{
  flex-grow:1 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  gap:6px !important;
}
#gridProductos .producto-card-horizontal .producto-name{
  color:#ffeb99 !important;
  font-size:1.25rem !important;
  font-weight:900 !important;
  letter-spacing:1px !important;
  text-transform:uppercase !important;
  line-height:1.2 !important;
  text-shadow:0 2px 6px rgba(0,0,0,.4) !important;
}

#gridProductos .producto-card-horizontal .producto-price-section{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
}
#gridProductos .producto-card-horizontal .producto-price{
  color:#ffe26b !important;
  font-size:1.55rem !important;
  font-weight:1000 !important;
  text-shadow:0 0 12px rgba(255,214,0,.3) !important;
}
#gridProductos .producto-card-horizontal .producto-price::before{
  content:'$' !important;
}
#gridProductos .producto-card-horizontal .producto-price-text{
  color:#ffd700 !important;
  font-size:0.8rem !important;
  font-weight:900 !important;
  letter-spacing:0.6px !important;
  padding:4px 8px !important;
  border:1px solid rgba(255,214,0,.4) !important;
  border-radius:6px !important;
  background:rgba(255,214,0,.08) !important;
}

#gridProductos .producto-card-horizontal .producto-footer{
  display:flex !important;
  gap:8px !important;
  margin-top:4px !important;
}
#gridProductos .producto-card-horizontal .wa-producto{
  flex:1 !important;
  min-width:0 !important;
  padding:8px 10px !important;
  border-radius:10px !important;
  border:1px solid rgba(74,222,128,.6) !important;
  background:linear-gradient(135deg, rgba(74,222,128,.18), rgba(84,255,140,.08)) !important;
  color:#d9ffd2 !important;
  font-weight:900 !important;
  font-size:0.75rem !important;
  letter-spacing:0.5px !important;
  transition:all .3s ease !important;
}
#gridProductos .producto-card-horizontal .wa-producto:hover{
  border-color:rgba(74,222,128,.9) !important;
  background:rgba(74,222,128,.25) !important;
  box-shadow:0 0 12px rgba(74,222,128,.2) !important;
}

@media (max-width:760px){
  #gridProductos .producto-card-horizontal{
    grid-template-columns:140px 1fr !important;
    min-height:240px !important;
  }
  #gridProductos .producto-card-horizontal .producto-image-wrap{
    width:140px !important;
  }
  #gridProductos .producto-card-horizontal .producto-content{
    padding:16px 16px !important;
    gap:10px !important;
  }
  #gridProductos .producto-card-horizontal .producto-name{
    font-size:1.1rem !important;
  }
  #gridProductos .producto-card-horizontal .producto-price{
    font-size:1.35rem !important;
  }
}

@media (max-width:520px){
  #gridProductos .producto-card-horizontal{
    grid-template-columns:1fr !important;
    min-height:auto !important;
  }
  #gridProductos .producto-card-horizontal .producto-image-wrap{
    width:100% !important;
    height:140px !important;
    order:1 !important;
  }
  #gridProductos .producto-card-horizontal .producto-content{
    order:2 !important;
    padding:14px 12px !important;
  }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
}

/* ===== Web Replica: Navbar + Fondo + Cards Apuestas Usuario ===== */
html, body{
  min-height:100% !important;
  background-color:#030303 !important;
  background-image:
    radial-gradient(circle at 0% 0%, rgba(255, 212, 0, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(255, 212, 0, 0.05) 0%, transparent 50%),
    linear-gradient(rgba(255, 224, 0, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 224, 0, 0.03) 1px, transparent 1px) !important;
  background-size:100% 100%, 100% 100%, 50px 50px, 50px 50px !important;
}
body::before,
body::after{
  content:"" !important;
  position:fixed !important;
  width:500px !important;
  height:500px !important;
  border-radius:50% !important;
  filter:blur(120px) !important;
  z-index:-1 !important;
  opacity:.15 !important;
  pointer-events:none !important;
}
body::before{
  top:-100px !important;
  left:-100px !important;
  background:#FFE000 !important;
  animation:webBgFloat 20s infinite ease-in-out !important;
}
body::after{
  bottom:-100px !important;
  right:-100px !important;
  background:#FFE000 !important;
  opacity:.05 !important;
  animation:webBgFloat 20s infinite ease-in-out !important;
  animation-delay:-5s !important;
}
@keyframes webBgFloat{
  0%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(30px,-50px) scale(1.1); }
  66%{ transform:translate(-20px,20px) scale(.9); }
  100%{ transform:translate(0,0) scale(1); }
}
.bg-wrapper{
  position:fixed !important;
  inset:0 !important;
  background-color:transparent !important;
  background-image:none !important;
  pointer-events:none !important;
  z-index:0 !important;
}
#particles-js{
  position:fixed !important;
  inset:0 !important;
  z-index:0 !important;
  opacity:.2 !important;
  pointer-events:none !important;
}

.navbar.navbar-pro-v2{
  min-height:92px !important;
  height:auto !important;
  padding:12px 34px !important;
  display:grid !important;
  grid-template-columns:auto 1fr auto !important;
  align-items:center !important;
  column-gap:26px !important;
  background:rgba(4,4,4,.9) !important;
  border-bottom:1px solid rgba(255,224,0,.2) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.55), 0 0 20px rgba(255,224,0,.12) !important;
  backdrop-filter:blur(14px) saturate(150%) !important;
  -webkit-backdrop-filter:blur(14px) saturate(150%) !important;
}
.navbar.navbar-pro-v2 .brand{
  flex:0 0 auto !important;
}
.navbar.navbar-pro-v2 .nav-brand-pill{
  background:#FFE000 !important;
  border-radius:12px !important;
  border:1px solid rgba(255,245,156,.65) !important;
  box-shadow:0 0 26px rgba(255,224,0,.24) !important;
  padding:9px 14px !important;
}
.navbar.navbar-pro-v2 .nav-logo-main{
  height:46px !important;
  width:auto !important;
  display:block !important;
}
.navbar.navbar-pro-v2 .nav-mobile-top{
  display:flex !important;
  align-items:center !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  justify-content:center !important;
}
.navbar.navbar-pro-v2 .nav-mobile-top .nav-left{
  flex:1 1 auto !important;
  min-width:0 !important;
  justify-content:center !important;
  gap:10px !important;
  overflow:visible !important;
}
.navbar.navbar-pro-v2 .nav-mobile-bottom{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  margin-left:0 !important;
}
.navbar.navbar-pro-v2 .nav-mobile-bottom .nav-right{
  gap:12px !important;
}
.navbar.navbar-pro-v2 .nav-item{
  color:rgba(255,255,255,.78) !important;
  text-decoration:none !important;
  padding:12px 16px !important;
  font-weight:800 !important;
  font-size:1.02rem !important;
  letter-spacing:.2px !important;
  border-radius:12px !important;
  border:1px solid transparent !important;
  background:rgba(255,255,255,.02) !important;
  box-shadow:none !important;
  text-transform:none !important;
  line-height:1 !important;
}
.navbar.navbar-pro-v2 .nav-item::before,
.navbar.navbar-pro-v2 .nav-item::after{
  content:none !important;
  display:none !important;
}
.navbar.navbar-pro-v2 .nav-item:hover,
.navbar.navbar-pro-v2 .nav-item.active{
  color:#111 !important;
  background:linear-gradient(135deg,#ffe96e,#ffd900) !important;
  border-color:rgba(255,224,0,.72) !important;
  text-shadow:none !important;
  transform:none !important;
  box-shadow:0 8px 20px rgba(255,224,0,.22) !important;
}
.navbar.navbar-pro-v2 .more-dropdown{
  border-radius:14px !important;
  background:rgba(8,8,10,.92) !important;
  border:1px solid rgba(255,215,0,.2) !important;
}

.navbar.navbar-pro-v2 .btn-auth{
  border-radius:999px !important;
  border:1px solid rgba(255,224,0,.7) !important;
  background:linear-gradient(135deg,#ffe96e,#ffd100) !important;
  color:#111 !important;
  font-size:1.02rem !important;
  font-weight:900 !important;
  padding:12px 26px !important;
  letter-spacing:.2px !important;
  text-transform:none !important;
  box-shadow:0 10px 20px rgba(255,224,0,.24) !important;
}
.navbar.navbar-pro-v2 .btn-auth::before,
.navbar.navbar-pro-v2 .btn-auth::after{
  content:none !important;
  display:none !important;
}
.navbar.navbar-pro-v2 .btn-auth:hover{
  color:#000 !important;
  border-color:rgba(255,238,150,.9) !important;
  background:linear-gradient(135deg,#fff2a0,#ffd100) !important;
  transform:translateY(-1px) !important;
  box-shadow:0 14px 26px rgba(255,224,0,.36), 0 0 24px rgba(255,224,0,.26) !important;
}
.navbar.navbar-pro-v2 .btn-register{
  background:linear-gradient(135deg,#ffe96e,#ffd100) !important;
  color:#111 !important;
  border:1px solid rgba(255,224,0,.75) !important;
}
.navbar.navbar-pro-v2 .btn-register:hover{
  color:#000 !important;
  box-shadow:0 14px 26px rgba(255,224,0,.36), 0 0 24px rgba(255,224,0,.26) !important;
}

.navbar.navbar-pro-v2 .btn-work-cta{
  min-height:52px !important;
  padding:12px 30px !important;
  border-radius:16px !important;
  border:1px solid rgba(255,224,0,.6) !important;
  background:linear-gradient(135deg,#fff1a0 0%, #ffe000 48%, #ffc700 100%) !important;
  box-shadow:0 12px 26px rgba(255,224,0,.28) !important;
  animation:none !important;
}
.navbar.navbar-pro-v2 .btn-work-cta::before{
  content:none !important;
  display:none !important;
}
.navbar.navbar-pro-v2 .btn-work-cta::after{
  content:none !important;
  display:none !important;
}
.navbar.navbar-pro-v2 .btn-work-cta .btn-work-cta__label{
  color:#0d0d0d !important;
  font-weight:900 !important;
  letter-spacing:1.05px !important;
  text-transform:uppercase !important;
  text-shadow:none !important;
}
.navbar.navbar-pro-v2 .btn-work-cta:hover{
  transform:translateY(-1px) !important;
  box-shadow:0 14px 28px rgba(255,224,0,.36), 0 0 28px rgba(255,224,0,.26) !important;
}

#gridApuestas .pro-card.pro-card-user.bet-card{
  position:relative !important;
  overflow:hidden !important;
  border:1.5px solid rgba(255,224,0,.26) !important;
  border-radius:18px !important;
  background:linear-gradient(135deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.01) 100%) !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
  box-shadow:0 10px 30px rgba(0,0,0,.6) !important;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
  animation:none !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card::before{
  content:none !important;
  display:none !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card::after{
  content:"" !important;
  position:absolute !important;
  right:-70px !important;
  top:-70px !important;
  width:180px !important;
  height:180px !important;
  border-radius:50% !important;
  background:radial-gradient(circle, rgba(255,224,0,.14), transparent 68%) !important;
  pointer-events:none !important;
  animation:none !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card:hover{
  border-color:rgba(255,224,0,.52) !important;
  transform:translateY(-6px) scale(1.01) !important;
  box-shadow:0 20px 50px rgba(0,0,0,.75), 0 0 32px rgba(255,224,0,.2) !important;
}
#gridApuestas .bet-card-title{
  font-size:1.85rem !important;
  color:#FFE000 !important;
  text-shadow:0 0 16px rgba(255,224,0,.22) !important;
}
#gridApuestas .bet-card-line{
  color:rgba(255,255,255,.8) !important;
}
#gridApuestas .bet-card-line i{
  color:#FFE000 !important;
}
#gridApuestas .bet-card-odds{
  border:1px solid rgba(255,224,0,.24) !important;
  background:linear-gradient(135deg, rgba(255,212,0,.12), rgba(255,212,0,.04)) !important;
  box-shadow:inset 0 0 18px rgba(255,224,0,.08) !important;
}
#gridApuestas .bet-card-odds-label{
  color:rgba(255,255,255,.8) !important;
}
#gridApuestas .bet-card-odds-label strong{
  color:#fff6bf !important;
}
#gridApuestas .bet-card-code{
  background:rgba(255,224,0,.08) !important;
  border-color:rgba(255,224,0,.24) !important;
}
#gridApuestas .bet-card-code b{
  color:#FFE000 !important;
}
#gridApuestas .bet-card-cuota{
  color:#FFE000 !important;
  text-shadow:0 0 22px rgba(255,224,0,.3) !important;
}
#gridApuestas .bet-card-desc{
  border:1px solid rgba(255,255,255,.1) !important;
  background:rgba(0,0,0,.32) !important;
  color:rgba(255,255,255,.9) !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card .btn-mini{
  border:1px solid rgba(255,224,0,.42) !important;
  background:rgba(255,212,0,.1) !important;
  color:#FFE98A !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card .btn-mini:hover{
  background:linear-gradient(135deg,#ffe000,#ffc700) !important;
  color:#070707 !important;
  box-shadow:0 8px 22px rgba(255,224,0,.3) !important;
}

@media (max-width: 980px){
  .navbar.navbar-pro-v2{
    min-height:70px !important;
    padding:8px 12px !important;
    display:flex !important;
    gap:8px !important;
  }
  .navbar.navbar-pro-v2 .nav-logo-main{
    height:32px !important;
  }
  .navbar.navbar-pro-v2 .nav-mobile-top{
    justify-content:flex-end !important;
  }
  .navbar.navbar-pro-v2 .nav-mobile-top .nav-left{
    display:none !important;
  }
  .navbar.navbar-pro-v2 .nav-mobile-bottom{
    margin-left:0 !important;
  }
  .navbar.navbar-pro-v2 .nav-mobile-bottom .nav-right{
    gap:8px !important;
  }
  .navbar.navbar-pro-v2 .nav-mobile-bottom .btn-auth,
  .navbar.navbar-pro-v2 .nav-mobile-bottom .user-chip{
    display:none !important;
  }
  .navbar.navbar-pro-v2 .btn-work-cta{
    min-height:40px !important;
    padding:9px 12px !important;
    border-radius:10px !important;
  }
  .navbar.navbar-pro-v2 .btn-work-cta .btn-work-cta__label{
    font-size:.78rem !important;
    letter-spacing:.65px !important;
  }
  .navbar.navbar-pro-v2 .nav-hamburger{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:40px !important;
    height:40px !important;
    padding:0 !important;
    border-radius:12px !important;
    margin-left:4px !important;
    background:rgba(255,212,0,.08) !important;
    border:1px solid rgba(255,224,0,.5) !important;
    color:#ffe000 !important;
    box-shadow:0 0 14px rgba(255,224,0,.22) !important;
  }
}

@media (max-width: 420px){
  .navbar.navbar-pro-v2 .btn-work-cta{
    max-width:154px !important;
  }
  .navbar.navbar-pro-v2 .btn-work-cta .btn-work-cta__label{
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
}

/* ===== HARD OVERRIDE FINAL: NAVBAR REPLICA + USER BET CARD CLEAN ===== */
@media (min-width: 981px){
  .navbar.navbar-pro-v2{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:20px !important;
    min-height:86px !important;
    padding:12px 5% !important;
    background:rgba(5,5,5,.86) !important;
    border-bottom:1px solid rgba(255,255,255,.05) !important;
    backdrop-filter:blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter:blur(20px) saturate(180%) !important;
    box-shadow:0 8px 24px rgba(0,0,0,.45) !important;
  }
  .navbar.navbar-pro-v2 .nav-spacer{
    display:none !important;
  }
  .navbar.navbar-pro-v2 .brand{
    flex:0 0 auto !important;
  }
  .navbar.navbar-pro-v2 .nav-brand-pill{
    display:block !important;
    background:#FFE000 !important;
    border:1px solid rgba(255,245,170,.65) !important;
    border-radius:10px !important;
    box-shadow:0 0 20px rgba(255,224,0,.2) !important;
    padding:6px 12px !important;
  }
  .navbar.navbar-pro-v2 .nav-logo-main{
    height:44px !important;
    width:auto !important;
  }

  .navbar.navbar-pro-v2 .nav-mobile-top{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:1 1 auto !important;
    min-width:0 !important;
  }
  .navbar.navbar-pro-v2 .nav-mobile-top .nav-left{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    flex-wrap:nowrap !important;
    overflow:visible !important;
  }
  .navbar.navbar-pro-v2 .nav-hamburger{
    display:none !important;
  }

  .navbar.navbar-pro-v2 .nav-item{
    color:rgba(255,255,255,.62) !important;
    text-decoration:none !important;
    padding:8px 15px !important;
    font-weight:700 !important;
    font-size:.95rem !important;
    border-radius:10px !important;
    border:1px solid transparent !important;
    background:transparent !important;
    text-transform:none !important;
    letter-spacing:.2px !important;
    box-shadow:none !important;
    line-height:1.1 !important;
  }
  .navbar.navbar-pro-v2 .nav-item::before,
  .navbar.navbar-pro-v2 .nav-item::after{
    content:none !important;
    display:none !important;
  }
  .navbar.navbar-pro-v2 .nav-item:hover{
    color:#ffe000 !important;
    background:rgba(255,212,0,.05) !important;
    border-color:rgba(255,212,0,.2) !important;
    text-shadow:0 0 10px rgba(255,224,0,.3) !important;
  }
  .navbar.navbar-pro-v2 .nav-item.active{
    color:#111 !important;
    background:linear-gradient(135deg,#ffe96e,#ffd100) !important;
    border-color:rgba(255,224,0,.72) !important;
    text-shadow:none !important;
    box-shadow:0 8px 20px rgba(255,224,0,.2) !important;
  }

  .navbar.navbar-pro-v2 .nav-mobile-bottom{
    display:flex !important;
    align-items:center !important;
    flex:0 0 auto !important;
    margin-left:0 !important;
  }
  .navbar.navbar-pro-v2 .nav-mobile-bottom .nav-right{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
  }

  .navbar.navbar-pro-v2 .btn-work-cta{
    min-height:50px !important;
    padding:11px 30px !important;
    border-radius:18px !important;
    border:1px solid rgba(255,224,0,.55) !important;
    background:linear-gradient(135deg,#fff0a0 0%, #ffe000 48%, #ffc800 100%) !important;
    box-shadow:0 12px 24px rgba(255,224,0,.22) !important;
    animation:none !important;
    transform:none !important;
  }
  .navbar.navbar-pro-v2 .btn-work-cta::before,
  .navbar.navbar-pro-v2 .btn-work-cta::after{
    content:none !important;
    display:none !important;
  }
  .navbar.navbar-pro-v2 .btn-work-cta .btn-work-cta__label{
    color:#111 !important;
    font-weight:900 !important;
    letter-spacing:1px !important;
    text-shadow:none !important;
  }
  .navbar.navbar-pro-v2 .btn-work-cta:hover{
    transform:translateY(-1px) !important;
    box-shadow:0 14px 28px rgba(255,224,0,.35) !important;
  }

  .navbar.navbar-pro-v2 .btn-auth{
    border-radius:999px !important;
    border:1px solid rgba(255,224,0,.72) !important;
    background:linear-gradient(135deg,#ffe96e,#ffd100) !important;
    color:#111 !important;
    font-size:.98rem !important;
    font-weight:900 !important;
    padding:11px 24px !important;
    letter-spacing:.15px !important;
    box-shadow:0 10px 20px rgba(255,224,0,.2) !important;
    text-transform:none !important;
  }
  .navbar.navbar-pro-v2 .btn-auth::before,
  .navbar.navbar-pro-v2 .btn-auth::after{
    content:none !important;
    display:none !important;
  }
  .navbar.navbar-pro-v2 .btn-auth:hover{
    color:#000 !important;
    background:linear-gradient(135deg,#fff3ae,#ffd100) !important;
    box-shadow:0 12px 24px rgba(255,224,0,.32) !important;
    transform:translateY(-1px) !important;
  }
}

#gridApuestas .pro-card.pro-card-user.bet-card,
#gridApuestas .pro-card.pro-card-user.bet-card *{
  animation:none !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card{
  background:linear-gradient(180deg, rgba(16,16,16,.9), rgba(7,7,7,.95)) !important;
  border:1px solid rgba(255,224,0,.26) !important;
  box-shadow:0 10px 30px rgba(0,0,0,.6) !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card::before,
#gridApuestas .pro-card.pro-card-user.bet-card::after{
  content:none !important;
  display:none !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card:hover{
  transform:translateY(-5px) !important;
  border-color:rgba(255,224,0,.5) !important;
  box-shadow:0 15px 40px rgba(0,0,0,.8), 0 0 30px rgba(255,224,0,.25) !important;
}
#gridApuestas .bet-card-odds{
  background:rgba(255,255,255,.03) !important;
  border:1px solid rgba(255,224,0,.24) !important;
  box-shadow:none !important;
}
#gridApuestas .bet-card-desc{
  background:rgba(255,255,255,.02) !important;
  border:1px solid rgba(255,255,255,.08) !important;
}

/* ===== ULTIMATE WEB COPY (literal) ===== */
@media (min-width: 981px){
  .navbar.navbar-pro-v2{
    position:fixed !important;
    top:30px !important;
    left:0 !important;
    width:100% !important;
    z-index:1000 !important;
    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
    padding:12px 5% !important;
    background:rgba(5, 5, 5, 0.85) !important;
    border-bottom:1px solid rgba(255,255,255,0.05) !important;
    backdrop-filter:blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter:blur(20px) saturate(180%) !important;
    overflow:visible !important;
    box-shadow:none !important;
    min-height:auto !important;
    height:auto !important;
    gap:12px !important;
  }
  .navbar.navbar-pro-v2 .brand{
    flex:0 0 auto !important;
    margin:0 !important;
  }
  .navbar.navbar-pro-v2 .nav-brand-pill{
    padding:0 !important;
    border-radius:0 !important;
    border:none !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  .navbar.navbar-pro-v2 .nav-logo-main{
    height:52px !important;
    width:auto !important;
    max-height:52px !important;
    object-fit:contain !important;
    filter:drop-shadow(0 6px 12px rgba(0,0,0,.35)) !important;
  }
  .navbar.navbar-pro-v2 .nav-spacer{
    display:none !important;
  }
  .navbar.navbar-pro-v2 .nav-mobile-top{
    flex:1 1 auto !important;
    min-width:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  .navbar.navbar-pro-v2 .nav-mobile-top .nav-left{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:10px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    min-width:0 !important;
    scrollbar-width:none !important;
    flex-wrap:nowrap !important;
  }
  .navbar.navbar-pro-v2 .nav-mobile-top .nav-left::-webkit-scrollbar {
    display: none !important;
  }
  .navbar.navbar-pro-v2 .nav-hamburger{
    display:none !important;
  }
  .navbar.navbar-pro-v2 .nav-item{
    color:rgba(255,255,255,0.6) !important;
    text-decoration:none !important;
    padding:8px 15px !important;
    font-weight:600 !important;
    font-size:0.85rem !important;
    transition:all .4s cubic-bezier(0.23, 1, 0.32, 1) !important;
    border-radius:10px !important;
    border:1px solid transparent !important;
    background:transparent !important;
    letter-spacing:0 !important;
    text-transform:none !important;
    box-shadow:none !important;
    text-shadow:none !important;
    transform:none !important;
  }
  .navbar.navbar-pro-v2 .nav-item::before,
  .navbar.navbar-pro-v2 .nav-item::after{
    content:none !important;
    display:none !important;
  }
  .navbar.navbar-pro-v2 .nav-item:hover,
  .navbar.navbar-pro-v2 .nav-item.active{
    color:#FFE000 !important;
    background:rgba(255, 212, 0, 0.05) !important;
    border-color:rgba(255, 212, 0, 0.2) !important;
    text-shadow:0 0 10px rgba(255,224,0,.45) !important;
  }

  .navbar.navbar-pro-v2 .nav-mobile-bottom{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    margin-left:0 !important;
    flex:0 0 auto !important;
  }
  .navbar.navbar-pro-v2 .nav-mobile-bottom .nav-right{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
  }
  .navbar.navbar-pro-v2 .btn-work-cta{
    min-height:auto !important;
    padding:8px 16px !important;
    border-radius:10px !important;
    border:1px solid rgba(255,212,0,0.25) !important;
    background:rgba(255, 212, 0, 0.05) !important;
    box-shadow:none !important;
    animation:none !important;
    transform:none !important;
  }
  .navbar.navbar-pro-v2 .btn-work-cta::before,
  .navbar.navbar-pro-v2 .btn-work-cta::after{
    content:none !important;
    display:none !important;
  }
  .navbar.navbar-pro-v2 .btn-work-cta .btn-work-cta__label{
    color:#FFE000 !important;
    font-weight:700 !important;
    font-size:.85rem !important;
    letter-spacing:0 !important;
    text-shadow:none !important;
  }
  .navbar.navbar-pro-v2 .btn-work-cta:hover{
    color:#FFE000 !important;
    background:rgba(255, 212, 0, 0.1) !important;
    border-color:rgba(255, 212, 0, 0.4) !important;
    box-shadow:none !important;
    transform:none !important;
  }
  .navbar.navbar-pro-v2 .btn-auth{
    padding:8px 15px !important;
    font-size:0.85rem !important;
    border-radius:10px !important;
    margin-left:0 !important;
    background:var(--primary, #FFE000) !important;
    color:#000 !important;
    border:1px solid transparent !important;
    font-weight:700 !important;
    letter-spacing:0 !important;
    box-shadow:none !important;
  }
  .navbar.navbar-pro-v2 .btn-auth::before,
  .navbar.navbar-pro-v2 .btn-auth::after{
    content:none !important;
    display:none !important;
  }
  .navbar.navbar-pro-v2 .btn-auth:hover{
    background:#ffe95a !important;
    color:#000 !important;
    transform:none !important;
    box-shadow:none !important;
  }
}

/* Card de usuario: copia de base glass-card de web (sin tintes internos) */
#gridApuestas .pro-card.pro-card-user.bet-card{
  background:#050505 !important;
  border:1.5px solid rgba(255,255,255,0.1) !important;
  border-radius:25px !important;
  box-shadow:0 10px 30px rgba(0,0,0,0.6) !important;
  transition:all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
  animation:none !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card::before,
#gridApuestas .pro-card.pro-card-user.bet-card::after{
  content:none !important;
  display:none !important;
  background:none !important;
  animation:none !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card:hover{
  transform:translateY(-5px) scale(1.01) !important;
  border-color:rgba(255, 212, 0, 0.4) !important;
  box-shadow:0 15px 30px rgba(0,0,0,0.6), 0 0 15px rgba(255, 212, 0, 0.1) !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card .bet-card-odds{
  background:rgba(255,255,255,0.03) !important;
  border:1px solid rgba(255,255,255,0.1) !important;
  box-shadow:none !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card .bet-card-desc{
  background:rgba(255,255,255,0.02) !important;
  border:1px solid rgba(255,255,255,0.08) !important;
}

/* ===== Match hover de productos en cards de apuestas usuario ===== */
#gridApuestas .pro-card.pro-card-user.bet-card{
  position:relative !important;
  overflow:hidden !important;
  transition:transform .26s ease, box-shadow .26s ease, border-color .26s ease !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.07) 26%, transparent 55%) !important;
  transform:translateX(-140%) !important;
  transition:transform .55s ease !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card:hover::before{
  transform:translateX(140%) !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card:hover{
  transform:translateY(-8px) scale(1.01) !important;
  border-color:rgba(255,233,128,.9) !important;
  box-shadow:0 24px 54px rgba(0,0,0,.56), 0 0 34px rgba(255,214,0,.24) !important;
}

/* ===== Copia literal visual de producto para apuestas usuario ===== */
#gridApuestas .pro-card.pro-card-user.bet-card.product-card-v2{
  position:relative !important;
  overflow:hidden !important;
  border-width:1.5px !important;
  border-color:rgba(255,220,98,.56) !important;
  background:
    radial-gradient(420px 170px at 100% 0%, rgba(255,220,98,.2), transparent 60%),
    linear-gradient(165deg, rgba(17,17,17,.94), rgba(6,6,6,.98)) !important;
  box-shadow:0 18px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(255,220,98,.08) inset !important;
  transition:transform .26s ease, box-shadow .26s ease, border-color .26s ease !important;
  animation:none !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card.product-card-v2::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.07) 26%, transparent 55%) !important;
  transform:translateX(-140%) !important;
  transition:transform .55s ease !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card.product-card-v2:hover::before{
  transform:translateX(140%) !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card.product-card-v2:hover{
  transform:translateY(-8px) scale(1.01) !important;
  border-color:rgba(255,233,128,.9) !important;
  box-shadow:0 24px 54px rgba(0,0,0,.56), 0 0 34px rgba(255,214,0,.24) !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card.product-card-v2 .product-card-glow{
  position:absolute !important;
  top:-65px !important;
  right:-70px !important;
  width:170px !important;
  height:170px !important;
  border-radius:999px !important;
  pointer-events:none !important;
  background:radial-gradient(circle, rgba(255,225,120,.2) 0%, rgba(255,225,120,.02) 60%, transparent 72%) !important;
}

/* ===== Compactar cards de apuestas (usuario) ===== */
#gridApuestas .pro-card.pro-card-user.bet-card{
  padding:16px !important;
  min-height:0 !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card .bet-card-head{
  gap:10px !important;
  margin-top:0 !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card .bet-card-title{
  font-size:1.55rem !important;
  line-height:1 !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card .bet-card-icon{
  width:48px !important;
  height:48px !important;
  border-radius:12px !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card .bet-card-icon svg{
  width:24px !important;
  height:24px !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card .bet-card-meta{
  gap:6px !important;
  margin-top:10px !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card .bet-card-line{
  font-size:.95rem !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card .bet-card-odds{
  margin-top:12px !important;
  padding:12px 12px !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card .bet-card-cuota{
  font-size:1.7rem !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card .bet-card-desc{
  margin-top:10px !important;
  padding:11px 12px !important;
  min-height:72px !important;
  font-size:.95rem !important;
  line-height:1.5 !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card .bet-card-foot{
  margin-top:12px !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card .btn-mini{
  min-width:118px !important;
  padding:8px 12px !important;
  font-size:.88rem !important;
}

/* ===== Ajuste final: cards de apuestas más compactas ===== */
#gridApuestas.data-grid{
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap:18px !important;
}
#gridApuestas .vip3d-wrapper{
  min-height:360px !important;
}
#gridApuestas .vip3d-content{
  padding:16px 14px !important;
}
#gridApuestas .vip3d-title{
  font-size:1.55rem !important;
  margin:4px 0 10px !important;
}
#gridApuestas .vip3d-oddbox{
  margin:10px 0 !important;
}
#gridApuestas .vip3d-desc{
  margin-top:8px !important;
  margin-bottom:8px !important;
  font-size:.95rem !important;
  line-height:1.45 !important;
}
#gridApuestas .bet-card{
  min-height:0 !important;
  padding:14px !important;
}
#gridApuestas .bet-card-desc{
  min-height:64px !important;
  -webkit-line-clamp:3 !important;
}

/* ===== Ajuste ultra compacto (alto más corto) ===== */
#gridApuestas.data-grid{
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap:14px !important;
  align-items:start !important;
}
#gridApuestas .vip3d-wrapper{
  min-height:0 !important;
  height:auto !important;
}
#gridApuestas .vip3d-card{
  height:auto !important;
}
#gridApuestas .vip3d-content{
  padding:12px 12px !important;
}
#gridApuestas .vip3d-title{
  font-size:1.35rem !important;
  margin:2px 0 8px !important;
}
#gridApuestas .vip3d-date{
  font-size:.9rem !important;
}
#gridApuestas .vip3d-oddbox{
  margin:8px 0 !important;
  padding:10px 11px !important;
}
#gridApuestas .vip3d-oddbox .val{
  font-size:2rem !important;
}
#gridApuestas .vip3d-timer{
  margin-top:8px !important;
}
#gridApuestas .vip3d-stake{
  margin-top:8px !important;
}
#gridApuestas .vip3d-desc{
  margin-top:8px !important;
  margin-bottom:8px !important;
  padding:8px 10px !important;
  min-height:0 !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}
#gridApuestas .vip3d-btn{
  margin-top:10px !important;
  padding:10px 12px !important;
  font-size:.92rem !important;
  border-radius:14px !important;
}
#gridApuestas .bet-card{
  min-height:0 !important;
  padding:12px !important;
  justify-content:flex-start !important;
  gap:8px !important;
}
#gridApuestas .bet-card-head{
  gap:8px !important;
  margin-top:0 !important;
}
#gridApuestas .bet-card-title{
  font-size:1.35rem !important;
}
#gridApuestas .bet-card-meta{
  margin-top:4px !important;
  gap:4px !important;
}
#gridApuestas .bet-card-line{
  font-size:.9rem !important;
}
#gridApuestas .bet-card-odds{
  margin-top:8px !important;
  padding:10px 11px !important;
  border-radius:12px !important;
}
#gridApuestas .bet-card-odds-label{
  gap:4px !important;
  font-size:.74rem !important;
}
#gridApuestas .bet-card-code{
  padding:5px 8px !important;
  font-size:.72rem !important;
}
#gridApuestas .bet-card-cuota{
  font-size:1.95rem !important;
}
#gridApuestas .bet-card-desc{
  margin-top:8px !important;
  padding:9px 10px !important;
  min-height:54px !important;
  font-size:.9rem !important;
  line-height:1.45 !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}
#gridApuestas .bet-card-foot{
  margin-top:8px !important;
}
#gridApuestas .bet-card .btn-mini{
  min-width:98px !important;
  padding:7px 10px !important;
  font-size:.8rem !important;
  border-radius:10px !important;
}

/* ===== Usuario más pequeño (aprox mitad visual de la VIP) ===== */
#gridApuestas .pro-card.pro-card-user.bet-card{
  min-height:260px !important;
  max-height:300px !important;
  padding:10px !important;
  gap:6px !important;
  overflow:hidden !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card .bet-card-head{
  gap:6px !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card .bet-card-title{
  font-size:1.12rem !important;
  letter-spacing:.5px !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card .bet-card-icon{
  width:36px !important;
  height:36px !important;
  border-radius:9px !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card .bet-card-icon svg{
  width:18px !important;
  height:18px !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card .bet-card-meta{
  margin-top:2px !important;
  gap:3px !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card .bet-card-line{
  font-size:.84rem !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card .bet-card-odds{
  margin-top:6px !important;
  padding:8px 9px !important;
  border-radius:10px !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card .bet-card-odds-label{
  gap:2px !important;
  font-size:.68rem !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card .bet-card-code{
  padding:4px 7px !important;
  font-size:.66rem !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card .bet-card-cuota{
  font-size:1.6rem !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card .bet-card-desc{
  margin-top:6px !important;
  padding:7px 8px !important;
  min-height:38px !important;
  font-size:.83rem !important;
  line-height:1.35 !important;
  -webkit-line-clamp:1 !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card .bet-card-foot{
  margin-top:6px !important;
}
#gridApuestas .pro-card.pro-card-user.bet-card .btn-mini{
  min-width:88px !important;
  padding:6px 9px !important;
  font-size:.76rem !important;
}

/* ===== NAVBAR FINAL: ECUABET GUAYAQUIL (referencia) ===== */
.navbar.navbar-pro-v2{
  top:30px !important;
  min-height:62px !important;
  height:62px !important;
  padding:0 16px !important;
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto !important;
  align-items:center !important;
  column-gap:12px !important;
  background:rgba(2,2,2,.92) !important;
  border-bottom:1px solid rgba(255,220,0,.14) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.45) !important;
  backdrop-filter:blur(12px) saturate(130%) !important;
  -webkit-backdrop-filter:blur(12px) saturate(130%) !important;
}
.navbar.navbar-pro-v2 .nav-spacer,
.navbar.navbar-pro-v2 .more-menu,
.navbar.navbar-pro-v2 .nav-logo-main{
  display:none !important;
}
.navbar.navbar-pro-v2 .brand{
  display:flex !important;
  align-items:center !important;
  margin:0 !important;
  min-width:0 !important;
}
.navbar.navbar-pro-v2 .nav-brand-pill{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:linear-gradient(135deg,#ffe600,#ffd200) !important;
  border:1px solid rgba(255,240,154,.68) !important;
  border-radius:8px !important;
  box-shadow:0 0 24px rgba(255,224,0,.3) !important;
  padding:7px 20px !important;
}
.navbar.navbar-pro-v2 .nav-brand-text{
  display:block !important;
  color:#0a0a0a !important;
  font-family:'Rajdhani',sans-serif !important;
  font-size:2rem !important;
  font-weight:800 !important;
  line-height:1 !important;
  letter-spacing:.1px !important;
  white-space:nowrap !important;
}
.navbar.navbar-pro-v2 .nav-mobile-top{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  min-width:0 !important;
}
.navbar.navbar-pro-v2 .nav-mobile-top .nav-left{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:4px !important;
  min-width:0 !important;
  overflow:visible !important;
}
.navbar.navbar-pro-v2 .nav-item{
  font-family:'Rajdhani',sans-serif !important;
  font-size:1.28rem !important;
  font-weight:700 !important;
  color:rgba(255,255,255,.68) !important;
  text-transform:none !important;
  letter-spacing:.2px !important;
  line-height:1 !important;
  padding:8px 12px !important;
  border-radius:10px !important;
  border:1px solid transparent !important;
  background:transparent !important;
  box-shadow:none !important;
  text-decoration:none !important;
  transition:all .2s ease !important;
}
.navbar.navbar-pro-v2 .nav-item::before,
.navbar.navbar-pro-v2 .nav-item::after{
  content:none !important;
  display:none !important;
}
.navbar.navbar-pro-v2 .nav-item:hover{
  color:#ffe277 !important;
  border-color:rgba(255,220,0,.2) !important;
  background:rgba(255,220,0,.05) !important;
}
.navbar.navbar-pro-v2 .nav-item.active{
  color:#f7cf00 !important;
  border-color:rgba(255,220,0,.38) !important;
  background:rgba(255,220,0,.07) !important;
  box-shadow:0 0 12px rgba(255,224,0,.16) inset !important;
}
.navbar.navbar-pro-v2 .nav-mobile-bottom{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  margin:0 !important;
}
.navbar.navbar-pro-v2 .nav-mobile-bottom .nav-right{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}
.navbar.navbar-pro-v2 .nav-right .user-chip,
.navbar.navbar-pro-v2 .nav-right button.btn-auth{
  display:none !important;
}
.navbar.navbar-pro-v2 .btn-work-cta{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-decoration:none !important;
  font-family:'Rajdhani',sans-serif !important;
  font-weight:900 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  color:#ffe97a !important;
  background:linear-gradient(140deg,#202020,#080808) !important;
  border:1px solid rgba(255,223,92,.85) !important;
  border-radius:999px !important;
  padding:8px 14px !important;
  box-shadow:
    0 6px 14px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,215,0,.08) inset !important;
  transition:all .2s ease !important;
}
.navbar.navbar-pro-v2 .btn-work-cta .btn-work-cta__label{
  display:block !important;
  font-size:1rem !important;
  line-height:1 !important;
}
.navbar.navbar-pro-v2 .btn-work-cta:hover{
  color:#fff3b2 !important;
  border-color:#ffe87a !important;
  background:linear-gradient(140deg,#2a2a2a,#0e0e0e) !important;
  box-shadow:
    0 8px 18px rgba(0,0,0,.5),
    0 0 14px rgba(255,220,0,.22) !important;
  transform:translateY(-1px) !important;
}
.navbar.navbar-pro-v2 .btn-auth.btn-register{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-family:'Rajdhani',sans-serif !important;
  font-size:1.2rem !important;
  font-weight:800 !important;
  line-height:1 !important;
  letter-spacing:.2px !important;
  text-transform:uppercase !important;
  color:#0b0b0b !important;
  background:linear-gradient(135deg,#ffe85d,#ffd400) !important;
  border:1px solid rgba(255,235,120,.85) !important;
  border-radius:999px !important;
  padding:8px 16px !important;
  box-shadow:0 8px 18px rgba(255,224,0,.22) !important;
}
.navbar.navbar-pro-v2 .btn-auth.btn-register:hover{
  background:linear-gradient(135deg,#ffef8a,#ffd400) !important;
  transform:translateY(-1px) !important;
  box-shadow:0 12px 22px rgba(255,224,0,.3) !important;
}
.navbar.navbar-pro-v2 .nav-hamburger{
  display:none !important;
}
.main-content{
  padding-top:98px !important;
}

@media (max-width: 980px){
  .navbar.navbar-pro-v2{
    min-height:62px !important;
    height:62px !important;
    padding:0 10px !important;
    grid-template-columns:1fr auto auto !important;
    grid-template-areas:"brand auth menu" !important;
    column-gap:8px !important;
  }
  .navbar.navbar-pro-v2 .brand{ grid-area:brand !important; }
  .navbar.navbar-pro-v2 .nav-mobile-bottom{
    grid-area:auth !important;
    justify-content:flex-end !important;
  }
  .navbar.navbar-pro-v2 .nav-mobile-top{
    grid-area:menu !important;
    justify-content:flex-end !important;
  }
  .navbar.navbar-pro-v2 .nav-mobile-top .nav-left{
    display:none !important;
  }
  .navbar.navbar-pro-v2 .nav-hamburger{
    display:inline-flex !important;
    width:38px !important;
    height:38px !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:1.45rem !important;
    border-radius:10px !important;
    border:1px solid rgba(255,220,0,.55) !important;
    background:rgba(255,220,0,.07) !important;
    color:#ffe000 !important;
    padding:0 !important;
    margin:0 !important;
    box-shadow:0 0 12px rgba(255,224,0,.2) !important;
  }
  .navbar.navbar-pro-v2 .nav-brand-pill{
    padding:7px 10px !important;
    border-radius:7px !important;
  }
  .navbar.navbar-pro-v2 .nav-brand-text{
    font-size:1.25rem !important;
  }
  .navbar.navbar-pro-v2 .nav-right .user-chip,
  .navbar.navbar-pro-v2 .nav-right button.btn-auth{
    display:none !important;
  }
  .navbar.navbar-pro-v2 .btn-work-cta{
    padding:7px 10px !important;
  }
  .navbar.navbar-pro-v2 .btn-work-cta .btn-work-cta__label{
    font-size:.78rem !important;
  }
  .navbar.navbar-pro-v2 .btn-auth.btn-register{
    font-size:.84rem !important;
    padding:8px 11px !important;
    border-radius:999px !important;
    white-space:nowrap !important;
  }
  .main-content{
    padding-top:92px !important;
  }
}

@media (max-width: 420px){
  .navbar.navbar-pro-v2 .nav-brand-text{
    font-size:1.08rem !important;
  }
  .navbar.navbar-pro-v2 .btn-work-cta{
    display:none !important;
  }
  .navbar.navbar-pro-v2 .btn-auth.btn-register{
    font-size:.78rem !important;
    padding:8px 9px !important;
  }
}

/* ===== APUESTAS ORACULO FINAL ===== */
#apuestas .join-strip{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  padding:0 !important;
}
#apuestas .join-strip::before{
  content:none !important;
  display:none !important;
}
#apuestas #gridApuestas,
#apuestas #gridApuestas.data-grid{
  background:transparent !important;
  gap:18px !important;
  grid-template-columns:repeat(auto-fit, minmax(286px, 1fr)) !important;
  align-items:start !important;
}
#apuestas #gridApuestas .bet-oracle-wrap{
  perspective:1200px !important;
}
#apuestas #gridApuestas .bet-oracle-card{
  position:relative !important;
  width:100% !important;
  min-height:336px !important;
  padding:0 !important;
  border-radius:20px !important;
  border:1px solid rgba(255, 51, 51, 0.22) !important;
  background:linear-gradient(160deg, #101010, #050505) !important;
  box-shadow:
    0 15px 35px rgba(0,0,0,0.8),
    inset 0 0 20px rgba(255, 215, 0, 0.05) !important;
  transform-style:preserve-3d !important;
  transform:rotateX(0deg) rotateY(0deg);
  transition:transform 0.1s ease, box-shadow 0.4s ease, border-color 0.4s ease !important;
  cursor:pointer !important;
  overflow:hidden !important;
}
#apuestas #gridApuestas .bet-oracle-wrap:hover .bet-oracle-card{
  border-color:rgba(255, 215, 0, 0.5) !important;
  box-shadow:
    0 0 30px rgba(255, 51, 51, 0.15),
    inset 0 0 30px rgba(255, 215, 0, 0.1) !important;
}
#apuestas #gridApuestas .bet-oracle-card .oracle-particles{
  position:absolute !important;
  inset:0 !important;
  transform:translateZ(20px) !important;
  pointer-events:none !important;
}
#apuestas #gridApuestas .bet-oracle-card .oracle-particle{
  position:absolute !important;
  border-radius:50% !important;
  background:#ffd700 !important;
  box-shadow:0 0 8px #ff3333 !important;
  animation:oracleParticleFloat 3s infinite ease-in-out alternate !important;
  opacity:.65 !important;
}
#apuestas #gridApuestas .bet-oracle-card .oracle-particle.p1{
  width:4px !important;
  height:4px !important;
  top:15% !important;
  left:15% !important;
  animation-delay:0s !important;
}
#apuestas #gridApuestas .bet-oracle-card .oracle-particle.p2{
  width:3px !important;
  height:3px !important;
  top:75% !important;
  left:85% !important;
  animation-delay:1s !important;
}
#apuestas #gridApuestas .bet-oracle-card .oracle-particle.p3{
  width:5px !important;
  height:5px !important;
  top:50% !important;
  left:10% !important;
  animation-delay:2s !important;
}
@keyframes oracleParticleFloat{
  0%{ transform:translateY(0px) scale(1); opacity:0.3; }
  100%{ transform:translateY(-20px) scale(1.5); opacity:0.8; }
}
#apuestas #gridApuestas .bet-oracle-card .oracle-content{
  position:relative !important;
  z-index:1 !important;
  height:100% !important;
  padding:20px !important;
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  gap:10px !important;
  text-align:center !important;
  transform-style:preserve-3d !important;
}
#apuestas #gridApuestas .bet-oracle-card .badge{
  align-self:flex-start !important;
  margin:0 0 8px !important;
  padding:7px 15px !important;
  border-radius:999px !important;
  font-size:.78rem !important;
  letter-spacing:.16em !important;
  font-weight:900 !important;
  color:#111 !important;
  background:linear-gradient(135deg,#ffe06a,#ff9800) !important;
  text-transform:uppercase !important;
}
#apuestas #gridApuestas .bet-oracle-card .oracle-publisher{
  transform:translateZ(40px) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  color:#b6b6b6 !important;
  font-size:.9rem !important;
  border-bottom:1px solid rgba(255,51,51,.65) !important;
  padding-bottom:11px !important;
  margin-bottom:12px !important;
}
#apuestas #gridApuestas .bet-oracle-card .oracle-pub-svg{
  width:18px !important;
  height:18px !important;
  stroke:#ffd700 !important;
  fill:none !important;
  stroke-width:2 !important;
}
#apuestas #gridApuestas .bet-oracle-card .oracle-mid{
  transform:translateZ(60px) !important;
  flex-grow:0 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
}
#apuestas #gridApuestas .bet-oracle-card .oracle-desc{
  color:#ffffff !important;
  font-size:1.45rem !important;
  margin-bottom:14px !important;
  line-height:1.3 !important;
  text-shadow:0 2px 4px #000 !important;
  font-weight:700 !important;
}
#apuestas #gridApuestas .bet-oracle-card .oracle-odds{
  color:#ff3333 !important;
  font-size:3.6rem !important;
  font-weight:900 !important;
  line-height:1 !important;
  text-shadow:0 0 20px rgba(255,51,51,0.5), 2px 2px 0 #ffd700 !important;
  transition:.3s ease !important;
}
#apuestas #gridApuestas .bet-oracle-wrap:hover .bet-oracle-card .oracle-odds{
  color:#ffd700 !important;
  text-shadow:0 0 30px rgba(255,215,0,.6), 2px 2px 0 #ff3333 !important;
}
#apuestas #gridApuestas .bet-oracle-card .oracle-code{
  transform:translateZ(50px) !important;
  background:rgba(0,0,0,.5) !important;
  border:1px dashed #ffd700 !important;
  color:#fff !important;
  padding:10px !important;
  border-radius:8px !important;
  font-family:monospace !important;
  font-size:.92rem !important;
  letter-spacing:1.5px !important;
  text-transform:uppercase !important;
}
#apuestas #gridApuestas .bet-oracle-wrap:hover .bet-oracle-card .oracle-code{
  border-color:#ff3333 !important;
  box-shadow:0 0 10px rgba(255,51,51,.2) !important;
}
#apuestas #gridApuestas .bet-oracle-card .oracle-date{
  transform:translateZ(42px) !important;
  margin-top:8px !important;
  color:#9c9c9c !important;
  font-size:.82rem !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
}
#apuestas #gridApuestas .bet-oracle-card .bet-card-foot{
  transform:translateZ(45px) !important;
  margin-top:4px !important;
}
#apuestas #gridApuestas .bet-oracle-card .pro-actions{
  justify-content:center !important;
}
#apuestas #gridApuestas .bet-oracle-card .btn-mini{
  min-width:118px !important;
  padding:8px 11px !important;
  border-radius:12px !important;
  border:1px solid rgba(255,184,64,.75) !important;
  background:linear-gradient(135deg, rgba(255,121,22,.3), rgba(255,60,60,.18)) !important;
  color:#ffeecf !important;
  font-weight:900 !important;
  font-size:.78rem !important;
  letter-spacing:.06em !important;
}
#apuestas #gridApuestas .bet-oracle-card .btn-mini:hover{
  border-color:rgba(255,224,140,.95) !important;
  background:linear-gradient(135deg, rgba(255,148,41,.38), rgba(255,75,75,.28)) !important;
  box-shadow:0 0 16px rgba(255,90,45,.32) !important;
}
@media (max-width: 920px){
  #apuestas #gridApuestas,
  #apuestas #gridApuestas.data-grid{
    grid-template-columns:repeat(auto-fit, minmax(258px, 1fr)) !important;
    gap:16px !important;
  }
  #apuestas #gridApuestas .bet-oracle-card{
    min-height:304px !important;
  }
  #apuestas #gridApuestas .bet-oracle-card .oracle-content{
    padding:16px !important;
  }
  #apuestas #gridApuestas .bet-oracle-card .oracle-desc{
    font-size:1.22rem !important;
  }
  #apuestas #gridApuestas .bet-oracle-card .oracle-odds{
    font-size:2.85rem !important;
  }
}

/* ===== AGENCIAS ORACULO REFINED ===== */
#agencias #gridAgencias{
  gap:20px !important;
  align-items:start !important;
}
#agencias #gridAgencias .agencia-oracle-wrap{
  perspective:1200px !important;
}
#agencias #gridAgencias .agencia-oracle-card{
  position:relative !important;
  width:100% !important;
  min-height:520px !important;
  padding:0 !important;
  border-radius:22px !important;
  border:1px solid rgba(255, 51, 51, 0.22) !important;
  background:
    radial-gradient(circle at 82% 8%, rgba(255,116,0,.16), transparent 34%),
    linear-gradient(160deg, #0d0d0d, #040404 70%) !important;
  box-shadow:
    0 16px 38px rgba(0,0,0,.78),
    inset 0 0 24px rgba(255, 215, 0, 0.04) !important;
  transform-style:preserve-3d !important;
  transform:rotateX(0deg) rotateY(0deg);
  transition:transform .1s ease, box-shadow .4s ease, border-color .4s ease !important;
  cursor:pointer !important;
  overflow:hidden !important;
}
#agencias #gridAgencias .agencia-oracle-wrap:hover .agencia-oracle-card{
  border-color:rgba(255, 215, 0, .52) !important;
  box-shadow:
    0 0 34px rgba(255, 61, 20, .18),
    inset 0 0 28px rgba(255, 215, 0, .09) !important;
}
#agencias #gridAgencias .agencia-oracle-card .oracle-particles{
  position:absolute !important;
  inset:0 !important;
  transform:translateZ(20px) !important;
  pointer-events:none !important;
}
#agencias #gridAgencias .agencia-oracle-card .oracle-particle{
  position:absolute !important;
  border-radius:50% !important;
  background:#ffd700 !important;
  box-shadow:0 0 8px #ff3333 !important;
  animation:oracleParticleFloat 3s infinite ease-in-out alternate !important;
  opacity:.65 !important;
}
#agencias #gridAgencias .agencia-oracle-card .oracle-particle.p1{
  width:4px !important;
  height:4px !important;
  top:15% !important;
  left:15% !important;
  animation-delay:0s !important;
}
#agencias #gridAgencias .agencia-oracle-card .oracle-particle.p2{
  width:3px !important;
  height:3px !important;
  top:75% !important;
  left:85% !important;
  animation-delay:1s !important;
}
#agencias #gridAgencias .agencia-oracle-card .oracle-particle.p3{
  width:5px !important;
  height:5px !important;
  top:50% !important;
  left:10% !important;
  animation-delay:2s !important;
}
#agencias #gridAgencias .agencia-oracle-card .oracle-content{
  position:relative !important;
  z-index:1 !important;
  height:100% !important;
  padding:20px 20px 18px !important;
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  gap:12px !important;
  text-align:center !important;
  transform-style:preserve-3d !important;
}
#agencias #gridAgencias .agencia-oracle-card .agencia-topline{
  transform:translateZ(38px) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
}
#agencias #gridAgencias .agencia-oracle-card .badge{
  align-self:auto !important;
  margin:0 !important;
  padding:8px 16px !important;
  border-radius:999px !important;
  font-size:.76rem !important;
  letter-spacing:.17em !important;
  font-weight:900 !important;
  color:#111 !important;
  background:linear-gradient(135deg,#ffe06a,#ff9800) !important;
  text-transform:uppercase !important;
}
#agencias #gridAgencias .agencia-oracle-card .agencia-canton-chip{
  display:inline-flex !important;
  align-items:center !important;
  gap:7px !important;
  padding:7px 12px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,199,91,.35) !important;
  color:#d7d7d7 !important;
  font-size:.86rem !important;
  letter-spacing:.04em !important;
  background:rgba(255,145,30,.08) !important;
  text-transform:uppercase !important;
}
#agencias #gridAgencias .agencia-oracle-card .agencia-canton-chip i{
  color:#ffd700 !important;
}
#agencias #gridAgencias .agencia-oracle-card .oracle-publisher{
  transform:translateZ(42px) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  color:#b8b8b8 !important;
  font-size:.95rem !important;
  border-bottom:1px solid rgba(255,51,51,.68) !important;
  padding-bottom:12px !important;
  margin-bottom:2px !important;
}
#agencias #gridAgencias .agencia-oracle-card .oracle-pub-svg{
  width:18px !important;
  height:18px !important;
  stroke:#ffd700 !important;
  fill:none !important;
  stroke-width:2 !important;
}
#agencias #gridAgencias .agencia-oracle-card .oracle-mid{
  transform:translateZ(58px) !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  gap:5px !important;
}
#agencias #gridAgencias .agencia-oracle-card .oracle-desc{
  color:#f4f4f4 !important;
  font-size:2rem !important;
  line-height:1.15 !important;
  text-shadow:0 2px 4px #000 !important;
  font-weight:800 !important;
  letter-spacing:.02em !important;
  text-transform:uppercase !important;
}
#agencias #gridAgencias .agencia-oracle-card .oracle-odds{
  color:#ff3333 !important;
  font-size:3.65rem !important;
  font-weight:900 !important;
  line-height:1 !important;
  text-shadow:0 0 22px rgba(255,51,51,.5), 2px 2px 0 #ffd700 !important;
  transition:.3s ease !important;
}
#agencias #gridAgencias .agencia-oracle-wrap:hover .agencia-oracle-card .oracle-odds{
  color:#ffd700 !important;
  text-shadow:0 0 30px rgba(255,215,0,.58), 2px 2px 0 #ff3333 !important;
}
#agencias #gridAgencias .agencia-oracle-card .oracle-odds-sub{
  margin-top:2px !important;
  color:#c9c9c9 !important;
  font-size:.98rem !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
}
#agencias #gridAgencias .agencia-oracle-card .oracle-code{
  transform:translateZ(52px) !important;
  background:rgba(0,0,0,.54) !important;
  border:1px dashed rgba(255,215,0,.92) !important;
  color:#fff !important;
  padding:12px 10px !important;
  border-radius:10px !important;
  font-family:monospace !important;
  font-size:1.05rem !important;
  letter-spacing:2px !important;
  text-transform:uppercase !important;
}
#agencias #gridAgencias .agencia-oracle-wrap:hover .agencia-oracle-card .oracle-code{
  border-color:#ff4f35 !important;
  box-shadow:0 0 12px rgba(255,79,53,.24) !important;
}
#agencias #gridAgencias .agencia-oracle-card .oracle-date{
  transform:translateZ(44px) !important;
  margin-top:0 !important;
  color:#9f9f9f !important;
  font-size:.98rem !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  word-break:break-all !important;
}
#agencias #gridAgencias .agencia-oracle-card .oracle-map-frame{
  margin-top:auto !important;
  height:158px !important;
  border-radius:14px !important;
}
#agencias #gridAgencias .agencia-oracle-card .bet-card-foot{
  transform:translateZ(46px) !important;
  margin-top:10px !important;
}
#agencias #gridAgencias .agencia-oracle-card .pro-actions{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  width:100% !important;
  gap:10px !important;
}
#agencias #gridAgencias .agencia-oracle-card .btn-mini{
  min-width:0 !important;
  width:100% !important;
  padding:11px 12px !important;
  border-radius:13px !important;
  font-weight:900 !important;
  font-size:.86rem !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  transition:transform .2s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease !important;
}
#agencias #gridAgencias .agencia-oracle-card .btn-mini i{
  font-size:.93rem !important;
}
#agencias #gridAgencias .agencia-oracle-card .btn-agencia-main{
  border:1px solid rgba(255,193,76,.82) !important;
  background:linear-gradient(140deg, rgba(255,128,24,.42), rgba(255,58,58,.28)) !important;
  color:#fff2d8 !important;
  box-shadow:0 8px 18px rgba(255,69,36,.18) !important;
}
#agencias #gridAgencias .agencia-oracle-card .btn-agencia-main:hover{
  transform:translateY(-2px) !important;
  border-color:rgba(255,232,158,.98) !important;
  background:linear-gradient(140deg, rgba(255,161,46,.56), rgba(255,77,46,.4)) !important;
  box-shadow:0 12px 22px rgba(255,81,38,.3) !important;
}
#agencias #gridAgencias .agencia-oracle-card .btn-agencia-ghost{
  border:1px solid rgba(255,212,97,.72) !important;
  background:linear-gradient(140deg, rgba(255,203,92,.14), rgba(255,115,32,.08)) !important;
  color:#ffebbe !important;
}
#agencias #gridAgencias .agencia-oracle-card .btn-agencia-ghost:hover{
  transform:translateY(-2px) !important;
  border-color:rgba(255,234,166,.95) !important;
  background:linear-gradient(140deg, rgba(255,221,120,.24), rgba(255,132,44,.16)) !important;
  box-shadow:0 10px 18px rgba(255,188,54,.17) !important;
}
#agencias #gridAgencias .agencia-oracle-card .btn-mini.disabled,
#agencias #gridAgencias .agencia-oracle-card .btn-mini:disabled{
  opacity:.45 !important;
  cursor:not-allowed !important;
  box-shadow:none !important;
  transform:none !important;
}
@media (max-width: 920px){
  #agencias #gridAgencias .agencia-oracle-card{
    min-height:470px !important;
  }
  #agencias #gridAgencias .agencia-oracle-card .oracle-content{
    padding:16px !important;
    gap:10px !important;
  }
  #agencias #gridAgencias .agencia-oracle-card .agencia-topline{
    flex-wrap:wrap !important;
    justify-content:center !important;
  }
  #agencias #gridAgencias .agencia-oracle-card .oracle-desc{
    font-size:1.62rem !important;
  }
  #agencias #gridAgencias .agencia-oracle-card .oracle-odds{
    font-size:3.02rem !important;
  }
  #agencias #gridAgencias .agencia-oracle-card .oracle-odds-sub{
    font-size:.88rem !important;
  }
  #agencias #gridAgencias .agencia-oracle-card .oracle-code{
    font-size:.96rem !important;
  }
  #agencias #gridAgencias .agencia-oracle-card .oracle-date{
    font-size:.9rem !important;
  }
  #agencias #gridAgencias .agencia-oracle-card .oracle-map-frame{
    height:138px !important;
  }
  #agencias #gridAgencias .agencia-oracle-card .btn-mini{
    padding:10px 9px !important;
    font-size:.8rem !important;
  }
}
@media (max-width: 560px){
  #agencias #gridAgencias .agencia-oracle-card .pro-actions{
    grid-template-columns:1fr !important;
  }
}

/* ===== MODAL AGENCIA AGENTES: CARD V2 (SIN INICIALES) ===== */
#mAgenciaAgentes .sheet{
  width:min(920px, 96vw) !important;
  border-color:rgba(255,180,68,.68) !important;
  box-shadow:0 28px 80px rgba(0,0,0,.62), 0 0 30px rgba(255,130,38,.2) !important;
}
#mAgenciaAgentes .sheetbody{
  padding:12px 12px 14px !important;
  max-height:min(80vh, 860px) !important;
  overflow:auto !important;
}
#mAgenciaAgentes .sheetbody::-webkit-scrollbar{
  width:8px !important;
}
#mAgenciaAgentes .sheetbody::-webkit-scrollbar-thumb{
  border-radius:999px !important;
  background:linear-gradient(180deg, rgba(255,200,69,.72), rgba(255,74,43,.72)) !important;
}
#mAgAgSub{
  margin-bottom:8px !important;
  color:#ffd899 !important;
  letter-spacing:.04em !important;
}
#mAgAgPubli{
  margin-bottom:10px !important;
}
.agency-promo-head{
  margin:0 0 7px !important;
  font-size:.76rem !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  color:#ffc668 !important;
  font-weight:900 !important;
}
.agency-promo-rail{
  display:grid !important;
  grid-auto-flow:column !important;
  grid-auto-columns:minmax(220px, 1fr) !important;
  gap:8px !important;
  overflow-x:auto !important;
  padding:1px 1px 4px !important;
}
.agency-promo-rail::-webkit-scrollbar{
  height:7px !important;
}
.agency-promo-rail::-webkit-scrollbar-thumb{
  border-radius:999px !important;
  background:rgba(255,182,62,.54) !important;
}
.agency-promo-card{
  border-radius:11px !important;
  border:1px solid rgba(255,186,66,.55) !important;
  padding:4px !important;
  background:linear-gradient(145deg, rgba(24,14,8,.95), rgba(7,7,7,.98)) !important;
}
.agency-promo-img{
  width:100% !important;
  height:108px !important;
  object-fit:cover !important;
  border-radius:8px !important;
  display:block !important;
}
.agency-promo-loading,
.agency-mini-loading,
.agency-mini-empty{
  padding:11px 12px !important;
  border-radius:12px !important;
  border:1px dashed rgba(255,183,68,.44) !important;
  background:rgba(10,10,10,.86) !important;
  color:#ffd495 !important;
  font-size:.9rem !important;
  text-align:center !important;
}

#mAgenciaAgentes .grid-mini{
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(255px, 1fr)) !important;
  gap:12px !important;
  perspective:1200px !important;
}
#mAgenciaAgentes .agent-mini-card{
  position:relative !important;
  padding:14px 12px 12px !important;
  border-radius:15px !important;
  border:1px solid rgba(255,119,58,.64) !important;
  background:linear-gradient(160deg, #090909, #040404) !important;
  box-shadow:inset 0 0 20px rgba(0,0,0,1), 0 14px 30px rgba(0,0,0,.52) !important;
  text-align:center !important;
  transform-style:preserve-3d !important;
  transition:transform .14s ease, border-color .3s ease, box-shadow .3s ease !important;
  overflow:hidden !important;
}
#mAgenciaAgentes .agent-mini-card:hover{
  border-color:rgba(226,183,20,.9) !important;
  box-shadow:0 0 36px rgba(226,183,20,.2), inset 0 0 26px rgba(255,42,42,.1) !important;
}
#mAgenciaAgentes .agent-mini-core{
  position:relative !important;
  z-index:2 !important;
  transform:translateZ(22px) !important;
}
#mAgenciaAgentes .agent-mini-avatar-box{
  width:88px !important;
  height:88px !important;
  margin:0 auto 12px !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  background:linear-gradient(135deg, #ff2a2a, #e2b714) !important;
  border:1px solid rgba(255,220,130,.42) !important;
  box-shadow:0 8px 20px rgba(255,58,38,.24) !important;
  transition:transform .35s cubic-bezier(.175,.885,.32,1.275), box-shadow .35s ease !important;
}
#mAgenciaAgentes .agent-mini-avatar-box i{
  font-size:2rem !important;
  color:#fff !important;
}
#mAgenciaAgentes .agent-mini-card:hover .agent-mini-avatar-box{
  transform:scale(1.12) rotate(4deg) !important;
  box-shadow:0 0 24px rgba(255,42,42,.54) !important;
}
#mAgenciaAgentes .agent-mini-rate-pill{
  position:absolute !important;
  top:0 !important;
  right:0 !important;
  border-radius:999px !important;
  padding:4px 10px !important;
  border:1px solid rgba(255,205,107,.62) !important;
  color:#fff0bf !important;
  font-size:.78rem !important;
  font-weight:900 !important;
  background:linear-gradient(145deg, rgba(255,107,34,.56), rgba(226,183,20,.32)) !important;
}
#mAgenciaAgentes .agent-mini-name{
  margin:0 !important;
  font-size:1.22rem !important;
  color:#ffea00 !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
  letter-spacing:.02em !important;
  text-shadow:0 0 6px rgba(255,234,0,.45) !important;
}
#mAgenciaAgentes .agent-mini-email{
  margin:6px 0 12px !important;
  color:#a1a1a1 !important;
  font-size:.9rem !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
}
#mAgenciaAgentes .agent-mini-email i{
  color:#ffca50 !important;
}
#mAgenciaAgentes .agent-mini-stars{
  margin-bottom:2px !important;
}
#mAgenciaAgentes .agent-mini-stars .stars-icons{
  justify-content:center !important;
  margin:0 !important;
  gap:4px !important;
}
#mAgenciaAgentes .agent-mini-stars .stars-icons i{
  font-size:1.04rem !important;
}
#mAgenciaAgentes .agent-mini-interactive{
  max-height:0 !important;
  opacity:0 !important;
  overflow:hidden !important;
  transition:max-height .55s ease, opacity .45s ease, padding-top .45s ease !important;
}
#mAgenciaAgentes .agent-mini-card:hover .agent-mini-interactive{
  max-height:280px !important;
  opacity:1 !important;
  padding-top:8px !important;
}
#mAgenciaAgentes .agent-mini-socials{
  display:flex !important;
  justify-content:center !important;
  gap:14px !important;
  margin-bottom:12px !important;
}
#mAgenciaAgentes .agent-mini-social{
  width:42px !important;
  min-width:42px !important;
  height:42px !important;
  border-radius:50% !important;
  border:1px solid rgba(226,183,20,.56) !important;
  background:rgba(0,0,0,.44) !important;
  color:#e2b714 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  font-size:1.1rem !important;
  transition:transform .25s ease, color .25s ease, box-shadow .25s ease !important;
}
#mAgenciaAgentes .agent-mini-social:hover{
  color:#ffea00 !important;
  transform:scale(1.2) !important;
  box-shadow:0 0 14px rgba(255,234,0,.45) !important;
}
#mAgenciaAgentes .agent-mini-social.disabled,
#mAgenciaAgentes .agent-mini-social.disabled:hover{
  opacity:.36 !important;
  transform:none !important;
  box-shadow:none !important;
  pointer-events:none !important;
}
#mAgenciaAgentes .agent-mini-actions{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:9px !important;
}
#mAgenciaAgentes .agent-mini-actions .btn-mini{
  width:100% !important;
  justify-content:center !important;
  padding:12px !important;
  border-radius:999px !important;
  font-size:.86rem !important;
  font-weight:900 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  border:1px solid rgba(255,255,255,.2) !important;
  background:#fff !important;
  color:#101010 !important;
  box-shadow:none !important;
}
#mAgenciaAgentes .agent-mini-btn-wsp:hover{
  background:#25D366 !important;
  color:#fff !important;
  border-color:#25D366 !important;
  box-shadow:0 0 20px rgba(37,211,102,.45), 0 0 36px rgba(37,211,102,.26) !important;
}
#mAgenciaAgentes .agent-mini-btn-rate:hover{
  background:#ff2a2a !important;
  color:#fff !important;
  border-color:#ff2a2a !important;
  box-shadow:0 0 20px rgba(255,42,42,.45), 0 0 36px rgba(255,42,42,.24) !important;
}
#mAgenciaAgentes .agent-mini-actions .btn-mini.disabled,
#mAgenciaAgentes .agent-mini-actions .btn-mini:disabled{
  opacity:.45 !important;
  cursor:not-allowed !important;
  transform:none !important;
  box-shadow:none !important;
}
#mAgenciaAgentes .agent-mini-spark{
  position:absolute !important;
  border-radius:50% !important;
  pointer-events:none !important;
  background:#ffea00 !important;
  box-shadow:0 0 10px #e2b714, 0 0 18px #ff2a2a !important;
  animation:agentSparkShoot 1s ease-out forwards !important;
  z-index:3 !important;
}
@keyframes agentSparkShoot{
  0%{ transform:translate(0,0) scale(1); opacity:1; }
  100%{ transform:translate(var(--tx), var(--ty)) scale(0); opacity:0; }
}

@media (hover:none), (pointer:coarse){
  #mAgenciaAgentes .agent-mini-interactive{
    max-height:280px !important;
    opacity:1 !important;
    padding-top:8px !important;
  }
}
@media (max-width: 760px){
  #mAgenciaAgentes .sheet{
    width:min(640px, 96vw) !important;
  }
  .agency-promo-rail{
    grid-auto-columns:minmax(180px, 1fr) !important;
  }
  .agency-promo-img{
    height:94px !important;
  }
  #mAgenciaAgentes .grid-mini{
    grid-template-columns:1fr !important;
  }
}
@media (max-width: 520px){
  #mAgenciaAgentes .sheetbody{
    padding:10px !important;
  }
  #mAgenciaAgentes .agent-mini-avatar-box{
    width:76px !important;
    height:76px !important;
  }
  #mAgenciaAgentes .agent-mini-name{
    font-size:1.08rem !important;
  }
}
@media (prefers-reduced-motion: reduce){
  #mAgenciaAgentes .agent-mini-card,
  #mAgenciaAgentes .agent-mini-card:hover{
    transform:none !important;
    transition:none !important;
  }
  #mAgenciaAgentes .agent-mini-spark{
    display:none !important;
  }
}

/* ==========================================================
   INICIO - REDISENO CARDS "UNETE"
   ========================================================== */
#inicio .join-strip{
  position:relative !important;
  margin-top:32px !important;
  border-radius:26px !important;
  padding:34px 36px !important;
  border:1px solid rgba(255, 214, 99, .32) !important;
  background:
    radial-gradient(circle at 84% 16%, rgba(255,170,32,.12), transparent 34%),
    linear-gradient(158deg, rgba(7,7,7,.95), rgba(10,10,10,.88) 56%, rgba(6,6,6,.96)) !important;
  box-shadow:
    0 24px 60px rgba(0,0,0,.48),
    inset 0 0 0 1px rgba(255,228,140,.04),
    inset 0 22px 45px rgba(255,174,43,.05) !important;
  transform-style:preserve-3d !important;
  overflow:hidden !important;
  isolation:isolate !important;
  transition:transform .38s cubic-bezier(.22,.61,.36,1), box-shadow .38s ease, border-color .32s ease !important;
  animation:joinCardReveal .72s cubic-bezier(.2,.85,.3,1) both !important;
}
#inicio .join-strip::before{
  content:'' !important;
  position:absolute !important;
  inset:-1px !important;
  border-radius:inherit !important;
  padding:1px !important;
  background:linear-gradient(120deg, rgba(255, 214, 99, .22), rgba(255, 88, 26, .18), rgba(255, 214, 99, .2)) !important;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite:xor !important;
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  mask-composite:exclude !important;
  pointer-events:none !important;
  opacity:.9 !important;
  z-index:1 !important;
}
#inicio .join-strip::after{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  background:
    radial-gradient(circle at 10% 20%, rgba(255,223,79,.16), transparent 36%),
    radial-gradient(circle at 87% 84%, rgba(255,100,24,.12), transparent 34%),
    linear-gradient(112deg, transparent 18%, rgba(255,202,76,.09) 48%, transparent 74%) !important;
  background-size:auto, auto, 170% 100% !important;
  animation:joinSheen 8s linear infinite !important;
  pointer-events:none !important;
  z-index:0 !important;
}
#inicio .join-strip > *{
  position:relative !important;
  z-index:2 !important;
}
#inicio .join-strip-inner{
  display:grid !important;
  gap:14px !important;
}
#inicio .join-strip-inner::before{
  content:attr(data-kicker) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-self:start !important;
  min-height:30px !important;
  padding:0 12px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,214,99,.52) !important;
  background:linear-gradient(135deg, rgba(255,196,65,.2), rgba(255,115,24,.12)) !important;
  color:#ffe9a8 !important;
  font-size:.78rem !important;
  letter-spacing:.13em !important;
  font-weight:800 !important;
  text-transform:uppercase !important;
  box-shadow:0 8px 18px rgba(255,169,46,.16) !important;
}
#inicio .join-strip h2{
  margin:0 !important;
  max-width:18ch !important;
  font-size:clamp(1.78rem, 3.1vw, 3rem) !important;
  line-height:1.04 !important;
  letter-spacing:.07em !important;
  text-transform:uppercase !important;
  color:#ffe100 !important;
  text-shadow:0 0 18px rgba(255,225,0,.24), 0 2px 0 rgba(0,0,0,.45) !important;
}
#inicio .join-strip p{
  margin:0 !important;
  max-width:92ch !important;
  color:#e7e7e7 !important;
  font-size:clamp(1rem, 1.18vw, 1.2rem) !important;
  line-height:1.74 !important;
  text-wrap:pretty !important;
  text-shadow:0 2px 8px rgba(0,0,0,.28) !important;
}
#inicio .join-strip p b{
  color:#fff3bf !important;
}
#inicio .join-strip .join-actions{
  margin-top:8px !important;
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
}
#inicio .join-strip .btn-auth.btn-register,
#inicio .join-strip .ghost-btn{
  position:relative !important;
  min-height:45px !important;
  padding:0 18px !important;
  border-radius:12px !important;
  border:1px solid rgba(255,214,99,.66) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-family:'Rajdhani', sans-serif !important;
  font-size:.92rem !important;
  font-weight:800 !important;
  letter-spacing:.1em !important;
  text-transform:uppercase !important;
  overflow:hidden !important;
  transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease, background .24s ease, color .24s ease !important;
}
#inicio .join-strip .btn-auth.btn-register::before,
#inicio .join-strip .ghost-btn::before{
  content:'' !important;
  position:absolute !important;
  left:-120% !important;
  top:0 !important;
  width:45% !important;
  height:100% !important;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent) !important;
  transform:skewX(-22deg) !important;
  transition:left .45s ease !important;
}
#inicio .join-strip .btn-auth.btn-register{
  color:#101010 !important;
  background:linear-gradient(135deg, #ffe95b, #ffd100) !important;
  box-shadow:0 10px 22px rgba(255,220,0,.24) !important;
}
#inicio .join-strip .btn-auth.btn-register:hover{
  transform:translateY(-2px) scale(1.01) !important;
  background:linear-gradient(135deg, #fff086, #ffd100) !important;
  box-shadow:0 14px 28px rgba(255,220,0,.36) !important;
}
#inicio .join-strip .btn-auth.btn-register:hover::before{
  left:160% !important;
}
#inicio .join-strip .ghost-btn{
  color:#ffefc4 !important;
  background:linear-gradient(135deg, rgba(255,145,29,.18), rgba(255,53,53,.12)) !important;
  box-shadow:0 8px 18px rgba(255,90,34,.14) !important;
}
#inicio .join-strip .ghost-btn:hover{
  transform:translateY(-2px) scale(1.01) !important;
  color:#fff4ce !important;
  border-color:rgba(255,234,157,.95) !important;
  background:linear-gradient(135deg, rgba(255,170,52,.33), rgba(255,72,52,.23)) !important;
  box-shadow:0 12px 24px rgba(255,99,40,.28) !important;
}
#inicio .join-strip .ghost-btn:hover::before{
  left:160% !important;
}

#inicio .join-strip.join-strip-secondary{
  animation-delay:.14s !important;
}
#inicio .join-strip:hover{
  border-color:rgba(255, 225, 128, .56) !important;
  transform:translateY(-5px) rotateX(.9deg) !important;
  box-shadow:
    0 30px 64px rgba(0,0,0,.52),
    0 0 26px rgba(255,178,44,.16),
    inset 0 0 0 1px rgba(255,228,150,.08),
    inset 0 30px 50px rgba(255,172,40,.08) !important;
}
@keyframes joinCardReveal{
  from{
    opacity:0;
    transform:translateY(18px) scale(.985);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}
@keyframes joinSheen{
  0%{ background-position:center, center, 0% 0%; }
  100%{ background-position:center, center, 180% 0%; }
}

@media (max-width: 1220px){
}
@media (max-width: 980px){
  #inicio .join-strip{
    padding:26px 20px !important;
    border-radius:22px !important;
  }
  #inicio .join-strip h2{
    font-size:clamp(1.46rem, 5.1vw, 2.1rem) !important;
    line-height:1.08 !important;
    letter-spacing:.04em !important;
  }
  #inicio .join-strip p{
    font-size:.95rem !important;
    line-height:1.66 !important;
  }
  #inicio .join-strip-inner::before{
    min-height:27px !important;
    font-size:.68rem !important;
    letter-spacing:.1em !important;
    padding:0 10px !important;
  }
  #inicio .join-strip .btn-auth.btn-register,
  #inicio .join-strip .ghost-btn{
    min-height:40px !important;
    font-size:.8rem !important;
    padding:0 12px !important;
    border-radius:10px !important;
  }
}
@media (max-width: 680px){
  #inicio .join-strip{
    margin-top:22px !important;
    padding:22px 16px !important;
    border-radius:18px !important;
  }
  #inicio .join-strip .join-actions{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:8px !important;
  }
  #inicio .join-strip .btn-auth.btn-register,
  #inicio .join-strip .ghost-btn{
    width:100% !important;
    justify-content:center !important;
  }
}

/* ==========================================================
   BOTON HIBRIDO NEON (exacto al diseno enviado)
   ========================================================== */
.navbar.navbar-pro-v2 .nav-mobile-bottom .nav-right > a.btn-hibrido{
  all: unset !important;
  --amarillo: #FFEA00 !important;
  --negro: #080808 !important;
  --radio: 8px !important;
  position: relative !important;
  background: var(--negro) !important;
  color: var(--amarillo) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  padding: 18px 50px !important;
  border: none !important;
  border-radius: var(--radio) !important;
  cursor: pointer !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  overflow: hidden !important;
  z-index: 1 !important;
  transition: 0.3s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

.navbar.navbar-pro-v2 .nav-mobile-bottom .nav-right > a.btn-hibrido::before{
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  left: -50% !important;
  width: 200% !important;
  height: 200% !important;
  background: conic-gradient(transparent, transparent, transparent, var(--amarillo)) !important;
  animation: girar-escaner 2s linear infinite !important;
  z-index: -2 !important;
}

.navbar.navbar-pro-v2 .nav-mobile-bottom .nav-right > a.btn-hibrido::after{
  content: '' !important;
  position: absolute !important;
  inset: 2px !important;
  background: var(--negro) !important;
  border-radius: calc(var(--radio) - 2px) !important;
  z-index: -1 !important;
  transition: 0.3s ease !important;
}

.navbar.navbar-pro-v2 .nav-mobile-bottom .nav-right > a.btn-hibrido .barrido{
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 50% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 234, 0, 0.6), transparent) !important;
  transform: skewX(-25deg) !important;
  animation: barrido-luz 3s infinite !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.navbar.navbar-pro-v2 .nav-mobile-bottom .nav-right > a.btn-hibrido .texto{
  position: relative !important;
  z-index: 2 !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

.navbar.navbar-pro-v2 .nav-mobile-bottom .nav-right > a.btn-hibrido:hover{
  color: var(--negro) !important;
  box-shadow: 0 0 15px var(--amarillo), 0 0 40px var(--amarillo) !important;
  transform: translateY(-3px) !important;
}

.navbar.navbar-pro-v2 .nav-mobile-bottom .nav-right > a.btn-hibrido:hover::after{
  background: var(--amarillo) !important;
}

.navbar.navbar-pro-v2 .nav-mobile-bottom .nav-right > a.btn-hibrido:hover .barrido{
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent) !important;
  animation: barrido-luz 2.5s infinite !important;
}

@keyframes girar-escaner{
  100% { transform: rotate(360deg); }
}

@keyframes barrido-luz{
  0% { left: -100%; }
  20% { left: 200%; }
  100% { left: 200%; }
}

/* ==========================================================
   CARRUSEL AUTOMÁTICO DE IMÁGENES (INICIO)
   ========================================================== */
#inicio .home-carousel-container{
  width:92%;
  max-width:1080px;
  margin:28px auto 0;
  overflow:hidden;
  border-radius:14px;
  border:none;
  box-shadow:0 12px 36px rgba(0,0,0,.6), 0 0 1px rgba(255,214,0,.1);
  position:relative;
  background:#0f0f0f;
}
#inicio .home-carousel-track{
  display:flex;
  width:100%;
  transition:transform .8s ease-in-out;
}
#inicio .home-carousel-track img{
  width:100%;
  flex-shrink:0;
  object-fit:contain;
  object-position:center;
  aspect-ratio:16/9;
  display:block;
  background:linear-gradient(135deg, rgba(20,20,20,.95) 0%, rgba(10,10,10,.95) 100%);
  min-height:340px;
}

/* ==========================================================
   BOTON FLOTANTE "TRABAJA CON NOSOTROS"
   ========================================================== */
@keyframes workNeonFloat{
  0%{ transform:translateY(0); }
  50%{ transform:translateY(-12px); }
  100%{ transform:translateY(0); }
}
.btn-neon-solido-floating{
  position:fixed;
  left:20px;
  bottom:20px;
  z-index:1105;
  background:#000;
  color:#ffd600;
  border:2px solid #ffd600;
  padding:16px 32px;
  border-radius:50px;
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:1.1rem;
  font-weight:800;
  line-height:1;
  animation:workNeonFloat 3.5s ease-in-out infinite;
  box-shadow:
    0 0 15px rgba(255, 214, 0, .72),
    0 0 30px rgba(255, 214, 0, .45),
    inset 0 0 15px rgba(255, 214, 0, .32);
  transition:all .3s ease;
}
.btn-neon-solido-floating:hover{
  box-shadow:
    0 0 25px #ffd600,
    0 0 50px #ffd600,
    0 0 80px #ffd600,
    inset 0 0 20px #ffd600;
  background:#ffd600;
  color:#000;
}
.btn-neon-solido-floating svg{
  width:24px;
  height:24px;
  fill:#ffd600;
  filter:drop-shadow(0 0 5px #ffd600);
  transition:all .3s ease;
}
.btn-neon-solido-floating:hover svg{
  fill:#000;
  filter:none;
}

@media (max-width: 980px){
  #inicio .home-carousel-container{
    width:93%;
    border-radius:12px;
    border:none;
  }
  .btn-neon-solido-floating{
    left:14px;
    bottom:14px;
    padding:14px 20px;
    font-size:.9rem;
    letter-spacing:1.2px;
  }
}
@media (max-width: 640px){
  #inicio .home-carousel-container{
    width:95%;
    border-radius:11px;
    border:none;
  }
  .btn-neon-solido-floating{
    padding:12px 14px;
    font-size:.78rem;
    letter-spacing:.08em;
    border-radius:18px;
    gap:8px;
  }
  .btn-neon-solido-floating svg{
    width:18px;
    height:18px;
  }
}

@media (max-width: 480px){
  #inicio .home-carousel-container{
    width:96%;
    border-radius:10px;
    border:none;
  }
}

@media (max-width: 360px){
  #inicio .home-carousel-container{
    border-radius:8px;
    border:none;
  }
}

/* ==========================================================
   SIDEBAR MOBILE - FLUIDEZ
   ========================================================== */
@media (max-width: 980px){
  .sidebar-overlay{
    backdrop-filter:blur(3px) !important;
    -webkit-backdrop-filter:blur(3px) !important;
    transition:opacity .18s ease, visibility .18s ease !important;
  }
  .sidebar-menu{
    right:0 !important;
    transform:translate3d(105%, 0, 0);
    transition:transform .22s cubic-bezier(.22,.75,.3,1), box-shadow .22s ease !important;
    will-change:transform;
  }
  .sidebar-menu.active{
    transform:translate3d(0, 0, 0) !important;
  }
  .sidebar-menu-item{
    transition:background .16s ease, color .16s ease !important;
  }
  .sidebar-menu-item::before{
    display:none !important;
  }
  .sidebar-menu-item:hover{
    padding-left:20px !important;
    text-shadow:none !important;
    box-shadow:none !important;
    background:rgba(255,215,0,.1) !important;
  }
}

/* ==========================================================
   HERO #INICIO (texto original amarillo + glow)
   ========================================================== */
#inicio .hero h1{
  color:#FFFF00 !important;
  text-shadow:0 0 30px rgba(255,215,0,.8), 0 0 60px rgba(255,215,0,.4) !important;
  animation:glowPulse 2s infinite !important;
}
#inicio .hero p{
  color:#FFD700 !important;
}
#inicio .hero p b,
#inicio .hero p span{
  color:#FFFF00 !important;
  text-shadow:none !important;
}
#inicio .hero-highlights .pill{
  color:#eceff4 !important;
  box-shadow:none !important;
}
#inicio .hero-highlights .pill strong{
  color:#f2d24b !important;
}
#inicio .hero-highlights .pill::before{
  opacity:0 !important;
}
#inicio .hero .microcopy{
  color:#cfd5dd !important;
  text-shadow:none !important;
}
#inicio .hero .microcopy span{
  color:#f2d24b !important;
}
#homeHeroText,
#homeHeroMicrocopy,
#homeJoinText{
  white-space:pre-line;
}

/* ==========================================================
   EDITOR VISUAL (ADMIN) - BLOQUES DE INICIO
   ========================================================== */
.home-editor-backdrop{
  position:fixed;
  inset:0;
  z-index:1590;
  background:rgba(3,7,18,.42);
  opacity:0;
  visibility:hidden;
  transition:opacity .24s ease, visibility .24s ease;
}
.home-editor-panel{
  position:fixed;
  top:0;
  right:0;
  height:100vh;
  width:min(400px, 94vw);
  z-index:1600;
  background:linear-gradient(180deg, rgba(10,10,10,.98), rgba(6,6,6,.98));
  border-left:1px solid rgba(255,214,0,.22);
  box-shadow:-18px 0 42px rgba(0,0,0,.45);
  transform:translateX(104%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
}
.home-editor-panel.open{
  transform:translateX(0);
}
body.home-editor-open .home-editor-backdrop{
  opacity:1;
  visibility:visible;
}
.home-editor-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:76px;
  padding:18px 18px 14px;
  border-bottom:1px solid rgba(255,214,0,.18);
  background:linear-gradient(180deg, rgba(12,12,12,.95), rgba(8,8,8,.88));
}
.home-editor-head h3{
  margin:0;
  color:#facc15;
  font-size:1.06rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.home-editor-head p{
  margin:4px 0 0;
  color:#c7ced8;
  font-size:.87rem;
  line-height:1.25;
}
.home-editor-close{
  appearance:none;
  border:1px solid rgba(255,214,0,.3);
  background:#0f0f0f;
  color:#e5e7eb;
  border-radius:8px;
  width:32px;
  height:32px;
  font-size:18px;
  line-height:1;
  cursor:pointer;
}
.home-editor-close:hover{
  border-color:rgba(255,214,0,.65);
  color:#fff;
  box-shadow:0 0 14px rgba(255,214,0,.22);
}
.home-editor-body{
  padding:16px 14px 18px;
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.home-editor-col h4{
  margin:0 0 10px;
  color:#d6dde6;
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.home-editor-label{
  display:block;
  margin:10px 0 6px;
  color:#c7ced8;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.home-editor-input,
.home-editor-textarea{
  width:100%;
  border:1px solid rgba(255,214,0,.18);
  background:rgba(17,17,17,.92);
  color:#f9fafb;
  border-radius:8px;
  padding:10px 12px;
  font-size:.9rem;
  line-height:1.4;
  outline:none;
  transition:box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.home-editor-textarea{
  resize:vertical;
  min-height:84px;
}
.home-editor-input::placeholder,
.home-editor-textarea::placeholder{
  color:#9ca3af;
}
.home-editor-input:focus,
.home-editor-textarea:focus{
  border-color:rgba(255,214,0,.62);
  box-shadow:0 0 0 3px rgba(250,204,21,.22);
  background:rgba(21,21,21,.96);
}
.home-editor-inline{
  display:flex;
  gap:8px;
  align-items:center;
}
.home-editor-list{
  display:grid;
  gap:8px;
}
.home-editor-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  border:1px solid rgba(255,214,0,.2);
  background:rgba(255,255,255,.02);
  border-radius:8px;
  padding:10px 10px;
  min-height:44px;
  transition:border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.home-editor-row:hover{
  border-color:rgba(255,214,0,.35);
}
.home-editor-row.is-dragging{
  opacity:.48;
}
.home-editor-row.is-drop-target{
  border-color:#facc15;
  box-shadow:0 0 0 2px rgba(250,204,21,.18) inset;
}
.home-editor-name{
  color:#f3f4f6;
  font-size:.9rem;
  font-weight:500;
  flex:1;
  min-width:0;
}
.home-editor-grip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:6px;
  color:#c7ced8;
  cursor:grab;
  flex:0 0 22px;
}
.home-editor-grip:active{
  cursor:grabbing;
}
.home-editor-actions{
  display:flex;
  gap:6px;
}
.home-editor-icon-btn,
.home-editor-add-btn{
  appearance:none;
  border:1px solid transparent;
  background:transparent;
  color:#cbd5e1;
  border-radius:8px;
  cursor:pointer;
  transition:all .16s ease;
}
.home-editor-icon-btn{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  color:#c7ced8;
}
.home-editor-icon-btn:hover{
  border-color:rgba(255,214,0,.4);
  color:#ffe27a;
  background:rgba(255,214,0,.08);
}
.home-editor-icon-btn.danger:hover{
  color:#fecaca;
  border-color:#7f1d1d;
  background:rgba(127,29,29,.22);
}
.home-editor-add-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 10px;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  border-color:rgba(255,214,0,.25);
  color:#e5e7eb;
}
.home-editor-add-btn:hover{
  border-color:#facc15;
  color:#111;
  background:linear-gradient(135deg,#ffff00,#ffd700);
}
.home-editor-actions button:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.home-editor-col{
  border:1px solid rgba(255,214,0,.2);
  border-radius:8px;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
  padding:12px;
}

.home-editor-carousel-row{
  align-items:stretch;
  flex-direction:column;
  gap:10px;
  padding:10px;
}
.home-editor-carousel-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}
.home-editor-carousel-main{
  display:grid;
  grid-template-columns:84px 1fr;
  gap:10px;
  align-items:center;
}
.home-editor-thumb-wrap{
  width:84px;
  height:52px;
  border-radius:8px;
  border:1px solid rgba(255,214,0,.24);
  background:#111;
  overflow:hidden;
}
.home-editor-thumb{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.home-editor-mini{
  width:100%;
  margin-top:0;
  color:#b9c3cf;
  font-size:.73rem;
  line-height:1.3;
  word-break:break-all;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,214,0,.16);
  border-radius:8px;
  padding:8px 10px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  max-height:62px;
  overflow:auto;
}
.home-editor-inline .home-editor-input{
  flex:1;
}
#homeEditorPanel .btn-mini{
  min-height:42px;
  justify-content:center;
}
#homeEditorPanel .btn-mini:hover{
  transform:translateY(-1px);
}

.home-editor-quick-actions{
  display:grid;
  gap:9px;
}
.home-editor-quick-btn{
  appearance:none;
  border:1px solid rgba(255,214,0,.25);
  border-radius:8px;
  background:rgba(12,12,12,.92);
  color:#e5e7eb;
  min-height:42px;
  padding:8px 12px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.83rem;
  font-weight:700;
  letter-spacing:.04em;
  cursor:pointer;
  transition:all .16s ease;
}
.home-editor-quick-btn:hover{
  border-color:#facc15;
  background:rgba(250,204,21,.08);
  box-shadow:0 0 16px rgba(255,214,0,.16);
}
.home-editor-quick-plus{
  width:20px;
  height:20px;
  border-radius:999px;
  background:#facc15;
  color:#111827;
  display:grid;
  place-items:center;
  font-size:.98rem;
  font-weight:900;
  flex:0 0 20px;
}
.home-editor-mini-note{
  margin-top:10px;
  color:#b9c3cf;
  font-size:.73rem;
  line-height:1.38;
}

.home-editor-foot{
  margin-top:auto;
  border-top:1px solid rgba(255,214,0,.18);
  padding:12px 14px;
  display:flex;
  align-items:center;
  gap:10px;
  background:linear-gradient(180deg, rgba(8,8,8,.85), rgba(8,8,8,.98));
}
.home-editor-spacer{
  flex:1;
}
.home-editor-reset-link{
  font-size:.74rem;
  padding:8px 10px !important;
  min-height:auto !important;
  border-width:1px !important;
  opacity:.85;
}

body.home-editor-open #inicio .home-edit-block{
  position:relative;
  outline:1px dashed rgba(250,204,21,.35);
  outline-offset:8px;
  border-radius:12px;
}
body.home-editor-open #inicio .home-edit-block::after{
  content:attr(data-home-block-title);
  position:absolute;
  top:-12px;
  left:8px;
  background:#111827;
  border:1px solid rgba(250,204,21,.32);
  color:#facc15;
  border-radius:999px;
  padding:3px 8px;
  font-size:11px;
  letter-spacing:.07em;
  text-transform:uppercase;
  pointer-events:none;
}

.home-editor-create-form{
  display:grid;
  gap:14px;
}
.home-editor-modal-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.home-editor-modal-grid label{
  display:block;
  margin:0 0 4px;
  color:#d6dde6;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.home-editor-modal-span2{
  grid-column:span 2;
}
/* ==========================================================
   SISTEMA RESPONSIVO PROFESIONAL (UNIFICADO)
   Breakpoints consistentes sin choques
   ========================================================== */

/* Accesibilidad global */
@media (prefers-reduced-motion: reduce){
  #mAgenciaAgentes .agent-mini-card,
  #mAgenciaAgentes .agent-mini-card:hover{
    transform:none !important;
    transition:none !important;
  }
  #mAgenciaAgentes .agent-mini-spark{
    display:none !important;
  }
}

@media (hover:none), (pointer:coarse){
  #mAgenciaAgentes .agent-mini-interactive{
    max-height:280px !important;
    opacity:1 !important;
    padding-top:8px !important;
  }
}

/* ----- LAPTOPS / TABLETS HORIZONTALES (max-width: 1200px) ----- */
@media (max-width: 1200px){
  #inicio .join-strip{
    padding:30px 24px !important;
  }
}

/* ----- TABLETS / ESCRITORIOS PEQUEÑOS (max-width: 992px) ----- */
@media (max-width: 992px){
  /* Apuestas Oracle */
  #apuestas #gridApuestas,
  #apuestas #gridApuestas.data-grid{
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap:16px !important;
  }
  #apuestas #gridApuestas .bet-oracle-card{ min-height:310px !important; }
  #apuestas #gridApuestas .bet-oracle-card .oracle-content{ padding:16px !important; }
  #apuestas #gridApuestas .bet-oracle-card .oracle-desc{ font-size:1.25rem !important; }
  #apuestas #gridApuestas .bet-oracle-card .oracle-odds{ font-size:2.8rem !important; }
  
  /* Agencias Oracle */
  #agencias #gridAgencias .agencia-oracle-card{ min-height:460px !important; }
  #agencias #gridAgencias .agencia-oracle-card .oracle-content{ padding:16px !important; gap:10px !important; }
  #agencias #gridAgencias .agencia-oracle-card .agencia-topline{ flex-wrap:wrap !important; justify-content:center !important; }
  #agencias #gridAgencias .agencia-oracle-card .oracle-desc{ font-size:1.6rem !important; }
  #agencias #gridAgencias .agencia-oracle-card .oracle-odds{ font-size:2.9rem !important; }
  #agencias #gridAgencias .agencia-oracle-card .oracle-odds-sub{ font-size:.85rem !important; }
  #agencias #gridAgencias .agencia-oracle-card .oracle-code{ font-size:.95rem !important; }
  #agencias #gridAgencias .agencia-oracle-card .oracle-date{ font-size:.9rem !important; }
  #agencias #gridAgencias .agencia-oracle-card .oracle-map-frame{ height:140px !important; }
  #agencias #gridAgencias .agencia-oracle-card .btn-mini{ padding:10px !important; font-size:.8rem !important; }

  /* Banner Apuestas */
  .apuestas-banner{ padding:40px 20px !important; }
  .apuestas-banner h2{ font-size:2.2rem !important; }
  .apuestas-banner p{ font-size:1.1rem !important; }

  /* Carrusel y Botón Flotante */
  #inicio .home-carousel-container{ width:96%; border-radius:14px; }
  .btn-neon-solido-floating{ left:16px; bottom:16px; padding:14px 22px; font-size:.9rem; letter-spacing:1px; }

  /* Sidebar fluida */
  .sidebar-overlay{
    backdrop-filter:blur(3px) !important;
    -webkit-backdrop-filter:blur(3px) !important;
    transition:opacity .18s ease, visibility .18s ease !important;
  }
  .sidebar-menu{
    right:0 !important;
    transform:translate3d(105%, 0, 0);
    transition:transform .25s cubic-bezier(.22,.75,.3,1), box-shadow .25s ease !important;
    will-change:transform;
  }
  .sidebar-menu.active{ transform:translate3d(0, 0, 0) !important; }
  .sidebar-menu-item{ transition:background .2s ease, color .2s ease !important; }
  .sidebar-menu-item::before{ display:none !important; }
  .sidebar-menu-item:hover{
    padding-left:20px !important;
    text-shadow:none !important;
    box-shadow:none !important;
    background:rgba(255,215,0,.1) !important;
  }

  /* Únete */
  #inicio .join-strip{ padding:26px 20px !important; border-radius:20px !important; }
  #inicio .join-strip h2{ font-size:clamp(1.5rem, 5vw, 2.2rem) !important; line-height:1.1 !important; }
  #inicio .join-strip p{ font-size:.95rem !important; line-height:1.6 !important; }
  #inicio .join-strip-inner::before{ min-height:28px !important; font-size:.7rem !important; padding:0 12px !important; }
  #inicio .join-strip .btn-auth.btn-register,
  #inicio .join-strip .ghost-btn{ min-height:42px !important; font-size:.85rem !important; padding:0 14px !important; border-radius:10px !important; }
}

/* ----- TABLETS VERTICALES Y MÓVILES GRANDES (max-width: 768px) ----- */
@media (max-width: 768px){
  #mAgenciaAgentes .sheet{ width:min(660px, 96vw) !important; }
  .agency-promo-rail{ grid-auto-columns:minmax(180px, 1fr) !important; }
  .agency-promo-img{ height:95px !important; }
  #mAgenciaAgentes .grid-mini{ grid-template-columns:1fr !important; }

  #inicio .join-strip{ margin-top:20px !important; padding:22px 16px !important; border-radius:18px !important; }
  #inicio .join-strip .join-actions{ flex-direction:column !important; align-items:stretch !important; gap:8px !important; }
  #inicio .join-strip .btn-auth.btn-register,
  #inicio .join-strip .ghost-btn{ width:100% !important; justify-content:center !important; }

  .home-editor-panel{ width:min(100vw, 420px); }
  .home-editor-carousel-main{ grid-template-columns:1fr; }
  .home-editor-thumb-wrap{ width:100%; height:120px; }
  .home-editor-inline{ flex-direction:column; }
  .home-editor-foot{ flex-wrap:wrap; }
  .home-editor-spacer{ display:none; }
}

/* ----- MÓVILES ESTÁNDAR (max-width: 576px) ----- */
@media (max-width: 576px){
  .apuestas-banner{ padding:26px 14px !important; }
  .apuestas-banner h2{ font-size:1.7rem !important; }

  #agencias #gridAgencias .agencia-oracle-card .pro-actions{ grid-template-columns:1fr !important; }

  #mAgenciaAgentes .sheetbody{ padding:12px !important; }
  #mAgenciaAgentes .agent-mini-avatar-box{ width:76px !important; height:76px !important; }
  #mAgenciaAgentes .agent-mini-name{ font-size:1.1rem !important; }

  #inicio .home-carousel-container{ width:98%; border-radius:10px; }
  .btn-neon-solido-floating{ padding:12px 16px; font-size:.8rem; border-radius:999px; gap:8px; }
  .btn-neon-solido-floating svg{ width:18px; height:18px; }

  .home-editor-modal-grid{ grid-template-columns:1fr; }
  .home-editor-modal-span2{ grid-column:auto; }
}

/* ----- MÓVILES PEQUEÑOS (max-width: 400px) ----- */
@media (max-width: 400px){
  .apuestas-banner h2{ font-size:1.5rem !important; }
  .apuestas-banner p{ font-size:.95rem !important; }

  #inicio .home-carousel-container{ border-radius:8px; }
  .btn-neon-solido-floating{ padding:10px 14px; font-size:.75rem; }
  .btn-neon-solido-floating svg{ width:16px; height:16px; }
}