html,
body {
  scroll-behavior: smooth;
  /* Suaviza el desplazamiento */
  margin: 0;
  padding: 0;
  font-family: 'Arial Black', Arial, sans-serif;
  /* Establece la fuente Arial Black */
}

/* Reset */
body,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

body {
  font-size: 18px;
  /* Ajusta el tamaño de fuente según sea necesario */
  line-height: 1.5;
}

h1,
h2,
h3 {
  font-weight: bold;
  /* Si necesitas que los títulos sean más destacados */
  margin: 20px 0;
}

p {
  font-weight: normal;
}


/* Seccion Contactos General  */
.container-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.grid-item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
  border-radius: 10px;
}

.logo-large {
  max-width: 445px;
  height: auto;
}

.logo-medium {
  max-width: 275px;
  height: auto;
}

.redes-sociales {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
}

.red-social img {
  width: 50px;
  height: 50px;
  transition: transform 0.3s;
}

.red-social img:hover {
  transform: scale(1.2);
}

@media (max-width: 768px) {
  .container-grid {
    grid-template-columns: none;
    /* Desactiva columnas */
    grid-template-rows: repeat(4, auto);
    /* Cada elemento en una fila */
  }

  .grid-item.redes-sociales {
    margin-top: 25%;
  }

  .grid-item.logo-ministerio {
    margin-top: -63%;
  }

}


/* Menú */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  /* Distribuye las secciones del logo y menú */
  align-items: center;
  padding: 0px 0px;
  background-color: #002061;
  /* Color del fondo del menú */
  color: #fff;
  z-index: 2000;
}

.nav-link {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  padding: 15px 20px;
  transition: color 0.3s, background-color 0.3s;
}

/* Estilo al pasar el cursor */
.nav-link:hover {
  color: #FFFF01;
  /* Cambia a verde cuando pasas el mouse */
}

/* Estilo del elemento activo */
.nav-link.active {
  color: #ffffff;
  background-color: #FF0303;
  /* Verde abeto */
  border-radius: 5px;
}


/* Contenedor del ítem con submenú */
.nav-links .has-submenu {
  position: relative;
  /* Define el contexto de posicionamiento */
}

/* Submenú */
.nav-links .submenu {
  display: none;
  /* Oculta el submenú por defecto */
  position: absolute;
  /* Absoluto respecto al padre */
  top: 100%;
  /* Ubica el submenú justo debajo del ítem principal */
  left: 0;
  /* Alinea a la izquierda del padre */
  background-color: #ffffff;
  /* Fondo blanco para el submenú */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  /* Sombra para destacar */
  padding: 10px 0;
  list-style: none;
  z-index: 100;
  /* Asegura que esté por encima de otros elementos */
  min-width: 200px;
  /* Asegura un ancho mínimo */
  border-radius: 5px;
  /* Bordes redondeados */
}

/* Ítems del submenú */
.nav-links .submenu li {
  margin: 0;
  padding: 5px 20px;
}

.nav-links .submenu li a {
  text-decoration: none;
  color: #333;
  /* Color del texto */
  display: block;
  transition: background-color 0.3s;
}

.nav-links .submenu li a:hover {
  background-color: #f4f4f4;
  /* Fondo al pasar el mouse */
}

/* Mostrar el submenú al pasar el mouse */
.nav-links .has-submenu:hover .submenu {
  display: block;
  /* Muestra el submenú al pasar el mouse */
}

/* Asegurar el submenú dentro del contenedor */
.nav-links .has-submenu .submenu {
  width: 100%;
  /* Ajusta el ancho al del padre */
}

/* Estilo para pantallas pequeñas */
@media (max-width: 768px) {
  .nav-links .submenu {
    position: static;
    /* Hace que el submenú siga el flujo del documento */
    display: none;
    /* Oculto por defecto */
  }

  .nav-links .has-submenu.active .submenu {
    display: block;
    /* Muestra el submenú al hacer clic */
  }
}


.logo-container {
  position: relative;
  width: 25%;
  /* Ancho principal */
  height: 97px;
  /* Altura total */
  overflow: hidden;
}

.background-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 92%;
  height: 100%;
  background-image: url('./imagenes/Fondos/Fondo-de-logo-principal.png');
  background-size: cover;
  background-position: center;
  z-index: 0;
  /* Asegura que esté detrás del logo */
}

.logo-container a {
  position: relative;
  z-index: 1;
  /* Asegura que esté encima del fondo */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  /* Centra el logo verticalmente */
}

.logo-container img {
  width: 80%;
  max-width: 285px;
  height: auto;
  margin-left: -10%;
}

.navbar-menu {
  flex: 3;
  text-align: right;
}

.nav-links {
  display: flex;
  gap: 20px;
  justify-content: space-between;
}

.nav-links li a {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  transition: color 0.3s;
}

.nav-links li a:hover {
  color: #FFFF01;
}

/* Ocultar el botón de hamburguesa en pantallas grandes */
.hamburger-menu {
  display: none;
}

/* Sección de Soluciones */
.section-soluciones {
  padding: 70px 20px;
  text-align: center;
}

.cards {
  display: flex;
  justify-content: center;
  gap: 0px;
  /* Sin espacio entre tarjetas */
  align-items: stretch;
  /* Todas las tarjetas tendrán la misma altura */
}

.card {
  position: relative;
  width: 300px;
  height: 400px;
  /* Ajusta la altura según sea necesario */
  /* border-radius: 10px; */
  overflow: hidden;
  text-align: center;
  padding: 0;
  /* Sin padding para evitar bordes internos */
  /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); */
  display: flex;
  /* Flexbox para alinear elementos */
  flex-direction: column;
  /* Coloca los elementos en columna */
  justify-content: center;
  /* Centra el contenido verticalmente */
  align-items: center;
  /* Centra el contenido horizontalmente */
}

/* Contenedor del fondo titulo y texto */

.card-content-titulos {
  z-index: 1000;
  margin-left: -20%;
}

.card-content-titulos h2 {
  font-size: 0rem;
  /* Tamaño base */
  font-weight: bold;
  margin: 0;
  line-height: 1;
}

.text-innovacion {
  color: #ffffff;
  /* Blanco puro */
  font-size: 4rem;
  /* Texto más grande */
  font-weight: bold;
}

.text-cientifica {
  color: #8cb3d9;
  /* Azul claro */
  font-size: 4.5rem;
  /* Tamaño moderado */
  font-weight: bold;
}

.text-futuro {
  color: #667599;
  /* Gris azulado */
  font-size: 4.1rem;
  font-weight: normal;
}




/* Estilo adicional para ajustar las sombras de texto */
.card-content-titulos h2 span {
  display: block;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  /* Sombra de texto */
}


.card-titulo {
  position: relative;
  width: 43%;
  height: 400px;
  /* Ajusta la altura según sea necesario */
  /* border-radius: 10px; */
  overflow: hidden;
  text-align: center;
  padding: 0;
  /* Sin padding para evitar bordes internos */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  /* Flexbox para alinear elementos */
  flex-direction: column;
  /* Coloca los elementos en columna */
  justify-content: center;
  /* Centra el contenido verticalmente */
  align-items: center;
  /* Centra el contenido horizontalmente */
  background: rgba(191, 191, 191);
}

.background-titulos {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  /* Fondo detrás del contenido */
}

.background-titulos::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 90%;
  /* Tamaño del fondo principal (fondo interno) */
  height: 100%;
  background: url('./imagenes/Fondos/Titulo-fondo.png') no-repeat center center;
  background-size: cover;
  margin: auto;
  z-index: 1;
  /* Fondo interno */
  border-radius: 10px;
  /* Bordes redondeados */
}

/* .background-titulos::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 93%; 
  height: 100%;
  background: url('./imagenes/Fondos/Titulo-sombra.png') no-repeat center center;
  background-size: cover;
  z-index: 0; 
  border-radius: 10px; 
} */

/* Fondo exclusivo */
.background-desarrollo,
.background-formacion,
.background-sustentable {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  /* Asegura que el fondo cubra todo el contenedor */
  background-position: center;
  z-index: 0;
  /* Fondo detrás del contenido */
}

.background-desarrollo {
  background: url('./imagenes/Fondos/Fondo1.png') no-repeat center center;
}

.background-formacion {
  background: url('./imagenes/Fondos/Fondo2.png') no-repeat center center;
}

.background-sustentable {
  background: url('./imagenes/Fondos/Fondo3.png') no-repeat center center;
}

/* Contenido de la tarjeta */
.card-content {
  position: relative;
  z-index: 1;
  /* Coloca el contenido por encima del fondo */
  text-align: center;
  padding: 10px;
  /* Espaciado interno controlado */
}

