:root{

    --header-height : 3.5 rem;
    --title-color: hsl(0,0%,95%);
     --text-color:  hsl(0,0%,70%);
    --text-color-light:  hsl(0,0%,60%);
    --body-color: hsl(0, 0%, 0%);
    --container-color: hsl(0, 0%, 8%);
    

    /*Fuentes y tamaños*/
    --body-font : "Poppins", sans-serif;
    --second-font : "Montserrat" , sans-serif;
    --biggest-font-size : 2.75rem;
    --h1-font-size : 1.5rem;
    --h2-font-size : 1.25rem;
    --h3-font-size : 1rem;
    --normal-font-size : .938rem;
    --small-font-size : .813rem;
    --smaller-font-size : .75rem;

    /*Grosor de la fuente*/

    --font-regular: 400;
    --font-medium : 500;
    --font-semi-bold : 600;

    --z-tooltip: 10;
    --z-fixed : 100;
}

/*responsive*/
@media screen and (min-width: 1152px) {

   :root{
    --biggest-font-size : 5.5rem;
    --h1-font-size : 2.5rem;
    --h2-font-size : 1.5rem;
    --h3-font-size : 1.25rem;
    --normal-font-size : 1rem;
    --small-font-size : .875rem;
    --smaller-font-size : .85rem;
   }     
        
}

/*base*/

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

html{
    scroll-behavior: smooth; /*mejora las transiciones en el scroll*/
}

body,button,input{
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    color : var(--text-color);
}

body{
    background-color: var(--body-color);
}
button,input{
    outline: none;
    border:none;
}

h1,h2{
    color:var(--title-color);
    
    font-weight: var(--font-semi-bold);
}

ul{
    list-style: none;
}

a{
    text-decoration: none;
}


img{
    display: block;
    max-width: 100%; /*evitar desbordamiento*/
   

}

.container {
    max-width: 1120px;
    margin-inline: 1.5rem;

}

.grid{
    display: grid;
    gap : 1.5rem;
}

.section{
    padding-block: 5rem 1rem;
}

.section__title{
    text-align: center;
    font-size: var(--h1-font-size);
    margin-bottom: 1.5rem;
}

.main{
    overflow: hidden;
}




/*HEADER Y NAV*/
.header{
    position: fixed;
    width: 100%;
    background-color: transparent;
    top : 0; /*solo con position*/
    left : 0;
    z-index: var(--z-fixed); /*sobreponer el nav*/
}



/*IMPORTANTE*/
.nav{
    height: var(--header-height);
    display:flex;
    justify-content: space-between;
    align-items: center;
}

.nav__logo{
    color: var(--title-color);
    font-size: var(--h2-font-size);
    font-weight: var(--font-medium);

}

.nav__toggle,.nav__close{
    display: flex;
    font-size: 1.25rem;
    color: var(--title-color);
    cursor: pointer;

}


/*Para moviles*/


@media screen and (max-width: 1023px) {
    .nav__menu{
        position: fixed;
        top: -100%; /*se va hacia atras, poner 0 para verlo mejor*/
        left: 0;
        /*background-color: rgb(0, 0, 0);*/
        width: 100%;
        padding-block: 4rem;
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px) ;
        transition: top .4s;
    }
    .nav__logo{
        padding-block: .5rem;
    }

   

    
    
}

.nav__list{
    text-align: center;
    display: flex;
    flex-direction: column; /*el display flex se alinea en una columna*/
    row-gap: 2.5rem;
 
}
.nav__link{
    position: relative;
    color:var(--title-color);
    font-family: var(--body-font);
    font-weight: var(--font-regular);
}

.nav__close{
    position: absolute;
    top: 1rem;
    right: 1.5rem;

}

.show-menu{
    top: 0;
}

/*BLUR*/

.blur__header::after{
    content: '';
    position: absolute;
    width: 1000%;
    height: 100%;
    background-color: hsla(0, 0%, 0%, .3);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px) ;
    top: 0;
    left: 0;
    z-index: -1;
}


/*INICIO*/

.inicio{
    position: relative; /*no deja que los elementos hijos se desborden mas alla del div de iniciio, por eso se coloca relative*/
}

.inicio__bg{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 750px;
    object-fit: cover;
    object-position: center;
}
.inicio__shadow{ /*Propiedades de sombra en un div vacio*/
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 800px;
    background: linear-gradient(180deg,
    hsla(0, 0%, 0%,0) 58%, hsl(0, 0%, 0%) 78% );

}


