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

*{
  box-sizing: border-box;
}

body {
  margin: 0 auto;
  min-height: 100dvh;
  font-family: "Oswald", sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-wrap: wrap;
}

.contenedora {
  max-width: 80rem;
  margin-inline: auto;
  padding: 1rem;
}

#logo {
  display: block;
  width: 15rem;

}

header, footer {
  background-color: #3d3de9;
  color: white;
  padding-inline: 1rem;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
}

ul, ol {
  list-style: none;
  padding: 0;
}

p {
  font-family: sans-serif;
}

p, li {
  text-wrap: pretty;
}

header {
  box-shadow: 0px 5px 6px hsla(0, 0%, 0%, 0.541);
  position: sticky;
  top: 0;
  z-index: 100;
}

header .contenedora {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

h2 {
  border-bottom: solid 4px black;
  font-size: 2rem;
}

.menu li{
  position: relative;
  display: inline-block;
  font-size: 1.5rem;
}

.menu a {
  color: white;
}

.menu li:hover ul {
  display: block;
}

.menu ul {
  display: none;
  position: absolute;
  background-color: #3d3de9;
  padding: 1rem;
}

.menu a:hover {
  color: rgb(0, 0, 0);
}

.seccion {
  padding-inline: 15px;
  border-left: solid 2px white;
}

.s3 {
  border-right: solid 2px white;
}

.seccion li {
  font-size: 1rem;
  font-weight: 200;
  display: flex;
}

.abrir_menu, .cerrar_menu {
  display: none;
}


/*FOOTER*/

footer {
  margin-top: 2rem;
}

footer ul {
  display: flex;
  justify-content: space-between;
}

footer a {
  color: white;
}

footer a:hover {
  color: gray;
}


/* ACÁ COMIENZA EL MAIN-HOME

APERTURA UBA */


.apertura {
  background-image: url(../imagenes/backgroundimageuba.jpg);
  background-size: cover;
  background-clip: text;
  color: transparent;
  margin: 0;
}


.apertura h1{
  display: flex;
  justify-content: center;
  text-transform: uppercase;
  font-family: "Oswald", sans-serif;
  font-size: clamp(5rem, 0.4667rem + 22.6667vi, 9.25rem);
  line-height: 0.9em;
  margin: 0;
  padding-block: 2rem;
}


.intro p {
  display: flex;
  justify-content: center;
  text-align: center;
  font-size: clamp(1rem, 0.4167rem + 2.9167vi, 1.875rem);;
}

.servicios_salud {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16em, 1fr));
  gap: 1rem;
  color: white;
}

.servicios_salud figure { 
  aspect-ratio: 1; 
  position: relative; 
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 5px 5px 10px hsla(0, 0%, 0%, 0.527);
} 

.servicios_salud img { 
  object-fit: cover; 
  object-position: left center; 
  width: 100%; 
  height: 100%; 
} 

.servicios_salud figcaption { 
  position: absolute; 
  background-color: #3d3de9; 
  padding: .5rem; 
  position: absolute; 
  inset: 0; 
  transform: translateY(calc(100% - 3em)); 
  transition: all .6s ease; 

} 

.servicios_salud figure:hover figcaption { 
  background-color:hsla(240, 80%, 58%, 0.384);
  transition: all .3s ease; 
  transform: translateY(0); 
  display: grid; 
  text-align: center; 
  place-items: center; 
  place-content: center; 
  padding-inline: 1em; 
} 

.servicios_salud figure:hover img {
  transform: scale(1.5) rotate( 5deg);
  transition: .5s;
}

.servicios_salud figcaption h3{
  margin: 0;
}

.servicios_salud figcaption h4 {
  border-top: solid 2px white;
}

.servicios_salud figcaption span {
  font-family: sans-serif;
}

.servicios_salud a {
  color: white;
}

video {
  width: 100%;
  height: 100%;
  box-shadow: 0 8px 8px rgba(126, 124, 124, 0.829);
  margin-bottom: 2rem;
}

/*Museos de la semana*/

.museo_semana article {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
  gap: 2rem;
}

.museo_semana h3 {
  color: #3d3de9;
  margin: 0;
}

.museo_semana h4 {
  color: gray;
  margin: 0;
  margin-block: .5rem;

}

.museo_semana p {
  margin-top: 3rem;
}

.museo_semana a {
  color: #3d3de9;
  font-size: 1.5em;
}

