:root {
  --bg-color: #5BC5AB;
  --typewriterSpeed: 0.5s;
  --typewriterCharacters: 5;
  --delay: 0;
	--duration: 3s;
	--iterations: 1;
}

body{
  overflow-x: clip;
}

.layout {
  width: 98vw;
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
 }
 
 .welcomepage{
  width: 100vw;
  height: 800px;
  margin-bottom: 1px;
  padding-top: 50px;
  font-family: "InterTight", sans-serif;
  display: grid;
  place-content: center;
  text-align: center; 
  background: var(--bg-color);
 }
 
 /*title model*/

 .Title {
   font-size: clamp(1rem, 3vw + 1rem, 4rem);
   position: relative;
   font-family: "Bricolage Grotesque", monospace;
   position: relative;
   width: max-content;
   top: 175px;
   font-size: 120px;
   margin: auto;
 }
 
 .Title::before,
 .Title::after {
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
 }
 
 .Title::before {
   background: var(--bg-color);
   animation: typewriter var(--typewriterSpeed)
     steps(var(--typewriterCharacters)) 1s forwards;
 }
 
 .Title::after {
   width: 0.125em;
   background: darkslategrey;
   animation: typewriter var(--typewriterSpeed)
       steps(var(--typewriterCharacters)) 1s forwards,
     blink 3s steps(var(--typewriterCharacters)) infinite;
 }
 @keyframes typewriter {
   to {
     left: 100%;
   }
 }
 
 @keyframes blink {
   to {
     background: transparent;
   }
 }
 @keyframes fadeInUp {
   to {
     opacity: 1;
     transform: translateY(0);
   }
} 
 
 /*cards overview*/
 
 .mkt-3dSlider{
  height: 33vw;
  width: 83vw;
  margin-bottom: -193px;
 }
 
 .card1 {
  position: relative;
  top: 6%;
  left: 6%;
  width: 27%;
  height: 60%;
  float: left;
  perspective: 500px;
 }
 .card2 {
  position: relative;
  top: 6%;
  left: 10%;
  width: 27%;
  height: 60%;
  float: left;
  perspective: 500px;
 }
 .card3 {
  position: relative;
  top: 6%;
  left: 15%;
  width: 27%;
  height: 60%;
  float: left;
  perspective: 500px;
 }
 
 .content {
  position: relative;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 15px rgba(0,0,0,0.1);
  transition: transform 1s;
  transform-style: preserve-3d;
  border-radius: 20px;
 }
 
 .card1:hover .content ,.card2:hover .content ,.card3:hover .content {
  transform: rotateY( 180deg ) ;
  transition: transform 0.5s;
 }
 .front {
  position: absolute;
  height: 100%;
  width: 100%;
  background:linear-gradient(#D19152,#D27063);
  line-height: 20vw;
  color: white;
  text-align: center;
  font-size: 5vw;
  border-radius: 20px;
  backface-visibility: hidden;
 }
 
 .back {
  position: absolute;
  height: 100%;
  width: 100%;
  background: white;
  line-height: 300px;
  color:  #D27063;
  text-align: center;
  font-size: 15px;
  border-radius: 20px;
  backface-visibility: hidden;
  background: transparent;
  transform: rotateY( 180deg );
}
.textCard1{
  color: #D27063;
  line-height: 2;
  font-size: 1.4vw;
  padding-top: 1.5vw;
 }
 .textCard2{
   color: #D27063;
   line-height: 2;
   font-size: 1.4vw;
   padding-top: 4.5vw;
  }
  .textCard3{
   color: #D27063;
   line-height: 2;
   font-size: 1.5vw;
   padding-top: 3vw;
  }
 /*index*/
 
 .sidebar {
    grid-area: sidebar;
    width: 400px;
  margin-top: 1%;
  height: 100%;
  position: sticky;
 }
 /*secciones*/
 .seccionesO {
  grid-area: body;
  margin-top: 1%;
  width: 88%;
  margin-left: 6%;
  height:100%;
 }

 .secciones {
  grid-area: body;
  margin-top: 1%;
  width: 90%;
  margin-left: 3%;
  height:100%;
 }
 .seccionesTitulo{
  width: 118%;
 }
 
 
 /*italicas */
 .i {
  letter-spacing: 0px;
  padding: 1cm 0cm 1cm 0cm;
  font-size: 14px;
  font-style: italic;
  transition: all .2s ease-in-out;
 }
 
 .i:hover {
  transform: scale(1.0);
 }
 
 
 /*tooltips cosas */
 .tooltipSignificadoBox {
  position: absolute;
  visibility: hidden;
  background-color: #493F4E; /* Cambiado el color de fondo predeterminado */
  color: white;
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 14px;
  z-index: 500;
  text-align: center;
  width: 300px; /* Ancho automático para ajustarse al contenido */
  left: 50%;
  transform: translateX(-50%); /* Centrar horizontalmente */
  bottom: 100%; /* Colocar por encima de la palabra */
  opacity: 0; /* Inicialmente oculto */
  transition: opacity 0.5s, visibility 0.5s;
 }
 
 /*flecha que conecta el bloque con el texto */
 .tooltipSignificadoBox::after {
  content: "";
  visibility: hidden;
  border-top: 10px solid transparent;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  position: absolute;
  left: 50%; /* Centrar horizontalmente */
  bottom: -7px;
  transform: translateX(-50%); /* Centrar la flecha horizontalmente */
  transition: 1s border-top;
 }
 .tooltipSignificado:hover .tooltipSignificadoBox::after{
  border-top: 10px solid #493F4E;
  transition-delay:0.6s;
  visibility: visible;
 }
 .tooltipSignificado:hover .tooltipSignificadoBox {
  opacity: 1; /* Mostrar en hover */
  visibility: visible;
  transition-delay: 0.2s;
  margin-bottom: 8px;
  opacity: 95%;
 }
 .tooltipSignificado
 {
  position:relative;
  color:#5BC5AB;
  text-decoration:none;
  font-family: "Quicksand";
  transition: 1s color;
 }
 .tooltipSignificado:hover{
    color: #fff;
    margin-left: 1px;
    margin-right: 1px;
    transition-delay: 0.5s;
 }
 .tooltipSignificado:before
 {
  content:'';
  position:absolute;
  bottom:0;
  width:90%;
  height:2px;
  color: #fff;
  background:#5BC5AB;
  transform-style:linear;
  transition-property:height,width;
  transition-delay:0.3s,0.3s;
  transition-duration:0.5s;
 }
 .tooltipSignificado:hover:before
 {
  transition-property:width,height;
  width:0px;
  height:100%;
 }
 .tooltipSignificado:after
 {
  content:'';
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
  background:#5BC5AB;
  padding-left: 3px;
  transform:scaleX(0);
  transition:0.5s;
  transition-delay:0s;
  transform-origin:left;
  z-index:-1;
 }
 .tooltipSignificado:hover:after
 {
  transform:scaleX(1);
  transition-delay:0.8s;
 }
 /*botones */
 
 .botones-redireccion{
  position: relative;
  margin: 150px auto;
 }
 .botones-redireccion div{
    height: 400px;
 }
 
 .contenedorBoton{
  width: 30px;
  margin: auto;
  height: 30px;
 }
 
 .logocontainer{
  background: transparent;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  position: relative;
  z-index:10;
 }
 
 
 @keyframes blink{
  0% {transform: scaleX(1) scaleY(1)}
 
  1%{transform: scaleX(1.3) scaleY(0.1)}
 
  2% {transform: scaleX(1) scaleY(1)}
 
  60% {transform: scaleX(1) scaleY(1)}
  61% {transform: scaleX(1.3) scaleY(0.1)}
 
  62% {transform: scaleX(1) scaleY(1)}
 
  100% {transform: scaleX(1) scaleY(1)}
 }
 
 #taffy {
  position: absolute;
  top: 70%;
  left: 50%;
  width: 50%;
  transform: translate(-50%, -50%);
  z-index: -5;
 }
 
 #retina {
  width: 50%;
  margin: 0;
  position: absolute;
  top: 60%;
  left: 49%;
  z-index: -4;
  transform: translate(-50%, -50%);
 }
 
 .button-container {
  display: inline-block;
  width: 98vw;
  margin-bottom: 2vw;
  height: 607px;
 }
 
 /* Estilos para los botones en forma de div */
 .methods{
  width: 180px;
  height: 180px;
  left: 35%;
  color: #C55B75;
  background-color: transparent;
  border: 5px solid #C55B75;
  border-radius: 50%;
  border-width: 30px;
  position: relative;
  transition: background-color 0.5s, transform 0.5s;
  overflow: hidden;
  z-index:10;
 }
 .overview{
  top: 50%;
  left: -12%;
  width: 180px;
  height: 180px;
  color: #5BC5AB;
  background-color: transparent;
  border: 5px solid #5BC5AB; /* Borde en los div de los botones */
  border-radius: 50%; /* Hace que los div de los botones sean circulares */
  border-width: 30px;
  transition: background-color 0.5s, transform 0.5s;
  position: absolute;
 }
 .results{
  top: 50%;
  left: 80%;
  width: 180px;
  height: 180px;
  color: #447D9C;
  background-color: transparent;
  border: 5px solid #447D9C; /* Borde en los div de los botones */
  border-radius: 50%; /* Hace que los div de los botones sean circulares */
  border-width: 30px;
  transition: background-color 0.5s, transform 0.5s;
  position: absolute;
 }
 
 .button-content {
  position: absolute;
  top: 50%;
  height: fit-content;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 180px;
 }
 
 .overview:hover .button-content,
 .methods:hover .button-content,
 .results:hover .button-content{
  height: fit-content;
  top: 40%;
 }
 
 
 /* Efecto de crecimiento y cambio de fondo al pasar el cursor sobre los div de los botones */
 .methods:hover {
  border: none;
  background-color: #C55B75;
  transform: scale(1.5);
 }
 .overview:hover {
  border: none;
  background-color: #5BC5AB;
  transform: scale(1.5);
 }
 .results:hover {
  border: none;
  background-color: #447D9C;
  transform: scale(1.5);
 }
 
 /* Estilo para el contenido de los div de los botones al pasar el cursor sobre ellos */
 .methods:hover .tituloBoton,
 .overview:hover .tituloBoton,
 .results:hover .tituloBoton {
  font-size: 18px;
 }
 
 .methods:hover .contentBoton,
 .overview:hover .contentBoton,
 .results:hover .contentBoton  {
  text-align: justify;
  color: white;
  display: block;
  max-width: 100%;
  max-height: 100%;
  padding-bottom: 10px;
 }
 
 /* Estilo para el botón "Learn More" al pasar el cursor sobre los div de los botones */
 .learnMore {
  background-color: transparent;
  border: 3px solid white;
  border-radius: 10px;
  color: white;
  padding: 5px 10px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  font-size: 10px;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.6);
  cursor: pointer;
 }