.inicio__container{
    position: relative; /*hace que el texto se ponga encima de la imagen*/
    padding-top: 3rem;
    row-gap : 3rem;
}

.inicio__data{
     text-align: center;
}

.inicio__subtitle{
    font-size: var(--h3-font-size);
    margin-bottom: .5rem;
    text-shadow: 2px 2px 4px black;
}

.inicio__title{
    font-size: var(--biggest-font-size);
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px black;
}

.inicio__description{
    margin-bottom: 2rem;
    color: var(--title-color);
    text-shadow: 
    0 0 10px #000033, /* Sombra azul-negra difuminada */
    0 0 5px #00003a, /* Sombra azul-negra difuminada */
    0 0 5px #0a0a31, /* Sombra azul-negra difuminada */
    0 0 20px #434343;
}

.inicio__cards{
    grid-template-columns: 240px ;
    justify-content: center;
}

.inicio__card{
    position: relative;
    overflow: hidden; /* Ocultar el contenido que se desborda del contenedor */
}

.inicio__card-img{
transition: transform .4s;
}

.inicio__card-shadow{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
    hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 125% );
}

.inicio__card-title{
    bottom: 1rem;
    position: absolute;
    color: var(--title-color);
    left: 1rem;
    z-index: 1;
    text-shadow: 2px 2px 4px black;
}

.inicio__card:hover .inicio__card-img{
    transform: scale(1.2);
   

}

/*BUTTON*/

.button{
    background-color: hsla(0, 0%, 100%, .2);
    color: var(--title-color);
    padding: 1.25rem 1.5rem;
    display: inline-flex; /*flex de columnas, la flecha y el texto*/
    align-items: center;
    column-gap: .5rem;
    font-weight: var(--font-medium);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
   
}

.button:hover {
    background-color: hsla(0, 0%, 100%, .1); /* Cambia el color de fondo al pasar el mouse */
}

.button i{
    font-size: 1.25rem;
    transition: transform .4s;
    font-weight: initial;
    
}

.button:hover i {
    transition: 0.3s;
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
  }


  /*NOSOTROS*/

.nosotros__container{
    row-gap: 3rem;
  }

.nosotros__data{
    text-align: center;
}

.nosotros__description{
    margin-bottom: 2rem;
    z-index: 1;
    color: var(--title-color);
}

.nosotros__image{
    position: relative;
    justify-self: center;
    overflow: hidden;
}

.nosotros__img{
    width: 300px;
    transition: transform .4s;
}

.nosotros__shadow{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
    hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 125% );
}

.nosotros__image:hover .nosotros__img{
    transform: scale(1.2);
}

/*SERVICIOS*/

.servicio__container{
    padding-top: 1.5rem;
    grid-template-columns: 300px;
    justify-content: center;
    row-gap: 2.5rem;
   
}
 



.servicio__image{
    position: relative;
    overflow: hidden;
    margin-bottom: 1rem;
}

.servicio__img{
    transition: transform .4s;
    width:100%;
}

.servicio__image:hover .servicio__img{
    transform: scale(1.2);
}

.servicio__shadow{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
    hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 125% );
}

.servicio__title{

    font-size: var(--h3-font-size);
    margin-bottom: .5rem;
}

.servicio__text{
    font-size: var(--h2-font-size);
    font-weight: var(--font-medium);
    
}

.hidden {
    transition: opacity 0.3s ease-in-out, height 0.3s ease-in-out, overflow 0.3s ease-in-out;
    height: 0;
    overflow: hidden;
    opacity: 0;
}

.show__content-cards {
    height: auto;
    overflow: visible;
    opacity: 1;
}

/*.servicio__button{
    justify-content: center;
    align-items: center;
    width: 100vh;
    position: relative;
    z-index: 1;
    margin-top: -209px;
    
}*/


/*SERVICIO*/

.contacto{
    position: relative;
}

.contacto__image{
   position: absolute;
    overflow: hidden;
    
    
}

.contacto__img{

    width: 100vw;
    height: 333px;
    object-fit: cover;
    object-position: center;
}

.contacto__shadow{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
    hsl(0, 0%, 0%) 5%, hsla(0, 0%, 0%,0) 40%,hsla(0, 0%, 0%,0) 60%,hsl(0, 0%, 0%) 92% );
}

