*{
    box-sizing: border-box;
}

body, header, nav, ul, li, div, footer, img{
    margin: 0;
    padding: 0;
    
}
body {
    font-family: sans-serif;
}

main{
    width: 100%;
    margin-bottom: 30px;
}

header{
    height: 100px;
}

@media screen and (min-width: 779px) {
    
    .conten-nav  {
        background: linear-gradient(90deg, #fff9 0%, #0009 30%);
        width: 100%;
        height: 75px;
        position: fixed;
        top:0;
        z-index: 10; 
    }
    
}

@media screen and (max-width: 780px) {
    .conten-nav{
        position: initial;
        top: initial;
        background-color: #0009;
        width: 100%;
        height: 75px;
        z-index: 1;
    }

    *{
        cursor: default;
    }
}
.conten-ul {
    list-style: none;
    display: flex;
    justify-content: end;
    letter-spacing: 1px;
    flex-flow: row wrap;
    margin-right: 50px;
}

.conten-li{
    margin: 15px 10px;
}

.conten-link {
    display: inline-block;
    padding: 15px;
    text-decoration: none;
    font-size: 13px;
    color: #aeaf9e  ;
    transition: all .2s;
}

.conten-link:hover {
    color: #e45705;
    border-bottom: 5px solid #e45705;
    
}

.link-producto {
    background-color: #e45705;
    border-radius: 20px;
    color: black;
}

.link-producto:hover {
    background-color: #e45705;
    color: #bdb2aa;
    border-bottom: none;
    
}

.conten-img-navegador{
    position: absolute;
    top: 0;
    width: 150px;
    padding-left: 30px;
    top: -5px;
}

.img-navegador{
    width: 150px;
}


/* SECCION DE LA BARRA DE NAVEGACION RESPONSIVA*/
@media screen and (max-width: 780px){
    .conten-barraNavegacion{
        position: absolute;
        max-width: 50px;
        cursor: pointer;  
        padding: 20px 0px; 
        right: 0;
        top:-4px;
        margin-right: 30px;
        z-index: 10;
    }


    .linea{
        background-color: aliceblue;
        width: 40px;
        height: 3px;
        margin: 8px 0px;
        z-index: 11;
    }

    .linea:hover{
        box-shadow: 0 0 10px 0 #000;
    }

    .navegador{
        height: 0;
        top:65px;
        overflow: hidden;
        z-index: 102;
    }


    .navegador.active{
        width: 100%;
        position: absolute;
        height: 300px;
        text-align: center;
        z-index: 13;


    }

    .conten-ul{
        display: block;
        background-color: #0009;
        margin-right: initial;
        z-index: 14;
    }

    .conten-link{
        width: 100%;
        z-index: 1;

    }

    .conten-link:hover {
        border-bottom: initial;
        background-color: #000;
        border-radius: 20px;
    } 

    .link-producto:hover{
        background-color: #e45705;
        color: rgb(255, 255, 255);
    }

    .conten-img-navegador{
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .img-navegador{
        position: relative;
        left: -30px;

    }
}

.icono-wsp i{
    background-color: #09980E;
    position: absolute;
    font-size: 50px;
    right: 25px;
    flex-grow: 1;
    color:white;
    padding: 8px 10px;
    border-radius: 50%;  
    z-index: 20; 
    position: fixed;
    bottom: 25px;
    animation: animacion 2s linear infinite;
}

@keyframes animacion {
    0%, 7% {
    transform: rotateZ(0);
    }
    15% {
    transform: rotateZ(-15deg);
    }
    20% {
    transform: rotateZ(10deg);
    }
    25% {
    transform: rotateZ(-10deg);
    }
    30% {
    transform: rotateZ(6deg);
    }
    35% {
    transform: rotateZ(-4deg);
    }
    40%, 100% {
    transform: rotateZ(0);
    }
}

.icono-wsp i:hover{
    font-size: 60px;
    transition: all ease 210ms ;
}

/*  CONTENIDO DEL CARTEL DE PRODCUTOS*/

.conten-img-cartel{
    width: 96%;
    margin: auto;
    overflow: hidden;
}

.img-cartel{
    width: 100%;
}

.conten-info-motivdor-productos{
    width: 90%;
    margin-left: 5%;
    margin-top: -10px;
    margin-bottom: 60px;
}

.descripcion-suplementoGym{
    font-size: 40px;
    font-family: "Lilita One", sans-serif;
    text-align: center;
    margin-top: 14px;
    margin-bottom: 0;
}

.cartel-img-responsivo{
    display: none;
}

@media screen and (max-width: 580px){
    /*SECCION DEL  CARTEL*/

    .img-cartel{
        display: none;
    }

    .cartel-img-responsivo{
        display: flex;
        width: 100%;
    }

    .descripcion-suplementoGym{
        font-size: 24px;
    }

    /*SECCION DEL SUBTEMA*/

    .conten-titulo-productos{
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .titulo-productos{
        max-width: 300px;
        box-shadow: inset 5px 5px 10px #dacfba,
            inset -5px -5px 10px #fff7de, 5px 5px  #0008;
            padding: 10px !important;
    }

    .icono-wsp i{
        font-size: 30px;
        
    }
    
}

/* CONTENIDO DE LOS SUPLEMENTOS (PRODUCTOS)*/

.conten-titulo-productos{
    width:100%;
    display: flex;
    justify-content: center;

}
.titulo-productos{
    width: 95%;
    margin-bottom: 30px;
    margin-top: -40px;
    font-size: 20px;
    text-align: center;
    padding: 20px;
    background-color: #ecdcd3;
    background-color: #ecdcd3; 
    box-shadow: inset 8px 8px 25px #aca7a7,
            inset -8px -8px 25px #ffffff;
    text-shadow: 0.05em 0.05em 0.05em #000;
    border-radius: 10px;
}

.conten-general-productos{
    width: 90%;
    background-color: #0001;
    margin: auto;
    border: 1px solid #0001;
    border-radius: 10px;
}

.conten-productos{
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.conten-img-productos{
    width: 230px;
    border: 1px solid transparent;
    background-color: #fff;
    box-shadow:  6px 6px 9px #a3a3a3,
    -6px -6px 9px #ffffff;
    border-radius: 13px;
    height: 300px;
    margin:  10px 20px;
    position: relative;
    border: .5px solid #0003;
}


.img-producto{
    width: 100%;
    border-radius: 13px;
    
}

.nombre-producto{
    text-align: center;
    font-size: 15px; 
    margin-top: 5px;
    margin-bottom: 0;
    font-family: "Rowdies", sans-serif;
    font-weight:bold;
    font-style: normal; 
    letter-spacing: 2px;  
}

.nombre-producto:hover{
    transition: color 0.2s ease;
    color: #ec690b;
}

.precio-producto{
    text-align: center;
    margin-top:  5px;
    margin-bottom: 5px;
    font-weight: bolder;
    color: #e45705;
}

/* INICIO DE LA VENTANA MODAL*/
.boton-modal{
    position: absolute;
    bottom: 8px;
    margin: 0;
    left: 50%; 
    transform: translateX(-50%) ;
    background-color: #d8c1b2;
    color: #030303;
    border-radius: 20px;
    cursor: pointer;
    transition: all .4s ease;
}

.boton-informacion{
    cursor: pointer;
    margin: 0;
    padding: 8px 15px;
    border: 1px solid #0002;
    border-radius: 20px;
    outline: none;
}

.boton-modal:hover{
    background-color: #c55c1f;
    color: #fff;
}


input[type="checkbox"]{
    display: none;
}

input[type="checkbox"]:checked ~ .conten-general-modal{
    display: flex;
}
.conten-general-modal{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0; left: 0;
    background-color: #000b;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 100;
}


.conten-modal{
    max-width: 650px;
    min-height: 350px ;
    padding: 20px;
    box-shadow: 0 0 10px 0 #fff;
    background-image: url("../Productos/img/img-modal.jpg");
    overflow: hidden;
    background-size: cover ;
    
}

@media screen and (max-width: 600px) {
    .conten-modal{
        max-width: 90%;
        min-height: 510px;
    }

    .img-producto-responsivo{
        width: 130px !important;
    }

    .modal{
        height: 140px !important;
        margin-top: -15px !important;
    }
    
}

.conten-informacion-modal{
    min-height: 240px;
    padding: 5px;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    
}

.conten-img-modal{
    width: 180px;
    height: 200px;
    margin-top: 40px;
}

.conten-info-modal{
    max-width: 350px;
    padding: 15px 10px 0px;
    background-color: #0001;
    border: .5px solid #0001;
    border-radius: 10px;
}


.producto-modal{
    font-size: 19px;
}

.frase-modal1{
    padding: 5px;
    background-color: #fa5e04;
    width: 230px;
    border-radius: 30px;
    color: #fff;
    font-size: 14px;
    margin-bottom: 0;
    
}

.frase-modal2{
    color: rgb(129, 129, 175);
    font-size: 15px;
    margin-top: 10px;
    position: relative;
    left: -8px;
    max-width: 280px;
}

.descripcion-modal{
    color: #000d;
    text-align: justify;
    margin-bottom: 10px ;
    overflow-wrap: break-word;
}

.precio-modal{
    font-size: 30px;
    color: #ff0000;
}


.conten-botones-modal{
    display: flex;
    justify-content: center;
    margin-top: 10px;
    position: relative;
    gap: 120px;
    flex-wrap: wrap;
}

@media screen and (max-width:600px){
    .conten-botones-modal{
        gap: 20px !important;
        
    }
}
.boton-cerrar label{
    padding: 7px 20px;
    background-color: #920303;
    color: #ffffff;
    border-radius: 20px;
    cursor: pointer;
    transition: all 300ms ease;
}

.boton-cerrar{
    width: 103px !important;
    cursor: pointer;
    
}
.conten-modal .boton-cerrar label:hover{
    background-color:#835518;
    color:#fff;
}
.cerrar-modal{
    width:100%;
    height: 100vh;
    position: absolute;
    top:0; left: 0;
    z-index: -1;
}


.boton-wsp{
    text-decoration: none;
    padding: 7px 20px ;
    color: #000;
    background-color: #0c8a07;
    border-radius: 20px;
    width: 103px !important;
    transition: all 1s ease;
    border: 0.5px solid #0009;
}

.boton-wsp:hover{
    background-color: #22e61c;
}




/*CONTENEDOR DEL PIE DE PAGINA*/


.conten-piedepagina{
    width: 100%;
    background-color: #000;
}

.linea-1-footer, .linea-2-footer{
    margin: 0;
}

.linea-1-footer, .linea-2-footer{
    margin: auto;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    width: 180px;
}


.linea-2-footer{
    margin-top: 30px;
}

.conten-general-siguenos {
    width: 100%;
    padding-top: 30px;
    text-align: center;
    color: #d8c9c9;

}

.conten-titulo-siguenos{
    padding-top: 10px;
}

.icono-facebook i, .icono-instagram i, .icono-tiktok i {
    color: #d8c9c9;
    margin: 3px;
    margin-top: 10px;
    font-size: 30px;
}


.conten-general-iconos-footer {
    display: flex;
    width: 100%;
    height: 20px;
    justify-content: center;
}

.conten-info-piedepagina {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    min-height: 170px;
    color: #d8c9c9;
    justify-content: center; 
    gap: 50px;
    margin-top: 50px;
}

.conten-logo-footer{
    width: 250px;
    height: 180px;
    clip-path: ellipse(47% 44% at 50% 50%);
    margin-top: -30px;
}

.img-footer{
    width: 250px;
}

.titulo-nos{
    margin-bottom: 20px;
}

.titulo-con{
    margin-bottom: 12px;
}


.lista-contactanos{
    text-align: left;
    color: white !important;
    list-style: none;
}

.icono-wsp{
    text-decoration: none;
    color: white !important;
    cursor: pointer;
}
.link-footer {
    text-decoration: none;
    color: #a79999;
}

.contactanos{
    width: 280px;
    text-align: center;
}

.correo{
    text-decoration: none;
    color: white;
    cursor: pointer;
}

.link-contactanos{
    padding: 2px;
}
.link-nosotros{
    text-decoration: none;
    color: white;
    margin: -7px;
    display: flex;
}
.conten-mapa-ubicacion{
    width: 250px;
    margin-top: -30px;
    padding-bottom: 20px;
}

.conten-kong-gym-hosting {
    width: 100%; 
    text-align: center; 
    color: #fff;
}


.hosting{
    margin: 0;
    padding-bottom: 10px;
}