body {
    margin: auto;
    width: 100%;
    max-width: 1200px;
    font-family: Avenir;
    background: #fff;
}

/* Desktop */
/* Titulo */
.warranty-icons-title {
    text-align: center;
    width: 100%;
    margin: 0;
    padding: 1rem 0 0 0;
    color: #111;
    transition: ease-in 1s;

    h1 {
        font-family: 'Hanno Test';
        font-size: 36px;
        margin: 1rem;
    }

    p {
        font-size: 20px;
        width: 60%;
        margin: auto;
    }

    .warranty-title-box {
        background-color: #fff;
        border-radius: 200px;
        padding: 20px 0;
        margin: 20px;
    }

    .warranty-icons-title-logo {
        width: 25%;
        color: #111;
    }

    .warranty-icons-title-products {
        width: 50%;
        max-width: 1366px;
    }

    .warranty-icons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        max-width: 1000px;
        margin: 2rem auto;

        .warranty-icon {
            width: 33%;
            justify-content: center;

            img {
                width: 84px;
                height: 84px;
                margin: 20px;
            }

            .warranty-icon-image {
                width: 100px;
                margin: 20px;
                padding: 10px;
                border-radius: 50%;
            }
        }


        :nth-child(4),
        :nth-child(5) {
            width: 50%;
        }

        h4 {
            font-size: 24px;
            font-family: 'Avenir Black';
        }

        p {
            font-size: 24px;
            font-family: 'Avenir Book';
            width: 95%;
        }

        .warranty-icon-texts {
            width: 100%;
        }
        
    }
}

.img-safe {
    max-width: 450px;
}

/* Opciones y tabla */

.warranty-table-options {
    color: #111;
    margin: 0;
    max-width: 1600px;
    margin: auto;

    .custom-container-warranty__table-options-titles {
        display: flex;
        margin: 20px 0;

        div {
            width: 50%;
            align-self: center;
            margin: 0 20px;
            background-color: #7322A3;
            color: #fff;
            border-radius: 100px;
            display: flex;
            padding-right: 32px;

            img {
                width: 62.5px;
                height: 45px;
                align-self: center;
                margin-left: 10px;
            }

            h2 {
                text-align: center;
                padding: 1.5rem 0;
                font-size: 30px;
                margin: auto;
            }
        }

        :nth-child(2) {
            padding-right: 0;
        }
    }

    .custom-container-warranty__table-options {
        display: flex;
        width: 100%;
        margin: auto;

        .custom-container-warranty__table {
            align-items: center;
            flex: 1;
            margin: auto;
        
            img {
                width: 100%;
                border-radius: 30px;
            }

            h2 {
                display: none;
            }

            /* Tabla */

            .comparison-table {
                width: 95%;
                max-width: 600px;
                margin: 10px;
                background: linear-gradient(to right, #8E5CEF, #EC9594);
                border-top-right-radius: 20px;
                border-top-left-radius: 20px;
                border-bottom-right-radius: 20px;
                border-bottom-left-radius: 20px;
                color: #fff;
            
              }
              
              .header, .feature {
                display: grid;
                grid-template-columns: 1.5fr 1fr 1fr;
                text-align: center;
              }
              
              .header {
                align-items: center;
                height: 100%;
              }
            
              .feature {
                align-items: center;
              }
              
              .option {
                padding: 2px 10px;
                border: 1px solid #ffffff;
              }
              
              .option:last-child {
                min-height: -webkit-fill-available;
                display: flex;
                align-items: center;
                place-content: center;
              }
              
              .feature-name, .feature-available {
                padding: 2px;
                border: 1px solid #ddd;
                min-height: -webkit-fill-available;
              }
              
              .feature-name {
                text-align: left;
                display: flex;
                align-items: center;
            
                p {
                    text-align: center;
                    margin: auto;
                    width: 100%;
                }
              }
              
              .feature-available {
                display: flex;
            
                p {
                    text-align: center;
                    margin: auto;
                    font-size: 28px;
                }
              }
            
              .icon-available{
                width: 40px;
                margin: auto;
              }
              
              .feature-available:empty {
              }
            
              .feature-last {
                :first-child {
                    border-bottom-left-radius: 20px;
                }
                :last-child {
                    border-bottom-right-radius: 20px;
                }
              }
        }

        .custom-container-warranty__options {
            text-align: center;
            flex: 1;
            margin: 0 auto;
            max-height: 416px;

            h2 {
                display: none;
            }

            .custom-container-warranty__options-title {
                
                h3 {
                    font-size: 32px;
                    margin: 30px 0;
                }
            }
            

            img {
                width: 40%;
            }

            .custom-container-warranty__options-div {
                width: 90%;
                margin: 0 auto;
                background-color: white;
                border: 1px solid #ccc;
                box-shadow: 0 4px 8px rgba(0,0,0,0.1);
                padding: 20px 10px;
                border-radius: 20px;
                height: 100%;

                select {
                    width: 95%;
                    margin: auto;
                }

                label {
                    height: fit-content;
                    width: 80%;
                    margin: auto;
                }

                .custom-container-warranty__options-select-product {
                    display: block;
                    width: 100%;
                    height: 100%;
                    margin: auto;
                    padding: 0;
                    justify-content: center;
                    text-align: center;
                    text-align: -webkit-center;

                    img {
                        align-self: center;
                        margin: auto;
                    }

                    
                }

                div {
                    width: 50%;
                    text-align: left;
                    padding-left: 10px;
                }

                .product-select-menu {
                    display: block;
                    width: 100%;
                    margin: auto;
                    padding: 0;
                    justify-content: center;
                    text-align: center;
                    text-align: -webkit-center;
                    height: 10%;

                    select {
                        margin: 0 0 10px;
                        font-size: 20px;
                    }
                }

                .product-select-image {
                    width: 100%;
                    height: 45%;

                    img {
                        height: 100%;
                        width: auto;
                    }
                }

                .product-select-info {
                    display: block;
                    width: 100%;
                    align-self: center;
                    text-align: center;
                    height: 25%;

                    p {
                        text-align: left;
                        font-size: 18px;
                        font-weight: bold;
                        margin: 0;
                        width: 35%;
                    }

                    #price {
                        font-weight: 400;
                        text-align: right;
                    }

                    #warrantyPrice {
                        font-weight: 400;
                        text-align: right;
                    }

                    #totalPrice {
                        font-weight: 400;
                        text-align: right;
                    }

                    b {
                        font-size: 36px;
                    }

                    .product-select-info-p {
                        display: flex;
                        width: 100%;
                        place-content: center;
                    }
                }
                .product-select-button {
                    display: flex;
                    width: 100%;
                    align-items: center;
                    text-align: center;
                    height: 20%;

                    a {
                        background-color: #471D80;
                        color: #f0f0f0;
                        padding: 10px;
                        font-size: 22px;
                        border-radius: 50px;
                        width: 75%;
                        height: fit-content;
                        margin: 10px auto;
                        font-family: 'Helvetica-Neue-Light';
                        text-decoration: none;
                    }
                }
            }
        }

    }
}