.texto_museo {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/*DESTACADOS*/

.destacados article {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16em, 1fr));
  gap: 2rem;
}

.destacados h3 {
  color: #3d3de9;
  margin: 0;
  font-size: 1.5em;
}

.destacados a {
  background-color: #3d3de9;
  border-radius: 10px;
  padding: 5px 20px;
  color: white;
  font-size: 3rem;
  text-align: center;
  text-transform: uppercase;
}

.destacados a:hover {
  background-color: black;
}

.texto {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/*ACTIVIDADES FAVORITAS*/

.acti div {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  text-align: center;
  align-content: center;
  align-items: center;
}

.acti {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  padding: 1rem;
  gap: 3rem;
}

.acti a {
  background-color: #3d3de9;
  color: white;
  padding: .5rem;
  border-radius: 10px;
  margin: .5rem;
}

.acti a:hover {
  background-color: black;
}

.acti img {
  border-radius: 250px;
  height: 250px;
  width: 250px;
  object-fit: cover;
  padding: 1rem;
}

.acti h3 {
  margin-bottom: .5rem;
}

.acti p {
  display: grid;
  grid-template-rows: auto auto 1fr;
}

.infoactividades p {
  padding-inline: 1rem;
}

/* FACULTADES UBA */


figure {
  margin: 0;
}

.facultadesuba {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16em, 1fr));
  gap: 1rem;
  color: white;
}

.facultadesuba figure { 
  aspect-ratio: 1; 
  position: relative; 
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 5px 5px 10px hsla(0, 0%, 0%, 0.527);
} 

.facultadesuba img { 
  object-fit: cover; 
  object-position: left center; 
  width: 100%; 
  height: 100%; 
} 

.facultadesuba figcaption { 
  position: absolute; 
  background-color: #3d3de9; 
  padding: .5rem; 
  position: absolute; 
  inset: 0; 
  transform: translateY(calc(100% - 3em)); 
  transition: all .6s ease; 

} 

.facultadesuba figure:hover figcaption { 
  background-color:hsla(240, 80%, 58%, 0.384);
  transition: all .3s ease; 
  transform: translateY(0); 
  display: grid; 
  text-align: center; 
  place-items: center; 
  place-content: center; 
  padding-inline: 1em; 
} 

.facultadesuba figure:hover img {
  transform: scale(1.5) rotate( 5deg);
  transition: .5s;
}

.facultadesuba figcaption h3{
  margin: 0;
}

.facultadesuba figcaption h4 {
  border-top: solid 2px white;
}

.facultadesuba figcaption span {
  font-family: sans-serif;
}

.facultadesuba a {
  color: white;
}


/*FORMULARIO*/

.fotop {
  background-image: url(../imagenes/sinuniversidad.jpg);
  background-size: cover;
  height: 40rem;
  margin: 0;
}

.formulario .petitorio {
  display: flex;
  flex-direction: column;
  text-align: center;
  background-color: rgb(202, 202, 211);
  border-radius: 10px;

}

.formulario h1 {
  text-transform: uppercase;
}

.formulario .petitorio p {
  background-color: rgb(240, 233, 233);
  border-radius: 5px;
  padding: 10px 10px;
  color: gray;
  margin-inline: 1rem;
}

.formulario .petitorio h5 {
  text-transform: uppercase;
  font-size: 2rem;
  background-color: #3d3de9;
  color: white;
  padding: 10px 15px;
  border-radius: 50px;
  margin: 1rem;
}

.formulario .petitorio h5:hover {
  background-color: black;
}

