/* Estilos generales para todos los niveles */
.nivel-1,
.nivel-2,
.nivel-3 {
    border-left: 2px solid #ccc;
    margin-left: 0;
    padding-left: 10px;
}

/* Nivel 1 */
.nivel-1 {
    font-weight: bold;
    font-size: 16px;
    background-color: #f7f7f7;
    padding: 10px;
}



/* Nivel 2 */
.nivel-2 {
    margin-left: 20px;
    font-size: 14px;
    font-style: italic;
    background-color: #e9ecef;
    padding: 8px;
}

/* Nivel 3 */
.nivel-3 {
    margin-left: 40px;
    font-size: 12px;
    background-color: #f9f9f9;
    padding: 6px;
}

/* Íconos */
.toggle-icon {
    margin-right: 10px;
}


.body-plan {
    position: relative;
    background: #e60000;
    /* Fondo rojo */
    color: white;
    padding: 20px;
    overflow: hidden;
}

.body-plan::after {
    content: '';
    position: absolute;
    bottom: 96%;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 60px;
    background: white;
    border-radius: 50%;
    z-index: 1;
}

.custom-modal-width {
    /* width: 60%; */
    /* Ancho para dispositivos más grandes */
    /* max-width: 520px; */
    /* Máximo ancho */
}

@media (max-width: 768px) {
    .custom-modal-width {
        width: 90%;
        /* Ancho ajustado para dispositivos pequeños */
    }
}


.header-plan {
    padding: 10px 20px !important;
}

.basico h2,
.basico h3 {
    color: #a40c0c;
}

.premium h2,
.premium h3 {
    
    color: #cfa944;
}

.golden h2,
.golden h3 {
    color: #321c82;
}

.basico p,
.premium p,
.golden p{
    color: #333;
}


.header-plan h2 {
    font-size: 36px;
    margin-bottom: 0px;
}

.header-plan p {
    font-size: 16px;
    /* Tamaño pequeño para "Por Mes" */
}

.basico .linea-dashed,
.premium .linea-dashed,
.golden .linea-dashed  {
    border-top: 2px dashed #333;
}



/* .basico .linea-dashed {
    border-top: 2px dashed #a40c0c;
}

.premium .linea-dashed {
    border-top: 2px dashed #cfa944;
}

.golden .linea-dashed {
    border-top: 2px dashed #321c82;
} */

.header-plan .linea-dashed {
    margin: 10px 0;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

.header-plan h3 {
    font-size: 24px;
    /* Tamaño grande para "BÁSICO" */
    font-weight: bold;
    /* Negrita */
    margin-top: 10px;
    /* Espaciado superior */
}


.body-plan {
    padding: 40px 20px 20px !important;
    border-radius: 0 0 20px 20px;
    ;
}

.fondo-plan {
    background-color: #fff;
    padding: 10px;
    border-radius: 5px;
}

.height-plan {
    background-color: #fff;
    border-radius: 20px;
    padding: 30px 0 20px 0;
}

.height-plan .btn-pago {
    padding: 5px 20px;
}

.height-plan .btn-pago button {
    color: #fff;
    font-weight: 900;

}

.height-beneficios {
    height: 420px;
    text-align: left;
}

[class*=uk-list]> :before {
    width: 20px !important;
}

.uk-card-hover {
    border-radius: 20px;
}

.name_plan {
    margin: 20px 0 10px;
}

.beneficios-lista {
    padding: 0;
    /* Elimina el padding predeterminado del ul */
    margin: 0;
    /* Elimina el margen predeterminado del ul */
}

.beneficios-lista li {
    list-style: none;
    display: flex;
    align-items: center;
    padding: 5px  0px;
    font-size: 14px;
    /* height: 48px; */
}

.beneficios-lista li:nth-child(odd) {
    background-color: #ccc;

}

.uk-list>*>ul,
.uk-list> :nth-child(n+2) {
    margin-top: 0px;
}

.beneficios-lista li:nth-child(even) {
    background-color: #ffffff;
}

.beneficios-lista li span {
    margin-right: 10px;
    flex-shrink: 0;
    color: #529454 !important;
}

.btncomprar{
    font-size: 18px !important;
    font-weight: 600 !important;
}

@media only screen and (max-width: 1600px) {
    .height-beneficios {
        height: 500px;
    }
}

@media only screen and (max-width: 1300px) {
    .height-beneficios {
        height: 700px;
    }
}




@media only screen and (max-width: 960px) {
    .uk-grid>* {
        padding-left: 10px;
    }

    .height-beneficios {
        height: auto;
    }
}



/* Compatibilidad móvil */
@media (max-width: 768px) {
    .nivel-1 {
        font-size: 14px;
        padding: 8px;
    }

    .nivel-2 {
        font-size: 12px;
        padding: 6px;
    }

    .nivel-3 {
        font-size: 10px;
        padding: 4px;
    }

    .uk-accordion-content {
        padding-left: 5px;
    }

    .header-plan h2 {
        font-size: 20px;
        margin-bottom: 0px;
    }

    .header-plan p {
        font-size: 14px;
    }

    .header-plan h3 {
        font-size: 16px;
    }



    .beneficios-lista li {
        font-size: 12px;
    }
}


@media (max-width: 560px) {
    .height-beneficios {
        height: auto;
    }

    .btncomprar {
        font-size: 14px !important;
    }
}