* {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    /* border: 1px solid red; */
}

html {
    scroll-behavior: smooth;
}

.icono{
  width: 35px;
}

/* Estilos de portada con linearGradient */
.caja {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;

    background: linear-gradient(rgba(5, 7, 12, 0.7), rgba(5, 7, 12, 0.7)), url('../img/UV-Campus-Coatza/g1.jpg') no-repeat center center fixed;
    background-size: cover;
  }

  .titulo {
    font-family: 'Times New Roman', Times, serif;
    letter-spacing: 5px;
    text-align: center;
    font-weight: bolder;
    font-size: 4rem;
    width: 100%;
  }

  .textoo1 {
    margin: 0 auto;
    align-items: center;
    justify-content: center;
  }

  .textoo1 .ami {
    font-size: 2rem;
    color: white;
  }

  .sub-titulo {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    letter-spacing: 1px;
    transition: .5s ease;
    color: #fff;
    text-align: center;
    font-size: 16px;
    font-weight: bolder;
  }

  .fondo {
    display: flex;
    margin: 0 auto;
    width: 120px;
  }

  .img-portada {
    position: absolute;
    width: 100%;
    border-radius: 90px;
    justify-content: start;
    opacity: .3;
  }

  .textoo1 .boton {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    width: 50px; /* Aumentar el tamaño del botón */
    height: 50px; /* Aumentar el tamaño del botón */
    border-radius: 50%; /* Hacer el botón circular */
    background-color: rgba(255, 255, 255, 0.5); /* Color blanco con opacidad */
    display: flex;
    align-items: center;
    justify-content: center;
}

.textoo1 .boton i {
    color: white; /* Color blanco del icono */
    font-size: 24px; /* Tamaño del icono */
}

/* .scroll {
  overflow: scroll;
} */



@media screen and (max-width: 600px) {
  .textoo1 {
    padding: 10px;
  }
  .caja{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 0 auto;

    width: 100%;

    background: linear-gradient(rgba(5, 7, 12, 0.75), rgba(5, 7, 12, 0.75)), url('../img/UV-Campus-Coatza/g1.jpg') no-repeat center center fixed;
    /* background-size: cover; */
  }
}

@media screen and (max-width: 350px) {
  .caja{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 0 auto;

    width: 100%;

    background: linear-gradient(rgba(5, 7, 12, 0.75), rgba(5, 7, 12, 0.75)), url('../img/UV-Campus-Coatza/g1.jpg') no-repeat center center fixed;
    /* background-size: cover; */
  }
}
/* ================================== */

/* =========== Sección de ¿Quiénes somos? =========== */
.information{
  background-color: #0f0f0f;
  z-index: 10;
  color: white;

  height: 100vh;
  display: flex;
}
.caja-info{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 30px 150px;
  align-items: center;

  justify-content: space-between;
  z-index: 10;
}
.info-image{
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
.info-image-weare{
  width: 300px;
}
.info-container{
  justify-content: center;
  align-items: center;
}
.info-title{
  text-align: center;
  font-weight: bolder;
  margin-bottom: 15px;
  font-size: 55px;
}
.info-paragraph{
  text-align: justify;
}
/* ====================================== */

/* MEDIA SCREEN */
/* ========== Sección de ¿Quienes somos? =========== */
@media screen and (max-width: 1400px){
  .information {
    height: auto;
  }
}

@media screen and (max-width: 1250px){
  .information {
    height: auto;
  }
}

@media screen and (max-width: 1000px){
  .information {
    height: auto;
  }
  .caja-info{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    padding: 15px 20px;
  
    justify-content: space-between;
    }
    .info-image-weare {
      width: 120px;
    }
}

@media screen and (max-width: 800px){
.information {
  height: auto;
}

.caja-info{
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  padding: 15px 20px;

  justify-content: space-between;
  }
  .info-title{
    font-size: 35px;
  }
  .info-image{
    margin: 0 auto;
    margin-bottom: 15px;
  }
}

@media screen and (max-width: 450px){
  .information {
    height: auto;
  }
}

/* .dimension {
  width: 800px;
  height: 450px;
  border: 1px solid red;

  margin: 0 auto;
}
.dimension1 {
  width: 500px;
  height: 500px;
  border: 1px solid red;

  margin: 0 auto;
} */

/*===========Estilos de sección del recorrido por facultades=============*/
#resultados{
    font-family: 'Roboto', sans-serif;
    /* display: flex;
    justify-content: center;
    align-items: center; */
}

