/*@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;700&display=swap');*/

:root{
   /* --background: linear-gradient(135deg, #667eea7e 0%, #764ba298 100%);*/
    --background: linear-gradient(135deg, #C799127e 0%, #0b183c98 100%);
    --color-primary:#C79912;
    --color-secundary: #0b183c;
    --boton-padding: 20px 40px
}

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

body{
    font-family: 'Raleway', sans-serif;
    
    
}


h3{
    text-align: center;
    color: var(--color-secundary);
    font-size: 1.2rem;
    margin-bottom: 35px;

}

ul{
    list-style: none;
    line-height: 1.6rem;
}

.hero{
    height: 100vh;
    background-image:var(--background), url('/assets/KendalKyley1.jpg'); /* la primera variable pone una pelicula trasnparente sobre la imagen*/
    background-repeat: no-repeat;
    background-size: cover;/* para que abarque el 100% del contnedor*/
    background-attachment: fixed;/* este para fingir el efecto parrallax*/
    background-position: center;
    position: relative; /* este es para posicionar la wave (onda), */
    overflow: hidden;
}

.container{
    width: 90%;
    margin: 0 auto;
    overflow: hidden; /* overflow hidden oculta los elementos que se desbordan del contenedor*/
    padding: 80px 0;
    max-width: 1200px;
    
}

/* .hero > .container{
    padding: 0 auto;
} */

.hero > .container {
    padding: 0 0 80px 0;
}



.logo{
    margin-top: -40px;
    position: sticky;
    top: 20px;
}
.logo__luna{
    width: 210px;
    height: 200px;

}

.subtitle{
    color: var(--color-primary);
    font-size: 2.5rem;
    margin-bottom: 35px;
}






/* https://alvarotrigo.com/blog/hamburger-menu-css/ */
  
#menuburger {
    z-index: 2;
    
  }
  
  #menu-bar {
    width: 40px;
    height: 30px;
    margin: 30px 0 20px 20px;
    cursor: pointer;
    margin-right: 11.25px;
  }
  
  .bar {
    height: 5px;
    width: 100%;
    background-color: #0b183c;
    display: block;
    border-radius: 5px;
    transition: 0.3s ease;
  }
  
  #bar1 {
    transform: translateY(-4px);
  }
  
  #bar3 {
    transform: translateY(4px);
  }
  
  .navburguer {
    transition: 0.3s ease;
    display: none;
  }
  
  .navburguer ul {
    padding: 0 22px;
  }
  
  .navburguer li {
    list-style: none;
    padding: 5px 0;
  }
  
  .navburguer li a {
    color: white;
    font-size: 20px;
    text-decoration: none;
  }
  
  .navburguer li a:hover {
    font-weight: bold;
  }
  
  .menu-bg, #menuburger {
   
    right: 10px;
    position: absolute;
  }
  
  .menu-bg {
    z-index: 1;
    width: 0;
    height: 0;
    margin: 5px 0 10px 10px;
    background: radial-gradient(circle, #C79912, #0b183c);
    border-radius: 50%;
    transition: 0.3s ease;
  }
  
  .change {
    display: block;
  }
  
  .change .bar {
    background-color: white;
  }
  
  .change #bar1 {
    transform: translateY(4px) rotateZ(-45deg);
  }
  
  .change #bar2 {
    opacity: 0;
  }
  
  .change #bar3 {
    transform: translateY(-6px) rotateZ(45deg);
  }
  
  .change-bg {
    width: 520px;
    height: 500px;
    transform: translate(60%,-30%);
  }













.nav{
    display: flex;
    justify-content: flex-end;
    height: 70px;
    align-items: center;
    font-weight: 700;
}

.nav--footer{
    justify-content: flex-start;
    font-weight: 300;
}

.nav__items{
    color: white;
    text-decoration: none;
    margin-right: 10px;
    padding: 10px;
    font-weight: inherit; /*hereda el peso de la fuente de su padre .nav--footer*/
}

