/* INTRO ======================= */
#intro {
  background-color: var(--gris-2);
  padding: var(--paddingMedium) 0 var(--paddingMedium) 0;
  margin-top: 89px;
  font-size: 16px;
  color: var(--marino);
  overflow-x: hidden;
}

#intro .soon {
  font-weight: 500;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.1em;
  margin-bottom: 0.8em;
}

#intro h1 {
  font-weight: 900;
  font-size: clamp(1.7rem, 5.3vw, 3.9rem);
  line-height: 1.2em;
  margin-bottom: 0.2em;
  max-width: 740px;
  position: relative;
  z-index: 1;
}

#intro .wrapper {
  display: flex;
  align-items: center;
  position: relative;
}

#intro .wrapper h2 {
  font-weight: 700;
  font-size: clamp(1.7rem, 5.3vw, 2.7rem);
  line-height: 1.2em;
  margin-bottom: 0.3em;
  max-width: 740px;
  position: relative;
  z-index: 1;
}

#intro .wrapper p {
  font-weight: 600;
  font-size: clamp(1.1rem, 2.1vw, 1.3rem);
  line-height: 1.3em;
  margin-bottom: 1.2em;
  max-width: 500px;
  position: relative;
  z-index: 1;
}

#intro .wrapper a {
  border-radius: 1em;
  padding: 0.3em 1em;
  font-weight: 700;
  font-size: clamp(1.2rem, 3.6vw, 1.3rem);
  background-color: var(--dorado-2);
  color: var(--marino);
  transition: all 0.2s;
  white-space: nowrap;
  display: inline-block;
}

#intro .wrapper a:hover {
  background-color: var(--dorado-1);
}

#intro .wrapper picture {
  position: absolute;
  z-index: 0;
  margin-right: 0;
  right: -270px;
  top: -90px;
  bottom: -90px;
  width: 800px;
}

#intro picture img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
}

@media screen and (max-width: 800px) {
  #intro {
    margin-top: 0;
  }
}

@media screen and (max-width: 1300px) {
  #intro .wrapper {
    width: 95%;
  }
}

@media screen and (max-width: 1200px) {
  #intro .wrapper {
    width: 93%;
  }
}

@media screen and (max-width: 1150px) {
  #intro .wrapper {
    width: 90%;
  }
}

@media screen and (max-width: 1000px) {
  #intro .wrapper {
    width: 100%;
  }

  #intro .wrapper picture {
    right: -90px;
    top: -90px;
    bottom: -90px;
    width: 600px;
  }
}

@media screen and (max-width: 950px) {
  #intro .wrapper {
    flex-direction: column-reverse;
  }

  #intro .wrapper picture {
    position: relative;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    max-width: 550px;
  }

  #intro .wrapper h3 {
    max-width: 100%;
  }
}

@media screen and (max-width: 550px) {
  #intro .wrapper picture {
    max-width: 400px;
  }
}

/* ADAPTABILITY ======================= */
#adaptability {
  background-color: var(--gris-2);
  padding: var(--paddingMedium) 0 var(--paddingMedium) 0;
  font-size: 16px;
  color: var(--marino);
}

#adaptability h2 {
  text-align: center;
  font-weight: 800;
  font-size: clamp(1.6rem, 5.1vw, 3.1rem);
  line-height: 1.2em;
  margin: 0 auto 0.5em auto;
  max-width: 950px;
}

#adaptability p {
  text-align: center;
  font-weight: 600;
  font-size: clamp(1.1rem, 3.81vw, 1.5rem);
  line-height: 1.3em;
  margin: 0 auto;
  max-width: 750px;
}

/* CLOUD ======================= */
#cloud {
  background-color: var(--gris-2);
  padding: 0 0 var(--paddingMedium) 0;
  font-size: 16px;
  color: var(--marino);
}

#cloud .wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px;
  align-items: center;
}

#cloud .wrapper picture {
  width: 100%;
}

#cloud .wrapper picture img {
  width: 100%;
}

#cloud h2 {
  font-weight: 800;
  font-size: clamp(1.6rem, 4.4vw, 2.5rem);
  line-height: 1.2em;
  margin-bottom: 0.2em;
  text-transform: uppercase;
}

#cloud p {
  font-weight: 600;
  font-size: clamp(1.1rem, 2.6vw, 1.4rem);
  line-height: 1.3em;
  max-width: 500px;
}

