@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;800&display=swap');

:root{
   --blue:rgb(0, 0, 156);
   --black:#333;
   --white:#fff;
   --light-bg:#f5f5f5;
   --light-color:rgb(99, 99, 100);
   --border:.1rem solid var(--light-color);
   --box-shadow:0 .5rem 1rem rgba(0,0,0,.1);
}

*{
   font-family: 'Nunito', sans-serif;
   margin:0; padding:0;
   box-sizing: border-box;
   outline: none; border:none;
   text-decoration: none;
   transition: 0.2s linear; 
}

::-webkit-scrollbar{
   width: 1rem;
   height: .5rem;
}

::-webkit-scrollbar-track{
   background-color: transparent;
}

::-webkit-scrollbar-thumb{
   background-color: var(--blue);
}

html{
   font-size: 60.5%;
   overflow-x: hidden;
   scroll-behavior: smooth;
   scroll-padding-top: 7.5rem;
}

body{
   background: var(--light-bg);
   overflow-x: hidden;
}

section{
   padding:2rem;
   margin:0 auto;
   max-width: 1200px;
}

.heading{
   text-align: center;
   margin-top: 5rem;
   margin-bottom: 2rem;
   font-size: 4rem;
   color:var(--black);
   text-transform: uppercase;
}

#cajaLogo {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0 ;
   height: 100%;
   margin: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   background: linear-gradient(rgb(0,0,0),rgb(0, 0, 155));
   z-index: 9999;
}

#logo {
   width: 200px;
   animation: heartbeat 1s infinite;
}

@keyframes heartbeat {
   0% {
       transform: scale(1);
   }
   50% {
       transform: scale(1.2);
   }
   100% {
       transform: scale(1);
   }
}

.anim-titulo {
	-webkit-animation: anim-titulo 5s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: anim-titulo 5s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2023-5-23 11:22:22
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation anim-titulo
 * ----------------------------------------
 */
 @-webkit-keyframes anim-titulo {
   0% {
     letter-spacing: 1em;
     -webkit-transform: translateZ(400px);
             transform: translateZ(400px);
     opacity: 0;
   }
   40% {
     opacity: 0.6;
   }
   100% {
     -webkit-transform: translateZ(0);
             transform: translateZ(0);
     opacity: 1;
   }
 }
 @keyframes anim-titulo {
   0% {
     letter-spacing: 1em;
     -webkit-transform: translateZ(400px);
             transform: translateZ(400px);
     opacity: 0;
   }
   40% {
     opacity: 0.6;
   }
   100% {
     -webkit-transform: translateZ(0);
             transform: translateZ(0);
     opacity: 1;
   }
 }
 


.btn{
   display: block;
   width: 100%;
   margin-top: 1rem;
   border-radius: .5rem;
   padding:1rem 3rem;
   font-size: 2rem;
   color:var(--white);
   background-color: var(--red);
   cursor: pointer;
   text-transform: capitalize;
   text-align: center;
}

.btn:hover{
   background-color:var(--black);
}

.header{
   position: fixed;
   top:0; left:0; right:0;
   background: linear-gradient(rgb(0,0,0),rgb(0, 0, 155));
   box-shadow: var(--box-shadow);
   z-index: 999;
}

.header .flex{
   display: flex;
   align-items: center;
   justify-content: space-between;
   position: relative;
}


.header .flex .logo img{
   height: 40px;
   
}

.header .flex .navbar a{
   margin:0 1rem;
   font-size: 2.2rem;
   color:var(--light-bg);
}

.header .flex .navbar a:hover{
   text-decoration: underline;
   color:var(--red);
}

.header .flex .icons div{
   font-size: 2.2rem;
   color:var(--light-bg);
   cursor: pointer;
   margin-left: 1.7rem;
}

.header .flex .icons div:hover{
   color:var(--red);
}

.header .flex .icons div span{
   font-size: 1.8rem;
}

#menu-btn{
   display: none;
}

@keyframes fadeLeft{
   0%{
      transform: translateX(5rem);
   }
}

@keyframes fadeRight{
   0%{
      transform: translateX(-5rem);
   }
}

.home-bg{
   background:url(../img/back.jpg) no-repeat;
   background-size: cover;
   background-position: center;
}

.home-bg .home .slide-container{
   margin-top: 12rem;
}

.home-bg .home .slide-container .slide{
   display: none;
   align-items: center;
   gap:1.5rem;
   flex-wrap: wrap;
}

.home-bg .home .slide-container .slide.active{
   display: flex;
}

.home-bg .home .slide-container .slide .image{
   flex:1 1 40rem;
   animation: fadeRight .4s linear;
   text-align: center;
}


/* animacion de rotacion */
 @-webkit-keyframes girar {
   0% {
     -webkit-transform: rotate(0);
             transform: rotate(0);
   }
   100% {
     -webkit-transform: rotate(10deg);
             transform: rotate(10deg);
   }
 }
 @keyframes girar {
   0% {
     -webkit-transform: rotate(0);
             transform: rotate(0);
   }
   25% {
     -webkit-transform: rotate(10deg);
             transform: rotate(10deg);
   }
   50% {
      -webkit-transform: rotate(0);
              transform: rotate(0);
    }
    75% {
      -webkit-transform: rotate(-10deg);
              transform: rotate(-10deg);
    }
 }

