/* -------------------------------------------------------------------------- */
/* CONTENEDOR CONTENT ABOUT */
/* -------------------------------------------------------------------------- */

body{
  background-color: white;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: Arial, sans-serif;
}

/* ----------------------- HERO / CONTENT ABOUT ----------------------------- */
.content-about{
  background-color: #009ca3 !important;
  background-position: center 30%;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;

  width: 100%;
  min-height: 680px;                 
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px 0;
  position: relative;
  gap: 32px;
  box-sizing: border-box;
  flex-wrap: nowrap;
  overflow:hidden;

}

.content-about .image{
  position: absolute;
  left: 0;          
  top: 0;
  margin: 0;
  flex: 0 0 150%;
  max-width: 1100px;
  margin-top: 80px;
  z-index: 1;
}


.content-about .image img{
  position: absolute;
  top: 45px;
  left: 0;         
  width: 100%;
  max-width: 1000px;
  margin: 0;
  padding: 0;
  height: auto;
  object-fit: contain;
}


.content-about h1{
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);

  width: auto;              
  max-width: 800px;

  padding: 15px 20px 15px 140px;

  border-radius: 50px 0 0 50px;
  background-color: rgba(0,84,89,0.5);
  color: white;

  font-size: clamp(36px, 5vw, 80px);
  white-space: nowrap;

  z-index: 5;
}

.content-about h1 .gota{
  position: absolute;
  left: -55px;    
  top: 60%;
  transform: translateY(-50%);
  
  width: clamp(180px, 20vw, 250px);
 
  height: auto;
  pointer-events: none;
}  
/* --------------------------------------------------------------------------"*/
/*RESPONSIVE"*/
/* --------------------------------------------------------------------------"*/

@media (max-width: 991.98px){

  .content-about{
    min-height: 400px;
    padding: 40px 20px;
  }

  .content-about .image{
    max-width: 730px;
    margin-top: 0px;
  }

  .content-about .image img{
    max-width: 750px;
    top: 60px;
  }

  .content-about h1{
    max-width: 600px;
    padding: 15px 20px 15px 110px;

    font-size: clamp(38px, 4vw, 60px);
  }

  .content-about h1 .gota{
    position: absolute;
    left: -45px;
    top: 60%;
    transform: translateY(-50%);

    width: clamp(170px, calc(5vw + 3em), 300px); /* 🔥 clave */
    height: auto;

    pointer-events: none;
  }
}

@media (max-width: 575.98px){

  .content-about{
    min-height: 260px;
    padding: 30px 15px;
  }

  .content-about .image{
    max-width: 480px;
    margin-top: 0;
  }

  .content-about .image img{
    position: absolute;
    top: 40px;
    width: clamp(170px, 10vw, 200px);
    height: auto;
  }

  .content-about h1{
    max-width: 320px;
    padding: 15px 20px 15px 80px;
    font-size: clamp(20px, 5vw, 32px);
  }

  .content-about h1 .gota{
    position: absolute;
    left: -30px;
    top: 57%;
    transform: translateY(-50%);

    width: clamp(140px, calc(3vw + 1em), 150px);
    height: auto;
  }
}


/* ----------------------- SECCIÓN ABOUT  ------- */
.about{
  width: 100%;
  height: 920px;
  box-sizing: border-box;
  text-align: center;
  position: relative;
  padding-top: 60px;
}

/* INTRODUCTION  */
.about .introduction{
  position: relative;
  top: -9%;

  width: 100%;
  max-width: clamp(600px, 60vw, 700px); /* 🔥 clave */

  margin: 10px 0 0 0;
  left: 0;

  box-sizing: border-box;
}

.about .introduction p{
  font-family: Arial, sans-serif;
  display: block;

  width: 100%;
  max-width: 750px; /* 🔥 más controlado */

  margin: 15px 0 0 0;

  padding: 35px 20px 35px 40px !important;

  border-radius: 0 90px 90px 0;
  background-color: #f7aa00;
  color: #ffffff;

  text-align: left;

  font-size: clamp(16px, 1vw, 17px); /* 🔥 clave */
  line-height: 1.6; /* 🔥 reduce expansión */

  box-sizing: border-box;
}