.learnMore:active{
  margin-top: 3px;
  margin-left: 3px;
  box-shadow: none;
}

.learnMore:focus{
  outline: none;
}
 
 .methods:hover .learnMore {
  display: inline-block;
  width: 80px;
  background-color: #C55B75;
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
 }
 .overview:hover .learnMore{
  display: inline-block;
  width: 80px;
  background-color: #5BC5AB;
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
 }
 .results:hover .learnMore{
  display: inline-block;
  width: 80px;
  background-color: #447D9C;
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
 }
 /* Estilo para los títulos y contenido de los div de los botones */
 .tituloBoton {
  font-size: 20px;
  font-weight: bold;
  align-items: center;
  margin: auto auto;
  text-align: center;
}

 
 .contentBoton {
  font-size: 13px;
  display: none;
 }
 
 /* Efecto de sombra y transformación al pasar el cursor sobre los botones */
 .methods:hover .tituloBoton,
 .overview:hover .tituloBoton,
 .results:hover .tituloBoton,
 .methods:hover .contentBoton,
 .overview:hover .contentBoton,
 .results:hover .contentBoton {
  color: white;
  max-width: 100%;
  max-height: 100%;
  display: contents;
  height: 139px;
  width: 175px;
 }
 
 
 /*introduccion*/
 .introduction{
  text-align: center;
 }
 
 /*cosas del side bar index*/
 
 .index1, .index2, .index3{
  margin-left: 30px;
  width: 7%;
  min-width: 7%;
  text-align: center;
  height: fit-content;
  border-radius: 20px;
  position: sticky;
  top:150px;
  font-size: 1vw;
 }
 .index1{
  background: linear-gradient(#9dcfc2,#5BC5AB);
 }
 .index2{
  background: linear-gradient(#eab0be,#C55B75);
 }
 .index3{
  background: linear-gradient(#65bfef,#447D9C);
 }
 
 .navigation li {
  list-style: none;
 }
 
 .navigation li a {
  text-decoration: none;
  color: white;
  display: block;
  padding: 10px 10px;
  margin: 10px 0px 10px 0px;
  font-weight: 400;
  transition: all ease-out 250ms;
  border-radius: 10px;
 }
 
 .navigation li a:hover {
  margin: 2px,5px,2px,5px;
  background-color: black;
  opacity: .4;
 }
 
 p{
 margin-left: 5%;
 margin-right: 5%;
 }

 .reference{
  font-size: 1.2rem;
  font-weight: 500;
  font-family: 'Quicksand';
  text-align: justify;
  line-height: 1.5;
  color: black;
 }
 h2::after, h2::before{
  content: " ";
  text-align: center;
  display: block;
  border: 2px solid #5BC5AB;
  background-color: #f8f8f8;
 }
 
 .subtitleO, .subtitleM, .subtitleR{
  text-align: center;
  font-family: 'Bricolage Grotesque';
  font-size:3vw;
  font-weight:500;
  color:#302535; 
  display: grid;
  grid-template-columns: 1fr max-content 1fr;
  grid-template-rows: 16px 0;
  grid-gap: 22px;
  align-items: center;
  padding-top: 10px;
 }
 .subtitleO{
  max-width: 100%;
 }
 .subtitleM, .subtitleR{
  max-width: 87%;
 }
 
 .subtitleO:after, .subtitleO:before {
 content: " ";
 display: block;
 border: 2px solid #5BC5AB;
 background-color:#f8f8f8;}
 
 .subtitleM:after, .subtitleM:before {
  content: " ";
  display: block;
  border: 2px solid #C55B75;
  background-color:#f8f8f8;}
 
 .subtitleR:after, .subtitleR:before {
  content: " ";
  display: block;
  border: 2px solid #447D9C;
  background-color:#f8f8f8;
}


 
 .welcomepage {
  position:relative;
  text-align:center;
  background: linear-gradient(60deg, #5BC5AB 0%, rgba(0,172,193,1) 100%);
  color:white;
 }
 
 .inner-header {
  height:65vh;
  width: 100vw;
  margin: 0;
  padding: 0;
 }
 
 .flex { /*Flexbox for containers*/
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
 }
 
 .waves {
  position:relative;
  width: 100vw;
  height:15vh;
  margin-top: -150px;
  min-height:442px;
  max-height:150px;
 }
 /* Animation */
 
 .parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
 }
 .parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
 }
 .parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
 }
 .parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
 }
 .parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
 }
 @keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% {
    transform: translate3d(85px,0,0);
  }
 }
 
 .tituloContenido{
  margin-left:43px;
 }
 
 .contenido{
  text-align: justify;
  font-size: 1.2rem;
  font-weight: 500;
  font-family: 'Quicksand';
  text-align: justify;
  line-height: 1.5;
  width: 97%;
  margin-left: 60px !important;
  color: black;
 }
 
 .Content{
  margin-left: 10px;
  height: fit-content;
  margin-right: 10px;
 }
 /*animación al pasar el cursor encima de las preguntas*/
 .cta1, .cta2, .cta3, .cta4, .cta5, .cta6 {
  position: relative;
  margin: span;
  padding: 8px 12px;
  transition: all 0.2s ease;
  border: none;
  background: none;
  margin-left: 8% !important;
  }
 .cta1:before, .cta2:before, .cta3:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0px;
  display: block;
  border-radius: 50px;
  background: #D27063;
  width: 45px;
  height: 100%;
  transition: all 0.3s ease;
 }
 .cta4:before, .cta5:before, .cta6:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0px;
  display: block;
  border-radius: 50px;
  background: #DE8551;
  width: 45px;
  height: 100%;
  transition: all 0.3s ease;
 }

 .cta1 span, .cta2 span, .cta3 span, .cta4 span, .cta5 span, .cta6 span {
  position: relative;
  font-family: 'Quicksand';
  font-size: 1.2rem;
  font-weight: 500;
  color: black;
 }
 .cta1 svg, .cta2 svg, .cta3 svg, .cta4 svg, .cta5 svg, .cta6 svg {
  position: relative;
  top: 0;
  margin-left: 10px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: #234567;
  stroke-width: 2;
  transform: translateX(-5px);
  transition: all 0.3s ease;
 }
 .cta1:hover svg, .cta2:hover svg, .cta3:hover svg, .cta4:hover svg, .cta5:hover svg, .cta6:hover svg {
  transform: translateX(0);
 }
 .cta1:active, .cta2:active, .cta3:active, .cta4:active, .cta5:active, .cta6:active {
  transform: scale(0.95);
 }
 .cta1:hover:before{
   width: 75vw;
   background: #DE8551;
  }