.nav__items--cta{
    border: solid 1px #fff;
}

.nav__items--footer{
    padding: 10px;
}

.hero__container{
    display: flex;
    height: calc(100vh - 70px);
    align-items: center;
    color: #fff;
}

.hero-wave{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
}

.hero__text{
    width: 80%;
    margin-bottom: 50px;
}

.hero__title{
    font-size: 3.2rem;
}

.hero__subtitle{
    font-size: 2rem;
    font-weight: 300;
    margin: 15px 0;
}

.hero__cta{
    display: inline-block;
    background-color: #fff;
    padding: var(--boton-padding);
    text-decoration: none;
    border-radius: 20px;
    margin-left: 8px;
}

.hero__cta:hover, .presentation__cta:hover{
    background: transparent;
    border: 4px solid #799be6;
    box-shadow: 0 0 10px 0 #799be6 inset,
                0 0 10px 4px #799be6;
    border-radius: 20px ;
    color: var(--color-secundary);
    font-weight: bold;
}




/* about */



.presentation, .requisitos{
    text-align: center;
    padding-top: 0;
}

.presentation__picture, .requisitos__picture{
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin-bottom: 10px;
    object-fit: cover;/* esto ayuda a la foto  de about a que no pierda resolucion*/
    object-position: top;/*cambia la perspetiva y se ve desde arriba*/

}

.presentation__copy, .requisitos__copy{
    width: 80%;
    margin: 0 auto;
}

.presentation__cta{ /*al ser un elemento "a" (en linea) no me permite moverlo, pero con inline-block, me habilita los margin y padding*/
    display: inline-block;
    margin-top: 30px;
    text-decoration: none;
    background: var(--color-primary);
    padding: var(--boton-padding);
    color: #fff;
    border-radius: 50px;
}

.about{
    min-height: 400px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 80px;
    justify-items: center;
    align-items: center;
}

.about__img{
    text-align: center;
    
}

.about__img--left{
    text-align: left;
    
}

.about__picture{
    max-width: 80%;
    
}

.about__parragraph{
    margin-bottom: 20px;
    line-height: 1.5;
    font-weight: 300;
}





/*  Mis proyectos */

.projects{
    background: #f2f2f2;
}
.projects__grid{
    display: grid;
    height: 550px;
    grid-template-areas: 
    "img1 img1 img2 img3"
    "img1 img1 img4 img5";
    gap: 10px;
}

.projects__items{
    position: relative; /*para generar el efecto de que las pestañas se moeven o las cubren y tambien se necesita absolute*/
    width: 100%;
    height: 100%;
   overflow: hidden;    /*escconda el desbordamiento*/
}

.projects__img{
    width: 100%;
    height: 100%;
    object-fit: cover; /*paraque la imagen se ajuste al elemento*/
    cursor: pointer; /* para que al pasar el cursor se ponga una manita*/
}

.projects__items:nth-of-type(1){/*esto significa que al encontrar el elemento del mismo tipo va a darle el area de img1*/
    grid-area: img1;
}
.projects__items:nth-of-type(2){
    grid-area: img2;
}
.projects__items:nth-of-type(3){
    grid-area: img3;
}
.projects__items:nth-of-type(4){
    grid-area: img4;
}
.projects__items:nth-of-type(5){
    grid-area: img5;
}


.projects__hover{
    position: absolute;  /*para que tome posision de su contenedor padre*/     
    background: #C799127e;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: white;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform: translateX(0%); /*translade en X el elemento projects__hover descubriendo totalmente la celda*/
    cursor: pointer; /*aparesca la manito señalando*/
    transition: transform .3s ease-in-out; /*hagan una transicion en el translado en X de projects__hover*/
}

.projects__items:hover .projects__hover{ /* esta pseudo clase causa que la celda canbie a projects__hover una vez el puntero este encima*/
    transform: translateX(1000%) /* hace que cubra totalmente la celda el elemnto projects__hover*/
}