.seccion-result {
  background: #0f0f0f;
  border-top: 1px dotted white;
  display: flex;
  justify-content: center;
  align-items: center;

  height: 100vh;
}

.contenedor {
	width: 90%;
	margin: auto;
	padding: 40px 0;
    max-width: 1200px;

	display: grid;
	grid-template-columns: 3fr;
	gap: 20px;
}

.card1 .textos h2 {
  color: white;
}

.contenedor-conciertos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.card, .card2 {
	border-radius: 10px;
	min-height: 200px;
	font-weight: bold;
	padding: 20px;
	position: relative;
	overflow: hidden;
	background-size: cover;
	background-position: center center;


}

.card-grid {
  grid-column: 3/4;
  grid-row: 2/3;
}

.card1 {
	border-radius: 10px;
	font-weight: bold;
	padding: 10px;
	position: relative;
	overflow: hidden;
	background-size: cover;
	background-position: center center;

	grid-column-start: 1;
    grid-column-end: -1;
	text-align: center;
}

.card{
	/* background-color: rgba(245, 222, 179, 0.808); */
    background-color: #f9f9f9;
}
.card2{
	/* background-color: rgba(245, 222, 179, 0.808); */
    /* background-color: #EFE081; */
    background: #f1f1f1;
}

.card .card2, .textos {
	height: 100%;

	display: flex;
	flex-direction: column;
	justify-content: space-between;

	color: black;

	/* display: grid;
	grid-template-rows: 1fr auto; */
}
a{
	width: fit-content;
}

/* Imagen y animación */
.card-image{
	width: 100px;

	position: relative;
	animation: wiggle 2s linear infinite;

    left: calc(50% - 3em);
    top: calc(50% - 3em);
}

/* Keyframes */

/* =========== */

.banner {
	border-radius: 10px;
	text-align: center;
	padding: 20px;
	background-size: cover;
	background-position: center center;
    min-height: 300px;

	display: flex;
	flex-direction: column;
	justify-content: space-between;

    background-image: linear-gradient(rgba(5, 7, 12, 0.7), rgba(5, 7, 12, 0.7)), url("../img/UV-Campus-Coatza/g1.jpg");
}
.card-image-banner{
    width: 100px;
    margin: 0 auto;

	animation: wiggle 2s linear infinite;

    left: calc(50% - 3em);
    top: calc(50% - 3em);
}
.banner h3{
    color: white;
}

.banner ul {
	list-style: none;
}

.banner ul li {
	margin: 15px;
	font-weight: bold;
}

.banner .boton {
	background: #FFD600;
	display: block;
	width: 100%;
	font-weight: bold;
	font-size: 14px;
	text-align: center;
	padding: 10px;
	border: none;
	border-radius: 100px;
	font-family: 'Roboto', sans-serif;
	cursor: pointer;
}

.button-faculty {
  background: #18529e;
}

.button-faculty-banner {
  background: #18529e;
  margin: 0 auto;
}

@media screen and (max-width: 900px) {
	.contenedor{
		display: grid;
		grid-template-columns: auto;

        max-height: auto;
	}

	.contenedor-conciertos{
		display: grid;
		grid-column: 1 / -1;
	}

  .seccion-result{
        height: auto;
    }

  .card-grid {
      grid-column: 3/4;
      grid-row: 2/3;
    }
}

@media screen and (max-width: 700px) {
  .seccion-result{
    height: auto;
}

	.contenedor{
		display: grid;
		grid-template-columns: auto;
        max-height: auto;
	}

	.contenedor-conciertos{
		display: grid;
		grid-template-columns: auto auto;
	}

  .card-grid {
    grid-column: auto;
    grid-row: auto;
  }

}

@media screen and (max-width: 600px) {
  .seccion-result{
    height: auto;
}

    .contenedor{
        max-height: auto;
    }
	.contenedor-conciertos{
		display: grid;
		grid-template-columns: auto;
	}
}

/* Estilos para el carrusel vertical */
.carousel-container {
  display: flex;
  flex-direction: row;
  /* height: 100%; */
}

.image-data p {
  bottom: 0;
}

