body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  /* Evitar la barra de desplazamiento horizontal */
}



footer {
  background-color: black;
}

.btn-primary{
  width: 100px;
}
button{
  text-align: center;
}
a{
  color:white;
}

.foto {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  margin: 10px;
}

/*---------*/



ul > li {
  color:blue;
}
.pe1 {
  margin-left: 5%;
  margin-top: 5%;
  margin-right: 5%;
  font-size: 33px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 500;
  color: black;
  max-width: 800px;
  text-align: justify;

  @media (max-width: 768px) {
    font-size: 20px;
  }
}
.pe1_1 {
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 5%;
  font-size: 33px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 500;
  color: white;
  max-width: 800px;
  text-align: justify;

  @media (max-width: 768px) {
    font-size: 20px;
  }
}
#img_zyro {
  display: flex;
  justify-content: center;
  align-items: center;
}


.seccion {
  height: 110vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
}
.seccion2 {
  height: 150vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media(max-width: 767px){
  .seccion2.seccionEquipo{
    height: 260vh;

  }
}


.seccion3 {
  height: 300vh;
  display: flex;
  flex-direction: column;
}
.ache1_1 {

  font-size: 50px;
  color: white;
  font-family: "Roboto Condensed", serif;
  font-optical-sizing: auto;
  font-weight: 700;

  }

.negrita{
  color:white;
}

.ache1_2 {
  font-size: 50px;
  color: white;
  font-family: "Roboto Condensed", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  max-width: 400px;

  @media (max-width: 768px) {
    font-size: 50px;
  }
}
.ache1 {
  font-size: 50px;
  color: rgb(0, 0, 0);
  font-family: "Roboto Condensed", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  max-width: 400px;

  @media (max-width: 768px) {
    font-size: 50px;
  }
}

.modal-image {
  width: 100%;
  max-width: 500px;
  height: auto;
  margin-bottom: 15px;
}

.modal-header {
  background-color: white;
}

.modal-body {
  color: black;
  background-color: white;
}


/*---------*/

.foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#titulo{
  font-family: "Plus Jakarta Sans", sans-serif;
  margin-top: 80px;
  margin-bottom: 20px;
  @media (max-width: 768px) {
    font-size: 36px;
  }
}
#container{
  display: flex;
  flex-wrap: wrap;
}
#container > div {
  background-color: springgreen;
  font-size: 20px;
  margin: 20px;
  padding: 20px;
  width: 200px;
  height: 200px;
}
#one{
  background-image: url(noticia1.png);
  background-size: cover;
}
#two{
  background-image: url(noticia2.png);
  background-size: cover;
}
#three{
  background-image: url(noticia3.png);
  background-size: cover;
}
#four{
  background-image: url(noticia4.png);
  background-size: cover;
}
#five{
  background-image: url(noticia5.png);
  background-size: cover;
}
#six{
  background-image: url(noticia6.png);
  background-size: cover;
}
#seven{
  background-image: url(noticia7.png);
  background-size: cover;
}
#eight{
  background-image: url(noticia8.png);
  background-size: cover;
}
#nine{
  background-image: url(noticia9.png);
  background-size: cover;
}
#ten{
  background-image: url(noticia10.png);
  background-size: cover;
}
#eleven{
  background-image: url(noticia11.png);
  background-size: cover;
}
#twelve{
  background-image: url(noticia12.png);
  background-size: cover;
}




.fs-5 {
  color: black;
  font-size: 40px;
}

.nav-link {
  color: black;
  font-family: "Plus Jakarta Sans", sans-serif;
}

.pe {
  color: white;
}

.slider--inner {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

#avanzando {
  background-color: black;
}

#quienes-somos {
  background-color: white;
}

#vision {
  background-color: #131347;
}

#mision {
  background-color: black;
}

#miembros {
  background: white;
}

#noticias {
  background-color: #131347;
  justify-content: center;
}



#proyectos {
  background-color: black;
}

#donaciones {
  background: #131347;
  /* Fondo de color degradado */
}


.bg-body-tertiary {
  background-color: white;
}

@keyframes cambioColor {
  0% {
    background-position: 0% 0%;
  }

  100% {
    background-position: 100% 100%;
  }
}
.col40{
  align-items: center;
}
.col4{
  margin-top: 35px;
}
.bajar{
  margin-top: 25px;
}
.foto {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  margin: 10px;
}
.ache20{
  font-size: 20px;
  color: white;
}

.foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ventana {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
}


.contenido {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}

.navbar-nav{
  margin-top: 40px;
  margin-left: 30px;
  margin-right: 0px;
  width: 350px;
}
.nav-item{
  margin-right: 60px;
  max-width: 200px;
}

/*---------------*/



