* {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 16px;
    font-family: helvetica;
    line-height: 1.5;
  }

:root{
  --color-primario: #4C9CD6;
  --color-oscuro: #33354a;
  --color-claro: #CFE7F4;
  --color-acento-1: #fece4b;
  --color-acento-2: #4F4CD6;
}

body{width: 100%;
  
  }

/*Animations*/
@keyframes deslizaArriba {
  from {
    transform: translateY(100px);
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.deliza-arriba {
  animation: deslizaArriba 2s cubic-bezier(.27,-0.45,0,1.02) 1s;
  animation-fill-mode: both;
  opacity: 0
}

@keyframes opacidad {
  from {opacity: 0;}
  to {opacity: 1;}
}

.opacidad-animation-1 {
  animation-name: opacidad;
  animation-duration: 5s;
  animation-timing-function: ease;
  animation-fill-mode: both;
}

.delay1 {animation-delay: 1.2s;}
/*End Animatios*/  
/*Inicio de el Header*/

 a { color: inherit; text-decoration: none;}
  
 header {
  width: 100%;
  display: flex;
  background: #CFE7F4;
  padding: 15px 0px;
  align-items: center;
  justify-content: center;
  position: fixed;
  /*argin-top: -72px;*/
  z-index: 3;
 }

 nav {display: flex;
      gap: 30px;
      width: 90%;
      max-width: 1600px;
      align-items: center;
      z-index: 3;
      }

 .header1 {
  width: 400px;
  height: 40px;
  border-radius: 10px;
  
 }
 .header2 {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  /*padding-left: 15%;
  padding-right: 15%;*/

  color: #33354A;
  font-family: Helvetica Neue LT Std;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  
 }

 .header2 p {
    display: flex;  
    height: 100%;
    border-radius: 10px;
    align-items: center;
    padding: 0 20px;
    user-select: none;
    cursor: pointer;
    white-space: nowrap;
  }

  .header2 p:hover {
    background-color: #00000011;
  }

 .header3 {
  width: 400px;
  height: auto;
  float: right;
  justify-content: flex-end;
  display: flex;
 }

.header3 a {
  display: flex;
  width: 120px;
  justify-content: center;
  color: #CFE7F4;
  font-family: Helvetica;
  font-size: 16px;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  border-radius: 11px;
  background: #4F4CD6;
  padding: 13px 13px 10px 13px;
  user-select: none;
  cursor: pointer;
}

.header3 a:hover {
  background: #ffffff;
  color: #4F4CD6;
}

.header3 a:active {background: #ebebeb;}

.hamburguesa {
  display: none;
  height: 35px;
  width: 100px;
  justify-content: end;
  align-items: center;
  cursor: pointer;
  user-select: none;
  }

@media only screen and (max-width: 1070px) {
 .header3 {width: auto;}
 .header1 {width: auto;}
 nav {gap: 5px;}
}

@media only screen and (max-width: 950px) {
  .header2 {display: none;}
  .header1 {width: auto;}
  nav {justify-content: space-between;}
  .header3 a {display: none;}
  .hamburguesa {display: flex;}
  
 }

#closemenu {

  height: 1000px;
  max-height: 0px;
  display:block;
  position: fixed;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  z-index: 1;
  overflow: hidden; 
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  
  order: 2;
}
 
#linksheader {
  background-color: var(--color-oscuro);
  height: auto;
  max-height: 0px;
  display:block;
  position: fixed;
  flex-shrink: 0;
  gap: 100px;
  width: 100%;
  max-width: 100%;
  align-items: center;
  z-index: 2;
  padding: 0;
  overflow: hidden;
  backdrop-filter: blur(30px);
}

#linksheader p {
  display: flex; 
  width: 75%; 
  height: 50px;
  border-radius: 10px;
  align-items: center;
  padding: 0 20px;
  user-select: none;
  margin-top: 10px;
  margin-bottom: 20px;
  margin: 0 10% 0 10%;
  cursor: pointer;}

#linksheader p:nth-of-type(2) {min-width: 500px;}
#linksheader p:nth-of-type(1) {margin-top: 100px;}

