body {

  margin: 0;

  padding: 0;

  min-height: 100vh;

  width: 100vw;

  position: relative;

  font-family: "Raleway", sans-serif;

  overflow-x: hidden;

  background-color: white;
  overflow: hidden; /* elimina scroll horizontal y vertical */


}



@media (max-width: 768px) { /* Ajusta el valor 768px al punto de quiebre de tu diseño móvil */

   h2, h4 {

    display: inline-block;

  }

    .book-item img {

        max-width: 100%; /* Ocupa todo el ancho en dispositivos m��viles */

    }     

    #separadorCalculadora{

        margin-top: 1px;

    }

}



/* Estilo general que aplica el de la calculadora por alguna razon se elevo y el header lo solapa */

#separadorCalculadora {

    margin-bottom: 150px; 

}



/* Estilos para dispositivos m��viles */

@media (max-width: 600px) {

    #separadorCalculadora {

        margin-bottom: 0; /* Quitar margen en dispositivos m��viles */

    }

}



 

  .contenedorTitulo {

    width: 100%;

    max-width: 500px;

    margin: 0 auto;

  }











/* HEADER */

.menu {

  display: flex;

  justify-content: flex-start;

  align-items: center;

  padding: 5px 150px;

  height: 13vh;

  padding: 0px 20%;

}





.elementor-heading-title.elementor-size-default {

  display: none;

}



/*

#show-factor-servicio #factor-servicio{

    text-align: center;

}

*/



.menu > i {

  display: none;

}

.container-logo {

  display: flex;

  justify-content: flex-start;

  align-items: center;

  width: 100%;

  height: 100%;

}



.logo-header {

  width: 256px;

  height: 61px;

}



.btn-nav {

  border: none;

  background-color: transparent;

  color: #115599;

  font-weight: 600;

  padding: 10px;

  border-bottom: 3px solid #248bc5;

  border-radius: 1px;

  margin-inline: 5px;

  cursor: pointer;

  transition: all 350ms ease-in-out;

}



.btn-nav:hover {

  color: #ed7e00;

  border-color: #ed7e00;

}



.btn-mas-header {

  display: flex;

  justify-content: center;

  align-items: center;

  margin-inline: 1rem;

  position: relative;

}



.btn-mas-header:hover {

  .item-masHeader {

    display: block;

  }

}



.item-masHeader {

  display: none;

  justify-content: center;

  align-items: center;

  flex-direction: column;

  position: absolute;

  top: 105%;

  left: 0;

  width: 180px;

  background-color: #403c44;

}



.items-menuMas {

  display: flex;

  justify-content: center;

  align-items: center;

  width: 100%;

  padding: 13px 20px;

  color: white;

}

.link-items {

  padding: 13px 0px;

  display: flex;

  justify-content: center;

  align-items: center;

  text-decoration: none;

  color: white;

  font-weight: normal;

  font-size: 15px;

  width: 100%;

}



.link-items:hover {

  background-color: #248bc5;

}



.drawer {

  display: none;

  position: absolute;

  height: 100vh;

  width: 100vw;

  transform: translate(100%, 0px);

  top: 0;

  left: 0;

  background-color: #403c44;

  transition: transform 0.7s ease;

  overflow: hidden;

}



.container-drawer {

  display: flex;

  justify-content: flex-start;

  align-items: center;

  flex-direction: column;

  padding: 5% 5%;

  width: 100%;

  height: 100%;

  overflow: hidden;

}



#containerUnitsAdd {

  display: flex;

        gap: 30px;

    text-transform: lowercase;

}



.container-items-drawer {

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: column;

  padding: 100px 0px;

  width: 100%;

}



.link-items-drawer {

  padding: 20px 0px;

  display: flex;

  justify-content: center;

  align-items: center;

  text-decoration: none;

  color: white;

  font-weight: normal;

  font-size: 22px;

  width: 100%;

}



.container-close {

  display: flex;

  justify-content: flex-end;

  align-items: center;

  width: 100%;

}



.logo-bomba {

    display: none;

    width: 30px;

    height: auto;

    filter: brightness(0) saturate(100%) invert(99%) sepia(80%) saturate(2%) hue-rotate(148deg) brightness(113%) contrast(100%);

}

.logo-cable {

  display: none;

  width: 30px;

  height: auto;

  filter: brightness(0) saturate(100%) invert(99%) sepia(80%) saturate(2%)

    hue-rotate(148deg) brightness(113%) contrast(100%);

}

#ocultTitleBtnCH {

  display: flex;

  width: 100%;

  justify-content: center;

  align-items: center;

}