/* Estilo de la imagen */
.card-content img {
  width: 65%;
  /* La imagen ocupará el 65% del ancho de la tarjeta */
  height: auto;
  /* Mantiene la proporción de la imagen */
  margin: 0 auto;
  /* Centra horizontalmente la imagen */
  display: block;
  /* Asegura que se trate como un bloque para centrar */
}


/* Título de la tarjeta */
.card-content h3 {
  font-size: 1.5rem;
  color: #002061;
}

/* Texto de la tarjeta */
.card-content p {
  font-size: 1rem;
  color: #333;
  line-height: 1.5;
  text-align: justify;
}

/* Estilo al hacer hover */
.cards .card:hover {
  transform: translateY(-5px);
  /* Efecto suave al elevar */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Ajustes para dispositivos pequeños */
@media screen and (max-width: 768px) {
  .text-innovacion {
    font-size: 2rem;
    /* Reduce el tamaño del texto */
  }

  .text-cientifica {
    font-size: 2rem;
    /* Reduce el tamaño del texto */
  }

  .text-futuro {
    font-size: 2.2rem;
    /* Reduce el tamaño del texto */
  }

  .card-content-titulos {
    margin-left: -10%;
    /* Ajusta el margen en dispositivos pequeños */
  }

  .card-titulo {
    width: 85%;
  }
}

@media screen and (max-width: 480px) {
  .text-innovacion {
    font-size: 2rem;
    /* Más pequeño para pantallas muy pequeñas */
  }

  .text-cientifica {
    font-size: 2.5rem;
    /* Más pequeño para pantallas muy pequeñas */
  }

  .text-futuro {
    font-size: 2rem;
    /* Más pequeño para pantallas muy pequeñas */
  }

  .card-content-titulos {
    margin-left: 0;
    /* Elimina el margen adicional */
  }

  .card-titulo {
    width: 100%;
  }

}

.aparecer {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

/* Elementos visibles */
.aparecer-visible {
  opacity: 1;
  transform: translateY(0);
}

.image-animation-container {
  display: flex;
  justify-content: space-between;
  height: 200px;
  width: 98.4%;
  margin: 0 0;
  /* Espaciado superior e inferior */
  padding: 10px;
  /* Espaciado interno */
  position: relative;
  /* Para controlar el borde */
  border: 5px solid transparent;
  /* Borde inicial */
  border-radius: 10px;
  /* Bordes redondeados opcionales */
  animation: border-animation 3s infinite;
  /* Borde animado */
  gap: 20px;
  /* Espaciado entre los elementos */
}

/* Animación de borde con colores amarillo, azul y rojo */
@keyframes border-animation {
  0% {
    border-color: yellow;
  }

  33% {
    border-color: blue;
  }

  66% {
    border-color: red;
  }

  100% {
    border-color: yellow;
  }
}

.image-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  /* Asegura que las imágenes no se desborden */
}

.image-wrapper img {
  width: 70%;
  /* Ajuste dinámico de las imágenes */
  height: auto;
  /* Mantener proporción */
  border-radius: 10px;
  /* Bordes redondeados para las imágenes */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Añade animación */
}

/* Efecto hover en las imágenes */
.image-wrapper img:hover {
  transform: scale(1.05);
  /* Agranda ligeramente la imagen */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  /* Aplica sombra */
}

.image-animation-container h2 {
  font-size: 2.5rem;
  /* Tamaño grande para destacar */
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  padding: 10px 0;
  /* Espaciado interno superior e inferior */
  margin: 0;
  /* Sin márgenes adicionales */
  line-height: 1.2;
  /* Centrado vertical */
  background: linear-gradient(90deg, yellow, blue, red);
  /* Degradado en el texto */
  background-clip: text;
  /* Propiedad estándar */
  -webkit-background-clip: text;
  /* Propiedad para WebKit */
  color: transparent;
  /* Hace que solo se vea el degradado */
  animation: text-gradient 5s infinite;
  /* Duración de la animación ajustada */
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  /* Sombra para profundidad */
  -webkit-text-stroke: 1px black;
  /* Borde negro alrededor de las letras */
}


/* Animación del degradado del texto */
@keyframes text-gradient {
  0% {
    background-position: 0%;
  }

  100% {
    background-position: 200%;
    /* Ajusta el desplazamiento del gradiente */
  }
}

/* Responsividad para pantallas pequeñas */
@media (max-width: 768px) {
  .image-animation-container {
    width: 93%;
    /* Ajusta el ancho del contenedor */
    height: auto;
    /* Ajusta la altura automáticamente */
    flex-direction: column;
    /* Cambia de fila a columna */
    align-items: center;
    /* Centra los elementos */
    gap: 20px;
    /* Espaciado entre los elementos */
  }

  .image-animation-container h2 {
    margin-bottom: 20px;
    /* Espaciado inferior para el título */
    margin-top: -79%;
  }

  .image-wrapper {
    width: 100%;
    /* Ocupa todo el ancho del contenedor */
    display: flex;
    justify-content: center;
    /* Centra las imágenes horizontalmente */
  }

  .image-wrapper img {
    width: 100%;
    /* Ajusta el ancho de las imágenes en pantallas pequeñas */
    margin-top: 10px;
    /* Espaciado adicional para que las imágenes bajen */
  }

  .image-wrapper.left img {
    margin-top: 37%;
    /* Baja más la imagen izquierda */
  }

  .image-wrapper.right img {
    margin-top: -16px;
    /* Baja aún más la imagen derecha */
  }

  .logo-large {
    max-width: 350px;
  }
}

.institucion {
  background-color: #002061;
  /* Fondo azul */
  color: white;
  /* Texto blanco */
  padding: 20px;
}

.institucion-container {
  display: flex;
  flex-wrap: wrap;
  /* Permite que los elementos se acomoden en dispositivos pequeños */
  justify-content: space-between;
  /* Espacio entre los elementos */
  align-items: center;
  /* Alinea los elementos verticalmente */
}

.institucion-encabezado {
  flex: 1;
  /* Ocupa un espacio flexible */
  max-width: 20%;
  /* Máximo 50% del ancho */
  text-align: center;
  /* Alinea el texto a la izquierda */
}

.institucion-encabezado h1 {
  font-size: 2.5rem;
  font-weight: bold;
  margin: 0;
  line-height: 1.2;
}

.institucion-encabezado .somos {
  display: block;
  color: #ffffff;
  /* Blanco puro */
}

.institucion-encabezado .institucion-resaltada {
  font-family: 'Dancing Script', cursive;
  font-size: 2rem;
  font-style: italic;
  color: #ffffff;
}

.comprometida {
  display: inline-block;
  background-color: #ff0000;
  /* Fondo rojo */
  color: #ffffff;
  /* Texto blanco */
  padding: 5px 15px;
  margin: 10px 0;
  font-size: 1.5rem;
  font-weight: bold;
  border-radius: 5px;
  /* Bordes redondeados */
}

.institucion-descripcion {
  flex: 1;
  /* Ocupa un espacio flexible */
  max-width: 80%;
  /* Máximo 50% del ancho */
  text-align: justify;
  /* Alinea el texto de manera justificada */
}

.institucion-descripcion p {
  font-size: 2rem;
  line-height: 1.5;
  margin: 0;
}



.fondo-texto img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Asegura que el fondo se ajuste */
  opacity: 0.8;
  /* Transparencia */
  z-index: 0;
  /* Detrás del contenido */
}

/* Parte derecha (Google Maps) */
.mapa-derecha {
  flex: 1;
  height: 100%;
}

.mapa-derecha iframe {
  width: 100%;
  height: 100%;
  border: none;
}



.titulo-informacion {
  font-size: 3rem;
}

/* Responsividad para Tablets y Teléfonos */

@media screen and (max-width: 768px) {


  .mapa-izquierda,
  .mapa-derecha {
    width: 35%;
    height: auto;
    /* Ajusta altura automáticamente */
  }


  .institucion-encabezado,
  .institucion-descripcion {
    max-width: 100%;
    /* Ocupa todo el ancho */
    text-align: center;
    /* Centra el texto */
    margin-right: 1%;
  }

  .institucion-encabezado h1 {
    font-size: 2rem;
    /* Reduce el tamaño del texto */
  }

  .comprometida {
    font-size: 1.2rem;
    /* Reduce el tamaño del texto */
  }

  .institucion-descripcion p {
    font-size: 0.9rem;
    /* Reduce el tamaño del texto */
  }
}


@media screen and (max-width: 480px) {

  .institucion-encabezado h1 {
    font-size: 1.8rem;
    /* Texto más pequeño */
  }

  .comprometida {
    font-size: 1rem;
    /* Texto más pequeño */
  }

  .institucion-descripcion p {
    font-size: 0.6rem;
    /* Texto más pequeño */
  }
}

/* 
  Paguina Institucion */


/* Título de la sección */
.section-nosotros h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  /* text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7); */
  text-align: center;
  color: #002061;
}

