/* Account Types Slider CSS - Solo para tablet y móvil */

/* Ocultar la tabla original en móvil y mostrar slider */
@media (max-width: 1024px) {
    /* Ocultar la tabla original */
    .account-types-table {
        display: none !important;
    }
    
    /* Contenedor principal del slider */
    .account-types-slider-container {
        display: flex;
        position: relative;
        width: 100%;
        max-width: 100%;
        margin-top: 40px;
        border-radius: 20px;
        overflow: hidden;
    }
    
    /* Columna de etiquetas estática en el lado izquierdo */
    .account-types-column-labels {
        position: sticky;
        left: 0;
        top: 0;
        width: 35%;
        min-width: 140px;
        z-index: 10;
        padding: 194px 15px 20px;
        margin: 0;
        height: fit-content;
        backdrop-filter: blur(64px);
        border-radius: 20px 0 0 20px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }
    
    .account-types-column-labels div {
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        font-family: 'Aileron', sans-serif;
        font-weight: 400;
        font-size: 14px;
        line-height: 1.2;
        color: #ffffff;
        padding-right: 10px;
        position: relative;
        z-index: 1;
    }
    
    /* Contenedor del slider */
    .account-types-slider {
        width: 65%;
        overflow: hidden;
        position: relative;
        border-radius: 0 20px 20px 0;
    }
    
    .account-types-slider-wrapper {
        display: flex;
        transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        height: 100%;
    }
    
    .account-type-slide {
        min-width: 100%;
        padding: 50px 20px 100px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        box-sizing: border-box;
    }
    
    /* Ajustar las tarjetas para el slider */
    .account-type-slide .account-type-card {
        width: 100%;
        margin: 0;
        border-radius: 20px;
        min-height: 500px;
        position: relative;
        background: linear-gradient(223deg, rgb(22 28 23) 10%, rgb(70 114 92) 100%);
        border: 2px solid #2d5241;
        box-shadow: inset 0px 0px 12.5px 0px rgb(88 156 122 / 51%);
        backdrop-filter: blur(64px);
    }
    
    .account-type-slide .account-type-card.pro {
        background: linear-gradient(133deg, rgb(25 27 29) 0%, rgb(71 86 100) 100%);
        margin-top: 0;
    }
    
    .account-type-slide .account-type-card.raw {
        background: linear-gradient(133deg, rgb(25 27 29) 0%, rgb(71 86 100) 100%);
    }
    
    .account-type-slide .account-type-card.premium {
        background: linear-gradient(133deg, rgb(25 27 29) 0%, rgb(71 86 100) 100%);
    }
    
    .account-type-slide .account-type-card.personalizado {
        background: linear-gradient(133deg, rgb(25 27 29) 0%, rgb(71 86 100) 100%);
        width: 100%;
    }
    
    .account-type-slide .account-type-card .btn-section.btn-section-1 {
        position: absolute;
        bottom: -82px;
        left: 25%;
        margin-top: 20px;
        padding: 0 25px 1px;
    }
    
    /* Navegación por dots */
        .account-types-slider-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        padding: 15px 0;
        /* background: #1a1a1a; */
        border-radius: 0 0 20px 20px;
        position: absolute;
        bottom: -15px;
        left: 12%;
        right: 0;
        z-index: 20;
    }
    
    .slider-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: rgba(93, 224, 158, 0.3);
        border: 2px solid #5DE09E;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        outline: none;
    }
    
    .slider-dot:hover {
        background: rgba(93, 224, 158, 0.6);
        transform: scale(1.1);
    }
    
    .slider-dot.active {
        background: #5DE09E;
        box-shadow: 0 0 8px rgba(93, 224, 158, 0.7);
    }
    
    .slider-dot.active::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #1a1a1a;
    }

    h3.type-name br {
        display: none;
    }

    .account-type-slide .account-type-card .btn-section.btn-section-1 {
        position: absolute;
        bottom: -82px;
        left: 0%;
        margin-top: 20px;
        padding: 0 25px 1px;
        margin-left: 0px !important;
        width: 100%;
        display: flex;
        justify-content: center;
        background: none;
        border: none;
    }

    .account-types-slider-dots {
        display: none;
    }
}

/* Ajustes específicos para tablets */
@media (max-width: 768px) and (min-width: 481px) {
    .account-types-column-labels {
        width: 28%;
        min-width: 130px;
        padding: 183px 10px 20px;
    }
    
    .account-types-slider {
        width: 60%;
    }
    
    .account-types-column-labels div {
        font-size: 12px;
        padding-right: 8px;
    }
    
    .account-type-slide {
        padding: 40px 15px 100px;
    }

    
}

@media (max-width: 500px)  {
    .account-types-slider {
        width: 70%;
    }
}

@media (max-width: 455px)  {
    .account-type-card.pro h3.type-name {
        font-size: 25px;
        line-height: 2;
    }
}

@media (max-width: 430px) {
    .account-types-column-labels {
        position: sticky;
        left: 0;
        top: 0;
        width: 10%;
        min-width: 118px;
        z-index: 10;
        padding: 194px 0px 20px;
        margin: 0;
        height: fit-content;
        backdrop-filter: blur(64px);
        border-radius: 20px 0 0 20px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

        .account-type-slide {
        min-width: 100%;
        padding: 50px 10px 100px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        box-sizing: border-box;
    }

    .account-type-card.pro h3.type-name {
        font-size: 30px;
    }

    h3.type-name span {
        display: none;
    }
}

@media (max-width: 390px) {
    .account-types-column-labels {
        width: 5%;
        min-width: 79px;
    }

    .account-types-container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 10px;
        text-align: center;
    }

    .account-type-slide {
        padding: 50px 0px 100px;
       
    }

    .account-type-slide .account-type-card {
        width: 90%;
    }

    .account-types-column-labels {
        width: 34%;
        min-width: 79px;
    }

    .account-types-column-labels div {
        font-size: 13px;
    }
}

/* Ocultar el slider en desktop */
@media (min-width: 1025px) {
    .account-types-slider-container {
        display: none !important;
    }
    
    /* Asegurar que la tabla original se muestre en desktop */
    .account-types-table {
        display: flex !important;
    }
}