body {

    font-family: 'Poppins', sans-serif;
    color:white
  
  }
  
  
  
  html, body { 
  
        scroll-behavior: smooth
  
      }
  
  
  
  :root {
  
      --color_main: rgb(59, 73, 161);
  
      --color_main_2: rgb(90, 109, 235);
  
      --color_main_3: rgba(49, 59, 124, 0.5);
  
      --color_main_4: rgb(141, 156, 255);
  
      --color_main_base: #070d25;
  
      --hue: 223;
  
      --fg: hsl(223,10%,10%);
  
      --trans-dur: 0.3s;
  
      --trans-timing: cubic-bezier(0.83, 0, 0.17, 1);
  
      --color_warning: #ffc107;
  
  
  
  }
  
  
  
  @font-face {
  
      font-family: 'FIFA';
  
      src: url('/fonts/FIFA.ttf') format('truetype'); 
  
  }
  
  
  
  .font_fifa{
  
          font-family: 'FIFA', sans-serif;
  
  }
  
  
  
  
  
  .ra-elegido{
  
      background:linear-gradient(90deg, rgb(147 0 255) 0%, rgb(0 58 255 / 75%) 100%) !important;
  
  }
  
  
  
  
  
  .agrandar{
  
      transition:0.3s;
  
  }
  
  .seleccionar_top{
    transition:0.3s;
  }
  
  @media (min-width: 992px) {
    .seleccionar_top:hover{
      transform: translateY(-5px);
      /* filter:drop-shadow(0px 2px 2px rgb(255 255 255 / 48%)); */
    }
  
    .agrandar:hover{
    
    
        -webkit-transform: scale(1.1) !important;
    
        transform: scale(1.1) !important;
        opacity: 1;
    
    }
  
  }
  
  
  
  .main_menu_option{
    opacity:0.7;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 1rem;
    padding-right: 1rem;
    transition:0.3s;
  }
  
  @media (max-width: 992px) {
    .main_menu_option{
      padding-left: 0.5rem;
      padding-right: 0.5rem;
    }
  }
  
  .main_menu_option_selected{
    background: rgb(90 109 235 / 50%);
    color: white !important;
    opacity:1 !important;
  }
  
  
  
  
  .agrandar_00{
  
      
  
      transition:0.3s;
  
  }
  
  .object-fit-cover{
    object-fit: cover !important;
  }
  
  .text_black_children_a a{
    color:black !important;
  }
  
  .text_black_children_a .main_menu_option_selected{
    color:white !important;
  }
  
  .text_wrap_balance{
    text-wrap: balance;
  }
  
  
  @media (min-width: 992px) {
    .agrandar_00:hover{
  
        
  
        -webkit-transform: scale(1.03) !important;
  
        transform: scale(1.03) !important;
  
    }
    .agrandar_01:hover{
  
        
  
        -webkit-transform: scale(1.01) !important;
  
        transform: scale(1.01) !important;
  
    }
  
    .agrandar_2:hover{
  
        
  
        -webkit-transform: scale(1.05) !important;
  
        transform: scale(1.05) !important;
        opacity: 1 !important;
  
    }
  
  
  
  
    .agrandar_3:hover{
  
    
  
      -webkit-transform: scale(0.7) !important;
    
      transform: scale(0.5) !important;
    
    }
  
  
  
  
    
    .agrzx4:hover{
  
      
  
      -webkit-transform: scale(1.3) !important;
  
      transform: scale(1.3) !important;
  
    }
  
  }
  
  
  
  .agrandar_01{
  
      
  
      transition:0.3s;
  
  }
  
  
  
  
  
  
  
  
  .agrandar_2{
  
      transition:0.3s;
  
  }
  
  
  
  
  
  
  
  .agrandar_3{
  
      
  
    transition:0.3s;
  
  }
  
  
  
  
  
  
  
  .agrzx4{
  
      
  
    transition:0.5s;
  
  }
  
  
  
  
  
  
  
  select{
  
      transition: .3s;
  
  }
  
  
  
  .spinner-grow {
  
      --bs-spinner-animation-speed: 1.5s;
  
  }
  
  
  
  
  
  input:focus {
  
      border: 1 solid rgba(255, 255, 255, 0);
  
  }
  
  
  
  
  
  .offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-sm, .offcanvas-xl, .offcanvas-xxl{
  
      --bs-offcanvas-width : 300px;
  
      transition: 1s ease;
  
      background-color: transparent;
  
      --bs-offcanvas-border-width: 0px;
  
  }
  
  
  
  /* width */
  
  ::-webkit-scrollbar {
  
      width: 7px;
  
    }
  
    
  
    /* Track */
  
    ::-webkit-scrollbar-track {
  
      background:rgb(18, 0, 68);
  
    }
  
    .form-check-input:checked{
      background-color: var(--color_main_2) !important;
      border-color: var(--color_main_2) !important;
    }
  
  
  
    /* Handle */
  
    ::-webkit-scrollbar-thumb {
  
      background: linear-gradient(310deg,var(--color_main_2),var(--color_main)) !important; 
  
      border-radius: 3px;
  
    }
  
    
  
    /* Handle on hover */
    @media (min-width: 992px) {
      ::-webkit-scrollbar-thumb:hover {
  
        background: rgba(154, 87, 255, 0.767);
  
        cursor:pointer;
  
      }
  }
  
  
    .scroll_delgado::-webkit-scrollbar {
  
      width: 3px !important;
  
      height: 3px !important;
  
    }
  
    .scroll_delgado_orders::-webkit-scrollbar {
  
      width: 3px !important;
  
      height: 7px !important;
  
    }
  
    
  
    /* Track */
  
    .scroll_delgado::-webkit-scrollbar-track, .scroll_delgado_orders::-webkit-scrollbar-track {
  
      background: transparent;
  
      border-radius: 3px !important;
  
    }
  
     
  
    /* Handle */
  
    .scroll_delgado::-webkit-scrollbar-thumb, .scroll_delgado_orders::-webkit-scrollbar-thumb {
  
      background: linear-gradient(45deg, rgba(177, 131, 246, 0.801) 0%rgba(30, 42, 71, 0.909) 100%)!important; 
  
      border-radius: 3px !important;
  
    }
  
    
  
    /* Handle on hover */
    @media (min-width: 992px) {
      .scroll_delgado::-webkit-scrollbar-thumb:hover, .scroll_delgado_orders::-webkit-scrollbar-thumb:hover {
  
        background: rgba(54, 3, 130, 0.767) !important;
  
        cursor:pointer !important;
  
      }
  }
  
  
  
    
  
    .scroll_option::-webkit-scrollbar {
  
      width: 8px !important;
  
      height: 8px !important;
  
    }
  
    
  
    /* Track */
  
    .scroll_option::-webkit-scrollbar-track {
  
      background: var(--color_main);
  
    }
  
     
  
    /* Handle */
  
    .scroll_option::-webkit-scrollbar-thumb {
  
      background: linear-gradient(45deg, #999fd0 0% #4d5879 )!important; 
  
      border-radius: 10px !important;
  
    }
  
    
  
    /* Handle on hover */
  
    @media (min-width: 992px) {
      .scroll_option::-webkit-scrollbar-thumb:hover {
  
        background: var(--color_main_2) !important;
  
        cursor:pointer !important;
  
      }
    }
  
  
  
  
  
  .modal{
  
      --bs-modal-width: 360px;
  
  }
  
  
  
  
  
  /* input:-webkit-autofill,
  
  input:-webkit-autofill:focus {
  
    transition: background-color 600000s 0s, color 600000s 0s;
  
  } */
  
  
  
  
  
  /* #name::placeholder{
  
      color:rgba(255, 255, 255, 0.8);
  
  } */
  
  
  
  
  
  
  
  -check-input:checked{
  
      background-color: #38c1e3;
  
      border-color:#38c1e3;
  
      
  
  }
  
  
  
  .form-check-input{
  
      transition: 0.8s;
  
  }
  
  
  
  .no-select {
  
      user-select: none; /* Est���ndar */
  
      -webkit-user-select: none; /* Chrome, Safari y Opera */
  
      -moz-user-select: none; /* Firefox */
  
      -ms-user-select: none; /* Internet Explorer/Edge */
  
  }
  
  
  
  input:focus{
  
      outline: none;
  
      border: 0px;
  
  }
  
  
  
  input{
  
      color:black;
  
  }
  
  
  
  
      .content {
  
          /* this is needed or the background will be offset by a few pixels at the top */
  
          overflow: auto;
  
          position: relative;
  
        }
  
  
  
  select option{
      background:var(--color_main);
  }
  
  
  select:focus {
    outline: 0px;
  }
  
  textarea:focus{
    outline: 0px;
  }
  
  
  select{
      background-color: transparent !important;
  }
  
  .beat-in{
    animation: beat-in 1s ease-in-out;
  }
  
  @keyframes beat-in {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
  }
  
  
  .form-control:focus, .form-select:focus {
    border-color:white !important;
  }
  
  
  @media (min-width: 992px) {
  
    /* Estilo para el hover en las opciones */
    .form-select option:hover,
    .form-select option:focus,
    .form-select option:active {
        background-color: var(--color_main_4) !important; /* Fondo al hacer hover */
        color: white !important;
    }
  
  
  
    .steps_section select:hover{
  
        background-color: rgb(39 47 97) !important;
  
    }
  
    .form-select option:hover{
      background-color: rgb(39 47 97) !important;
    }
  }
  
  
  .dropdown-menu {
  
      --bs-dropdown-min-width: 15rem;
  
      --bs-dropdown-link-active-bg: #00ccffc7;
  
  }
  
  
  
  
  
  
    .web-center{
  
      display:flex;
  
      justify-content:center;
  
      align-items:center;
  
    }
  
  
  
    .bg-fondo{
  
      background-color:#7aadff;
  
    }
  
  
  
    .bg-cartas{
  
      background:linear-gradient(332deg,#080312 0%,#444a95 100%) !important;
  
    }
  
    
  
    .bg_suave{
  
        background:linear-gradient(310deg,var(--color_main_2),var(--color_main)) !important;
  
    }
  
    
  
  
    .bg-cartas2{
  
      background:linear-gradient(332deg,#08031261 0%,#444a95 100%) !important;
  
    }
  
  
  
    .background-oscuro{
  
      background: linear-gradient(310deg,#0E0B16 0%,#444a95 100%) !important;
  
    }
  
  
  
    .fondo1{
  
      background-image:url('/img/fondo2.webp');
  
      background-size:cover;
  
      background-position:50%;
  
    }
  
  
  
    .editorial {
  
      display: block;
  
      width: 100%;
  
      height: 60px;
  
      max-height: 60px;
  
      margin: 0;
  
      z-index:5;
  
      bottom:0;
  
      position:absolute;
  
      left:0px;
  
      float:left;
  
    }
  
    
  
    .parallax1 > use {
  
      animation: move-forever1 10s linear infinite;
  
      &:nth-child(1) {
  
        animation-delay: -2s;
  
      }
  
    }
  
    .parallax2 > use {
  
      animation: move-forever2 8s linear infinite;
  
      &:nth-child(1) {
  
        animation-delay: -2s;
  
      }
  
    }
  
    .parallax3 > use {
  
      animation: move-forever3 6s linear infinite;
  
      &:nth-child(1) {
  
        animation-delay: -2s;
  
      }
  
    }
  
    .parallax4 > use {
  
      animation: move-forever4 4s linear infinite;
  
      &:nth-child(1) {
  
        animation-delay: -2s;
  
      }
  
    }
  
    @keyframes move-forever1 {
  
      0% {
  
        transform: translate(85px, 0%);
  
      }
  
      100% {
  
        transform: translate(-90px, 0%);
  
      }
  
    }
  
    @keyframes move-forever2 {
  
      0% {
  
        transform: translate(-90px, 0%);
  
      }
  
      100% {
  
        transform: translate(85px, 0%);
  
      }
  
    }
  
    @keyframes move-forever3 {
  
      0% {
  
        transform: translate(85px, 0%);
  
      }
  
      100% {
  
        transform: translate(-90px, 0%);
  
      }
  
    }
  
    @keyframes move-forever4 {
  
      0% {
  
        transform: translate(-90px, 0%);
  
      }
  
      100% {
  
        transform: translate(85px, 0%);
  
      }
  
    }
  
  
  
    .texto-oscuro{
  
      color:#344767;
  
    }
  
  
  
    .bg-oscuro{
  
      background: linear-gradient(310deg,rgba(2, 6, 21, 0.03) 0%,rgba(2, 6, 21, 0.05) 100%)
  
    }
  
  
  
    .border-oscuro{
  
      border:1px solid #e9e9e9;
  
    }
    
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
    /* slider -------------------- */
  
    
  
    input[type=range]::-webkit-slider-runnable-track {
  
      -webkit-appearance: none;
  
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3bade3 ', endColorstr='#ff357f ', GradientType=1 );
  
      height: 20px;
  
      border-radius: 20px;
  
    }
  
    
  
    input[type=range]:focus {
  
      outline: none;
  
    }
  
    
  
    input[type=range]::-moz-range-track {
  
      -moz-appearance: none;
  
      background: rgba(59,173,227,1);
  
      background: -moz-linear-gradient(45deg, rgba(59,173,227,1) 0%,  rgb(0, 200, 255) 51%, rgb(4, 38, 255) 100%);
  
      background: -webkit-linear-gradient(45deg, rgba(59,173,227,1) 0%,  rgb(0, 200, 255) 51%, rgb(4, 38, 255) 100%);
  
      background: -o-linear-gradient(45deg, rgba(59,173,227,1) 0%,  rgb(0, 200, 255) 51%, rgb(4, 38, 255) 100%);
  
      background: -ms-linear-gradient(45deg, rgba(59,173,227,1) 0%,  rgb(0, 200, 255) 51%, rgb(4, 38, 255) 100%);
  
      background: linear-gradient(45deg, rgba(59,173,227,1) 0%,  rgb(0, 200, 255) 51%, rgb(4, 38, 255) 100%);
  
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3bade3 ', endColorstr='#ff357f ', GradientType=1 );
  
      height: 30px;
  
    }
  
  
  
  .rangoCantidad {
  
      -webkit-appearance: none;
  
  }
  
  
  
  .rangoCantidad::-webkit-slider-thumb {
  
    position:relative;
  
      appearance: none;
  
      width: 30px;
  
      height: 30px;
  
      bottom:30%;
  
      background: linear-gradient(332deg,#5920cd 0%,#444a95 100%) !important;
  
      border-radius: 50%;
  
      cursor: -webkit-grabbing;
  
      border:1px solid #e1e1e1;
  
      outline: 20px solid transparent;
  
      transition:0.3s;
  
  }
  
  
  @media (min-width: 992px) {
    .rangoCantidad::-webkit-slider-thumb:hover {
  
        outline:8px solid var(--color_main_2);
  
        transform:scale(1.2);
  
  
  
    }
  }
  
  
  
  
  
  .rangoCantidad::-moz-range-thumb {
  
      -moz-appearance: none;
  
      appearance: none;
  
      width: 30px;
  
      height: 30px;
  
      background-color: red;
  
      border-radius: 50%;
  
  }
  
  
  
  .agrandar4{
  
      transition:0.5s;
  
  }
  
  
  @media (min-width: 992px) {
    .agrandar4:hover{
  
        transform:scale(1.2);
  
    }
  }
  
  
  
  
  
  
  
  
  
    
  
  
  
    input[type=range]::-webkit-slider-thumb:active {
  
      cursor: -webkit-grabbing;
  
    }
  
    
  
    input[type=range]::-moz-range-thumb:active {
  
      cursor: -moz-grabbing;
  
    }
  
  
  
    
  
    #rangoContainer {
  
      position: relative;
  
  }
  
  
  
  .menuClass{
  
    transition: 0.3s;
  
  
  
  }
  
  
  @media (min-width: 992px) {
    .menuClass:hover{
  
      background: linear-gradient(310deg,#288eca 0%,#005aff 100%) !important;
  
      color: white !important;
  
    }
  }
  
  
  
  .opcionesMenu{
  
    transition:0.3s;
  
  }
  
  @media (min-width: 992px) {
    .opcionesMenu:hover{
  
      border-radius:1rem !important;
  
      background: linear-gradient(310deg,#288eca 0%,#005aff 100%) !important;
  
      padding-top: 0.5rem !important;
  
      padding-bottom: 0.5rem !important;
  
      color: white !important;
  
      padding-left : 0.5rem !important;
  
      padding-right: 0.5rem !important;
  
    }
  }
  
  
  @media (min-width: 992px) {
    .opcionesMenu:hover i,
  
    .opcionesMenu:hover span{
  
      color: white !important;
  
    }
  }
  
  
  
  .hoverColor{
  
    transition:0.3s;
  
  }
  
  
  @media (min-width: 992px) {
    .hoverColor:hover{
  
      border-radius:1rem !important;
  
      background: linear-gradient(310deg,var(--color_main) 0%,var(--color_main_2) 100%) !important;
  
      color: white !important;
  
    }
  }
  
  
  
  
  
  .botonSelect{
  
    background: linear-gradient(310deg,var(--color_main) 0%,var(--color_main_2) 100%) !important;
  
    color: white !important;
  
  }
  
  
  
  .botonSelectPais{
  
    background: linear-gradient(310deg,var(--color_main) 0%,var(--color_main_2) 100%) !important;
  
    color: white !important;
  
  }
  
  
  @media (min-width: 992px) {
    .hoverPais:hover{
  
      opacity: 1 !important;
  
    }
  }
  
  
  
  .hover1_1{
  
    transition:0.3s;
  
    pointer-events: none;
  
  }
  
  
  @media (min-width: 992px) {
    .hover1:hover .hover1_1{
  
      opacity:1 !important;
  
      pointer-events: auto;
  
    }
  }
  
  
  
  .hover2_1{
  
    transition:0.3s;
  
    pointer-events: none;
  
  }
  
  
  @media (min-width: 992px) {
    .hover2:hover .hover2_1{
  
      opacity:1 !important;
  
      pointer-events: auto;
  
    }
  }
  
  
  
  .color-azul{
  
    color:rgb(0, 166, 255);
  
  }
  
  
  
  
  
  
  
  
  
  .texto-claro{
  
    color: #e4dfdf;
  
  }
  
  
  
  
  @media (min-width: 992px) {
    .menuIcon:hover{
  
      width: 100% !important;
  
      font-weight: 600!important;
  
    }
  }
  
  
  
  /* PARA LA ORDEN */
  
  
  
  #progressbar-1 {
  
    color: #455A64;
  
    }
  
    
  
    #progressbar-1 li {
  
    list-style-type: none;
  
    font-size: 13px;
  
    width: 33.33%;
  
    float: left;
  
    position: relative;
  
    }
  
    
  
    #progressbar-1 #step1:before {
  
    content: "1";
  
    color: #fff;
  
    width: 29px;
  
    margin-left: 22px;
  
    padding-left: 11px;
  
    }
  
    
  
    #progressbar-1 #step2:before {
  
    content: "2";
  
    color: #fff;
  
    width: 29px;
  
    }
  
    
  
    #progressbar-1 #step3:before {
  
    content: "3";
  
    color: #fff;
  
    width: 29px;
  
    margin-right: 22px;
  
    text-align: center;
  
    }
  
    
  
    #progressbar-1 li:before {
  
    line-height: 29px;
  
    display: block;
  
    font-size: 12px;
  
    background: #455A64;
  
    border-radius: 50%;
  
    margin: auto;
  
    }
  
    
  
    #progressbar-1 li:after {
  
    content: '';
  
    width: 121%;
  
    height: 2px;
  
    background: #455A64;
  
    position: absolute;
  
    left: 0%;
  
    right: 0%;
  
    top: 15px;
  
    z-index: -1;
  
    }
  
    
  
    #progressbar-1 li:nth-child(2):after {
  
    left: 50%
  
    }
  
    
  
    #progressbar-1 li:nth-child(1):after {
  
    left: 25%;
  
    width: 121%
  
    }
  
    
  
    #progressbar-1 li:nth-child(3):after {
  
    left: 25%;
  
    width: 50%;
  
    }
  
    
  
    #progressbar-1 li.active:before,
  
    #progressbar-1 li.active:after {
  
    background: var(--color_main_2) !important;
  
    }
  
  
  
  .card-stepper {
  
      z-index: 0
  
      }
  
  
  
  .color-main{
  
        color: var(--color_main) !important;
  
    }
  
  
  
  .color-main2{
  
      color: var(--color_main_2) !important;
  
    }
  
    
  
  .bg-main{
  
            background: linear-gradient(310deg,var(--color_main_2),var(--color_main)) !important;
  
    }
  
    
  
  .bg-design{
  
        background: linear-gradient(310deg,var(--color_main_2),var(--color_main)) !important;
  
  }
  
  
  
  .ext_selected{
  
       background: white !important;
       transform: scale(1.3) !important;
       opacity: 1 !important;
  
  }
  
  
  .int_selected{
  
    background: white !important;
    transform: scale(1.3) !important;
    opacity: 1 !important;
  
  }
  
    
  
   .bg-main2{
  
       background: linear-gradient(90deg, rgb(59, 73, 161), rgba(0,134,255,1) 85%);
  
   }
  
  
  
    .border-main{
  
      border: 2px solid var(--color_main)
  
    }
  
  
  
    .border-main2{
  
      border: 2px solid var(--color_main_2)
  
    }
  
    
  
    .displayResponsive {
  
        display: block;
  
    }
  
    
  
    @media only screen and (max-width: 500px) {
  
        .displayResponsive {
  
          display: none !important; /* O cualquier estilo que desees aplicar cuando la pantalla sea pequeña */
  
        }
  
      }
  
      
  
      
  
  .dxmypa{
  
    position:absolute;
  
  }
  
  
  
  .dz32w1{
  
   width: 100% !important;
  
  }
  
  
  
  .z9820pa{
  
    position:absolute;
  
  }
  
  
  
  .w91sw1{
  
   width: 100% !important;
  
  }
  
  
  
  .zv48k{
  
      left: -30px;
  
  }
  
  .zv57k3{
  
      bottom: 108px;
  
  } 
  
  
  
  .abdk32{
  
      transform:scale(0.8);
  
  }
  
  
  
   .qq7324{
  
       left:-80px;
  
   } 
  
   .klmn30{
  
       bottom:90px;
  
   } 
  
   .z32a4 {
  
       z-index:4;
  
   }
  
   
  
   .mzhwc74{
  
       display:flex;
  
       justify-content: center;
  
       align-items: center;
  
   }
  
   
  
   .dz32w1{
  
       width:100% !important;
  
   }
  
   
  
   .d45hkh1{
  
       height:100% !important;
  
   }
  
   
  
   .kz432{
  
       display:flex;
  
   }
  
   
  
   .h32k4kk{
  
       justify-content:center;
  
   }
  
   
  
  
  
   
  
   @media only screen and (max-width: 700px) {
  
         .spzksj3{
  
              display: none;
  
          }
  
      }
  
      
  
      
  
  .orden_admin  {
  
    display: none !important;
  
  }
  
  
  
  .orden_admin.visible {
  
    display: flex !important; 
  
  }
  
  
  
  
  
  
  .slider_review {
  
      background: white;
  
      height: 640px;
  
      margin: auto;
  
      overflow-x: hidden;
  
      position: relative;
  
      width: 100%;
  
  }
  
  
  
  .slide-track-review {
  
      animation: slider-review-scroll 120s linear infinite;
  
      display: flex;
  
      width: calc(300px * 60);
  
  }
  
  
  
  .slide_review {
  
      height: 600px;
  
      width: 300px;
  
  }
  
  
  
  @keyframes slider-review-scroll {
  
      0% {
  
          transform: translateX(0);
  
      }
  
      100% {
  
          transform: translateX(calc(-300px * 20));
  
      }
  
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  .pattern-box {
  
      width: 200px; /* Ajusta el tama���o como necesites */
  
      height: 200px; /* Ajusta el tama���o como necesites */
  
      background-image:
  
          linear-gradient(45deg, #808080 25%, grey 25%, transparent 75%, #808080 75%, #808080), linear-gradient(45deg, #808080 25%, #606060 25%, #606060 75%, transparent 75%, transparent);
  
      background-size: 20px 20px; /* Tama���o de los cuadritos */
  
      background-position: 0 0, 10px 10px; /* Posici���n para intercalar los cuadros */
  
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
   
  
  
  
  .sr {
  
      overflow: hidden;
  
      position: absolute;
  
      width: 1px;
  
      height: 1px;
  
  }
  
  
  
  /* Light theme */
  
  .switch,
  
  .switch__input {
  
      display: block;
  
  }
  
  .switch {
  
      border-radius: 1.5em;
  
      box-shadow: 0 0.125em 0.25em hsla(0,0%,0%,0.4);
  
      position: relative;
  
      width: 4.5em;
  
      height: 3em;
  
      perspective: 10em;
  
  }
  
  .switch span {
  
      display: block;
  
  }
  
  .switch > span {
  
      border-radius: 0.5rem;
  
      z-index: 1;
  
  }
  
  .switch__surface-glare,
  
  .switch__inner,
  
  .switch__inner-glare,
  
  .switch__rocker-sides,
  
  .switch__rocker-sides-glare,
  
  .switch__rocker,
  
  .switch__rocker-glare,
  
  .switch__light {
  
      transition: transform var(--trans-dur) var(--trans-timing);
  
  }
  
  .switch__surface {
  
      background-color: hsl(var(--hue),10%,83%);
  
      overflow: hidden;
  
      width: 100%;
  
      height: 100%;
  
  }
  
  .switch > .switch__surface {
  
      z-index: 0;
  
  }
  
  .switch__surface-glare {
  
      background-image: radial-gradient(50% 50% at center,hsla(var(--hue),10%,90%,1),hsla(var(--hue),10%,90%,0));
  
      width: 3em;
  
      height: 3em;
  
      transform: translate(0,0.125em);
  
  }
  
  .switch__input {
  
      background-color: hsl(222.35deg 45.95% 92.75%);
  
      border-radius: 0.5em;
  
      box-shadow: 0 0 0 0.125em hsla(var(--hue),90%,50%,0);
  
      outline: transparent;
  
      position: absolute;
  
      top: 0.0625em;
  
      left: 0.0625em;
  
      width: calc(100% - 0.125em);
  
      height: calc(100% - 0.125em);
  
      transition: box-shadow 0.15s linear;
  
      z-index: 1;
  
      -webkit-appearance: none;
  
      appearance: none;
  
      -webkit-tap-highlight-color: transparent;
  
  }
  
  .switch__input:focus-visible {
  
      box-shadow: 0 0 0 0.125em hsla(var(--hue),90%,50%,1);
  
  }
  
  .switch__inner {
  
      background-color: hsl(var(--hue),10%,83%);
  
      overflow: hidden;
  
      position: absolute;
  
      inset: 0.5em;
  
      transform: translate(0.125em,0);
  
  }
  
  .switch__inner-glare {
  
      background-image: radial-gradient(50% 50% at center,hsla(var(--hue),10%,90%,1),hsla(var(--hue),10%,90%,0));
  
      position: absolute;
  
      width: 2em;
  
      height: 2em;
  
      transform: translate(100%,-0.5em);
  
  }
  
  .switch__inner-shadow {
  
      box-shadow: 0 0.125em 0.25em hsla(0,0%,0%,0.4);
  
      position: absolute;
  
      inset: 0.5em;
  
  }
  
  .switch__rocker-shadow {
  
      box-shadow: 0 0.125em 0.25em hsla(0,0%,0%,0.15);
  
      position: absolute;
  
      top: 0.5625em;
  
      right: 0.5625em;
  
      bottom: 0.5625em;
  
      left: 0.75em;
  
  }
  
  .switch__rocker-sides {
  
      background-color: hsl(var(--hue),10%,80%);
  
      overflow: hidden;
  
      position: absolute;
  
      inset: 0.5em;
  
      transform: rotateY(-20deg) translateZ(0.5em);
  
      transform-style: preserve-3d;
  
  }
  
  .switch__rocker-sides-glare {
  
      background-image: linear-gradient(90deg,hsla(var(--hue),10%,85%,0),hsla(var(--hue),10%,85%,1),hsla(var(--hue),10%,85%,0));
  
      position: absolute;
  
      width: 200%;
  
      height: 100%;
  
  }
  
  .switch__rocker {
  
      background-color: hsl(0deg 0.62% 71.31%);
  
      overflow: hidden;
  
      position: absolute;
  
      inset: 0.5625em;
  
      transform: rotateY(-20deg) translateZ(0.5em);
  
      transform-style: preserve-3d;
  
  }
  
  .switch__rocker-glare {
  
      background-image: linear-gradient(120deg,hsla(var(--hue),10%,85%,0) 25%,hsla(var(--hue),10%,85%,1) 50%,hsla(var(--hue),10%,85%,0) 75%);
  
      position: absolute;
  
      width: 100%;
  
      height: 100%;
  
      transform: translateX(-33%);
  
  }
  
  .switch__light {
  
      background-image: linear-gradient(-45deg,hsl(var(--hue),10%,60%) 30%,hsl(var(--hue),10%,80%));
  
      box-shadow: 0 0 max(1px,0.05em) hsla(var(--hue),10%,10%,0.3) inset;
  
      position: absolute;
  
      top: 50%;
  
      left: 50%;
  
      width: 0.5em;
  
      height: 0.5em;
  
      transform: translate(-50%,-50%) rotateY(-20deg) translateX(1.125em) translateZ(0.51em);
  
  }
  
  .switch__light-inner {
  
      background-color: hsl(133,90%,50%);
  
      box-shadow:
  
          0 0 max(1px,0.05em) hsla(var(--hue),10%,10%,0.3) inset,
  
          0 0 0.25em hsl(133,90%,50%);
  
      border-radius: 50%;
  
      opacity: 0;
  
      width: 100%;
  
      height: 100%;
  
      transition: opacity var(--trans-dur) var(--trans-timing);
  
  }
  
  
  
  
  
  /* ��On�� state */
  
  .switch__input:checked ~ .switch__surface .switch__surface-glare {
  
      transform: translate(3em,0.125em);
  
  }
  
  .switch__input:checked ~ .switch__inner {
  
      transform: translate(-0.125em,0);
  
  }
  
  .switch__input:checked ~ .switch__inner .switch__inner-glare {
  
      transform: translate(0,-0.5em);
  
  }
  
  .switch__input:checked ~ .switch__rocker {
  
      transform: rotateY(20deg) translateZ(0.5em);
  
  }
  
  .switch__input:checked ~ .switch__rocker .switch__rocker-glare {
  
      transform: translateX(33%);
  
  }
  
  .switch__input:checked ~ .switch__rocker-sides {
  
      transform: rotateY(20deg) translateZ(0.5em);
  
  }
  
  .switch__input:checked ~ .switch__rocker-sides .switch__rocker-sides-glare {
  
      transform: translateX(-50%);
  
  }
  
  .switch__input:checked ~ .switch__light {
  
      transform: translate(-50%,-50%) rotateY(20deg) translateX(1.125em) translateZ(0.51em);
  
  }
  
  .switch__input:checked ~ .switch__light .switch__light-inner {
  
      opacity: 1;
  
  }
  
  
  
  /* -------------------------------------------------------------------------------------- */
  
  
  
  .desvanecer_y{
  
      mask-image: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,1) 60%, rgba(0, 0, 0, 1) 60%, transparent 100%);
  
      -webkit-mask-image: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,1) 60%, rgba(0, 0, 0, 1) 60%, transparent 100%);
  
  }
  
  
  
  .desvanecer_x{
  
      mask-image:linear-gradient(to left, rgba(0, 0, 0, 1) 0%, transparent 10%, rgba(0,0,0,1) 30%, rgba(0,0,0,1) 70%, transparent 80%);
  
      -webkit-mask-image : linear-gradient(to left, rgba(0, 0, 0, 1) 0%, transparent 10%, rgba(0,0,0,1) 30%, rgba(0,0,0,1) 70%, transparent 80%);
  
  }
  
  
  
  
  
  .manage_fit {
  
      object-fit: cover;
  
      transition: 0.3s;
  
  }
  
  
  
  @media (max-width: 1400px) {
  
      .manage_fit {
  
          object-fit: contain;
  
      }
  
  }
  
  
  
  @media (max-width: 1400px) {
  
      .manage_switch {
  
          display: none !important;
  
      }
  
      
  
      .panel_switch_ms{
  
          display: flex !important;
  
      }
  
      
  
      .px1400_desaprece{
  
          display: none !important;
  
      }
  
  }
  
  
  
  
  
  
  
  /*AJUSTES DE VARIEDAD PARA RESPONSIVE*/
  
  
  
  
  
  @media (max-width: 990px) {
  
      #gallery{
  
          flex-direction:row !important;
  
          flex-wrap: wrap;
  
      }
  
      #main_content_product{
  
          flex-direction:column;
  
      }
  
      
  
      #gallery_p{
  
          height: auto !important;
  
          
  
      }
  
      
  
      #main_product_p{
  
          margin-top:1rem !important;
  
          margin-bottom:1rem !important;
  
          padding: 0px !important;
  
      }
  
      
  
      #secion_gallery{
  
          width: 100% !important;
  
          order: 2 !important;
  
      }
  
      
  
      #modulo_personalizar{
  
          order: 1 !important;
  
      }
  
      
  
      .item_descripcion{
  
          display:none !important;
  
      }
  
  }
  
      
  
      
  
      @media(max-width:560px){
  
          .min_w_responsive{
  
              min-width:70%;
  
          }
  
      }
  
  
  
    .cambiar_color {
  
      animation: colorChange 2s infinite;
  
    }
  
  
  
    @keyframes colorChange {
  
      0% {
  
        color: #ff0000; /* Rojo */
  
      }
  
      25% {
  
        color: #00ff00; /* Verde */
  
      }
  
      50% {
  
        color: #0000ff; /* Azul */
  
      }
  
      75% {
  
        color: #ffff00; /* Amarillo */
  
      }
  
      100% {
  
        color: #ff0000; /* Vuelve a rojo */
  
      }
  
    }
  
    .btn{
      border-radius: var(--bs-border-radius-2xl)!important;
    }
  
  
    .web_center{
      display: flex;
      justify-content: center;
      align-items: center;
    }
  
    .theme_radius{
      border-radius: var(--bs-border-radius-2xl)!important;
    }
  
    .category-badge{
      text-transform: uppercase;
    }
  
    .color_main{
      color:var(--color_main) !important;
    }
  
    .color_success{
      color: #8dff91 !important;
    }
  
    .color_main_2{
      color:var(--color_main_3) !important;
    }
  
    .color_main_3{
      color:var(--color_main_4) !important;
    }
  
    .bg_base{
      background:#06071ca6  !important;
    }
  
    .bg_base_2{
      background: #06071ca6 !important;
    }
    
    .bg_main{
      background: linear-gradient(310deg,var(--color_main_2),var(--color_main)) !important;
    }
  
    .border_main{
      border: 2px solid var(--color_main_4)!important;
    }
  
    .bg_main_2{
      /* background: var(--color_main_3); */
      box-shadow:0 0 1rem 0.1rem #00000045 !important;
      background-color:var(--color_main_3) !important;
    }
  
    .bg_main_2_2{
      background-color: rgb(49 59 124 / 19%) !important;
      box-shadow:0 0 1rem 0.1rem #00000045 !important;
    }
  
    @media (max-width: 992px) {
      .bg_main_2{
        box-shadow:0 0 1rem 0.1rem #0000002b  !important;
      }
    }
  
    .bg_main_3{
      background-color: var(--color_main_4) !important;
    }
  
    .bg_main_4{
      background-color: var(--color_main_base) !important;
    }
  
    .bg_main_5{
      background-color: #070d2599 !important;
    }
  
    .text_main{
      color: var(--color_main) !important;
    }
  
    .text_main_2{
      color: var(--color_main_2) !important;
    }
  
    .text_main_3{
      color: var(--color_main_4) !important;
    }
  
    button{
      color:white;
    }
  
    .fs-7{
      font-size:0.8rem !important;
      line-height:1.1 !important;
    }
  
    @media(max-width:992px){
      .fs-xs-7{
        font-size:0.8rem !important;
        line-height:1.1 !important;
      }
  
      .fs-xs-8{
        font-size:0.6rem !important;
        line-height:1.1 !important;
      }
    }
  
    .fs-8{
      font-size:0.6rem !important;
      line-height:1.1 !important;
    }
  
    .fs-9{
      font-size:0.5rem !important;
      line-height:1.1 !important;
    }
  
    .mask_deg{
      width:100%;
      height:100%;
      position:absolute;
      background: linear-gradient(to top, #111731 10%, rgba(0, 0, 0, 0) 50%);
      z-index:1;
      top:0;
      left:0;
    }
  
    .bg_main_menu{
      background: linear-gradient(to right, rgba(0,0,0,0) 0%, var(--color_main) 50%, rgba(0,0,0,0) 100%);
    }
  
    .bg_submain_menu{
      background: linear-gradient(to right, rgba(0,0,0,0) 0%, #00000047 50%, rgba(0,0,0,0) 100%);
    }
  
    @media(min-width:1600px){
      /* .mt-4-frame-responsive{
        margin-top:1.5rem !important;
      } */
    }
    
    .lh_1{
      line-height:1.1 !important;
    }
  
    .card_product, .card_product img{
      transition:0.3s;
    }
  
    @media (min-width: 992px) {
      .card_product:hover{
        opacity: 1 !important;
      }
      .card_product:hover img{
        object-position:0px 0px !important;
        
        /* transform:scale(1.05) !important; */
      }
    }
  
  
    .card_product_active{
      opacity: 1 !important;
    }
  
    .card_product_active img{
      object-position:0px 0px !important;
    }
  
    .divisor{
      width: 100%;
      height:1px;
      background: var(--color_main_2);
    }
  
  
    .speech-bubble {
      position: relative;
      background: white;
      border-radius: 10px;
      padding: 15px;
      margin-left: 15px;
      color:var(--color_main);
  }
  
  .speech-bubble::before {
      content: '';
      position: absolute;
      left: -20px;
      top: 50%;
      transform: translateY(-50%);
      border-width: 10px;
      border-style: solid;
      border-color: transparent white transparent transparent;
  }
  
  
  /* Estilos para inputs de tipo texto sin bordes */
  input[type="text"] {
      border: 0;
  }
  
  
  
  .shipping-toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 20px;
    cursor: pointer;
  }
  
  .shipping-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .shipping-toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f0f0f0;
    border-radius: 34px;
    transition: .4s;
    display: flex;
    align-items: center;
    padding: 0 4px;
  }
  
  .shipping-toggle-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: var(--color_main_4);
    border-radius: 50%;
    transition: .4s;
    z-index: 2;
  }
  
  .normal-icon,
  .fast-icon {
    position: absolute;
    font-size: 14px;
    transition: .3s;
  }
  
  .normal-icon {
    left: 8px;
    color: white;
  }
  
  .fast-icon {
    right: 8px;
    color: #414a83;
  }
  
  input:checked+.shipping-toggle-slider {
    background-color: var(--color_main_4);
  }
  
  input:checked+.shipping-toggle-slider:before {
    transform: translateX(30px);
    background-color: white;
  }
  
  input:checked+.shipping-toggle-slider .normal-icon {
    opacity: 1;
  }
  
  input:checked+.shipping-toggle-slider .fast-icon {
    opacity: 0;
  }
  
  input:not(:checked)+.shipping-toggle-slider .normal-icon {
    opacity: 0;
  }
  
  input:not(:checked)+.shipping-toggle-slider .fast-icon {
    opacity: 1;
  }
  
  
  .flex-payment-toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 20px;
    cursor: pointer;
  }
  
  .flex-payment-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .flex-payment-toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f0f0f0;
    border-radius: 34px;
    transition: .4s;
    display: flex;
    align-items: center;
    padding: 0 4px;
  }
  
  .flex-payment-toggle-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: var(--color_main_4);
    border-radius: 50%;
    transition: .4s;
    z-index: 2;
  }
  
  .normal-icon,
  .active-icon {
    position: absolute;
    font-size: 14px;
    transition: .3s;
  }
  
  .normal-icon {
    left: 8px;
    color: white;
  }
  
  .active-icon {
    right: 8px;
    color: #414a83;
  }
  
  input:checked+.flex-payment-toggle-slider {
    background-color: var(--color_main_4);
  }
  
  input:checked+.flex-payment-toggle-slider:before {
    transform: translateX(30px);
    background-color: white;
  }
  
  input:checked+.flex-payment-toggle-slider .normal-icon {
    opacity: 1;
  }
  
  input:checked+.flex-payment-toggle-slider .active-icon {
    opacity: 0;
  }
  
  input:not(:checked)+.flex-payment-toggle-slider .normal-icon {
    opacity: 0;
  }
  
  input:not(:checked)+.flex-payment-toggle-slider .active-icon {
    opacity: 1;
  }
  
  
  
  
  .status_pending{
    background: linear-gradient(135deg, #ff4b1f, #ff9068);
    color: white !important;
    box-shadow: 0 4px 15px rgba(255, 75, 31, 0.3);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    border-radius: 12px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(5px);
  }
  
  .status_pending::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: shine 2s infinite;
  }
  
  .status_pending i {
    font-size: 1.1em;
    animation: pulse 2s infinite;
  }
  
  .status_in_process {
    background: linear-gradient(135deg, var(--color_main_4), var(--color_main_3));
    color: white !important;
    box-shadow: 0 4px 15px rgba(var(--color_main_4_rgb), 0.3);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    border-radius: 12px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(5px);
  }
  
  .status_in_process::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: shine 2s infinite;
  }
  
  .status_in_process i {
    font-size: 1.1em;
    animation: spin 2s linear infinite;
  }
  
  .status_shipped {
    background: linear-gradient(135deg, #00b09b, #96c93d);
    color: white !important;
    box-shadow: 0 4px 15px rgba(0, 176, 155, 0.3);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    border-radius: 12px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(5px);
  }
  
  .status_shipped::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: shine 2s infinite;
  }
  
  .status_shipped i {
    font-size: 1.1em;
    animation: bounce 2s infinite;
  }
  
  @keyframes shine {
    0% {
      left: -100%;
    }
    20% {
      left: 100%;
    }
    100% {
      left: 100%;
    }
  }
  
  @keyframes pulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
    }
  }
  
  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  
  @keyframes bounce {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-5px);
    }
  }
  
  /* Efecto hover para todos los estados */
  .status_pending:hover,
  .status_in_process:hover,
  .status_shipped:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    filter: brightness(1.1);
  }
  
  /* Estilos para el texto del estado */
  .status_pending span,
  .status_in_process span,
  .status_shipped span {
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: capitalize;
    font-size: 0.9em;
  }
  
  
  
  
  .menu_divisor{
    width:2px;
    height:70%;
    background: linear-gradient(to bottom, 
      rgba(255, 255, 255, 0) 0%, 
      var(--color_main_4) 50%, 
      rgba(255, 255, 255, 0) 100%);
    border-radius: 5px;
    opacity:0.7;
  }
  
  .sub_menu_options_container > a:first-child {
    padding-left: 1rem !important;
  }
  
  @media (min-width: 992px) {
    .main_menu_option:hover{
      background: rgb(90 109 235 / 50%);
      color: white !important;
      opacity:1 !important;
      transform: scale(1.05);
      padding-left: 1rem !important;
      padding-right: 1rem !important;
    }
  }
  
  
  
  
  
  
  
      .save_button{
          clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
      }
      .buy_button{
          /* clip-path: polygon(10% 0, 90% 0, 100% 20%, 100% 75%, 90% 100%, 10% 100%, 0% 75%, 0% 25%); */
          /* clip-path:polygon(10% 0, 90% 0, 100% 49%, 100% 51%, 90% 100%, 10% 100%, 0% 75%, 0% 25%); */
          /* clip-path:polygon(10% 0, 90% 0, 100% 0%, 100% 100%, 90% 100%, 10% 100%, 0% 75%, 0% 25%); */
      }
  
      .custom_part_items{
          /* clip-path: polygon(0 0, 100% 0, 100% 13%, 100% 496px, 6% 97%, 0 100%); */
          height:511px;
      }
  
      @media (max-width: 992px) {
        .custom_part_items{
          height:380px !important;
          /* clip-path: polygon(0 0, 100% 0, 100% 13%, 100% 370px, 6% 97%, 0 100%) !important; */
        }
      }
  
      .custom_part_1{
        height:75px;
    }
    .display_global{
        /* padding-top:3rem;
        padding-bottom:3rem; */
    }
  
    .display_card_shadow_padre{
        bottom:-37px;
        left:9px;
    }
  
    .custom_global_padre{
        align-items:center;
    }
  
    @media (max-width: 1600px) {
        /* .custom_part_1{
            height:130px !important;
        } */
        /* .scroll_delgado{
            height:240px !important;
        }
        .custom_part_items{
            height:400px !important;
        }
  
        .custom_global{
            margin-top:0px;
        }
  
        .display_global{
            padding-top:0px;
            height:745px !important;
        }
  
        .display_card_shadow_padre{
            bottom:11px;
        } */
  
    }
  
  
  
  
      .selected_item{
          background:var(--color_main_2) !important;
      }
      .selected_item .hexa_2{
          background:linear-gradient(to bottom, var(--color_main_2), var(--color_main_3)) !important;
      }
      .selected_item i{
          color:white !important;
      }
      
      /* Estilos para los elementos seleccionados */
      .selected-overlay {
          animation: pulse-white 2s infinite ease-in-out;
      }
      
      .selected-indicator {
          animation: pulse-scale 2s infinite ease-in-out;
      }
      
      @keyframes pulse-white {
          0% { opacity: 0.1; }
          50% { opacity: 0.3; }
          100% { opacity: 0.1; }
      }
      
      @keyframes pulse-scale {
          0% { transform: scale(0.8); }
          50% { transform: scale(1.2); }
          100% { transform: scale(0.8); }
      }
      
      /* Estilos para las animaciones de cambio de elementos */
      @keyframes destello {
          0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
          70% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
          100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
      }
      
      .destello-animacion {
          animation: destello 1s ease-out;
      }
      
      /* Estilos para la notificación de guardado */
      .save-notification {
          position: fixed;
          bottom: 20px;
          left: 50%;
          transform: translateX(-49%);
          background-color: rgba(0, 0, 0, 0.7);
          color: white;
          padding: 10px 20px;
          z-index: 9999;
          opacity: 0;
          transition: opacity 0.3s ease-in-out;
          pointer-events: none;
          font-size: 14px;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }
      
      .save-notification.show {
          opacity: 1;
      }
      
      /* Estilos para los efectos de selección */
      .resource-item {
          transition: transform 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
      }
      
      @media (min-width: 992px) {
        .resource-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
      }
      
      .resource-item.selected {
          border: 2px solid white !important;
          box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
      }
  
  
  
  
  
  
  
      
      /* Estilos para los iconos hexagonales de navegación */
      .nav-hexagon {
          width: 50px;
          height: 50px;
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.3s;
          cursor: pointer;
          /* background-color: var(--color_main_3); */
          /* clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); */
      }
  
      .nav-hexagon img{
          opacity: 0.5;
      }
      
      .nav-hexagon i {
          position: relative;
          z-index: 3;
          font-size: 16px;
          transition: all 0.3s;
      }
      
  
      
      .nav-hexagon:hover i {
          /* color: rgba(255,255,255,0.8) !important; */
      }
      
      .selected-nav-hex {
          /* background:linear-gradient(to bottom, transparent, var(--color_main_2)) !important; */
          /* transform: translateY(-3px); */
          
      }
  
      .selected-nav-hex:hover img{
          /* opacity: 1 !important; */
      }
  
      .selected-nav-hex img{
          /* filter:drop-shadow(0px 2px 2px rgb(255 255 255 / 70%));
          opacity: 1 !important; */
      }
      
      .selected-nav-hex::before {
          /* opacity: 1;
          box-shadow: 0 0 15px var(--color_main_2); */
      }
      
      .selected-nav-hex i {
          color: white !important;
          /* font-size: 18px;
          text-shadow: 0 0 5px var(--color_main_2); */
      }
      
      /* Mantener los estilos existentes */
      .nav-icon {
          width: 30px;
          height: 30px;
          background-color: #1e1e3a;
          border-radius: 4px;
          display: flex;
          align-items: center;
          justify-content: center;
      }
      
      /* Estilos para la nueva interfaz */
      .category {
          margin-bottom: 5px;
          font-size: 12px;
          color: rgba(255,255,255,0.7);
          border-radius: 4px;
          transition: all 0.2s;
      }
      
      .active-category {
          background-color: var(--color_main_2);
          color: white;
          box-shadow: 0 0 10px var(--color_main_2);
      }
  
      .hexagon-icon {
          width: 40px;
          height: 80px;
          background-color: #1e1e3a;
          clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
          display: flex;
          align-items: center;
          justify-content: center;
      }
      .selected-bottom-nav {
          background-color: var(--color_main_2);
          box-shadow: 0 0 4px 3px var(--color_main_2);
      }
      
      /* Estilos adicionales para las animaciones */
      .resources-item {
          transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
      }
      
      @media (min-width: 992px) {
          .resources-item:hover {
              box-shadow: 0 0 4px 3px var(--color_main_2);
              z-index: 10;
          }
      }
  
  
      
      /* Animación para el spinner de carga */
      @keyframes pulse {
          0% { opacity: 0.6; transform: scale(0.98); }
          50% { opacity: 1; transform: scale(1); }
          100% { opacity: 0.6; transform: scale(0.98); }
      }
      
      .placeholder-glow .placeholder {
          animation: pulse 1.5s infinite ease-in-out;
      }
      
      /* Mejora visual para las categorías */
      .category {
          cursor: pointer;
          transition: all 0.3s ease;
      }
      
      @media (min-width: 992px) {
        .category:hover:not(.active-category) {
            background-color: rgba(255, 255, 255, 0.1);
            transform: translateX(3px);
        }
      }
      
      .active-category {
          transition: all 0.3s ease;
      }
  
      .item_selected{
          border: 2px solid white !important;
          opacity: 1 !important;
          transform: scale(1) !important;
      }
      .item_selected::after {
          content: '';
          position: absolute;
          inset: 0;
          background-color: white;
          opacity: 0.2;
          z-index: 1;
          pointer-events: none;
          animation: beat_custom 1.5s ease-in-out infinite;
      }
  
      @keyframes beat_custom {
          0% {
              opacity: 0.2;
          }
          50% {
              opacity: 0.4;
          }
          100% {
              opacity: 0.2;
          }
      }
  
  
  
      @keyframes fadeInY{
        from{
          opacity: 0;
          transform: translateY(100px);
        }
        to{
          opacity: 1;
          transform: translateY(0);
        }
      }
      
  
      
      @keyframes flash-animation {
          0% {
              opacity: 1;
              background-color: rgba(255, 255, 255, 0.9);
              box-shadow: 0 0 20px 10px rgba(255, 215, 0, 0.8);
          }
          50% {
              opacity: 0.7;
              background-color: rgba(255, 255, 255, 0.5);
              box-shadow: 0 0 15px 5px rgba(255, 215, 0, 0.5);
          }
          100% {
              opacity: 0;
              background-color: rgba(255, 255, 255, 0);
              box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
          }
      }
      
      .fade-in {
          animation: fadeInScale 0.5s ease forwards;
      }
  
  
      .fade-in-slow {
          animation: fadeInY 1s ease forwards;
      }
      
      
      
      .fade-out {
          animation: fadeOutScale 0.5s ease forwards;
      }
      
      .cart-item {
          transition: all 0.3s ease-in-out;
      }
      
      .cart-item.new-item {
          animation: flash-animation 1.5s ease-out;
      }
  
  
  
  
      .display_card {
          animation: flotar 3s ease-in-out infinite;
      }
  
      .display_card_shadow {
          animation: sombra 3s ease-in-out infinite;
      }
  
      @keyframes flotar {
          0%, 100% {
              transform: translateY(0px);
          }
          50% {
              transform: translateY(-10px);
          }
      }
  
      @keyframes sombra {
          0%, 100% {
              width: 70%;
          }
          50% {
              width: 50%;
          }
      }
  
      @media (max-width: 500px) {
          .display_card {
              animation: none;
          }
          .display_card_shadow {
              animation: none;
          }
      }
  
      .animate-fade-in{
          opacity: 0;
          animation: fadeIn 0.3s ease forwards;
          animation-delay: 0.1s;
      }
  
  
      .animate-section-left {
          opacity: 0;
          animation: fadeInLeft 1s ease forwards;
          animation-delay: 0.3s;
      }
  
      .animate-section-center {
          opacity: 0;
          animation: fadeInUp 1s ease forwards;
          animation-delay: 0.6s;
      }
  
      .animate-section-right {
          opacity: 0;
          animation: fadeInRight 1s ease forwards;
          animation-delay: 0.9s;
      }
  
      @keyframes fadeInLeft {
          from {
              opacity: 0;
              transform: translateX(-50px);
          }
          to {
              opacity: 1;
              transform: translateX(0);
          }
      }
  
      @keyframes fadeInUp {
          from {
              opacity: 0;
              transform: translateY(50px);
          }
          to {
              opacity: 1;
              transform: translateY(0);
          }
      }
  
      @keyframes fadeInRight {
          from {
              opacity: 0;
              transform: translateX(50px);
          }
          to {
              opacity: 1;
              transform: translateX(0);
          }
      }
  
      @keyframes fadeIn {
          from {
              opacity: 0;
          }
          to {
              opacity: 1;
          }
        }
      
  
  
      
      @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
      }
      
      .inner-modal.closing {
        animation: fadeOut 0.3s ease forwards !important;
      }
      
      #innerModalBackdrop.closing {
        animation: fadeOut 0.3s ease forwards !important;
      }
      
  
      
      @keyframes fadeOut {
        from { opacity: 1; }
        to { opacity: 0; }
      }
  
      .cart-item {
        opacity: 1;
        transform: scale(1);
        transition: opacity 0.5s ease, transform 0.5s ease, left 0.5s ease;
    }
    
    @keyframes fadeInScale {
        from {
            opacity: 0;
            transform: scale(0.8);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }
    
    @keyframes fadeOutScale {
        from {
            opacity: 1;
            transform: scale(1);
        }
        to {
            opacity: 0;
            transform: scale(0.8) rotate(5deg);
        }
    }
    
    .fade-in {
        animation: fadeInScale 0.5s ease forwards;
    }
    
    .fade-out {
        animation: fadeOutScale 0.5s ease forwards;
    }
  
  
              
              @keyframes fadeIn {
                  from { opacity: 0; }
                  to { opacity: 1; }
              }
              
              .inner-modal.closing {
                  animation: fadeOut 0.3s ease forwards !important;
              }
              
              #innerModalBackdrop.closing {
                  animation: fadeOut 0.3s ease forwards !important;
              }
  
              
              @keyframes fadeOut {
                  from { opacity: 1; }
                  to { opacity: 0; }
              }
  
  
  
            .inner-modal.closing {
                animation: fadeOut 0.3s ease forwards !important;
            }
            
            #innerModalBackdrop.closing {
                animation: fadeOut 0.3s ease forwards !important;
            }
  
  
  
  .frame_display_hover {
    transition: all 0.3s ease;
  }
  
  @media (min-width: 992px) {
    .frame_display_hover:hover .frame_display {
      transform: scale(1.2);
      transition: transform 0.3s ease;
    }
  }
  
  .frame_display {
    transition: transform 0.3s ease;
  }
  
  
  .glow-effect {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
  }
  
  .glow-effect:before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0.1) 20%,
        transparent 60%
    );
    transform: rotate(45deg);
    animation: glow_button_effect 3s linear infinite;
    z-index: 1;
  }
  
  @media (min-width: 992px) {
    .glow-effect:hover {
      box-shadow: 0 0 20px var(--color_main_2);
      text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
    }
  }
  
  @keyframes glow_button_effect {
    0% {
        transform: translate(-100%, -100%) rotate(45deg);
    }
    100% {
        transform: translate(100%, 100%) rotate(45deg);
    }
  }
  
  
  
  
  
  
  
  
  
  
  
  .tutorial-step-container {
      position: relative;
  }
  
  .tutorial-step {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: calc(100% + 46px);
      width: 280px;
      z-index: 10001;
      opacity: 0;
      transition: opacity 0.3s ease;
  }
  
  
  .tutorial-step[data-step="2"] .tutorial-content:before {
      left: 59.5% !important;
  }
  .tutorial-step[data-step="2"] {
      left:0% !important;
  }
  
  .tutorial-step[data-step="3"] .tutorial-content:before {
      left: 82.5% !important;
  }
  .tutorial-step[data-step="3"] {
      left:-130% !important;
  }
  
  .tutorial-step[data-step="4"] .tutorial-content:before {
      display:none !important;
  }
  .tutorial-step[data-step="4"] {
      transform: translateX(-98%) !important;
  }
  
  @media (max-width: 992px) {
  
    .tutorial-step[data-step="1"] .tutorial-content:before {
        left: 61.5% !important;
    }
    .tutorial-step[data-step="1"] {
        left:-45% !important;
    }
  
    .tutorial-step[data-step="2"] .tutorial-content:before {
        left: 76.5% !important;
    }
    .tutorial-step[data-step="2"] {
        left:-176% !important;
    }
  
    .tutorial-step[data-step="3"] .tutorial-content:before {
        left: 93.5% !important;
    }
    .tutorial-step[data-step="3"] {
        left:-318% !important;
    }
  
    .tutorial-step[data-step="4"] .tutorial-content:before {
        display:none !important;
    }
    .tutorial-step[data-step="4"] {
        transform: translateX(-111%) !important;
    }
  }
  
  .tutorial-step.active {
      opacity: 1;
  }
  
  .tutorial-content {
      position: relative;
  }
  
  .tutorial-content:before {
      content: '';
      position: absolute;
      top: -8px;
      left: 50%;
      transform: translateX(-50%);
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-bottom: 8px solid var(--color_main);
  }
  
  .tutorial-backdrop {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.85);
      backdrop-filter: blur(4px);
      z-index: 10000;
      opacity: 0;
      transition: opacity 0.3s ease;
  }
  
  .highlight-element {
      position: relative;
      z-index: 10001;
      animation: pulse 2s infinite;
  }
  
  @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.05); }
      100% { transform: scale(1); }
  }
  
  .btn_skip, .btn_next {
      padding: 6px 12px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s ease;
      font-weight: 500;
      font-size: 0.9rem;
  }
  
  .btn_skip {
      background: transparent;
      color: rgba(255, 255, 255, 0.7);
      border: 1px solid rgba(255, 255, 255, 0.2);
  }
  
  @media (min-width: 992px) {
    .btn_skip:hover {
        background: rgba(255, 255, 255, 0.1);
        color: white;
    }
    .btn_next:hover {
        filter: brightness(1.1);
    }
  }
  
  .btn_next {
      background: var(--color_main);
      color: white;
  }
  
  
  
  
  
  .tutorial_3d_viewer:before {
      content: '';
      position: absolute;
      bottom: 19px;
      left: -8px;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-bottom: 8px solid white;
    }
  
  
  
  .tutorial_color_container {
    position: absolute;
    animation: tutorial_color_fade_in 0.3s ease-out;
    left:calc(100% + 110px);
    min-width:300px;
    bottom:76px;
  }
  
  .tutorial_color_container:before {
    content: '';
    position: absolute;
    bottom: 19px;
    left: -8px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid white;
  }
  
  .tutorial_color_content {
    backdrop-filter: blur(5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    max-width: 320px;
    border: 1px solid rgba(255,255,255,0.2);
  }
  
  .tutorial_color_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
  }
  
  .tutorial_color_header h4 {
    margin: 0;
    font-size: 1.2rem;
  }
  
  .tutorial_color_close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--color_main);
    padding: 0 5px;
    line-height: 1;
  }
  
  .tutorial_color_content p {
    color: var(--color_main);
    margin-bottom: 15px;
  }
  
  .tutorial_color_content ul {
    padding-left: 20px;
    margin-bottom: 15px;
  }
  
  .tutorial_color_content li {
    margin-bottom: 8px;
    color: var(--color_main);
  }
  
  .tutorial_color_footer {
    text-align: center;
    color: var(--color_main);
    font-style: italic;
  }
  
  @keyframes tutorial_color_fade_in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
  }
  
  
  
  
  
  
  
  
  
  
  
  .frame-container-exit {
      opacity: 0;
      transform: scale(0.8);
      transition: all 0.5s ease;
  }
  
  .frame-container-remove {
      height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow: hidden;
      transition: all 0.3s ease;
  }
  
  .frame_display{
      transition: 0.7s !important;
  }
  
  @media (min-width: 992px) {
    .inspire_frame_view:hover .frame_display{
        transform: scale(1.2);
    }
  }
  
  .inspire_container {
      max-width: 1500px;
      margin: 0 auto;
  }
  
  .frames_floating, .lightbox_floating {
      animation: frames_float 6s ease-in-out infinite;
  }
  
  @keyframes frames_float {
      0% { transform: translateY(0px); }
      50% { transform: translateY(-20px); }
      100% { transform: translateY(0px); }
  }
  
  .frames_glow, .lightbox_glow {
      position: relative;
      overflow: hidden;
  }
  
  .frames_glow::after, .lightbox_glow::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(
          45deg,
          transparent,
          rgba(255, 255, 255, 0.1),
          transparent
      );
      transform: rotate(45deg);
      animation: frames_glow_anim 3s linear infinite;
  }
  
  @media (min-width: 992px) {
    .frame_display_hover:hover .frame_display, .lightbox_display_hover:hover .lightbox_display {
        transform: scale(1.05);
        transition: transform 0.3s ease;
    }
  }
  
  .frame_display, .lightbox_display {
      transition: transform 0.3s ease;
  }
  
  /* Nuevas animaciones */
  .fade_in {
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.6s ease;
  }
  
  .fade_in.visible {
      opacity: 1;
      transform: translateY(0);
  }
  
  @media (min-width: 992px) {
    
    .slide_left {
        opacity: 0;
        transform: translateX(-100px);
        transition: all 0.8s ease;
    }
    
    .slide_right {
        opacity: 0;
        transform: translateX(100px);
        transition: all 2s ease;
    }
    
    .slide_up {
        opacity: 0;
        transform: translateY(50px);
        transition: all 0.8s ease;
    }
    
    .slide_down {
        opacity: 0;
        transform: translateY(-50px);
        transition: all 0.8s ease;
    }
    
    .slide_left.visible,
    .slide_right.visible,
    .slide_up.visible,
    .slide_down.visible {
        opacity: 1;
        transform: translate(0);
    }
    
    .scale_in {
        opacity: 0;
        transform: scale(0.8);
        transition: all 0.6s ease;
    }
    
    .scale_in.visible {
        opacity: 1;
        transform: scale(1);
    }
    
    .delay_1 { transition-delay: 0.2s; }
    .delay_2 { transition-delay: 0.4s; }
    .delay_3 { transition-delay: 0.6s; }
    .delay_4 { transition-delay: 0.8s; }
    .delay_5 { transition-delay: 1s; }
  }
  
  .left-0{
    left:0;
  }
  
  .right-0{
    right:0;
  }
  
  
  
  
  .top-frame-badge {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 10;
      padding: 5px 10px;
      border-radius: 5px;
      font-weight: bold;
      font-size: 0.8rem;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  }
  
  .new-badge {
      background: linear-gradient(45deg, #ff5e62, #ff9966);
      color: white;
  }
  
  .top-badge {
      background: linear-gradient(45deg, #fffd00, #ffb000);
      color: #000000d9;
  }
  
  .filter-item {
      cursor: pointer;
      transition: all 0.3s ease;
      padding: 10px 15px;
      border-radius: 8px;
  }
  
  @media (min-width: 992px) {
    .filter-item:hover, .filter-item.active {
        background-color: var(--color_main_2);
        transform: scale(1.05);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }
  }
  
  .filter-item.active {
      background: linear-gradient(45deg, var(--color_main), var(--color_main_2));
      color: white;
      font-weight: bold;
  }
  
  .champion-filters-container {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
  }
  
  .champion-filters-container .filter-item {
      padding: 5px 10px;
      font-size: 0.9rem;
  }
  
  .vote-btn {
      transition: all 0.3s ease;
      cursor: pointer;
  }
  
  @media (min-width: 992px) {
    .vote-btn:hover {
        transform: scale(1.2);
    }
  }
  
  
  
  .vote-btn.voted {
      color: var(--color_main_4);
  }
  
  .accordion-button {
      background-color: var(--color_main_2) !important;
      color: white !important;
  }
  
  .accordion-button:not(.collapsed) {
      background-color: var(--color_main) !important;
      color: white !important;
  }
  
  .search-container {
      position: relative;
  }
  
  .search-container .fa-search {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: #6c757d;
  }
  
  .search-input {
      padding-left: 40px;
      background-color: var(--color_main_2);
      border: none;
      color: white;
  }
  
  .search-input::placeholder {
      color: rgba(255, 255, 255, 0.6);
  }
  
  .search-input:focus {
      background-color: var(--color_main);
      box-shadow: none;
      border-color: var(--color_main_3);
      color: white;
  }
  
  /* Estilos para el dropdown de campeones */
  .champions-dropdown {
      max-height: 300px;
      overflow-y: auto;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 8px;
      padding: 10px;
  }
  
  .champions-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 10px;
  }
  
  .champion-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
      background: rgba(255, 255, 255, 0.1);
  }
  
  @media (min-width: 992px) {
    .champion-item:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: scale(1.02);
    }
  }
  
  .champion-item.selected {
      background: var(--color_main);
  }
  
  .champion-item img {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      object-fit: cover;
  }
  
  .selected-champion {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 5px 10px;
      background: var(--color_main);
      border-radius: 20px;
      margin: 2px;
  }
  
  .selected-champion img {
      width: 24px;
      height: 24px;
      border-radius: 50%;
  }
  
  .selected-champion .remove-champion {
      cursor: pointer;
      margin-left: 5px;
      opacity: 0.7;
      transition: opacity 0.3s ease;
  }
  
  @media (min-width: 992px) {
    .selected-champion .remove-champion:hover {
        opacity: 1;
    }
  }
  
  /* Estilos para los placeholders */
  .placeholder-glow {
      animation: placeholder-glow 2s ease-in-out infinite;
  }
  
  .placeholder {
      display: inline-block;
      min-height: 1em;
      vertical-align: middle;
      cursor: wait;
      opacity: 0.5;
  }
  
  @keyframes placeholder-glow {
      50% {
          opacity: 0.2;
      }
  }
  
  /* Asegurar que los contenedores mantengan su tamaño */
  .inspire_frame_view {
      min-height: 450px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }
  
  .frame_display {
      margin: 0 auto;
  }
  
  /* Estilos para el botón de like */
  .vote-btn-container {
      position: relative;
      display: inline-block;
  }
  
  .vote-btn {
      transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      padding: 5px 10px;
      border-radius: 50%;
  }
  
  @media (min-width: 992px) {
    .vote-btn:hover {
        transform: scale(1.2);
        background: rgba(255, 255, 255, 0.1);
    }
  }
  
  .vote-btn.voted {
      color: var(--color_main_4);
      animation: likeAnimation 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  
  @media (min-width: 992px) {
    .vote-btn.voted:hover {
        background: rgba(var(--color_main_4_rgb), 0.1);
    }
  }
  
  /* Animación de partículas al dar like */
  .like-particle {
      position: absolute;
      pointer-events: none;
      animation: particleAnimation 0.8s ease-out forwards;
      font-size: 1.2rem;
      opacity: 0;
  }
  
  @keyframes likeAnimation {
      0% { transform: scale(1); }
      50% { transform: scale(1.4); }
      100% { transform: scale(1.2); }
  }
  
  @keyframes particleAnimation {
      0% {
          transform: translate(0, 0) scale(1);
          opacity: 1;
      }
      100% {
          transform: translate(var(--tx), var(--ty)) scale(0);
          opacity: 0;
      }
  }
  
  /* Efecto de brillo al votar */
  .vote-glow {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 0;
      height: 0;
      background: radial-gradient(circle, var(--color_main_4) 0%, transparent 70%);
      border-radius: 50%;
      opacity: 0;
      pointer-events: none;
      transition: all 0.3s ease;
  }
  
  .vote-glow.active {
      width: 50px;
      height: 50px;
      opacity: 0.3;
      animation: glowPulse 0.5s ease-out;
  }
  
  @keyframes glowPulse {
      0% { transform: translate(-50%, -50%) scale(0); opacity: 0.5; }
      100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
  }
  
  /* Efectos para los cuadros del Top del Mes */
  .top-frame {
      position: relative;
      overflow: hidden;
      transition: transform 0.3s ease;
  }
  
  
  /* Efecto de corona flotante */
  .top-crown {
      position: absolute;
      top: 11px;
      right: 15px;
      font-size: 2rem;
      color: #ffd700;
      text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
      animation: crownFloat 2s ease-in-out infinite;
      z-index: 10;
  }
  
  /* Efecto de partículas brillantes */
  .sparkle {
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #ffcb00;
      opacity: 0;
      pointer-events: none;
      animation: sparkleAnimation 2s linear infinite;
  }
  
  /* Badge de posición mejorado */
  .top-position-badge {
      position: absolute;
      top: 10px;
      left: 10px;
      width: 40px;
      height: 40px;
      background: linear-gradient(135deg, #ffd700, #ffa500);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      font-weight: bold;
      color: white;
      box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
      z-index: 10;
      animation: badgePulse 2s infinite;
  }
  
  /* Animaciones */
  @keyframes borderGlow {
      0% { background-position: 0% 50%; }
      100% { background-position: 200% 50%; }
  }
  
  @keyframes shimmer {
      0% { left: -100%; }
      100% { left: 200%; }
  }
  
  @keyframes crownFloat {
      0%, 100% { transform: translateY(0) rotate(-10deg); }
      50% { transform: translateY(-5px) rotate(5deg); }
  }
  
  @keyframes sparkleAnimation {
      0% { transform: translate(0, 0) scale(0); opacity: 0; }
      50% { opacity: 1; }
      100% { transform: translate(var(--tx, 0), var(--ty, 0)) scale(1); opacity: 0; }
  }
  
  @keyframes badgePulse {
      0% { transform: scale(1); box-shadow: 0 0 20px rgba(255, 215, 0, 0.5); }
      50% { transform: scale(1.1); box-shadow: 0 0 30px rgba(255, 215, 0, 0.7); }
      100% { transform: scale(1); box-shadow: 0 0 20px rgba(255, 215, 0, 0.5); }
  }
  
  /* Efecto de hover */
  /* .top-frame:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  } */
  
  /* Estilos específicos por posición */
  .top-frame[data-position="1"] {
      /* transform: scale(1.05); */
      z-index: 4;
  }
  
  .top-frame[data-position="1"]::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, 
        #ffd700, /* Dorado */
        #ffa500, /* Naranja */
        #ff4500, /* Rojo anaranjado */
        #ffd700  /* Dorado de nuevo */
    );
    
    z-index: -1;
    border-radius: inherit;
    animation: borderGlow 3s linear infinite;
    opacity: 0.9;
  }
  
  /* .top-frame[data-position="2"]::before {
      background: linear-gradient(45deg, #c0c0c0, #a9a9a9, #808080, #c0c0c0);
      opacity: 0.8;
  }
  
  .top-frame[data-position="3"]::before {
      background: linear-gradient(45deg, #cd7f32, #b87333, #a0522d, #cd7f32);
      opacity: 0.7;
  } */
  
  /* Estilo especial para el botón Utilizar Plantilla del #1 */
  .top-frame[data-position="1"] .btn {
      background: linear-gradient(45deg, #ffd700, #ffa500) !important;
      border: none;
      box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
      transition: all 0.3s ease;
  }
  
  @media (min-width: 992px) {
    .top-frame[data-position="1"] .btn:hover {
        transform: scale(1.05);
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
    }
  }
  
  
  
      /* Animación de entrada */
      @keyframes frameEnter {
          from {
              opacity: 0;
              transform: translateY(20px) scale(0.95);
          }
          to {
              opacity: 1;
              transform: translateY(0) scale(1);
          }
      }
  
      @keyframes frameEnter-opacity {
          from {
              opacity: 0;
          }
          to {
              opacity: 1;
          }
      }
      /* Animación de salida */
      @keyframes frameExit {
          from {
              opacity: 1;
              transform: translateY(0) scale(1);
          }
          to {
              opacity: 0;
              transform: translateY(-20px) scale(0.95);
          }
      }
  
      /* Clases para las animaciones */
      .frame-enter {
          animation: frameEnter-opacity 0.3s ease forwards;
      }
  
      .frame-exit {
          animation: frameExit 0.3s ease forwards;
      }
  
      /* Retrasar la entrada de cada frame secuencialmente */
      .frame-enter-delay-1 { animation-delay: 0.1s; }
      .frame-enter-delay-2 { animation-delay: 0.2s; }
      .frame-enter-delay-3 { animation-delay: 0.3s; }
      .frame-enter-delay-4 { animation-delay: 0.4s; }
  
  
  
  .badge_info{
    background:rgb(192, 192, 192) !important;
    padding:2px 10px !important;
    color:white !important;
    width:fit-content !important;
  }
  
  .badge_zetha{
    background:rgb(114 131 255) !important;
    padding:2px 10px !important;
    color:white !important;
    width:fit-content !important;
    text-shadow:0 0 10px rgba(0, 0, 0, 0.5) !important;
  }
  
  
  @media (min-width: 768px) {
    .checkout_container_global{
      min-width:500px !important;
      
    }
  }
  
  @media (max-width: 768px) {
    .checkout_container_global{
      min-width:330px !important;
      width:335px !important;
    }
  }
  
  .height_bg_menu{
    height:68px !important;
  }
  
  @media (max-width: 992px) {
    .height_bg_menu{
      height:40px !important;
    }
  }
  
  .pos_logo_menu{
    left:10px;
    top:0px;
    width:80px;
  }
  
  @media (max-width: 992px) {
    .pos_logo_menu{
      left: 0px !important;
      top: 0px !important;
      width: 38px !important;
    }
  }
  
  .bottom_menu_submenu{
    bottom:-37px;
  }
  
  @media (min-width: 992px) {
    .position-lg-absolute{
      position:absolute !important;
    }
  }
  
  .w_h_hexa_right_menu{
    width:69px;
    height:69px;
  }
  
  @media (min-width: 992px) {
    .w_h_hexa_right_menu{
      width:69px;
      height:69px;
    }
    .fs-lg-4{
      font-size:1.5rem !important;
    }
    .fs-lg-3{
      font-size:calc(1.3rem + .6vw)!important;
    }
    .fs-lg-6{
      font-size:1rem !important;
    }
  }
  
  .h_display_global{
    height:798px !important;
  }
  
  .h_display_global_lightbox{
    height:798px !important;
  }
  
  @media (max-width: 992px) {
    .h_display_global{
      height:1380px !important;
    }
    .h_display_global_lightbox{
      height:1050px !important;
    }
  }
  
  .mt-6{
    margin-top:4rem !important;
  }
  .mt-7{
    margin-top:6rem !important;
  }
  
  @media (min-width: 992px) {
    .mt-lg-6{
      margin-top:4rem !important;
    }
    .mt-lg-7{
      margin-top:6rem !important;
    }
  }
  
  @media(min-width: 570px){
  
    .mt-sm-7{
      margin-top:6rem !important;
    }
  }
  
  @media (max-width: 992px) {
    .w_h_hexa_custom_menu{
      width:33px !important;
      height:33px !important;
    }
  
    .w_h_hexa_custom_menu img{
      width:20px !important;
      height:20px !important;
    }
  
    .mt_custom_menu{
      margin-top:-7px !important;
    }
  }
  
  .w_h_hexa_custom_buttons{
    width:69px !important;
    height:69px !important;
  }
  
  .h_grid_custom{
    max-height:320px !important;
  }
  
  .mt_custom_buttons{
    /* margin-top:-12px !important; */
  }
  
  @media (max-width: 992px) {
    .w_h_hexa_custom_buttons{
      width:50px !important;
      height:50px !important;
    }
    .h_grid_custom{
      max-height:206px !important;
    }
    .mt_custom_buttons{
      /* margin-top:-6px !important; */
    }
  }
  
  .fs_title_extra_content_1{
    font-size:2rem !important;
  }
  
  .fs_title_extra_content_2{
    font-size:4rem !important;
  }
  
  @media (min-width: 992px) {
    .fs-lg-5{
      font-size:1.25rem !important;
    }
  }
  
  
  
  @media (max-width: 992px) {
    .fs_title_extra_content_1{
      font-size:1.2rem !important;
    }
    .fs_title_extra_content_2{
      font-size:3rem !important;
    }
  
  
  }
  
  
  
  
  /* Estilos para el menú móvil */
  @media (max-width: 991.98px) {
    .menu_right_container .mobile_menu_options {
        position: absolute;
        right: -320px; /* Inicialmente oculto */
        transition: transform 0.3s ease;
        display: flex;
        gap: 0.5rem;
    }
  
    .menu_right_container.menu_open .mobile_menu_options {
        transform: translateX(-400px); /* Mostrar los botones */
    }
  
    /* Rotación del ícono de opciones */
    .menu_right_container .options_icon {
        transition: transform 0.3s ease;
    }
  
    .menu_right_container.menu_open .options_icon {
        transform: rotate(180deg);
    }
  }
  
  
  .w_menu_steps{
    min-width:27%;
    max-width:27%;
    width: 27%;
  }
  
  .bottom_top_chat_modal{
    bottom:20px !important;
  }
  
  @media (max-width: 992px) {
    .w_menu_steps{
      min-width:17% !important;
      width: 17% !important;
    }
    .bottom_top_chat_modal{
      top:19px !important;
      bottom:auto !important;
    }
  
    .w_steps_responsive{
      min-width:100% !important;
      width: min-content;
    }
  
    .d_select_responsive{
      display:flex !important;
      align-items:center !important;
      flex-grow:1 !important;
      gap:0.8rem !important;
    }
  }
  
  .h_checkout_container{
    height:calc(100dvh - 40px) !important;
  }
  
  @media (max-width: 992px) {
    .h_checkout_container{
      height:calc(100vh - 80px) !important;
    }
  } 
  
  .top_right_coupon{
    top:10px !important;
    right:10px !important;
  }
  
  @media (max-width: 992px) {
    .top_right_coupon{
      top:0px !important;
      right:-16px !important;
      transform:scale(0.8) !important;
    }
  
    .shipping-toggle-switch, .flex-payment-toggle-switch{
      height:12px !important;
    }
  
    .shipping-toggle-slider:before, .flex-payment-toggle-slider:before{
      height: 10px !important;
      width: 10px !important;
      left: 2px !important;
      bottom: 1px !important;
    }
  
    #shipping_priority_tooltip, #flex_payment_tooltip{
      width:12px !important;
      height:12px !important;
      font-size:0.6rem !important;
    }
  }
  
  
  @media(min-width: 992px){
    .fs-lg-7{
      font-size:0.8rem !important;
      line-height:1.1 !important;
    }
  }
  
  @media(max-width: 992px){
    .fs-xs-7{
      font-size:0.8rem !important;
      line-height:1.1 !important;
    }
  }
  
  .max_h_cart_container{
    max-height:170px !important;
  }
  
  @media (max-width: 992px) {
    .max_h_cart_container{
      max-height:110px !important;
    }
  }
  
  .style_cart_item{
    transform:scale(0.2);top: -228px;left: -128px;background:white; border-radius:40px;
  }
  
  @media (max-width: 992px) {
    .style_cart_item{
      background:white !important;
      border-radius:40px !important;
      transform: scale(0.15) !important;
      top: -244px !important;
      left: -138px !important;
    }
  }
  
  .style_cart_lightbox{
    /* transform: scale(0.35); */
    position: absolute;
    top: -227px;
    left: -127px;
  }
  
  @media (max-width: 992px) {
    .style_cart_lightbox{
      transform: scale(0.15) !important;
      position: absolute;
      top: -244px !important;
      left: -136px !important;
    }
  }
  .transform_lightbox{
    transform: scale(1.5) rotate(90deg);
      top: -200px;
      left: 0px;
      position: relative;
  }
  
  .transform_lightbox_no_preview{
    transform: scale(1.5) rotate(90deg);
    transition: 0.3s;
    z-index: 1;
    padding: 6% 5% 1% 12%;
    top: 193px;
    left: -7px;
    height: 133px;
  }
  
  .p_title_lightbox{
    padding:0px 60px !important;
  }
  
  .w_h_light_option{
    width: 45px !important;
    height: 45px !important;
  }
  
  .w_h_lightbox_display_container{
    width: 569px !important;
    height: 651.88px !important;
  }
  
  
  
  @media (max-width: 992px) {
    .p_title_lightbox{
      padding:0px 10px !important;
    }
    .w_h_light_option{
      width: 35px !important;
      height: 35px !important;
    }
    .w_h_lightbox_display_container{
      width: 100% !important;
      height: 430px !important;
    }
  }
  
  @media (max-width: 992px) {
    
    .transform_lightbox_no_preview{
      transform: scale(1.5) rotate(90deg);
      transition: 0.3s;
      z-index: 1;
      padding: 6% 5% 1% 12%;
      top: 193px;
      left: -7px;
      height: 133px;
    }
  }
  
  .mb_box_prices{
    margin-bottom:43px;
  }
  
  @media (max-width: 992px) {
    .mb_box_prices{
      margin-bottom:37px !important;
    }
  
    .completed-step::after{
      content: "" !important;
    }
  }
  
  
  
  @media (max-width: 992px) {
    .icon_fast_shipping{
      font-size:0.6rem !important;
      margin-top:2px !important;
    }
    .icon_flex_payment{
      font-size:0.6rem !important;
    }
  
    #country_dropdown{
      min-width:236px !important;
    }
  
    .h_readmore_flex_payment{
      height:12px !important;
    }
  }
  
  .h_frame_add_info{
    height:317px !important;
  }
  
  .height_calc_modal_into_cart_item{
    height:calc(100% - 80px) !important;
  }
  
  @media (max-width: 992px) {
    .h_frame_add_info{
      height:267px !important;
    }
    .height_calc_modal_into_cart_item{
      height:calc(100% - 56px) !important;
    }
  }
  
  .w_container_box_dedication{
    width:157px !important;
  }
  
  .w_box_dedication{
    width:150px !important;
  }
  
  @media (max-width: 992px) {
    .w_container_box_dedication{
      width:104px !important;
    }
    .w_box_dedication{
      width:88px !important;
    }
  }
  
  #dedication-text-preview{
    margin-top:193px;
    font-size: 0.6rem !important;
    line-height: 1.1 !important;
    transform: rotateY(309deg) rotateX(359deg);
  }
  
  #partner_dedication_text{
    perspective: 400px;
    padding:0px 27px 0px 9px;
  }
  
  @media (max-width: 992px) {
    #dedication-text-preview{
      margin-top:100px !important;
      font-size: 0.4rem !important;
      line-height: 1.1 !important;
      transform:rotateY(304deg) rotateX(359deg) !important;
      margin-left:-6px !important;
    }
  
    #partner_dedication_text{
      perspective: 400px;
      padding:0px 12px 0px 9px;
    }
  }
  
  .w_min_container_gift{
    min-width:190px !important;
    height:292px !important;
  }
  
  .w_max_gift{
    max-width:190px !important;
  }
  
  @media (max-width: 992px) {
    .w_min_container_gift{
      min-width:126px !important;
      height:252px !important;
    }
    .w_max_gift{
      max-width:126px !important;
    }
  }
  
  .w_login_profile_modal{
    min-width:500px;
    max-width:500px;
    height:calc(100vh - 116px);
    /* clip-path:polygon(0 0, 100% 0, 100% 13%, 100% 100%, 90% 96%, 0 96%); */
  }
  
  .w_min_preview_item_profile{
    min-width:64px !important;
  }
  
  @media (max-width: 992px) {
    .w_login_profile_modal{
      min-width:330px;
      max-width:330px;
      height:calc(100vh - 137px);
      /* clip-path:polygon(0 0, 100% 0, 100% 13%, 100% 100%, 90% 96%, 0 96%); */
    }
  
    #loginModal, #adminModal{
      bottom:68px !important;
    }
  
    .w_min_preview_item_profile{
      min-width:48px !important;
    }
  }
  
  .h_modal_order{
    height:80% !important;
  }
  
  @media (max-width: 992px) {
    .h_modal_order{
      height:85% !important;
    }
  }
  
  .h_max_edit_config_admin{
    max-height:225px !important;
  }
  
  .h_max_shipping_info{
    max-height:160px !important;
  }
  
  @media (max-width: 992px) {
    .h_max_edit_config_admin{
      max-height:196px !important;
    }
  
    .h_max_shipping_info{
      max-height:108px !important;
    }
  }
  
  @media (min-width: 992px) {
    .h_min_order_preview_item{
      min-height:136px !important;
    }
  }
  
  
  .bg_inspire_styles{
    mask-image:linear-gradient(to bottom, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.3) 100%);
    z-index:1;
    top:0;
    left:0;
    width:100%;
    height:100%;
    min-height:3427px;
    background-image: url('/img/bgs/bg_extra_content_bases_large_2.webp');
    background-size: cover;
    background-position: top;
    position:absolute;
  }
  
  @media (max-width: 992px) {
    .bg_inspire_styles{
      mask-image:linear-gradient(to bottom, rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.3) 100%);
      width:100vw !important;
      height:100vh !important;
      min-height: 100vh !important;
      background-image: url('/img/bgs/bg_extra_content_bases_large_2.webp');
      background-size: cover;
      background-position: top;
      position:fixed !important;
    }
  }
  
  
  
  
  
  
  
  
      .frames_floating, .lightbox_floating {
          animation: frames_float 6s ease-in-out infinite;
      }
  
      @keyframes frames_float {
          0% { transform: translateY(0px); }
          50% { transform: translateY(-20px); }
          100% { transform: translateY(0px); }
      }
  
      .frames_glow, .lightbox_glow {
          position: relative;
          overflow: hidden;
      }
  
      .frames_glow::after, .lightbox_glow::after {
          content: '';
          position: absolute;
          top: -50%;
          left: -50%;
          width: 200%;
          height: 200%;
          background: linear-gradient(
              45deg,
              transparent,
              rgba(255, 255, 255, 0.1),
              transparent
          );
          transform: rotate(45deg);
          animation: frames_glow_anim 3s linear infinite;
      }
  
      @keyframes frames_glow_anim {
          0% { transform: translateX(-100%) rotate(45deg); }
          100% { transform: translateX(100%) rotate(45deg); }
      }
  
      .frames_hexagon {
          clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
      }
  
      .frames_feature_card {
          transition: all 0.3s ease;
          border: 2px solid transparent;
      }
  
      @media (min-width: 992px) {
        .frames_feature_card:hover {
            transform: translateY(-10px);
            border-color: var(--color_main_2);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }
      }
  
      .frames_parallax_bg {
          position: relative;
          overflow: hidden;
      }
  
      @keyframes frames_parallaxMove {
          0% { transform: scale(1.1) translateY(0); }
          100% { transform: scale(1.1) translateY(-30px); }
      }
  
      .frames_stat_counter {
          font-size: 3rem;
          font-weight: bold;
          background: linear-gradient(19deg, white, var(--color_main_4));
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
      }
  
      .frames_champion_grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
          gap: 1rem;
      }
  
      .frames_champion_card {
          position: relative;
          overflow: hidden;
          border-radius: 10px;
          transition: all 0.3s ease;
      }
  
      @media (min-width: 992px) {
        .frames_champion_card:hover img {
            transform: scale(1.1);
        }
      }
  
      .frames_champion_card img {
          transition: transform 0.3s ease;
      }
  
      .frames_animated_border, .lightbox_animated_border {
          position: relative;
      }
  
      .frames_animated_border::after, .lightbox_animated_border::after {
          content: '';
          position: absolute;
          inset: 0;
          border: 2px solid var(--color_main_2);
          border-radius: 50%;
          animation: frames_borderPulse 2s infinite;
      }
  
      @keyframes frames_borderPulse {
          0% { transform: scale(1); opacity: 1; }
          50% { transform: scale(1.05); opacity: 0.5; }
          100% { transform: scale(1); opacity: 1; }
      }
  
      .frames_scroll_reveal, .lightbox_scroll_reveal {
          opacity: 0;
          transform: translateY(30px);
          transition: all 0.6s ease;
      }
  
      .frames_scroll_reveal.frames_visible, .lightbox_scroll_reveal.lightbox_visible {
          opacity: 1;
          transform: translateY(0);
      }
  
      .object_slide_left {
          opacity: 0;
          transform: translateX(-100px);
          transition: all 0.5s ease;
      }
  
      .object_slide_right {
          opacity: 0;
          transform: translateX(100px);
          transition: all 0.5s ease;
      }
  
      .object_slide_up {
          opacity: 0;
          transform: translateY(50px);
          transition: all 0.5s ease;
      }
  
      .object_visible {
          opacity: 1;
          transform: translate(0);
      }
  
      .object_delay_1 { transition-delay: 0.2s; }
      .object_delay_2 { transition-delay: 0.4s; }
      .object_delay_3 { transition-delay: 0.6s; }
      .object_delay_4 { transition-delay: 0.8s; }
  
  
  
      /* Estilos para el carousel con fade */
      .carousel-fade .carousel-item {
          opacity: 0;
          transition: opacity 0.5s ease-in-out;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          display: block;
      }
  
      .carousel-fade .carousel-item.active {
          position: relative;
          opacity: 1;
      }
  
      /* Eliminar la animación de slide por defecto */
      .carousel-fade .carousel-item-next.carousel-item-start,
      .carousel-fade .carousel-item-prev.carousel-item-end {
          transform: translateX(0);
      }
  
      .carousel-fade .active.carousel-item-start,
      .carousel-fade .active.carousel-item-end {
          transform: translateX(0);
      }
  
  
  
  
  /* Home */
  
    .bottom_coming_soom_msg{
      bottom:50%;
    }
  
    .w_h_icon_lol{
      width:60px;
      height:60px;
    }
  
    .pt_responsive_home_content{
      padding-top:194px !important;
    }
  
    .w_h_circle_icon_lol{
      width:80px;
      height:80px;
      left:-40px;
    }
  
    .ml_titles_product_home{
      margin-left:58px;
    }
  
    .mask_img_product_home{
      right:20px;top:-34px;
      -webkit-mask-image: linear-gradient(to bottom, black 103px, transparent 103px); 
      mask-image:         linear-gradient(to bottom, black 103px, transparent 103px); 
    }
    
    .w_h_3d_home_content{
      margin-left:24px;width:290px; height:550px; margin-top:50px;
    }
  
  
  
  
    @media (max-width: 992px) {
  
      .overflow_h_home_content_3d{
        overflow:hidden !important;
      }
  
      .w_h_3d_home_content{
        width:250px;
        height:390px;
        margin-left:0 !important;
        margin-top:0 !important;
        background: #ffffff1f;
        border-radius: 20px;
      }
  
  
      .mask_img_product_home{
        right:20px;top:-32px;
        -webkit-mask-image: linear-gradient(to bottom, black 76px, transparent 76px); 
        mask-image:         linear-gradient(to bottom, black 76px, transparent 76px); 
      }
  
  
      .bottom_coming_soom_msg{
        bottom:40% !important;
      }
      .ml_titles_product_home{
        margin-left:78px;
      }
      .w_h_icon_lol{
        width:40px;
        height:40px;
      }
  
      .w_h_circle_icon_lol{
        width:60px;
        height:60px;
        left:5px !important;
      }
  
      .pt_responsive_home_content{
        padding-top:50px !important;
      }
  
      .w_min_product_home{
        min-width:125px !important;
      }
    }
  
    .position_bg_home{
      position:absolute;
      height:100%;
    }
    @media (max-width: 992px) {
      .position_bg_home{
        min-height:900px !important;
        height:100vh !important;
        position:fixed !important;
      }
    }
  
    @media (min-width: 992px) {
      .h_max_min_bg_home{
        min-height:878px !important;
        max-height:878px !important;
      }
      
    }
  
  
  
  
  /* */
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  /* Light theme */
  .switch,
  .switch__input {
      display: block;
  }
  .switch {
      border-radius: 1.5em;
      box-shadow: 0 0.125em 0.25em hsla(0,0%,0%,0.4);
      position: relative;
      width: 4.5em;
      height: 3em;
      perspective: 10em;
  }
  .switch span {
      display: block;
  }
  .switch > span {
      border-radius: 0.5rem;
      z-index: 1;
  }
  .switch__surface-glare,
  .switch__inner,
  .switch__inner-glare,
  .switch__rocker-sides,
  .switch__rocker-sides-glare,
  .switch__rocker,
  .switch__rocker-glare,
  .switch__light {
      transition: transform var(--trans-dur) var(--trans-timing);
  }
  .switch__surface {
      background-color: hsl(var(--hue),10%,83%);
      overflow: hidden;
      width: 100%;
      height: 100%;
  }
  .switch > .switch__surface {
      z-index: 0;
  }
  .switch__surface-glare {
      background-image: radial-gradient(50% 50% at center,hsla(var(--hue),10%,90%,1),hsla(var(--hue),10%,90%,0));
      width: 3em;
      height: 3em;
      transform: translate(0,0.125em);
  }
  .switch__input {
      background-color: hsl(222.35deg 45.95% 92.75%);
      border-radius: 0.5em;
      box-shadow: 0 0 0 0.125em hsla(var(--hue),90%,50%,0);
      outline: transparent;
      position: absolute;
      top: 0.0625em;
      left: 0.0625em;
      width: calc(100% - 0.125em);
      height: calc(100% - 0.125em);
      transition: box-shadow 0.15s linear;
      z-index: 1;
      -webkit-appearance: none;
      appearance: none;
      -webkit-tap-highlight-color: transparent;
  }
  .switch__input:focus-visible {
      box-shadow: 0 0 0 0.125em hsla(var(--hue),90%,50%,1);
  }
  .switch__inner {
      background-color: hsl(var(--hue),10%,83%);
      overflow: hidden;
      position: absolute;
      inset: 0.5em;
      transform: translate(0.125em,0);
  }
  .switch__inner-glare {
      background-image: radial-gradient(50% 50% at center,hsla(var(--hue),10%,90%,1),hsla(var(--hue),10%,90%,0));
      position: absolute;
      width: 2em;
      height: 2em;
      transform: translate(100%,-0.5em);
  }
  .switch__inner-shadow {
      box-shadow: 0 0.125em 0.25em hsla(0,0%,0%,0.4);
      position: absolute;
      inset: 0.5em;
  }
  .switch__rocker-shadow {
      box-shadow: 0 0.125em 0.25em hsla(0,0%,0%,0.15);
      position: absolute;
      top: 0.5625em;
      right: 0.5625em;
      bottom: 0.5625em;
      left: 0.75em;
  }
  .switch__rocker-sides {
      background-color: hsl(var(--hue),10%,80%);
      overflow: hidden;
      position: absolute;
      inset: 0.5em;
      transform: rotateY(-20deg) translateZ(0.5em);
      transform-style: preserve-3d;
  }
  .switch__rocker-sides-glare {
      background-image: linear-gradient(90deg,hsla(var(--hue),10%,85%,0),hsla(var(--hue),10%,85%,1),hsla(var(--hue),10%,85%,0));
      position: absolute;
      width: 200%;
      height: 100%;
  }
  .switch__rocker {
      background-color: hsl(0deg 0.62% 71.31%);
      overflow: hidden;
      position: absolute;
      inset: 0.5625em;
      transform: rotateY(-20deg) translateZ(0.5em);
      transform-style: preserve-3d;
  }
  .switch__rocker-glare {
      background-image: linear-gradient(120deg,hsla(var(--hue),10%,85%,0) 25%,hsla(var(--hue),10%,85%,1) 50%,hsla(var(--hue),10%,85%,0) 75%);
      position: absolute;
      width: 100%;
      height: 100%;
      transform: translateX(-33%);
  }
  .switch__light {
      background-image: linear-gradient(-45deg,hsl(var(--hue),10%,60%) 30%,hsl(var(--hue),10%,80%));
      box-shadow: 0 0 max(1px,0.05em) hsla(var(--hue),10%,10%,0.3) inset;
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0.5em;
      height: 0.5em;
      transform: translate(-50%,-50%) rotateY(-20deg) translateX(1.125em) translateZ(0.51em);
  }
  .switch__light-inner {
      background-color: hsl(133,90%,50%);
      box-shadow:
          0 0 max(1px,0.05em) hsla(var(--hue),10%,10%,0.3) inset,
          0 0 0.25em hsl(133,90%,50%);
      border-radius: 50%;
      opacity: 0;
      width: 100%;
      height: 100%;
      transition: opacity var(--trans-dur) var(--trans-timing);
  }
  
  
  /* ��On�� state */
  .switch__input:checked ~ .switch__surface .switch__surface-glare {
      transform: translate(3em,0.125em);
  }
  .switch__input:checked ~ .switch__inner {
      transform: translate(-0.125em,0);
  }
  .switch__input:checked ~ .switch__inner .switch__inner-glare {
      transform: translate(0,-0.5em);
  }
  .switch__input:checked ~ .switch__rocker {
      transform: rotateY(20deg) translateZ(0.5em);
  }
  .switch__input:checked ~ .switch__rocker .switch__rocker-glare {
      transform: translateX(33%);
  }
  .switch__input:checked ~ .switch__rocker-sides {
      transform: rotateY(20deg) translateZ(0.5em);
  }
  .switch__input:checked ~ .switch__rocker-sides .switch__rocker-sides-glare {
      transform: translateX(-50%);
  }
  .switch__input:checked ~ .switch__light {
      transform: translate(-50%,-50%) rotateY(20deg) translateX(1.125em) translateZ(0.51em);
  }
  .switch__input:checked ~ .switch__light .switch__light-inner {
      opacity: 1;
  }
  
  @media(min-width: 992px) {
    .text-lg-nowrap{
      text-wrap: nowrap !important;
    }
  }
  
  /* -------------------------------------------------------------------------------------- */
  
  /* Estilos para el sistema de filtros personalizado */
  .filter-container {
    background: linear-gradient(135deg, var(--color_main_3) 0%, rgba(49, 59, 124, 0.3) 100%);
    border: 2px solid var(--color_main_4);
    border-radius: 15px;
    padding: 0;
    overflow: hidden;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  }
  
  .filter-header {
    background: linear-gradient(135deg, var(--color_main_2) 0%, var(--color_main) 100%);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }
  
  .filter-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
  }
  
  .filter-header:hover::before {
    left: 100%;
  }
  
  .filter-header:hover {
    background: linear-gradient(135deg, var(--color_main) 0%, var(--color_main_2) 100%);
  }
  
  .filter-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .filter-header-icon {
    color: white;
    font-size: 1.1rem;
  }
  
  .filter-header-title {
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }
  
  .filter-header-right {
    display: flex;
    align-items: center;
  }
  
  .filter-collapse-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
  }
  
  .filter-collapse-icon {
    color: white;
    font-size: 0.8rem;
    transition: transform 0.3s ease;
  }
  
  .filter-header:hover .filter-collapse-indicator {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
  }
  
  .filter-content {
    padding: 20px;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .filter-container.filter-expanded .filter-content {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.5rem;
    margin-bottom: 20px;
  }
  
  @media (max-width: 768px) {
    .filter-grid {
      grid-template-columns: 1fr;
      gap: 15px;
    }
  }
  
  .filter-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .filter-label {
    color: white;
    font-size: 0.8rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
  }
  
  .filter-label i {
    color: var(--color_main_4);
    width: 14px;
  }
  
  .filter-input-wrapper {
    position: relative;
  }
  
  .filter-input {
    width: 100%;
    padding: 0.25rem;
    padding-right: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: white;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
  }
  
  .filter-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
  }
  
  .filter-input:focus {
    outline: none;
    border-color: var(--color_main_4);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 0 3px rgba(141, 156, 255, 0.2);
  }
  
  .filter-input-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    pointer-events: none;
  }
  
  .filter-select-wrapper {
    position: relative;
  }
  
  .filter-select {
    width: 100%;
    padding: 0.25rem;
    padding-right: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: white;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  }
  
  .filter-select:focus {
    outline: none;
    border-color: var(--color_main_4);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 0 3px rgba(141, 156, 255, 0.2);
  }
  
  .filter-select option {
    background: var(--color_main);
    color: white;
    padding: 8px;
  }
  
  .filter-select-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    pointer-events: none;
    transition: transform 0.3s ease;
  }
  
  .filter-select:focus + .filter-select-arrow {
    transform: translateY(-50%) rotate(180deg);
  }
  
  .filter-checkbox-field {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .filter-checkbox-wrapper {
    display: flex;
    align-items: center;
  }
  
  .filter-checkbox {
    display: none;
  }
  
  .filter-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: white;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.3s ease;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid transparent;
  }
  
  .filter-checkbox-label:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
  }
  
  .filter-checkbox-custom {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    position: relative;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.1);
  }
  
  .filter-checkbox-custom::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 6px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .filter-checkbox:checked + .filter-checkbox-label {
    background: linear-gradient(135deg, var(--color_main_4) 0%, var(--color_main_2) 100%);
    border-color: var(--color_main_4);
    box-shadow: 0 4px 15px rgba(141, 156, 255, 0.3);
  }
  
  .filter-checkbox:checked + .filter-checkbox-label .filter-checkbox-custom {
    background: white;
    border-color: white;
  }
  
  .filter-checkbox:checked + .filter-checkbox-label .filter-checkbox-custom::after {
    opacity: 1;
  }
  
  .filter-checkbox-icon {
    color: var(--color_main_4);
    font-size: 1rem;
  }
  
  .filter-checkbox:checked + .filter-checkbox-label .filter-checkbox-icon {
    color: white;
  }
  
  .filter-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
  }
  
  .filter-clear-btn {
    background: linear-gradient(135deg, #ff4757 0%, #ff6b7d 100%);
    border: none;
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(255, 71, 87, 0.3);
  }
  
  .filter-clear-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 71, 87, 0.4);
    filter: brightness(1.1);
  }
  
  .filter-clear-btn:active {
    transform: translateY(0);
  }
  
  .filter-container:not(.filter-expanded) .filter-header {
    border-bottom: none;
  }
  
  /* Estado inicial colapsado - solo mostrar header */
  .filter-container:not(.filter-expanded) {
    background: linear-gradient(135deg, var(--color_main_3) 0%, rgba(49, 59, 124, 0.3) 100%);
  }
  
  /* Efecto de pulsación al expandir */
  .filter-container.filter-expanded {
    animation: filter-expand-pulse 0.6s ease;
  }
  
  @keyframes filter-expand-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
  }
  
  /* Mejora visual para el indicador de estado */
  .filter-collapse-indicator {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .filter-container.filter-expanded .filter-collapse-indicator {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  }
  
  @media (max-width: 992px) {
    .filter-container {
      border-radius: 10px;
    }
    
    .filter-header {
      padding: 10px 15px;
    }
    
    .filter-content {
      padding: 15px;
    }
    
    .filter-input,
    .filter-select {
      padding: 10px 12px;
      padding-right: 35px;
      font-size: 0.8rem;
    }
    
    .filter-checkbox-label {
      font-size: 0.8rem;
      padding: 6px 8px;
    }
    
    .filter-clear-btn {
      padding: 8px 16px;
      font-size: 0.75rem;
    }
    
    .filter-collapse-indicator {
      width: 20px;
      height: 20px;
    }
    
    .filter-collapse-icon {
      font-size: 0.7rem;
    }
  }
  
  /* Animaciones adicionales para los filtros */
  @keyframes filter-slide-in {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .filter-container {
    animation: filter-slide-in 0.5s ease-out;
  }
  
  .filter-field {
    animation: filter-slide-in 0.5s ease-out;
  }
  
  .filter-field:nth-child(1) { animation-delay: 0.1s; }
  .filter-field:nth-child(2) { animation-delay: 0.2s; }
  .filter-field:nth-child(3) { animation-delay: 0.3s; }
  .filter-field:nth-child(4) { animation-delay: 0.4s; }
  
  .scroll_items_individual{
    max-height: 95px;
    overflow-y: auto;
    padding-right: 10px;
    
  
  }
  
  @media (max-width: 992px) {
    .scroll_items_individual{
      max-height: 36px;
      overflow-y: auto;
      padding-right: 5px;
      
    }
  }
  
  
  
  .mt_hero_home_content{
    margin-top:200px !important;
  }
  
  @media (max-width: 992px) {
    .mt_hero_home_content{
      margin-top:0px !important;
    }
  }
  
  .h_wallpaper_home_content{
    height:400px !important;
  }
  
  .mask_Wallpaper_home_content{
    mask-image:linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000000 10%, #000000 90%, rgba(0, 0, 0, 0) 100%);;
  }
  
  @media (max-width: 992px) {
    .h_wallpaper_home_content{
      height:200px !important;
    }
    .mask_Wallpaper_home_content{
      mask-image:none !important;
    }
  }
  
  .text-white-75{
    color:rgba(255, 255, 255, 0.75) !important;
  }
  
  
  
  .right_language_switcher_container{
    right:7px !important;
  }
  
  @media (max-width: 992px) {
    .right_language_switcher_container{
      right:0px !important;
    }
  }
  
  @media (max-width: 992px) {
    .mask_bg_main_home{
      mask-image:linear-gradient(to bottom, rgb(0, 0, 0) 0%,  #000000 90%, rgba(0, 0, 0, 0) 100%);
    }
  }
  
  .mt_object_extra_content{
    margin-top:50px !important;
  }
  
  @media (max-width: 992px) {
    .mt_object_extra_content{
      margin-top:0px !important;
    }
  }
  
  .cursor-pointer:hover{
    cursor: pointer !important;
  }
  
  .text-shadow{
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  }
  
  .bg_main_victory{
    background: linear-gradient(290deg, rgb(157 235 90) 0%, rgb(129, 250, 24) 25%) !important;
  }
  
  .bg_main_defeat{
    background: linear-gradient(290deg, rgb(235, 90, 90) 0%, rgb(255, 0, 0) 25%) !important;
  }
  
  .skin_choosed{
    box-shadow: 0px 0 7px 5px rgb(133 135 255);
  }
  
  .clippath-hero-splash{
    clip-path:polygon(0 0, 32% 60%, 100% 60%, 100% 100%, 0 100%);
  }
  
  @media (max-width: 992px) {
    .clippath-hero-splash{
      clip-path:polygon(0 0, 20% 22%, 100% 22%, 100% 100%, 0 100%) !important;
    }
    .fs-xs-1{
      font-size:calc(1.375rem + 1.5vw) !important;
    }
    .w_xs_100{
      width:100% !important;
    }
  }
  
  @media(min-width: 992px){
    .wrap_text_responsive{
      text-wrap:nowrap;
    }
    
  }
  
  .m_width_display_frame{
    min-width:160px !important;
  }
  
  @media (max-width: 992px) {
    .m_width_display_frame{
      min-width:130px !important;
    }
  .avatars_list > div:not(:nth-last-child(-n+3)) {
      display: none !important;
  }
  }
  
  /* Estilos para el área de streamers */
  .streamer-container {
    background: linear-gradient(135deg, #2d8659 0%, rgba(45, 134, 89, 0.3) 100%);
    border: 2px solid #4ecdc4;
    border-radius: 15px;
    padding: 0;
    overflow: hidden;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  }
  
  .streamer-header {
    background: linear-gradient(135deg, #1e6b44 0%, #2d8659 100%);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }
  
  .streamer-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
  }
  
  .streamer-header:hover::before {
    left: 100%;
  }
  
  .streamer-header:hover {
    background: linear-gradient(135deg, #2d8659 0%, #1e6b44 100%);
  }
  
  .streamer-header-left {
    display: flex;
    align-items: center;
    gap: 15px;
  }
  
  .streamer-header-icon {
    color: white;
    font-size: 1.1rem;
  }
  
  .streamer-header-title {
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }
  
  .streamer-code-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.15);
    padding: 4px 8px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
  }
  
  .streamer-code-badge i {
    color: #4ecdc4;
    font-size: 0.8rem;
  }
  
  .streamer-code-badge span {
    color: white;
    font-weight: 600;
    font-size: 0.8rem;
  }
  
  .streamer-header-right {
    display: flex;
    align-items: center;
  }
  
  .streamer-collapse-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
  }
  
  .streamer-collapse-icon {
    color: white;
    font-size: 0.8rem;
    transition: transform 0.3s ease;
  }
  
  .streamer-header:hover .streamer-collapse-indicator {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
  }
  
  .streamer-content {
    padding: 20px;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .streamer-container.streamer-expanded .streamer-content {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .streamer-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
  }
  
  @media (max-width: 768px) {
    .streamer-stats-grid {
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 10px;
    }
  }
  
  
  .streamer-stat-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
  }
  
  .streamer-stat-card:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  }
  
  .withdrawable-card {
    border: 2px solid #2ecc71 !important;
    background: rgba(46, 204, 113, 0.1) !important;
  }
  
  .withdrawable-card:hover {
    background: rgba(46, 204, 113, 0.2) !important;
    box-shadow: 0 5px 20px rgba(46, 204, 113, 0.3) !important;
  }
  
  .streamer-stat-icon {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
  }
  
  .orders-icon {
    background: linear-gradient(135deg, #ff6b6b, #ffa8a8);
    color: white;
  }
  
  .earnings-icon {
    background: linear-gradient(135deg, #4ecdc4, #7dd3c0);
    color: white;
  }
  
  .average-icon {
    background: linear-gradient(135deg, #45b7d1, #96ceb4);
    color: white;
  }
  
  .withdrawable-icon {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: white;
  }
  
  .plan-icon {
    background: linear-gradient(135deg, #f9ca24, #f0932b);
    color: white;
  }
  
  .streamer-stat-content {
    flex: 1;
  }
  
  .streamer-stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    margin-bottom: 2px;
  }
  
  .streamer-stat-label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    line-height:1.1;
  }
  
  .plan-card .streamer-stat-content {
    display: flex;
    flex-direction: column;
  }
  
  .streamer-plan-details {
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
  }
  
  .plan-detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .plan-label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
  }
  
  .plan-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: #4ecdc4;
  }
  
  .streamer-monthly-stats {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .streamer-section-title {
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .streamer-section-title i {
    color: #4ecdc4;
  }
  
  .monthly-stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
  }
  
  @media (max-width: 768px) {
    .monthly-stats-container {
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 8px;
    }
  }
  
  .monthly-stat-item {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
  }
  
  .monthly-stat-item:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
  }
  
  .monthly-stat-header {
    font-size: 0.8rem;
    color: #4ecdc4;
    font-weight: 600;
    margin-bottom: 8px;
    text-align: center;
  }
  
  .monthly-stat-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  
  .monthly-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .monthly-stat-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
  }
  
  .monthly-stat-value {
    font-size: 0.8rem;
    font-weight: 600;
    color: white;
  }
  
  .streamer-info-section {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .streamer-info-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }
  
  .streamer-info-card i {
    color: #4ecdc4;
    font-size: 1.1rem;
    margin-top: 2px;
  }
  
  .streamer-info-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    line-height: 1.5;
  }
  
  .streamer-info-text strong {
    color: white;
    font-weight: 600;
  }
  
  /* Estados de colapso para streamers */
  .streamer-container:not(.streamer-expanded) .streamer-header {
    border-bottom: none;
  }
  
  .streamer-container:not(.streamer-expanded) {
    background: linear-gradient(135deg, #2d8659 0%, rgba(45, 134, 89, 0.3) 100%);
  }
  
  .streamer-container.streamer-expanded {
    animation: streamer-expand-pulse 0.6s ease;
  }
  
  @keyframes streamer-expand-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
  }
  
  .streamer-container.streamer-expanded .streamer-collapse-indicator {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  }
  
  @media (max-width: 992px) {
    .streamer-container {
      border-radius: 10px;
    }
    
    .streamer-header {
      padding: 10px 15px;
    }
    
    .streamer-content {
      padding: 15px;
    }
    
    .streamer-stat-card {
      padding: 12px;
      gap: 10px;
    }
    
    .streamer-stat-icon {
      width: 35px;
      height: 35px;
      font-size: 1rem;
    }
    
    .streamer-stat-value {
      font-size: 1.1rem;
    }
    
    .streamer-stat-label {
      font-size: 0.75rem;
    }
    
    .streamer-code-badge {
      padding: 3px 6px;
    }
    
    .streamer-code-badge span {
      font-size: 0.75rem;
    }
    
    .streamer-header-title {
      font-size: 0.85rem;
    }
    
    .streamer-collapse-indicator {
      width: 20px;
      height: 20px;
    }
    
    .streamer-collapse-icon {
      font-size: 0.7rem;
    }
  }
  
  /* Animaciones para streamers */
  @keyframes streamer-slide-in {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .streamer-container {
    animation: streamer-slide-in 0.5s ease-out;
  }
  
  .streamer-stat-card {
    animation: streamer-slide-in 0.5s ease-out;
  }
  
  .streamer-stat-card:nth-child(1) { animation-delay: 0.1s; }
  .streamer-stat-card:nth-child(2) { animation-delay: 0.2s; }
  .streamer-stat-card:nth-child(3) { animation-delay: 0.3s; }
  .streamer-stat-card:nth-child(4) { animation-delay: 0.4s; }
  .streamer-stat-card:nth-child(5) { animation-delay: 0.5s; }
  
  
  .t_responsive_bg_part_2{
    margin-top:-44px !important;
  }
  
  @media (min-width: 992px) and (max-width: 1600px) {
    .t_responsive_bg_part_2{
      margin-top:-42px !important;
    }
  }
  
  .text-wrap-balance{
    text-wrap: balance;
  }
  
  
  .amo-horisontal{
    z-index:8 !important;
  }
  
  
  .amo-button-holder.amo-horisontal{
    z-index: 7 !important;
  }