@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap');
.play-regular {
  font-family: "Play", serif;
  font-weight: 400;
  font-style: normal;
}

.play-bold {
  font-family: "Play", serif;
  font-weight: 700;
  font-style: normal;
}


.roboto-condensed {
  font-family: "Roboto Condensed", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}
.textoCompleto{
  font-family: "Play", serif;
  font-weight: 700;
  font-style: normal;
}

#titulo{
  font-family: "Roboto Condensed", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  max-width: 400px;
}

* {
  box-sizing: border-box;
}



/* Our Team
-------------------------------------------------------*/

.our-team .team-row {
  margin-left: -40px;
  margin-right: -40px;
}

.our-team .team-wrap {
  padding: 0 40px;
  
  
}

@media(max-width: 576px){
  .team-img img {
 
    width: 80% !important;
    height: 200px;
    border-radius: 6px;
  }

  .overlay {
   
    width: 84% !important;
    left: 8% !important;


  }

  .team-details {
    
    top: 22% !important;
    
  }

  .team-img:hover {
    transform: translateY(-8px); /* Efecto de elevación */
    box-shadow: none !important;
  }

  
}




@media (min-width: 768px) and (max-width: 1199px) {
  .team-img img {
 
    height: 300px !important;
    width: auto !important;
    border-radius: 6px;
  }

  .img-left{
    object-fit: contain !important;  }

    
    
    .img-left {
      position: relative;
      left: -150px;  /* Mueve la imagen 50px a la izquierda (ajusta este valor según necesites) */
      top: 0px;     /* Si también quieres moverla verticalmente, ajusta este valor */
    }

    .team-details{
      font-size: 11px ;
      top:39% !important;
    }
}

@media (min-width: 768px) and (max-width: 999px) {
  .team-details{
    font-size: 11px ;
    top:27% !important;
  }
}



@media(max-width: 495px){
  .team-details{
    font-size: 15px ;
  }
}


.our-team .container-fluid {
  padding: 0 50px;
  
}

.team-img img {
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  overflow: hidden;
  width: 100%;
  height: 400px;
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px !important;
  transition: transform 0.3s ease; /* Transición para zoom */


}

.team-img:hover img {
  transform: scale(1.05); /* Zoom ligero al pasar el mouse */
}


.team-img{
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transiciones suaves */

}

.team-img:hover {
  transform: translateY(-8px); /* Efecto de elevación */
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2), 
              0 8px 8px rgba(0, 0, 0, 0.15); /* Sombra más fuerte en hover */
}

.team-member,
.team-img {
  position: relative;
  overflow: hidden;
}

.team-title {
  margin: 30px 0 15px; /* Aumento el espacio inferior */
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700; /* Hago la fuente más gruesa */
  color: #333; /* Color más oscuro */
  font-size: 24px; /* Un tamaño de fuente mayor */
  text-align: center; /* Centrado */
}
@keyframes highlightBreathing {
  0% {
    background-color: yellow; /* Fondo amarillo inicial */
    transform: scale(1); /* Sin expansión */
  }
  50% {
    background-color: #f9e14e; /* Un amarillo más suave para el punto máximo */
    transform: scale(1.05); /* Ligera expansión */
  }
  100% {
    background-color: yellow; /* Vuelve al fondo amarillo */
    transform: scale(1); /* Vuelve al tamaño normal */
  }
}

.highlight {
  padding: 0 4px; /* Espacio a los lados */
  border-radius: 2px; /* Bordes redondeados */
  font-weight: bold; /* Resaltado en negrita */
  color: black; /* Color del texto */
  animation: highlightBreathing 3s ease-in-out infinite; /* Animación de respiración */
}

.donate-btn {
  display: inline-block; /* Hace que el enlace se comporte como un bloque en línea */
  padding: 12px 30px; /* Espaciado alrededor del texto */
  background-color: rgba(0, 255, 255, 0.8); /* Color de fondo anaranjado */
  color: white; /* Color del texto */
  text-decoration: none; /* Elimina el subrayado del enlace */
  font-size: 16px; /* Tamaño de fuente */
  font-weight: bold; /* Negrita para el texto */
  border-radius: 25px; /* Bordes redondeados */
  text-align: center; /* Alinea el texto al centro */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave para dar profundidad */
  transition: all 0.3s ease; /* Transición suave para efectos de hover */
}

.donate-btn:hover {
  background-color: rgba(86, 255, 255, 0.8); /* Color de fondo ligeramente más claro cuando se pasa el ratón */
  transform: translateY(-4px); /* Eleva el botón ligeramente */
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada al pasar el ratón */
}

.donate-btn:active {
  transform: translateY(2px); /* Efecto al hacer clic */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra más suave cuando se hace clic */
}