#linksheader p a{  
  color: #ffffff;
  font-family: Helvetica;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: normal; 
}
#linksheader p:nth-of-type(5) {margin-bottom: 30px;}
#linksheader p:hover {
  background-color: #00000011;}

/*Fin del header*/

/*portada 1 inicio*/
.portadalp {
  margin-top: 70px;
  height: 900px;
  width: 100%;
  padding: 0 90px;
  background-image: url(Material/portada1.webp);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  
}

.portadaslider {
  width: 100%;
    /*background-color: #4F4CD6;*/
  z-index: -2; 
}

.portadalp0 {
  width: 100%;
  /*background-color: #4C9CD6;*/
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
}

.portadalp1 {
  /*background-color: #33354A;*/
  width: 100%;
  height: 80%;
  display: flex;
  align-content: center;
  gap: 30px;
}

.portadalp1-1 {
  width: 50%;
  /*background-color: aqua;*/
  display: flex;
  align-items: center;
}

.portadalp1-1-1 {
  width: 100%;
  height: fit-content;
  display: flex;
  /*background-color: #4F4CD6;*/
  flex-direction: column;
  gap: 30px;
}

.portadalp1-1-1 h1 {
  color: #FFF;
  font-family: Helvetica;
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-shadow: 0px 6px 25px rgba(0, 0, 0, 0.35);
}

.portadalp1-1-1 h3 {
  color:#e6e6e6;
  font-family: Helvetica;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  width: fit-content;
  text-shadow: 0px 0px 18px rgba(0, 0, 0, 0.75);
}

.portadalp1-2 {
  /*background-color: bisque;*/
  width: 50%;
}

.portadalp1-1-1 div {
  display: flex;
  gap: 30px;
}

.botonDeAccion1 {
  display: flex;
  width: fit-content;
  border-radius: 15px;
  padding: 22px 30px 17px 30px;
  background-color:#4C9CD6;
  color: #CFE7F4;
  font-family: Helvetica;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  align-items: center;
}