.contacto__content{
   position: relative;
   padding-top: 16rem;
   text-align: center;
   row-gap: 2.5rem;
    
}

.contacto__user{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    column-gap: .5rem;
}

.contacto__perfil{
    width: 25px;
    
}


.contacto__user:hover .contacto__perfil{
    transition: 0.3s;
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
}

.contacto__text{
    font-size: var(--h3-font-size);
    color: var(--title-color);
    font-weight: var(--font-semi-bold);
    
}

.contacto__button{
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 1.5rem;
    cursor: pointer;
    
}

.contactobtn__width{
    
    width: 70%;
    margin: auto;
   margin-top: -50px;
    
    
   
}

/*JOIN*/

.join__container{ 
    row-gap: 3rem;
    padding-bottom: 2.5rem;
    margin-top: -40px;
}




.join__form{
  display: grid;
  row-gap: 1rem;  
}

.join__input{
    
    padding: 1.25rem 1rem;
    background-color: var(--container-color);
    border: none;
    resize: none;
   
}

.join__textarea{
    color: var(--title-color);
    font-family: var(--body-font);
    font-size: 17px;
}

.join__label{
    
    font-weight: var(--font-semi-bold);
}

.join__button{
    cursor: pointer;
}

.join__image{
    position: relative;
    justify-self: center;
    overflow: hidden;
}

.join__img{
    width: 900px;
    transition: transform .4s;

}

.join__shadow{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, hsla(0,0%,0%,0)50%,hsl(0,0%,0%)125%);
}

.join__image:hover .join__img{
    transform: scale(1.2);
}


/*FOOTER*/


footer{
    padding-block: 2.5rem;
    background-color: var(--container-color);
}

.footer__content{
    row-gap: 3.5rem;
}

.footer__logo{
    display: inline-block;
    color: var(--title-color);
    font-size: var(--h2-font-size);
    font-family: var(--second-font);
    font-weight: var(--font-semi-bold);
    margin-bottom: 1rem;
}

.footer__data{
    /*align-items: center;
    justify-content: center;*/
    grid-template-columns: repeat(2,max-content);
    gap: 2.5rem 3.5rem;
}

.footer__title{
    font-size: var(--h3-font-size);
    color: var(--title-color);
    margin-bottom: 1rem;
}



.footer__copy{
    font-size: var(--smaller-font-size);
    color: var(--text-color-light);
    text-align: center;
}

.footer__links{
    display: grid;
    row-gap: 0.75rem;
}

.footer__link{
    color: var(--text-color);
    transition: color .4s;
}

.footer__link:hover{
    color: var(--title-color);
}
.footer__group,.footer__social{
    display: flex;
}

.footer__group{
    margin-top: 5rem;
    flex-direction: column;
    align-items: center;
    row-gap: 2rem;
}

.footer__social{
    column-gap: 1.5rem;
}

.footer__social-link{
    color: var(--text-color);
    font-size: 1.25rem;
    transition: color .4s,transform .4s ;
}

.footer__social-link:hover{
    color: var(--title-color);
    transform: translateY(-.25rem);
}



.cronox__text{
    color: rgb(129, 220, 250);
    transition: color .4s;
}

.cronox__text:hover{
    color: cornsilk;
    
}

/*ESTILO DE SCROLLBAR*/

::-webkit-scrollbar{
    width: .6rem;
    border-radius: .5rem;
    background-color: hsl(0, 0%, 10%) ;
}

::-webkit-scrollbar-thumb{
    
    border-radius: .5rem;
    background-color: hsl(0, 0%, 20%) ;
}

::-webkit-scrollbar-thumb:hover{
    
    
    background-color: hsl(0, 0%, 30%) ;
}


/*SCROLL UP*/
.scrollup{
    position: fixed;
    right: 1rem;
    bottom: -50%/*3rem*/; /*se creara una nueva clase para que aparezca el boton al llegar al final de la pagina*/ 
    background-color: hsla(0, 0%, 100%, .1);
    padding: 6px;
    display: inline-flex;
    color: var(--title-color);
    font-size: 1.25rem;
    backdrop-filter: blur(24px);
    --webkit-backdrop-filter: blur(24px);
    z-index: var(--z-tooltip);
    transition: bottom .4s, transform .4s;
}