@media screen and (max-width: 600px) {
  #cloud .wrapper {
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
  }

  #cloud .wrapper picture {
    max-width: 300px;
    margin: 0 auto;
  }

  #cloud h2 {
    text-align: center;
  }

  #cloud p {
    text-align: center;
    margin: 0 auto;
  }
}

/* BENEFICIOS ======================= */
#benefits {
  background-color: var(--gris-2);
  padding: 0 0 var(--paddingMedium) 0;
  font-size: 16px;
  color: var(--marino);
}

#benefits ul {
  font-size: clamp(1.1rem, 3.81vw, 1.1rem);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2.5em;
}

#benefits ul i {
  font-size: 2.5em;
  margin-bottom: 0.05em;
}

#benefits ul h3 {
  font-size: 1.2em;
  margin-bottom: 0.4em;
  font-weight: 800;
}

#benefits ul li:nth-child(1) h3 {
  color: var(--coral-1);
}

#benefits ul li:nth-child(2) h3 {
  color: var(--purpura-1);
}

#benefits ul li:nth-child(3) h3 {
  color: var(--azul-1);
}

#benefits ul li:nth-child(4) h3 {
  color: var(--verde-1);
}

#benefits ul li:nth-child(5) h3 {
  color: var(--dorado-1);
}

#benefits ul p {
  font-size: 0.85em;
  font-weight: 600;
}

@media screen and (max-width: 1000px) {
  #benefits ul {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 650px) {
  #benefits ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 440px) {
  #benefits ul {
    grid-template-columns: repeat(1, 1fr);
  }

  #benefits ul br {
    display: none;
  }
}

/* AGENDAR ======================= */
#schedule {
  background-color: var(--gris-2);
  padding: var(--paddingMedium) 0;
  font-size: clamp(1.1rem, 3.81vw, 1.4rem);
  font-weight: 600;
  line-height: 1.3em;
}

#schedule .wrapper {
  display: flex;
  gap: 30px;
  align-items: center;
}

#schedule .wrapper a {
  white-space: nowrap;
  background-color: var(--purpura-1);
  color: #fff;
  padding: 0.2em 1.1em;
  border-radius: 1em;
  font-size: 0.9em;
  font-weight: 700;
  transition: all 0.2s;
}

#schedule .wrapper a:hover {
  background-color: var(--purpura-2);
}

#schedule .wrapper p {
  font-weight: 700;
  width: 100%;
  max-width: 600px;
  font-weight: 700;
}

#schedule .wrapper p.note {
  width: 100%;
  max-width: 600px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3em;
  color: var(--gris-8);
  margin-top: 1em;
}

#schedule .wrapper div:nth-child(2) {
  display: flex;
  justify-content: center;
  flex: 1;
}

@media screen and (max-width: 650px) {
  #schedule .wrapper {
    flex-direction: column;
  }

  #schedule .wrapper > div {
    width: 100%;
  }
}

/* AGENDAR ======================= */
#capital {
  background-color: var(--gris-2);
  padding: var(--paddingMedium) 0;
  font-size: clamp(1.1rem, 3.81vw, 1.4rem);
  font-weight: 600;
  line-height: 1.3em;
}

#capital .pageWidth {
  display: flex;
  flex-direction: column;
}

#capital h2 {
  text-align: center;
  font-weight: 800;
  font-size: clamp(1.6rem, 5.1vw, 3.1rem);
  line-height: 1.2em;
  margin: 0 auto 0.5em auto;
  max-width: 800px;
}

#capital p {
  font-weight: 600;
  width: 100%;
  text-align: center;
  max-width: 850px;
  margin-inline: auto;
}

/* FEATURES ======================= */
#features {
  background-color: var(--gris-2);
  padding: var(--paddingMedium) 0 0 0;
  font-size: 16px;
  color: var(--marino);
}

#features .box {
  background-color: #fff;
  border-radius: calc(var(--radiusV) * 0.5);
  position: relative;
  overflow: hidden;
}

#features picture {
  display: flex;
}

#features .wrapper {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

#features h3 {
  padding-left: 1.5em;
  padding-right: 1.5em;
  padding-top: 1.5em;
  padding-bottom: 0.5em;
}

#features p {
  padding-left: 1.5em;
  padding-right: 1.5em;
  padding-bottom: 1.5em;
}

#features p {
  font-weight: 500;
  font-size: clamp(0.9rem, 5.5vw, 1.08rem);
  line-height: 1.2em;
}

