body {
    margin: min(0, 22%);
    font-family: 'Arial', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    background-image: linear-gradient(to bottom, #f3f1eb, #fff8eb);
}
.Button-Alert {
    border-radius: 8px;
    border: 1px solid transparent;
    padding: 0.6em 1.2em;
    font-size: 1em;
    font-weight: 500;
    font-family: inherit;
    background-color: #1a1a1a;
    cursor: pointer;
    transition: border-color 0.25s;
    color: #ccc;
}
.Button-Alert:hover {
    border-color: #646cff;
}
.Button-Alert:focus,
.Button-Alert:focus-visible {
    outline: 4px auto -webkit-focus-ring-color;
}

/* Borrar si es necesario la mayoria funciona con boostrap pero por cualquier cosa lo dejo */
.contenedor-superior {
    color: #000000;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.opciones p {
    margin: 0;
    font-size: 14px;
}

.opciones p > a {
    text-decoration: none;
    color: #000000;
}

.letrero p {
    margin: 0;
    font-size: 14px;
    font-family: Tahoma, Arial, Helvetica, Sans-Serif;
}
header {
    color: #5c1316;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.logo img {
    max-width: 50px;
}
.Portal {
    display: block;
    font-family: 'Poetsen One', serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.5em;
    background-image: linear-gradient(to right, #5c1316, #8b0000, #5c1316);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.titulo {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.title_header {
    font-family: 'Poetsen One', serif;
    font-weight: 400;
    font-style: normal;
    font-size: 7dvw;
    background-image: linear-gradient(to right, #5c1316, #8b0000, #5c1316);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.Image_aniversario {
    position: relative;
    width: 500px;
    height: auto;
    display: flex;
}
.Image_aniversario img {
    margin: auto;
    width: 100%;
    height: 100%;
    opacity: 0.6;
    transition: all 0.5s ease-in-out;
}
.Image_aniversario:hover {
    img {
        opacity: 1;
    }
    .Slogan_header_2 {
        opacity: 0.6;
    }
}
.Slogan_header_1,
.Slogan_header_2 {
    background-image: linear-gradient(to right, #ffd277, #c39437, #ffd277);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    pointer-events: none;
    transition: all 0.5s ease-in-out;
}
.Slogan_header_1 {
    font-family: 'Poetsen One', serif;
    font-weight: 400;
    font-style: normal;
    position: absolute;
    left: 0;
    top: 20%;
    transform: rotate(-5deg);
    font-size: 150%;
}
.Slogan_header_2 {
    font-family: 'Satisfy', serif;
    font-weight: 400;
    font-style: normal;
    position: absolute;
    left: 0;
    bottom: 35%;
    font-size: 700%;
}
@media screen and (max-width: 750px) {
    .Slogan_header_1 {
        font-size: 100%;
        left: 15%;
    }
    .Slogan_header_2 {
        font-size: 300%;
        left: 15%;
    }
    .Image_aniversario img {
        width: 80%;
        height: 80%;
    }
    .Image_aniversario {
        width: 80%;
    }
}
/*Carreras------------------------------------- */
.info_carreras {
    font-size: 40px;
    text-align: center;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 20px;
    span {
        font-family: 'Poetsen One', serif;
        font-weight: 400;
        font-style: normal;
        background-image: linear-gradient(to right, #5c1316, #8b0000, #5c1316);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}
.card_carreras {
    display: flex;
    flex-wrap: wrap;
    row-gap: 2;
    justify-content: center;
    gap: 20px;
    margin-bottom: 50px;
}
.carrera {
    width: 250px;
    height: 354px;
    overflow: visible;
}
@media screen and (max-width: 1250px) {
    .card_carreras {
        gap: 10px;
        height: 400px;
        overflow-y: scroll;
        padding: 15px;
    }
    .carrera {
        display: none;
    }
}
.content {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 1.2s;
    box-shadow: 0px 0px 10px 1px #1f1f1f;
    border-radius: 5px;
}
.front,
.back {
    position: absolute;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 5px;
    overflow: hidden;
}

.back {
    background-color: #840106;
    width: 100%;
    height: 100%;
    justify-content: center;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.back::before {
    position: absolute;
    content: ' ';
    display: block;
    width: 130px;
    height: 160%;
    background: linear-gradient(90deg, transparent, #ffd277, #ffd277, #77530a, #77530a, transparent);
    animation: rotation_481 5000ms infinite linear;
}

.back-content {
    position: absolute;
    width: 98%;
    height: 99%;
    background-color: #840106;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 30px;
}
.back-content strong {
    background: linear-gradient(to right, #ffd277, #c39437, #ffd277);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-align: center;
}

.carrera:hover .content {
    transform: rotateY(180deg);
}

@keyframes rotation_481 {
    0% {
        transform: rotateZ(0deg);
    }

    0% {
        transform: rotateZ(360deg);
    }
}
.front {
    background: linear-gradient(to right, #ffd277, #c39437, #ffd277);
    transform: rotateY(180deg);
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.941);
    padding: 0;
    justify-content: center;
    display: flex;
    align-items: center;
    height: 100%;
}

.front .front-content {
    width: 90%;
    height: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 9px;
    box-sizing: border-box;
}

.front-content .badge {
    background-color: #ff0c0c34;
    padding: 6px 10px;
    border-radius: 10px;
    backdrop-filter: blur(6px);
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
}

.description {
    width: 100%;
    padding: 10px;
    background-color: #ff0c0c34;
    backdrop-filter: blur(5px);
    border-radius: 5px;
}

.title {
    font-size: 12px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
}
.title strong {
    font-size: 15px;
}
.front .img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    padding: 5px;
}
.img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 5px;
    filter: blur(1px);
}

/* Estilos base para la tarjeta móvil */
.carrera-mobile {
    width: 100%;
    max-width: 100%; /* Ajusta el ancho máximo según sea necesario */
    margin: 10px auto;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    background: linear-gradient(to right, #ffd277, #c39437, #ffd277);
}

.carrera-mobile a {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* Estilos para la imagen */
.img-mobile {
    width: 100%;
    height: 150px; /* Ajusta la altura según sea necesario */
    overflow: hidden;
}

.img-mobile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: blur(1px);
}

/* Estilos para el contenido */
.content-mobile {
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.9); /* Fondo semi-transparente */
    backdrop-filter: blur(5px);
}

.badge-mobile {
    background-color: #ff0c0c34;
    padding: 5px 10px;
    border-radius: 10px;
    display: inline-block;
    font-size: 12px;
    margin-bottom: 10px;
}

.title-mobile {
    font-size: 14px;
    margin: 0;
    color: #333;
}

.title-mobile strong {
    font-size: 16px;
    color: #5c1316;
}

.description-mobile p {
    font-size: 12px;
    color: #555;
    margin: 5px 0 0;
}
@media screen and (min-width: 1250px) {
    .carrera-mobile {
        display: none;
    }
}
/*--------------------------------------------------------------------------------------------------*/
.form_pasos {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 20px;
    margin-bottom: 50px;
}
.contenedor-pregunta {
    position: relative;
    background-color: #f0f0f0;
    padding: 35px;
    margin: 20px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
}

.contenedor-ampliado {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #ffffff00;
    align-items: center;
    justify-content: center;
    color: #ffffff00;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    clip-path: circle(0% at 0% 0%);
    transition: all 0.5s ease-in-out;
    cursor: pointer;
    display: flex;
}

.content_infoForm {
    padding: 10px;
    box-sizing: border-box;
    border-top: solid 1px #000000;
    box-shadow: inset 0 0px 25px #000000;
    background-image: linear-gradient(-160deg, #a54e07, #b47e11, #fef1a2, #bc881b, #a54e07);
    border-radius: 4px;
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}
.formu_info p {
    font-family: 'Poetsen One', serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.5em;
    background-image: linear-gradient(to right, #5c1316, #8b0000, #5c1316);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.formulario_button {
    text-align: center;
    margin: 30px;
}

.boton {
    width: 160px;
    height: 70px;
    border: none;
    border-radius: 20px;
    background: linear-gradient(to right, #77530a, #ffd277, #77530a, #77530a, #ffd277, #77530a);
    background-size: 250%;
    background-position: left;
    color: #ffd277;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition-duration: 1s;
    overflow: hidden;
    box-shadow: 0 10px 25px #392f1a;
}
.boton:before {
    position: absolute;
    content: 'REGISTRATE';
    color: #ffd98e;
    font-weight: 700;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    height: 90%;
    border-radius: 20px;
    transition-duration: 1s;
    background-color: rgba(0, 0, 0, 0.842);
    background-size: 200%;
    box-shadow: 0 0px 5px #fff200;
}
.boton:hover {
    background-position: right;
    transition-duration: 1s;
}

.boton:hover::before {
    background-position: right;
    transition-duration: 1s;
}

.boton:active {
    transform: scale(0.95);
}
.content_aviso {
    border: 2px solid #442f06;
    background-color: #201a00;
    border-radius: 5px;
    width: 90%;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    color: #ffd175;
}
.content_aviso .aviso {
    font-size: 28px;
    font-weight: 700;
    background: linear-gradient(to right, #ffd277, #c39437, #ffd277);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.aviso_content a {
    text-decoration: none;
    color: #ffd175;
    font-size: 18px;
    font-weight: 800;
}

.content_buscador {
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
}
.content_wrap {
    padding: 20px;
    border-radius: 10px;
    transition: all ease-in-out 0.2s;
}
.content_wrap:hover {
    box-shadow: inset 0 0px 5px #000000c7;
    background-image: linear-gradient(90deg, transparent 50px, #ffb4b8 0px, #ffb4b8 5px, transparent 52px),
        linear-gradient(#e1e1e1 0.1em, transparent 0.1em);
    background-size: 100% 30px;
    scale: 0.99;
    background-size: 100% 30px;
} /*diseño de Artvelog*/
.buscador_text {
    text-align: start;
    margin-left: 35px;
}
.buscador_text p.question {
    font-family: sans-serif;
    font-size: x-large;
    font-weight: 700;
    background: linear-gradient(to bottom, #ffd277, #c39437 15%, #ffd277);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.buscador_text p {
    color: #000000;
    text-wrap: balance;
}
.buscador_text p > a {
    text-decoration: none;
    font-weight: 800;
}
.answer {
    display: flex;
    justify-content: start;
    align-items: center;
}
.faq-button {
    width: 40px;
    height: 40px;
    margin-left: 10px;
    border-radius: 50%;
    border: none;
    background-color: #ffd277;
    background: linear-gradient(to bottom, #ffd277, #c39437 15%, #ffd277);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.151);
    position: relative;
}
.faq-button svg {
    height: 1.5em;
    color: white;
}
.faq-button:hover svg {
    animation: jello-vertical 0.7s both;
}
@keyframes jello-vertical {
    0% {
        transform: scale3d(1, 1, 1);
    }
    30% {
        transform: scale3d(0.75, 1.25, 1);
    }
    40% {
        transform: scale3d(1.25, 0.75, 1);
    }
    50% {
        transform: scale3d(0.85, 1.15, 1);
    }
    65% {
        transform: scale3d(1.05, 0.95, 1);
    }
    75% {
        transform: scale3d(0.95, 1.05, 1);
    }
    100% {
        transform: scale3d(1, 1, 1);
    }
} /*Animacion de 
Vinod Jangid*/

.tooltip {
    position: absolute;
    top: -20px;
    opacity: 0;
    background-color: #ffd277;
    background: linear-gradient(to right, #77530a, #ffd277, #77530a);
    color: #221c0f;
    font-weight: 800;
    font-size: 24px;
    padding: 5px 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition-duration: 0.2s;
    pointer-events: none;
    letter-spacing: 0.5px;
}

.faq-button:hover .tooltip {
    top: -40px;
    opacity: 1;
    transition-duration: 0.3s;
}

.fom_consulta {
    width: 210px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(160deg, #a54e07, #b47e11, #fef1a2, #bc881b, #a54e07);
    border-radius: 30px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.075);
    margin: auto;
}
#curpInput {
    width: 200px;
    height: 40px;
    border: none;
    outline: none;
    caret-color: rgb(255, 255, 255);
    background-color: rgb(255, 255, 255);
    border-radius: 30px;
    padding-left: 15px;
    letter-spacing: 0.8px;
    color: rgb(19, 19, 19);
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.414);
    font-size: 13.4px;
}

.resultados_busqueda {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.tarjeta {
    margin-top: 5px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    box-sizing: border-box;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: min(100%, 500px);
    .Resultados_de_la_busqueda {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        margin-top: 10px;

        div {
            padding: 10px;
            margin: 3px;
            font-family: 'Poetsen One', serif;
        }
    }
}

.icono {
    font-size: 54px;
}

.curp,
.datos {
    margin-bottom: 10px;
    text-align: start;
}
.curp {
    color: rgb(0, 115, 255);
    font-weight: bolder;
}
.result_Activo {
    margin-top: 15px;
    height: auto;
    text-align: center;
    border: solid 3px rgb(153, 255, 0);
    background-color: #6fff0092;
    border-radius: 5px;
}
.result_baja {
    margin-top: 15px;
    height: auto;
    text-align: center;
    border: solid 3px rgb(255, 0, 0);
    background-color: #ff000092;
    border-radius: 5px;
}
.status_espera {
    margin-top: 15px;
    height: auto;
    text-align: center;
    border: solid 3px rgb(255, 234, 0);
    background-color: #fff70092;
    border-radius: 5px;
}
.espera,
.activo,
.baja {
    font-weight: 700;
    font-size: 2.5em;
    font-family: 'Poetsen One', serif;
}
.espera {
    color: orange;
}
.activo {
    color: greenyellow;
}
.baja {
    color: red;
}
/*Animacion de carga*/
.loading-animation {
    height: 30px;
    display: inline-block;
    margin-top: 30px;
}

.loading-animation > div {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    box-shadow: 0 0 7px orange;
    background: #ffdb81;
    float: left;
    margin: 5px;
    transform: scale(2);
}

.loading-animation > div:nth-child(1) {
    animation: anm-BL-53-move1 1s infinite linear;
}

.loading-animation > div:nth-child(2) {
    animation: anm-BL-53-move2 1s infinite linear;
    animation-delay: 0.2s;
}

.loading-animation > div:nth-child(3) {
    animation: anm-BL-53-move3 1s infinite linear;
    animation-delay: 0.3s;
}

.loading-animation > div:nth-child(4) {
    animation: anm-BL-53-move4 1s infinite linear;
    animation-delay: 0.4s;
}

.loading-animation > div:nth-child(5) {
    animation: anm-BL-53-move5 1s infinite linear;
    animation-delay: 0.5s;
}

@keyframes anm-BL-53-move1 {
    50% {
        background: #ffbb00;
        transform: scale(1);
    }
}

@keyframes anm-BL-53-move2 {
    50% {
        background: #ffbb00;
        transform: scale(1);
    }
}

@keyframes anm-BL-53-move3 {
    50% {
        background: #ffbb00;
        transform: scale(1);
    }
}

@keyframes anm-BL-53-move4 {
    50% {
        background: #ffbb00;
        transform: scale(1);
    }
}

@keyframes anm-BL-53-move5 {
    50% {
        background: #ffbb00;
        transform: scale(1);
    }
}

/* Tarjetas de información de los estatus mejoradas ;D */
.info_Status {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, auto);
    gap: 15px;
    border-radius: 15px;
    overflow: hidden;
    padding: 20px;
}

@media screen and (max-width: 750px) {
    .info_Status {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    #espera,
    #activo,
    #baja {
        width: 100%;
        margin-bottom: 10px;
    }

    .espera_info,
    .activo_info,
    .baja_info {
        font-size: 1.5em;
    }

    #espera:hover,
    #activo:hover,
    #baja:hover {
        transform: none; /* Eliminar transformación en móviles */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
    }

    #espera:active,
    #activo:active,
    #baja:active {
        transform: translateY(-5px); /* Efecto de toque */
        box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3);
    }
}

.question-status {
    grid-area: 1 / 1 / 2 / 6;
    font-family: 'Poetsen One', serif;
    font-weight: 700;
    font-size: 2.8em;
    background-image: linear-gradient(to right, #8b0000, #ff4500);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-align: center;
    margin-bottom: 15px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

#espera,
#activo,
#baja {
    position: relative;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

#espera:hover,
#activo:hover,
#baja:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3);
    color: #000000;
}

#espera {
    grid-area: 2 / 1 / 5 / 3;
    background: linear-gradient(145deg, #ffc107, #ffdd57);
}

#activo {
    grid-area: 2 / 3 / 5 / 6;
    background: linear-gradient(145deg, #28a745, #85d096);
}

#baja {
    grid-area: 5 / 1 / 6 / 6;
    background: linear-gradient(145deg, #dc3545, #ff6b6b);
}

#espera,
#activo,
#baja {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    font-size: 1.8em;
    color: white;
    text-align: center;
    font-family: 'Poetsen One', serif;
}

.espera_info,
.activo_info,
.baja_info {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8em;
    text-align: center;
    font-weight: 400;
    transition: all 0.5s ease-in-out;
    border-radius: 15px;
    background-blend-mode: overlay;
}

.espera_info {
    background: linear-gradient(145deg, rgba(255, 193, 7, 0.7), rgba(255, 221, 87, 0.7));
}

.activo_info {
    background: linear-gradient(145deg, rgba(40, 167, 69, 0.7), rgba(133, 208, 150, 0.7));
}

.baja_info {
    background: linear-gradient(145deg, rgba(220, 53, 69, 0.7), rgba(255, 107, 107, 0.7));
}

.espera_info:hover,
.activo_info:hover,
.baja_info:hover {
    color: transparent;
}

.espera_info:hover {
    background: radial-gradient(circle, rgba(255, 255, 0, 0.303) 10%, rgba(255, 193, 7, 0.7) 90%);
}

.activo_info:hover {
    background: radial-gradient(circle, rgba(0, 255, 0, 0.303) 10%, rgba(40, 167, 69, 0.7) 90%);
}

.baja_info:hover {
    background: radial-gradient(circle, rgba(255, 0, 0, 0.303) 10%, rgba(220, 53, 69, 0.7) 90%);
}
@media screen and (max-width: 750px) {
    .espera_info:active,
    .activo_info:active,
    .baja_info:active {
        color: transparent;
    }

    .espera_info:active {
        background: radial-gradient(circle, rgba(255, 255, 0, 0.303) 10%, rgba(255, 193, 7, 0.7) 90%);
    }

    .activo_info:active {
        background: radial-gradient(circle, rgba(0, 255, 0, 0.303) 10%, rgba(40, 167, 69, 0.7) 90%);
    }

    .baja_info:active {
        background: radial-gradient(circle, rgba(255, 0, 0, 0.303) 10%, rgba(220, 53, 69, 0.7) 90%);
    }
}

/*---------------------------------------------------------------*/
@media screen and (max-width: 750px) {
    .opciones p,
    .letrero p {
        font-size: 40%;
    }
    .descripcion_content p {
        margin: 0;
        font-size: 14px;
        color: #272727;
        text-wrap: balance;
        text-align: start;
    }
    .navigation a {
        padding: 5px 10px;
    }
    .result_Activo,
    .result_baja,
    .result_Espera {
        width: 100%;
        height: auto;
    }
    .result_Espera {
        text-align: start;
        text-wrap: balance;
    }
}
/*Estilos de fondo de Aniversario*/
.Aniversary_Cbtis {
    position: fixed;
    top: 0;
    left: 0;
    width: auto;
    height: 90dvh;
    pointer-events: none;
}
.Aniversary_Cbtis img {
    object-fit: cover;
    object-position: center;
    height: 100%;
    width: 100%;
    animation: air_move 5s infinite ease-in-out;
    transform-origin: top;
}
.Años {
    object-fit: cover;
    object-position: center;
    height: 100%;
    width: 100%;
    animation: air_move 5.2s infinite ease-in-out;
    transform-origin: top;
}
.Cincuenta_Años {
    position: fixed;
    top: 0;
    right: 0;
    width: auto;
    height: 90dvh;
    pointer-events: none;
}
@keyframes air_move {
    0% {
        transform: translateY(0) rotateX(0deg) rotateY(0deg) skewX(0deg) scale(1);
    }
    25% {
        transform: translateY(-5px) rotateX(5deg) rotateY(2deg) skewX(2deg) scale(1.02);
    }
    50% {
        transform: translateY(-10px) rotateX(-5deg) rotateY(-2deg) skewX(-2deg) scale(1.05);
    }
    75% {
        transform: translateY(-5px) rotateX(3deg) rotateY(1deg) skewX(1deg) scale(1.02);
    }
    100% {
        transform: translateY(0) rotateX(0deg) rotateY(0deg) skewX(0deg) scale(1);
    }
}
@media screen and (max-width: 1200px) {
    .Aniversary_Cbtis {
        display: none;
        content-visibility: auto;
        contain: layout inline-size;
    }
    .Cincuenta_Años {
        display: none;
        content-visibility: auto;
        contain: layout inline-size;
    }
}
@media screen and (max-width: 1750px) {
    .Aniversary_Cbtis {
        left: -8%;
    }
    .Cincuenta_Años {
        right: -8%;
    }
}
/* Boton de descarga*/
/* animacion de  Danishrehman786 */
.download-button {
    margin: auto;
    position: relative;
    width: 200px;
    height: 60px;
    border: 2px solid #282828;
    border-radius: 5px;
    background-color: #212121;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), inset 0 1px 3px rgba(255, 255, 255, 0.3);
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s, color 0.3s, transform 0.2s;
    a {
        color: rgb(120, 50, 5);
        width: max-content;
        height: max-content;
        pointer-events: all;
    }
}

.download-button::before {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    right: 0;
    bottom: 100%;
    border-radius: 5px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
    z-index: 1;
    transition: top 0.5s ease-in-out, bottom 0.5s ease-in-out;
}

.download-button:hover::before {
    top: 0;
    bottom: 0;
}

.download-button:hover {
    background-color: #241314;
    color: #fff;
    transform: translateY(-5px);
}

.download-button .icon {
    position: absolute;
    left: 20px;
}

.download-button .icon svg {
    width: 24px;
    height: 24px;
}

.download-button .label {
    position: relative;
    z-index: 10;
}

.download-button .loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    background-image: linear-gradient(to right, #5c1316, #8b0000, #5c1316);
    filter: blur(20px);
    z-index: -1;
    animation: animate 0.8s linear infinite;
}

@keyframes animate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
/* boton dorado _ de la ficha dorada :)
/* verscion mia c0d3hdz */
.golden-button {
    touch-action: manipulation;
    display: inline-block;
    outline: none;
    font-family: inherit;
    font-size: 1em;
    box-sizing: border-box;
    border: none;
    border-radius: 0.3em;
    height: 2.75em;
    line-height: 2.5em;
    text-transform: uppercase;
    padding: 0 1em;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(110, 80, 20, 0.4),
        inset 0 -2px 5px 1px rgba(139, 66, 8, 1), inset 0 -1px 1px 3px rgba(250, 227, 133, 1);
    background-image: linear-gradient(160deg, #a54e07, #b47e11, #fef1a2, #bc881b, #a54e07);
    border: 1px solid #a55d07;
    text-shadow: 0 2px 2px rgba(250, 227, 133, 1);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    background-size: 100% 100%;
    background-position: center;
}
.download {
    text-decoration: none;
    color: #201a00;
}
.golden-button:focus,
.golden-button:hover {
    background-size: 150% 150%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23), inset 0 -2px 5px 1px #b17d10,
        inset 0 -1px 1px 3px rgba(250, 227, 133, 1);
    border: 1px solid rgba(165, 93, 7, 0.6);
    color: rgba(120, 50, 5, 0.8);
}

.golden-button:active {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(110, 80, 20, 0.4), inset 0 -2px 5px 1px #b17d10,
        inset 0 -1px 1px 3px rgba(250, 227, 133, 1);
}
/* footer -----------------------------------------------------------------------------------*/
footer {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.images_footer {
    position: relative;
    width: 350px;
    height: 350px;
    background-color: #8b0000;
    border-radius: 10000px;
    object-fit: cover;
    animation: rotate360_3D 10s ease-in-out infinite;
    box-shadow: 0 0 20px #101010;
    transition: transform 0.8s ease-in-out, filter 0.8s ease-in-out;

    img {
        width: 100%;
        height: 100%;
        border-radius: 1000px;
        filter: drop-shadow(0 0 2px #b17d10);
        transition: filter 0.8s ease-in-out;
    }
}

.images_footer:hover {
    animation: rotate_active 4s ease-in-out forwards;
    transform: rotateY(360deg); /* Aplicar transformación mientras está en hover */
}

.images_footer:not(:hover) {
    transform: rotateY(0deg); /* Volver a 0 grados */
    transition: transform 0.8s ease-in-out; /* Controlar la duración del regreso */
}
.images_footer::before {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    width: 350px;
    height: 350px;
    border-radius: 10000px;
    background: linear-gradient(
        220deg,
        rgba(148, 17, 17, 0.388) 25%,
        rgba(255, 99, 99, 0.199) 50%,
        transparent 75%,
        rgba(182, 10, 10, 0.373) 85%
    );
    backdrop-filter: brightness(1.2);
    box-shadow: inset 0 0 20px #434343;
    z-index: 10;
}

.images_footer:hover {
    filter: brightness(1.2);
}

@keyframes rotate_active {
    0% {
        transform: rotateY(0deg);
    }
    75% {
        transform: rotateY(380deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}

@keyframes rotate360_3D {
    0% {
        transform: rotateY(0deg);
    }
    25% {
        transform: rotateY(20deg);
    }
    50% {
        transform: rotateY(0deg);
    }
    75% {
        transform: rotateY(-20deg);
    }
    100% {
        transform: rotateY(0deg);
    }
}
.footer_info {
    display: flex;
    margin-top: 20px;
}
.info_footer {
    display: flex;
    flex-wrap: wrap;
    border-right: solid 1px #ffd277;
    position: relative;
    border-radius: 50px;
}
.footer_icon {
    margin: 10px;
    width: 150px;
    height: 150px;
    img {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}
.footer_text {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 10px;
    margin: 10px;
    text-align: start;
    p {
        font-size: 0.8em;
        color: #000000;
        strong {
            font-size: 1.2em;
            color: #5c1316;
        }
    }
}
.Dev_info {
    display: flex;
    justify-content: center;
    align-items: center;
    p {
        text-align: start;
        font-size: 0.8em;
        color: #000000;
        strong {
            font-size: 1.2em;
            color: #5c1316;
        }
    }
}
.icon_dev {
    width: auto;
    height: 150px;
    img {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}
@media screen and (max-width: 750px) {
    .footer_info {
        display: flex;
        flex-direction: column;
    }
    .info_footer {
        border-right: none;
        border-bottom: solid 1px #ffd277;
    }
    .footer_icon {
        width: 100px;
        height: 100px;
    }
    .footer_text {
        margin: 5px;
        p {
            font-size: 0.6em;
            strong {
                font-size: 1em;
            }
        }
    }
    .Dev_info {
        p {
            font-size: 0.6em;
            strong {
                font-size: 1em;
            }
        }
    }
    .icon_dev {
        width: 150px;
        height: auto;
    }
}
/*  elijahgummer */
.version {
    position: fixed;
    bottom: 3%;
    left: 2.5dvw;
    text-decoration: none;
    padding: 8px 16px;
    color: rgb(184, 134, 11);
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    background: rgba(255, 217, 0, 0);
    border-radius: 999px;
    user-select: none;
}

.version span {
    width: 25px;
    height: 25px;
    position: absolute;
    top: -12px;
    right: -2px;
    transform: rotate(-20deg);
    filter: blur(0.5px);
}

.version span:before,
.version span:after {
    content: '';
    position: absolute;
}

.version span:before {
    width: 1px;
    height: 100%;
    left: 12px;
    background: linear-gradient(to bottom, transparent, rgb(255, 238, 126), transparent);
}

.version span:after {
    width: 100%;
    height: 1px;
    top: 12px;
    right: -2px;
    background: linear-gradient(to left, transparent, rgb(255, 238, 126), transparent);
}

.version:hover span:after {
    display: block;
    animation: rotate 3s ease-in-out; /* Adjust timing as needed */
}

.version:hover span::before {
    display: block;
    animation: rotate 3s ease-in-out; /* Adjust timing as needed */
}

@keyframes rotate {
    0% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(180deg) scale(1.8);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

.version:before {
    content: '';
    position: absolute;
    z-index: -1;
    background: linear-gradient(160deg, #a54e07, #b47e11, #fef1a2, #bc881b, #a54e07);
    box-shadow: 0 8px 32px 0 rgba(255, 223, 0, 0.37);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(218, 165, 32, 0.18);
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    border-radius: 999px;
}

.inspired {
    position: absolute;
    bottom: 8%;
    color: rgba(184, 134, 11, 0.5);
    font-size: 12px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.inspired:hover {
    color: rgba(218, 165, 32, 0.8);
}
/* boton de wA*/
.button2 {
    display: inline-block;
    transition: all 0.2s ease-in;
    position: relative;
    overflow: hidden;
    z-index: 1;
    color: #090909;
    padding: 0.7em 3.3em 0.7em 1.7em;
    font-size: 18px;
    border-radius: 0.5em;
    background: #006d66;
    border: 1px solid #e8e8e8;
    text-decoration: none;
}

.button2 > svg {
    height: 30px;
    position: absolute;
    padding: 0px 5px;
    margin-top: -4px;
}

.button2:active {
    color: #666;
    box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff;
}

.button2:before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%) scaleY(1) scaleX(1.25);
    top: 100%;
    width: 140%;
    height: 180%;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    display: block;
    transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
    z-index: -1;
}

.button2:after {
    content: '';
    position: absolute;
    left: 55%;
    transform: translateX(-50%) scaleY(1) scaleX(1.45);
    top: 180%;
    width: 160%;
    height: 190%;
    background-color: #009087;
    border-radius: 50%;
    display: block;
    transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
    z-index: -1;
}

.button2:hover {
    color: #ffffff;
    border: 1px solid #009087;
}

.button2:hover:before {
    top: -35%;
    background-color: #009087;
    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

.button2:hover:after {
    top: -45%;
    background-color: #009087;
    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}