Css carrucel

.tag {
  display: inline-block !important;
  margin: 5px !important;
  padding: 15px !important;
  border-radius: 5px !important;
  text-align: left !important;
  border: 1px solid #40a9bf !important; /* Contorno delgado */
}
.destino-tag {
  padding: 0 !important;
  border: none !important;
  background: none !important;
  color: #007bff !important; /* Color azul de enlace, puedes cambiarlo */
  text-decoration: underline;
  border-radius: 0 !important;
  margin: 5px 8px !important;
  font-size: inherit;
  display: inline-block;
  cursor: pointer;
  transition: none;
}

/* Espacio extra entre líneas en móvil */
@media (max-width: 600px) {
  .destino-tag {
    line-height: 1.3;
    margin-bottom: 7px;
    font-size: 14px;
    padding: 7px 12px;
    display: inline-block;
    word-break: break-word;
    white-space: normal;
  }
}

@media (min-width: 900px) {
  .marquee-radio {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 700px !important;
    max-width: 90vw !important;
    position: fixed !important;
    top: 70px !important;
    z-index: 9999 !important;
    overflow: hidden !important;
    background: none !important;
    -webkit-mask-image: linear-gradient(to right,transparent 0%,black 10%,black 90%,transparent 100%) !important;
    mask-image: linear-gradient(to right,transparent 0%,black 10%,black 90%,transparent 100%) !important;
  }
  .marquee__inner {
    width: 100% !important;
    margin: 0 auto !important;
    justify-content: center !important;
  }
  .marquee__group {
    margin-left: 280px !important;
  }
}

@media (max-width: 600px) {
  .drag-arrow-right {
    right: 10px !important;
    left: auto !important;
  }
}

    body {
      overflow-x: hidden;
      background: #f9f9f9;
    }

    .container-main {
      position: relative;
      max-width: 1200px;
      margin: 0 auto;
      z-index: 9999;
    }

    .card.card-style.main-menu {
      position: fixed;
      top: 70px;
      left: 40px;
      right: 40px;
      margin: 0 auto;
      width: auto;
      max-width: 1120px;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 4px 24px #40a9bf22;
      padding: 20px;
      bottom: 32px;
      overflow-y: auto;
      max-height: calc(100vh - 100px);
      z-index: 9999;
    }

    .card.card-style.mb-2 {
      max-width: 100%;
      margin-left: auto;
      margin-right: auto;
      box-sizing: border-box;
      border: none;
      background: #fff;
    }

    /* Botones principales */
    .custom-tab-btn {
      width: 100%;
      text-align: left;
      font-weight: 600;
      border-radius: 12px;
      padding: 0;
      background: #fff;
      color: #111;
      border: 1px solid #eaeaea;
      outline: none;
      cursor: pointer;
      transition: background 0.2s, color 0.2s, box-shadow 0.2s;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
      margin-bottom: 10px;
    }

    .custom-tab-btn:hover,
    .custom-tab-btn.active {
      background: #f7f7f7;
      color: #000;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }

    .custom-tab-btn .content {
      padding: 12px 20px;
      text-align: left;
    }

    .custom-tab-btn h4 {
      font-size: 1.05rem;
      margin: 0;
      display: flex;
      align-items: center;
    }

    .custom-tab-btn i {
      margin-right: 8px;
      color: #40a9bf;
    }

    /* --- Bottom Sheets (SIEMPRE OCULTOS HASTA CLICK) --- */
    .menu.menu-box-bottom.menu-box-detached {
      position: fixed;
      left: 40px;
      right: 40px;
      bottom: 32px;
      margin: 0 auto;
      z-index: 10000;
      background: #fff;
      box-shadow: 0 -4px 24px #40a9bf22;
      border-radius: 12px;
      max-width: 1120px;
      width: auto;
      height: 400px;
      overflow-y: auto;
      transform: translateY(100%);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: transform 0.35s ease, opacity 0.35s ease, visibility 0.35s ease;
    }

    .menu.menu-box-bottom.menu-box-detached.active {
      transform: translateY(0);
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    .sheet-content {
      padding: 24px;
    }

    .close-sheet-x {
      position: absolute;
      top: 8px;
      right: 12px;
      font-size: 1.2rem; /* Más pequeño */
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 0;
      line-height: 1;
    }

    @media (max-width: 600px) {
      .container-main {
        max-width: 100vw;
      }
      .card.card-style.main-menu, 
      .menu.menu-box-bottom.menu-box-detached {
        left: 5vw !important;
        right: 5vw !important;
        top: 70px !important;
        max-width: 94vw !important;
      }
      .card.card-style.main-menu {
        top: 70px !important;
        bottom: 5vw !important;
        max-height: calc(100vh - 32px) !important;
        padding: 10px !important;
      }
      .menu.menu-box-bottom.menu-box-detached {
        bottom: 5vw !important;
        height: 80vh !important;
      }
      .sheet-content {
        padding: 10px;
      }
      .custom-tab-btn .content {
        padding: 10px 16px;
      }
    }

/* @media (prefers-color-scheme: dark) {
  body {
    background: #181a1b !important;
    color: #f1f1f1 !important;
  }
  .card,
  .card.card-style,
  .card.card-style.main-menu,
  .card.card-style.mb-2,
  .menu.menu-box-bottom.menu-box-detached,
  .custom-tab-btn,
  .sheet-content {
    background: #232425 !important;
    color: #f1f1f1 !important;
    border-color: #333 !important;
    box-shadow: 0 4px 24px #0006 !important;
  }
  .custom-tab-btn h4,
  .custom-tab-btn i,
  .card .content p,
  .card .content,
  .sheet-content {
    color: #f1f1f1 !important;
  }
  .custom-tab-btn.active,
  .custom-tab-btn:hover {
    background: #2a2b2d !important;
    color: #fff !important;
  }
} */