#form {
    background-color: #310037 !important;
}
.bg-form-custom {
    background-color: #EAD3E7 !important;
    border-radius: 16px!important;
}

.bg-form-custom label{
    color: #6b115f !important;
    font-size: 16px !important;
    margin-top: 3px;

}
.accordion-button {
    padding-top: 0px;
    padding-bottom: 0px;

}

.form-switch {
  padding-left: 0px; 
}

.accordion-body p {
    color:#211F1F !important;

}

.form-check-input:checked {
    background-color: #6b115f;
    border-color: #6b115f;
}

.accordion-button::after {
    content: '+';
    color: #fff;
    font-size: 1.5rem;
    font-weight: bold;
    background-image: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2em;
    height: 2em;
}
/* FAQ: Cambiar flecha por + y color blanco */
.accordion-button::after {
    content: '+';
    color: #fff;
    font-size: 2rem;
    font-weight: bold;
    background-image: none !important;
}
/* Fonts */
/* Resets */
.img-fluid {
    width: 100%;
}

.noPadding {
    padding: 0;
}

.row {
    padding: 0 !important;
    margin: 0 !important;
}

.row.no-gutters {
    margin-right: 0;
    margin-left: 0;
}

.row.no-gutters>[class^="col-"],
.row.no-gutters>[class*="col-"] {
    padding-right: 0;
    padding-left: 0;
}

section.noPadding {
    padding: 0em 0;
}

/* Fonts */
/* Fonts */
body,
input,
textarea,
select {
    font-family: Montserrat, Geneva, Verdana, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    margin: 2px!important;
    font-size: 14px!important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-display: swap;
}

h1 {
    font-size: clamp(1.75rem, 1.4375rem + 1vw, 2rem);
    font-weight: 700;
    color: #ffffff;
}

h2 {
    font-size: clamp(1.5rem, 1.3438rem + 0.5vw, 1.625rem);
    font-weight: 600;
    color: #DA40C6;
}

h3 {
    font-size: clamp(1.5rem, 1.44rem + 0.3vw, 1.8rem);
}

h4 {
    font-size: clamp(1.2rem, 0.825rem + 1.2vw, 1.5rem);

}

p,
li,
label {
    font-size: clamp(1rem, 0.8438rem + 0.5vw, 1.125rem);
    color: #ffffff !important;
    font-weight: 500;
}
label,
.form-label {
    font-weight: 600 !important;
}

/* Respuestas del formulario (inputs, radios, checkboxes, select, textarea y sus labels) */
.form-control,
.form-check-input,
.form-check-label,
input[type="radio"] + label,
input[type="checkbox"] + label,
select,
textarea {
    font-weight: 400 !important;
}


label {
    background-color: #EAD3E7 !important;
}

/* Color de las respuestas del form */
.form-control,
.form-check-input,
.form-check-label {
    color: #310037  !important;
}

section .morado {
    background-color: #310037 !important;
}

.smallTxt {
    font-size: 0.7em;
    text-align: center;
}

/* links */
a {
    color: #e739f7;
    text-decoration: underline;
    transition: color 0.3s;
}

a:hover,
a:active,
a:focus {
    color: #ec7834 !important;
    border-color: #fff !important;
}

/* Buttons */
.btn {
    font-style: normal;
    font-weight: 400;
    font-size: 1em;
    padding: 0.8em 1.3em !important;
    text-decoration: none;
    transition: color 0.4s, border 0.3s;
    position: relative;
    transition: color 0.3s, background-color 0.3s;
    text-transform: none !important;
    -webkit-border-radius: 0.4em;
    -ms-border-radius: 0.4em;
    -o-border-radius: 0.4em;
    border-radius: 0.4em;
}

.link-terminos:hover {
      color: #5a024b !important;
    }
.cta {
    display: inline-block;
    max-width: 200px;
    width: 100%;
    text-decoration: none;
    border-radius: 0.5rem;
    color: #fff;
    background-color: #98007D;
    text-align: center;
    font-weight: 600;
    padding: 0.5rem 2rem;
    transition: 0.3s ease;
    border: oldlace;
    font-weight: 600;
    padding: 0.5rem 1rem;
    transition: 0.3s ease;
    
    
}

