.col-sm-6{
    font-weight: bold;
}
.card {
    width: 95%; /* Ancho del card */
    height: 98%; /* Altura del card */
    border-radius: 35px !important; /* Bordes redondeados */
    display: flex;
    flex-direction: column; /* Apila las filas verticalmente */
    margin: auto; /* Centrado */
    padding: 30px;
    background: linear-gradient(#ffed0096, #ffed008f), /* Capa de color negro */ url(./../img/FONDO.png) center / cover no-repeat;
}

.container-titulo h1 {
    color: #4e2178; /* Color del texto */
    font-size: 25px;
    font-weight: bolder;
    margin: auto;
}

.letras-formulario {
    color: #4e2178; /* Color del texto */
    font-size: 15px; /* Tamaño de la fuente */
    margin: 10px 0 5px 0;
}
.container-qr{
    background-color: #742384;
    border-radius: 30px;
}
/* Estilos base para los contenedores */
.imagen-instruccion, .imagen-instruccion2 {
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    border-radius: 25px;
    margin: auto;
}

/* Diferencias específicas */
.imagen-instruccion {
    justify-content: end; /* Centra horizontalmente hacia la derecha */
}

.imagen-instruccion2 {
    justify-content: center; /* Centra horizontalmente */
    height: 170px;
}

.imagen-instruccion2 img {
    height: 100%; /* Ajusta la altura de la imagen al contenedor */
    width: auto; /* Mantiene la proporción de la imagen */
}
/* Estilos para las imágenes */
.imagen-instruccion img{
    height: auto; /* Ajusta la altura de la imagen al contenedor */
    width: 100%; /* Mantiene la proporción de la imagen */
    transform: scale(1.1);
}
.custom-yape-qr{
    margin: 60px 0 0 0;
    transform: scale(2);
}
.label-custom1{
    font-size: 30px;
    font-weight: bolder;
}
.label-custom2{
    font-size: 13px;
}
.label-custom4{
    color: #fff200;
    font-size: 30px;
}
.container-titulo p {
    color: #4e2178; /* Color del texto */
    font-size: 15px;
    margin: auto;
    font-weight: bold;
}

.container-titulo p span {
    display: inline-block; /* Para comportarse como un botón */
    background-color: #4e2178;
    color: #ffffff;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 13px;
    text-align: center;
}
.container-logo{
    width: auto;
    height: auto;
}
.container-logo img{
    width: 75%;
    height: auto;
}
.opt-yape{
    --bg-yape-selected: #00d0b5;
    --border-yape-selected: 3px;
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    max-width: 72px;
    height: auto;
    cursor: pointer;
    margin-bottom: 15px;
}
.opt-yape > input{
    width: 0;
    height: 0;
}

.opt-yape > input:checked::before{
    content: "";
    position: absolute;
    top: calc(0px - var(--border-yape-selected));
    left: calc(0px - var(--border-yape-selected));
    width: calc(100% + var(--border-yape-selected)*2);
    height: calc(100% + var(--border-yape-selected)*2);
    background-color: var(--bg-yape-selected);
    z-index: 1;
    border: solid var(--border-yape-selected) var(--bg-yape-selected);
}

.opt-yape > img{
    width: 100%;
    height: auto;
    z-index: 2;
}
.opt-yape > small{
    z-index: 2;
}
.opt-yape > input:checked ~ small{
    color: #fff;
    font-weight: bold;
}
/* Diseño del botón */
.boton-animado {
    position: relative; /* Necesario para animaciones */
    display: inline-block; /* Asegura que tenga el comportamiento correcto */
    background-color: #4e2178; /* Fondo morado */
    color: #ffd700; /* Letras amarillas */
    font-size: 16px; /* Tamaño del texto */
    font-weight: bold; /* Negrita */
    padding: 5px 40px; /* Espaciado interno */
    border: none; /* Sin bordes */
    border-radius: 25px; /* Bordes redondeados */
    overflow: hidden; /* Oculta la animación fuera del contenedor */
    transition: background-color 0.3s ease, color 0.3s ease;
}
.terminos{
    color: #4e2178; /* Letras amarillas */
}
/* Diseño del botón */
.boton-animado:disabled {
    position: relative; /* Necesario para animaciones */
    display: inline-block; /* Asegura que tenga el comportamiento correcto */
    background-color: #4e2178; /* Fondo morado */
    color: #ffd700; /* Letras amarillas */
    font-size: 16px; /* Tamaño del texto */
    font-weight: bold; /* Negrita */
    padding: 5px 40px; /* Espaciado interno */
    border: none; /* Sin bordes */
    border-radius: 25px; /* Bordes redondeados */
    overflow: hidden; /* Oculta la animación fuera del contenedor */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.boton-animado::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
    transform: skewX(-25deg);
    transition: left 0.5s ease;
}

.boton-animado:hover::before {
    left: 100%; /* Mueve la animación hacia la derecha al pasar el mouse */
}

.boton-animado:hover {
    background-color: #5e298b; /* Cambia a un tono más claro de morado */
    color: #fff200; /* Letras amarillo más brillante */
}
.boton-animado:active {
    background-color: #5e298b; /* Cambia a un tono más claro de morado */
    color: #fff200; /* Letras amarillo más brillante */
}


@media (min-width:986px) {
    .container-titulo h1 {
        font-size: 28px;
    }
}
@media (min-width:1023px) {
    .container-titulo h1 {
        font-size: 29px;
    }
    .label-custom1 {
        font-size: 35px;
    }
    .boton-animado {
        padding: 5px 75px;
    }
    .boton-animado:disabled {
        padding: 5px 75px;
    }
}
@media (min-width:1052px) {
    .container-titulo h1 {
        font-size: 30px;
    }
}
@media (min-width:1080px) {
    .container-titulo h1 {
        font-size: 31px;
    }
}
@media (min-width:1110px) {
    .container-titulo h1 {
        font-size: 32px;
    }
}
@media (min-width:1200px) {
    .container-titulo h1 {
        font-size: 36px;
    }
}
@media (min-width:1300px) {
    .container-titulo h1 {
        font-size: 39px;
    }.label-custom1 {
        font-size: 45px;
    }.label-custom2 {
        font-size: 15px;
    }
}
@media (min-width:1500px) {
    .container-titulo h1 {
        font-size: 47px;
    }.label-custom2 {
        font-size: 20px;
    }.label-custom4 {
        font-size: 40px;
    }
}
@media (min-width:1650px) {
    .container-titulo h1 {
        font-size: 50px;
    }.label-custom2 {
        font-size: 24px;
    }.label-custom4 {
        font-size: 45px;
    }
}