#features img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
}

/* FILA 1 */
#features .first {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1em;
}

#features .first div {
  position: relative;
}

/* Autogestion */
#features .first .autogestion picture {
  position: absolute;
  z-index: 1;
  margin-right: 0;
  left: 0;
  width: 220px;
  top: 20px;
  bottom: 0;
}

#features .first .autogestion picture img {
  object-position: 50% 100%;
}

#features .first .autogestion h3 {
  padding-left: 240px;
  padding-top: 2em;
  padding-bottom: 0.5em;
  padding-right: 1.5em;
}

#features .first .autogestion p {
  padding-left: 240px;
  padding-bottom: 2em;
  padding-right: 1.5em;
}

/* Muro */
#features .first .muro picture {
  position: absolute;
  z-index: 1;
  margin-right: 0;
  right: 1em;
  width: 220px;
  top: 1em;
  bottom: 0.3em;
}

#features .first .muro picture img {
  object-position: 50% 100%;
  object-fit: contain;
  object-position: 50% 50%;
}

#features .first .muro h3 {
  padding-right: 240px;
  padding-top: 2em;
  padding-bottom: 0.5em;
  padding-left: 1.5em;
}

#features .first .muro p {
  padding-right: 240px;
  padding-bottom: 2em;
  padding-left: 1.5em;
}

/* FILA 2 */
#features .second {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1em;
}

#features .second .wrapper {
  grid-column: span 3;
  /* Atajo para ocupar 2 columnas */
  display: flex;
  flex-direction: column;
  gap: 1em;
}

#features .second .wrapper .row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1em;
  height: 50%;
}

#features .second .wrapper .row .reportes {
  background-color: var(--purpura-3);
}

#features .second .wrapper .row .reportes h3 {
  max-width: 250px;
}

#features .second .wrapper .row .materiales {
  grid-column: span 2;
  /* Atajo para ocupar 2 columnas */
}

#features .second .wrapper .row .materiales h3 {
  max-width: 300px;
}

#features .second .wrapper .row .materiales i {
  font-size: 4em;
  align-self: flex-end;
  margin-right: 0.5em;
  color: var(--purpura-2);
}

#features .second .wrapper .row .embargos {
  grid-column: span 2;
  /* Atajo para ocupar 2 columnas */
}

#features .second .wrapper .row .embargos h3 {
  max-width: 400px;
}

#features .second .wrapper .row .embargos .wrapper {
  position: relative;
}

#features .second .wrapper .row .embargos .wrapper {
  position: relative;
  flex: 1;
}

#features .second .wrapper .row .embargos .wrapper p {
  padding-right: 60%;
  padding-bottom: 2em;
  padding-left: 1.5em;
}

#features .second .wrapper .row .embargos .wrapper picture {
  position: absolute;
  z-index: 1;
  margin-right: 0;
  right: 0;
  width: calc(60% - 20px);
  top: 0;
  bottom: 20px;
}

#features .second .wrapper .row .embargos .wrapper picture img {
  object-position: 50% 0%;
  object-fit: contain;
}

#features .second .wrapper .row .liquidacion {
  background-color: var(--verde-2);
}

#features .second .wrapper .row .liquidacion h3 {
  max-width: 150px;
}

#features .second .box {
  display: flex;
  flex-direction: column;
}

#features .second .box.novedades {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}

#features .second .box.recibos i {
  color: var(--dorado-3);
  font-size: 4em;
  margin-right: 10px;
}

#features .second p {
  padding-left: 1.5em;
  padding-right: 1.5em;
  padding-bottom: 0.5em;
}

/* FILA 3 */
#features .third {
  display: flex;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1em;
}

#features .third .ganancias {
  position: relative;
}

#features .third .ganancias i {
  font-size: 15em;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 0;
  color: var(--gris-2);
}

#features .third .ganancias h3,
#features .third .ganancias p {
  z-index: 10;
  position: relative;
}

#features .third .contrato {
  grid-column: span 2;
  /* Atajo para ocupar 2 columnas */
  background-color: var(--dorado-3);
}

#features .third .contrato h3 {
  max-width: 400px;
}

#features .third .novedades {
  background-color: var(--coral-2);
}

/* FILA 4 */
#features .fourth {
  display: flex;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1em;
}

#features .fourth .contabilidad {
  background-color: var(--dorado-1);
}

#features .fourth .interbanking picture {
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
}