.overlay {
  background-color: rgba(20,20,20,.7);
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.team-details {
  opacity: 0;
  position: absolute;
  top: 23%;
  left: 0;
  padding: 5%;
  overflow: hidden;
  width: 100%;
  z-index: 2;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.team-details p {
  color: #fff;
}

.team-img:hover .team-details {
  opacity: 1;
  margin-top: -80px;
}

.team-img:hover .overlay {
  opacity: 1;
}

.socials a {
  display: inline-block;
  width: 37px;
  height: 37px;
  background-color: transparent;
}

.socials i {
  line-height: 37px;
  color: #616161;
  font-size: 14px;
  width: 37px;
  height: 37px;
  border-radius: 50%;
  text-align: center;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.team-details .socials i {
	color: #fff;
}

.socials a:hover i {
  color: #fff;
  background-color: #355c7d;
}



@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);

:root {
  --timing: 265ms;
  --iconColor: rgba(0, 255, 255, 0.8);
  --accent: rgba(52, 97, 97, 0.8);
  --bluefade: #0043E0;
  --gradient: #00B5F5;
}




.social-icons {
  padding: 0;
  list-style: none;
  margin: 1em;
}

.social-icons li {
  display: inline-block;
  margin: 0.15em;
  position: relative;
  font-size: 1.2em;
}

.social-icons i {
  color: #fff;
  position: absolute;
  top: 21px;
  left: 21px;
  transition: all var(--timing) ease-out;
}

.social-icons a {
  display: inline-block;
}

.social-icons a::before {
  content: " ";
  width: 60px;
  height: 60px;
  border-radius: 100%;
  display: block;
  background: linear-gradient(45deg, var(--iconColor), var(--accent));
  transition: all var(--timing) ease-out;
}

.social-icons a:hover::before {
  transform: scale(0);
  transition: all var(--timing) ease-in;
}

.social-icons a:hover i {
  transform: scale(2.2);
  color: var(--iconColor);
  background: -webkit-linear-gradient(45deg, var(--iconColor), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all var(--timing) ease-in;
}



.navbar {
  position: fixed; 
  top: 0;
  width: 100%;
  z-index: 1000;
}

.navbar-nav .nav-item .nav-link {
  position: relative;
  padding-right: 30px; 
}

.navbar-nav .nav-item .nav-link:after {
  content: ''; 
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 8px;
  height: 8px; 
  background-color: transparent; 
  border-radius: 50%; 
  transition: background-color 0.3s, width 0.3s, height 0.3s; 
}

.navbar-nav .nav-item .nav-link.active:after {
  background-color: yellow; 
  width: 12px;
  height: 12px; 
}

.navbar-nav .nav-item .nav-link:hover:after {
  background-color: rgb(0, 0, 0); 
  width: 12px;
  height: 12px;
}

.navbar-nav .nav-item .nav-link:hover,
.navbar-nav .nav-item .nav-link.active {
  color: #002e6e; 
}



.circuit-img {
  position: relative; 
  animation: breathe 8s ease-in-out infinite, slightDistortion 5s ease-in-out infinite;
  border-radius: 15px; 
}

@keyframes breathe {
  0%, 100% {
    transform: scale(1); 
  }
  50% {
    transform: scale(1.05);
  }
}

/* Animación sutil de distorsión */
@keyframes slightDistortion {
  0% {
    transform: skewX(0deg) skewY(0deg); 
  }
  25% {
    transform: skewX(2deg) skewY(-2deg); 
  }
  50% {
    transform: skewX(-2deg) skewY(2deg); 
  }
  75% {
    transform: skewX(1deg) skewY(-1deg); 
  }
  100% {
    transform: skewX(0deg) skewY(0deg); 
  }
}


.neuro-img {
  position: relative;
  animation: breathe 8s ease-in-out infinite, slightDistortion 5s ease-in-out infinite;
  border-radius: 15px; 
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.8); 
  transition: box-shadow 0.3s ease;
  margin-top: 20px;
}

@keyframes breathe {
  0%, 100% {
    transform: scale(1); 
  }
  50% {
    transform: scale(1.05); 
  }
}

@keyframes slightDistortion {
  0% {
    transform: skewX(0deg) skewY(0deg); 
  }
  25% {
    transform: skewX(1deg) skewY(-1deg); 
  }
  50% {
    transform: skewX(-1deg) skewY(1deg); 
  }
  75% {
    transform: skewX(0.5deg) skewY(-0.5deg); 
  }
  100% {
    transform: skewX(0deg) skewY(0deg); 
  }
}

.neuro-img:hover {
  box-shadow: 0 0 50px rgba(0, 255, 255, 1);
}


.nombreLibro{
  color: #000000;
  font-size: 30px;
  font-weight: bold;
}