.project__icon{
    margin-top: 10px;
    font-size: 30px;
}




/*  Testimony  */


.testimony__grid{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.testimony__item{
    width: 95%;
    margin: 0 auto;
    background: var(--color-secundary);
    box-shadow: 0 8px 10px rgb(66 66 1); /* se lee asi: Box-shadow de 0 en X, 8px en Y, 10px de blur, y un color de 66,66, y valor de alpha de .5 */
    border-radius: 10px;
    padding: 30px 25px;
    color: #fff; /*El color se pone aqui para que lo hereden los textos*/
    margin-bottom: 50px
}


audio{
    width: 99%;
    margin-bottom: 10px;
    
}

.testimony__person{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.testimony__item img{
    width: 100px;
    min-width: 100px;
    height: 100px;
    object-fit: cover;
    object-position: top;
    border-radius: 50%;
    border: 3px solid #fff;
    margin-right: 30px;
}

.testimony__name{
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: rgb(224, 221, 221);
}

.testimony__verification{
    color: #eafaa0;
    font-weight: 700;
}

.testimony__review{
    font-weight: 300;
}





/*   Preguntas Frecuentes*/



.preguntas .container__pf{
    width: 90%;
    max-width: 900px;
    margin:5px auto;
}

.container__pf .seccion details {
    margin: 7px 0; 
    border-radius: 10px; 
}

.container__pf .seccion details summary{
    padding: 15px;
    background-color: var(--color-secundary);
    margin: 10px 0;
    position: relative;
    list-style: none;
    outline: none;
    cursor: pointer;
    font-size: 1.1rem;
    color:#eafaa0;
    border-radius: 10px;
    box-shadow: 0 5px 10px #3334;
    
    
}



.container__pf .seccion details p{
    font-size: 1.1rem;
    padding: 10px;
    color: #444;
    background-color: #e6e6e6;
    border-radius: 10px;

}
/*Simbolo "+" y rotacion a "x"*/
.container__pf .seccion details summary::after{
    content: '+';
    position: absolute;
    top: 10px; right: 15px;
    font-size: 2rem;
    color: #fff;
    transition: .5s linear;
}

.container__pf .seccion details[open] summary::after{
    transform: rotate(135deg);
}

.container__pf .seccion details[open] summary{
    background-color: var(--color-primary);
    color:#001F3F;
    font-weight: bold;
    box-shadow: 0 5px 10px rgba(20, 20, 20, 0.267);

}







/*   requisitos   */

.requisitos{
    background-color: #0DA5747e;
}
.requisitos__list__container {
    display: flex;
    justify-content: center;
    
}


.requisitos ul{
    margin: 20px 0;
    padding: 0;
}








/*   footer */

.footer{
    background: var(--color-primary);
}

.footer__grid{
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 20px;
    align-items: center;
}

.nav__footer{
    justify-content: flex-start;
}
.footer__title{
    font-weight: 400;
    color: #fff;
    font-size: 2rem;
    margin-bottom: 30px;
    text-align: center;
}

.footer__icons{
    display: flex;
    justify-content: space-evenly;
}

.footer__container-icons{
    display: inline-block;
    width: 60px;
    height: 60px;
    color: #fff;
    text-align: center;
    border: 1px solid #fff;
    border-radius: 50%;
    
}

.footer__icon{
    color:inherit;
    font-size: 30px;
    text-decoration: none;
    line-height: 60px;
}

.fa-brands.footer__icon{ /*se utiliza mas especificidad para que podemos centrar de manera vertical un elemento inline block*/
    line-height: 60px; /*ña unica forma de centrar un elemento verticalmente es con este atributo line-height*/
}

.creador{
    width: 100%;
    text-align: center;
    background-color: darkslategrey;
    color: #fff;
    padding: 10px 0;
}




/*   ************************ blogs  ********************  */


.tips{
    width: 99%;
    position: relative;
    overflow: hidden;
}
.tips .container{
    padding: 0;

    
    
}
.tiphero{
    display: grid;
    grid-template-columns: 1fr 1fr;
    
}



.logo .menuburger{
    display: inline-block;
    
}

.blogpost-img-container .container{
    padding: 0;
}
.blogpost-main-container .container h3{
    padding-bottom: 10px;
}

.blogpost-img-container .container{
    display: flex;
    justify-content: center;
}

.blogpost-img-container .container .blogpost__img, .minipost--img {
    width: 100%;
    max-width: 900px;
    border-radius: 10px;
    box-shadow: 0 5px 10px #3334;
}

.minipost__container{
    
    display: flex;
    justify-content: center;
    margin: 50px auto;
    max-width: 900px;
    
}

.tiptitle{
    border-bottom: 1px var(--color-primary) solid;
}

.blogpost-main-container p{
    margin-bottom: 15px;
    line-height: 1.6rem;
}

.blogpost-main-container .tiplist{
    line-height: 2.4rem;
    text-indent: 8px;
    margin-bottom: 3rem;
   
}

.tiplist li::before{ /*https://www.youtube.com/watch?v=oaYxcUdBJjM aqui el tutorial*/
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background-image: url(/assets/luna-rocket.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.container__grid--buttontip{
   display: flex;
   justify-content: space-evenly;
   align-items: center;
}

.buttontip{
    padding: 0 auto;
}






/*>>>>>>>>>>>>>>>>>>>>>>       ¡ ERROR 404 !      <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/


.body__error--container{
    background: rgb(255,253,253);
    background: radial-gradient(circle, rgba(255,253,253,1) 0%, rgba(13,165,116,1) 0%, rgba(8,51,88,1) 100%);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    min-width: 320px;
   

}


.error__container{
    width: 100vw;
    height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.error__title{
    font-size: 2rem;
    color:var(--color-primary);
    font-weight: bolder;
    padding: 1rem;
    text-align: center;
}

.error__subtitle{
    
    color:black;
    font-weight: bolder;
    padding: .5rem;
    text-align: center;

}

.footer__error--container{
    width: 100vw;
    height: 100px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}


.nav__error--items{
    text-decoration: none;
    color: white;
    padding: 5px;

}





/* Animación con keyframe llamada "latidos" */
@keyframes latidos {
    from { transform: none; }
    50% { transform: scale(1.4); }
    to { transform: none; }
}
/* En la clase corazon vamos a llamar latidos en la animación  */
.corazon {
	display: inline-block;
	
	text-shadow: 0 0 10px #222,1px 1px  0 #450505;
	
	animation: latidos 2s infinite;
	transform-origin: center;
}









/*  >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>Responsive desing*<<<<<<<<<<<<<<<<<<<<<<<<*/



@media (max-width: 800px){
    :root{
        --boton-padding: 18px 40px
    }

    .nav{
        justify-content: space-around;
    }

    .nav__items--cta{
        border: none;
    }
    
    .nav__items{
        font-weight: 400;
        border-bottom: 1px solid #fff;
        margin-right: 0;
    }

   

    .nav__items--footer{
        border: none;
    }

    .hero__text{
        width: 100%;
        margin-bottom: 80px;
    }

    .hero__title{
        font-size: 2.5rem;
    }

    .hero__subtitle{
        font-size: 1.5rem;
    }

    .presentation__copy{
        width: 100%;
    }






    /*     about   */



    .about{
        grid-template-columns: 1fr;
    }

    .about .container{
        padding-top: 30px;
    }

    .about__img--left{
        text-align: center;
    }

    .about__text:last-child{
        grid-row: 3/4
    }






    /*     My Proyects     */



    .projects__grid{
        grid-template-areas:
        "img1 img1 img2 img2" 
        "img1 img1 img3 img3"
        "img4 img4 img5 img5";
    }






    /*    Testimony    */


    .testimony__grid{
        grid-template-columns: 1fr;
        gap: 30px;
    }

  


/*   Footer  */

.footer__grid{
    grid-template-columns: 1fr;
}

.footer__contact{
    grid-row: 1/2;
}

}












@media screen and (max-width: 500px){
    :root{
        --boton-padding: 18px 35px;
    }

    body {
        min-width: 320px;
    }

    .hero{
        background-image: var(--background), url(/assets/KendalKyleymovil.jpg);
        background-position: 59%;
        
    }
    #hero__span{
        display: none;
    }

    .logo{
        margin-top: -5px;
    }

    .logo__luna{
       
        width: 100px;
        height: 90px;
    }

    .subtitle{
        font-size: 2rem;
        margin-top: 20px;
        margin-bottom: 40px;
        text-align: center;
        
    }

    .nav{
        flex-wrap: wrap;
        justify-content: space-evenly;
        margin-top: 10px;
    }

    .nav__items{
        padding: 0 10px;
        border: 0;
    }

    .hero__text{
        text-align: center;
        margin-bottom: 100px;
    }

    .hero__title{
        font-size: 2rem;
    }
    
    .hero__cta{
        margin-left: 0;
    }




    /*    About   */



    .presentation__picture{
        width: 120px;
        height: 120px;
    }

    .about{
        gap: 60px;
    }

    .about.container{
        padding-top: 10px;
    }






    /*      My proyects   */


    .projects__grid{
        grid-template-areas: 
        "img1"
        "img2"
        "img3"
        "img4"
        "img5";

        height: auto;
        grid-template-rows: repeat(5, 250px);
        grid-auto-rows: 250px;
        gap: 10px;
    }




    /* Testimony  */


    .testimony__item{
        padding: 30px 15px;
    }

    .testimony__person{
        flex-direction: column;
    }

    .testimony__texts{
        text-align: center;
    }

    .testimony img{
        margin: 0;
        margin-bottom: 20px;
    }

}



.float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 100px;
  right: 20px;
  background-color: #229ED9; /* Telegram Blue */
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 3px #999;
  z-index: 9999;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 30px; /* control de tamaño del ícono desde el contenedor */
}

.float:hover {
  background-color: #fff;
  color: #229ED9;
}

.my-float {
  display: inline-block;
  font-size: inherit; /* usa el tamaño del padre */
  line-height: 1;
}


/*Efecto de respiracion  (breathing effect)*/

@keyframes breath {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 8px rgba(34, 158, 217, 0.6);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(34, 158, 217, 0.8);
  }
}

.float {
  animation: breath 2.5s ease-in-out infinite;
}


.whatsapp {
  bottom: 20px; /* Posición más abajo que Telegram */
  background-color: #25D366; /* Verde oficial de WhatsApp */
  animation: breath 2.5s ease-in-out infinite;
}

.whatsapp:hover {
  background-color: #fff;
  color: #25D366;
}


/* === BOTÓN PRINCIPAL REUTILIZABLE === */
.btn-primary {
  display: inline-block;
  background-color: var(--color-primary);
  color: white;
  padding: var(--boton-padding);
  border-radius: 20px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background: transparent;
  border: 3px solid var(--color-primary);
  color: var(--color-secundary);
  font-weight: bold;
  box-shadow: 0 0 10px 0 var(--color-primary) inset,
              0 0 10px 4px var(--color-primary);
}






/* === ANIMACIÓN TEXTO LUMINOSO HERO === */
@keyframes lights {
  0% {
    color: #fff;
    text-shadow:
      0 0 10px #C79912,
      0 0 20px #C79912,
      0 0 30px #C79912;
  }
  50% {
    color: #ffe;
    text-shadow:
      0 0 5px #fff,
      0 0 10px #C79912,
      0 0 15px #fff;
  }
  100% {
    color: #fff;
    text-shadow:
      0 0 10px #C79912,
      0 0 20px #C79912,
      0 0 30px #C79912;
  }
}

.animated-lights {
  animation: lights 2s ease-in-out infinite;
}