*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.fondo{
    background-image: url('../fondo/FondoPágina1.png');
    background-size: cover;
}
#oculto{
    display: none;
}
#logotit2{
    display: none;
}

#logotit{
    width: 115%;
    height: 5vh;
}

#titulolog{
    width: 5%;
}

body{
    border: none;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

html, body{
    height: 100%;
    display: flex;
    flex-direction: column;
}

main{
    flex: 1;
}

.menu-principal{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}

.caja{
    background: linear-gradient(rgb(240, 239, 239), rgb(192, 192, 192));
    padding: 0px;
}

.caja2{
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 13vh;
}

nav{
    top: 18px;
    right: 0px;
    margin: 0% ;
}

.dis{
    position: relative;
    display: inline-block;
}

.dis a{
    display: block;
    padding: 10px 20px;
}

.trate{
    background: black;
    height: 6vh;
    border-radius: 50vw;
    display: flex;
    align-items: center;
    margin-left: 17px;
}

.trate a{
    background: linear-gradient(yellow, rgb(255, 145, 0));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

nav a{
    color: rgb(92, 92, 92);
    font-family: Helvetica;
    font-weight: bolder;
    font-size: 1.7vw;
    text-decoration: none;
}

/*Submenù*/
.submenu{
    display: none;
    position: absolute;
    z-index: 2;
    top: 100%;
    left:0;
    background: linear-gradient(rgba(62, 192, 116, 0.616),rgba(44, 167, 85, 0.856));
    padding: 0;
    list-style: none;
    min-width: 180px;
    border-radius: 0 0 25px 25px;
}

.submenu-item{
    display: block;
}

.submenu-item a{
    padding: 10px 20px;
    color: black;
    white-space: nowrap; 
}

.submenu-item a:hover{
    color: white;
}

.dis:hover > .submenu{
    display: block;
}

nav a:hover{
    background: linear-gradient(to right, rgb(74, 199, 105), rgb(32, 173, 143));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.prncipal{
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
}

.arg{
    padding-bottom: 58px;
    margin-left: 100px;
}

.organizar{
    display: flex;
    align-items: flex-end;
}

#verde{
    width: 98%;
    height: 24vh;
}
.medio{
    display: flex;
}

#credi{
    max-width: 100%;
    max-height: 95vh;
    margin-right: 20px;
    animation: credi 5s ease-in-out forwards;
}

@keyframes credi {
    from {
        transform: translateY(100px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.back-whave{
    background: white;
    display: flex;
    align-content: center;
    width: 6vw;
    height: 13vh;
    justify-content: center;
    flex-wrap: wrap;
    border-radius: 50%;
    margin-bottom: 10%;
    margin-right: 30px;
}
#whave1{
    display: none;
}
#whave{
    width: 100%;
    height: 8vh;
}

.texto-container{
    margin-top: 40px;
}

.text1{
    font-family: Helvetica;
    font-size: 4vw;
    font-weight: bolder;
    background: linear-gradient(rgb(155, 154, 154), rgb(88, 88, 88));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    margin: 0 0;
    opacity: 0;
    transform: translateX(-100px);
    animation: text1 1.5s ease-in-out forwards;
}

.text1:nth-child(1) { animation-delay: 0s; }
.text1:nth-child(2) { animation-delay: 0.5s; }
.text1:nth-child(3) { animation-delay: 1s; }
.text1:nth-child(4) { animation-delay: 1.5s; }
.text1:nth-child(5) { animation-delay: 2s; }
.text2:nth-child(6) { animation-delay: 2.5; }

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

.text2{
    font-family: Helvetica;
    font-size: 3.5vw;
    font-weight: bold;
    margin: 0 0;
    background: linear-gradient(to right, rgb(74, 199, 105), rgb(32, 173, 143));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    opacity: 0;
    animation: text2 4.5s ease-in-out forwards;
}

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

.obtener{
    background: linear-gradient(orange, yellow );
    border-radius: 50%;
    height: 10vh;
    width: 24%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#gratis{
    width: 45%;
    height: 5vh;
}

#textGift{
    font-family: Helvetica;
    font-size: 2vw;
    color: white;
    text-decoration: none;
}


.regalo{
    background: linear-gradient( rgb(74, 199, 105), rgb(32, 173, 143));
    display: flex;
    max-width: 76%;
    border-radius: 50vh;
    max-height: 7vh;
    margin: 7% 0;
    justify-content: flex-start;
    align-items: center;
}

.pie{
    position: relative;
    bottom: 0;
    width: 100%;
    background: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 4;
    box-shadow: 0px 0px 37px 36px black
}

.footer{
    display: flex;
    margin-top: -12px;
}

.footer2{
    display: flex;
    flex-direction: column;
    margin-left: 10px;

}

.info-footer{
    display: flex;
}

.info-footer p {
    font-family: Helvetica;
    font-size: 1vw;
    color: white;
    margin: 0;
}

.tel-foot{
    border-left: 1px solid white;
    padding-left: 10px;
    margin-left: 10px;
}

.correo{
    border-left: 1px solid white;
    padding-left: 10px;
    margin-left: 10px;
}

.info-footer2{
    display: flex;
}

.info-footer2 p {
    font-family: Helvetica;
    font-size: 0.7vw;
    color: white;
}

#onix{
    width: 10%;
    height: 7vh;
}