.carousel-text,
.carousel-images {
  overflow-y: auto;
  flex: 1;
}

.carousel-text {
  padding: 20px;
  /* background-color: #f1f1f1; */
}

.carousel-images {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.carousel-images img {
  margin-bottom: 20px;
  max-width: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
  width: 100%;
}

.carousel-images img.active {
  opacity: 1;
}

/* Estilos para el contenedor principal */
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Estilos para los botones */
.controls {
  display: flex;
  justify-content: center;
  align-items: center;
  /* margin-top: 20px; */
}

.controls button {
  margin: 0 5px;
  color: #fff;
  border: none;
  cursor: pointer;
}

/* ============================ */



/* Estilos responsivos para vista móvil */
@media screen and (max-width: 768px) {
  .carousel-container {
    display: flex;
    flex-direction: column;
    height: auto;
  }

  .carousel-text,
  .carousel-images {
    width: 100%;
    height: 100%;
  }

  /* .scroll {
    overflow: scroll;
  } */

  /* Estilos CSS para modal UV ACAYUCAN */
  .modal-content .carousel-container .carousel-images .image-container img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }
}

@media screen and (max-width: 368px) {
  .carousel-container {
    display: flex;
    flex-direction: column;
    height: auto;
  }

  .carousel-text,
  .carousel-images {
    width: 100%;
    height: 100%;
  }

  /* .scroll {
    overflow: scroll;
  } */

  /* Estilos CSS para modal UV ACAYUCAN */
  .modal-content .carousel-container .carousel-images .image-container img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }
}

/* ================================= */

/*===========pie de página==============*/
.pie{
	position: relative;
	width: 100%;
	background-color: #0f0f0f;
  border-top: 1px dotted white;
  z-index: 5;
}

.pie .grupo-1{
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	/* display: grid;
	grid-template-columns: repeat(3, 1fr);
    justify-content: space-evenly; */

    display: flex;
    align-items: center;
    justify-content: center;
	padding-top: 15px;
}

.pie .grupo-1 .box figure{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.pie .grupo-1 .box figure img{
	width:  100px;
  z-index: 5;
}

.pie .grupo-1 .box h2{
	color: #fff;
	margin-bottom: 25px;
	font-size: 20px;
  text-align: center;
}

.pie .grupo-1 .box p{
	color: #efefef;
}

.pie .grupo-1 .box .red-social{
  text-align: center;
}

.pie .grupo-1 .box .red-social a{
	display: inline-block;
	text-decoration: none;
	width: 45px;
	height: 45px;
	line-height: 45px;
	color: #fff;
	margin-right: 10px;
	background-color: #18529e;
	text-align: center;
	transition: all 200ms ease;
}

.pie .grupo-1 .box .red-social a:hover{
	color: wheat;
}

.pie .grupo-2{
	background-color: #1f1f1f;
	text-align: center;
	padding: 5px 10px;
	color: #fff;
}

.pie .grupo-2 small{
	font-size: 15px;
}

@media screen and (max-width: 600px) {
    .itemCard {
        width: 100%;
    }

    .seccion {
        width: 100%;
        height: max-content;
    }

    .pie .grupo-1 {
        width: 80%;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 30px;
        padding: 35px 0px;
        justify-content: center;
        }

        img {
        width: 400px;
        }

        .pie .grupo-1 .box h2{
        color: #fff;
        margin-bottom: 25px;
        font-size: 20px;
        text-align: center;
        }

        .pie .grupo-1 .box .red-social a {
        display: block;
        margin: 10px auto;
        }
}

@media screen and (max-width: 1000px) {
    .itemCard {
        width: 100%;
    }

    .seccion {
        width: 100%;
        height: max-content;
    }
}



.text-color {
  color: white;
}

.modal-content img {
  overflow: scroll;
}
/* ============================ */


/* Estilos de la sección "un vistazo al ayer" */
.fake2 {
  background: #020202;
  width: 100%;
}

.contenedor-2 {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Divide en dos columnas */
  /* gap: 20px; */
  height: 100vh;
  border-top: 1px dotted white;
}

.boxi {
  padding: 10px;
  color: rgb(0, 0, 0);
  display: flex;
  justify-content: center;
  flex-direction: column;
  background: #191919;
  width: 100%; /* Ajusta el ancho al 100% */
}

.boxi h1 {
  font-size: 3rem;
  color: white;
  text-align: center; /* Centra el texto */
}

.contenido-2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* padding: 35px 0; */
}