/* Steps */
.custom-container-warranty__steps-title {
    text-align: center;
    margin: 30px auto;
    background-color: #7322A3;
    width: 60%;
    border-radius: 100px;

    div {
        display: flex;

        img {
            width: 62.5px;
            height: 45px;
            align-self: center;
            margin-left: 10px;
        }
    }

    h3 {
        font-size: 32px;
        color: #fff;
        margin: auto;
        padding: 1.5rem 0;
        border-radius: 1rem;
    }

    .custom-container-warranty__steps {
        display: flex;

        .step {
            width: 33%;

            .bullet {
                svg {
                    width: 72px;
                    height: 72px;
                }
            }

            img {
                width: 90%;
                border: #111 1px solid;
                border-radius: 20px;
                padding: 10px;
                margin-top: 20px;
                background-color: white;
                border: 1px solid #ccc;
                box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            }

            p {
                font-size: 32px;
                font-weight: 600;
                margin-top: 25px;
            }
        }
    }
}
.new-table {
    border: #fff 1px solid;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-top-left-radius: 20px;
    /* background: linear-gradient(to right, #8E5CEF, #EC9594); */
    background: #fff;
    margin: 10px;

    table {

        thead {
            th {
                color: #111;
                font-weight: 400;
                border: 1px solid #111;
                display: flex;
                margin: auto;
                align-items: center;
                width: 100%;
                height: 100%;
                padding: 2px;
                justify-content: center;
                text-align: center;
            }

            :nth-child(1) {
                border-top-left-radius: 20px;
            }

            :nth-child(3) {
                border-top-right-radius: 20px;
            }
        }

        tr {
            display: grid;
            grid-template-columns: 1.5fr 1fr 1fr;
            text-align: center;
            text-align: -webkit-center;
            
            :nth-child() {
                border-radius: 20px;
            }
        }
    
        td {
            font-size: 16px;
            padding: 2px;
            border: #111 1px solid;
            color: #111;
            display: flex;
            justify-content: center;
            align-items: center;

            p {
                display: flex;
                margin: auto;
            }
        
            .icon-available1 {
                width: 50px !important;

                img {
                    width: 20px !important;
                }
            }
        }
    }
    .border-name-1 {
        border-bottom-left-radius: 20px;
    }

    .border-name-2 {
        border-bottom-right-radius: 20px;
    }
}

