body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      overflow-x: hidden;
      background-color: #fff;
    }

    /* ======== ENCABEZADO ======== */
    /* ==== ESTILOS GENERALES ==== */
header {
  background-color: #ffffff;
  color: rgb(12, 107, 61);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  position: relative;
}

header h1 {
  margin: 0;
  font-size: 1em;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

nav ul li {
  position: relative;
}

nav ul li a {
  color: rgb(0, 112, 30);
  text-decoration: none;
  padding: 10px 15px;
  display: block;
}

nav ul li a:hover {
  border-bottom: solid rgb(31, 78, 20);
}

/* ==== SUBMENÚ ==== */
.submenu-items {
  display: none;
  position: absolute;
  background-color: #ffffff;
  top: 100%;
  left: 0;
  min-width: 180px;
  flex-direction: column;
  z-index: 10;
}

.submenu-items li a {
  padding: 10px;
}

.submenu:hover .submenu-items {
  display: flex;
}

/* ==== MENÚ HAMBURGUESA (MÓVIL) ==== */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.8em;
  color: white;
  cursor: pointer;
}

/* ==== RESPONSIVE ==== */
@media (max-width: 768px) {
  header{
    z-index: 9999;
  }
  nav.menu {
    position: absolute;
    top: 60px;
    left: 0;
    background-color: #c3c3c3;
    width: 100%;
    display: none;
    flex-direction: column;
    z-index: 9999;
  }

  nav.menu.active {
    display: flex;
  }

  nav ul {
    flex-direction: column;
  }

  nav ul li {
    width: 100%;
  }

  .submenu-items {
    position: static;
    display: none;
    background-color: #a3a3a3;
  }

  .submenu.open .submenu-items {
    display: flex;
  }

  .menu-toggle {
    display: block;
  }
}

/* ========= TITULO DE PRINCIPAL ========== */