.cta2:hover:before{
   width: 70vw;
   background: #DE8551;
}
.cta3:hover:before{
   width: 72vw;
   background: #DE8551;
}
.cta4:hover:before{
   width: 70vw;
   background: #F6AE2D;
}
.cta5:hover:before{
   width: 70vw;
   background: #F6AE2D;
}
.cta6:hover:before{
   width: 70vw;
   background: #F6AE2D;
}
 
.table1{
margin-left: 20%;
}
.table2{
margin-left: 30%;
}
 
 /*Tabla de las ecuaciones quimicas*/
 * {
  margin: 0;
  padding: 0;
 }
 
 .table-wrap {
  max-width:60vh;
  margin: auto;
 }
 
 table, td, th {
 /*   border: 1px solid #ddd; */
  text-align: left;
  font-size:18px;
 }
 
 table thead tr{
   background-color: #071665;
   color: #fff;
 }
 
 table {
  border-collapse: collapse;
  width: 100%;
   border-radius: 16px 16px 0px 0px;
  overflow: hidden;
 }
 
 table tbody tr td{
 border: 1px solid #ddd;
 }
 
 th, td {
  padding: 15px;
  white-space: nowrap;
 }
 
 table tbody tr:nth-child(odd) {
 background: #b4b4b442;
  color: #000;
  font-weight: 500;
 }
 
 .box-wrap {
  padding: 0px 16px;
  position: relative;
  left: 21px;

 }
 
 table tbody tr td::last-child{
 background-color:red;
 }
 
.referencias{
  color:#D27063;
}
.referencias:hover{
  color: #C55B75;
}

.figures{
  color:#000
}
.figures:hover{
  color: #000;
}
 /*Boton desplegable de referencias*/
.accordion {
  width: 0%;
  max-width: 1000px;
  margin: 2rem auto;
  justify-self: center;
  z-index: 20;
}
.accordion-item, .accordion-item2 {
  background-color: #fff;
  color: #111;
  margin: 1rem 0;
  border-radius: 0.5rem;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25);
  width: 90%;
  justify-self: center;
  z-index: 20;

}

.accordion-item, .accordion-item2 {
  justify-self: center;
  background-color: #ffffff;
  color: #111;
  margin: auto;
  border-radius: 3px;
  box-shadow: 7px 7px #5BC5AB ;
  width: 80%;
  margin-bottom: 20px;
  border: solid 0.5px #EBEBF1;
  z-index: 20;
}
.accordion-item2 {
  background: white;
  color: black;
  border-radius: 2vw;
  box-shadow: 7px 7px #C55B75;
  border-color: #C55B75;
  border-width: 0.2vw;
}

