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

/*Paleta de colores*/
:root {
    --main-bg-color: #F4F5F5;
    --secundary-bg-color: #931621;
    --terciary-bg-color: #788585;
  }
  
/*Fonts, Titles, basic styles*/

@import url('https://fonts.googleapis.com/css2?family=Tulpen+One&family=Oswald&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap');

html,
body {
  background: url("../img/Bg.png") no-repeat top;
  background-size: cover;
  font-family: 'Titillium Web', sans-serif;
  height: 3610.2px;
}

html {
  scroll-behavior: smooth;
  background-color: var(--main-bg-color);
}

h1 { font-size: clamp(2.8rem, 5vw, 6rem); color: var(--secundary-bg-color); font-family: 'Tulpen One','Titillium Web', sans-serif; }
h2 { font-size: clamp(2.4rem, 3.3vw, 4.3rem); color: var(--main-bg-color); font-family: 'Tulpen One','Titillium Web', sans-serif; padding: 10px;}
h3 { font-size: clamp(1.7rem, 2.6vw, 3.6rem); color: var(--secundary-bg-color); font-family: 'Tulpen One','Titillium Web', sans-serif;}
h4 { font-size: clamp(1.2rem, 2vw, 3rem); color: var(--secundary-bg-color); font-family: 'Tulpen One','Titillium Web', sans-serif;}
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

h1,
h4,
p {
  line-height: 1.4em; 
}

p {
  font-size: clamp(0.8rem, 1vw, 2rem);
}

a {
  text-decoration: none;
  color: black;
}

/*Main container*/

.container {  display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 64px 90vh 100vh 90vh 90vh 80vh 100vh 20vh;
    gap: 5px 5px;
    margin-left: 10%;
    margin-right: 10%;
    grid-auto-flow: row;
    grid-template-areas:
      "Nav"
      "Hero"
      "Services"
      "Productos"
      "Metodo"
      "Especificaciones"
      "Contacto"
      "Footer";
  }
  
/*Navbar behavior*/

  .Nav {  
    
    display: grid;
    grid-template-columns: 0.5fr 1.5fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      "Logo Menu";
    grid-area: Nav;

    border-bottom-style: solid;
    border-bottom-color: lightgrey;
    border-bottom-width: thin;

  }

/*Logo in Navbar behavior*/

  .Logo { 
    grid-area: Logo; 
    float: left;
    padding-top: 20px;
    align-self: center;
}
.Logo img {
  width: clamp(76px, 16vw, 109px); 
}


/*Menu in Navbar behavior*/

.Menu { 
    grid-area: Menu; 
    float: right;

    font-family: 'Tulpen One','Titillium Web', sans-serif;;
    font-size: clamp(0.8rem, 2vw, 3rem); 
    padding-top: 8px;
}

.Menu ul {
    list-style: none;
    float: right;
}
.Menu ul li { 
    float: left;
}

.Menu ul li a{ 
    display: block;
    padding: 2px 16px 2px 16px;
    text-align: center;
    /* margin-top: 16px; */
    margin: 16px 0.2em 0px 0.2em;
}
@media screen and (max-width: 600px) {
  .Menu {
    padding: 6px 0px 2px 0px;
    margin: 0px -1em 0px -1em;
  }
}

/* Menu li on hover animation */

.link{
  position: relative;
  display: inline-block;
  text-decoration: none;
}
.link::before,
.link::after{
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--secundary-bg-color);
  transform: scaleX(0);
  transition: transform .25s;
}
.link::before{
  top: -2px;
  transform-origin: left;
}
.link::after{
  bottom: -2px;
  transform-origin: right;
}
.link:hover::before,
.link:hover::after{
  transform: scaleX(1);
}

.contactoBtn{
  background-color:var(--terciary-bg-color);
  border: none;
  color: var(--main-bg-color);
  padding: 0px 10px;
  text-align: center;
  text-decoration: none;
  font-family: 'Tulpen One','Titillium Web', sans-serif;
  font-size: clamp(0.8rem, 2vw, 3rem);
  cursor: pointer; 

  transition-duration: 0.4s;
}

  
/*--------------- ---------------Hero Section Behavior--------------- ---------------*/

