* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 

:root { 
  scroll-behavior: smooth; 
} 

body { 
  font-family: 'Open Sans', sans-serif; 
  background-color: #f0f0f0; 
  color: #333; 
} 

.contenedor { 
  width: 90%; 
  max-width: 1200px; 
  overflow: hidden; 
  margin: 0 auto; 
  padding: 60px 0; 
} 

header { 
  height: 100vh; 
  background-image: linear-gradient(to top, rgba(161, 140, 209, 0.40) 0%, rgba(251, 194, 235, 0.40) 100%), url('../imagen/Universidad.png'); 
  background-size: cover; 
  background-position: center; 
  background-attachment: fixed; 
  background-repeat: no-repeat; 
} 

.head { 
  text-align: center; 
  padding: 0; 
  height: 100%; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  flex-direction: column; 
  color: #000; 
} 

.menu { 
  position: fixed; 
  z-index: 10;
  top: 30px; 
  right: 30px; 
  background: #f0f0f0; 
  width: 40px; 
  height: 40px; 
  border-radius: 10px; 
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); 
  cursor: pointer; 
} 

.menu-navegacion { 
  position: fixed; 
  top: 0; 
  right: 0; 
  width: 30vw; 
  height: 100%; 
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 
  display: flex; 
  flex-direction: column; 
  justify-content: space-evenly; 
  align-items: center; 
  transform: translate(110%); 
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); 
  font-size: 25px;
} 

.spread { 
  transform: translate(0); 
} 

.menu-navegacion a { 
  color: #fff; 
  text-decoration: none; 
} 

.titulo { 
  font-size: 60px; 
  margin-bottom: 15px; 
} 

.copy { 
  font-size: 25px; 
  font-weight: 500; 
} 

/* Nuestro servicio */ 
.subtitulo { 
  text-align: center; 
  font-weight: 300; 
  color: #db2d20; 
  font-size: 40px; 
  margin-bottom: 40px; 
} 

.contenedor-servicio { 
  display: flex; 
  justify-content: space-evenly; 
  align-items: center; 
  flex-wrap: wrap; 
} 

.contenedor-servicio img { 
  padding: 20px; 
  width: 40%; 
  border-radius: 10%; 
} 

.checklist-servicio { 
  width: 45%; 
} 

.service { 
  margin-bottom: 20px; 
} 

.n-service { 
  margin-bottom: 7px; 
  color: #db2d20; 
} 

.number { 
  display: inline-block; 
  background-image: linear-gradient(to top, #db2d20 0%, #fbc2eb 100%); 
  width: 30px; 
  height: 30px; 
  color: #fff; 
  text-align: center; 
  border-radius: 50%; 
  font-weight: 700; 
  line-height: 30px; 
  margin-right: 10px; 
} 

.gallery { 
  background: #f2f2f2; 
} 

.contenedor-galeria { 
  display: flex; 
  justify-content: space-evenly; 
  flex-wrap: wrap; 
} 

.img-galeria { 
  object-fit: cover; 
  width: 30%; 
  display: block; 
  margin-bottom: 15px; 
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); 
  cursor: pointer; 
} 

/* --- CORRECCIÓN EN TU ARCHIVO CSS --- */

.imagen-light { 
  position: fixed; 
  background: rgba(0, 0, 0, 0.6); 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  width: 100%; 
  height: 100%; 
  top: 0; 
  left: 0; 
  transition: transform 0.2s ease-in-out; 
  transform: translate(100%); 
  z-index: 10000; /* Asegura que el fondo oscuro tape toda la página */
} 

.agregar-imagen { 
  object-fit: contain; /* Cambiado de 'cover' a 'contain' para que la captura se vea completa sin recortarse */
  width: 60%; 
  max-height: 80vh;    /* Evita que la imagen se salga verticalmente de la pantalla */
  border-radius: 10px; 
  transition: transform 0.3s ease-in-out; /* Corrección en los segundos (cambiada la coma por punto) */
  transform: scale(0); /* CORREGIDO: De 'translate: scale(0)' a 'transform: scale(0)' */
} 

/* Esta clase se añade por JS al hacer click */
.showImagen { 
  transform: scale(1) !important; /* CORREGIDO: Fuerza a la imagen a tomar su tamaño real */
} 

/* Esta clase muestra el contenedor oscuro */
.show { 
  transform: translate(0) !important; 
}


.close { 
  position: absolute; 
  top: 15px; 
  right: 15px; 
  width: 40px; 
  cursor: pointer; 
  border-radius: 50%; 
  background: #fff; 
} 
/* --- SECCIÓN EXPERIENCIA (BASE CORREGIDA) --- */
.experts { 
  display: flex; 
  justify-content: space-evenly; 
  align-items: flex-start; /* Alinea los bloques desde arriba uniformemente */
  flex-wrap: wrap; 
  gap: 20px;
} 

.cont-experiencia { 
  width: 30%; 
  text-align: justify; 
} 

.cont-experiencia h3 { 
  color: #db2d20; 
  margin-bottom: 15px; 
  text-align: center; 
  font-size: 22px; /* Agrandado para mejor jerarquía */
} 