#features .fourth .importadores {
  grid-column: span 2;
  /* Atajo para ocupar 2 columnas */
}

#features .fourth .importadores h3 {
  max-width: 320px;
}

#features .fourth .importadores p {
  padding-right: 240px;
  padding-bottom: 2em;
  padding-left: 1.5em;
}

#features .fourth .importadores picture {
  position: absolute;
  z-index: 1;
  margin-right: 0;
  right: 0;
  width: 220px;
  top: 0;
  bottom: 0;
}

#features .fourth .importadores picture img {
  object-fit: contain;
  object-position: 50% 50%;
}

@media screen and (max-width: 1024px) {
  #features .row:nth-child(1) > div {
    position: relative;
    background-color: #fff;
    border-radius: calc(var(--radiusV) * 0.5);
  }

  #features .second {
    grid-template-columns: repeat(2, 1fr);
  }

  #features .second .box.vacaciones {
    grid-column: span 3;
  }

  #features .second .box.vacaciones picture {
    position: absolute;
    z-index: 1;
    margin-right: 0;
    right: 0;
    width: 220px;
    top: 10px;
    bottom: 10px;
  }

  #features .second .box.vacaciones picture img {
    object-position: 50% 50%;
  }

  #features .second .box.vacaciones h3 {
    padding-right: 240px;
    padding-top: 2em;
    padding-bottom: 0.5em;
    padding-left: 1.5em;
  }

  #features .second .box.vacaciones p {
    padding-right: 240px;
    padding-bottom: 2em;
    padding-left: 1.5em;
  }

  #features .second .box.organigrama {
    height: auto;
  }

  #features .second .box.recibos {
    height: auto;
  }

  #features .second .box.desarrollo picture {
    margin: 10px auto 0 auto;
    max-width: 70%;
  }

  #features .second .box.comunicacion picture {
    margin: 10px auto 0 auto;
    max-width: 70%;
  }

  #features .second .box.portal picture {
    position: absolute;
    bottom: 0;
    right: 20px;
    top: 60px;
    left: 50%;
  }

  #features .second .row:nth-child(3) {
    display: flex;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2em;
  }
}

@media screen and (max-width: 820px) {
  #features .first {
    grid-template-columns: repeat(1, 1fr);
  }

  #features .third {
    grid-template-columns: repeat(2, 1fr);
  }

  #features .third .ganancias {
    grid-column: span 2;
  }

  #features .third .novedades {
    grid-column: span 2;
  }

  #features .fourth .contabilidad {
    grid-column: span 2;
  }

  #features .fourth .interbanking {
    grid-column: span 2;
  }

  #features .fourth .importadores {
    grid-column: span 4;
  }
}

@media screen and (max-width: 650px) {
  #features .second .wrapper .row .reportes {
    grid-column: span 3;
  }

  #features .second .wrapper .row .reportes p {
    padding-bottom: 1.5em;
  }

  #features .second .wrapper .row .reportes h3 {
    max-width: 100%;
  }

  #features .second .wrapper .row .materiales {
    grid-column: span 3;
  }

  #features .second .wrapper .row .materiales h3 {
    max-width: 100%;
  }

  #features .second .wrapper .row .materiales p {
    padding-bottom: 1.5em;
  }

  #features .second .wrapper .row .materiales i {
    display: none;
  }

  #features .second .wrapper .row .embargos {
    grid-column: span 3;
  }

  #features .second .wrapper .row .embargos h3 {
    max-width: 100%;
  }

  #features .second .wrapper .row .embargos p {
    padding-bottom: 1.5em;
  }

  #features .second .wrapper .row .liquidacion {
    grid-column: span 3;
  }

  #features .second .wrapper .row .liquidacion h3 {
    max-width: 100%;
  }

  #features .second .wrapper .row .liquidacion p {
    padding-bottom: 1.5em;
  }

  #features .fourth .contabilidad {
    grid-column: span 4;
  }

  #features .fourth .interbanking {
    grid-column: span 4;
  }

  #features .fourth .interbanking picture {
    max-width: 300px;
    margin-inline: auto;
  }
}

