* {
  color: #171222;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 0;
  list-style: none;
}


a {
  color: #FEFAEF;
  background-color: #332f32;
}

h1 {
  font-size: 32px;
  margin: 10px 0 5px 0;
  color: #222;
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  text-align: center;
}

p {
  font-size: 18px;
  margin: 0 0 20px 0;
  color: #555;
  text-align: left;
  font-style: italic;
  /* estilo sutil */
  letter-spacing: 0.5px;
  /* un poquito de aire entre letras */
}

footer p {
  padding: 2rem;
  max-width: 100%;
  text-align: center;
}

span {
  font-weight: 600;
}

header {
  position: fixed;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem;
  background-color: #476c9c;
  border-bottom: #ffffff 5px solid;
}

header img {
  width: 61px;
  height: auto;
}

header nav ul {
  text-transform: uppercase;
  list-style: none;
  gap: 2rem;
  padding: 0;
  margin: 0;
  font-weight: 100;
  background-color: #332f32;
}

main {
  display: block;
  padding: 0;

}

.datos-academicos img {
  max-height: 60px;
  width: auto;
}

.nuestro-equipo img {
  max-width: 250px;
  height: auto;
}

main div section {
  padding: 1em;
}


.banner {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: auto;
  margin-bottom: 2rem;
}

header {
  position: fixed;
  /* Hace que siempre quede arriba */
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  /* altura del header */
  background: #476c9c;
  /* violeta */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  z-index: 1000;
  /* que siempre quede arriba */
}

body {
  margin: 0;
  padding-top: 80px;
  /* 👈 espacio igual a la altura del header */
}

header img {
  height: 50px;
  /* tamaño del logo */
}

.inicio :hover {
  color: #2EBDEF;
  transition: .3s;
}

.plan :hover {
  color: #2EBDEF;
  transition: .3s;
}

.mapa :hover {
  color: #2EBDEF;
  transition: .3s;
}

.webapp :hover {
  color: #2EBDEF;
  transition: .3s;
}

.mapa-imagen {
  width: 100%;
  height: auto;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-bottom: 1rem;
  padding-top: 120px;
}


section {
  background-color: #f4f4f9;
  /* Fondo suave */
  padding: 20px;
  border-radius: 10px;
  /* Bordes redondeados */
  max-width: 400px;
  /* Ancho máximo */
  margin: 20px auto;
  /* Centrado */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* Sombrita */
}

body,
html {
  margin: 0;
  padding: 0;
}

.gif-franja-bg {
  width: 100%;
  /* Ocupa todo el ancho */
  height: 50px;
  /* ¡CLAVE! Define la altura de tu franja. Ajusta este valor. */
  background-image: url('img/tu-gif.gif');
  /* Ruta a tu GIF */
  background-size: cover;
  /* Escala el GIF para cubrir toda la franja */
  background-position: center;
  /* Centra el GIF en la franja */
  background-repeat: no-repeat;
  /* Evita que el GIF se repita si no cubre todo */
  margin-top: 0;
  /* Asegura que no haya espacio con el header */
  margin-bottom: 20px;
  /* Espacio debajo de la franja */
  /* Puedes añadir bordes o sombras si quieres */
  /* border-bottom: 1px solid #ddd; */
}

.gif-franja-contenedor¨ {
  width: 100%;
  padding: 0;
  margin: 0
}

.gif-franja {
  width: 100%;
  display: block;
  height: auto;
  max-height: 500px;
  object-fit: cover;
  object-position: center;
}

section h3 {
  font-size: 22px;
  text-align: center;
  color: #333;
  margin-bottom: 15px;
}

section ul {
  list-style: none;
  /* Saca los puntitos */
  padding: 0;
}

section li {
  margin: 10px 0;
  text-align: center;
}

section a {
  text-decoration: none;
  /* Quita subrayado */
  color: #2EBDEF;
  /* Cuando pasas el mouse Rosa */
  font-weight: bold;
  padding: 8px 15px;
  border-radius: 5px;
  transition: 0.3s;
}

section a:hover {
  background-color: #a3e0e0;
  color: white;
}

.perfil {
  width: 220px;
  height: 220px;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  margin-top: 40px;
  /* 👈 empuja la foto hacia abajo */
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
  display: block;
  margin-left: auto;
  margin-right: auto;
}

main {
  margin-top: 0px;
  /* separa el contenido del header */
  text-align: center;
}