#ocultTitleBtnCC {

  display: flex;

  width: 100%;

  justify-content: center;

  align-items: center;

}



.notas-result {

  font-style: italic;

  font-size: 11px;

}



@media (max-width: 768px) {

  .menu {

    justify-content: space-between;

    padding: 5px 20px;

    height: 8vh;

  }

  .menu > i {

    display: flex;

  }

  .container-logo {

    justify-content: center;

    width: 80%;

  }

  .logo-header {

    width: 80%;

    height: 60%;

  }

  #ocultTitleBtnCH {

    display: none;

  }

  #ocultTitleBtnCC {

    display: none;

  }

  .btn-nav {

    display: none;

  }

  .logo-bomba {

    display: block;

  }

  .logo-cable {

    display: block;

  }

}



@media (max-width: 1024px) {

  #iconCalculator {

    display: none;

  }

  #calculadoraCable {

    font-size: 14px !important;

  }

  #calculadoraHidraulica {

    font-size: 14px !important;

  }

}



/* HEADER END */



/* MAIN */

.main-container {

  display: flex;

  justify-content: flex-start;

  align-items: center;

  flex-direction: column;

  min-height: 85vh;

}



.container-select-calculator {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 50%;
  margin-top: 30px;
  margin-bottom: 30px;
  gap:10px;
}



.btn-select-calculator {
  width: 100%;
  padding: 15px 0px;
  border-radius: 0px;
  border: none;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  background-color: #403c44;
  opacity: 0.9;
  color: white;

  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 5px;
  margin-bottom: 5px;
  gap:10px;
}


.btn-select-calculator:first-child {



  background-color: #248bc5;

}



.container-calculator {

  display: flex;

  justify-content: flex-start;

  align-items: center;

  flex-direction: column;

  width: 100%;

}



#Cable {

  display: none;

}



#NuevaCal{

  display: none;

}



.container-input {

  display: flex;

  align-items: center;

  justify-content: flex-start;

  width: 38%;

  position: relative;

}



.container-input select {

  margin-bottom: 2rem;

}



.container-input {

  &:focus-within {

    .input {

      outline-color: #ed7e00;

    }

  }

}

.container-inputs-two {

  display: flex;

  justify-content: center;

  align-items: center;

  width: 50%;

  gap: 20px;

}



.input {

  width: 100%;

  padding-top: 15px;

  padding-bottom: 15px;

  padding-left: 60px;

  padding-right: 80px;

  border-radius: 0px;

  border: 2px solid rgb(113, 112, 112);

  font-size: 16px;

}



.select-input {

  width: 100%;

  padding-top: 15px;

  padding-bottom: 15px;

  padding-left: 60px;

  padding-right: 0px;

  border-radius: 0px;

  background-color: white;

  border: 2px solid rgb(113, 112, 112);

  font-size: 16px;

}



/* .icon-rounded {

  padding: 18px;

  position: absolute;

  top: -1px;

  left: -14px;

  background-color: white;

  border-radius: 50px;

  border: 2px solid rgb(113, 112, 112);

} */



.icon-rounded {

  display: flex;

  justify-content: center;

  align-items: center;

  background-color: transparent;

  position: absolute;

  top: 0px;

  left: 0px;

  padding: 14px 15px;

  font-weight: 900;

  color: #403c44;

}



.select-vars {

  position: absolute;

  top: 9px;

  right: 10px;

  border: none;

  padding: 7px;

  font-size: 18px;

  background-color: white;

  cursor: pointer;

}



.select-vars:focus {

  border: none;

  outline: none;

}





 

.button-calcular {

    display: inline-block;

    background-color: #248bc5; /* Color azul */

    color: white;

    padding: 10px 20px; /* Agrega padding interno al bot��n */

    text-decoration: none;

    font-size: 16px;

    border-radius: 5px;

    transition: background-color 0.3s ease;

}



.button-calcular:hover {

    background-color: #0056b3; /* Azul m��s oscuro al pasar el cursor */

}







/*



.button-calcular {

  width: 15%;

  padding: 15px 0px;

  border-radius: 0px;

  border: none;

  font-size: 14px;

  background-color: #248bc5;

  color: white;

  font-weight: 700;

  cursor: pointer;

}

*/

.container-units {

  display: flex;

  justify-content: center;

  align-items: center;

  padding: 5px 10px;

  margin-bottom: 1rem;

  width: 50%;

  flex-direction: row;

}



.convert-units {

  color: black;

  font-size: 14px;

  text-align: center;

  font-weight: 600;

  padding: 2px 10px;

}