.accordion-item-header {
  min-height: 60px;
  font-size: 1.2rem;
  padding: 0.5rem 3rem 0.5rem 1rem;
  line-height: 1.5;
  font-weight: 500;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  font-family: 'Bricolage Grotesque';
  font-size: 1.5rem;
  z-index: 20;
}
.accordion-item-header::after {
  content: "\002B";
  font-size: 1.5rem;
  position: absolute;
  right: 1rem;
  z-index: 20;
}
.accordion-item-header.active::after {
  content: "\2212";
  z-index: 20;
}
.accordion-item-body, .accordion-item-body2 {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  padding-left: 20px;
  padding-right: 20px;
  z-index: 20;
}
.accordion-item-body2 {
  background-color: white !important;
  border-radius: 0vw 0vw 2vw 2vw;
  color: black;
}
.accordion-item-body-content {
  padding:1rem;
  line-height: 1.5rem;
  border-top: 1px solid;
  border-image: linear-gradient(to right, transparent, #34495e, transparent) 1;
  justify-content:center;
  font-weight: 600;
  font-family: 'Quicksand';
  text-align: justify;
  margin-left: 100px;
  z-index: 20;
  margin-right: 100px;
}
@media(max-width:767px) {
  .headParts{
    height: 515px;
}

}

tabla1
.tablaODES{
  font-size: 1vw;
  width: fit-content;
  margin: auto;
}

.formulaTablaODEs{
  font-size: 1.2vw;
}
/*cosas del diagrama IPTG induction*/
 
 .diagramaIPTG{
  position: relative;
  z-index: 1;
 }
 /*tooltips cosas */
 .tooltipSignificadoBoxDiagrama {
  position: absolute;
  visibility: hidden;
  background-color: #C55B75; /* Cambiado el color de fondo predeterminado */
  color: white;
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 14px;
  z-index: 500;
  text-align: center;
  width: 300px; /* Ancho automático para ajustarse al contenido */
  left: 50%;
  transform: translateX(-50%); /* Centrar horizontalmente */
  bottom: 100%; /* Colocar por encima de la palabra */
  opacity: 0; /* Inicialmente oculto */
  transition: opacity 0.5s, visibility 0.5s;
 }
 
 /*flecha que conecta el bloque con el texto */
 .tooltipSignificadoBoxDiagrama::after {
  content: "";
  visibility: hidden;
  border-top: 10px solid transparent;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  position: absolute;
  left: 50%; /* Centrar horizontalmente */
  bottom: -7px;
  transform: translateX(-50%); /* Centrar la flecha horizontalmente */
  transition: 0s border-top;
 }
 .tooltipSignificadoDiagrama:hover .tooltipSignificadoBoxDiagrama::after{
  border-top: 10px solid #C55B75;
  transition-delay:0s;
  visibility: visible;
 }
 .tooltipSignificadoDiagrama:hover .tooltipSignificadoBoxDiagrama {
  visibility: visible;
  transition-delay: 0s;
  margin-bottom: 8px;
  opacity: 80%;
 }
 .tooltipSignificadoDiagrama
 {
  position:relative;
  color:transparent;
  left: 0.3vw;
 }
 
 .tooltipSignificadoDiagrama:before
 {
  content:'';
  position:absolute;
  bottom:0;
  width:90%;
  height:2px;
  color: #fff;
  transform-style:linear;
  transition-property:height,width;
  transition-delay:0s,0s;
  transition-duration:0s;
 }
 .tooltipSignificadoDiagrama:hover:before
 {
  transition-property:width,height;
  width:0px;
  height:100%;
 }
 .tooltipSignificadoDiagrama:after
 {
  content:'';
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
  padding-left: 3px;
  transform:scaleX(0);
  transition:0s;
  transition-delay:0s;
  transform-origin:left;
  z-index:-1;
 }
 .tooltipSignificadoDiagrama:hover:after
 {
  transform:scaleX(1);
  transition-delay:0s;
 }
 
 
 .imagenDiagrama{
  opacity: 90%;
  margin-left: 11vw;
  position: relative;
  z-index: 1;
  padding-bottom: 1vw;
 }
 /*cosas del 1*/
 .ciclo1{
  position: absolute;
  z-index: 3;
  width: 1vw;
  height: 1.5vw;
  bottom: 18.4vw;
  left: 31.2vw;
 }
 
 .ciclo1:hover .azul1{
  opacity: 300%;
 }
 
 .hilo_ondulante{
  position: absolute;
  bottom: -0.3vw;
  z-index: 3;
  height: 1vw;
  left: 2vw;
  width: 4vw;
  box-shadow: 0 0 15px red;
  border-radius: 20px;
  opacity: 0%;
 }
 
 
 .lacl_gene{
  border: 20px;
  height: 1.8vw;
  z-index: 3;
  width: 4.8vw;
  position: absolute;
  bottom: -1.1vw;
  right: 2vw;
  box-shadow: 0 0 15px red;
  opacity: 0%;
 }
 
 /*cosas del 2*/
 .ciclo2{
  position: absolute;
  width: 1vw;
  height: 1.5vw;
  bottom: 18.8vw;
  left: 37.5vw;
  z-index: 3;
 }
 .ciclo2:hover .azul2{
  opacity: 300%;
 }
 
 .hilo_ondulante2{
  position: absolute;
  bottom: -0.6vw;
  height: 1vw;
  right: 1.6vw;
  width: 3.7vw;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  border-radius: 20px;
 }
 
 .cosaAmarilla{
  position: absolute;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  width: 0.7vw;
  height: 1.8vw;
  left: 2.1vw;
  bottom: -1.3vw;
  border-radius: 20px;
 }
 
 /*cosas del 3*/
 .ciclo3{
  position: absolute;
  width: 1vw;
  height: 1.5vw;
  bottom: 18.5vw;
  left: 42.7vw;
  z-index: 3;
 }
 .ciclo3:hover .azul3{
  opacity: 300%;
 }
 .cosaAmarilla2{
  position: absolute;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  width: 0.7vw;
  height: 1.8vw;
  right: 3.3vw;
  top: 0.7vw;
  border-radius: 20px;
 }
 .dosCosasAmarillas{
  position: absolute;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  height: 2vw;
  bottom: -1.1vw;
  left: 3vw;
  width: 1.9vw;
  border-radius: 20px;
 }
 
 /*cosas del 4*/
 .ciclo4{
  position: absolute;
  width: 1vw;
  height: 1.5vw;
  bottom: 18.6vw;
  left: 49.8vw;
  z-index: 3;
 }
 .ciclo4:hover .azul4{
  opacity: 300%;
 }
 .dosCosasAmarillas2{
  position: absolute;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  height: 2vw;
  top: 0.7vw;
  right: 3.4vw;
  width: 1.8vw;
  border-radius: 20px;
 }
 
 .dosAmarillasRojas{
  position: absolute;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  height: 3.4vw;
  width: 1.7vw;
  left: 3.85vw;
  bottom: -1.6vw;
  border-radius: 20px;
 }
 
 /*cosas del 5*/
 .ciclo5{
  position: absolute;
  width: 1vw;
  height: 1.5vw;
  bottom: 16vw;
  left: 43.7vw;
  z-index: 3;
 }
 .ciclo5:hover .azul5{
  opacity: 300%;
 }
 .dosCosasAmarillas3{
  position: absolute;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  height: 2vw;
  bottom: 1.4vw;
  left: 2vw;
  width: 1.9vw;
  border-radius: 20px;
 }
 
 .lacO1{
  position: absolute;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  right: 2vw;
  width: 4.5vw;
  height: 1.5vw;
  bottom: -1.2vw;
  border-radius: 10px;
 }
 
 .lacO2{
  position: absolute;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  height: 2.5vw;
  bottom: -4.9vw;
  right: -1.1vw;
  width: 4.5vw;
  border-radius: 20px;
 }
 .lacO3{
  position: absolute;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  height: 1.5vw;
  left: 1.7vw;
  width: 4.5vw;
  bottom: -2vw;
 }
 
 
 /*cosas del 6*/
 .ciclo6{
  position: absolute;
  width: 1vw;
  height: 1.5vw;
  bottom: 14.6vw;
  left: 56.4vw;
  z-index: 3;
 }
 .ciclo6:hover .azul6{
  opacity: 300%;
 }
 
 .dosAmarillasRojas2{
  position: absolute;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  height: 3.5vw;
  bottom: 2.3vw;
  right: 2.1vw;
  width: 1.7vw;
  border-radius: 20px;
 }
 
 .lacO4{
  position: absolute;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  height: 1.5vw;
  right: 2.6vw;
  width: 4.5vw;
  bottom: -0.6vw;
 }
 .lacO5{
  position: absolute;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  height: 1.5vw;
  left: 0.2vw;
  width: 4.5vw;
  bottom: 1.4vw;
 }
 .lacO6Amarillos{
  position: absolute;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  height: 4.2vw;
  right: -3.2vw;
  width: 4.5vw;
  border-radius: 20px;
  bottom: -4.8vw;
 }
 /*cosas del ciclo 7*/
 .ciclo7{
  position: absolute;
  width: 1vw;
  height: 1.5vw;
  bottom: 19.4vw;
  left: 35.6vw;
  z-index: 3;
 }
 .ciclo7:hover .azul7{
  opacity: 300%;
 }
 
 .hilo_ondulante3{
  position: absolute;
  top: 1.7vw;
  height: 1vw;
  right: -0.7vw;
  width: 4.5vw;
  box-shadow: 0 0 15px red;
  border-radius: 20px;
  opacity: 0%;
 }
 .circuloTachado{
  position: absolute;
  bottom: 2.3vw;
  height: 1.2vw;
  right: 0.8vw;
  width: 1.2vw;
  box-shadow: 0 0 15px red;
  border-radius: 20px;
  opacity: 0%;
 }
 
 /*cosas del ciclo 8*/
 .ciclo8{
  position: absolute;
  width: 1vw;
  height: 1.5vw;
  bottom: 20.3vw;
  left: 40vw;
  z-index: 3;
 }
 .ciclo8:hover .azul8{
  opacity: 300%;
 }
 
 .cosaAmarilla3{
  position: absolute;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  width: 1vw;
  height: 2vw;
  right: 0.5vw;
  top: 2.4vw;
  border-radius: 20px;
 }
 
 .circuloTachado2{
  position: absolute;
  bottom: 2.3vw;
  height: 1.5vw;
  right: 0.2vw;
  width: 1.5vw;
  box-shadow: 0 0 15px red;
  border-radius: 20px;
  opacity: 0%;
 }
 
 /*cosas del ciclo 8*/
 .ciclo9{
  position: absolute;
  width: 1vw;
  height: 1.5vw;
  bottom: 20vw;
  left: 47.9vw;
  z-index: 3;
 }
 .ciclo9:hover .azul9{
  opacity: 300%;
 }
 
 .circuloTachado3{
  position: absolute;
  bottom: 2.1vw;
  height: 1.2vw;
  left: 0.3vw;
  width: 1.2vw;
  box-shadow: 0 0 15px red;
  border-radius: 20px;
  opacity: 0%;
 }
 .dosCosasAmarillas4{
  position: absolute;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  height: 2vw;
  right: 1.45vw;
  top: 2.1vw;
  width: 25px;
  border-radius: 20px;
 }
 
 .ciclo10{
  position: absolute;
  width: 1vw;
  height: 1.5vw;
  bottom: 20vw;
  left: 55.2vw;
  z-index: 3;
 }
 .ciclo10:hover .azul10{
  opacity: 300%;
 }
 
 .circuloTachado4{
  position: absolute;
  bottom: 2vw;
  height: 1.2vw;
  right: -1.5vw;
  width: 1.2vw;
  box-shadow: 0 0 15px red;
  border-radius: 20px;
  opacity: 0%;
 }
 
 .dosAmarillasRojas3{
  position: absolute;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  height: 3.5vw;
  bottom: -3vw;
  right: 0.85vw;
  width: 1.8vw;
  border-radius: 20px;
 }
 
 .ciclo11{
  position: absolute;
  width: 1vw;
  height: 1.5vw;
  bottom: 6.4vw;
  left: 17.7vw;
  z-index: 3;
 }
 .ciclo11:hover .azul11{
  opacity: 300%;
 }
 
 .tresBolasVerdes{
  position: absolute;
  bottom: -2.7vw;
  height: 3vw;
  right: -4vw;
  width: 3vw;
  box-shadow: 0 0 15px red;
  border-radius: 20px;
  opacity: 0%;
 }
 
 .muchasBolasVerdes{
  position: absolute;
  bottom: -3.5vw;
  height: 6.6vw;
  right: 2vw;
  width: 5.5vw;
  box-shadow: 0 0 15px red;
  border-radius: 30px;
  opacity: 0%;
 }
 
 .ciclo12{
  position: absolute;
  width: 1vw;
  height: 1.5vw;
  bottom: 8.9vw;
  left: 44.4vw;
  z-index: 3;
 }
 .ciclo12:hover .azul12{
  opacity: 300%;
 }
 
 .dosBolasVerdes{
  position: absolute;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  width: 1vw;
  height: 2.5vw;
  left: 1.4vw;
  bottom: -1.6vw;
  border-radius: 20px;
 }
 
 .dosBolasVerdes2{
  position: absolute;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  width: 1vw;
  height: 2.5vw;
  left: -2.4vw;
  bottom: -1.5vw;
  border-radius: 20px;
 }
 
 .dosAmarillasDosBolas2{
  position: absolute;
  bottom: -5.4vw;
  height: 2.5vw;
  right: -2.7vw;
  width: 2.7vw;
  box-shadow: 0 0 15px red;
  border-radius: 20px;
  opacity: 0%;
 }
 
 .lacO7{
  position: absolute;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  right: -0.4vw;
  width: 4.5vw;
  height: 2.8vw;
  bottom: 2vw;
  border-radius: 10px;
 }
 
 .ciclo13{
  position: absolute;
  width: 1vw;
  height: 1.5vw;
  bottom: 8.5vw;
  left: 56vw;
  z-index: 3;
 }
 .ciclo13:hover .azul13{
  opacity: 300%;
 }
 
 .dosBolasVerdes3{
  position: absolute;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  width: 1vw;
  height: 2.6vw;
  left: 1.3vw;
  bottom: -1.8vw;
  border-radius: 20px;
 }
 
 .dosBolasVerdes4{
  position: absolute;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  width: 1vw;
  height: 2.6vw;
  left: -2.5vw;
  bottom: -1.88vw;
  border-radius: 20px;
 }
 
 .lacO8{
  position: absolute;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  right: 0.5vw;
  width: 4.6vw;
  height: 1.4vw;
  bottom: -4.45vw;
 }
 
 .dosAmarillasRojasDosBolas{
  position: absolute;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  height: 3.7vw;
  bottom: -6vw;
  right: -2.8vw;
  width: 2.5vw;
  border-radius: 20px;
 }
 
 .lacO9Amarillos{
  position: absolute;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  height: 4vw;
  right: -3.6vw;
  width: 4.5vw;
  border-radius: 10px;
  bottom: 1.3vw;
 }
 
 .ciclo14{
  position: absolute;
  width: 1vw;
  height: 1.5vw;
  bottom: 21.5vw;
  left: 43.1vw;
  z-index: 3;
 }
 .ciclo14:hover .azul14{
  opacity: 300%;
 }
 
 .dosBolasVerdes5{
  position: absolute;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  width: 1vw;
  height: 2.3vw;
  left: 0.5vw;
  bottom: -2.2vw;
  border-radius: 20px;
  transform: rotate(-35deg);
 }
 
 .dosBolasVerdes6{
  position: absolute;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  width: 1vw;
  height: 2.6vw;
  left: 2.8vw;
  bottom: -0.5vw;
  border-radius: 20px;
  transform: rotate(-25deg);
 }
 
 .dosCosasAmarillas5{
  position: absolute;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  height: 2.2vw;
  bottom: -4.2vw;
  left: 2.6vw;
  width: 1.8vw;
  border-radius: 20px;
 }
 
 .dosAmarillasDosBolas3{
  position: absolute;
  bottom: 2vw;
  height: 2.5vw;
  right: -0.9vw;
  width: 2.7vw;
  box-shadow: 0 0 15px red;
  border-radius: 20px;
  opacity: 0%;
 }
 
 .ciclo15{
  position: absolute;
  width: 1vw;
  height: 1.5vw;
  bottom: 22.5vw;
  left: 51vw;
  z-index: 3;
 }
 .ciclo15:hover .azul15{
  opacity: 300%;
 }
 
 .dosBolasVerdes7{
  position: absolute;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  width: 1vw;
  height: 2.6vw;
  left: 0.6vw;
  bottom: -3vw;
  border-radius: 20px;
  transform: rotate(-30deg);
 }
 
 .dosBolasVerdes8{
  position: absolute;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  width: 1vw;
  height: 2.5vw;
  left: 2.7vw;
  bottom: -1.2vw;
  border-radius: 20px;
  transform: rotate(-30deg);
 }
 
 .dosAmarillasRojas4{
  position: absolute;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  height: 3.4vw;
  bottom: -5.5vw;
  right: -3.35vw;
  width: 1.8vw;
  border-radius: 20px;
 }
 
 .dosAmarillasRojasDosBolas2{
  position: absolute;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  height: 3.8vw;
  bottom: 1.2vw;
  right: -1vw;
  width: 2.2vw;
  border-radius: 10px;
 }
 
 .ciclo16{
  position: absolute;
  width: 1vw;
  height: 1.5vw;
  bottom: 24.2vw;
  left: 45.9vw;
  z-index: 3;
 }
 .ciclo16:hover .azul16{
  opacity: 300%;
 }
 
 .dosAmarillasDosBolas{
  position: absolute;
  bottom: -0.6vw;
  height: 2.5vw;
  right: 2vw;
  width: 2.6vw;
  box-shadow: 0 0 15px red;
  border-radius: 20px;
  opacity: 0%;
 }
 
 .circuloTachado5{
  position: absolute;
  bottom: 1.8vw;
  height: 1.2vw;
  right: -1vw;
  width: 1.2vw;
  box-shadow: 0 0 15px red;
  border-radius: 20px;
  opacity: 0%;
 }
 
 .ciclo17{
  position: absolute;
  width: 1vw;
  height: 1.5vw;
  bottom: 24.7vw;
  left: 54vw;
  z-index: 3;
 }
 .ciclo17:hover .azul17{
  opacity: 300%;
 }
 
 .dosAmarillasRojasDosBolas3{
  position: absolute;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  height: 3.7vw;
  bottom: -1vw;
  right: 2vw;
  width: 2.4vw;
  border-radius: 10px;
 }
 
 .circuloTachado6{
  position: absolute;
  bottom: 1.3vw;
  height: 1.2vw;
  right: -1.5vw;
  width: 1.2vw;
  box-shadow: 0 0 15px red;
  border-radius: 20px;
  opacity: 0%;
 }
 
 .ciclo18{
  position: absolute;
  width: 1vw;
  height: 1.5vw;
  bottom: 9.7vw;
  left: 30.5vw;
  z-index: 3;
 }
 .ciclo18:hover .azul18{
  opacity: 300%;
 }
 
 .hilo_ondulante4{
  position: absolute;
  bottom: -1vw;
  z-index: 3;
  height: 1vw;
  left: -2vw;
  width: 4vw;
  box-shadow: 0 0 15px red;
  border-radius: 20px;
  opacity: 0%;
  transform: rotate(67deg);
 }
 
 .cadena{
  position: absolute;
  box-shadow: 0 0 15px red;
  opacity: 0%;
  right: -8.5vw;
  width: 16vw;
  height: 1.5vw;
  bottom: 1.8vw;
}
 
 .ciclo19{
  position: absolute;
  width: 1vw;
  height: 1.5vw;
  bottom: 8.3vw;
  left: 32.2vw;
  z-index: 3;
 }
 .ciclo19:hover .azul19{
  opacity: 300%;
 }
 
 .hilo_ondulante5{
  position: absolute;
  bottom: 0.5vw;
  z-index: 3;
  height: 1vw;
  left: -3.5vw;
  width: 4vw;
  box-shadow: 0 0 15px red;
  border-radius: 20px;
  opacity: 0%;
  transform: rotate(67deg);
 }
 
 .cosaVerde{
  position: absolute;
  bottom: -2.2vw;
  height: 3.4vw;
  right: -3vw;
  width: 2.5vw;
  box-shadow: 0 0 15px red;
  border-radius: 26px;
  opacity: 0%;
 }
 
 .ciclo20{
  position: absolute;
    width: 1vw;
    height: 1.5vw;
    bottom: 4.8vw;
    left: 31.8vw;
    z-index: 3;
 }
 .ciclo20:hover .azul20{
  opacity: 300%;
 }
 
 .hilo_ondulante6{
  position: absolute;
  bottom: 4vw;
  z-index: 3;
  height: 1vw;
  left: -3.3vw;
  width: 4vw;
  box-shadow: 0 0 15px red;
  border-radius: 20px;
  opacity: 0%;
  transform: rotate(67deg);
 }
 
 .circuloTachado7{
  position: absolute;
  bottom: -1.8vw;
  height: 1.2vw;
  right: 0.8vw;
  width: 1.2vw;
  box-shadow: 0 0 15px red;
  border-radius: 20px;
  opacity: 0%;
 }
 
 .ciclo21{
  position: absolute;
  width: 1vw;
  height: 1.5vw;
  bottom: 3.9vw;
  left: 35.6vw;
  z-index: 3;
 }
 .ciclo21:hover .azul21{
  opacity: 300%;
 }
 
 .circuloTachado8{
  position: absolute;
  bottom: -2.1vw;
  height: 1.2vw;
  right: 0.7vw;
  width: 1.2vw;
  box-shadow: 0 0 15px red;
  border-radius: 20px;
  opacity: 0%;
 }
 
 .cosaVerde2{
  position: absolute;
  bottom: 2.3vw;
  height: 3.2vw;
  right: 0.5vw;
  width: 2.3vw;
  box-shadow: 0 0 15px red;
  border-radius: 26px;
  opacity: 0%;
 }
 
 /*ajuste de numero de las ecuaciones*/
 .NumeroEcuacion{
   position: relative;
   bottom: 2vw;
   margin: 0;
}

/*ajuste tabla y colores*/
.tabla_chemicalReactios th, .tabla_chemicalReactios td{
   border: 2px solid #C55B75;
}
.tabla_chemicalReactios th{
   background-color: #C55B75;
   color: #ffffff;
}

.INDEX{
   display: none;
}

.instructionDiagram{
  background-color: #C55B75;
  color: white;
  width: fit-content;
  padding-top: 0.5vw;
  padding-left: 1vw;
  padding-right: 1vw;
  height: 3vw;
  border-radius: 25px;
  margin-left: 18vw;
  font-size: 1.2vw;
  margin-bottom: 4vw;
}

.instructionDiagram2{
  background:linear-gradient(to right, #447D9C, #5BC5AB);
  color: white;
  width: fit-content;
  padding-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
  height: 3vw;
  font-size: 1vw;
  border-radius: 25px;
  margin: auto;
}

.sectM, .sectR{
  display: none;
}

.sectO, .sectM, .sectR {
  position: relative;
}

/*imagen figuara dos 2 IPGT*/  


.textoFigura2{
  font-size: 1vw;
}

h5{
  font-size: 2rem;
}
h4{
  font-size: 3.5rem;
  text-align: center;
}

.responsive {
  max-width: 100%;
  height: auto;
  align-items: center;
  display: block;
  margin: 2%;
}

/*table responsive*/
@media (max-width: 575.98px) {
  .table1-responsive-sm {
      display:block;
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch
  }

  .table1-responsive-sm>.table1-bordered {
      border: 0
  }
}

@media (max-width: 767.98px) {
  .table1-responsive-md {
      display:block;
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch
  }

  .table1-responsive-md>.table1-bordered {
      border: 0
  }
}

@media (max-width: 991.98px) {
  .table1-responsive-lg {
      display:block;
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch
  }
}


@media (max-width: 1199.98px) {
  .table1-responsive-xl {
      display:block;
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch
  }

  .table1-responsive-xl>.table1-bordered {
      border: 0
  }
}

.table1-responsive {
  display: block;
  max-width: 100% ;
  width: -webkit-fil-available;
  overflow-x: auto;
  -webkit-overflow-scrolling: touchñ
  
}

/*!-- TABLAS -->*/
.TABLA1 {
  font-family: 'Inter', sans-serif;
  width: 100%;
  margin: 0 auto;
  border-collapse: collapse;
  border: 2px solid #C55B75;
}

.colorTextoTabla{
  color: #447d9c;
  font-weight: 600;
  font-family: 'Quicksand';
}
.TABLA1 th, .TABLA1 td {
  padding: 12px;
  max-width: 30%;
  text-align: left;
  border: 1px solid #C55B75;
  transition: background-color 0.3s, transform 0.3s;
}

.TABLA1 th {
  background-color: #C55B75;
  color: #ffffff;
  max-width: 30%;
  text-align: center
}

.TABLA1 th h1 {
  margin: auto;
  max-width: 30%;
  font-size: 1.5rem;
  text-align: center;
  justify-self: center;
}

.TABLA1 td {
  background-color: #f5f5f5;
  color: #302535;
  max-width: 30%;
}


.TABLA1 td:hover {
  background-color: #d05182;
  color: #ffffff;
  transform: translate(4px, -4px);
  box-shadow: 0 6px 6px -6px #ffffff;
  max-width: 30%;
}


  .TABLA1 .error td:hover{
      background-color: #5BC5AB;
      color: #ffffff;
      transform: translate(4px, -4px);
      box-shadow: 0 6px 6px -6px #ffffff;
      max-width: 30%;
  }

/* Arriba esta el las caracteristicas de tablas*/
 /*Poner la imagen a la derecha debajo*/  
 .mt-5 {
  margin-bottom: 3rem !important;
}

.row > * {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--bs-gutter-y) * -1);
  margin-right: calc(var(--bs-gutter-x) * -.5);
  margin-left: calc(var(--bs-gutter-x) * -.5);
}