/* Pseudo-elementos para destellos */
.section-nosotros::before,
.section-nosotros::after {
  content: "";
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  /* Bordes translúcidos */
  border-radius: 50%;
  /* Forma circular */
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.7);
  /* Efecto de luz */
  animation: girar 10s linear infinite;
  /* Animación de giro */
  z-index: 1;
  /* Mantén los destellos sobre el fondo */
}

/* Animación de giro para destellos */
.section-nosotros::before {
  animation-direction: normal;
  /* Giro en sentido horario */
}

.section-nosotros::after {
  animation-direction: reverse;
  /* Giro en sentido antihorario */
}

/* Keyframes para el giro */
@keyframes girar {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Sección principal */
.section-nosotros {
  margin-top: 5%;
  position: relative;
  background: url("./imagenes/instituto.png") no-repeat center center;
  background-size: cover;
  /* Asegura que la imagen llene el contenedor */
  background-color: #f4f4f4;
  /* Fondo de respaldo */
  overflow: hidden;
  height: 300px;
  /* Altura predeterminada */
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 20px;
}

/* Contenedor principal */
.container-nosotros {
  max-width: 1200px;
  /* Ancho máximo del contenido */
  width: 100%;
  /* Asegura que se adapte al contenedor */
  height: 100%;
  /* Llena el alto disponible */
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

/* Contenido del texto */
.quienes-somos-container {
  /*background: rgba(255, 255, 255, 0.85); Fondo semitransparente para mejorar legibilidad */
  padding: 15px;
  border-radius: 10px;
  text-align: center;
  margin: 0px -1%;
  line-height: 1.8;

  max-width: 900px;
  /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
}

.quienes-somos-container p {
  text-align: justify;
}





/* Hacer responsivo */
@media (max-width: 768px) {
  .section-nosotros {
    height: 774px;
    /* Ajusta la altura para pantallas más pequeñas */
    background-size: cover;
    /* Mantén la proporción */
  }
}

@media (max-width: 480px) {
  .section-nosotros {
    height: 774px;
    /* Reduce aún más la altura */
    background-position: top center;
    /* Ajusta para pantallas pequeñas */
  }
}



/* Seccion card nosotros */

.section-nosotros-mision-proposito-valores {
  background: url('./imagenes/Mision-Vision/Fondo-mision-vision.png') no-repeat;
  background-size: cover;
  padding: 1% 1%;
  border-radius: 10px;
  color: white;
  width: 75%;
  margin-left: 11.5%;
}

/* Tarjetas de "Nosotros" */
.cards-nosotros {
  display: flex;
  justify-content: center;
  /* flex-wrap: wrap; */
  gap: 40px;
  margin-top: 40px;
  align-items: stretch;
  /* Todas las tarjetas tendrán la misma altura */
}

.card-nosotros {
  background: rgba(255, 255, 255, 0.6);
  ;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  width: 350px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  height: auto;
  border: 1px solid #ddd;
}

.card-nosotros:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.card-nosotros h3 {
  font-size: 2.5rem;
  margin-bottom: 15px;
  color: #002061;
  text-align: center;
}

.card-nosotros p,
.card-nosotros ul {
  font-size: 1.2rem;
  line-height: 1.5;
  color: #333;
  margin: 0;
  padding: 0;
  text-align: justify;
}

.card-nosotros ul {
  padding-left: 20px;
}

.card-nosotros ul li {
  margin-bottom: 10px;
  list-style: disc;
}

/* Seccion  nosotros-a-futuro*/

.section-nosotros-nosotros-a-futuro {
  padding: 10px 20px;
  background: url('./imagenes/Cinta_futuro/Fondo-Futuro.png') no-repeat center center;
  background-size: cover;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  /* Oculta desbordamientos innecesarios */
  justify-content: flex-end;
  width: 89%;
}

.futuro-texto {
  max-width: 100%;
  color: #002061;
  text-align: left;
  z-index: 1;
  /* Asegura que el texto esté sobre el fondo */
}

.futuro-texto p {
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 10px;
}

.futuro-texto h2 {
  font-size: 3rem;
  font-weight: bold;
  color: #002061;
  margin-bottom: 20px;
}

.futuro-etiquetas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.futuro-etiquetas span {
  background-color: #002061;
  color: #fff;
  padding: 3px 15px;
  border-radius: 5px;
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

/* Imagen flotante */
.futuro-imagen {
  position: absolute;
  right: 75px;
  z-index: 2;
  transform: rotate(-5deg);
  top: 450px;
  width: 90%;
}

.futuro-imagen img {
  max-width: 350px;
  border: 30px solid #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  margin-left: 160px;
}

/* Responsividad */
@media (max-width: 768px) {
  .futuro-imagen {
    top: -30px;
    /* Reduce la posición en pantallas pequeñas */
    right: 11%;
  }

  .futuro-imagen img {
    margin-top: 765px;
    max-width: 200px;
    margin-left: 25px;
  }

  .futuro-texto h2 {
    font-size: 2rem;
    /* Reduce el tamaño del título */
  }

  .futuro-texto p {
    font-size: 1.1rem;
    /* Reduce el texto para pantallas pequeñas */
  }
}



.futuro-columnas-container {
  display: flex;
  width: 100%;
  max-width: 1200px;
  /* Ancho máximo para el contenedor */
  justify-content: space-between;
  /* Coloca los elementos en extremos opuestos */
  gap: 20px;
  /* Espacio entre las columnas */
}

.futuro-izquierda h2 {
  font-size: 4rem;
  font-weight: bold;
  color: #002061;
  margin: 0;
  text-align: left;
  /* Alinea el texto a la izquierda */
}

.futuro-derecha .futuro-etiquetas {
  display: flex;
  flex-wrap: wrap;
  /* Permite que las etiquetas salten de línea si es necesario */
  justify-content: flex-end;
  /* Alinea las etiquetas a la derecha */
  gap: 2px;
  /* Espacio entre las etiquetas */
  flex-direction: column;
}


/* Responsividad */
@media (max-width: 768px) {
  .futuro-columnas-container {
    flex-direction: column;
    /* Cambia a columna en pantallas pequeñas */
    align-items: center;
    /* Centra ambos bloques */
  }

  .futuro-izquierda h2 {
    text-align: center;
    /* Centra el texto en pantallas pequeñas */
  }

  .futuro-derecha .futuro-etiquetas {
    justify-content: center;
    /* Centra las etiquetas */
  }
}

/* Expacio de separacion  */
.section-espacio-100-7 {
  width: 100%;
  /* Abarca el 100% del ancho */
  height: 6vh;
  /* Altura del 25% de la ventana del navegador */
  display: flex;
  /* Flexbox para alinear contenido */
  justify-content: center;
  /* Alineación horizontal */
  align-items: center;
  /* Alineación vertical */
  margin: 0;
  /* Sin márgenes adicionales */
  padding: 0;
  /* Sin relleno adicional */
}

/* Expacio de separacion  */
.section-espacio-100-25 {
  width: 100%;
  /* Abarca el 100% del ancho */
  height: 12vh;
  /* Altura del 25% de la ventana del navegador */
  display: flex;
  /* Flexbox para alinear contenido */
  justify-content: center;
  /* Alineación horizontal */
  align-items: center;
  /* Alineación vertical */
  margin: 0;
  /* Sin márgenes adicionales */
  padding: 0;
  /* Sin relleno adicional */
}


/* Seccion directivo  */

.section-directivo {
  text-align: center;
  position: relative;
}

.section-directivo h2,
h3 {
  font-size: 4.5rem;
  margin-bottom: 20px;
  color: #002061;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
}

.section-directivo h3 {
  font-size: 1.5rem;
  margin-bottom: -20px;
  color: #002061;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
}

.section-directivo p {
  font-size: 1rem;
  color: #1a4db2;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
  font-weight: normal;
  font-style: italic;
  font-family: "Arial", sans-serif;
}


.directivo-container {
  display: flex;
  justify-content: center;
  gap: 300px;
  flex-wrap: wrap;
}

/* Cinta decorativa */
.cinta-decorativa {
  margin-top: 40px;
  width: 100%;
  max-width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}



#form-status {
  margin-top: 10px;
  text-align: center;
  font-size: 16px;
}

.contact-link {
  color: #333;
  /* Color inicial blanco */
  text-decoration: none;
  /* Elimina subrayado */
}

.contact-link:hover {
  color: blue;
  /* Cambia a azul cuando se pasa el mouse */
  text-decoration: underline;
  /* Agrega subrayado en hover */
}

.contacto-redes {
  margin-top: 20px;
  text-align: center;
  /* Centra todo el contenido */
}

.contacto-redes p {
  margin: 0 0 10px 0;
  font-weight: bold;
  color: #555;
}

.image-gallery {
  position: relative;
  width: 100%;
  height: 420px;
  overflow: hidden;
  background: #000;
  margin-top: 5%;
  /* Ajustar para evitar superposición con el menú */
  border-radius: 10px;
}

.gallery-container {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Contenedor del carrusel */
.slider {
  position: relative;
  width: 100%;
  height: 420px;
  /* Altura inicial del carrusel */
  max-height: 80vh;
  /* Máxima altura dinámica */
  overflow: hidden;
  /* Evitar desbordamiento */
  box-sizing: border-box;
  /* Incluye los márgenes y rellenos en el tamaño total */
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slide.active {
  opacity: 1;
}

.slide img {
  width: 100%;
  height: 100%;
  /* object-fit: cover; 
  object-position: center;  */
}

@media (max-width: 768px) {

  .image-gallery {
    position: relative;
    width: 100%;
    height: 135px;
    overflow: hidden;
    background: #000;
    margin-top: 24%;
    /* Ajustar para evitar superposición con el menú */
    border-radius: 10px;
  }

  /* Contenedor del carrusel */
  .slider {
    position: relative;
    width: 100%;
    height: 135px;
    /* Altura inicial del carrusel */
    max-height: 80vh;
    /* Máxima altura dinámica */
    overflow: hidden;
    /* Evitar desbordamiento */
    box-sizing: border-box;
    /* Incluye los márgenes y rellenos en el tamaño total */
  }


  .section-nosotros-mision-proposito-valores {
    width: 98%;
    margin-left: 0%;
  }

  .directivo-container {
    gap: 30px;
  }
}

.caption {
  position: absolute;
  bottom: 10%;
  left: 5%;
  color: white;
  background: rgba(0, 0, 0, 0.5);
  padding: 10px 20px;
  border-radius: 5px;
  text-align: left;
}

.caption h3 {
  margin: 0;
  font-size: 1.5em;
}

.caption p {
  margin: 5px 0 0;
  font-size: 1em;
}

/* Contenedor de controles */
.slider-controls {
  position: absolute;
  bottom: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  gap: 20px;
  /* Espaciado entre puntos y botón */
}

/* Indicadores (puntos) */
.slider-indicators {
  display: flex;
  justify-content: center;
  align-items: center;
}

.indicator {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 0 6px;
  background-color: #ccc;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid black;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.indicator.active {
  background-color: #007bff;
  border-color: #000;
}

.indicator:hover {
  transform: scale(1.2);
}

/* Botón de pausa/reproducir */
.slider-button {
  background-color: rgba(0, 0, 0, 0.6);
  /* Fondo semi-transparente */
  border: none;
  border-radius: 50%;
  width: 40px;
  /* Asegúrate de que el tamaño sea consistente */
  height: 40px;
  margin-left: -15px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease;

  /* Propiedades de la imagen de fondo */
  background-size: 60%;
  /* Asegura que el icono se ajuste al tamaño del botón */
  background-repeat: no-repeat;
  background-position: center;
}

.slider-button:hover {
  transform: scale(1.2);
  /* Agrandamiento al pasar el mouse */
}

/* Imagen para pausa */
.icon-pause {
  background-image: url("/imagenes/pause-icon.png");
  /* Reemplaza con la ruta real de la imagen de pausa */
}

/* Imagen para reproducción */
.icon-play {
  background-image: url("/imagenes/play-icon.png");
  /* Reemplaza con la ruta real de la imagen de reproducción */
}

/* Estilos de la sección  section-acerca-universidad */
.section-acerca-universidad {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
  background-image: url('/imagenes/RECURSOS_TIC/Inicio/Fondo-videos.png');
  /* Cambia esta ruta */
  background-size: cover;
  background-position: center;
  color: white;
  text-align: center;
}

/* Contenedor principal dividido horizontalmente */
.acerca-container {
  display: flex;
  /* Distribuir elementos en fila */
  flex-wrap: nowrap;
  /* Evitar que los elementos se apilen */
  justify-content: space-between;
  /* Espacio entre los elementos */
  align-items: center;
  /* Alinear verticalmente en el centro */
  max-width: 1200px;
  margin: 0 auto;
  /* Centrar horizontalmente */
  gap: 20px;
  /* Espacio entre los elementos */
}

/* Estilos para el video */
.acerca-video {
  flex: 1 1 50%;
  /* Ocupa el 50% del ancho */
  display: flex;
  justify-content: center;
  align-items: center;
}

.acerca-video iframe {
  width: 100%;
  /* Ajustar al ancho del contenedor */
  max-width: 500px;
  aspect-ratio: 16 / 9;
  /* Mantener proporción 16:9 */
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Estilos para el texto */
.acerca-texto {
  flex: 1 1 50%;
  /* Asegurar que ocupe la mitad del espacio */
  padding: 20px;
  /* Espaciado interno */
  background-color: rgba(0, 0, 0, 0.5);
  /* Fondo semi-transparente */
  backdrop-filter: blur(10px);
  /* Efecto de desenfoque */
  border-radius: 10px;
  /* Bordes redondeados */
  color: white;
  /* Color del texto */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  /* Sombra para destacar */
  text-align: left;
  /* Alineación del texto */
}

.acerca-texto h2 {
  font-size: 2rem;
  margin-bottom: 20px;
}

.acerca-texto p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 20px;
}

.btn-mas-info {
  display: inline-block;
  padding: 10px 20px;
  font-size: 1rem;
  color: white;
  background-color: #007bff;
  text-decoration: none;
  border-radius: 25px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transition: background-color 0.3s, transform 0.3s;
}

.btn-mas-info:hover {
  background-color: #0056b3;
  transform: scale(1.05);
}

.section-acerca-universidad {
  animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* --- Responsivo para dispositivos pequeños --- */
@media screen and (max-width: 667px) {
  .hamburger-menu {
    display: block;
    /* Mostrar botón hamburguesa */
    background: none;
    /* Sin fondo */
    border: none;
    /* Sin bordes */
    font-size: 32px;
    /* Aumenta el tamaño del icono */
    color: white;
    /* Color del icono */
    cursor: pointer;
    /* Muestra el cursor de puntero */
    z-index: 1000;
    /* Asegúrate de que el botón esté siempre visible */
    position: absolute;
    /* Posicionamiento absoluto */
    top: 30px;
    /* Ajusta la distancia desde el borde superior */
    right: -1px;
    /* Ajusta la distancia desde el borde derecho */
  }

  /* Opcional: Animación para transición entre íconos */
  .hamburger-menu.animated {
    transition: transform 0.2s ease;
  }

  .hamburger-menu.toggle {
    color: red;
    /* Cambia el color opcionalmente cuando está en el estado "X" */
  }

  .nav-links {
    display: none;
    /* Oculto por defecto */
    flex-direction: column;
    /* Coloca los elementos en columna */
    gap: 10px;
    /* Espaciado entre los elementos */
    position: absolute;
    top: 100%;
    /* Justo debajo de la barra de navegación */
    left: 0;
    /* Asegura que el menú comience desde la izquierda */
    width: 100%;
    /* Ocupa todo el ancho de la pantalla */
    background-color: #002061;
    /* Fondo del menú */
    padding: 10px 0;
    /* Espaciado interno */
    border-top: 1px solid #002061;
    /* Línea superior */
    z-index: 999;
    /* Por encima de otros elementos */
    align-items: flex-start;
    /* Alinea el contenido hacia la izquierda */
    text-align: left;
    /* Asegura que el texto se alinee a la izquierda */
    justify-content: flex-start;
    /* Alinea los elementos hacia arriba */

  }

  .nav-links.show {
    display: flex;
    /* Mostrar menú al hacer clic en el botón */
  }

  .nav-link {
    padding: 6px 14px;
  }

  .cards-nosotros {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 5px;
    align-items: stretch;
    /* flex-direction: column; */
  }

  .cards {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 5px;
    align-items: stretch;
    /* flex-direction: column; */
  }

  .acerca-container {
    flex-wrap: wrap;
  }

  .logo-container {
    width: 81%;
    /* Ajusta el ancho en móviles */
    height: 100px;
  }

  .logo-container img {
    width: 85%;
    /* Ajusta el tamaño del logo */
  }


  .background-container {
    width: 100%;
  }

}

.section-maintenance {
  padding: 80px 20px;
  text-align: center;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 10px;
  margin: 20px auto;
  max-width: 900px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.section-maintenance h2 {
  font-size: 2.5rem;
  color: #ff6b6b;
  margin-bottom: 20px;
}

.section-maintenance p {
  font-size: 1.2rem;
  color: #555;
  line-height: 1.6;
}


/* Seccion .section-carreras */


/* Titulo  */

.section-carreras {
  margin-top: 10vh;
  background: url('imagenes/RECURSOS_TIC/Carreras/Carreras_Artesanales/degradado.png') no-repeat center center;
  background-size: cover;
}

.section-title-carreras {
  text-align: left;
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: #002061;
  font-weight: bold;
  padding: 2vh;
}


/* imagenes carreras */


.section-imagenes-carreras .imagenes-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.imagen-item {
  position: relative;
  width: 27%;
  height: 25%;
}

.imagen-item img:first-child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  clip-path: inset(0);
}

.imagen-item img:last-child {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
  clip-path: inset(0);
}

.imagen-item.izquierda {
  transform: rotate(-5deg);
}

.imagen-item.centro {
  transform: rotate(0deg);
}

.imagen-item.derecha {
  transform: rotate(5deg);
}


.section-imagenes-carreras img {
  border: 2px solid #ccc;
  /* Borde gris claro */
  border-radius: 5px;
  /* Bordes ligeramente redondeados */
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
  /* Sombra sutil */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.section-imagenes-carreras img:hover {
  transform: scale(1.02);
  /* Efecto de zoom suave al pasar el mouse */
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
}

/* Menu de Carreras */

.menu-container {
  display: flex;
  /* Botones en línea horizontal */
  justify-content: flex-start;
  /* Alineados a la izquierda */
  gap: 0;
  /* Sin espacio entre los botones */
  width: 45%;
  /* La barra ocupa el 25% del ancho */
  background-color: #002061;
  /* Fondo azul oscuro */
  border-radius: 5px;
  /* Bordes redondeados */
  overflow: hidden;
  /* Para evitar que algo sobresalga */
  flex-wrap: wrap;
}

.menu-item {
  flex: 1;
  /* Cada botón ocupa el mismo espacio proporcional */
  padding: 10px;
  /* Espaciado interno */
  font-size: 1.2rem;
  /* Tamaño de letra grande */
  text-align: center;
  /* Centrar texto */
  color: #ffffff;
  /* Texto blanco */
  background-color: #002061;
  /* Fondo azul */
  border: none;
  /* Sin bordes adicionales */
  cursor: pointer;
  transition: all 0.3s ease;
  /* Transición suave */
  z-index: 1;
}

.menu-item:hover {
  background-color: #00358e;
  /* Azul más claro al pasar el mouse */

  transform: scale(1.05);
  /* Efecto suave de agrandamiento */
}

.menu-item.active {
  background-color: #f7f7f7;
  /* Fondo blanco */
  color: #002061;
  /* Texto azul */
  font-weight: bold;
  /* Negrita para destacar */
}

/* Contenedor del iframe */
.iframe-container {
  width: 100%;
  /* Asegura que ocupe todo el ancho del contenedor */
  height: auto;
  /* Ajusta la altura automáticamente si no es fijo */
  display: flex;
  /* Para centrar si es necesario */
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
  /* Oculta cualquier contenido que exceda */
}

/* Ajusta el iframe */
#contenido-frame {
  border: none;
  /* Quita el borde del iframe */
  display: block;
  /* Asegura que se trate como bloque */
}

/* Estilo del iframe */
#iframe {
  width: 100%;
  /* Ocupa todo el ancho */
  height: 1336px;
  /* Altura fija (puedes ajustar según tus necesidades) */
  border: none;
  /* Quita bordes del iframe */
}


/*  Dispositivos pequeños  */

/* Estilo para dispositivos móviles */
@media screen and (max-width: 375px) {
  .menu-container {
    width: 100%;
    /* Para ocupar el 100% en pantallas móviles */
    margin-left: 0;
    /* Quitar el margen izquierdo para centrado */
    align-items: center;
    /* Centrar los botones */
  }

  .menu-item {
    margin: 5px 0;
    /* Espacio entre los botones */
    width: 90%;
    /* Ajustar ancho de los botones */
  }

  .section-carreras {
    margin-top: 14vh;
  }

  .iframe-container {
    height: calc(325vh - 50px);
    /* Altura dinámica basada en la ventana */
    overflow: hidden;
    /* Evita que aparezca el desplazamiento */
  }





  .titulo-carrera {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .titulo-linea {
    font-size: 1.5rem;
  }

  .titulo-principal {
    font-size: 2rem;
  }

  .modalidad {
    font-size: 1.5rem;
  }

  .duracion {
    font-size: 1.2rem;

  }
}


/* Whatsapp-Flotante  */

.Whatsapp-Flotante {
  position: fixed;
  /* Fijo en la pantalla */
  bottom: 20px;
  /* Separación desde la parte inferior */
  right: 20px;
  /* Separación desde la parte derecha */
  z-index: 1000;
  /* Asegura que esté por encima de otros elementos */
}

.whatsapp-link img {
  width: 60px;
  /* Ajusta el tamaño del ícono */
  height: 60px;
  /* Ajusta el tamaño del ícono */
  border-radius: 50%;
  /* Hace el botón circular */
  /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); Sombra */
  transition: transform 0.3s ease;
  /* Animación suave al pasar el mouse */
}

/* Efecto al pasar el cursor */
.whatsapp-link img:hover {
  transform: scale(1.1);
  /* Aumenta ligeramente el tamaño */
}

/* Paguina de alumnos  graduados */

.graduates-section {
  padding: 0px 0px;
}

.banner-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  background: url('imagenes/Graduados/CINTA.png') no-repeat center center;
  background-size: cover;
  margin-top: 97px;
  height: 157px;
}

.banner-text {
  color: #002061;
  padding-left: 20px;
}

.banner-text h1 {
  font-family: 'Dancing Script', cursive;
  margin: 0;
  font-size: 3.5rem;
  margin-bottom: -30px;
}

.banner-text h2 {
  margin: 0;
  font-size: 5rem;
  font-weight: bold;
}



/* tituto dos  */

.support-section {
  background-color: #002061;
  /* Azul oscuro */
  padding: 0px 250px;
  color: white;
  text-align: center;
  position: relative;
  /* Para que los elementos con position absoluta se ubiquen respecto a esta sección */
}

.support-content1 {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  align-items: center;
  margin-left: -218px;
}

.support-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.text-section {
  width: 100%;
}

.text-section p {
  font-size: 1.5rem;
  line-height: 1.8;
  margin: 0;
}

.text-section strong {
  font-weight: bold;
  color: #ffffff;
  /* Blanco */
}

/* Posicionamiento independiente de la imagen */
.image-section {
  position: absolute;
  /* Permite ubicarla en cualquier parte */
  top: 50px;
  /* Ajusta la posición superior */
  right: 50px;
  /* Ajusta la posición derecha */
  width: 150px;
  /* Tamaño personalizado */
  z-index: 10;
  /* Para asegurarse de que se muestre sobre otros elementos */
}

.image-section img {
  max-width: 265%;
  height: auto;
  border-radius: 8px;
  margin-left: -230px;
  margin-top: -210px;
}

.red-banner {
  background-color: #FF0000;
  /* Rojo */
  color: white;
  padding: 2px 0;
  text-align: center;
  width: 60%;
  margin-left: 230px;
}

.red-banner p {
  font-size: 1.8rem;
  font-weight: bold;
  margin: 0;
}

@media screen and (max-width: 768px) {
  .support-section {
    padding: 20px;
    /* Reduce el padding lateral */
    text-align: center;
    /* Centrar todo el contenido */
  }

  .support-content1 {
    flex-direction: column;
    /* Apilar elementos en lugar de colocarlos en fila */
    align-items: center;
    /* Centrar todo */
    margin-left: 0;
    /* Eliminar el margen negativo */
  }

  .text-section {
    width: 100%;
    /* Ocupa todo el ancho */
    text-align: center;
    /* Centrar texto */
  }

  .image-section {
    position: static;
    /* La imagen ya no será absoluta, se comportará de manera normal */
    width: 80%;
    /* Ajuste de tamaño */
    margin: 20px auto;
    /* Centrar y agregar espacio */
  }

  .image-section img {
    max-width: 100%;
    /* Ajustar imagen al ancho disponible */
    height: auto;
    margin-left: 0;
    /* Eliminar margen negativo */
    margin-top: 0;
  }

  .red-banner {
    width: 100%;
    /* Que el banner rojo ocupe toda la pantalla */
    margin-left: 0;
    padding: 10px 0;
    /* Ajuste de padding */
  }

  .red-banner p {
    font-size: 1.5rem;
    /* Reducir un poco el tamaño del texto */
  }

  .banner-text h1 {
    font-size: 2.5rem;
  }

  .banner-text h2 {
    font-size: 3rem;
  }

}

/* secccion reconocimientos de graduados */

@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Roboto:wght@400;700&display=swap');

.section-reconocimientos {
  padding: 50px 20px;
  text-align: center;
  background-color: transparent;
}

.section-reconocimientos h2 {
  margin-bottom: 30px;
  font-size: 2rem;
  color: #002061;
}

.reconocimientos-grid {
  display: flex;
  gap: 20px;
  flex-direction: column;
  align-content: space-around;
  flex-wrap: wrap;
}

.reconocimiento-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  max-width: 80%;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.reconocimiento-imagenes {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.reconocimiento-imagenes img {
  width: 48%;
  height: auto;
  border-radius: 5px;
}

.reconocimiento-texto {
  padding: 15px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  text-align: center;
}

.nombre-estudiante {
  font-family: 'Lobster', cursive;
  font-size: 1.8rem;
  color: #002061;
}

.titulo-estudio {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  color: #002061;
}

.descripcion-estudiante {
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  color: #333;
}

@media (max-width: 768px) {
  .reconocimiento-texto {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(0px);
  }

  .reconocimientos-grid {
    flex-direction: column;
    align-items: center;
  }

  .reconocimiento-card {
    max-width: 100%;
  }

  .reconocimiento-texto {
    width: 100%;
  }

  .reconocimiento-imagenes img {
    width: 100%;
    max-width: 250px;
  }
}


.seccion-imagen-fondo {
  background-image: url('/imagenes/Graduados/CINTAE- ESTAMOS.png');
  /* Cambia la ruta de la imagen */
  background-size: cover;
  background-position: center;
  padding: 1px 0px;
  text-align: center;
}

.seccion-imagen-fondo .contenido {
  position: relative;
  z-index: 1;
}

.seccion-imagen-fondo h2 {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 20px;
  color: #002061;
}

.seccion-imagen-fondo p {
  font-size: 1.5rem;
  font-weight: lighter;
  color: #002061;
  font-family: 'Roboto', sans-serif;
}

.portal-empleo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 20px 0;
  /* Espaciado para que no quede pegado arriba/abajo */
  margin-top: 4%;
}

.contenedor {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fondo {
  width: 100%;
  height: 300px;
  display: block;
}

.imege-logo {
  position: absolute;
  width: 45%;
  /* Se ajusta de manera proporcional */
  max-width: 800px;
  /* Evita que sea demasiado grande */
  height: auto;
  top: 57%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

@media (max-width: 768px) {
  .fondo {
    height: 150px;
  }

  .imege-logo {
    top: 70%;
  }


}

/* Sección del portal de empleo */
.job-section-content {
  background-color: #002061;
  padding: 50px 15%;
  color: white;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: -20px;
}

/* Contenedor del contenido */
.job-content-aplicacion {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 1000px;
  margin-left: 100px;
}

/* Ajuste para que el texto no se rompa en móviles */
.text-section p {
  font-size: 30px;
  font-weight: bold;
  max-width: 90%;
  /* Ajuste para evitar desbordes */
  text-align: center;
  white-space: normal;
  /* Asegura que el texto fluya correctamente */
  word-wrap: break-word;
  /* Permite cortar palabras largas */
  line-height: 1.5;
  /* Espaciado para mejorar lectura */
}

/* Banner rojo */
.job-red-banner {
  background-color: red;
  color: white;
  font-size: 20px;
  font-weight: bold;
  border-radius: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  max-width: 700px;
  padding: 15px;
  margin-top: 10px;
}

/* 📱 RESPONSIVE - Ajuste para móviles */
@media (max-width: 768px) {
  .job-section-content {
    padding: 30px 5%;
  }

  .text-section p {
    font-size: 18px;
    max-width: 95%;
  }

  .job-red-banner {
    width: 90%;
    font-size: 18px;
    padding: 10px;
  }

  .job-content-aplicacion {
    margin-left: 10px;
    width: 100%;
  }
}


/* Sección de galería con fondo  ./imagenes/Portal_Empleo/Vacantes/FONDO-VACANTE.PNG' */
/* Sección de galería con fondo */
#gallery-section {
  background: url('./imagenes/Portal_Empleo/Vacantes/FONDO-VACANTE.png') no-repeat center center;
  background-size: cover;
  background-position: center;
  padding: 50px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Contenedor de la galería */
.gallery-container {
  width: 90%;
  max-width: 1200px;
  text-align: center;
}

/* Cuadrícula de imágenes */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 3 imágenes por fila en PC */
  gap: 25px;
  justify-content: center;
  align-items: center;
}

/* Estilos de las imágenes */
.gallery-item {
  width: 100%;
  height: auto;
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

/* Efecto hover (aumenta 40% más) */
.gallery-item:hover {
  transform: scale(1.4);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* RESPONSIVO - Ajuste para tablets */
@media (max-width: 1024px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    /* 2 imágenes por fila en tablets */
  }
}

/* RESPONSIVO - Ajuste para móviles */
@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(1, 1fr);
    /* 2 imágenes por fila en móviles */
    gap: 20px;
  }

  .gallery-item {
    width: 100%;
  }

  /* Aumentar un poco más el zoom en móviles */
  .gallery-item:hover {
    transform: none;
  }
}

/* Mujeres en la industria */


.titulo_mujeres_industria {
  background-image: url('/imagenes/Graduados/CINTAE- ESTAMOS.png');
  /* Cambia la ruta de la imagen */
  display: flex;
  /* Activa la distribución en fila */
  align-items: center;
  /* Alinea verticalmente */
  justify-content: space-between;
  /* Separa los elementos */
  background-color: #f4f4f4;
  /* Color de fondo */
  padding: 10px;
}

/* Aplicar estilos SOLO a los elementos dentro de .titulo_mujeres_industria */
.titulo_mujeres_industria .contenido {
  flex: 1;
  /* Ocupa espacio restante */
  text-align: left;
  /* Alinea el texto a la izquierda */
}

.titulo_mujeres_industria .contenido h2 {
  font-size: 5rem;
  color: #002061;
}

.titulo_mujeres_industria .imagen {
  flex: 0;
  /* Ocupa espacio restante */
  text-align: right;
  /* Alinea la imagen a la derecha */
}

.titulo_mujeres_industria .imagen img {
  max-width: 200px;
  /* Ajusta el tamaño de la imagen */
  height: auto;
  border-radius: 10px;
}

/* Ajuste para pantallas pequeñas */
@media screen and (max-width: 768px) {
  .titulo_mujeres_industria {
    flex-direction: column;
    /* En móviles se apila */
    text-align: center;
  }

  .titulo_mujeres_industria .contenido,
  .titulo_mujeres_industria .imagen {
    text-align: center;
  }

  .titulo_mujeres_industria .contenido h2 {
    font-size: 4.5rem;
  }
}


/* seccion se enorgullese de apoyar a las mujeres */

.seccion-mujeres {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Sección del texto */
.seccion-mujeres .seccion-mujeres__contenido-texto {
  flex: 1;
  text-align: left;
}

.seccion-mujeres .seccion-mujeres__contenido-texto h2 {
  font-size: 2.5rem;
  font-weight: bold;
  color: black;
}

.seccion-mujeres .seccion-mujeres__contenido-texto span {
  background-color: #002061;
  color: white;
  padding: 5px 10px;
  display: inline-block;
}

.seccion-mujeres .seccion-mujeres__contenido-texto p {
  font-size: 1.5rem;
  color: black;
}

/* Logo */
.seccion-mujeres .seccion-mujeres__logo-intec {
  width: 400px;
  /* Tamaño fijo de 400px */
  display: block;
  /* Hace que respete los márgenes automáticos */
  margin: 0 auto 20px;
  /* Centra horizontalmente y agrega espacio abajo */
}

/* Sección de imágenes */
.seccion-mujeres .seccion-mujeres__contenido-imagenes {
  flex: 2;
  background-image: url('/imagenes/Mujeres_Industria/enorgullece/CINTA1.png');
  /* Imagen de fondo */
  background-size: cover;
  background-position: center;
  padding: 0px;
  padding-right: 75px;
  border-radius: 10px;
}

/* Contenedor de las imágenes */
.seccion-mujeres .seccion-mujeres__imagen-container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

/* Estilos de cada imagen */
.seccion-mujeres .seccion-mujeres__imagen-box {
  background: white;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.seccion-mujeres .seccion-mujeres__imagen-box img {
  max-width: 100%;
  border-radius: 10px;
}

.seccion-mujeres .seccion-mujeres__imagen-box p {
  font-size: 1.2rem;
  font-weight: bold;
  color: #002061;
  margin-top: 10px;
}

/* Ajustes para móviles */
@media screen and (max-width: 768px) {
  .seccion-mujeres {
    flex-direction: column;
    text-align: center;
  }

  .seccion-mujeres .seccion-mujeres__contenido-texto {
    text-align: center;
  }

  .seccion-mujeres .seccion-mujeres__imagen-container {
    flex-direction: column;
    align-items: center;
  }

  .seccion-mujeres .seccion-mujeres__logo-intec {
    width: 340px;
  }
}


/* seccions segunda de mujeres emprendedoras  */

.seccion-mujeres-dos {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Sección de imágenes con fondo */
.seccion-mujeres-dos .seccion-mujeres-dos__contenido-imagenes {
  flex: 2;
  background-image: url('/imagenes/Mujeres_Industria/segunda_fila/CINTA2.png');
  /* Imagen de fondo */
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  padding-left: 75px;
}

/* Contenedor de imágenes */
.seccion-mujeres-dos .seccion-mujeres-dos__imagen-container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

/* Estilos de cada imagen */
.seccion-mujeres-dos .seccion-mujeres-dos__imagen-box {
  background: white;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.seccion-mujeres-dos .seccion-mujeres-dos__imagen-box img {
  max-width: 100%;
  border-radius: 10px;
}

.seccion-mujeres-dos .seccion-mujeres-dos__imagen-box p {
  font-size: 1.2rem;
  font-weight: bold;
  color: #002061;
  margin-top: 10px;
}

/* Sección de texto */
.seccion-mujeres-dos .seccion-mujeres-dos__contenido-texto {
  flex: 1;
  /* padding: 20px; */
  text-align: left;
}

.seccion-mujeres-dos .seccion-mujeres-dos__contenido-texto h2 {
  font-size: 2.5rem;
  font-weight: bold;
  color: black;
}

.seccion-mujeres-dos .seccion-mujeres-dos__contenido-texto span {
  background-color: red;
  color: white;
  padding: 5px 10px;
  display: inline-block;
}

.seccion-mujeres-dos .seccion-mujeres-dos__contenido-texto p {
  font-size: 1.5rem;
  color: black;
}

/* Ajustes para móviles */
@media screen and (max-width: 768px) {
  .seccion-mujeres-dos {
    flex-direction: column;
    text-align: center;
  }

  .seccion-mujeres-dos .seccion-mujeres-dos__contenido-texto {
    text-align: center;
  }

  .seccion-mujeres-dos .seccion-mujeres-dos__imagen-container {
    flex-direction: column;
    align-items: center;
  }

  .seccion-mujeres-dos .seccion-mujeres-dos__contenido-texto h2 {
    font-size: 2rem;
  }
}

/*  seccion 3 en mujeres en nla industrisa*/

.seccion-mujeres-tres {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Lado Izquierdo: Imagen única */
.seccion-mujeres-tres .seccion-mujeres-tres__imagen-sola {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.seccion-mujeres-tres .seccion-mujeres-tres__imagen-sola img {
  max-width: 90%;
  border-radius: 10px;
}

/* Lado Derecho: Fondo con dos imágenes */
.seccion-mujeres-tres .seccion-mujeres-tres__contenido-imagenes {
  flex: 2;
  background-image: url('/imagenes/Mujeres_Industria/tercera_fila/CINTA3.png');
  /* Imagen de fondo */
  background-size: cover;
  background-position: center;
  padding-right: 75px;
  border-radius: 10px;
}

/* Contenedor de imágenes */
.seccion-mujeres-tres .seccion-mujeres-tres__imagen-container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

/* Estilos de cada imagen */
.seccion-mujeres-tres .seccion-mujeres-tres__imagen-box {
  background: white;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.seccion-mujeres-tres .seccion-mujeres-tres__imagen-box img {
  max-width: 100%;
  border-radius: 10px;
}

/* Ajustes para móviles */
@media screen and (max-width: 768px) {
  .seccion-mujeres-tres {
    flex-direction: column;
    text-align: center;
  }

  .seccion-mujeres-tres .seccion-mujeres-tres__imagen-container {
    flex-direction: column;
    align-items: center;
  }
}


/* ================== SECCIONES TALLERES ESPECIALIZADOS ================== */

/* Sección del banner del taller en la institución */
.banner-taller-institucion {
  position: relative;
  width: 100%;
  height: 280px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Imagen de fondo del banner */
.banner-fondo-institucion {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

/* Contenedor centrado dentro del banner */
.contenedor-taller-institucion {
  width: 100%;
  max-width: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
}

/* Imagen interna destacada */
.logo-taller-institucion {
  width: 100%;
  height: auto;
  border-radius: 5px;
}

/* ================== SECCIÓN PRÁCTICAS TÉCNICO PROFESIONALES ================== */
.seccion-practicas-institucion {
  position: relative;
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: url('./imagenes/Talleres_Especializados/Fondo_Texto/Fondo-concepto.png') no-repeat center center;
  background-size: cover;
}

/* Contenedor del texto */
.contenido-practicas-institucion {
  width: 45%;
  text-align: left;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

/* Estilos del texto */
.contenido-practicas-institucion p {
  font-size: 40px;
  color: #333;
  margin-bottom: 15px;
  font-weight: normal;
  text-align: center;
}

/* Texto resaltado */
.texto-resaltado-institucion {
  font-size: 40px;
  /* Tamaño normal en escritorio */
  font-weight: bold;
  background: #333;
  color: white;
  display: inline-block;
  padding: 10px;
  border-radius: 5px;
}

/* ================== SECCIÓN 4 TENEMOS LAS HERRAMIENTAS ================== */
.institucion-seccion4 {
  position: relative;
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('./imagenes/Talleres_Especializados/Fondo_Texto/FONDO-TENEMOS.png') no-repeat center center;
  background-size: cover;
  margin-top: 3%;
}

/* Contenedor del texto */
.contenido-seccion4 {
  text-align: center;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Estilos para el título */
.contenido-seccion4 h2 {
  font-size: 50px;
  font-weight: bold;
  margin-bottom: 5px;
  text-transform: uppercase;
}

/* Contenedor que mantiene "para enseñarte a" y "Emprender TU NEGOCIO" en la misma línea */
.texto-linea {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

/* Texto en cursiva */
.texto-italic-seccion4 {
  font-size: 88px;
  font-style: italic;
  font-family: 'Brush Script MT', cursive;
  margin-top: 0px;
  margin-bottom: 0;
}

/* Texto resaltado */
.texto-resaltado-seccion4 {
  font-size: 32px;
  font-weight: bold;
  background: white;
  color: red;
  padding: 5px 15px;
  border-radius: 5px;
  display: inline-block;
}

/* ================== RESPONSIVE DESIGN ================== */

/* Para pantallas menores a 1024px (Tablets y Laptops pequeñas) */
@media (max-width: 1024px) {

  .seccion-practicas-institucion,
  .institucion-seccion4 {
    height: auto;
    text-align: center;
  }

  .contenido-practicas-institucion {
    width: 70%;
  }

  .texto-linea {
    flex-direction: column;
    align-items: center;
  }

  .texto-italic-seccion4 {
    font-size: 70px;
  }

  .texto-resaltado-seccion4 {
    font-size: 28px;
  }

  .texto-resaltado-institucion {
    font-size: 32px;
    /* Reducimos un poco para tablets */
    padding: 8px;
  }
}

/* Para pantallas menores a 768px (Celulares) */
@media (max-width: 768px) {
  .seccion-practicas-institucion {
    flex-direction: column;
    justify-content: center;
  }

  .contenido-practicas-institucion {
    width: 90%;
  }

  .contenido-practicas-institucion p {
    font-size: 23px;
    /* Tamaño más pequeño para móviles */
  }

  .contenido-seccion4 h2 {
    font-size: 40px;
  }

  .texto-italic-seccion4 {
    font-size: 60px;
  }

  .texto-resaltado-seccion4 {
    font-size: 24px;
  }

  .texto-resaltado-institucion {
    font-size: 26px;
    /* Más pequeño para móviles */
    padding: 6px;
  }
}

/* Para pantallas menores a 480px (Celulares pequeños) */
@media (max-width: 480px) {
  .contenido-seccion4 h2 {
    font-size: 36px;
  }

  .texto-italic-seccion4 {
    font-size: 50px;
  }

  .texto-resaltado-seccion4 {
    font-size: 20px;
  }

  .texto-resaltado-institucion {
    font-size: 20px;
    /* Mucho más pequeño en móviles pequeños */
    padding: 4px;
  }
}

/* ================== SECCIÓN 5 - GALERÍA DE TRABAJO ================== */
.institucion-seccion5 {
  background: url('./imagenes/Mujeres_Industria/enorgullece/CINTA1.png') no-repeat center center/cover;
  position: relative;
  text-align: center;
  /* padding: 10px 0; */
  height: 550px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}



/* Contenedor del slider */
.imagen-slider {
  position: relative;
  width: 50%;
  /* En pantallas grandes ocupa la mitad */
  height: 100%;
  z-index: 1;
}

/* Imágenes dentro del slider */
.imagen-slider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.imagen-slider img.imagen-activa {
  opacity: 1;
}

/* 📱 **RESPONSIVIDAD PARA PANTALLAS PEQUEÑAS** */
@media (max-width: 1024px) {
  .institucion-seccion5 {
    height: 450px;
    /* Reducimos la altura */
  }

  .imagen-slider {
    width: 70%;
    /* En tablets ocupa más ancho */
  }
}

@media (max-width: 768px) {
  .institucion-seccion5 {
    height: 350px;
    /* Más pequeña en móviles */
  }

  .imagen-slider {
    width: 90%;
    /* En móviles ocupa casi todo el ancho */
  }
}

@media (max-width: 480px) {
  .institucion-seccion5 {
    height: 300px;
    /* Más pequeña en teléfonos pequeños */
  }

  .imagen-slider {
    width: 100%;
    /* Ocupar todo el ancho en móviles */
  }
}


/* Contenedor de imágenes */
.galeria-trabajo {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}

/* Imágenes con sombra y efecto flotante */
.imagen-trabajo {
  position: relative;
  max-width: 300px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
  transform: rotate(-5deg);
}

.imagen-trabajo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

/* Imagen central ligeramente más grande y sin rotación */
.imagen-central {
  transform: rotate(0deg) scale(1.1);
}

/* Botón de más información con efecto de colores */
.informacion-boton {
  margin-top: 20px;
}

.btn-mas-info {
  font-size: 18px;
  font-weight: bold;
  background: linear-gradient(90deg, #444, #666, #888);
  color: white;
  border: none;
  padding: 12px 25px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
  background-size: 400% 400%;
  animation: animarBoton 3s infinite linear;
}

/* Efecto de colores animados */
@keyframes animarBoton {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.btn-mas-info:hover {
  transform: scale(1.05);
}

/* ================== RESPONSIVE DESIGN ================== */

/* Para pantallas menores a 768px (Celulares) */
@media (max-width: 768px) {
  .galeria-trabajo {
    flex-direction: column;
    align-items: center;
  }

  .imagen-trabajo {
    transform: rotate(0deg);
    max-width: 90%;
  }

  .imagen-central {
    transform: scale(1);
  }

  .btn-mas-info {
    font-size: 16px;
    padding: 10px 20px;
  }
}

/* SECCIÓN PRINCIPAL */
.servicios-section {
  text-align: center;
  padding: 10px 10px;
  background: url('./imagenes/Talleres_Especializados/Baner_1/Fondo-logo.png') no-repeat center center/cover;
  position: relative;
  color: white;
}

/* TÍTULO RESPONSIVO */
.titulo-servicios {
  font-size: 2.5rem;
  margin-bottom: 20px;
  text-transform: uppercase;
}

/* CONTENEDOR DE SERVICIOS */
.servicios-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  /* Ajustable para dispositivos */
  gap: 10px;
  width: 100%;
  max-width: 1200px;
  padding: 0;
  margin: 0 auto;
}

/* IMÁGENES DENTRO DE LA SECCIÓN SERVICIOS */
.servicios-container img {
  width: 100%;
  height: auto;
  object-fit: cover;
  opacity: 0;
  /* Ocultamos al inicio */
  transform: translateX(-50px);
  /* Pequeño desplazamiento */
  transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}

/* Efecto hover SOLO EN ESCRITORIO */
@media (hover: hover) {
  .servicios-container img:hover {
    transform: scale(1.05);
  }
}

/* ANIMACIÓN CUANDO LAS IMÁGENES SE VUELVEN VISIBLES */
.servicios-container img.visible {
  opacity: 1;
  transform: translateX(0);
}

/* 📱 **RESPONSIVIDAD PARA PANTALLAS PEQUEÑAS** */
@media (max-width: 1024px) {
  .titulo-servicios {
    font-size: 2.2rem;
  }

  .servicios-container {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    /* Ajuste más compacto en tablets */
  }
}

@media (max-width: 768px) {
  .titulo-servicios {
    font-size: 2rem;
  }

  .servicios-container {
    grid-template-columns: repeat(4, 1fr);
    /* 3 columnas en móviles medianos */
    gap: 8px;
  }
}

@media (max-width: 480px) {
  .titulo-servicios {
    font-size: 1.8rem;
  }

  .servicios-container {
    grid-template-columns: repeat(4, 1fr);
    /* Solo 2 columnas en móviles pequeños */
    gap: 8px;
  }
}


/* prueba sub menus */
/* SUBMENÚ */
/* SUBMENÚ */
.has-submenu {
  position: relative;
}

/* Fondo del submenú sin afectar el texto */
.has-submenu .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #002061;
  /* Azul sólido */
  list-style: none;
  padding: 10px 0;
  width: 220px;
  border-radius: 5px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
  z-index: 1000;
}

/* Estilo de cada opción en el submenú */
.has-submenu .submenu li {
  padding: 0;
}

/* Enlaces dentro del submenú */
.has-submenu .submenu a {
  color: #FFFFFF !important;
  /* Texto blanco */
  text-decoration: none;
  font-weight: bold;
  display: block;
  padding: 12px 18px;
  transition: color 0.3s;
  /* Solo cambia el color del texto */
  font-size: 16px;
  text-align: left;
}

/* Cuando pasas el mouse, SOLO el texto se vuelve amarillo */
.has-submenu .submenu a:hover {
  background: transparent !important;
  /* Fondo NO cambia */
  color: #FFD700 !important;
  /* Texto amarillo */
}


/* Mostrar el submenú al pasar el mouse en escritorio */
@media (hover: hover) {
  .has-submenu:hover .submenu {
    display: block;
  }
}

/* RESPONSIVIDAD PARA MENÚ MÓVIL */
@media (max-width: 768px) {
  .has-submenu .submenu {
    position: relative;
    width: 100%;
    background: #002061;
    /* Fondo sólido */
  }

  .has-submenu.active .submenu {
    display: block;
  }
}

.has-submenu.active-parent>a {
  background: #FF0303 !important;
  /* Rojo */
  color: white !important;
  border-radius: 5px;
  padding: 8px 12px;
  transition: background 0.3s;
}


.submenu {
  display: none;
  /* Ocultamos el submenú por defecto */
}

.submenu.open {
  display: block;
  /* Solo se muestra cuando tiene la clase 'open' */
}

/* 🔴 Si en escritorio usas hover, asegúrate de que no interfiera */
@media (min-width: 1024px) {
  .has-submenu:hover .submenu {
    display: block;
  }
}


/* SUBMENÚ Graduados*/
.has-submenu-graduados {
  position: relative;
}

/* Fondo del submenú sin afectar el texto */
.has-submenu-graduados .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #002061;
  /* Azul sólido */
  list-style: none;
  padding: 10px 0;
  width: 220px;
  border-radius: 5px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
  z-index: 1000;
}

/* Estilo de cada opción en el submenú */
.has-submenu-graduados .submenu li {
  padding: 0;
}

/* Enlaces dentro del submenú */
.has-submenu-graduados .submenu a {
  color: #FFFFFF !important;
  /* Texto blanco */
  text-decoration: none;
  font-weight: bold;
  display: block;
  padding: 12px 18px;
  transition: color 0.3s;
  /* Solo cambia el color del texto */
  font-size: 16px;
  text-align: left;
}

/* Cuando pasas el mouse, SOLO el texto se vuelve amarillo */
.has-submenu-graduados .submenu a:hover {
  background: transparent !important;
  /* Fondo NO cambia */
  color: #FFD700 !important;
  /* Texto amarillo */
}


/* Mostrar el submenú al pasar el mouse en escritorio */
@media (hover: hover) {
  .has-submenu-graduados:hover .submenu {
    display: block;
  }
}

/* RESPONSIVIDAD PARA MENÚ MÓVIL */
@media (max-width: 768px) {
  .has-submenu-graduados .submenu {
    position: relative;
    width: 100%;
    background: #002061;
    /* Fondo sólido */
  }

  .has-submenu-graduados.active .submenu {
    display: block;
  }
}

.has-submenu-graduados.active-parent>a {
  background: #FF0303 !important;
  /* Rojo */
  color: white !important;
  border-radius: 5px;
  padding: 8px 12px;
  transition: background 0.3s;
}

/* 🔴 Si en escritorio usas hover, asegúrate de que no interfiera */
@media (min-width: 1024px) {
  .has-submenu-graduados:hover .submenu {
    display: block;
  }
}

.seccion-publicaciones-redes {
    padding: 60px 20px;
    background: #f8fafc;
}

.publicaciones-header {
    max-width: 1200px;
    margin: 0 auto 30px auto;
    text-align: center;
}

.publicaciones-header h2 {
    font-size: 2rem;
    margin-bottom: 10px;
    color: #0f172a;
}

.publicaciones-header p {
    font-size: 1rem;
    color: #475569;
}

.publicaciones-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.publicacion-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.publicacion-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}

.publicacion-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

.publicacion-info {
    padding: 18px;
}

.publicacion-red {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #2563eb;
    margin-bottom: 10px;
}

.publicacion-info p {
    font-size: 0.95rem;
    color: #334155;
    line-height: 1.5;
    margin-bottom: 14px;
}

.publicacion-info a {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    background: #0f172a;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 0.9rem;
    transition: background 0.2s ease;
}

.publicacion-info a:hover {
    background: #1e293b;
}