.container-no-result {

  display: none;

  justify-content: center;

  align-items: center;

  flex-direction: column;

}

.container-no-result > span {

  text-align: center;

  margin-top: 10px;

}



.title-no-result {

  display: flex;

  justify-content: center;

  align-items: center;

  font-weight: 600;

  font-size: 22px;

  color: white;

  margin-top: 5rem;

  padding: 15px;

  background-color: #403c44;

  border-radius: 0px;

  width: 100%;

}



.show-info-longitud {

  visibility: hidden;

  font-size: 12px;

  text-align: center;

  width: 50%;

  padding: 5px 0px;

  font-weight: 600;

}



.container-logo-ads {

  display: flex;

  justify-content: center;

  align-items: center;

  width: 50%;

  padding: 10px 0px;

}



.container-images-ads {

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: column;

  width: 50%;

}

.container-images-ads > img {

  width: 80%;

  height: 110px;

  margin-bottom: 15px;

}



.title-ads {

  font-size: 20px;

  font-weight: 500;

  margin-top: 20px;

}



@media (max-width: 768px) {



.divhidraresult {



    display: flex !important;

    flex-direction: column;

    align-items: center;

}





  .container-no-result {

    width: 86%;

  }

  .container-units {

    width: 90%;

  }

  .convert-units {

    font-size: 11px;

  }

  .container-input {

    width: 90%;

  }

  .container-inputs-two {

    width: 100%;

    flex-direction: column;

    gap: 0px;

  }

  .container-select-calculator {

    width: 90%;

    gap: 5px;

  }

  .btn-select-calculator {

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

  }

  .btn-select-calculator:first-child {

    margin: 0;

  }



  .input {

    width: 100%;

  }

/*

  .button-calcular {

    width: 90%;

  }

  */

  .title-no-result {

    padding-bottom: 20px !important;

  }

  .show-info-longitud {

    width: 90%;

  }

}



/* CONTAINER RESULT */



.titleDimensionamiento {

  font-size: 18px;

  font-weight: 1000;

}



.ContainerTitleDimensionamiento {

  display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 15px 20px;

    flex-direction: column;

}



.containerDataEntry {

  display: flex;

    align-items: center;

    justify-content: center;

    width: 90%;

    gap: 10%;

    padding: 5px;

    margin-bottom: 5px;

}



.containerDataEntryNuevaCal

 {

  display: flex;

    align-items: center;

    justify-content: center;

    width: 90%;

    gap: 10%;

    padding: 5px;

    margin-bottom: 5px;

}



.containerDataEntryHidraulica {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;

  gap: 9%;

  padding: 10px 0px;

}

.reset{

  display: none;

}



.contacto{



display: none;

    text-align: center;

    justify-content: center;

    margin-top: 1em;

    align-items: center;

}



.itemDataEntry {

  font-size: 18px;

  color: white;

  font-weight: 700;

  width:100%;

  text-align:center;

}



.titleLogoDimen {

  width: 300px;

}

.container-result {

  background-color: white;

  display: none;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  width: 30vw;

  margin-top: 20px;

  margin-bottom: 20px;

  overflow: hidden;

  border: 1px solid #115599;

    

}



.box-result {

  display: flex;

  /*justify-content: flex-start;*/

  align-items: center;

  flex-direction: column;

  width: 100%;

  /*padding: 50px 50px;*/

  background-color: #115599;

}



.title-result {

  font-weight: 700;

  font-size: 25px;

  color: white;

  font-weight: normal;

}

.title-result2 {

  font-weight: 900;

  font-size: 25px;

  color: white;

  text-align: center;





  

}

.result-amount {

  font-size: 35px;

  color: white;

  font-weight: 700;

}



.title-name-unidades {

  display: inline-block; 

  text-align: left;

  /*justify-content: justify; */

  /*align-items: center; */

  width: 95%;

  font-weight: 900;

  font-size: 16px;

  font-weight: normal;

  

}



.container-description-result-cable {

  display: flex;

  justify-content: center;

  align-items: flex-start;

  flex-direction: column;

  width: 100%;

  margin: 10px 0px;

}



.container-description-result-cable > span {

  padding: 5px 20px;

  font-weight: 400;

  font-size: 18px;

}



.result-description {

  font-weight: 800;

  font-size: 22px;

  display: inline-block; 

  justify-content: center; 

  align-items: center; 

  width: 85%;

  text-align: center;

}



.container-description-aquaflex {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

}

.notas-result {

  font-size: 14px !important;

}