.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--bs-gutter-y) * -1);
  margin-right: calc(var(--bs-gutter-x) * -.5);
  margin-left: calc(var(--bs-gutter-x) * -.5);
}

.col-lg-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
}

#bbdesign {
  top: -25px;
  position: relative;
}

.ms-auto {
  margin-left: auto !important;
}

.align-self-center {
  align-self: center !important;
}
.col-lg-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
}

/*Acomodo de la imagen2 a la derecha arriba*/
/*Pop up card abajo*/

body {
	position: relative;
}

.bg-overlay {
	position: fixed;
	z-index: 998;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0, 0, .7);
	width: 100%;
	height: 100%;
	transition: opacity 500ms;
	visibility: hidden;
	opacity: 0;

	&:target {
		visibility: visible;
		opacity: 1;
	}
}

.subscribe-optin {
  position: absolute;
  z-index: 999;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 1rem;
  width: 70%;
  left: 50%;
  height: fit-content;
  background: #fff;
  border-radius: 5px;
  font-size: .8rem;
}
	h2 {
		padding: 1rem 0;
	}

	.optin-close {
		position: absolute;
		top: 1rem;
		right: 1rem;
		z-index: 999;
		color: #000;
		font-size: 1rem;
		text-decoration: none;

		&:hover {
			color: #c7c7c7
		}
	}

	form {
		
		label {
			display: none;
		}

		input {
			display: inline-block;
			padding: .5rem 1rem;
			outline: none;
			border: 1px solid #1b1414;
			text-transform: uppercase;
		}

		input[type=text],
		input[type=email] {
			padding: .5rem 1rem;
			width: 40%;
		}

		input[type=submit] {
			color: #c7c7c7;

			&:hover {
				color: #1c1c1c;
				transition: all 500ms;
			}

			&:active {
				box-shadow: inset 2px 2px 2px 0  #1c1c1c;
			}
		}
	}