.Hero {  display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 2fr 0.5fr 0.5fr;
    margin-top: -10px;
    gap: 0px 0px;
    grid-auto-flow: row;
    justify-content: start;
    align-content: space-between;
    justify-items: start;
    align-items: center;
    grid-template-areas:
      "heroTitle"
      "heroBtn"
      "heroBanner";
    grid-area: Hero;
}

/*Title in Hero behavior*/

.heroTitle { 
    grid-area: heroTitle; 
    margin-left: 15%;
    margin-top:15%;
}
@media screen and (max-width: 600px) {
  .heroTitle {
    margin-left:0%;
    margin-top:25%;
    justify-self: center;
    margin-top: 0.8em;
  }
}

.heroTitleBox{
  background-color: var(--main-bg-color);
  padding-right: 4em;

  padding-bottom: 2.5em;
  margin-top: 1em;

}

@media screen and (max-width: 400px) {
  .heroTitleBox {

    padding-right: 2.5em;
    padding-left: 2.5em;
    text-align: center;
    margin-left: 0px;
  }
}

/*Button in Hero behavior*/

.heroBtn {
  justify-self: end;
  grid-area: heroBtn;   
  border-top-style: solid;
  border-top-color: #788585;
  border-top-width: thin;
}
@media screen and (max-width: 600px) {
  .heroBtn {
    justify-self: center;
  }
}

.heroBtnBox{
  border-top-style: solid;
  border-top-color: var(--terciary-bg-color);
  border-top-width: thin;
  width: 40vw;
  display: flex;
}

.heroBtnStyle{
  position: relative;
  background-color:var(--terciary-bg-color);
  border: none;
  color: var(--main-bg-color);
  padding: 2px 32px;
  text-align: center;
  text-decoration: none;
  font-family: 'Tulpen One','Titillium Web', sans-serif;
  font-size: clamp(1.8rem, 2vw, 3rem);
  cursor: pointer; 

  transition-duration: 0.4s;
}
.heroBtnStyle a{
  color: var(--main-bg-color);
}

/* Btn  */



/* Btn on hover animation */

.horizontalMov{
  animation: myAnim 16s ease-in-out 0s infinite alternate-reverse forwards;
}
@keyframes myAnim {
	0%,
	100% {
		transform: translateX(0);
	}

	10%,
	30%,
	50%,
	70% {
		transform: translateX(-0px);
	}

	20%,
	40%,
	60% {
		transform: translateX(10px);
	}

	80% {
		transform: translateX(8px);
	}

	90% {
		transform: translateX(-8px);
	}
}

.button:hover{
  background: #fff;
  box-shadow: 0px 1px 5px 2px var(--terciary-bg-color);
  color: #000;
}
.heroBtnStyle:hover a{
  color: var(--terciary-bg-color);
}

.button:after {
  content: "";
  background: var(--secundary-bg-color);
  display: block;
  position: absolute;
  opacity: 0;
  transition: all 2s ease-in-out;
}

.button:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 2s ease-in-out;
}

.button:focus { outline:0; }


/*Banner in Hero behavior*/

.heroBanner {
    justify-self: center;
    grid-area: heroBanner;
    width: 70%;
  }
.heroBannerBox{
    background-color:var(--secundary-bg-color);
    color: var(--main-bg-color);
    text-align: center;
  
   padding-bottom: 2px;
  }
.heroBannerBox p{
    font-size: clamp(0.5rem, 1.2vw, 3rem);
  }
@media screen and (max-width: 600px) {
    .heroBanner {
      width: 100%;
    }
    
  }