/*  STEPS - SECCIÓN AZUL  */
.about .steps-icons-blue{
  background-image: url('images/about/images/content/background.png');
  background-position: center 30%;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;

  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;

  width: 900px ;

  margin: 50px 0 0 0;
  padding: 20px 40px;

  border-radius: 0 90px 90px 0;
  background-color: #009ca3;

  height: 230px;

  box-sizing: border-box;
  overflow: visible; /* 🔥 CLAVE: permite ver elementos fuera */
}


.about .steps-icons-blue .steps{
  display: flex;
  align-items: center;
  gap: 5px!important;
  width: 100%;
  box-sizing: border-box;
  padding-left: 20px;
}

.about .steps-icons-blue .step{
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.about .steps-icons-blue .step img{
  width: 180px;
  max-width: 40vw;
  height: auto;
  position: relative;
  left: 30px;
}

.about .steps-icons-blue .step p{
  color: white;
  font-family: Arial, sans-serif;
  padding-left: 50px;
  font-size: 18px;
  white-space: nowrap;
  position: relative;
  top: -40px;
  margin: 0;
}


/*TITLE CONTRACTORS  */
.about .steps-icons-blue .title-contractors{
  position: relative;
  z-index: 5;
  margin-left: 0;
  padding-left: 40px;
}

/* TÍTULO */
.about .steps-icons-blue .title-contractors h2{
  position: relative;
  z-index: 10;
  left: 10%;
  color: white;
  font-family: Arial, sans-serif;
  font-size: 30px;
  font-weight: bold;
  letter-spacing: 0.5px;

  margin: 0;
}

/* IMAGEN DECORATIVA */
.about .steps-icons-blue .title-contractors img{
  position: absolute;
  top: -120%;   /* 🔥 ya no se corta */
  left: -45%;
  
  width: 550px;

  z-index: 6;
  pointer-events: none;
}

/* ----------------------- SECCIÓN AMARILLA ----------------------------- */
.about .steps-icons-yellow{
  background-color: #f7aa00;

  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;

  width: 1150px;

  margin: 50px 0 0 auto; /* 🔥 LO MANDA A LA DERECHA */
  padding: 40px 100px 40px 30px !important;

  border-radius: 90px 0 0 90px;
  height: 230px;

  box-sizing: border-box;
  overflow: visible;

  top: 5%;
}

.about .steps-icons-yellow .steps{
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding-left: 20px;
  box-sizing: border-box;
}

.about .steps-icons-yellow .step{
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.about .steps-icons-yellow .step img{
  width: 200px;
  position: relative;
  top: 2px;
  box-sizing: border-box;
}

.about .steps-icons-yellow .step p{
  color: white;
  font-family: Arial, sans-serif;
  padding-right: 30px;
  font-size: 18px;
  white-space: nowrap;
  position: relative;
  top: -40px;
  margin: 0;
  box-sizing: border-box;
}

/* título dentro de la sección amarilla */
.about .steps-icons-yellow .title{
  position: relative;
  text-align: center;
  margin-left: 8px;
}

.about .steps-icons-yellow .title h2{
  color: #ffffff;
  font-family: Arial, sans-serif;
  font-size: 30px;
  letter-spacing: 0.5px;
  position: relative;
  z-index: 2;
  font-weight: bold;
  left: -60px;
}

.about .steps-icons-yellow .title img{
  position: absolute;
  top: -110%;
  left: 15%;
  transform: translateX(-40%);
  width: 550px;
  z-index: 1;
  pointer-events: none;
}

/* overlay para la sección amarilla (simula el ::before que tenías) */
.about .steps-icons-yellow::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(247,170,0,0.8);
  border-radius: 80px 0 0 80px;
  z-index: 0;
  pointer-events: none;
}


.about .introduction p,
.about .steps-icons-blue .step p,
.about .steps-icons-yellow .step p{
  overflow-wrap: break-word;
  word-break: break-word;
}

/* --------------------------------------------------------------------------"*/
/*RESPONSIVE"*/
/* --------------------------------------------------------------------------"*/
@media (max-width: 991.98px){

  .about{
    height: 520px;
    padding-top: 40px;
  }

  .about .introduction{
    top: -11%;
    max-width: 510px;
  }

  .about .introduction p{
    max-width: 500px;
    padding: 24px 16px 24px 28px !important;
    font-size: clamp(9px, 1vw, 10px);
    line-height: 1.5;
    border-radius: 0 70px 70px 0;
  }

  .about .steps-icons-blue{
    width: 800px!important;
    height: 120px;
    margin-top: 35px;
    padding: 6px 10px;
    border-radius: 0 70px 70px 0;
    top:-2%;

  }

  .about .steps-icons-blue .steps{
    padding-left: 10px;
    gap: 1px !important;
  }

  .about .steps-icons-blue .step img{
    width: 120px;
    left: 16px;
  }

  .about .steps-icons-blue .step p{
    font-size: 11px;
    padding-left: 20px;
    top: -28px;
  }

  .about .steps-icons-blue .title-contractors{
    padding-left: 24px;
  }

  .about .steps-icons-blue .title-contractors h2{
    font-size: 15px;
    left: 30%;
  }

  .about .steps-icons-blue .title-contractors img{
    width: 290px;
    top: -132%;
    left: -10%;
  }

  .about .steps-icons-yellow{
    width: 750px;
    height: 120px;
    margin-top: 35px;
    padding: 28px 70px 28px 22px !important;
    border-radius: 70px 0 0 70px;
    top: 4%;
  }

  .about .steps-icons-yellow .steps{
    padding-left: 10px;
    gap: 1px;
  }

  .about .steps-icons-yellow .step img{
    width: 120px;
    top: 3px;
    margin-bottom: 20px;
  }

  .about .steps-icons-yellow .step p{
    font-size: 11px;
    padding-right: 16px;
    margin: 0;
    
  }

  .about .steps-icons-yellow .title{
    margin-left: 4px;
  }

  .about .steps-icons-yellow .title h2{
    font-size: 15px;
    left: -20%;
  }

  .about .steps-icons-yellow .title img{
    width: 290px;
    top: -67%;
    left: 20%;
  }

  .about .steps-icons-yellow::before{
    border-radius: 70px 0 0 70px;
  }
}

@media (max-width: 575.98px){

  .about{
    height: 350px;
    padding-top: 20px;
  }

  .about .introduction{
    top: -10%;
    max-width: 90%;

  }

  .about .introduction p{
    max-width: 100%;
    padding: 20px 10px 20px 18px !important;
    font-size: clamp(7px, 1vw, 8px);
    line-height: 1.3;
    border-radius: 0 40px 40px 0;
  }

  .about .steps-icons-blue{
    width: 450px!important;
    height: 80px;
    margin-top: 35px;
    padding: 3px 5px;
  }

  .about .steps-icons-blue .steps{
    display: flex;   /* asegúrate que sea flex */
    gap: -5px;          /* elimina separación */
    padding-left: 0;
  }

  .about .steps-icons-blue .step{
  display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 -6px; /* junta más los elementos */
  }
  

  .about .steps-icons-blue .step img{
    width: 80px;
    left: -20px; 
  }

  .about .steps-icons-blue .step p{
    font-size: 7px;
    padding-left: 0;
    margin-left: -40px; 
    top: -18px;
  }

  .about .steps-icons-blue .title-contractors{
    padding-left: 0px;
  }

  .about .steps-icons-blue .title-contractors h2{
    font-size: 10px;
    top:5px;
    left: -10%;
  }

  .about .steps-icons-blue .title-contractors img{
    width: 190px;
    top: -90%;
    left: -100%;
  }
  
  /* AMARILLO */
  .about .steps-icons-yellow{
    position: relative; 
    right: 0;
    left: auto;
    width: 350px;
    height: 80px;
    margin-top: 35px;
    padding: 3px 5px;
    top: 1%;
  }

/* STEPS */
.about .steps-icons-yellow .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 -5px;
}

/* ITEMS */
.about .steps-icons-yellow .step img{
  width: 75px;
  top: 0;
  margin-bottom: 5px;
  left: 35px; 
}

.about .steps-icons-yellow .step p{
  display: flex;
  align-items: flex-end;
  font-size: 7px;
  padding-right: 8px;
  margin-left: -60px !important;
  top: -20px;
  left: 70px;
}


.about .steps-icons-yellow .title{
  position: absolute; 
  top: 20px; 
  left: -30px!important; 
  width: auto;
}

/* TEXTO */
.about .steps-icons-yellow .title h2{
  position: relative;
  font-size: 10px;
  margin: 0;
  left: 0;
}

/* IMAGEN */
.about .steps-icons-yellow .title img{
  position: absolute;
  width: 190px;
  top: -227%;
  left: 35px; 
  pointer-events: none;
};
}