.popup:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  width: 100vw;
  height: 50vh;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 2;
  visibility: hidden;
  opacity: 0;
  overflow: hiden;
  transition: 0.64s ease-in-out;
}

.popup:target .popup-inner {
  bottom: 0;
  right: 0;
  transform: rotate(0);
}

.popup-inner {
  position: relative;
  bottom: 0.1vw;
  display: flex;
  align-items: center;
  height: 50%;
  max-height:70vh;
  background-color: #fff;
  transform: rotate(0deg);
  transition: 0.64s ease-in-out;
}

.popup__photo {
  display: block;
  justify-content: flex-end;
  align-items: flex-end;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
}

.popup__photo img {
  width: 22vw;
  height: 20vw;
  

  max-height: 27rem;
  max-width: 22rem;
  
}
.popup__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 50%;
  padding: 1rem;
  align-content: space-between;
  flex-wrap: nowrap;
}
.popup__close {
  position: absolute;
  right: -1vh;
  top: 0rem;
  width: 3rem;
  height: 3rem;
  font-size: 0.875rem;
  font-weight: 300;
  border-radius: 100%;
  background-color: #0A0A0A;
  z-index: 4;
  color: #fff;
  line-height: 3rem;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
}

hm {
  font-family: 'Bricolage Grotesque';
  color: #d72145;
  text-align: center;
  margin: 1.5rem 0;
  font-size: 2.5rem;
}