.formulario .bajada {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.formulario .bajada p {
  font-size: 1.5rem;
}



/*DETALLES DE LA FADU*/

.fadu_historia {
  background-image: url(../imagenes/fadu_facultad.png);
  background-size: cover;
  height: 40rem;
  margin: 0;
}

.fadu_historia h1 {
  text-align: center;
  text-transform: uppercase;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: clamp(3.75rem, 1.837rem + 9.5652vi, 9.25rem);
  margin: 0;
  padding-top: 12rem;
  color: white;
}

summary {
  background-color: #3d3de9;
  color: white;
  padding: 1rem;
  cursor: pointer;
  border-radius: 1rem;
}

.contenido-acordeon-nuevo {
  padding-inline: 1rem;
  display: flex;
  justify-content: space-between;
}

.acordeon-nuevo details {
  background-color: #d0d0ef;
  border-radius: 1rem;
}

.materiasporcarrera{
  background-color: #d0d0ef;
  border-radius: 1rem;
  list-style: none;
}

.materiasporcarrera li{
  padding-inline: 1rem;
  margin-block: 1rem;
  color: rgb(52, 51, 51);
}

.ubicacionfadu {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  border-bottom: solid 2px black;
  text-align: center;
}

.facufadu {
  border-bottom: solid 2px black;
}

.fa h2 {
  margin-bottom: 0;
}

.facufadu h3 {
  margin-top: 0;
}

.ubicacionfadu li{
  padding: .5rem;
}

.ubicacionesfadu {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  border-bottom: solid 2px black;
}

/*SERVICIO DE SALUD*/

.fotosalud {
  background-image: url(../imagenes/saluduba.jpg);
  background-size: cover;
  height: 40rem;
  margin: 0;
}

.fotosalud h1 {
  text-align: center;
  text-transform: uppercase;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: clamp(3.75rem, 1.837rem + 9.5652vi, 9.25rem);
  margin: 0;
  padding-top: 12rem;
  color: white;
  }

.salud div img {
  width: 80rem;
  height: 30rem;
  object-fit: cover;
  margin-top: 2rem;
}

.contenido-acordeon-salud {
  background-color: #d0d0ef;
  border-radius: 1rem;
  padding: 1rem;
}

.contenido-acordeon-salud h3 {
  border-top: 2px solid rgb(0, 0, 0);
  padding-top: 10px;
}

.contenido-acordeon-salud svg {
  margin-right: 1rem;
}

.contenido-acordeon-salud svg:hover {
  color: #3d3de9;
}

/*MUSEOS*/

.fotomuseo {
  background-image: url(../imagenes/fotomuseoseccion.jpg);
  background-size: cover;
  height: 40rem;
  margin: 0;
}

.fotomuseo h1 {
  text-align: center;
  text-transform: uppercase;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: clamp(3.75rem, 1.837rem + 9.5652vi, 9.25rem);
  margin: 0;
  padding-top: 12rem;
  color: white;
  }

.museo_tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
  gap: 3rem;
}

.card {
  position: relative;
  width: 300px;
  height: 350px;
}

.card .face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 10px;
  overflow: hidden;
  transition: .5s;
}

.card .front {
  transform: perspective(600px) rotate(0deg);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.705);
}

.card .front img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card .front h3 {
position: absolute;
margin: 0;
bottom: 0;
width: 100%;
height: 45px;
line-height: 45px;
color: white;
background-color: hsla(240, 80%, 58%, 0.788);
text-align: center;
}

.card .back {
  transform: perspective(600px) rotateY(180deg);
  background: rgb(3, 35, 54);
  padding: 15px;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  box-shadow: hsla(0, 0%, 0%, 0.705);
}

.card .back .link {
  border-top: solid 1px white;
  height: 50px;
  line-height: 50px;
}

.link a {
  color: white;
}

.card .back h3 {
  font-size: 1.5rem;
}

.card:hover .front {
  transform: perspective(600px) rotateY(180deg);
}

.card:hover .back {
  transform: perspective(600px) rotateY(360deg);
}


/*DEPORTES*/

.fotodepo {
  background-image: url(../imagenes/ubadeportes.jpg_large);
  background-size: cover;
  height: 40rem;
  margin: 0;
}

.fotodepo h1 {
  text-align: center;
  text-transform: uppercase;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: clamp(3.75rem, 1.837rem + 9.5652vi, 9.25rem);
  margin: 0;
  padding-top: 12rem;
  color: white;
  }

.aranceles h2 {
  border-bottom: 2px solid rgb(0, 0, 0);
}

.aranceles details {
  background-color: #d0d0ef;
  border-radius: 1rem;
}


/*RECREATIVOS*/

.fotorecre {
  background-image: url(../imagenes/recreativotalleres.jpeg);
  background-size: cover;
  height: 40rem;
  margin: 0;
}

.fotorecre h1 {
text-align: center;
text-transform: uppercase;
font-family: "Oswald", sans-serif;
font-weight: 700;
font-size: clamp(3.75rem, 1.837rem + 9.5652vi, 9.25rem);
margin: 0;
padding-top: 12rem;
color: white;
}

.contenedora-acordeon {
  width: 100%;
  max-width: 800px;
  margin: auto;
  margin-top: 80px;
}