/* --------------- ---------------Services Section Behavior------------ ---------- */

  .Services {  
    
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 0.2fr 0.8fr;
    gap: 0.5em;
    grid-auto-flow: row;
    grid-template-areas:
      "servicesTitle servicesTitle servicesTitle"
      "service1 service2 service3";
    grid-area: Services;

    justify-content: center; 
    align-content: center; 
    justify-items: center; 
    align-items: center; 
    align-self: center; 

  }

  @media screen and (max-width: 600px) {
    .Services {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 0.2fr 1.4fr 1.4fr;
      grid-template-areas:
      "servicesTitle servicesTitle"
      "service1 service2"
      "service3 service3";
      justify-self: center;
    }
  }
  .servicesBg{
    background: url("../img/ServicesSection.png") no-repeat center;
    background-size: cover;
    padding-left: 10%;
    margin-left: -10%;
    padding-right: 10%;
    margin-right: -10%;
    padding-bottom: 28%;
    margin-bottom: -28%;

  }


  .serviceBox{
    text-align: center;
    color: var(--main-bg-color);
    padding: 0em 1em;
  }
   .serviceBox img{
    width: clamp(60px, 110px, 150px);   
  }
   .serviceBox h3{
    color: var(--main-bg-color);
  }
  @media screen and (max-width: 600px) {
    .serviceBox img {
      width: clamp(60px, 60px, 150px); 
    }
    
  }  

   .serviceBox p{
    font-size: clamp(0.7rem, 0.8vw, 1.7rem);;   
  }
  
  .service1 {
    justify-self: center;
    align-self: center;
    grid-area: service1;
  }
  
  .service2 {
    justify-self: center;
    align-self: center;
    grid-area: service2;
  }
  
  .service3 {
    justify-self: center;
    align-self: center;
    grid-area: service3;
  }
  @media screen and (max-width: 600px) {
    .service3 {
      justify-self: center;
      align-self: start;
      grid-area: service3;
    }
  }
  
  .servicesTitle {
    justify-self: center;
    grid-area: servicesTitle;
    padding-bottom: 1em;
    padding-top: 4em;
  }
  .servicesTitle h2{
    margin-bottom: -29px;
  }
  .servicesTitleBox{
    border-bottom-style: groove;
    border-bottom-color: var(--main-bg-color);
    border-bottom-width:thick;
    display: flex;
    border-width: 20px;
  }

  /* --------------- ---------------PRODUCTS Section Behavior------------ ---------- */
  
  /* Productos Grid behavior */
  .Productos {  display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    padding-top: 12em;
    padding-right: 3em;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      "productosImg productosCategory1"
      "productosImg productosCategory2"
      "productosImg productosCategory3";
    grid-area: Productos;
  }

  @media screen and (max-width: 700px) {
    .Productos {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 1fr 1fr 1fr;
      padding-right: 0em;
      grid-template-areas:
      "productosImg" 
      "productosCategory1"
      "productosCategory2"
      "productosCategory3";
      justify-self: center;
      padding-top: 6em;
    }
    
  } 

/* Product Behavior Product Img Section */
  
.productosImg {
    justify-self: center;
    align-self: center;
    grid-area: productosImg;
}
.pulse{
  align-items: center;
  position: absolute;
  width: 59vh;
  height: 59vh;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.663);
  outline: 1px solid transparent;
  animation: pulse 3s ease-in-out infinite; 
}
@keyframes pulse {
  0% { transform: scale(0); opacity: 0.8;}
  100% { transform: scale(1); opacity: 0;}
}
.productosImg img{
  position: relative;
}

.grow img{
  transition: 1s ease;
  }
  
  .grow img:hover{
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
  transition: 1s ease;
  }

@media screen and (max-width: 700px) {
  .productosImg img{
    display: block;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}
.pulse{
  margin-left: 70px;
  width: 35vh;
  height: 35vh;
}
} 

/* Text on ProductCategory Behavior */

.titlePrimaryColor h2{
  color: var(--secundary-bg-color); 
  margin-bottom: -29px;
}
.productsTitleBox{
  border-bottom-style: groove;
  border-bottom-color: rgba(147, 22, 32, 0.1) ;
  border-bottom-width:thick;
  display: flex;
  border-width: 20px;
}