#p3::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}


#p3::-webkit-scrollbar
{
	width: 12px;
	background-color: #F5F5F5;
}


#p3::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: lightgrey;
}



/*Pop up card  arriba*/

/* Pop-up card 2 abajo*/

.popup2:target {
  visibility: visible;
  opacity: 1;
}

.popup2 {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  width: 100vw;
  height: 50vh;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 2;
  visibility: hidden;
  opacity: 0;
  overflow: hiden;
  transition: 0.64s ease-in-out;
}

.popup2:target .popup-inner {
  bottom: 0;
  right: 0;
  transform: rotate(0);
}

.popup2-inner {
  position: relative;
  bottom: 0.1vw;
  display: flex;
  align-items: center;
  height: 50%;
  max-height:70vh;
  background-color: #fff;
  transform: rotate(0deg);
  transition: 0.64s ease-in-out;
}

.popup2__photo {
  display: block;
  justify-content: flex-end;
  align-items: flex-end;
  max-width: 50vh;
  max-height: 50vh;
  overflow: hidden;
}

.popup2__photo img {
  width: 22vw;
  height: 20vw;
}
.popup2__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 50%;
  padding: 1rem;
  align-content: space-between;
  flex-wrap: nowrap;
}
.popup2__close {
  position: absolute;
  right: -1vh;
  top: 0rem;
  width: 3rem;
  height: 3rem;
  font-size: 0.875rem;
  font-weight: 300;
  border-radius: 100%;
  background-color: #0A0A0A;
  z-index: 4;
  color: #fff;
  line-height: 3rem;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
}


.contenido_popup2 {
  font-size: 1.2rem;
  font-weight: 500;
  font-family: 'Quicksand';
  text-align: justify;
  line-height: 1.5;
  margin-left: 43px !important;
  color: black;
}

/* Pop-up card 2 arriba*/


.ctaT2 {
  position: relative;
  margin: span;
  padding: 8px 12px;
  transition: all 0.2s ease;
  border: none;
  background: none;
  margin-left: 8% !important;
  }
 
 .ctaT2:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0px;
  display: block;
  border-radius: 50px;
  background: #DE8551;
  width: 45px;
  height: 100%;
  transition: all 0.3s ease;
 }

 .ctaT2 spaN{
  position: relative;
  font-family: 'Quicksand';
  font-size: 2.2rem;
  font-weight: 900;
  color: black;
 }
 .ctaT2 svg{
  position: relative;
  top: 0;
  margin-left: 10px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: #234567;
  stroke-width: 2;
  transform: translateX(-5px);
  transition: all 0.3s ease;
 }
 .ctaT2:hover svg {
  transform: translateX(0);
 }
 .ctaT2:active {
  transform: scale(0.95);
 }
 .ctaT2:hover:before{
   width: 75vw;
   background: #DE8551;
  }
/*titulos rositas*/
.ctaT {
  position: relative;
  padding: 8px 12px;
  transition: all 0.2s ease;
  border: none;
  background: none;
  }
 .ctaT:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0px;
  display: block;
  border-radius: 50px;
  background: #5BC5AB;
  width: 45px;
  height: 100%;
  transition: all 0.3s ease;
 }

 .ctaT span {
  position: relative;
  font-family: 'Quicksand';
  font-size: 1.2rem;
  font-weight: 900;
  color: black;
  z-index: 2;
 }
 .ctaT svg{
  position: relative;
  top: 0;
  margin-left: 10px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: #234567;
  stroke-width: 2;
  transform: translateX(-5px);
  transition: all 0.3s ease;
 }
 .cta1:hover svg{
  transform: translateX(0);
 }
 .ctaT:active{
  transform: scale(0.95);
 }
 .ctaT:hover:before{
   width: 75vw;
   background: #5BC5AB;
  }

