.carousel-container {
        max-width: 420px;
        margin: 0 auto;
        position: relative;
        padding: 0 40px;
    }

    .carousel-wrapper {
        position: relative;
        overflow: visible; /* Permite que los tooltips se muestren */
    }

    .carousel-inner {
        position: relative; /* ✅ NUEVO: permite alinear las flechas respecto a esta caja */
        overflow-x: auto;
        scroll-behavior: smooth;
        scrollbar-width: none;
        display: flex;
        gap: 15px;
  padding: 80px 30px 20px 15px;
        margin-top: -20px;
    }


    .carousel-inner::-webkit-scrollbar {
        display: none;
    }

    .carousel-btn {
        position: absolute;
        top: calc(80px + 25px);
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: white;
        border: 2px solid #44459c;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 10;
        transition: all 0.3s ease;
    }

    .carousel-btn:hover {
        background: #44459c;
    }

    .carousel-btn:hover svg path {
        fill: white;
    }

    .carousel-btn.prev {
        left: -5px;
    }

    .carousel-btn.next {
        right: -5px;
    }

    .carousel-btn[disabled] {
        opacity: 0.5;
        cursor: not-allowed;
        background: white !important;
    }

    .carousel-btn[disabled] svg path {
        fill: #44459c !important;
    }

    .social-icon {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 24px;
        flex-shrink: 0;
        transition: transform 0.3s ease;
        text-decoration: none;
        position: relative;
    }

    .social-icon:hover {
        transform: scale(1.1);
    }

    .social-icon .label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

.social-icon i {
  font-size: 20px;
  line-height: 1;
}


    .social-icon::after {
        content: attr(social-tooltip);
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: #333;
        color: white;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 14px;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        margin-bottom: 10px;
    }

    .social-icon:hover::after {
        opacity: 1;
        visibility: visible;
    }

    /* ==================== COLORES DE ÍCONOS ==================== */

    .social-icon.fa-x-twitter { background: #555555; }
    .social-icon.fa-x-twitter:hover { background: #000000; }

    .social-icon.fa-facebook-f { background: #687ac7; }
    .social-icon.fa-facebook-f:hover { background: #5765af; }

    .social-icon.fa-blogger { background: #e15d58; }
    .social-icon.fa-blogger:hover { background: #c84c48; }

    .social-icon.fa-github { background: #c7956c; }
    .social-icon.fa-github:hover { background: #ae835f; }

    .social-icon.fa-medium { background: #e6729c; }
    .social-icon.fa-medium:hover { background: #cc5d85; }

    .social-icon.fa-linkedin-in { background: #6b8fc8; }
    .social-icon.fa-linkedin-in:hover { background: #5c7bb0; }

    .social-icon.fa-instagram { background: #e16b88; }
    .social-icon.fa-instagram:hover { background: #c65872; }

    .social-icon.fa-threads { background: #555555; }
    .social-icon.fa-threads:hover { background: #000000; }

    .social-icon.fa-youtube { background: #e35858; }
    .social-icon.fa-youtube:hover { background: #cc4747; }

    .social-icon.fa-reddit { background: #f1895b; }
    .social-icon.fa-reddit:hover { background: #db7549; }

    .social-icon.fa-tiktok { background: #5cb8bf; }
    .social-icon.fa-tiktok:hover { background: #4ca3aa; }

    .social-icon.fa-snapchat { background: #d8a941; }
    .social-icon.fa-snapchat:hover { background: #c39635; }

    .social-icon.fa-pinterest { background: #e25858; }
    .social-icon.fa-pinterest:hover { background: #cc4747; }

    .social-icon.fa-whatsapp { background: #5fae88; }
    .social-icon.fa-whatsapp:hover { background: #4c9974; }

    .social-icon.fa-telegram { background: #67a9d5; }
    .social-icon.fa-telegram:hover { background: #5793ba; }

    .social-icon.fa-discord { background: #8289da; }
    .social-icon.fa-discord:hover { background: #7175c3; }

    .social-icon.fa-twitch { background: #af7fd8; }
    .social-icon.fa-twitch:hover { background: #996abf; }

    .social-icon.fa-mix { background: #f1895b; }
    .social-icon.fa-mix:hover { background: #db7549; }

    .social-icon.fa-vk { background: #3b8be6; }
    .social-icon.fa-vk:hover { background: #2072d6; }


    [social-tooltip]::after {
        background: rgba(51, 51, 51, 0.9);
        border-radius: 5px;
        bottom: 120%;
        color: white;
        content: attr(social-tooltip);
        font-family: 'Open Sans', sans-serif;
        font-size: 12px;
        left: 50%;
        opacity: 0;
        padding: 6px 10px;
        position: absolute;
        transform: translateX(-50%);
        transition: opacity 0.3s ease;
        visibility: hidden;
        white-space: nowrap;
        z-index: 1000;
    }

    [social-tooltip]:hover::after {
        opacity: 1;
        visibility: visible;
    }


    .circle-x {
        width: 50px;
        height: 50px;
        font-size: 24px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: black;
    }


/* ...tus estilos generales arriba... */

@media (max-width: 768px) {
  .carousel-container {
    max-width: 250px !important;
    padding: 0 30px !important;
  }

  .carousel-inner {
    position: relative;
    padding: 60px 0 15px !important;
    gap: 15px !important;
  }

  .social-icon {
    width: 50px !important;
    height: 50px !important;
    font-size: 22px !important;
  }

  .carousel-btn.prev {
    left: -15px !important;
  }

  .carousel-btn.next {
    right: -5px !important;
  }

  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
}