@media screen and (min-width:1280px) {
    .flex.flex-columns {
        display: flex;
        gap: 12px;
    }

    /* de manera normal el banner arriba */
    .flex.flex-columns .column-left {
        flex: 3;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 20px;
    }

    /* column-reverse el banner abajo */

    .flex.flex-columns.flex-column-reverse>.column-left {
        flex-direction: column-reverse;
        gap: 20px;
    }

    /* mostrar las cards del banner correspondiente */

    /* por defecto muestra la que tiene el banner arriba */

    .flex.flex-columns #banner-card-rate-column-reverse {
        display: none;
    }

    /* si tenemos el banner abajo se muestra la card correspondiente y se ocuclta la del banner arriba */
    .flex.flex-columns.flex-column-reverse #banner-card-rate-column-reverse {
        display: block;
    }

    .flex.flex-columns.flex-column-reverse #banner-card-rate {
        display: none;
    }

    /* ONE : carrusel */

    /* Las cards correspondientes a la versión con el banner arriba en One */

    .main-one .flex.flex-columns #carousel-ws10 .card-rate:nth-child(1) {
        display: none;
    }


    /* Las cards correspondientes a la versión con el banner abajo en One */

    .main-one .flex.flex-columns.flex-column-reverse #carousel-ws10 .card-rate:nth-child(1) {
        display: block;
    }

    .main-one .flex.flex-columns.flex-column-reverse #carousel-ws10 .card-rate:nth-child(4) {
        display: none;
    }

    /* SIMO : carrusel */

    /* Las cards correspondientes a la versión con el banner arriba en Simo */

    .main-voz .flex.flex-columns #carousel-ws10 .card-rate:nth-child(1) {
        display: none;
    }


    /* Las cards correspondientes a la versión con el banner abajo en Simo */

    .main-voz .flex.flex-columns.flex-column-reverse #carousel-ws10 .card-rate:nth-child(1) {
        display: block;
    }

    .main-voz .flex.flex-columns.flex-column-reverse #carousel-ws10 .card-rate:nth-child(4) {
        display: none;
    }

    /* TV : carrusel */

    /* Las cards correspondientes a la versión con el banner arriba en Simo */

    .main-tv .flex.flex-columns #carousel-ws10 .card-rate:nth-child(1) {
        display: none;
    }


    /* Las cards correspondientes a la versión con el banner abajo en Simo */

    .main-tv .flex.flex-columns.flex-column-reverse #carousel-ws10 .card-rate:nth-child(1) {
        display: block;
    }

    .main-tv .flex.flex-columns.flex-column-reverse #carousel-ws10 .card-rate:nth-child(4) {
        display: none;
    }

    /* Fibra : carrusel */

    /* Las cards correspondientes a la versión con el banner arriba en Simo */

    .main-fb .flex.flex-columns #carousel-ws10 .card-rate:nth-child(1) {
        display: none;
    }


    /* Las cards correspondientes a la versión con el banner abajo en Simo */

    .main-fb .flex.flex-columns.flex-column-reverse #carousel-ws10 .card-rate:nth-child(1) {
        display: block;
    }

    .main-fb .flex.flex-columns.flex-column-reverse #carousel-ws10 .card-rate:nth-child(4) {
        display: none;
    }


    /* Mostrar la correspondiente imagen del banner en cada caso en One*/

    .main-one .flex.flex-columns .section.section-banner:has(.card-rate, .card-rate.card-rate--simplify) {
        background: url(../../../imgs/banner/one/testA/desktop.jpg) no-repeat;
        background-size: cover;
        background-position-x: -60px;
    }

    .main-one .flex.flex-columns.flex-column-reverse .section.section-banner:has(.card-rate, .card-rate.card-rate--simplify) {
        background: url(../../../imgs/banner/one/testB/desktop.jpg) no-repeat;
        background-size: cover;
        background-position-x: -60px;
    }

    /* Mostrar la correspondiente imagen del banner en cada caso en One*/

    .main-voz .flex.flex-columns .section.section-banner:has(.card-rate, .card-rate.card-rate--simplify) {
        background: url(../../../imgs/banner/voz/testA/desktop.jpg) no-repeat;
        background-size: cover;
        background-position-x: -50px;
    }

    .main-voz .flex.flex-columns.flex-column-reverse .section.section-banner:has(.card-rate, .card-rate.card-rate--simplify) {
        background: url(../../../imgs/banner/voz/testB/desktop.jpg) no-repeat;
        background-size: cover;
        background-position-x: -50px;
    }

    /* Mostrar la correspondiente imagen del banner en cada caso en One*/

    .main-tv .flex.flex-columns .section.section-banner:has(.card-rate, .card-rate.card-rate--simplify) {
        background: url(../../../imgs/banner/tv/testA/desktop.jpg) no-repeat;
        background-size: cover;
        background-position: -30px;
    }

    .main-tv .flex.flex-columns.flex-column-reverse .section.section-banner:has(.card-rate, .card-rate.card-rate--simplify) {
        background: url(../../../imgs/banner/tv/testB/desktop.jpg) no-repeat;
        background-size: cover;
        background-position: -30px;
    }

    /* Mostrar la correspondiente imagen del banner en cada caso en One*/

    .main-fb .flex.flex-columns .section.section-banner:has(.card-rate, .card-rate.card-rate--simplify) {
        background: url(../../../imgs/banner/fibra/testA/desktop.jpg) no-repeat;
        background-size: cover;
        background-position-x: -40px;
    }

    .main-fb .flex.flex-columns.flex-column-reverse .section.section-banner:has(.card-rate, .card-rate.card-rate--simplify) {
        background: url(../../../imgs/banner/fibra/testB/desktop.jpg) no-repeat;
        background-size: cover;
        background-position-x: -40px;
    }


    /* la columna donde va el configurador */
    .flex.flex-columns .column-rigth {
        flex: 1;
        display: flex;
    }

    .flex.flex-columns .header-rate .column-rigth {
        flex: 0;
    }

    /* se muestra el banner */

    .flex.flex-columns .section.section-banner {
        display: flex;
        align-items: center;
        /* flex: 1; */
        padding: 0;
        flex-basis: 500px;
        flex-grow: 0;
    }

    .main-one .flex.flex-columns .section.section-banner,
    .main-tv .flex.flex-columns .section.section-banner {
        flex-basis: 500px;
        flex-grow: 0;
    }

    /* configurador en card columna derecha del flex */
    #section-config-desktop-test {
        padding-bottom: 0;
        margin-top: 0;
        width: 100%;
    }

    #section-config-desktop-test .config-container {
        margin: 0;
        height: 100%;
    }

    .main-one .section.section-banner:has(.card-rate, .card-rate.card-rate--simplify) {
        height: auto;
        background-position-x: -80px;
    }

    .main-voz .banner-card-rate__container .card-rate.card-rate--simplify {
        margin-left: auto;
    }

    .main-tv .banner-card-rate__container .card-rate.card-rate--simplify {
        margin-left: auto;
        margin-right: 20px;
        max-width: 350px;
    }

    .main-fb .banner-card-rate__container .card-rate.card-rate--simplify {
        margin-left: auto;
    }

    .flex.flex-columns .section--cards__container {
        margin-bottom: 0;
    }

    .flex.flex-columns :is(#banner-card-rate, #banner-card-rate-column-reverse) {
        margin-left: auto;
        margin-right: 0;

    }

    /* Cosas que cambiar para el test */

    .flex.flex-columns .header-rate .dropdownDetails {
        display: none;
    }

    .flex.flex-columns #carousel-ws10 .card-cta.item-cta-tx {
        width: 100%;
    }

    .flex.flex-columns #carousel-ws10 .list-features {
        display: flex;
    }



    .flex.flex-columns .section-config-tx-banner header {
        padding: 0;
    }

    .flex.flex-columns #carousel-ws10 {
        margin-top: 0;
        height: 100%;
    }

    .flex.flex-columns .section.section-rates {
        flex: 1;
    }

    .flex.flex-columns #carousel-ws10.section--cards__container:has(.badge-rate--top) {
        padding-top: 30px;
    }

    .main #title-control {

        margin-bottom: 20px;
    }

    .flex.flex-columns.flex-column-reverse:has(.column-left .section.section-rates .card-rate .badge-rate.badge-rate--top)>.column-rigth {
        padding-top: 30px;
    }

    .main-tv .flex.flex-columns #carousel-ws10 .header-rate.bg-ligth--mobile {
        background-image: linear-gradient(45deg, #820000 0%, #E60000 100%);
        color: var(--color--white);
    }

    .main-one .banner-card-rate__container .card-rate.card-rate--simplify {
        max-width: 300px;
        min-width: 300px;
    }

    .main-one .flex.flex-columns.flex-column-reverse .banner-card-rate__container .card-rate.card-rate--simplify {
        max-width: 350px;
    }

    /* Cosas que cambiar para el test */

}