.contenedora-acordeon h2 {
  text-align: center;
  margin-bottom: 35px;
}

.horarios {
  display: flex;
  justify-content: space-between;
  padding-inline: 2rem;
  padding-bottom: 1rem;
}

.actividades h2 {
  border-bottom: 2px solid rgb(0, 0, 0);
}

.cursos h2 {
  border-bottom: 2px solid rgb(0, 0, 0);
}

.talleres h2 {
  border-bottom: 2px solid rgb(0, 0, 0);
}

section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

summary {
  background-color: #3d3de9;
  color: white;
  padding: 1rem;
  cursor: pointer;
  border-radius: 1rem;
}

.contenido-acordeon {
  padding-inline: 1rem;
  display: flex;
  justify-content: space-between;
}

.acordeon details {
  background-color: #d0d0ef;
  border-radius: 1rem;
}


/*MI CALENDARIO*/

.calendario {
  text-align: center;
  background-color: rgb(229, 232, 235);
  border-radius: 10px;
}

.fechas ol {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.first {
  grid-column-start: 6;
}

.tres {
  background-color: #7da71b;
  border-radius: 100px;
}

.trece {
  background-color: #e06f23;
  border-radius: 100px;
}

.veinticinco {
  background-color: #ce225b;
  border-radius: 100px;
}

.veintinueve {
  background-color: #22a6e4;
  border-radius: 100px;
}

.semana {
  background-color: #8099ce;
}

.calendario h3 {
  background-color: #3d3de9;
  padding-block: 10px;
  margin: 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  color: white;
  font-size: 2rem;
}

.calendario h4 {
  margin: 0;
  padding-block: .5rem;
  font-weight: 700;
}

.calendario ol {
  margin: 0;
}

.dias {
  padding-block: 1rem;
}

.citas article {
  padding-inline: 2rem;
  padding-block: 1rem;
}

.c_curso {
  background-color: #7da71b;
  border-radius: 20px;
}

.c_taller {
  background-color: #e06f23;
  border-radius: 20px;
}

.c_museo {
  background-color: #ce225b;
  border-radius: 20px;
}

.c_salud {
  background-color: #22a6e4;
  border-radius: 20px;
}

.citas {
  display: grid;
  gap: 1rem;

}

.citas article h4 {
  border-bottom: solid 2px white;
  color: white;
  font-size: 1.5rem;
  font-weight: 400;
  margin: 0;
}

.citas article div {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.color_co {
  display: flex;
  justify-content: space-around;
}

.color_co div {
  display: flex;
  align-items: center;
  gap: 1rem;
}


/*AGENDA*/

.actividades2 h2 {
  border-bottom: 2px solid rgb(0, 0, 0);
}

.infoactividades {
  border-bottom: 1px solid rgb(0, 0, 0);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5em, 1fr));
}

.fecha_evento_titulo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5em, 1fr));
}

.fecha_evento_titulo h3 {
  background-color: #3d3de9;
  color: white;
  padding-block: 20px;
  padding-inline: 1rem;
}


@media (max-width: 40em){
  .fotorecre, .fotosalud, .fotodepo, .fotomuseo {
    height: 30rem;
  }
}

@media (min-width: 62em) {
  .menu_movile {
    display: none;
  }
}

@media (max-width: 62em) {

  .abrir_menu, .cerrar_menu {
    display: block;
  }

  header .menudes {
    display: none;
  } 

  .menu_movile {
    display: flex;
    flex-direction: column;
    align-items: end;
    position: fixed;
    background-color: #3d3de9;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 2rem;
    box-shadow: 0 0 0 100vmax hwb(0 0% 100% / 0.699);

    opacity: 0;
    visibility: hidden;
  }

  .menu_movile.visible {
    opacity: 1;
    visibility: visible;
  }

  .menuvisible li {
    display: flex;
    flex-direction: column;
    align-items: end;
  
  }

  .menu_movile a {
    color: white;
    
  }

  .subs {
    font-weight: 200;
  }

  .cerrar_menu {
    border: 0;
    background-color: transparent;
    cursor: pointer;
  }

  .abrir_menu {
    border: 0;
    background-color: transparent;
    cursor: pointer;
  }

}

@media (prefers-color-scheme: light) {
  body {
    background-color: hsl(240 20% 85%);
    color: hsl(240 15% 15%);
  }
}