.red img{
    width: 12%;
    height: 2.5vh;
    margin-left: 10px;
}

.red #face{
    width: 0.6vw;
}

/*pruba de la burguer*/
.menu-toggle {
    display: none;
}

/* Estilos del botón hamburguesa */
.menu-icon { /* Oculto en escritorio */
    display: none;
    cursor: pointer;
}

.menu-icon img {
    width: 7vw;
    height: 7vw;
}

@media (max-width: 480px) {
    .caja{
        width: 100vw;
    }
    .caja2{
        height: 6vh;
    }
    .fondo{
        background:none;

    }
    .prncipal{
        width: 100vw;
        height: 98vh;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .arg{
        margin-left: 0;
        padding: 0;
    }
    .texto-container .text1{
        font-size: 12vw;
        text-align: center;
    }
    .texto-container .text2{
        font-size: 11vw;
    }

    .regalo{
        max-width: 74vw;
        max-height: 6vh;
        margin: 4vh 0;
    }
    .obtener{
        width: 20vw;
        height: 10vh;
    }
    #gratis{
        width: 9vw;
        height: 5vh;
    }
    #textGift{
        font-size: 7vw;
    }
    .organizar{
        display: flex;
        align-items: center;
    }
    #credi{
        transform: scaleX(-1) !important;
        margin: 0;
        max-height: 40vh;
    }
    .back-whave{
        background: rgb(2, 204, 2);
        display: flex;
        width: 20vw;
        height: 10vh;
        flex-wrap: wrap;
        border-radius: 50%;
    }
    #whave1{
        display: block;
        width: 12vw;
        height: 6vh;
    }
    #whave{
        display: none;
    }

    .pie{
        width: 100vw;
    }
    .footer{
        width: 90vw;
        display: flex;
        justify-content: center;
    }
    #onix{
        width: 13vw;
        height: 3.5vh;
    }
    .footer2{
        width: 75vw;
    }
    .info-footer p{
        font-size: 2vw;
    }
    .info-footer2 p{
        font-size: 1vw;
    }
    .redes{
        position: relative;
        bottom: 1vh;
    }
    .red img{
        width: 2vw;
        height: 1vh;
    }
    .red #face{
        width: 1vw;
    }
    .medio{
        display: none;
    }
    /*Burguer*/
    .menu-icon {
        display: block;
    }

    .menu-principal {
        display: none;
        flex-direction: column;
        background: linear-gradient(rgb(255, 166, 0), rgb(255, 255, 0) );
        position: absolute;
        z-index: 2;
        top: 6vh;
        right: 0vw;
        width: 50vw;
        height: 24vh;
        border-radius: 0 0 2vh 2vh;
    }
    .dis a{
        padding: 0.5vh;
    }

    .submenu{
        display: none;
        flex-direction: column;
        background: linear-gradient(rgb(62, 192, 116),rgb(44, 167, 85));
        position: absolute;
        z-index: 3;
        top: -3.3vh;
        left: -65.1vw;
        width: 50vw;
        height: 14vh;
        border-radius: 0 0 2vh 2vh;
        padding-bottom: 4vh;
    }

    #submenuUs{
        top: -6.4vh;
        height: 8vh;
    }

    /* Mostrar menú cuando el checkbox esté marcado */
    .menu-toggle:checked ~ .menu-principal {
        display: flex;
    }
    #oculto{
        display: block;
    }
    #logotit2{
        display: block;
        width: 30vw;
        height: 3.5vh;
    }
    #logotit{
        display: none;
    }
    #titulolog{
        display: none;
    }
    nav a{
        font-size: 4vw;
    }
}