.cta3 {
    display: inline-block;
    max-width: 200px;
    width: 100%;
    text-decoration: none;
    border-radius: 0.5rem;
    color: #ffffff;
    background-color: #E79122;
    text-align: center;
    font-weight: 600;
    padding: 0.5rem 2rem;
    transition: 0.3s ease;
    border: oldlace;
    font-weight: 600;
    padding: 0.5rem 1rem;
    transition: 0.3s ease;
    
    
}
.cta3:hover {
    border: 2px solid #fff !important;
}

.cta.red:hover {
    border: 2px solid #fff !important;
}

.vibrate-1  {
 -webkit-animation: vibrate-1 1s linear infinite both;
         animation: vibrate-1 1s linear infinite both;
}
/* ----------------------------------------------
 * Generated by Animista on 2025-9-8 9:44:26
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation vibrate-1
 * ----------------------------------------
 */
@-webkit-keyframes vibrate-1 {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px);
  }
  40% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
  }
  60% {
    -webkit-transform: translate(2px, 2px);
            transform: translate(2px, 2px);
  }
  80% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@keyframes vibrate-1 {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px);
  }
  40% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
  }
  60% {
    -webkit-transform: translate(2px, 2px);
            transform: translate(2px, 2px);
  }
  80% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}



input{
    accent-color: #6b115f !important;
}

header {
    background-color: #9B0080;

    .img-fluid {
        max-width: 200px;
        width: 100%;
    }
}

p {
    color: #ffffff;
    font-weight: 500;
}

/* Como funciona la dinamica */
.dinamica {
    background-color: #98007D;

    h2 {
        color: #ffffff;
        font-weight: 600;
    }

    ul {
        columns: 2;
        column-gap: 5rem;

        li {
            color: #fff;
            font-weight: 600;
            margin-top: 0.5rem;
        }
    }

    ol {
        li {
            color: #fff;
            margin-bottom: 1rem;

            ul {
                columns: 1;

                li {
                    font-weight: 400;
                    font-size: 1.2rem;
                }
            }
        }
    }

    a {
        color: #310037;
    }
}



/*Hero Banner*/

.banner_flotante {
 -webkit-animation: vibrate-1 3.5s linear infinite both;
         animation: vibrate-1 3.5s linear infinite both;
}


/**
 * ----------------------------------------
 * animation banner_flotante
 * ----------------------------------------
 */
@-webkit-keyframes banner_flotante {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px);
  }
  40% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
  }
  60% {
    -webkit-transform: translate(2px, 2px);
            transform: translate(2px, 2px);
  }
  80% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@keyframes banner_flotante {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px);
  }
  40% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
  }
  60% {
    -webkit-transform: translate(2px, 2px);
            transform: translate(2px, 2px);
  }
  80% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}


.heroBanner {
    background-color: #310037;
    /* background-image: url(https://image.mkt.sultanes.com.mx/lib/fe3711747364057d771476/m/1/bc22f597-5f28-4fa5-9f49-1e5a10601b80.jpg); */
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    
    

    img {
        &.march {
            max-width: 400px;
            width: 100%;
            filter: drop-shadow(2px 4px 6px black);
        }
    }

    h4 {
        color: #DA40C6;

    }
    li{
        color: #fff;
        font-weight: 400;
    }
}

/* Title abono */
.abono {
    h2 {
        color: #042142;
        font-weight: 600;
    }

    h3 {
        color: #6b6b6a;
        font-weight: 600;
    }
}