@media screen and (max-width: 500px) {
  #features .first .autogestion h3 {
    padding-left: 1.5em;
  }

  #features .first .autogestion p {
    padding-left: 1.5em;
    padding-bottom: 0;
  }

  #features .first .autogestion picture {
    position: relative;
    margin-inline: auto;
  }

  #features .first .muro h3 {
    padding-right: 1.5em;
  }

  #features .first .muro p {
    padding-right: 1.5em;
  }

  #features .first .muro picture {
    position: relative;
    left: 1em;
    right: 0;
    width: calc(100% - 2em);
    height: 150px;
  }

  #features .first .muro picture img {
    /* object-position: 0 0; */
  }
  #features .second .wrapper .row .embargos .wrapper p {
    padding-right: 40%;
  }
  #features .second .wrapper .row .embargos .wrapper picture {
    right: 10px;
    width: calc(40% - 20px);
  }

  #features .second .wrapper .row .embargos .wrapper picture img {
    object-position: 0% 0%;
    object-fit: contain;
  }

  #features .second .box.vacaciones p {
    padding-right: 180px;
  }

  #features .second .box.vacaciones picture {
    width: 160px;
  }
}

@media screen and (max-width: 400px) {
  #features .second .box.vacaciones p {
    padding-right: 1.5em;
    padding-bottom: 0.5em;
  }
  #features .second .box.vacaciones picture {
    position: relative;
    margin-inline: auto;
    margin-bottom: 1.5em;
  }

  #features .fourth .importadores h3 {
    max-width: 100%;
  }
  #features .fourth .importadores p {
    padding-right: 1.5em;
    padding-bottom: 0.5em;
  }
  #features .fourth .importadores picture {
    position: relative;
    margin-inline: auto;
    margin-bottom: 1.5em;
  }
}

/* QUIPPOS LH ======================= */
#quipposCore {
  background-color: var(--gris-2);
  padding: var(--paddingMedium) 0;
}

#quipposCore .pageWidth {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#quipposCore h2 {
  font-weight: 800;
  font-size: clamp(1.5rem, 4.5vw, 2.7rem);
  line-height: 1.2em;
  margin-bottom: 0.2em;
  text-align: center;
  color: #000;
  margin-inline: auto;
  max-width: 620px;
}
#quipposCore h2 span {
  color: var(--coral-1);
}

#quipposCore .box {
  border-radius: calc(var(--radiusV) * 0.5);
  padding: 2em 3em;
  background-color: #fff;
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 2em;
  justify-content: center;
  margin-inline: auto;
}

#quipposCore .box img {
  width: 250px;
}

#quipposCore .box ul {
  /* flex: 1; */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#quipposCore .box ul li {
  position: relative;
  padding-left: 12px;
  font-weight: 600;
  font-size: clamp(0.9rem, 1.8vw, 1rem);
  line-height: 1.3em;
  padding-left: 1.5em;
}

#quipposCore .box ul li:before {
  content: "";
  width: 1.2em;
  height: 1.2em;
  background: url(check.svg) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#quipposCore .box ul li span {
  position: absolute;
  left: 0;
  top: 0;
}

#quipposCore p {
  font-weight: 600;
  font-size: clamp(1rem, 2vw, 1.3rem);
  line-height: 1.3em;
  margin-bottom: 1.8em;
  text-align: center;
}

#quipposCore .cta {
  text-align: center;
}

#quipposCore a {
  border-radius: 1em;
  padding: 0.3em 1em;
  font-weight: 700;
  font-size: clamp(1.1rem, 3.6vw, 1.2rem);
  background-color: var(--dorado-2);
  color: var(--marino);
  transition: all 0.2s;
  white-space: nowrap;
  display: inline-block;
}

#quipposCore a:hover {
  background-color: var(--dorado-1);
}

@media screen and (max-width: 620px) {
  #quipposCore .box {
    flex-direction: column;
    padding: 2em 1em;
  }
}

/* INDUSTRIAS ======================= */
#industries {
  background-color: var(--gris-2);
  padding: var(--paddingMedium) 0;
  font-size: 16px;
  color: var(--marino);
}

#industries .pageWidth {
  display: flex;
  flex-direction: column;
}

#industries h2 {
  text-align: center;
  font-weight: 800;
  font-size: clamp(1.6rem, 5.1vw, 4.1rem);
  line-height: 1.2em;
  margin: 0 auto 0.3em auto;
  max-width: 800px;
}

#industries h2 span {
  white-space: nowrap;
}

#industries p {
  font-size: clamp(1.1rem, 3.81vw, 1.4rem);
  font-weight: 600;
  line-height: 1.3em;
  width: 100%;
  max-width: 800px;
  text-align: center;
  margin-bottom: 5em;
  margin-inline: auto;
}