/*cosas del indice nuevo */
.teamScroll{
  overflow: visible !important;
  }
  
  .scrollIndexContain{
  position: absolute;
  height: calc(100% - 150px);
  z-index: 1;
  
  }

  .stickyIndex{
  position: sticky;
  top: 15vh;
  width: fit-content;
  height: 75vh;
  display: flex;
  justify-content: center;
  align-items: center;
  }
  
  .lineIndex{
  position: absolute;
  width: 2px;
  height: 100%;
  background: #00b9b0;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  }
  
  .indexDots{
  position: absolute;
  width: 20px;
  height: 100%;
  top: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  }
  .scrollIndexContain{
    position: absolute;
    height: calc(100% - 150px);
    z-index: 1;
    margin-left: 30px;
  
  }
  
  .stickyIndex{
    position: sticky;
    top: 15vh;
    width: fit-content;
    height: 75vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .lineIndex{
    position: absolute;
    width: 2px;
    height: 100%;
    background: #00b9b0;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
  }
  
  .indexDots{
    position: absolute;
    width: 20px;
    height: 100%;
    top: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
  
  .dotIndex{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #00b9b0;
    cursor: pointer;
    transition: 0.3s;
    position: relative;
  } 
  
  .dotIndex:hover{
    width: 20px;
    height: 20px;
  }
  
  .dotIndex.active{
    width: 20px;
    height: 20px;
  }
  .dotIndex::before{
    content: '';
    position: absolute;
    width: 0px;
    height: 0px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff;
    top: 50%;
    left: 50%;
    transition: 0.5s;
  }
  
  .dotIndex.active::before{
    width: 10px;
    height: 10px;
  }
  
  .dotText{
    position: absolute;
    font-size: 1.2rem;
    font-weight: 500;
    transition: 0.5s;
    opacity: 1;
    color: rgba(15, 14, 15, 0.788);
    top: 50%;
    transform: translate(0, -50%);
    left: 22px;
    opacity: 0;
  }

  .stickyIndex:hover .indexDots .dotIndex .dotText{
    opacity: 0.5;
  }

  .dotIndex.active .dotText{
    opacity: 1;
    transition-delay: 0.3s;
  }
  
  
  .dotIndex:hover .dotText, .stickyIndex:hover .indexDots .dotIndex:hover .dotText{
    opacity: 0.7;
    transition: 0.25s;
  }
  .dotIndex.active:hover .dotText{
    opacity: 1;
    transition-delay: 0.3s;
  }

  .active .scrollIndexContain{
    opacity: 1;

  }

  .teamScroll{
    overflow: visible;
    overflow-x: clip;
    overflow-y: visible;
    overflow-y: clip;
  }
  .dotIndex{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #00b9b0;
  cursor: pointer;
  transition: 0.3s;
  position: relative;
  } 
  
  .dotIndex:hover{
  width: 20px;
  height: 20px;
  }
  
  .dotIndex.active{
  width: 20px;
  height: 20px;
  }
  .dotIndex::before{
  content: '';
  position: absolute;
  width: 0px;
  height: 0px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  top: 50%;
  left: 50%;
  transition: 0.5s;
  }
  
  .dotIndex.active::before{
  width: 10px;
  height: 10px;
  }
  
  .dotText{
  position: absolute;
  font-size: 1.2rem;
  font-weight: 500;
  transition: 0.5s;
  opacity: 1;
  color: rgba(15, 14, 15, 0.788);
  top: 50%;
  transform: translate(0, -50%);
  left: 22px;
  opacity: 0;
  }
  
  .dotIndex.active .dotText{
  opacity: 1;
  transition-delay: 0.3s;
  }
  
  .dotIndex.active:hover .dotText{
  opacity: 1;
  transition-delay: 0.3s;
  }
  
  .dotIndex:hover .dotText{
  opacity: 0.5;
  transition: 0.25s;
  }
  
.tituloTamano{
  font-size: 2vw;
}

.popupColor{
  color: #447D9C;
}

.uno h1 {
  font-family: 'Bricolage Grotesque';
  font-size: 5rem;
  font-weight: 700;
  background-image: linear-gradient(#C55B75, #D27063, #DE8551);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  text-align: center;
  margin-top: 13vw;
  margin-bottom: 5vw;
}

/*Tabla de explicacion segundo modelo   abajo*/
@media (max-width: 575.98px) {
  .table2-responsive-sm {
      display:block;
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch
  }

  .table2-responsive-sm>.table2-bordered {
      border: 0
  }
}

@media (max-width: 767.98px) {
  .table2-responsive-md {
      display:block;
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch
  }

  .table2-responsive-md>.table2-bordered {
      border: 0
  }
}

@media (max-width: 991.98px) {
  .table2-responsive-lg {
      display:block;
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch
  }
}


@media (max-width: 1199.98px) {
  .table2-responsive-xl {
      display:block;
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch
  }

  .table2-responsive-xl>.table1-bordered {
      border: 0
  }
}

.table2-responsive {
  display: block;
  max-width: 100% ;
  width: -webkit-fil-available;
  overflow-x: auto;
  -webkit-overflow-scrolling: touchñ
  
}

/*!-- TABLAS -->*/
.TABLA2 {
  font-family: 'Inter', sans-serif;
  width: fit-content;
  margin: 0 auto;
  border-collapse: collapse;
  border: 2px solid #C55B75;
}

.colorTextoTabla{
  color: #447d9c;
  font-weight: 600;
  font-family: 'Quicksand';
}
.TABLA2 th, .TABLA2 td {
  padding: 12px;
  max-width: 30%;
  text-align: left;
  border: 1px solid #989898;
  transition: background-color 0.3s, transform 0.3s;
}

.TABLA2 th {
  background-color: #989898;
  color: #ffffff;
  max-width: 30%;
  text-align: center
}

.TABLA2 th h1 {
  margin: auto;
  max-width: 30%;
  font-size: 1.5rem;
  text-align: center;
  justify-self: center;
}

.TABLA2 td {
  background-color: #f5f5f5;
  color: #302535;
  max-width: 30%;
}


.TABLA2 td:hover {
  background-color: #989898;
  color: #ffffff;
  transform: translate(4px, -4px);
  box-shadow: 0 6px 6px -6px #ffffff;
  max-width: 30%;
}


  .TABLA2 .error td:hover{
      background-color: #5BC5AB;
      color: #ffffff;
      transform: translate(4px, -4px);
      box-shadow: 0 6px 6px -6px #ffffff;
      max-width: 30%;
  }


/*Tabla de explicacion segundo modelo   arriba*/

/*Index nuevoBonito*/
.teamScroll {
  overflow: visible !important;
}

.scrollIndexContain {
  position: absolute;
  height: calc(100% - 15vh);
  z-index: 1;
  top:0;
  left: 0;
  top: 15vh;
}

.stickyIndex {
  position: sticky;
  top: 15vh;
  width: fit-content;
  height: 75vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lineIndex {
  position: absolute;
  width: 2px;
  height: 100%;
  background: #00b9b0;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
}

.indexDots {
  position: absolute;
  width: 20px;
  height: 100%;
  top: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.dotIndex {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #00b9b0;
  cursor: pointer;
  transition: 0.3s;
  position: relative;
}

.dotIndex:hover {
  width: 20px;
  height: 20px;
}

.dotIndex.active {
  width: 20px;
  height: 20px;
}

.dotIndex::before {
  content: '';
  position: absolute;
  width: 0px;
  height: 0px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  top: 50%;
  left: 50%;
  transition: 0.5s;
}

.dotIndex.active::before {
  width: 10px;
  height: 10px;
}

.dotText {
  position: absolute;
  font-size: 1.2rem;
  font-weight: 500;
  transition: 0.5s;
  opacity: 1;
  color: rgba(15, 14, 15, 0.788);
  top: 50%;
  transform: translate(0, -50%);
  left: 22px;
  opacity: 0;
}

.dotIndex.active .dotText {
  opacity: 1;
  transition-delay: 0.3s;
}

.dotIndex.active:hover .dotText {
  opacity: 1;
  transition-delay: 0.3s;
}

.dotIndex:hover .dotText {
  opacity: 0.5;
  transition: 0.25s;
}


.hipervinculoaqua {
  font-family: 'Quicksand';
  font-weight: 700;
  color: #5BC5AB;
}

.hipervinculoaqua:hover {
  font-family: 'Quicksand';
  font-weight: 700;
  color: #5BC5AB;
  text-decoration: underline;
}
input[type=checkbox] {
  display: none;
}

.container img {
  margin: auto;
  transition: transform 0.25s ease;
  cursor: zoom-in;
}

input[type=checkbox]:checked ~ label > img {
  transform: scale(2);
  cursor: zoom-out;
}