.container-logos-flex-frank {

  display: flex;

  flex-direction: row;

  justify-content: flex-start;

  align-items: center;

  width: 100%;

  padding: 1em !important;

  gap: 15%;

  flex-wrap: nowrap;

}

h1 {

  font-size: 18px;

  margin-left: 20px;

}



@media (max-width: 768px) {

  .container-result {

    width: 95%;

  }

  .title-result {

    font-size: 20px;

  }

   .botonerafooter {

    display: flex; /* Activa las propiedades flex */

    flex-direction: row; /* Alinea los elementos en fila (horizontalmente) */

    justify-content: center; /* Alinea los elementos horizontalmente en el centro */

    align-items: center; /* Alinea los elementos verticalmente en el centro */

    gap: 5px;

    margin-bottom: 2em;

    width: 90vw !important;

}



   .box-result {

        width: 100% !important;

        padding-top: 1.5em;

}

  #containerUnitsAdd > span {

    font-size: 12px;

  }

  .container-logos-flex-frank {

    flex-direction: column;

    align-items: center;

    gap: 25px;

    padding: 0px;

  }

  .containerDataEntry {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 70%;

    gap: 9%;

    padding: 10px;

  }

  .titleLogoDimen {

    width: 180px;

    padding-top: 0px;

  }

  .titleDimensionamiento {

    font-size: 14px;

    font-weight: 1000;

  }

  .container-description-aquaflex {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    width: 200px;

  }

}



@media (max-width: 1024px) {

  .container-description-result-cable {

    flex-direction: column !important;

  }



    .container-description-result-NuevaCal {

    flex-direction: column !important;

  }

}



/* CONTAINER RESULT END*/



/*MAIN END*/



/* LOADER */

.loader {

  border: 16px solid #f3f3f3; /* Light grey */

  border-top: 16px solid #248bc5; /* Blue */

  border-radius: 50%;

  width: 50px;

  height: 50px;

  animation: spin 1s linear infinite;

  display: none;

  margin-top: 100px;

}



@keyframes spin {

  0% {

    transform: rotate(0deg);

  }

  100% {

    transform: rotate(360deg);

  }

}

/* END LOADER */



/* POPUP */

.popup {

  display: flex;

  visibility: hidden;

  justify-content: space-around;

  align-items: center;

  position: absolute;

  min-width: 100px;

  height: 50px;

  left: 35%;

  right: 35%;

  padding: 5px;

  bottom: 35%;

  border-radius: 0px;

  background-color: rgb(255, 147, 147);

  transition: all 1s ease-in-out;

}

p {

  font-weight: bold;

  margin: 0px;

}

.container-textError {

  display: flex;

  justify-content: center;

  align-items: center;

  width: 70%;

}



.text-error {
  font-weight: 600;
  font-size: 15px;
  height: 100%;
  text-align: left;
  color: white;
}



@media (max-width: 700px) {

#result-cable > div > .containerDataEntry {
    display: flex !important;
    width: 95%;
    gap: 10%;
    padding: 5px;
    margin-bottom: 5px;
    flex-direction: column;
    align-items: flex-start;
}
 
  .popup {
    right: 10%;
    left: 10%;
  }

  .text-error {
    font-weight: 600;
    font-size: 12px;
  }

  .itemDataEntry {
    font-size: 14px;
    color: white;
    font-weight: 800;
  }

  p {
    font-weight: bold;
    margin: 0px;
    font-size: 15px;
  }

  .title-result {
    font-size: 18px;
    text-align: center;
  }

  .title-result2 {
    font-size: 18px;
    margin-left: 20px;
    color: #f3f3f3;
  }

  .result-amount {
    font-size: 25px;
    color: white;
    font-weight: 900;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .result-description {
    font-weight: 800;
    font-size: 15px;
  }

  .container-description-aquaflex2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 300px;
  }

  .container-description-result-cable > span {
    padding: 5px 20px;
    font-weight: 800;
    font-size: 14px;
  }

  .containerDataEntry {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70%;
    gap: 9%;
    padding: 10px;
  }

}

/* POPUP END */



/* CUSTOM TAGS */

input::-webkit-outer-spin-button,

input::-webkit-inner-spin-button {

  -webkit-appearance: none;

  margin: 0;

}

/* Firefox */

input[type="number"] {

  -moz-appearance: textfield;

}

a,

a:visited,

a:active {

  text-decoration: none !important;

}

/* CUSTOM TAGS END*/

#title-result-hidraulica {

  margin-left: 10px;

}



.divhidraresult {

    display: block;

}