/* Fin Desktop */

/* Mobile */
@media (max-width: 992px) {
    /* Titulo */
    .warranty-icons-title {
        width: 100%;

        h1 {
            font-size: 32px;
        }

        img {
            width: 60% !important;
            max-width: 990px !important;
        }

        .warranty-icons-title-logo {
            img {
                width: 60%;
            }
        }
        p {
            width: 90%;
            font-size: 16px;
        }

        .warranty-title-box {
            border-radius: 30px;
            width: 80%;
            margin: auto;

            img {
                width: 60% !important;
            }
        }
        /* Iconos */
        .warranty-icons {
            display: block;
            width: 100%;

            .warranty-icon {
                display: flex;
                width: 100%;
                padding: 0;
                margin: 10px 0;
                align-items: center;

                img {
                    width: 42px !important;
                    height: 42px !important;
                    margin: 10px 30px;
                }

                .warranty-icon-texts {
                    display: block;
                    width: 100%;
                    text-align: left;

                    h4 {
                        font-size: 14px;
                    }
                    
                    p {
                        margin: 0;
                        font-size: 12px;
                    }
                }
            }
        }
    }

    .warranty-icons-title-products {
        width: 80%;
    }

    /* Tabla */
    .warranty-table-options {

        .custom-container-warranty__table-options-titles {
            display: none;
        }

        .custom-container-warranty__table-options {
            width: 100%;
            display: block;
            .custom-container-warranty__table {
                max-height: max-content;
                text-align: center;
                text-align: -webkit-center;

                h2 {
                    display: block;
                    background-color: #7322A3;
                    color: #fff;
                    padding: 1rem 0;
                    text-align: center;
                    margin: 20px auto;
                    font-size: 24px;
                    width: 100%;
                    max-width: 400px;
                    border-radius: 1rem;
                }

                .comparison-table {
                    font-size: 14px;

                    .feature 
                    .feature-available
                    .icon-available
                    {
                        width: 30px;
                    }
                }

            }

            /* Comparador */
            .custom-container-warranty__options {
                max-height: max-content;
                h2 {
                    display: block;
                    background-color: #7322A3;
                    color: #fff;
                    padding: 1rem 0;
                    text-align: center;
                    margin: 20px auto;
                    font-size: 24px;
                    width: 100%;
                    max-width: 400px;
                    border-radius: 1rem;
                }
                .custom-container-warranty__options-div {
                    width: 95%;
                    max-width: 500px;
                    height: max-content;
                    margin: auto;
                    padding: 20px;
                    .custom-container-warranty__options-select-product {
                        width: 100%;
                        padding: 0;

                        .product-select-menu {
                            select {
                                font-size: 22px;
                            }
                        }

                        .product-select-image {
                            align-self: center;
                            width: 40%;
                            padding: 0;
                            img {
                                min-width: 100%;
                                max-width: 100%;
                                height: auto;
                                align-self: center;
                            }
                        }

                        .product-select-info {
                            width: 50%;

                            .form-select {
                                width: 100%;
                                padding: 2px;
                            }

                            a {
                                width: 100%;
                            }
                        }

                        .product-select-info {
                            display: block;
                            width: 60%;
                            align-self: center;
                            text-align: center;
        
                            select {
                                margin: 0 0 10px;
                                font-size: 18px;
                            }
        
                            p {
                                text-align: left;
                                width: 50%;
                                font-size: 22px;
                                font-weight: bold;
                            }
        
                            #price {
                                font-weight: 400;
                            }
        
                            #warrantyPrice {
                                font-weight: 400;
                            }
        
                            #totalPrice {
                                font-weight: 400;
                            }
        
                            b {
                                font-size: 36px;
                            }
        
                            .product-select-info-p {
                                display: flex;
                                width: 100%;
                            }
        
                        }
                        .product-select-button {
                            a {
                                background-color: #6729d6;
                                color: #f0f0f0;
                                padding: 10px;
                                font-size: 22px;
                                border-radius: 50px;
                                width: 95%;
                                margin: 10px auto;
                                font-family: 'Helvetica-Neue-Light';
                                text-decoration: none;
                            }
                        }
                    }
                }
            }
        }
    }
    /* Pasos a seguir */
    
    .custom-container-warranty__steps-title {
        text-align: center;
        width: 100%;
        border-radius: 1rem;
        max-width: 400px;

        div {
            justify-content: center;

            img {
                width: 50px;
                height: 36px;
            }
        }

        h3 {
            margin: 5px 0;
            font-size: 24px;
        }

        .custom-container-warranty__steps {
            display: block;

            .step {
                max-width: 600px;
                width: 80%;
                margin: auto;

                img {
                    width: 100%;
                    border: 1px solid #111;
                    border-radius: 10px;
                    padding: 10px;
                    margin: 10px 0;
                    background-color: white;
                    border: 1px solid #ccc;
                    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
                }

                p {
                    font-size: 26px;
                }
            }
        }
    }
}
  
  /* Progress Bar */

  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