.box1 {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.box1 h2 {
  color: white;
  text-align: center;
  width: 90%; /* Ajusta el ancho al 90% */
  padding-bottom: 15px;
}

.box1 img {
  width: 100%; /* Ajusta el ancho al 100% */
  max-width: 100%;
  margin: 0 auto;
  padding-top: 15px;
}

.box1 a {
  width: fit-content;
  margin: 0 auto;
}

/* EFECTO HOVER DE LAS IMAGENES */
.image-container1 {
  display: inline-block;
  overflow: hidden;
  z-index: 999;
}

.image-wrapper1 {
  position: relative;
  transition: transform 0.5s ease;
}

.image-wrapper1 img {
  width: 100%;
  height: 100%;
}

.hover-image1 {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.image-wrapper1:hover .hover-image1 {
  opacity: 1;
}
/* ============================ */

@media screen and (max-width: 1900px) {
  .contenedor-2 {
    height: 100vh;
  }

  .contenido-2{
    display: grid;
    grid-template-columns: auto auto;
  }

  .box1 img {
    width: 500px;
  }
}

@media screen and (max-width: 1350px) {
  .contenedor-2 {
    display: grid;
    grid-template-columns: auto; /* Cambia a una sola columna */

    height: 100vh;
  }

  .boxi {
    text-align: center;
    color: #000000;
    width: 100%; /* Ajusta el ancho al 100% */
    margin: 0 auto;
    order: -1;
  }

  .box1 h2 {
    text-align: center;
    width: 90%; /* Ajusta el ancho al 90% */
    font-size: 1rem;
  }

  .box1 img {
    width: 100%; /* Ajusta el ancho al 100% */
    max-width: 100%;
    margin: 0 auto;
  }

  .box1 a {
    width: fit-content;
    margin: 0 auto;
  }
}

@media screen and (max-width: 1000px) {
  .contenedor-2 {
    height: fit-content;
  }
}

@media screen and (max-width: 850px){
  .fake2 .boxi h1{
    font-size: 1.7rem;
    text-align: center;
    padding: 0;
  }

  .boxi {
    height: fit-content;
  }
  
  .contenedor-2{
    display: grid;
    grid-template-columns: auto;

    margin: 0 auto;

    background: #191919;

    height: fit-content;
  }

  .contenido-2{
    /* display: grid;
    grid-template-columns: auto; */
    display: flex;
    margin: 0 auto;

    overflow: hidden;

    padding: 10px 0 20px 0;
    border: none;

    height: fit-content;
  }

  .box1 h2{
    color: white;
    text-align: center;
    width: 90%;
    font-size: 1rem;
  }
  .box1 img{
    width: 350px;
    margin: 0 auto;
  }
  .box1 a{
    width: fit-content;
    margin: 0 auto;
  }
  .image-wrapper1:hover .hover-image1 {
    opacity: 1;
  }
}
/* ================================== */

/* Estilo de la sección de imágenes */
.gallery {
  margin: 0 auto;
  column-count: 4; /* Divide en tres columnas */
  column-gap: 20px; /* Espacio entre las columnas */
  padding: 20px;

  background-color: #0f0f0f;
  /* border-top: 1px dotted white; */

  /* max-width: 95%; */
}

.image {
  display: block;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}

.image img {
  display: block;

  width: 100%;
  height: auto;
  object-fit: cover;
}
/* =================================== */

/* Estilos CSS para el efecto hover dentro del modal */
.image-container {
  display: inline-block;
  overflow: hidden;
  z-index: 999;
}

.image-wrapper {
  position: relative;
  transition: transform 0.5s ease;
}

.image-wrapper img {
  max-width: 100%;
  height: 100%;
  display: block;

  cursor: pointer;
}

.hover-image {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.image-wrapper:hover .hover-image {
  opacity: 1;
}

/* Media queries para hacer la galería responsive */
@media screen and (max-width: 768px) {
  .gallery {
    column-count: 2; /* Cambia a dos columnas en pantallas más pequeñas */
  }
}

@media screen and (max-width: 480px) {
  .gallery {
    column-count: 1; /* Cambia a una columna en pantallas aún más pequeñas */
  }
}