@media screen and (min-width:1440px) {


    .main-tv .banner-card-rate__container .card-rate.card-rate--simplify {
        margin-right: 50px;
    }

    .main-one .section.section-banner:has(.card-rate, .card-rate.card-rate--simplify) {
        background-position-x: -50px;
    }

    .main-one .flex.flex-columns.flex-column-reverse .section.section-banner:has(.card-rate, .card-rate.card-rate--simplify) {
        background-position-x: -50px;
    }

}

/* @media screen and (min-width:1920px) {
    .main-one .section.section-banner:has(.card-rate, .card-rate.card-rate--simplify) {
        background-position-x: 0;
    }

    .main-one .flex.flex-columns.flex-column-reverse .section.section-banner:has(.card-rate, .card-rate.card-rate--simplify) {
        background-position-x: 0;
    }

    .main-tv .flex.flex-columns .section.section-banner:has(.card-rate, .card-rate.card-rate--simplify) {
        background-position-x: 0;
    }

    .main-tv .flex.flex-columns.flex-column-reverse .section.section-banner:has(.card-rate, .card-rate.card-rate--simplify) {
        background-position-x: 0;
    }

    .main-fb .flex.flex-columns.flex-column-reverse .section.section-banner:has(.card-rate, .card-rate.card-rate--simplify) {
        background-position-x: 0;
    }

    .main-fb .flex.flex-columns .section.section-banner:has(.card-rate, .card-rate.card-rate--simplify) {
        background-position-x: 0;
    }

    .main-voz .flex.flex-columns.flex-column-reverse .section.section-banner:has(.card-rate, .card-rate.card-rate--simplify) {
        background-position-x: 0;
    }

    .main-voz .flex.flex-columns .section.section-banner:has(.card-rate, .card-rate.card-rate--simplify) {
        background-position-x: 0;
    }

} */