.styledNumber {
  font-size: clamp(3.1rem, 4vw, 5rem); 
  color: var(--terciary-bg-color); 
  font-family: 'Tulpen One', cursive;
}  

.styledSlash {
  font-size: clamp(1.1rem, 2vw, 3rem); 
  color: var(--secundary-bg-color); 
  font-family: 'Tulpen One', cursive;
}

  .productosCategory1 { grid-area: productosCategory1; }
 
  .productosCategory2 { grid-area: productosCategory2; }
  
  .productosCategory3 { grid-area: productosCategory3; }


  /* --------------- ---------------METODO Section Behavior------------ ---------- */
  

  .Metodo {
    display: grid; 
    grid-template-columns: 1fr; 
    grid-template-rows: 0.5fr 1fr; 

    grid-template-areas: 
      "MetodoTitle"
      "MetodoText"; 
    justify-content: center; 
    align-content: center; 
    justify-items: center; 
    align-items: center; 
    justify-self: center; 
    align-self: center; 
    grid-area: Metodo;
    gap: 1em;

  }

  .metodoBg{
    
    background: url("../img/MetodoSection.png") no-repeat center;
    background-size: cover;
    padding-left: 10%;
    margin-left: -10%;
    padding-right: 10%;
    margin-right: -10%;
    padding-bottom: 13%;
    margin-bottom: -13%;
    padding-top: 2%;
    margin-top: -2%;
  }

  @media screen and (max-width: 600px) {
    .Metodo{
      grid-template-rows: 0.3fr 1fr; 
      gap: 0.4em;
  }
  }
  
/* MetodoTitle behavior on Metodo section */

  .metodoTitleBox{
    border-bottom-style: groove;
    border-bottom-color: var(--main-bg-color);
    border-bottom-width:thick;
    display: flex;
    border-width: 20px;
  }
  .metodoTitleBox h2{
    margin-bottom: -29px;
  }
  .MetodoTitle { grid-area: MetodoTitle; }

  /* MetodoText behavior on Metodo section */

.metodoTextBox{
  color: var(--main-bg-color);
}

.metodoTextBox p{
  font-size: clamp(0.7rem, 1vw, 2rem);
}

.MetodoText { grid-area: MetodoText; }


  /* --------------- ---------------EPECIFICACIONES Section Behavior------------ ---------- */
  
  /* Grid Behavior */

  .Especificaciones {  display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 0.4fr 1.6fr;
    column-gap: 1em;
    grid-auto-flow: row;
    grid-template-areas:
      "especTitle especTitle especTitle especTitle"
      "mainEspec espec1 espec2 espec3";
    grid-area: Especificaciones;
  }

  @media screen and (max-width: 700px) {
    .Especificaciones {
      grid-template-columns: 1fr;
      grid-template-rows: 0.4fr 1fr 1fr 1fr 1fr;
      row-gap: 0.5em;
      grid-template-areas:
      "especTitle" 
      "espec1"
      "espec2"
      "espec3"
      "mainEspec";
      justify-self: center;
    }
    
  } 

  /* Title in Espec Section Behavior */
  
.especTitle {
    justify-self: center;
    grid-area: especTitle;
  }

.especTitleBox h2{
  color: var(--secundary-bg-color); 
  margin-bottom: -29px;
}
.especTitleBox{
  border-bottom-style: groove;
  border-bottom-color: rgba(147, 22, 32, 0.1) ;
  border-bottom-width:thick;
  display: flex;
  border-width: 20px;
}

