@import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap");
@import 'animate.css';
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

:root {
    --yellow: #ffbc00;
    --black: #111111;
    --brown1: #1d0c0a;
    --brown2: #3a1913;
    --brown3: #57251d;
    --brown4: #743226;
    --brown5: #913e30;
    --brown6: #d38a59;
    --brown7: #F8EDB1;
    --txtSize: clamp(13px, 4vw + .6rem, 30px);
    --txtSizeFooter: clamp(7px, 1.5vw + .5rem, 17px);
    --fontTittle: clamp(7px, 1.5vw + .5rem, 17px);
    --fontGeneral: clamp(10px, .5vw + .9rem, 18px);
    --fonttype: "Plus Jakarta Sans", serif;
}

/* Estilos generales */
.csDad {
    margin: 0;
    padding: 15vh 10%;
    font-family: 'Arial', sans-serif;
    background: url(img/tupoFinal.webp), radial-gradient(circle, rgba(255, 233, 106, 0.736), rgba(117, 57, 0, 0.677));
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

@media (max-width: 700px) {
    .csDad {
        padding: 3em 10%;
    }

    .coming-soon-container {
        padding: 40px 20px !important;
    }
}

.coming-soon-container {
    border: 2px solid var(--brown7);
    width: 80%;
    background: rgba(255, 255, 255, 0.477);
    padding: 40px 60px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
    animation: fadeIn 2s ease-in-out;
}

.h1 {
    color: var(--brown3);
    font-size: var(--fontTittle);
    margin-bottom: 20px;
    font-weight: 500;
    animation: bounce 2s 3;
}

.coming-soon-container p {
    padding: .5rem 20%;
    font-weight: 400;
    font-stretch: expanded;
    color: var(--brown1);
    font-size: var(--fontGeneral);
    margin-bottom: 30px;
    animation: slideIn 1.5s ease-in-out;
}

.info {
    color: var(--brown3);
    margin-bottom: 1rem;
}



/* Animaciones */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-30px);
    }

    60% {
        transform: translateY(-15px);
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

/* Efecto de partículas (opcional) */
.particles {
    display: none;
    position: absolute;
    width: 100%;
    height: 60%;
    top: 15vh;
    left: 0%;
    z-index: 1;
    overflow: hidden;
}

.particles span {
    position: absolute;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation: float 5s infinite ease-in-out;
}

@keyframes float {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateY(-100vh) translateX(50vw);
        opacity: 0;
    }
}




@media screen and (max-width: 750px) {
    .container p {
        padding: 0px 10%;

    }

    .form-container {
        padding: 0px 8px;
        border-radius: 8px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        width: 90%;
        text-align: center;
    }

    .container h1 {
        font-size: x-large;
    }

}

/* .coming-soon-container p:nth-child(3),
        .coming-soon-container p:nth-child(2){
    color: var(--brown5);
} */


.btnGoFundMe {
    position: relative;
    margin: 0;
    padding: 17px 35px;
    outline: none;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-transform: uppercase;
    background-color: #fff;
    border: 1px solid rgba(228, 137, 32, 0.6);
    border-radius: 10px;
    color: var(--brown3);
    font-weight: 400;
    font-family: inherit;
    z-index: 0;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
}

.btnGoFundMe span {
    color: var(--brown3);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.7px;
}

.btnGoFundMe:hover {
    animation: rotate624 0.7s ease-in-out both;
}

.btnGoFundMe:hover span {
    animation: storm1261 0.7s ease-in-out both;
    animation-delay: 0.06s;
}

@keyframes rotate624 {
    0% {
        transform: rotate(0deg) translate3d(0, 0, 0);
    }

    25% {
        transform: rotate(3deg) translate3d(0, 0, 0);
    }

    50% {
        transform: rotate(-3deg) translate3d(0, 0, 0);
    }

    75% {
        transform: rotate(1deg) translate3d(0, 0, 0);
    }

    100% {
        transform: rotate(0deg) translate3d(0, 0, 0);
    }
}

@keyframes storm1261 {
    0% {
        transform: translate3d(0, 0, 0) translateZ(0);
    }

    25% {
        transform: translate3d(4px, 0, 0) translateZ(0);
    }

    50% {
        transform: translate3d(-3px, 0, 0) translateZ(0);
    }

    75% {
        transform: translate3d(2px, 0, 0) translateZ(0);
    }

    100% {
        transform: translate3d(0, 0, 0) translateZ(0);
    }
}

.btn-shine {
    border: 1px solid;
    overflow: hidden;
    position: relative;
}

.btn-shine span {
    z-index: 20;
}

.btn-shine:after {
    background: var(--brown3);
    content: "";
    height: 155px;
    left: -75px;
    opacity: 0.4;
    position: absolute;
    top: -50px;
    transform: rotate(35deg);
    transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
    width: 50px;
    z-index: -10;
}

.btn-shine:hover:after {
    left: 120%;
    transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}

.cDbGFM{
    display: flex;
    align-content: center;
    justify-content: center;
}