h2 {
  text-align: center;
  font-size: 20px;
  color: #222;
  font-family: garamond;
  margin-bottom: 25px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

h2::after {
  content: "";
  /* Línea decorativa debajo */
  display: block;
  width: 80px;
  height: 3px;
  background: #2EBDEF;
  margin: 10px auto 0;
  /* Centrado debajo del título */
  border-radius: 5px;
}

.Redes {
  display: flex;
  /* o grid */
  gap: 10px;
  /* espacio entre los botones */
  justify-content: center;
  /* centra horizontalmente */
  align-items: center;
  /* centra verticalmente */
}

/* 1. Contenedor de las materias (El carrusel) */
.materias-contenedora {
  display: flex;
  /* CAMBIO CLAVE: Usa flex para la disposición en una sola fila */
  gap: 20px;
  margin-top: 20px;
  /* Permite el desplazamiento horizontal cuando el contenido se desborda */
  overflow-x: auto;
  /* Opcional: Oculta la barra de desplazamiento en algunos navegadores */
  scrollbar-width: none;
  /* Para Firefox */
  -ms-overflow-style: none;
  /* Para IE y Edge */
  /* Para que todos los 'materias' dentro se estiren a la misma altura del contenedor */
  align-items: stretch;

  /* Configuración para el desplazamiento (scroll snapping) */
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  /* Para que la barra de desplazamiento no tape el contenido */
}

/* Opcional: Ocultar barra de desplazamiento en Chrome/Safari */
.materias-contenedora::-webkit-scrollbar {
  display: none;
}

/* 2. Estilo de cada materia (El ítem del carrusel) */
.materias {
  /* CAMBIO CLAVE: Definir un ancho fijo o mínimo y evitar que crezcan/encojan */
  flex: 0 0 280px;
  /* No encoger (0), No crecer (0), Ancho base de 280px */
  min-width: 280px;
  /* Asegura un ancho mínimo en todos los dispositivos */

  background: #f8f8f8;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  /* Configuración para el desplazamiento (scroll snapping) */
  scroll-snap-align: start;
}

/* El resto de tu CSS */
.materias h3 {
  font-size: 1.2rem;
  color: #2EBDEF;
  margin-bottom: 10px;
}

#mockup-img {
  align-items: center;
  max-width: 300px;
  /* Establece un tamaño máximo de 700px. En pantallas muy grandes, no crecerá más. */
  height: auto;
}

/* 1. Posicionamiento del HEADER (Necesario para que el menú se posicione bien) */
.header-menu-css {
  position: relative;
  /* Clave: El menú (position: absolute) se posicionará dentro de este elemento. */
  padding: 10px 20px;
  /* Un poco de espacio alrededor */
  /* Otros estilos de tu header (fondo, etc.) */
}

/* 2. Estilos del Icono de Hamburguesa (Label) */
.menu-toggle-label {
  font-size: 2rem;
  cursor: pointer;
  position: absolute;
  /* Para moverlo libremente */
  top: 10px;
  /* Separación desde arriba */
  right: 20px;
  /* Separación desde la derecha (lo mueve a la esquina) */
  z-index: 20;
  color: #1b161a;
  /* Color del icono */
}

/* 3. Ocultar el Checkbox */
.menu-toggle-input {
  display: none;
}

/* 4. Estilo y Ocultación del Menú (NAV) */
/* 4. Estilo y Ocultación del Menú (NAV) */


/* 5. Estado Visible: DESPLIEGUE HACIA ABAJO */
/* Cuando el checkbox está marcado, el menú se hace visible. */
#menu-toggle-css:checked~.nav-dropdown-css {
  max-height: 500px;
  /* Le da una altura grande para que el contenido se vea */
  opacity: 1;
  /* Lo hace completamente visible */
}

/* 4. Estilo y Ocultación del Menú (NAV) - ¡Revisar aquí! */

.nav-dropdown-css {
  /* Posicionamiento para que aparezca en la esquina superior derecha del header */
  position: absolute;
  top: 60px;
  right: 20px;
  z-index: 10;

  /* Ajustes que añadiste */
  width: 180px;
  text-align: left;

  /* Apariencia */
  background-color: #332f32;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  padding: 10px 0;
  /* Relleno solo vertical */

  /* La clave del Despliegue Vertical (Oculto por defecto) */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  /* Asegúrate que este tiene un punto y coma */
  transition: max-height 0.4s ease-out, opacity 0.4s ease;
}

.nav-dropdown-css a {
  display: block;
  flex-direction: column;
  text-decoration: none;
  color: #fff;
  padding: 8px 15px;
  white-space: normal;
  overflow-x: hidden;
  font-size: 0.9rem;
}

.about-container {
    margin: 60px auto;
    padding: 40px 30px;
    border-radius: 20px;
    max-width: 700px;
    width: 90%;
    display: flex
;
    flex-direction: column;
    align-items: center;
    text-align: left;
    gap: 30px;
}