.submenu-container {
    display: block; /* Cambiado a block para permitir transiciones */
    opacity: 0; /* Iniciar invisible */
    transform: translateY(-10px); /* Mover ligeramente hacia arriba */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Transición suave */
    pointer-events: none; /* Evitar interacción cuando está oculto */
    z-index: 999 !important;
    /* ...otros estilos... */
  }

  .submenu-container{
    display: none;
  }
  
  .content_subItems:hover > .submenu-container {
    opacity: 1; /* Hacer visible al hacer hover */
    transform: translateY(0); /* Mover a la posición original */
    pointer-events: auto; /* Permitir interacción cuando está visible */
    z-index: 999 !important;
    display: block;
  }

  .content_scroll::-webkit-scrollbar {
    -webkit-appearance: none;
    height: 50%;
  }
  
  .content_scroll::-webkit-scrollbar:vertical {
    width: 6px;
  }
  
  .content_scroll::-webkit-scrollbar-button:increment,
  .content_scroll::-webkit-scrollbar-button {
    display: none;
  }
  
  .content_scroll::-webkit-scrollbar:horizontal {
    height: 10px;
  }
  
  .content_scroll::-webkit-scrollbar-thumb {
    background-color: #3f7acc;
    border-radius: 20px;
    border: 2px solid #f1f2f3;
    height: 50px;
  }
  
  .content_scroll::-webkit-scrollbar-track {
    border-radius: 10px;
    background: #0f172a00;
  }
  
  
  .content_scroll::-webkit-scrollbar {
    -webkit-appearance: none;
    height: 50%;
  }
  
  .content_scroll_hidden::-webkit-scrollbar:vertical {
    width: 0px;
  }
  
  .content_scroll_hidden::-webkit-scrollbar-button:increment,
  .content_scroll_hidden::-webkit-scrollbar-button {
    display: none;
  }
  
  .content_scroll_hidden::-webkit-scrollbar:horizontal {
    height: 10px;
  }
  
  .content_scroll_hidden::-webkit-scrollbar-thumb {
    background-color: #8041b8;
    border-radius: 20px;
    border: 2px solid #f1f2f3;
    height: 50px;
  }
  
  .content_scroll_hidden::-webkit-scrollbar-track {
    border-radius: 10px;
    background: #0f172a00;
  }

  /* Main CSS */
  .grid-wrapper > div {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .grid-wrapper {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    grid-auto-rows: 200px;
    grid-auto-flow: dense;
  }
  .grid-wrapper .wide {
    grid-column: span 2;
  }
  .grid-wrapper .tall {
    grid-row: span 2;
  }
  .grid-wrapper .big {
    grid-column: span 2;
    grid-row: span 2;
  }
  

  /* Animaciones de imagenes */

  @keyframes zoomIn {
    from {
      transform: scale(0.5);
      opacity: 0;
    }
    to {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  .zoom-in-animation {
    animation: zoomIn 0.5s ease forwards;
  }
  
  /* Responsive Marks */

  .logo-container img {
    max-width: 100%; /* O un tamaño específico */
    max-height: 100px; /* Ajusta esto al tamaño deseado */
    object-fit: contain; /* Mantiene las proporciones sin recortar */
  }
  

  .loader {
    text-align: center;
    display: flex;
  }
  .loader span {
    display: inline-block;
    vertical-align: middle;
    width: 14px;
    height: 14px;
    background: black;
    border-radius: 16px;
    animation: loader 0.8s infinite alternate;
  }
  .loader span:nth-of-type(2) {
    animation-delay: 0.2s;
  }
  .loader span:nth-of-type(3) {
    animation-delay: 0.6s;
  }
  @keyframes loader {
    0% {
      opacity: 0.9;
      transform: scale(0.5);
    }
    100% {
      opacity: 0.1;
      transform: scale(1);
    }
  }


  .container-floating-widget:hover .plus {
    animation: plus-in 0.15s linear;
    animation-fill-mode: forwards;
  }
  .edit {
    position: absolute;
    top: 0;
    display: block;
    bottom: 0;
    left: 0;
    display: block;
    right: 0;
    padding: 0;
    opacity: 0;
    margin: auto;
    line-height: 65px;
    font-size: 32px;
    transform: rotateZ(-70deg);
    transition: all 0.3s;
    animation: edit-out 0.3s;
  }
  .container-floating-widget:hover .principal-btn {
    animation: edit-in 0.2s;
    animation-delay: 0.1s;
    animation-fill-mode: forwards;
  }
  @keyframes edit-in {
    from {
      opacity: 0;
      transform: rotateZ(-70deg);
    }
    to {
      opacity: 1;
      transform: rotateZ(0deg);
    }
  }
  @keyframes edit-out {
    from {
      opacity: 1;
      transform: rotateZ(0deg);
    }
    to {
      opacity: 0;
      transform: rotateZ(-70deg);
    }
  }
  @keyframes plus-in {
    from {
      opacity: 1;
      transform: rotateZ(0deg);
    }
    to {
      opacity: 0;
      transform: rotateZ(180deg);
    }
  }
  @keyframes plus-out {
    from {
      opacity: 0;
      transform: rotateZ(180deg);
    }
    to {
      opacity: 1;
      transform: rotateZ(0deg);
    }
  }
  .nds {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-self: center;
    z-index: 1;
    cursor: pointer;
  }
  .nd1 {
    background: #2bd34b;
    animation-delay: 0.2s;
    animation: bounce-out-nds 0.3s linear;
  }
  .nd2 {
    background: var(--secondary-color);
    animation-delay: 0.15s;
    animation: bounce-out-nds 0.15s linear;
  }
  .nd3 {
    background: #00aae8;
    animation-delay: 0.1s;
    animation: bounce-out-nds 0.1s linear;
  }
  .nd4 {
    background: #f29d35;
    animation-delay: 0.1s;
    animation: bounce-out-nds 0.1s linear;
  }
  .nd4 {
    background: #410202;
    animation-delay: 0.1s;
    animation: bounce-out-nds 0.1s linear;
  }
  @keyframes bounce-nds {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  @keyframes bounce-out-nds {
    from {
      opacity: 1;
      transform: scale(1);
    }
    to {
      opacity: 0;
      transform: scale(0);
    }
  }