.botonDeAccion2 {
  display: flex;
  border-radius: 15px;
  width: fit-content;
  padding: 22px 30px 17px 30px;
  background-color: #33354A;
  color: #CFE7F4;
  font-family: Helvetica;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.flechaL, .flechaR {
  cursor: pointer;
  position: absolute;
  top: 450px;
  width: auto;
  padding: 16px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  z-index: 2;
}

.flechaR {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.flechaL:hover, .flechaR:hover {
  background-color: rgba(255, 255, 255, 0.8);}

.botonDeAccion1:hover { background: #ffffff; color: #4C9CD6;}
.botonDeAccion1:active { background-color: #5eaee7;}

.botonDeAccion2:hover {
  background: #CFE7F4;
  color: #33354A ;
}

.botonDeAccion2:active {
  background: #bedae9;
}

  @media only screen and (max-width: 890px) {
    .portadalp0 img { display: none;}
    .portadalp1-2 {display: none;}
    .portadalp1-1-1 h1 {font-size: 35px; ;}
    .portadalp1 {gap:0}
    .portadalp1-1 {width: 100%;}
    .portadalp1-1-1 div {flex-direction: column;}
    .portadalp {height: 800px; padding: 0 40px;}
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;}

  @keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
  }
  /*Fin de la portada de inicio*/

  /*Segunda parte del Landingpage*/

.portadalp2 {
  /*background-color: #4F4CD6;*/
  padding: 93px 0px;
  display: flex;
  justify-content: center;
}

/*El div que contiene la imagen y el texto*/
.portadalp2-1 {
  background-color: #ffffff;
  display: flex;
  width: 80%;
  max-width: 1400px;
  justify-content: space-between;
  align-items: center;
}

/*El div que contiene el texto*/
.portadalp2-1-1 {
  display: flex;
  flex-direction: column;
  width: 50%;
  gap: 31px;
}

.portadalp2-1 h2, .portadalp2-1 span {
  color: #4C9CD6;
  font-family: Helvetica;
  font-size: 45px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.portadalp2-1 span {
  color: #FECE4B;
}

.portadalp2-1 P {
  color: #33354A;
  font-family: Helvetica;
  font-size: 25px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.portadalp2-1 p:nth-of-type(2) {
  color: #33354A;
  font-family: Helvetica;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

/*el div de los botones*/
.portadalp2-1 div div {
  display: flex;
  padding-top: 15px;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  width: fit-content;
}

.portadalp2-1 div a {
  display: flex;
  padding: 22px 30px 17px 30px;
  justify-content: center;
  align-items: center;
  border-radius: 15px;
  background: #33354A;
  box-shadow: 0px 7px 14px 0px rgba(51, 53, 74, 0.33);
  color: #CFE7F4;
  font-family: Helvetica;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  user-select: none;
  cursor: pointer;
  z-index: 0;

}

.portadalp2-1 div a:hover {
  background: #CFE7F4;
  color: #33354A ;
}

.portadalp2-1 div a:active {
  background: #bedae9;
}

.portadalp2-1-2 {
  border-radius: 30px;
  background: url(Material/portada3.jpg), lightgray 50% / cover no-repeat;
  box-shadow: 0px 16px 26pxrgba(51, 53, 74, 0.35);
  width: 393px;
  height: 527px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  background-size: cover;
  background-position: center;
  box-shadow: 0px 16px 26px rgba(51, 53, 74, 0.35);
}

.portadalp2-1-2 img {
  border-radius: 30px;
  background: url(<path-to-image>), lightgray 50% / cover no-repeat;
  
}

@media only screen and (max-width: 890px) {
  .portadalp2-1 { width: 90%; flex-direction: column; gap: 50px;}
  .portadalp2-1-1 { width: 100%; order: 2;}
  .portadalp2-1-2 {height: 300px; width: 100%; background-position: top;}
  .portadalp2-1-2 img {height: auto; width: 100%;}
}
  /*Fin de la segunda parte del landingpage*/

  /*Portada 3 o fotos de los trabajos*/

.portadalp3 {
  background-color: #000000;
  display: flex;
  padding: 80px 0px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 40px;
}

.portadalp3 h3 {
  color: #4C9CD6;
  text-align: center;
  font-family: Helvetica;
  font-size: 39px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.portadalp3-1 {
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-color: #4F4CD6; */
  width: 90%;
  gap: 12px; 
  
}

.portadalp3-1 div {
  background-color: #FECE4B;
  display: flex;
  width: 20%;
  height: 288px;
  border-radius: 21px;
}

.imgtrabajos1 {background-image: url(Material/ServiciosImg/Trabajos1.webp); background-size: cover; background-position: center;}
.imgtrabajos2 {background-image: url(Material/ServiciosImg/Trabajos2.webp); background-size: cover; background-position: center;}
.imgtrabajos3 {background-image: url(Material/portada2.webp); background-size: cover; background-position: center;}
.imgtrabajos4 {background-image: url(Material/portada3.webp); background-size: cover; background-position: center;}

@media only screen and (max-width: 890px) {
  .portadalp3-1 {flex-direction: column;}
 .portadalp3-1 div {width: 80%;} 
 .portadalp3 h3 {margin: 0 30px;}}

  /*Fim de la tercera parte del landingpage*/

  /*Inicio portadalp4 referencias*/

.portadalp4 {
  padding: 88px 0px 65px 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: #cfe7f486; */
}

.portadalp4-1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 23px;
}

.portadalp4-1 h3 {
  font-size: 40px;
  color: var(--color-oscuro);
  font-family: Helvetica;
  font-weight: 700;
  width: 100%;
  display: flex;
  justify-content: center;
}

.referencias1 {
  display: flex;
  align-items: center;
  gap: 30px;
  width: 90%;
}

.referencias1 div {
  display: flex;
  gap: 30px;
  align-items: center;
}

.referencias1 img {
  width: 150px;
  max-width: 150px;
  max-height: 120px;
  object-fit: contain;
  border-radius: 10px;
}

.referencias1 samp {
  background: #4C9CD6;
  width: 14px;
  height: 98px;
  border-radius: 7px;
}

.referencias1 h4 {
  color: #4C9CD6;
  width: 218px;
  margin-left: 30px;
  
}


@media only screen and (max-width: 1200px) {
  .referencias1 {gap: 20px;}
  .referencias1 div {gap: 20px;}
  .referencias1 img {max-width: 80px;}
  .portadalp4-1 h3 {font-size: 30px;}
}

@media only screen and (max-width: 890px) {
  .referencias1 { flex-direction: column; width:90%; align-items: first baseline;}
  .referencias1 h4 {font-size: 20px; margin-top: 50px;}
  .referencias1:nth-of-type(1) > h4 {font-size: 20px; margin-top: 0px;}
  .referencias1 div { width: 100%; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 10px;}
  .referencias1 img { max-width: 400px; max-height: 70px; }
  .portadalp4-1 h3 {justify-content: flex-start; margin-left: 30px; font-size: 35px;}
  .portadalp4-1 { width: 90%;}
}
  /*Fin de la portada 4 y referencias*/

  /*Inicio de la portada 5 y accion*/

.portadalp5 {
  background: var(--color-oscuro);
  display: flex;
  align-items: center;
  gap: 46px;
  height: 486px;
}

.portadalp5-1 {
  background-image: url(Material/ImgBTAccion.png);
  width: 45%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.portadalp5-2 {
  display: flex;
  align-items: center;
}

.portadalp5-2 div {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.portadalp5-2 h3 {
  color: var(--color-acento-1);
  width: 461px;
  font-size: 29px;
  font-weight: 700;
}

.portadalp5-2 a {
  width: 224px;
  height: 50px;
  background: var(--color-primario);
  box-shadow: 0px 10px 10px 0px rgba(69, 157, 222, 0.61);
  border-radius: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  color: white;
  text-align: center;
  font-family: Helvetica;
  font-size: 18px;
  font-weight: 700;
  transition: all 0.5s ease;
  user-select: none;
  cursor: pointer;
}

.portadalp5-2 a:hover {
  transform: scale(1.1);
  background: #77b9e9;
}

.portadalp5-2 a:active {
  transition: all 0.5s cubic-bezier(0,1.87,.52,.88);
  transform: scale(1);

}

@media only screen and (max-width: 890px) {
  .portadalp5 {flex-direction: column;}
  .portadalp5-1 {width: 100%;}
  .portadalp5-2 {width: 85%; margin-bottom: 70px;}
  .portadalp5-2 h3 { width: auto;}
}

  /*Fin de la portada 5 y accion*/

  /*Inicio del Footer*/
footer {
  background-color: var(--color-primario);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 78px;
  height: 412px;
}

.logofooter {
  background-image: url(Material/SVG/Logo_Azul_Andepar.svg);
  width: 234px;
  height: 69px;
}

.informaciondc, .informaciondc div, .index, .index div{
  display: flex;
  flex-direction: column;
  gap: 30px;
  color: white;
  font-family: Helvetica;
  
}

.informaciondc div a, .index div a {
  cursor: pointer;
  user-select: none;
}

.informaciondc div, .index div{
  gap: 10px;
}

.informaciondc h4, .index h4 {
  color: var(--color-acento-1);
  font-size: 29px;
  font-weight: 700;
}

@media only screen and (max-width:890px) {
  footer {flex-direction: column; height: auto; align-items: flex-start; padding: 40px 15%; gap: 30px;}
  .informaciondc h4, .index h4 { font-size: 20px;}
  .informaciondc div a, .index div a{font-size: 12px;}
}
  /*Fin del footer*/

  /*Inicio portada de servicios*/

.portadaS1 {
  height: 729px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: left;
  background-image: url(Material/portada2.webp);
  background-position: center;
  background-size: cover;
}

.portadaS1 > div {
  display: flex;
  width: auto;
  flex-direction: column;
  justify-content: flex-start;
  gap: 31px;
  background-color: var(--color-claro);
  margin-left: 50px;
  padding-bottom: 30px;
  border-radius: 50px;
  overflow: hidden;
}

.portadaS1 > div > h1 {
  width: 500px;
  color: var(--color-claro);
  font-family: Helvetica;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.4;
  padding: 30px 40px;
  border-radius: 50px;
  background-color: var(--color-acento-2);
  box-shadow: 10px 5px 10px rgba(100, 48, 197, 0.397);
}

.portadaS1 > div > p {
  width: 500px;
  color: var(--color-oscuro);
  font-family: Helvetica;
  font-size: 16px;
  font-weight: 500;
  padding: 0px 40px;
}

.portadaS2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 60px;
  padding: 70px 0;
}

.portadaS2 > h2 {
  color: #459DDE;
  text-align: center;
  font-family: Helvetica;
  font-size: 18px;
  font-weight: 900;
}

.portadaS2-1 {
  display: flex;
  width: 80%;
  height: fit-content;
  gap: 10px;
  flex-wrap: wrap;
}

.portadaS2-1 > div {
  width: 24%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: fit-content;
  gap: 21px;
}

.portadaS2-1 > div > h3 {
  width: 85%;
  color: var(--color-primario);
  font-family: Helvetica;
  font-size: 18px;
  font-weight: 900;
}

.portadaS2-1 > div > p {
  width: 85%;
  font-size: 12px;
  font-weight: 500;
  font-family: Helvetica;

  
}

.imgservicio1, .imgservicio2, .imgservicio3, .imgservicio4, .imgservicio5, .imgservicio6, .imgservicio7 {
  width: 100%;
  height: 196px;
  background: url(Material/portada1.jpg);
  background-size: cover;
  background-position: center;
}

.imgservicio1 {background-image: url(Material/ServiciosImg/ServiciosImg1.webp);}
.imgservicio2 {background-image: url(Material/ServiciosImg/ServiciosImg2.webp);}
.imgservicio3 {background-image: url(Material/ServiciosImg/ServiciosImg3.webp);}
.imgservicio4 {background-image: url(Material/ServiciosImg/ServiciosImg4.webp);}
.imgservicio5 {background-image: url(Material/ServiciosImg/SuministrosImg1.webp);}
.imgservicio6 {background-image: url(Material/ServiciosImg/SuministrosImg2.webp);}
.imgservicio7 {background-image: url(Material/ServiciosImg/SuministrosImg3.webp);}

.portadaS3 {display: flex;
  justify-content: center;
width: 100%;}

.portadaS3-1 {
  display: flex;
  padding: 62px 0;
  width: 100%;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 50px;
}

.portadaS3-1-1 div {
  gap: 15px;
  display: flex;
  width: 70%;
  flex-direction: column;
}

.portadaS3-1-1 {
  display: flex;
  width: 90%; 
  height: auto;
  flex-direction: row;
  gap: 2%;
  align-items: center;
  justify-content: center;
  border-radius: 77px;
  background: #EDEDED;
  padding: 40px 0; 
  max-width: 1200px;
} 

.portadaS3-1-1 img {
  width: 200px;
  border-radius: 33px;

}

.portadaS3-1-1 h3 {
  color: #000;
  font-family: Helvetica;
  font-size: 25px;
  font-weight: 700;
  width: 100%;
}

.portadaS3-1-1 p {
  height: auto;
  width: 100%;
  color: black;
  font-family: Helvetica;
  font-weight: 500;
  
}

@media only screen and (max-width:890px) {
  .portadaS2-1 {width: 90%;}
  .portadaS1  {justify-content: center;}
  .portadaS1 > div { width: 65%; margin-left: 0;}
  .portadaS1 > div > h1 {font-size: 35px; width: 75%;}
  .portadaS1 > div > p {font-size: 14px; width: 75%;}
  .portadaS2-1 > div {width: 49%; margin-bottom: 30px; gap: 6px;}
  .portadaS3-1-1 div {width: 50%;}
}

@media only screen and (max-width:570px) {
  .portadaS1 > div > h1 {font-size: 30px;}
  .portadaS1 > div > p {font-size: 14px;}
  .portadaS2-1 > div {width: 100%;}
  .portadaS3-1 {padding: 50px 5%;}
  .portadaS3-1-1 {flex-direction: column;}
  .portadaS3-1-1 img {width: 250px;}
  .portadaS3-1-1 div {width: 80%;}
}
  /*Fin de portada de servicios*/

  /*Inicio de representaciones*/

  .portadaE1 {
    background-image: url(Material/portada3.webp)!important;
  }

  .portadaE2 {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 62px 0;
    align-items: center;
    justify-content: center;
  }

  .portadaE2-1 {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: 28px;
    flex-wrap: wrap;
    width: 90%;
    max-width: 1200px;
  }

  .portadaE2 h2 { 
  color: #000;
  font-family: Helvetica;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  width: 90%;
  max-width: 1200px;
  }

  .portadaE2-1 > div, .portadaE2-1 > a >div { 
    background-color: var(--color-claro) ;
    display: flex;
    width: 226px;
    padding: 36px 0;
    border-radius: 35px;
    gap: 28px;
    flex-direction: column;
    align-items: center;
  }

  .imgrepresentaciones1 {background-image: url(Material/Logos/TotalEnergyH2.webp); width: 181px; height: 181px; background-size: cover;}
  .imgrepresentaciones2 {background-image: url(Material/Logos/IPCPiping.webp); width: 181px; height: 181px; background-size: cover;}
  .imgrepresentaciones3 {background-image: url(Material/Logos/Fournier.webp); width: 181px; height: 181px; background-size: cover;}
  .imgrepresentaciones4 {background-image: url(Material/Logos/EPSWorld.webp); width: 181px; height: 181px; background-size: cover;}
  .imgrepresentaciones5 {background-image: url(Material/Logos/JergonIndustrial.webp); width: 181px; height: 181px; background-size: cover;}
  .imgrepresentaciones6 {background-image: url(Material/Logos/HNAIngenieria.webp); width: 181px; height: 181px; background-size: cover;}
  .imgrepresentaciones7 {background-image: url(Material/Logos/ACMPetroleos.webp); width: 181px; height: 181px; background-size: cover;}
  .imgrepresentaciones8 {background-image: url(Material/Logos/OSCEngineering.webp); width: 181px; height: 181px; background-size: cover;}

  @media only screen and (max-width: 890px) {
    .portadaE2 {align-items: flex-start; margin-left: 10%;}
    .portadaE2-1 > div, .portadaE2-1 > a > div { width: 140px; padding: 15px 0; gap: 15px; border-radius: 20px; }
    .portadaE2-1 > div > h3 { font-size: 13px;}
    .portadaE2-1 > div > div { width: 110px; height: 110px; }
}
  /*Fin de representaciones*/

  /*Inicio de experiencias*/

  .portadaEx1 {
    background-image: url(Material/portada4.webp)!important;
  }
  .portadaEx2 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 0;
  }

  .portadaEx2-1 { 
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 90%;
    gap: 37px;
    max-width: 1200px;
  }

  .portadaEx2-1 h2 {
    color: var(--color-acento-2);
    font-family: Helvetica;
    font-size: 32px;
    font-weight: 700;
  }

  .portadaEx2-1 p {
    color: var(--color-primario);
    font-family: Helvetica;
    font-size: 16px;
    font-weight: 500;
    width: auto;
  }

  .portadaEx2-1 h3 {
    color: var(--color-oscuro);
    font-family: Helvetica;
    font-size: 32px;
    font-weight: 700;
  }

  .portadaEx2-1 samp {
    color: var(--color-primario);
    font-family: Helvetica;
    font-size: 64px;
    font-weight: 700;
  }

  .portadaEx2-1-1 {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
  }

  .portadaEx2-1-1 > div:nth-of-type(2) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }

  .portadaEx2-1-1 > div:nth-of-type(1) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: auto;
    margin-right: 23px;
    height: 74px;
  }
.portadaEx3 > .portadaEx3-1 > .portadaE2 > .portadaE2-1 > div > div, .portadaEx3 > .portadaEx3-1 > .portadaE2 > .portadaE2-1 > a > div > div{ 
  width: 181px; 
  height: 181px; 
  background-size:contain; 
  background-repeat: no-repeat; 
  background-position: center; 
  background-color: white;
  border-radius: 33px;
}
.clientes1 {background-image: url(Material/Logos/Ecopetrol.webp);}
.clientes2 {background-image: url(Material/Logos/Ecopetrol.webp);}
.clientes3 {background-image: url(Material/Logos/Canacol.webp);}

.operador1 {background-image: url(Material/Logos/GranTierraEnergy.webp);}
.operador2 {background-image: url(Material/Logos/Chevron.webp);}
.operador3 {background-image: url(Material/Logos/Tepel.webp);}
.operador4 {background-image: url(Material/Logos/Frontera.webp);}
.operador5 {background-image: url(Material/Logos/Geopark.webp);}
.operador6 {background-image: url(Material/Logos/ParexResources.webp);}
.operador7 {background-image: url(Material/Logos/Hocol.webp);}
.operador8 {background-image: url(Material/Logos/Cepsa.webp);}
.operador9 {background-image: url(Material/Logos/Videsh.webp);}
.operador10 {background-image: url(Material/Logos/Petrobras.webp);}
.operador11 {background-image: url(Material/Logos/Shell.webp);}

.reconocidos1 {background-image: url(Material/Logos/Hallburton.webp);}
.reconocidos2 {background-image: url(Material/Logos/Schlumberger.webp);}
.reconocidos3 {background-image: url(Material/Logos/Summun.webp);}
.reconocidos4 {background-image: url(Material/Logos/BakerHughes.webp);}
.reconocidos5 {background-image: url(Material/Logos/Nov.webp);}

.vinculaciones1 {background-image: url(Material/Logos/Campetrol.webp);}
.vinculaciones2 {background-image: url(Material/Logos/Acipet.webp);}
.vinculaciones3 {background-image: url(Material/Logos/Aciem.webp); background-size: 80% !important;}
.vinculaciones4 {background-image: url(Material/Logos/ACP.webp);}

.entidades1 {background-image: url(Material/Logos/MINMINAS.webp);}
.entidades2 {background-image: url(Material/Logos/AgenciaNacionalDeHidrocarburos.webp);}
.entidades3 {background-image: url(Material/Logos/Creg.webp);}

@media only screen and (max-width: 890px) {
  .portadaEx3 > .portadaEx3-1 > .portadaE2 > .portadaE2-1 > div > div, .portadaEx3 > .portadaEx3-1 > .portadaE2 > .portadaE2-1 > a > div > div { width: 110px; height: 110px; border-radius: 15px; }
  .portadaEx2-1 h3 {font-size: 25px;}
  .portadaEx2-1-1 > div:nth-of-type(2) {gap: 10px;}
  .portadaE2 h2 {font-size: 25px;}
}


/* .portadaEx3-1 {width: 80%;}
.portadaEx3-2 {
  width: 20%;
  height: auto;
  display: flex;
  flex-direction: column;
  
} */
  /*Fin de experiencias*/


  /*Inicio de contactanos*/
  .portadaC1 {
    background-color: #33354a;
    background-image: url(Material/portada1.jpg);
    width: 100%;
    height: 1000px;
    display: flex;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 40px;
    z-index: -2;
  }

  .portadaC1-1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 31px;}

  .portadaC1-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: white;
    width: 30%;
    padding: 30px 0;
    max-height: 530px;
    border-radius: 60px;
    transition: all 1s cubic-bezier(0, 0.98, 0.5, 1);
  }

  .portadaC1-2 > form {
    /* background-color: var(--color-primario); */
    width: 83%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  #confirmadoContactanos {
    color: var(--color-primario);
    display: flex;
    padding: 0 30px;
    text-align: center;
    font-family: Helvetica;
    font-size: 26px;
    font-weight: 900;
  }

  #negadoContactanos {
    color: var(--color-acento-1);
    display: flex;
    padding: 0 30px;
    text-align: center;
    font-family: Helvetica;
    font-size: 26px;
    font-weight: 900;
  }

  .portadaC1-2 > a {
    padding: 10px 30px;
    border-radius: 30px;
    margin-top: 20px;
    background-color: var(--color-acento-2);
    color: white;
    transition: all 0.5s ease;
  }

  .portadaC1-2 > a:hover {
    filter: brightness(1.2);
    padding: 15px 35px;
  }
  .displayNone {display: none !important;}
  .displayFlex {display: flex !important;}

  .portadaC1-2 > form > input, #contextoInf {
    padding: 7px 12px;
    color: var(--color-oscuro);
    background-color: var(--color-claro);
    color: var(--color-oscuro);
    font-family: Helvetica;
    font-size: 17px;
    font-weight: 500;
    border-radius: 20px;
  }

  .portadaC1-2 > form > input:hover, #contextoInf:hover {
    filter: brightness(0.99) saturate(150%);
  }

  .portadaC1-2 > form > input:active, #contextoInf:active {
    border: 3px solid var(--color-primario);
  }

  .portadaC1-2 > form > input:focus, #contextoInf:focus {
  border: 2px solid var(--color-primario);
  outline: 0px solid var(--color-primario);}
  

  .portadaC1-2 > form > input[type="submit"] {
    background-color:var(--color-primario);
    color: var(--color-claro);
  }

  #contextoInf {
    height: 173px;
    align-items: flex-start;
    justify-content: flex-start;
  }

  ::placeholder {
    color:var(--color-primario);
    font-family: Helvetica;
    font-size: 17px;
    font-weight: 500;
    
    
  }

  .portadaC1-1 h1 {
    color: #FFF;
    text-align: center;
    font-family: Helvetica;
    font-size: 48px;
    font-weight: 700;
  }

  .portadaC1-1 h3 {
    color: #FFF;
    text-align: center;
    font-family: Helvetica ;
    font-size: 16px;
    font-weight: 500;
  }

  .boxterminos {
    display: flex;
    gap: 5px;
    padding: 0 10px;
    width: 100%;
    align-items: center;
  }

  .boxterminos > label {
    font-size: 12px;
    color: var(--color-primario);
  }

  .boxterminos > label > a {
    font-size: 12px;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
  }

  .boxterminos > label > a:hover {
    color: var(--color-acento-2);
  }

  .boxterminos > input[type="checkbox"] {
    -webkit-appearance: none; /* Safari/Chrome */
    appearance: none;
    width: 30px;
    height: 30px;
    border-radius: 20px;
    background-color: var(--color-claro);
    border: 2px solid var(--color-primario);
    transition: all ease-in .3s;
}