/* FORM */
.form {
    background-image: url();
    background-size: cover;
    background-attachment: fixed;
    background-position: bottom center;
    background-repeat: no-repeat;
    overflow-x: hidden;

    h2 {
        color: #f3c148;
        font-weight: 600;
    }

    h3 {
        color: #fff;
        font-weight: 600;
    }

    p {
        color: #fff !important;
        font-weight: 600;
    }

    #multi-step-form {
        h3 {
            color: #042142;
            font-weight: 600;
        }

        p {
            color: #6B6B6A;
            font-weight: 500;
        }

        .step {
            .content-inputs {
                background-color: #fff;
                border-radius: 1rem;
            }
        }

        .next-step,
        .prev-step {
            font-weight: 600;

            &:hover {
                background-color: #000;
                color: #fff !important;
            }
        }

        .next-step {
            background-color: #f8101e;
            color: #fff;
        }

        .prev-step {
            background-color: #fff;
            color: #042142;
        }

        .label_input {
            color: #042142;
            font-weight: 600;
        }

        .form-control {
            border-radius: 0.5rem;
            border: 1px solid #000;
            background-color: #fff;
            color: #042142;
            font-weight: 500;

            &:focus {
                border-color: #f3c148;
                box-shadow: 0 0 0 0.25rem rgba(213, 248, 16, 0.25);
            }
        }

        .form-check-input {
            border: 1px solid #000;
            background-color: #310037 ;
            color: #fff;
            

            &:focus {
                border-color: #f3c148;
                box-shadow: 0 0 0 0.25rem rgba(213, 248, 16, 0.25);
            }
        }

        .form-check-label {
            color: #042142;
            font-size: 1rem;
            font-weight: 600;

            a {
                color: #042142;
                text-decoration: underline;
                transition: color 0.3s;

                &:hover,
                &:active,
                &:focus {
                    color: #fe4912 !important;
                }
            }
        }
    }
}

/* ABONOS */
.abonos {
    background-color: #042142;

    h2 {
        color: #f3c148;
        font-weight: 600;
    }

    p {
        color: #fff;
        font-weight: 600;
    }

    .abono {
        width: 32%;
        border-radius: 1rem;
        background-color: #fff;

        img {
            max-width: 150px;
            width: 100%;
            margin: 0 auto;
        }

        h3 {
            color: #042142;
            font-weight: 600;
        }

        p {
            color: #6b6b6a;
            text-align: start;
            font-weight: 500;
            font-size: 1.2rem;
        }
    }
}

/* FAQS */
.faq {
    background-color: #310037;

    h2 {
        color: #ffffff;
        font-weight: 600;
    }

    .accordion {
        --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(250, 36, 207, 0.658) !important;

        .accordion-item {
            border-radius: .5rem;
            

            .accordion-button {
                background-color: #98007D;
                border-radius: .5rem;

                &:focus {
                    border-color: #042142;
                }

                h4 {
                    color: #ffffff;
                    font-weight: 600;
                }
            }
        }
    }
}

/* FOOTER */
.footer-blanco {
    background-color: #fff !important;

    p {
        color: #666666 !important;
    }

    ul li {
        width: 40px;
        height: 40px;
        position: relative;
        border-radius: 50%;
        margin: 0 .2em;
        top: 0;
        transition: .3s ease;
        background-color: #9B0080 !important;
    }

}

.cta2{
    background-color: #DA40C6;
    color: #fff !important;
    padding: 0.5rem 3rem !important;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease;

    &:hover {
        background-color: darken(#6b115f, 10%);
        border-color: #ffff;
    }
}

footer .logo {
    max-width: 250px!important;
    width: 100%;
}

/* Loading */
.loader {
    width: 100%;
    height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    background-color: #9B0080;
}

.loader img {
    max-width: 200px;
    width: 100%;
    height: auto;
    -webkit-animation: puff-in-center 1s cubic-bezier(0.47, 0, 0.745, 0.715) both;
    animation: puff-in-center 1s cubic-bezier(0.47, 0, 0.745, 0.715) both;
}




@-webkit-keyframes puff-in-center {
    0% {
        -webkit-transform: scale(2);
        transform: scale(2);
        -webkit-filter: blur(4px);
        filter: blur(4px);
        opacity: 0;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

@keyframes puff-in-center {
    0% {
        -webkit-transform: scale(2);
        transform: scale(2);
        -webkit-filter: blur(4px);
        filter: blur(4px);
        opacity: 0;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

/*Responsive*/
/*Large Desktop*/




/* Media query para reducir el ancho de la imagen en la sección cuando la pantalla es menor a 769px */
@media (max-width: 992px) {
  .march {
    width: 70% !important;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}