.nosotros {
  margin-top: 40px;
  margin-left: 2%;
  margin-right: 2%;
}
.somos {
  font-size: 1.4em;
}
.equipo {
  position: relative;
  display: flex;
  justify: center;
  align-items: center;
  font-family: "Inter", sans-serif;
  font-size: 0.7em;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: -0.015em;
  text-align: justify;
  height: 100%;
  margin-left: 16px;
  margin-right: 16px;
}
.equipo p {
  font-size: 0.5em;
  line-height: 120%;
}
@media only screen and (-webkit-min-device-pixel-ratio: 3) {
  .equipo p {
    font-size: 8px;
    line-height: 120%;
  }
}
.logo-right {
  display: flex;
  justify-content: end;
  align-items: center;
  height: 100%;
  margin-right: 32px;
}
.container {
  background-color: black;
  position: relative;
  display: grid;
  width: 100%;
  height: 180px;
  grid-template-columns: repeat(40, 1fr);
  grid-template-rows: repeat(20, 1fr);
}

.polygon1 {
  background-color: white;
  grid-column: 1 / span 14;
  grid-row: 1 / span 7;
  display: flex;
  justify-content: center;
  align-items: center;
}

.polygonASuperpuesto {
  background-color: white;
  grid-column: 1 / span 15;
  grid-row: 1 / span 8;
}

.polygonASuperpuestoShadow {
  background-color: black;
  grid-column: 1 / span 15;
  grid-row: 1 / span 8;
  border-top-left-radius: 0px !important;
  border-top-right-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}

.polygonBTop {
  background-color: white;
  grid-column: 16 / span 9;
  grid-row: 1 / span 12;
  margin-left: -2px;
  border-bottom-left-radius: 0px !important;
}

.polygonBShadow {
  background-color: black;
  grid-column: 17 / span 9;
  grid-row: 1 / span 13;
  margin-bottom: -1px;
  margin-left: -2px;
  border-bottom-left-radius: 0px !important;
  border-top-right-radius: 0px !important;
}

.polygonBButtom {
  background-color: transparent;
  grid-column: 1 / span 20;
  grid-row: 9 / span 12;
  background-color: white;
  border-top-right-radius: 0px !important;
  margin-top: -1px;
}

.polygonCTop {
  grid-column: 1 / span 4;
  grid-row: 1 / span 4;
  background-image: url("../assets/arrugado.webp");
  background-size: cover;
  background-position: center;
}

.polygonCRoundedTopLeft {
  background-color: transparent;
  grid-column: 26;
  grid-row: 1;
  border-top-left-radius: 32px;
  box-shadow: -16px -16px 0px 15px black;
  margin: 0px;
  z-index: 1;
}

.polygonCRoundedButtomLeft {
  background-color: transparent;
  grid-column: 22;
  grid-row: 14;
  border-top-left-radius: 32px;
  box-shadow: -16px -16px 0px 15px black;
  margin: 0px;
  z-index: 1;
}

.polygonBRoundedButtomRightShadow {
  background-color: black;
  grid-column: 21;
  grid-row: 13;
  border-top-left-radius: 32px;
  margin: 0px;
  z-index: 1;
}

.polygonBRoundedButtomRight {
  background-color: white;
  grid-column: 21;
  grid-row: 13;
  margin-bottom: 1px;
  z-index: 1;
  margin-right: 1px;
  margin-top: -2px;
  margin-left: -2px;
}

.polygon1,
.polygonBTop,
.polygonCTop,
.polygonASuperpuestoShadow,
.polygonBShadow,
.polygonBButtom {
  border-radius: 16px;
}

.container2 {
  position: absolute;
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: repeat(40, 1fr);
  grid-template-rows: repeat(20, 1fr);
  z-index: 10;
}

.container3 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-column: 22 / span 19;
  grid-row: 1 / span 20;
}

/* Estilos para tabletas en modo retrato */
@media (min-width: 481px) and (max-width: 768px) {
  .nosotros {
    margin-left: 5%;
    margin-right: 5%;
  }
  .equipo p {
    font-size: 0.7em;
    line-height: 120%;
  }
  .container {
    height: 100%;
  }
  .polygon1,
  .polygonBTop,
  .polygonCTop,
  .polygonASuperpuestoShadow,
  .polygonBShadow,
  .polygonBButtom {
    border-radius: 16px;
  }
}

/* Estilos para tabletas en modo paisaje y laptops pequeñas */
@media (min-width: 769px) and (max-width: 1024px) {
  .nosotros {
    margin-left: 5%;
    margin-right: 5%;
  }
  .equipo {
    margin-left: 5%;
    margin-right: 5%;
  }
  .equipo p {
    font-size: 1.1em;
    line-height: 120%;
  }
  .logo-right {
    justify-content: end;
    margin-right: 64px;
  }
  .container {
    height: 100%;
  }
  .polygon1,
  .polygonBTop,
  .polygonCTop,
  .polygonASuperpuestoShadow,
  .polygonBShadow,
  .polygonBButtom {
    border-radius: 24px;
  }
}

/* Estilos para laptos */
@media (min-width: 1025px) and (max-width: 1440px) {
  .nosotros {
    margin-left: 10%;
    margin-right: 10%;
  }
  .somos {
    font-size: 2.5em;
  }
  .equipo {
    margin-left: 10%;
    margin-right: 10%;
  }
  .equipo p {
    font-size: 1.5em;
    line-height: 120%;
  }
  .logo-right {
    justify-content: end;
    margin-right: 64px;
  }
  .container {
    height: 100%;
  }
  .polygon1,
  .polygonBTop,
  .polygonCTop,
  .polygonASuperpuestoShadow,
  .polygonBShadow,
  .polygonBButtom {
    border-radius: 32px;
  }
}

/* Estilos para pantallas grandes */
@media (min-width: 1441px) {
  .nosotros {
    margin-left: 10%;
    margin-right: 10%;
  }
  .somos {
    font-family: "Unbounded", sans-serif;
    font-size: 4.5em;
  }
  .equipo {
    margin-left: 10%;
    margin-right: 10%;
  }
  .equipo p {
    font-size: 2em;
    line-height: 120%;
  }
  .logo-right {
    justify-content: end;
    margin-right: 128px;
  }
  .container {
    height: 100%;
  }
  .polygon1,
  .polygonBTop,
  .polygonCTop,
  .polygonASuperpuestoShadow,
  .polygonBShadow,
  .polygonBButtom {
    border-radius: 32px;
  }
}
