@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');  /* NO TOCAR LETRA RALEWAY */
*{
        font-family: 'Roboto', 'Helvetica', sans-serif; 
        
}
nav {
    max-width: 900px;
    margin: auto;
    background-color:white;
    font-size: 17px;
    margin-top: 50px;

    font-weight: bold; 
}
h1{
     font-family: 'Raleway', sans-serif;
}
.menuhorizontal {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 80px; 
    margin: 0;
    padding: 0;
    white-space: nowrap;  
}
.header-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding-left: 120px;
    justify-content: center;
    align-items: center;
    padding-left: 120px;
    background-color: white;
   height: 130px;
    position: fixed;
    top: 0px;
    width: 90%;
    z-index: 9999; 
    /* NO TOCAAAAR ES LA FRANJA DEL MENUUUUUU */
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 3px 5px -2px rgba(0, 0, 0, 0.436);
    
}
.menuhorizontal li a {
    display: block;
    padding: 12px;
    color: black;
    text-decoration: none;
}
.menuhorizontal li:hover {
    background-color: skyblue;
      border-radius: 3px;
}

.menuvertical {
    position: absolute;
    display: block;
    list-style: none;
    width: 321  px;
    margin: 0;
    padding: 0;
   background-color:skyblue;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    z-index: 1000;
    border-radius: 6px;
}
.menuhorizontal li:hover .menuvertical {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.menuvertical li a {
    display: block;
    padding: 14px 18px; 
    color: black;
    text-decoration: none;
}

.menuvertical li:hover {
    background-color:dodgerblue; 
}

.logo {
    height: 90px;
    position: absolute;
    left: 20px;
    top: 22px; 
}
.carrusel {
    width: 100%; 
    max-width: 1400px; 
    margin: 50px auto 0;
    overflow: hidden;
  position: relative;
}
.carrusel ul {
    display: flex;
    padding: 0;
    width: 600%; /* 6 imágenes => 6 * 100% */
    animation: slide 30s infinite alternate ease-in-out;
}
.carrusel li {
    list-style: none;
    width: 100%; 
}
.carrusel img {
    width: 100%;
    
}

 /* NO TOCAAAAR ES EL EFECTO DEL CARRUSEL DE LAS IMAGENEEEEEEEEEEEEEEESSSS */
@keyframes slide {
    0%   { margin-left: 0%; }
    13%  { margin-left: 0%; }

    16%  { margin-left: -100%; }
    29%  { margin-left: -100%; }

    32%  { margin-left: -200%; }
    45%  { margin-left: -200%; }

    48%  { margin-left: -300%; }
    61%  { margin-left: -300%; }

    64%  { margin-left: -400%; }
    77%  { margin-left: -400%; }

    80%  { margin-left: -500%; }
    100% { margin-left: -500%; }
}
.textocarrusel {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 3rem;
    font-weight: 700;
    text-align: center;
    width: 100%;
    z-index: 1;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
    opacity: 0;
    animation: fadeSlideShadow 1s ease forwards;
    animation-delay: 1s;
}
 /* NO TOCAAAAR ES EL EFECTO LAS LETRAS DE LA PAGINAAAAA */
@keyframes fadeSlideShadow {
    0% {
        opacity: 0;
        transform: translate(-50%, -40%);
        text-shadow: 0 0 0 rgba(0,0,0,0);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -52%);
        text-shadow: 4px 4px 12px rgba(0,0,0,0.9);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%);
        text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
    }
}
.contenedor {
    position: relative;
    max-width: 400px;
    margin: 0 auto;
     margin-bottom: 100px;
}
.carruseldoc2 {
    display: flex;
    aspect-ratio: 4 / 3;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    border-radius: 10px;
    width: 100%;
    max-height: 200px;
    box-shadow: 0 4px 8px #333;
    scrollbar-width: none;
}

.carruseldoc2 img {
    flex: 0 0 100%;
    scroll-snap-align: start;
    object-fit: cover;
    width: 100%;
    height: 100%;
    margin: 20px;
}
.slidernav {
    display: flex;
    gap: 0.5rem;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}