#industries ul {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
  margin-bottom: 10em;
  font-size: clamp(0.8rem, 3.81vw, 0.8rem);
}

#industries ul li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--marino);
}

#industries ul i {
  font-size: 60px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  margin-bottom: 15px;
  transition: all 0.4s;
}

#industries ul li a:hover i {
  /* background: #444; */
  transform: scale(1.1, 1.1);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  transition: all 0.1s;
}

#industries ul li:nth-child(1) i {
  color: var(--verde-1);
}

#industries ul li:nth-child(2) i {
  color: var(--coral-1);
}

#industries ul li:nth-child(3) i {
  color: var(--dorado-1);
}

#industries ul li:nth-child(4) i {
  color: var(--purpura-1);
}

#industries ul li:nth-child(5) i {
  color: var(--azul-1);
}

#industries ul li:nth-child(6) i {
  color: var(--coral-2);
}

#industries ul li:nth-child(7) i {
  color: var(--azul-3);
}

#industries ul li:nth-child(8) i {
  color: var(--purpura-3);
}

#industries a.download {
  /* white-space: nowrap; */
  background-color: var(--dorado-2);
  color: var(--marino);
  padding: 0.3em 1.1em;
  border-radius: 1em;
  font-size: clamp(1.1rem, 3.81vw, 1.3rem);
  font-weight: 700;
  transition: all 0.2s;
  display: flex;
  margin-inline: auto;
}

#industries a.download i {
  margin-top: 0.15em;
}

#industries a.download:hover {
  background-color: var(--dorado-3);
}

@media screen and (max-width: 1100px) {
  #industries ul {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media screen and (max-width: 520px) {
  #industries ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* CONTACTO FIX */
#contact {
  padding: var(--paddingMedium) 0 !important;
}

/* Comunidad WhatsApp */
#comunidadWs {
  background-color: var(--gris-2);
  padding: 0 0 var(--paddingMedium) 0;
  font-size: 16px;
  color: var(--marino);
}

#comunidadWs .banner {
  background-color: #d5eed6;
  border-radius: calc(var(--radiusV) * 0.5);
  display: flex;
  gap: 2em;
  align-items: center;
  padding: 1.5em 3em 1.5em 1.5em;
}

#comunidadWs .banner .data h4 {
  font-weight: 800;
  font-size: clamp(1.5rem, 3.1vw, 2.2rem);
  line-height: 1.1em;
  max-width: 900px;
  margin-bottom: 0.2em;
}

#comunidadWs .banner .data p {
  font-weight: 600;
  font-size: clamp(0.9rem, 1.8vw, 1.22rem);
  line-height: 1.3em;
  margin-bottom: 0.6em;
  max-width: 900px;
}

#comunidadWs .banner .data h5 {
  font-weight: 700;
  font-size: clamp(1.2rem, 2.4vw, 1.4rem);
  line-height: 1.3em;
  max-width: 900px;
  margin: 0;
}

#comunidadWs .banner .data .cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6em;
}

#comunidadWs .banner .data .cta a {
  border-radius: 1em;
  padding: 0.3em 1em;
  font-weight: 700;
  font-size: clamp(1.1rem, 3.6vw, 1.2rem);
  background-color: #00c307;
  color: #fff;
  transition: all 0.2s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.2em;
}

#comunidadWs .banner .data .cta a i {
  font-size: 1.3em;
}

#comunidadWs .banner .data .cta a:hover {
  background-color: #008f05;
}

#comunidadWs .banner picture {
  width: 150px;
  display: flex;
}

#comunidadWs .banner picture img {
  width: 100%;
}

@media screen and (max-width: 750px) {
  #comunidadWs .banner .data .cta {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media screen and (max-width: 650px) {
  #comunidadWs .banner {
    align-items: flex-start;
  }
}

@media screen and (max-width: 500px) {
  #comunidadWs .banner {
    flex-direction: column;
    align-items: center;
    padding: 1.5em 3em 1.5em 3em;
    gap: 0;
  }

  #comunidadWs .banner .data {
    text-align: center;
  }

  #comunidadWs .banner .data .cta {
    align-items: center;
  }
}

@media screen and (max-width: 500px) {
  #comunidadWs .banner ul li {
    width: 100%;
  }

  #comunidadWs .banner picture {
    display: none;
  }

  #comunidadWs .banner ul li p {
    width: 100%;
  }
}