/* Estilo del párrafo descriptivo en computadoras */
.cont-experiencia p {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

.n-experiencia { 
  display: inline-block; 
  margin-bottom: 20px; 
  width: 100%; 
  font-weight: 400; 
} 

.footer { 
  background: #db2d20; 
  padding-bottom: 0.1px; 
} 

.footer-content { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  flex-wrap: wrap; 
  padding-top: 60px; 
  padding-bottom: 40px; 
} 

.contact-us { 
  color: #fff; 
  font-size: 20px; 
  display: flex; 
  gap: 30px; 
} 

.contact-us .about-us { 
  width: 60%; 
} 

.contact-us .social-media { 
  width: 40%; 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: flex-start; 
  gap: 15px; 
} 

.contact-us .social-media .brand { 
  font-size: 20px; 
  color: #fff; 
  font-weight: 600; 
} 

.contact-us .social-media a { 
  display: inline-block; 
  background-color: #fff; 
  color: #db2d20; 
  text-decoration: none; 
  padding: 12px 24px; 
  font-weight: bold; 
  font-size: 16px; 
  border-radius: 25px; 
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); 
  transition: all 0.3s ease; 
} 

.contact-us .social-media a:hover { 
  background-color: #f0f0f0; 
  transform: translateY(-2px); 
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25); 
} 

/* --- DISEÑO ADAPTABLE (800PX O MENOS) --- */ 
@media screen and (max-width: 800px) { 
  /* Esto va dentro de tu @media screen and (max-width: 800px) */
   header {
    height: 60vh;                 /* Reduce el alto de la cabecera */
    min-height: 400px;            /* Evita que se aplaste el texto */
    background-attachment: scroll; /* ¡CLAVE! Desactiva el modo fijo que estira la foto */
    background-position: top center; /* Ajusta la foto para que se vea la parte superior */
    background-size: cover;       /* Adapta la imagen al ancho real del contenedor */
  }

  .titulo { 
    font-size: 40px; 
    text-align: center; 
  } 

  .menu-navegacion { 
    width: 50vw; 
  } 

  .contenedor-servicio img { 
    width: 80%; 
    margin-bottom: 40px; 
    padding: 0; 
  } 

  .checklist-servicio { 
    width: 80%; 
  } 

  .service { 
    margin-bottom: 30px; 
    padding: 0 15px; 
  } 

  .contenedor-galeria { 
    justify-content: center; 
    gap: 15px; 
  } 

  .img-galeria { 
    width: calc(50% - 10px); 
    height: 200px; 
  } 

  .agregar-imagen { 
    width: 80%; 
  } 

  /* CORRECCIÓN ADAPTABLE EXPERIENCIA (TABLETS) */
  .experts { 
    flex-direction: column; 
    align-items: center;
    gap: 35px; 
  } 

  .cont-experiencia {
    width: 85%; /* Se ensancha para dar espacio a la lectura */
  }

  .contact-us { 
    flex-direction: column; 
    text-align: center; 
    gap: 35px; 
  } 

  .contact-us .about-us { 
    width: 100%; 
  } 

  .contact-us .social-media { 
    width: 100%; 
    align-items: center; 
  } 
} 

/* Teléfonos medianos/pequeños (480px) */
@media screen and (max-width: 480px) { 
  .menu-navegacion { 
    width: 75vw; 
  } 
  .img-galeria { 
    width: 100%; 
    height: 220px; 
  } 
  .contenedor-servicio img { 
    width: 90%; 
  } 
} 

/* --- DISEÑO ADAPTABLE PARA CELULARES (500PX O MENOS CORREGIDO) --- */ 
@media screen and (max-width: 500px) { 
 header {
    height: auto; /* Permite que la altura se adapte orgánicamente al contenido */
    min-height: 350px; 
    padding: 80px 0; /* Agrega un colchón de espacio arriba y abajo del texto */
    background-attachment: scroll; /* Mantiene la optimización de rendimiento */
  }
  .contenedor { 
    padding: 40px 0; 
    width: 92%; 
  } 

  .titulo { 
    font-size: 32px; 
    line-height: 1.2; 
  } 

  .copy { 
    font-size: 16px; 
  } 

  .menu-navegacion { 
    width: 75vw; 
  } 

  .subtitulo { 
    font-size: 30px; 
    margin-bottom: 25px; 
  } 

  .contenedor-servicio img { 
    width: 95%; 
    border-radius: 8px; 
  } 

  .service { 
    margin-bottom: 25px; 
    padding: 0 10px; 
  } 

  .service p { 
    font-size: 15px; 
    line-height: 1.5; 
  } 

  .contenedor-galeria { 
    gap: 15px; 
  } 

  .img-galeria { 
    width: 100%; 
    height: 220px; 
  } 

  .agregar-imagen { 
    width: 90%; 
  } 

  .close { 
    width: 35px; 
    top: 10px; 
    right: 10px; 
  } 

  /* SOLUCIÓN AL TEXTO PEQUEÑO EN NUESTRA EXPERIENCIA (CELULARES) */
  .cont-experiencia {
    width: 100%; /* Toma todo el ancho del celular eliminando el 30% aplastado */
    padding: 0 10px;
  }

  .cont-experiencia h3 {
    font-size: 22px; /* Mantiene el título grande y claro */
  }

  .cont-experiencia p {
    font-size: 17px !important; /* Fuerza al texto a mantener un tamaño grande y legible */
    line-height: 1.6;
  }

  .footer-content { 
    padding-top: 40px; 
    padding-bottom: 30px; 
  } 

  .contact-us { 
    font-size: 16px; 
    gap: 25px; 
  } 

  .contact-us .social-media .brand { 
    font-size: 18px; 
  } 
}