/* Main espec Behavior */

  .mainEspec {
    justify-self: center;
    align-self: center;
    grid-area: mainEspec;
  }
  .mainEspecBox{
    border: 10px solid;
    border-color: var(--secundary-bg-color);
    border-style: ridge;
    padding: 5%;
    text-align: center;
  }
  /* @media screen and (max-width: 700px) {
    .mainEspecBox {
      padding: 1em;
    }
    
  }  */
  .mainEspecBox p{
    font-size: clamp(0.8rem, 1.2vw, 2rem);
  }



  /* Secundary espec Behavior */
  
  .especBox{
    border: 1px solid;
    border-color: var(--secundary-bg-color);
    border-style: dashed;
    padding: 4%;
  }
  
    /* @media screen and (max-width: 700px) {
    .especBox {
      padding: 1em;
    }
    
  }  */
  
  .espec1 {
    justify-self: center;
    align-self: center;
    grid-area: espec1;
  }
  
  .espec2 {
    justify-self: center;
    align-self: center;
    grid-area: espec2;
  }

  .espec3 {
    justify-self: center;
    align-self: center;
    grid-area: espec3;
  }


  /* --------------- ---------------CONTACTO / FORMULARIO Section Behavior------------ ---------- */
  
  /* Grid Behavior */
  .Contacto {  
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      "Formulario contactoInfo1"
      "Formulario contactoInfo2"
      "Formulario contactoInfo3"
      "Formulario contactoInfo4";
    grid-area: Contacto;

    border-top-style: solid;
    border-top-color: lightgrey;
    border-top-width: thin;

  }
  @media screen and (max-width: 700px) {
    .Contacto {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 2fr 0.5fr 0.5fr;
      grid-template-areas:
      "Formulario Formulario" 
      "contactoInfo1 contactoInfo2"
      "contactoInfo3 contactoInfo4";
      justify-self: center;
      column-gap: 1em;
      margin-top: 1em;
    }

  } 

  /* Formulario behavior */

  .formContainer h3{
    padding-bottom: 1em;
    text-align: center;
    display: block;
  }
  
  .Formulario { 
    justify-self: center; 
    align-self: center; 
    text-align: center;
    grid-area: Formulario; 
    background-color: #93162028 ;
    padding: 5%;
    border-radius: 10px;
  }
  @media screen and (max-width: 700px) {

    .Formulario { 
      margin-top: 1em;
      padding: 3%;
     }
  } 

  form label {
    display: inline-block;
    margin-bottom: 0.1rem;
  }
  
  form .form-group {
    margin-bottom: 0.5rem;
    font-size: clamp(0.6rem, 1vw, 2rem);
  }
  
  form .form-control {
    display: block;
    width: 100%;
    padding: .375rem .7rem;
    font-size: clamp(0.6rem, 0.8vw, 2rem);
  }
  .btn {
    display: inline-block;
    font-size: clamp(0.8rem, 1vw, 2rem);
    padding: 10px 17px;
    cursor: pointer;
  }
  
  .btn-red {
    background: var(--secundary-bg-color);
    color: #fff;
    border: 2px solid var(--main-bg-color);
    border-radius: 5px;
    cursor: pointer;
  }
  
  .contactoInfo1 { grid-area: contactoInfo1; align-self: center;}
  
  .contactoInfo2 { grid-area: contactoInfo2; align-self: center;}
  
  .contactoInfo3 { grid-area: contactoInfo3; align-self: center;}
  
  .contactoInfo4 { grid-area: contactoInfo4; align-self: center;}

    /* --------------- --------------- Footer Section Behavior------------ ---------- */
  
  .Footer { 
    grid-area: Footer; 
    align-self: center;
    
  }
  .footerBox{
    text-align: center;
    color: var(--terciary-bg-color);
    font-style: italic;
    font-size: clamp(0.6rem, 0.8vw, 2rem);

    border-top-style: solid;
    border-top-color: lightgrey;
    border-top-width: thin;

    padding-top: 1.5em;
  }
  .LowerText{
    font-size: clamp(0.5rem, 0.8vw, 1.5rem);
  }
  .IconOpacity{
    opacity: 0.8;
  }
  .IconHoverAnimation:hover{
    animation: scaleUp 1s ease 0s 1 normal both;
  }
  @keyframes scaleUp {
    0% {
      transform: scale(1);
    }
  
    100% {
      transform: scale(1.1);
    }
  }