.girar {
	-webkit-animation: girar 10s linear infinite both;
	        animation: girar 10s linear infinite both;
   text-align: center;
}


.home-bg .home .slide-container .slide .image img{
   /*width: 100%;*/
   margin:auto;
}
.home-bg .home .slide-container .slide .content{
   flex:1 1 40rem;
   text-align: center;
   animation: fadeLeft .4s linear;
}

.home-bg .home .slide-container .slide .content h3{
   color:var(--white);
   margin-bottom: 3rem;
   text-transform: capitalize;
   font-size: 7.5rem;
   text-shadow: var(--box-shadow);
   line-height: 1;
}

.home-bg .home .slide-container .slide .content p{
   color:var(--white);
   margin-bottom: 3rem;
   font-size: 5rem;
   text-shadow: var(--box-shadow);
   line-height: 1;
}

.home-bg .home .slide-container .slide .content a:hover{
   color:var(--blue);
   text-decoration: underline;
}

.home-bg .home .slide-container .slide .content a:visited{
   color:var(--white);
}

.home-bg .home .slide-container .slide .content .fa-angle-left,
.home-bg .home .slide-container .slide .content .fa-angle-right{
   height: 5rem;
   width: 5rem;
   line-height: 4.8rem;
   font-size: 2rem;
   color:var(--black);
   background-color: var(--white);
   margin:0 .5rem;
   box-shadow: var(--box-shadow);
   cursor: pointer;
   border-radius: .5rem;
}

.home-bg .home .slide-container .slide .content .fa-angle-left:hover,
.home-bg .home .slide-container .slide .content .fa-angle-right:hover{
   background-color: var(--red);
   color:var(--white);
}

.msj {
   margin-top: 4rem;
}

.msj .mensaje{
   display: flex;
   flex-direction: column;


   border: solid 1px var(--light-color);
   width: 100%;
   margin-bottom: 30px;
   background-color: var(--white);
   border-radius: .5rem;
   padding:2rem;
   text-align: justify;
   box-shadow: var(--box-shadow)

}

.msj .mensaje p {
   font-size: 2.5rem;
   color:var(--black);
   text-align: center;
}

.frase {
   margin-top: 4rem;
}

.frase .cita{
   display: flex;
   flex-direction: column;


   border: solid 1px var(--light-color);
   width: 100%;
   margin-bottom: 30px;
   background-color: var(--white);
   border-radius: .5rem;
   padding:2rem;
   text-align: justify;
   box-shadow: var(--box-shadow)

}

.frase .cita h3 {
   font-size: 2.5rem;
   color:var(--black);
   text-align: center;
}

.frase .cita p{
   padding:1rem 0;
   line-height: 2;
   font-size: 1.6rem;
   color:var(--light-color);
}

.frase .cita .citaFrase{
   padding:1rem 0;
   line-height: 2;
   font-size: 1.6rem;
   font-style: italic;
   color:var(--light-color);
}

.frase .cita .citaAutor{
   padding:1rem 0;
   line-height: 2;
   font-size: 1.6rem;
   font-weight: bold;
   color:var(--light-color);
   text-align: right;
}

.about {
   margin-top: 4rem;
}

.about .box-flex{
   display: flex;
   flex-direction: column;



   border: solid 1px var(--light-color);
   width: 100%;
   margin-bottom: 30px;
   background-color: var(--white);
   border-radius: .5rem;
   padding:2rem;
   text-align: justify;
   box-shadow: var(--box-shadow)

}

.about .box-flex h3 {
   font-size: 2.5rem;
   color:var(--black);
   text-align: center;
}

.about .box-flex p{
   padding:1rem 0;
   line-height: 2;
   font-size: 1.6rem;
   color:var(--light-color);
}

.about .box-flex .autor{
   padding:1rem 0;
   line-height: 2;
   font-size: 1.6rem;
   font-weight: bold;
   color:var(--light-color);
   text-align: right;
}

.about .box-flex .licencia{
   padding:1rem 0;
   line-height: 2;
   font-size: 1.6rem;
   font-weight: bold;
   color:var(--light-color);
   text-align: right;
}

.contacto {
   margin-top: 4rem;
}

.contacto form{
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   padding:2rem;
   border-radius: .5rem;
}

.contacto form .flex{
   display: flex;
   flex-wrap: wrap;
   gap:1.5rem;
   justify-content: space-between;
}

.contacto form .flex .inputBox{
   width: 49%;
}

.contacto form .flex .inputText{
   width: 100%;
}


.contacto form .flex .inputBox label{
   font-size: 1.8rem;
   color:var(--light-color);
}

.contacto form .flex .inputBox .box{
   width: 100%;
   background-color: var(--light-bg);
   padding:1.4rem;
   font-size: 1.8rem;
   color:var(--black);
   border-radius: .5rem;
   margin:1rem 0;
}