.boxterminos > input[type="checkbox"]:hover {
    border: 4px solid var(--color-primario);
}

.boxterminos > input[type="checkbox"]:checked {
  background-color: var(--color-primario);
}

.boxterminos > input[type="checkbox"]:checked::before {
    content:  "\00a0""\2713";
    font-size: 18px;
    text-align: center;
    line-height: 25px; /* Alinea verticalmente y centra horizontalmente el checkmark */
    color: var(--color-claro); /* Cambia el color del checkmark cuando está marcado */
    
}

.portadaC2 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 0;
}

.portadaC2-1 {
  display: flex;
  flex-direction: column;
  gap: 37px;
  width: 50%;
}

.portadaC2-1-2 {
  display: flex;
  flex-direction: column;
  gap: 10px;}

.portadaC2-1-1 h4 {
  color: var(--color-acento-2);
  font-family: Helvetica;
  font-size: 32px;
  font-weight: 700;
}

.portadaC2-1-2 h4 {
  color: var(--color-oscuro);
  font-family: Helvetica;
  font-size: 32px;
  font-weight: 700;
}

.portadaC2-1-2 p {
  color: var(--color-primario);
  font-family: Helvetica;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}


  @media only screen and (max-width: 1300px) {
    .portadaC1-1 h3 {width: 90%;}
    .portadaC1-2 {width: 60%;}
    .portadaC1-2 > form {width: 90%;}
    .portadaC1-2 {border-radius: 30px;}
    .portadaC1-2 > form > input[type="submit"] {padding: 10px 0; font-size: 18px; border-radius: 30px; }
    .portadaC1-3 {width: 60%;}
  }

  @media only screen and (max-width: 890px) {
    .portadaC1-2 {width: 90%;}
    .portadaC1-3 {width: 90%;}
    .portadaC2-1 {width: 85%;}
  }

  
  /*Fin de contactanos*/