.titulo-institucion {
    padding: 0px 50px;
    font-size: 50px;
    font-family: 'Dubai Medium';
    background: linear-gradient(50deg,rgb(11, 11, 11) 0%,green 35%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
}


/* ====== MISIÓN ====== */
.mision {
  /* background: linear-gradient(0deg,rgb(0, 0, 0) 0%,rgb(0, 0, 0)85%,rgb(255, 255, 255) 100%); */
  background-color: #00af63;
  color: #ffffff;
  padding: 40px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.mision .container {
  display: flex;
  align-items: center;
  gap: -20px;
  max-width: 800px;
  background: transparent;
}

.mision h2 {
  background: linear-gradient(180deg, rgb(93, 255, 171), rgb(0, 0, 0) 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 15px 25px;
  border-radius: 20px 0 0 20px;
  font-weight: bold;
  font-size: 70px;
  margin: 0;
  /* border: 2px solid #135715; */
}

.mision p {
  /* background: #009c15; */
  padding: 35px;
  color: white;
  border-radius: 0 30px 30px 0;
  text-align: justify;
  font-size: 20px;
  line-height: 1.5em;
  /* border: 2px solid #00d92f; */
  max-width: 600px;
}
.fade-out {
  opacity: 0;
  transition: opacity 0.8s ease;
}

.fade-in {
  opacity: 1;
  transition: opacity 0.8s ease;
}

/*///////////////mISION Y VISION/////////////*/
/* Tablets */
@media (max-width: 992px) {
  .titulo-institucion {
      font-size: 40px;
      padding: 0 20px;
  }

  .mision .container {
      flex-direction: column;
      text-align: center;
  }

  .mision h2 {
      font-size: 55px;
      border-radius: 20px 20px 0 0;
  }

  .mision p {
      border-radius: 0 0 20px 20px;
      padding: 20px;
      font-size: 18px;
  }
}

/* Móviles */
@media (max-width: 600px) {
  .titulo-institucion {
      font-size: 30px;
  }

  .mision h2 {
      font-size: 40px;
      padding: 10px 15px;
  }

  .mision p {
      font-size: 16px;
      padding: 15px;
  }

  .mision .container {
      max-width: 100%;
  }
}

/*/////////////////HISTORIA////////////////*/

/* ====== HISTORIA ====== */
.historia {
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* TÍTULO ANIMADO */
.titulo-historia {
  background: linear-gradient(50deg,rgb(9, 63, 10),rgb(75, 246, 164));
  padding: 12px 30px;
  font-size: 50px;
  font-family: 'Dubai Medium';
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  margin-bottom: 20px;
  transform: translateX(400%);
  opacity: 0;
  transition: all 1.3s ease;
}

/* Cuando aparece en pantalla */
.titulo-historia.show {
  transform: translateX(0);
  opacity: 1;
}

.historia .contenido {

  border-top: green solid;
  border-bottom: green solid;
  width: 80%;
  padding: 30px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.historia .texto {
  flex: 3;
  text-align: justify;
  font-size: 15px;
  line-height: 1.6em;
}

.historia .imagen {
  flex: 1;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  font-weight: bold;
}
.historia .imagen img{
  width: 100%;
  height: 100%;
  border-radius: 20px;
  mask-image: linear-gradient(270deg, black 70%, transparent);
}
@media (max-width: 992px) {
  .historia h2 {
    font-size: 38px;
  }

  .historia .contenido {
    flex-direction: column;
    text-align: center;
  }

  .historia .texto {
    font-size: 18px;
  }

  .historia .imagen {
    height: 250px;
  }
}

/* Móviles */
@media (max-width: 600px) {
  .historia {
    padding: 30px 15px;
  }

  .historia h2{
    font-size: 20px;
  }

  .historia .texto {
    font-size: 16px;
  }

  .historia .imagen {
    height: 200px;
  }
}
/* ====== PLANTEL ====== */
.plantel {
  background: #fff;
}

.titulo-plantel {
  background: linear-gradient(50deg,rgb(19, 95, 21),rgb(107, 255, 70));
  padding: 20px 40px;
  font-weight: bold;
  font-size: 50px;
  font-family: 'Dubai Medium';
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: translateX(-400%);
  opacity: 0;
  transition: all 1.3s ease;
}

/* Cuando aparece en pantalla */
.titulo-plantel.show {
  transform: translateX(0);
  opacity: 1;
}
/* --- DIRECTIVO --- */
.directivo {
  background: #f3f3f3;
  border-radius: 20px 20px 0 0;
  padding: 50px 0;
  margin: 0 70px;
  display: flex;
  align-items: flex-start;
}

.directivo .titulo {
 background: #f3f3f3;
  color: #000000;
  font-size: 30px;
  width: 180px;
  padding: 20px;
  text-align: center;
  font-weight: bold;
  border-radius: 20px;
  margin-left: 20px;
}

.directivo .miembros {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-left: 30px;
}

.docente {
  background: #c8efc9;
  border-radius: 10px;
  text-transform: uppercase;
  width: 160px;
  height: 180px;
  font-size: 10px;
  text-align: center;
  padding: 12px;
}

.docente .foto {
  width: 130px;
  height: 130px;
  background: #fff;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 10px;
}
.foto img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Hace que la foto llene toda la caja */
}

/* --- ADMINISTRATIVO --- */
.administrativo {
  background: #f3f3f3;
  padding: 30px 0;
  margin: 0 70px;
  display: flex;
  align-items: flex-start;
}

.administrativo .titulo {
  background: #f3f3f3;
  color: #1c6f00;
  font-size: 23px;
  width: 180px;
  padding: 20px;
  text-align: center;
  font-weight: bold;
  border-radius: 20px;
  margin-left: 20px;
}

.administrativo .miembros {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-left: 30px;
}

.administrativo .docente {
  background: #c8efc9;
}


/* --- DOCENTE --- */
.docentep {
  background: #f3f3f3;
  padding: 30px 0;
  margin: 0 70px;
  display: flex;
  align-items: flex-start;
}

.docentep .titulo {
  background: #f3f3f3;
  color: #00a01b;
  font-size: 23px;
  width: 180px;
  padding: 20px;
  text-align: center;
  font-weight: bold;
  border-radius: 20px;
  margin-left: 20px;
}

.docentep .miembros {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-left: 30px;
}

.docentep .docente {
  background: #c8e6c9;
}

@media (max-width: 992px) {
  .miembros {
    grid-template-columns: repeat(2, 1fr);
  }

  .docente {
    width: 100%;
  }
}

/* 🔷 Celulares (1 columna) */
@media (max-width: 600px) {
  .plantel h2 {
    font-size: 23px;
  }
  .plantel{
    margin: 0;
    padding: 0;
    justify-items: center;
  }
  .directivo{
    flex-direction: column;
    width: 355px;
    margin: 0;
    padding: 0;
  }

  .directivo .titulo{
    font-size: 20px;
    width: 300px;
    padding: 0;
    margin-top: 40px;
    margin-left: 26px;
  }

  .directivo .miembros {
    width: 300px;
    grid-template-columns: 1fr;
    margin: 27px;
    padding: 0;
  }

    .administrativo{
    flex-direction: column;
    width: 355px;
    margin: 0;
    padding: 0;
  }

  .administrativo .titulo{
    font-size: 20px;
    width: 300px;
    padding: 0;
    margin-top: 40px;
    margin-left: 26px;
  }

  .administrativo .miembros {
    width: 300px;
    grid-template-columns: 1fr;
    margin: 27px;
    padding: 0;
  }


  .docentep{
    flex-direction: column;
    width: 355px;
    margin: 0;
    padding: 0;
  }

  .docentep .titulo{
    font-size: 20px;
    width: 300px;
    padding: 0;
    margin-top: 40px;
    margin-left: 26px;
  }

  .docentep .miembros {
    width: 300px;
    grid-template-columns: 1fr;
    margin: 27px;
    padding: 0;
  }


  .docente {
    width: 100%;
  }

  .foto {
    height: 180px;
  }
}

.animar-scroll {
  opacity: 0;
  transform: translateY(80px);
  transition: all 1s ease;
}

.animar-scroll.show {
  opacity: 1;
  transform: translateY(0);
}

/* ===== ANIMACIÓN PARA CADA DOCENTE ===== */
.animar-item {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease;
}

.animar-item.show {
  opacity: 1;
  transform: translateY(0);
}
/* ====== ENCUÉNTRANOS ====== */
.ubicacion {
  background: #fff;
  padding: 50px 40px;
  justify-self: center;
}

.ubicacion h2 {
  background: linear-gradient(50deg,rgb(19, 95, 21),rgb(107, 255, 70));
  font-weight: bold;
  font-size: 50px;
  margin-bottom: 20px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ubicacion .contenido {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.mapa {
  width: 700px;
  height: 350px;
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.direccion {
  background: #ffffff;
  color: #000000;
  border-radius: 20px;
  padding: 25px;
  width: 260px;
  text-align: center;
  font-size: 14px;
}

.direccion strong {
  display: block;
  margin-bottom: 10px;
}

/* ====== RESPONSIVE ====== */
@media (max-width: 992px) {
  .ubicacion .contenido {
    flex-direction: column;
  }

  .ubicacion h2 {
    font-size: 34px;
  }

  .ubicacion .direccion {
    text-align: center;
    font-size: 18px;
  }
}

/* 🔷 Celulares (1 columna) */
@media (max-width: 600px) {
  .ubicacion {
    padding: 30px 0px;
    justify-items: center;
  }
  .contenido{
    margin: 0;
    padding: 0;
  }

  .ubicacion h2 {
    font-size: 28px;
  }
  .ubicacion .mapa{
    margin: 0;
    padding: 0;
    height: 250px;
    width: 370px;
  }

  .ubicacion .mapa iframe {
    height: 250px;
    width: 370px;
  }

  .ubicacion .direccion {
    font-size: 16px;
  }

}