.ri-whatsapp-fill{
color:rgb(65, 209, 65);
font-size: 40px;
transition: transform .4s;

}

.scrollwhatsapp{
    
    position: fixed;
    left: 1rem;
    bottom: -50%/*10rem*/; /*se creara una nueva clase para que aparezca el boton al llegar al final de la pagina*/ 
    background-color: transparent;
    padding: 15px;
    border-radius: 1rem;
    display: inline-flex;
    color: var(--title-color);
    font-size: 1.25rem;
    backdrop-filter: blur(24px);
    --webkit-backdrop-filter: blur(24px);
    z-index: var(--z-tooltip);
    transition: bottom .4s, transform .4s;
}

.scrollwhatsapp i:hover {
    transition: 0.3s;
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
}

.show-whatsappbtn{
    bottom: 10rem;
}

.scrollup:hover{
    transform: translateY(-.50rem);
}

/*mostrar scroll up*/

.show-scroll{
    bottom: 4.5rem;
}

/*mostrar un active si estamos dentro de un section*/
.nav__link::after{
    content: '';
    width: /*70%*/0;
    height: 2px;
    background-color: var(--title-color);
    position: absolute;
    left: 0;
    bottom: -.5rem;
    transition: width .3s;
}


.active-link::after{
    width: 70%;
    

}

.nav__link:hover::after{
    width: 70%;
    

}

.contactobtn__width{
    
    width: 50%;
    margin: auto;
   margin-top: -200px;
    
    
   
}




/*PARA DISPOSITIVOS PEQUEÑOS*/
@media screen and (max-width : 340px) {

    
    .container{
        margin-inline: 1rem;
        
    }

   

    .footer__data{grid-template-columns: max-content;}

    
}


@media screen and (max-width: 767px) {
    .mobile-spacer {
        display: block;
        width: 100%;
        clear: both;
    }
    
    


  /* WhatsApp button size adjustment */
  .scrollwhatsapp {
    position: fixed;
    left: 1rem;
    bottom: -50%; /* Hidden by default */
    background-color: hsla(0, 0%, 100%, 0.1); /* Match arrow background */
    padding: 10px; /* Larger padding */
    border-radius: 0.5rem;
    display: inline-flex;
    color: var(--title-color);
    backdrop-filter: blur(24px);
    --webkit-backdrop-filter: blur(24px);
    z-index: var(--z-tooltip);
    transition: bottom .4s, transform .4s;
  }
  
  /* Fix the WhatsApp icon size */
  .ri-whatsapp-fill {
    color: rgb(65, 209, 65);
    font-size: 2.25rem; /* Larger font size */
    transition: transform .4s;
  }
  
  /* Position when visible */
  .show-whatsappbtn {
    bottom: 4rem; /* Same position as arrow or adjust as needed */
  }
  
  /* Hover effect */
  .scrollwhatsapp:hover {
    transform: translateY(-.50rem);
  }

  /* Footer container adjustments */
  .footer_container {
    padding: 1rem 0.5rem;
  }

  /* Center footer content */
  .footer__content {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .footer__content > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0 auto;
    width: 100%;
  }

  .footer__content img {
    margin: 0 auto;
  }

  /* Adjust description spacing */
  .footer__description {
    text-align: center;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding-top: 0.5rem;
  }

  /* Reduce space between description and footer group */
  .footer__group {
    margin-top: 0.5rem;
    text-align: center;
    width: 100%;
  }

  /* Center copyright text */
  .footer__copy {
    text-align: center;
    width: 100%;
    font-size: 1rem;
    padding: 0 0.5rem;
  }
}





@media screen and (min-width: 576px){
   

    .inicio__container,.nosotros__container,.contacto__content.join__container{
        grid-template-columns: 380px; /*se quitara en pantallas grandes con initial*/
        justify-content: center; /*se quitara en pantallas grandes con initial*/
    }

    .footer__data{
        grid-template-columns: repeat(3,max-content);
    }
}

/*PARA TABLETS  se ordena el nav*/

