/*=============== FONTS ===============*/
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
/*=============== VARIABLES CSS ===============*/
:root {
  --primary: #0f766e;
}

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

body {
    font-family: "Nunito", sans-serif;
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
    align-content: flex-start;
    flex-wrap: wrap;
    opacity: 1;
    text-transform: uppercase;
    background-color: #e5e5f7;
    background-image:
    repeating-radial-gradient(
      circle at 0 0,
      transparent 0,
      #e5e5f7 var(--dot-size)
    ),
    repeating-linear-gradient(
      #0f766e55,
      #0f766e
    );
}

section.section{
  width: 100%;
  height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
}

section.section .info{
  position: relative;
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  padding-left: 5%;
  background: white;
  text-transform: uppercase;
}

section.section .info h3{
  width: 70%;
  color: var(--primary);
  font-weight: bold;
  font-size: 42px;
  margin-bottom: 10px;
}

section.section .info p{
  width: 70%;
  color: #737373;
  font-size: 16px;
  margin-top: 10px;
}

.animacion{
  position: relative;
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  background: white;
  transition: all 1s linear;

}

.animacion .item{
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  position: relative;
  background: var(--primary);
  border-radius: 1rem;
  transform: scale(0);
  transition: all 1s linear;
}

.animacion .item p{
  color: white;
}

.animacion-wrapper{
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
}

/* === HOME === */
.section__home canvas#demo{
  position: fixed;
  top: 0;
  left: 0;
  inset: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;
}

.section__home nav{
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-content: center;
}

.section__home nav a{
  width: 15%;
  text-align: center;
  margin: 1%;
  padding: 0.5% 0;
  color: var(--primary);
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(3px);
  border-radius: .5rem;
  font-size: 14px;
  text-decoration: none;
  transition: all .5s linear;
}

.section__home nav a:last-child{
  background: rgba(15, 118, 109, 0.6);
  color: white;
}

.section__home nav a:hover{
  background: white;
}

.section__home nav a:last-child:hover{
  background: var(--primary);
}

.section__home h1{
  width: 100%;
  text-align: center;
  font-size: 46px;
  color: white;
  letter-spacing: 2px;
}

.section__home p{
  width: 70%;
  text-align: center;
  font-size: 14px;
  color: white;
  letter-spacing: 0px;
}

.section__home .triangulo{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 15vh;
  clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
  background: white;
}

.spacer{
  width: 50%;
  height: 100%;
  background: white;
}

.spacer:first-child{
  background: transparent;
}

/* ===  scroll-container ===*/
.scroll-container{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  position: relative;
}


/* ===== ANIMACION ===== */
/* === PRODUCTOS === */
.animacion.productos .item{
  width: 45%;
  height: 55%;
  transform: scale(1);
}

.animacion.productos .item .img{
  width: 80%;
  height: calc(0.8 * 0.45 * 0.5 * 1 * 100vw);
  border-radius: 1rem;
  margin-bottom: 20px;
}

.animacion.productos .item .img canvas{
  width: 100%;
  height: 100%;
  border-radius: 1rem;
}

.animacion.productos .item p{
  width: 90%;
  text-align: center;
}

.animacion.productos .item .title{
  margin-top: 20px;
  font-weight: bold;
  font-size: 20px;
}

.animacion.productos .item .description{
  font-weight: normal;
  font-size: 16px;
}

.animacion.productos .item .producto{
  transform: scale(0);
  width: 0;
  height: 0;
}

.animacion.productos .item svg{
  transform: scale(0);
  width: 0;
  height: 0;
}

/* === CLIENTES === */
.animacion.clientes .item{
  width: 80%;
  height: 20%;
  transform: scale(1);
}

.animacion.clientes .item .img{
  width: 20%;
  height: calc(0.2 * 0.8 * 0.5 * 1 * 100vw);
  border-radius: 1rem;
  background: #000;
}

.animacion.clientes .item .img canvas{
  width: 100%;
  height: 100%;
  border-radius: 1rem;
}

.animacion.clientes .item p{
  width: 70%;
  text-align: center;
}

.animacion.clientes .item .title{
  font-weight: bold;
  font-size: 20px;
  text-align: left;
  margin-left: 4%;
}

.animacion.clientes .item .description{
  font-weight: normal;
  font-size: 16px;
  transform: scale(0);
  width: 0;
  height: 0;
}

.animacion.clientes .item .producto{
  transform: scale(0);
  width: 0;
  height: 0;
}

.animacion.clientes .item svg{
  transform: scale(0);
  width: 0;
  height: 0;
}

/* === COTIZACIONES === */
.animacion.cotizaciones .item{
  align-content: flex-start;
}

.animacion.cotizaciones .item{
  width: 45%;
  height: 60%;
  transform: scale(1);
}

.animacion.cotizaciones .item .img{
  width: 20%;
  height: calc(0.2 * 0.45 * 0.5 * 1 * 100vw);
  border-radius: 1rem;
  margin-top: 5%;
  background: #000;
}

.animacion.cotizaciones .item .img canvas{
  width: 100%;
  height: 100%;
  border-radius: 1rem;
}

.animacion.cotizaciones .item p{
  width: 70%;
  text-align: center;
}

.animacion.cotizaciones .item .title{
  font-weight: bold;
  font-size: 16px;
  margin-top: 5%;
  text-align: left;
  padding-left: 4%;
}

.animacion.cotizaciones .item .description{
  font-weight: normal;
  font-size: 16px;
  transform: scale(0);
  width: 0;
  height: 0;
}

.animacion.cotizaciones .producto{
  width: 90%;
  height: 4%;
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  margin: 20px 0 0 0;
}

.animacion.cotizaciones .producto .line{
  width: 75%;
  height: 100%;
  border-radius: 1rem;
  background: white;
}

.animacion.cotizaciones .producto .precio{
  width: 20%;
  height: 100%;
  border-radius: 1rem;
  background: white;
}

.animacion.cotizaciones .item svg{
  transform: scale(0);
  width: 0;
  height: 0;
}

/* === ESTADISTICAS === */
.animacion.estadisticas .item{
  width: 80%;
  height: 50%;
  transform: scale(1);
  background: var(--primary);
}

.animacion.estadisticas .item svg{
  width: 100%;
  height: 100%;
}

.animacion.estadisticas .img{
  width: 0;
  height: 0;
  transform: scale(0);
}

.animacion.estadisticas .item p{
  font-size: 0;
  transform: scale(0);
  width: 0;
  height: 0;
}

.animacion.clientes .item .producto{
  transform: scale(0);
  width: 0;
  height: 0;
}


/* === planes === */
.planes{
  position: relative;
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  background: white;
}

.planes a{
  width: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  text-align: center;
  color: white;
  background: var(--primary);
  text-decoration: none;
  padding: 2% 0;
  margin: 2% 0;
  border-radius: 1rem;
  transition: all .5s linear;
}

.planes a:hover{
  box-shadow: 0px 0px 25px var(--primary);
}

footer{
  width: 100%;
  height: auto;
  background: white;
  display: flex;
  justify-content: space-around;
  align-items: center;
  align-content: center;
  padding: 1% 0;
  color: #0f766e;
}

footer a{
  color: #0f766e;
}