#result-cable > div > .containerDataEntry {

    display: grid;

    grid-template-columns: 1fr 1fr 1fr 5fr 1.5fr;

    width: 95%;

    gap: 3%;

    padding: 15px;

    margin-bottom: 5px;

}



.botonerafooter {

    display: none;

    flex-direction: row;

    justify-content: center;

    gap: 10px;

    margin-bottom: 2em;

    width: 50vw;

}



.separadorTextoInterno{

    padding : 50px;

}



.container-description-result-NuevaCal {

  display: flex;

  justify-content: center;

  align-items: flex-start;

  flex-direction: column;

  width: 90%;

  margin: 10px 0px;

}



.container-description-result-NuevaCal > span {

  padding: 5px 20px;

  font-weight: 400;

  font-size: 14px;

}





/* Estilos para el bot��n de Manual del Usuario pdf en Calculo de Tuberia */

        .btn-ver-manual {

            display: inline-block;

            padding: 10px 20px;

            font-size: 16px;

            text-align: center;

            text-decoration: none;

            color: #fff;

            background-color: #00a7e1;

            border: none;

            border-radius: 5px;

            cursor: pointer;

            transition: background-color 0.3s;

        }



        .btn-ver-manual:hover {

            background-color: #0056b3;

        }

        

/* Estilos para darle forma al area de ver pdf */

.pdf-book-cover {

    font-family: Arial, sans-serif;

    color: #333;

    margin: 20px;

    text-align: center;

}



.pdf-book-cover h2 {

    font-size: 24px;

    margin-bottom: 20px;

    color: #0056b3; /* Azul para destacar el t��tulo */

}



.book-list {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 20px; /* Espaciado entre los elementos */

}



.book-item {

    border: 2px solid #ddd;

    border-radius: 10px;

    overflow: hidden;

    width: 200px;

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.book-item:hover {

    transform: scale(1.05); /* Aumenta ligeramente el tama�0�9o */

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* A�0�9ade sombra */

}



.book-item img {

    width: 100%;

    border-bottom: 2px solid #ddd;

}



.book-item a {

    text-decoration: none;

    font-size: 16px;

    color: #007bff;

    padding: 10px;

    display: block;

    transition: color 0.3s ease;

}



.book-item a:hover {

    color: #0056b3; /* Color azul oscuro al pasar el mouse */

}



.btn-container {

    margin-top: 30px;

}



.btn-ver-literaturas {

    background-color: #007bff;

    color: white;

    padding: 10px 20px;

    font-size: 16px;

    text-decoration: none;

    border-radius: 5px;

    transition: background-color 0.3s ease, transform 0.3s ease;

}



.btn-ver-literaturas:hover {

    background-color: #0056b3; /* Azul m��s oscuro al pasar el mouse */

    transform: scale(1.1); /* Aumenta ligeramente el tama�0�9o */

}



/** Fin delarea de pdf */



 #whatsapp-float-button{

     display: flex; /* Activa las propiedades flex */

    justify-content: center; /* Alinea el contenido horizontalmente en el centro */

    align-items: center; /* Alinea el contenido verticalmente en el centro */

    padding-top: 15px;

    

 }

.compartir-whatsapp{

  width: 7%;

  padding: 0px 0px;

  border-radius: 0px;

  border: none;

  font-size: 14px;

  cursor: pointer;   

}





/* Bot��n compartir por WhatsApp */

.whatsapp-share-btn {

  margin-top: 10px;

  display: inline-flex;

  align-items: center;

  background-color: transparent;

  border: none;

  cursor: pointer;

  text-decoration: none;

  border-radius: 5px;

}



.whatsapp-share-btn img {

  height: 30px;

  width: 30px;

  margin-top: 8px;

}









/* Boton del ir al enlace de las literarturas */



.btn-ver-literaturas {

    display: inline-block;

    background-color: #248bc5; /* Color azul */

    color: white;

    padding: 10px 20px; /* Agrega padding interno al bot��n */

    text-decoration: none;

    font-size: 16px;

    border-radius: 5px;

    transition: background-color 0.3s ease;

}



.btn-ver-literaturas:hover {

    background-color: #0056b3; /* Azul m��s oscuro al pasar el cursor */

}

.limpiar-seleccion {
  background: #fff;
  border: 2px solid #ccc;
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s ease;
}

.limpiar-seleccion img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.limpiar-seleccion:hover {
  border-color: #0077cc;
}

.contenedor-botones {
  display: flex;
  align-items: center;
  gap: 12px; /* espacio entre los botones */
}

.limpiar-seleccion img {
  width: 24px;
  height: 24px;
}