.contacto form .flex .inputText label{
   font-size: 1.8rem;
   color:var(--light-color);
}

.contacto form .flex .inputText .box{
   width: 100%;
   background-color: var(--light-bg);
   padding:1.4rem;
   font-size: 1.8rem;
   color:var(--black);
   border-radius: .5rem;
   margin:1rem 0;
}

.contacto form .flex .inputBox span {
   /*position: absolute;*/
   /*bottom: 12px;
   right: 17px;*/
   font-size: 14px;
   color: green;
   font-weight: bold;
}

.contacto form .flex .inputText span {
   /*position: absolute;*/
   /*bottom: 12px;
   right: 17px;*/
   font-size: 14px;
   color: green;
   font-weight: bold;
}

.contacto form span {
    /*position: absolute;*/
   /*bottom: 12px;
   right: 17px;*/
   font-size: 18px;
   color: green;
   font-weight: bold;
}

.control {
   margin-top: 4rem;
}

.control .box-flex{
   display: flex;
   flex-direction: column;



   border: solid 1px var(--light-color);
   width: 100%;
   margin-bottom: 30px;
   background-color: var(--white);
   border-radius: .5rem;
   padding:2rem;
   text-align: justify;
   box-shadow: var(--box-shadow)

}

.control .box-flex h3 {
   font-size: 2.5rem;
   margin: 2rem;
   color:var(--black);
   text-align: center;
}

.control .box-flex p{
   padding:1rem 0;
   line-height: 2;
   font-size: 2rem;
   color:var(--light-color);
   text-align: center;
}

.control .box-flex td{
   padding:1rem 0;
   line-height: 2;
   font-size: 1.6rem;
   color:var(--light-color);
}

.control .box-flex table{
   text-align: center;
}

.control .box-flex .box-inline{
   display:flex;
   align-items: center;
   align-self: center;
}

.control .box-flex .box-inline .fa-angle-left,
.control .box-flex .box-inline .fa-angle-right{
   height: 5rem;
   width: 5rem;
   line-height: 4.8rem;
   font-size: 2rem;
   color:var(--black);
   background-color: var(--white);
   margin:0 .5rem;
   box-shadow: var(--box-shadow);
   cursor: pointer;
   border-radius: .5rem;
   text-align: center;
}


.location {
   width: auto;
   height: 300px;
   overflow: hidden;
 }
 
.location iframe {
   width: 100%;
   height: 100%;
}

.footer .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
   gap:1.5rem;
   align-items: flex-start;
   justify-content: center;
}

.footer .box-container .box{
   padding:2rem;
   text-align: center;
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border-radius: .5rem;
}

.footer .box-container .box .logoFooter{
   height: 6rem;
   width: 6rem;
   line-height: 6rem;
   font-size: 2rem;
   color:var(--white);
   background-color: var(--blue);
   border-radius: 50%;
   margin-bottom: .5rem;
}
.footer .box-container .box i{
   color:var(--box-shadow);
   margin-bottom: .5rem;
}

.footer .box-container .box h3{
   margin:1rem 0;
   color:var(--black);
   text-transform: capitalize;
   font-size: 2rem;
}

.footer .box-container .box p{
   line-height: 2;
   font-size: 1.6rem;
   color:var(--light-color);
}

.footer .box-container .box #clima img {
   width: 65%;
}

.footer .credit{
   text-align: center;
   margin-top: 3rem;
   padding:1rem 0;
   padding-top: 3rem;
   border-top: var(--border);
   font-size: 1.5rem;
   color:var(--black);
   /* padding-bottom: 8rem; */
}

.footer .credit span{
   color: var(--red);
}

.button {
      height: 5rem;
      width: 5rem;
      line-height: 4.8rem;
      font-size: 2rem;
      color:var(--black);
      background-color: var(--white);
      margin:0 .5rem;
      box-shadow: var(--box-shadow);
      cursor: pointer;
      border-radius: .5rem;
}

/* media queries  */

@media (max-width:991px){

   html{
      font-size: 55%;
   }
   
}

@media (max-width:768px){

   #menu-btn{
      display: inline-block;
   }

   .header .flex .navbar{
      position: absolute;
      top:99%; left:0; right:0;
      background-color: var(--blue);
      border-top: var(--border);
      border-bottom: var(--border);
      clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
   }

   .header .flex .navbar.active{
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
   }

   .header .flex .navbar a{
      display: block;
      margin:2rem;
   }

   .home-bg .home .slide-container .slide .content h3{
     font-size: 4rem;
   }

}

.footer .box-container {
   display: grid;
   grid-template-columns: 1fr 1fr; /* Dos columnas para la primera fila */
   grid-template-rows: auto auto; /* Dos filas */
 }

 .footer .box-container .box:nth-child(3) {
   grid-column: span 2; /* La tercera caja ocupa las dos columnas (ancho completo) */
 }

@media (max-width:450px){

   html{
      font-size: 50%;
   }

   .shopping-cart{
      width: 100%;
      border-left: 0;
   }

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

   .menu .box-container{
      grid-template-columns: 1fr;
   }
   
}