:root {
    --color:  oklch(86.63% 0.25 148.01);
    --line-border-empty: oklch(76.63% 0.25 148.01);
    --text-empty:        oklch(71.63% 0.25 148.01);
    --line-border-fill:  oklch(64.29% 0.26 360);
    --text-fill:         oklch(46.63% 0.25 148.01);
} 

* {
    box-sizing: border-box;
}

.progress-bar-container {
    display: flex;
    align-items: center;
    margin: 0;
    padding-bottom: 200px;
}

.container-progress-bar {
    text-align: center;
    width: 100%;
}

.progress-container {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 30px;
    max-width: 100%;
    width: 60%;
    margin: auto;
}

.progress-container::before {
    content:'';
    background-color: #ccc;
    position: absolute;
    top: 30px;
    left: 80px;
    transform: translateY(-50%);
    height: 4px;
    width: 75%;
    z-index: -1;
}

.progress {
    background-color: #471D80;
    position: absolute;
    top: 30px;
    left: 80px;
    transform: translateY(-50%);
    height: 4px;
    max-width: 75%;
    width: 0%;
    z-index: -1;
    transition: 400ms ease;
}

.text-wrap {
    display: inline-block;
    text-align: center;
    width: 200px;
    text-align: -webkit-center;
    cursor: pointer;
}

.text-wrap p {
    font-weight: 400;
    font-size: 18px;
    color: #111;
}

.text-wrap.active p {
    font-weight: 500;
    color: #471D80;
    transition: 400ms ease;
}

.circle {
    background-color: #fff;
    border: 3px solid #ccc;
    color: #471D80;
    font-weight: 600;
    font-size: 28px;
    border-radius: 50%;
    height: 62px;
    width: 62px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 400ms ease;
}

.text-wrap.active div.circle {
    border-color: #471D80;
    background: #471D80;
    color: #fff;
}

.btn-progress {
    background-color: #fff;
    color: #6729d6;
    border: 1px solid #6729d6;
    border-radius: 5px;
    cursor: pointer;
    font-family: inherit;
    padding: 10px 30px;
    margin: 5px;
    font-size: 14px;
}

.btn-progress:hover {
    background: #6729d6;
    color: #fff;
}

.btn-progress:active {
    transform: scale(0.98);
}


.btn-progress:focus {
    outline: 0;
}

.btn-progress:disabled {
    background-color: #fff;
    border: 1px solid #6729d6;
    cursor:not-allowed;
    color: #ccc;
    transform: none;
}

/* Images */

.progress-container-images {
    display: flex;
    flex: 2 1;
    align-items: center;
    margin: 20px auto;  
    justify-content: center;
    height: 400px;
}

.progress-container-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 40%;
    height: 400px;
}

.progress-container-image img{
    height: 400px;
}

.progress-container-text {
    width: 30%;
    height: 100%;
    text-align: left;
    border: 1px solid #ccc;
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);;
    display: flex;
    align-items: center;
    padding: 20px;
    background-color: #fff;
}

.interactive-image {
    border: 1px solid #111;
    border-radius: 20px;
    padding: 10px;
    display: none;
    background-color: #fff;
}

.interactive-text {
    display: none;
    font-size: 22px;
    text-align: center;
}

.active {
    display: block;
}

.active1 {
    display: block;
}

.btn-circle {
    display: flex;
    position: fixed;
}

@media (max-width: 992px) {

    .progress-container {
        width: 80%;
    }

    .progress-container-images {
        display: block;
        height: 700px;
    }

    .progress-container-image {
        width: 100%;
        height: 600px;
    }

    .progress-container-image img {
        width: auto;
        height: 600px;
    }

    .progress-container-text {
        width: 100%;
        max-width: 300px;
        height: 100px;
        margin: auto;
        border: none;
        box-shadow: none;
        text-align: center;
    }

    .progress-container-text p {
        width: 80%;
        margin: 10px auto;
    }

    .new-table{
        width: 90%;
        max-width: 600px;
    }
}

@media (max-width: 736px) {
    .progress-container {
        width: 80%;
    }

    .progress-container::before {
        width: 65%;
    }

    .progress {
        width: 65% !important;
    }

    .progress-container-images {
        height: 500px;
        margin: 0;
    }

    .progress-container-image {
        height: 400px;
    }

    .progress-container-image img{
        height: 400px;
    }
}