@media screen and (min-width : 768px ){

    
    .inicio__cards{
        grid-template-columns: repeat(2,240px);
    }

    .nosotros__container{
        grid-template-columns: repeat(2,350px);
        align-items: center;
    }

    .nosotros__data, .nosotros__data .section__title,.join__data, .join__data .section__title{
        text-align: initial;
    }

    .servicio__container{
        grid-template-columns: repeat(3,220px);
    }

    .contacto__img{
        width: 100vw;
    }

    .footer__content{
        grid-template-columns: repeat(2,max-content);
        justify-content: space-between;
    }

    .footer__group{
        flex-direction: row;
        justify-content: space-between;
        margin-top: 0.5rem;
    }

    .footer__copy{
        order: -1;
    }

    .footer{
        padding-block: 20px 20px
    }

    .footer__title{
        margin-bottom: 1.5rem;
    }
    .footer__social{
        column-gap: 2rem;
    }

    .footer__social-link{
        font-size: 1.5rem;
    }
    .footer_description{
        padding-top: 1rem;
    }

    .contactobtn__width{
    
        width: 50%;
        margin: auto;
       margin-top: -100px;
        
        
       
    }

    
}

/*PARA DISPOSITIVOS GRANDES: PC Y LAPTOP*/

@media screen and (min-width: 1023px) {
    .nav__close,.nav__toggle{
        display: none;
    }
    .nav__list{
        flex-direction: row;
        column-gap: 4rem;
    }
    .popular__container{
       grid-template-columns: repeat(3,240px); 
    }

    .footer__data{
        grid-template-columns: repeat(4,max-content);
    }
    .footer{
        padding-block: 20px 20px
    }

    .footer__title{
        margin-bottom: 1.5rem;
    }

    .footer__group{
        margin-top: 0.5rem;
    }

    .footer__social{
        column-gap: 2rem;
    }

    .footer__social-link{
        font-size: 1.5rem;
    }
    .footer_description{
        padding-top: 1rem;
    }
}


/*PARA PC */

@media screen and (min-width: 1152px) {

    .contactobtn__width{
    
        width: 50%;
        margin: auto;
       margin-top: -100px;
        
        
       
    }
    .container{
        margin-inline: auto; /*lo ajusto segun va decreciendo la pantalla*/
    }
    .section{
        padding-block: 7rem 2rem;
    }
    .nav{
        height: calc(var(--header-height)+1.5rem);
    }

    .blur__header::after{
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
    }

    .inicio__container{
        grid-template-columns: initial; 
       justify-content: initial; /*eliminar el justify content center*/
        row-gap: 4rem;
        padding-top: 6.5rem;
    }

    .inicio__shadow{
        height: 980px;
    }


    .inicio__subtitle{
        font-size: var(--h2-font-size);
    }

    .inicio__description{
        margin-bottom: 2.5rem;
    }

    .inicio__cards{
        grid-template-columns: repeat(4,260px);
    }

    .inicio__card-title{
        left: 1.5rem;
        bottom: 1.5rem;
    }

    .button{
        column-gap: 1.5rem;
    }

    .nosotros__container{
        grid-template-columns: 400px 460px;
        column-gap: 8.5rem;
        padding-block: 1rem;
    }

    .nosotros__description{
        margin-bottom: 3rem;
    }

    .nosotros__img{
        width: 400px;
    }


    .servicio__container{
        grid-template-columns: repeat(3,300px);
        column-gap: 3rem;
        padding-top: 3rem;
    }

    .servicio__title{
        font-size: var(--h2-font-size);
    }

    .servicio__location{
        font-size: var(--normal-font-size);
        
    }
    
    .join__description{
        margin-bottom: 3rem;
    }

    .footer{
        padding-block: 20px 20px
    }

    .footer__title{
        margin-bottom: 1.5rem;
    }

    .footer__group{
        margin-top: 0.5rem;
    }

    .footer__social{
        column-gap: 2rem;
    }

    .footer__social-link{
        font-size: 1.5rem;
    }
    .footer_description{
        padding-top: 1rem;
    }



}

.status-message {
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 4px;
    font-weight: 500;
    text-align: center;
    display: none;
  }
  
  .status-message.loading {
    background-color: rgba(255, 255, 0, 0.2);
    color: #b3a600;
  }
  
  .status-message.success {
    background-color: rgba(0, 255, 0, 0.2);
    color: #00b300;
  }

  .status-message.error {
    background-color: rgba(250, 0, 0, 0.2);
    color: #ff0000;
  }
  
  .status-message i {
    margin-left: 5px;
    vertical-align: middle;
  }