.slidernav a {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: white;
    display: block;
    box-shadow: 0 0 3px #000;
    opacity: 0.8;
    transition: transform 0.3s ease;
}
.slidernav a:hover {
    transform: scale(1.3);
    background-color: black;
}
.grndocentes{
    text-align: center;
}
.decoracion-docentes {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
}

.decoracion-docentes div {
    height: 4px;
    width: 200px;
    border-radius: 2px;
}

.linea1 {
    background-color: skyblue;
}

.linea2 {
    background-color: black;
}
.infoabajo {
    background-color: skyblue;
    padding: 10px;
    border-radius: 5px;
    text-align: left;
    margin-top: 100px; 
}
.infoabajo img{
    border-radius: 30px;
      height: 6%;
    width: 60px;
    margin: 10px;
}
.decoracionabajo {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
}
.linea1 {
    height: 2px;
    width: 500px;
    border-radius: 2px;
        background-color:black ;
    
}
.decoracionabajo2 {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
}
.linea2 {
    height: 3px;
    width: 600px;
    border-radius: 2px;
        background-color:black ;
}
.menuvertical2 {
    position: absolute;
    display: block;
    list-style: none;
    width: 400px;
    margin: 0;
    padding: 0;
   background-color:skyblue;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    z-index: 1000;
    border-radius: 6px;
    right: -400px;
    margin-top: -46px;
    
    
}
.menuvertical li:hover .menuvertical2 {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.menuvertical2 li a {
    display: block;
    padding: 14px 18px; 
    color: black;
    text-decoration: none;
}
.menuvertical2 li:hover {
    background-color:dodgerblue; 
}
.quienes {
    font-family: 'Raleway', sans-serif;
    margin-top: 10px;
    text-align: center;
    margin: 20px;

}
.quienes h1 {
    color: black;
    animation: fadeSlideShadowQuienes 4s ease forwards;
    animation-delay: 0s;
    position: relative;
}
 /* NO MODIFICAR AQUI PORQUE SE DAÑA LA OTRA ANIMACION DE LS LETRAS DEL INDEX :C*/
@keyframes fadeSlideShadowQuienes {
    0% {
        opacity: 0;
        transform: translateY(-10%);
    }
    50% {
        opacity: 1;
        transform: translateY(-15%); 
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.paracentrar{
text-align: center;
font-family: 'Raleway', sans-serif;
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 10px;

}

.alineado p {
margin: 50px;
  line-height: 50px;
  font-family: 'Raleway', sans-serif;
}
.alineado {
margin: 50px;
  line-height: 50px;
  font-family: 'Raleway', sans-serif;
}
.contenedor2 p {

text-align: justify;
margin: 20px;
font-size: 16px;
}
.imagen1{
display: flex;
margin: 80px;
}
.imagen2{
display: flex;
margin: 80px;
}
.imagen3{
display: flex;
margin: 80px;
border-radius: 5px;
}
.imagen4{
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 20px;
  align-items: center;
}
.imagen5{
display: flex;
margin: 80px;
}
.contenedor4 {
  display: flex;
 
}
.texto p {
 
  text-align: justify;
  margin-bottom: 15px;
  line-height: 1.6;
}
.imagen4{
display: flex;
flex-direction: column  ;
margin: 80px;
}
.lineabox {
  display: flex;
  gap: 10px;
  margin-top: 30px;
  margin-bottom: 20px;
justify-content: center;
}
.linea {
  height: 3px;
  width: 1000px;
  border-radius: 2px;
  background-color: black;
}
.lineabox2 {
  display: flex;
  gap: 10px;
  margin-top: 30px;
  margin-bottom: 50px;
justify-content: center;

}
.linea4 {
  height: 3px;
  width: 500px;
  border-radius: 2px;
  background-color: skyblue;
}
.contenidoprincipal {
  margin-top: 130px;
}
.cambiarclor{
color: gray;
text-decoration: none;
}
.paracentrar  div {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0;
}
.franja2{
    background-color:skyblue;
    margin: 20px;
    animation: fadeSlideShadowQuienes 3s ease forwards;
    animation-delay: 0s;
    position: relative; 
    border-radius: 6px;
}
.paracentrar2 {
    text-align: center;
        text-align: center;  
}
.imgc{
display: flex;
margin: 20px;
margin-top: 200px;
}
.aparecer{
        text-align: center;
    padding: 125px;
    }
    .comite{
        text-align: center;
            animation: fadeSlideShadowQuienes 3s ease forwards;
    animation-delay: 0s;
    }
    .imagen5 {
        display: flex;
        padding: 10px;
    margin-top: 0px;
}
.imagen5 img{
    margin: 20px;
    width: 700px;
    border-radius: 5px;
}
.imagen5 p{
font-size: 15px;
padding: 10px;
line-height: 50px;
}
.decoracioncomite{ 
    display: flex; 
    justify-content: center ;
    align-items: center; 
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
}
.contenedor3 {
  display: flex;
  gap: 20px; 
  max-width: 800px; 
margin: 30px;
line-height: 30px;
}
.carruselContacto {
  width: 300px; 
  overflow: hidden;
}
.carruselContacto ul {
  display: flex;
  padding: 0;
  margin: 0;
  width: 900px; 
  animation: slideNuevo 15s infinite;
  list-style: none;
}
.carruselContacto img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  display: block;
}

.textoDerecha {
  flex: 1; 
  font-size: 16px;
  color: #333;
}
@keyframes slideNuevo {  
  0% { margin-left: 0; }
  20% { margin-left: 0; }

  25% { margin-left: -300px; }
  45% { margin-left: -300px; }

  50% { margin-left: -600px; }
  70% { margin-left: -600px; }

  75%, 100% { margin-left: 0; }
}
.decoracioncontacto{
background-color: skyblue;
color: white;
padding: 10px;
margin: 18px;
border-radius: 5px;
}
.paraelmapa{
text-align: center;
background-color: black;
margin: 50px;
padding: 20px;
color: white;
border-radius: 10px;
}
.inter p {
    line-height: 15px;
}
.paraseparar{
    padding: 10px;
}
.parabordar{
border-radius: 8px;
}
.parrafosmat{
margin-left: 60px;
    line-height: 40px;
    margin-right: 40px;
}
.decobotones{
text-align: center;

}
.decobotones input{
    background-color: skyblue;
    
      border-radius: 6px;
       font-size: 16px;
       padding: 18px
}
.decobotones :hover{
    background-color:cornflowerblue;
}
a {
  text-decoration: none;
}
i{
    color: #333;
}
.textoDerecha2 {
  flex: 1;
  font-size: 16px;
  color: #333;
  display: flex;
  flex-direction: column;
line-height: 40px;
text-align: justify;
}
.contenedor4 {
  width: 80%;
  margin: 10px;
  display: flex;
  gap: 20px;
  align-items: stretch;
}
.carruselEd {
  overflow: hidden;
  width: 500px; 
  height: 400px;
  margin: 20px;
}

.carruselEd ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
  animation: slide4 15s infinite;
  width: max-content;
}
.carruselEd img {
  width: 600px;
  height: 400px;
  object-fit: cover;
  display: block;
  border-radius: 5px;
}

@keyframes slide4 {
  0%, 20% {
    margin-left: 0;
  }
  30%, 50% {
    margin-left: -600px;
  }
  60%, 80% {
    margin-left: -1200px;
  }
  90%, 100% {
    margin-left: 0;
  }
}
.Nuevacentrar{
margin:20px;
align-items: center;
}
.contenedor5 {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.carrusel5 {
  overflow: hidden;
  width: 600px;
  height: 400px;
  position: relative;
}

.carrusel5 ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
  width: 9999px;
  animation: slide5 15s infinite;
}

.carrusel5 li {
  flex: none;
}

.carrusel5 img {
  width: 600px;
  height: 400px;
  object-fit: cover;
  display: block;
  border-radius: 5px;
}
@keyframes slide5 {
  0%, 20% {
    transform: translateX(0);
  }
  30%, 50% {
    transform: translateX(-600px);
  }
  60%, 80% {
    transform: translateX(-1200px);
  }
  90%, 100% {
    transform: translateX(0);
  }
}
.cntimg{
  display:block;
  margin:auto; 
}
.cntimg2{
  display:block;
  margin:auto; 
   width:500px;
height:500px;
}

.contenedor2 p {
  text-align: justify;
  margin: 20px;
  font-size: 16px;
}

.contenedor2 p strong {
  font-weight: bold;
  display: inline; /* Esto evita que el texto se baje a otra línea */
}