@charset "utf-8";
*{
    box-sizing: border-box; 
  }

  html {
    scroll-behavior: smooth;
    scroll-padding-block-start: 5em;
  }
  *{
    list-style: none;
  }
    header{
    z-index: 600;
    display: flex;
    align-items:flex-start;
    justify-content: space-between;
    padding: 2rem;
    background-color: #ececec;
    position:sticky;
    top:0;
    }

    .logo{
    position: absolute;
    display: flex;
    max-width: 10rem;
    z-index: 600;
    }
  
  
    .nav-list{
    list-style-type: none;
    display: flex;
    gap: 1rem;
    }
    
    .nav-list li a{
    font-family: 'Josefin Sans', sans-serif;
    font-size: 1.2rem;
    color:#C901A1;
    text-decoration: none;
    }

    .nav-list li a:hover{
      color: #F98810;
      transition: all .3s;
    }

  .abrir-menu,
  .cerrar-menu {
    display: none;
  }

    h1,
    h2,
    h3,
    h4,
    h5,
    p {
      font-family: 'Josefin Sans', sans-serif;
    }

        
    @media screen and (max-width: 35em) {
      .abrir-menu,
      .cerrar-menu {
          display: block;
          border: 0;
          font-size: 2rem;
          background-color: transparent;
          cursor: pointer;
      }
  
      .abrir-menu {
          color:#C901A1;
      }
  
      .cerrar-menu {
          color:#FDFEFE;
      }

      .nav {
          opacity: 0;
          visibility: hidden;
          display: flex;
          flex-direction: column;
          align-items: end;
          gap: 1rem;
          position: absolute;
          top: 0;
          right: 0;
          bottom: 1000;
          background-color:#710B79;
          padding: 2rem;
          box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .5);
          z-index: 8000;
      }
  
      .nav.visible {
          opacity: 1;
          visibility: visible;
          height: 100vh;
      }
      
      .nav-list {
          flex-direction: column;
          align-items: end;
      }
  
      .nav-list li a {
          color: #ecececec;
      }
  } 
  
  .acumar img{
    width: 100%;
    position:absolute;
    bottom: 0;
  }
  .acumar {
    width: 7rem;
    flex-grow: 1;
    position: relative;
  }
  .nav.visible {
    opacity: 1;
    visibility: visible;
    height: 100vh;
  }

  .acumar {
    display: none; 
}

@media screen and (max-width: 35em) {
  .acumar.visible-mobile {
      display: block;
  }
  .acumar.hidden-mobile {
      display: none;
  }
  
  body {
    min-height: 100dvh; 
    margin: 0;
   }

  main{
    margin:auto;
  }
  .titulos {
    margin: auto;
  }

  .titulos h1 {
    font-size: 1.8rem; 
    margin-bottom: 0.5rem;
  }  
}

.nav-list li a.active {
  color: #F98810;
}

  /*aca empieza el home*/

   .contenido{
    display: grid;
    gap: 1em;
    grid-template-columns: repeat(auto-fit, minmax(min(20em, 100%), 1fr));
    margin-top: 2rem;
    margin-bottom: 2rem;
   }

   #Home {
    max-width: 100%;
    position: relative;
    display: flex;
   }

   .encabezado-articulo{
    display: flex;
    justify-content:space-between;
    align-items: center;
   }

   /*sliders*/
   .caption {
    position: absolute;
    bottom: 0; 
    left: 0; 
    background: rgba(0, 0, 0, 0.5); 
    color: white; 
    padding: 35px; 
    width: 100%; 
    text-align: center; 
  }
  
  .caption h1 {
    margin: 0;
    font-size: 2em;
  }
  .caption a{
    color:#CDF5FF;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 1.5em;
  }
  
  .caption figcaption {
    margin: 0; 
  }
   .slider-container {
    position: relative; 
  }
  .linea-decorativa {
    border: 1px solid #ccc; 
    margin: 1rem 2.3rem; 
  }
  /*sobre nosotros*/
 
.sobre-nosotros img{
  width: 100%;
  height: auto;
}
.contenedor-nosotros {
  position: relative;
  width: 100%; 
  height: auto; 
  margin-bottom: 2em;
}

.imagen-de-fondo {
  width: 100%;
  height: 100%;
  object-fit: cover; 
}

.fondo-transparente {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); 
}
.texto-nosotros h2{
  position: absolute;
  font-size: 2rem;
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  color: #CDF5FF;
  text-align: center;
}
.contenido-mapa figure {
  margin: 0;
}

.contenido-mapa img {
  width: 100%;
  max-width: 60%;
  height: auto;
  margin: 0 auto; 
}


  /* Este es el contenido del enlace gualdoni*/

  .contenedor-gualdoni {
    display: flex;
    justify-content:center;
    align-items: center;
  }

  .titulos {
    text-align: left;
    margin: 0.6rem; 
  }

.titulos h1{
  margin-bottom: 0.5rem;
  line-height: 1.4em;
  color: #C901A1;
  display: flex;
  font-size: 1.8em;
  font-weight: 600;
  margin-left: 5rem;
  margin-right: 5rem;
  margin-top: 1em;
}


.titulos h3{
  font-size: 1.2em;
  font-weight: 500;
  line-height: 2em;
}

p {
  display: flex;
  justify-content: left;
  align-items: flex-start;
  font-size: 1.3em;
  font-weight: 400;
  color: black;
  line-height: 1.3em;
  margin-top: 0;
  margin-left: 5rem;
  margin-right: 5rem;
}
  .content {
    order: 2;
    flex: 1;
  }
  .content p{
    font-size: 1.2em;
    margin-right: 2em;
    margin-left: 2em;
    font-weight: 400;
  }
  
  figure {
    order: 1;
    flex: 1;
    text-align: center; 
  }

  @media (max-width: 64em) {
    .contenedor-gualdoni {
      flex-direction: column; 
    }
  
  }
  @media only screen and (max-width: 35em) {
    .content,
    figure {
      margin-bottom: 2rem; 
      height: auto;
    }
    p{
      margin-left: 1em;
      margin-right: 1em;
    }
    .titulos h1{
      margin-top: 1em;
      margin-left: 0.7em;
      margin-right: 1em;
     
    }
  }

/*aca terminan los sliders*/ 
/*scan*/

  .contenedor-scaner figure{
    border-radius: 5px;
    position: relative;
    overflow: hidden;
  }
  
   span, a{
    text-transform: none;
    text-decoration: none;
   }

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

  .contenedor-scaner figure:hover figcaption {
    background-color: hsla(36, 15%, 35%, 0.75);
    transition: all .3s ease;  
    transform: translateY(0);
    display: grid;
    text-align: center;
    place-items: center;
    place-content: center;
    padding-inline: 2em;
  }

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

  .contenedor-scaner figcaption{
  background-color:hsl(31, 95%, 52%);
  color:#FDFEFE;
  padding: .5em;
  line-height: 2em;
  font-family: 'Josefin Sans', sans-serif;
  text-transform: uppercase;
  font-weight: 800;
  position: absolute;
  inset: 0;
  transform: translateY(calc(100% - 4em));
  transition: all .6s ease;
  }

  .contenedor-scaner figcaption span {
    display: block;
    font-size: 1.2em;
    color:#FDFEFE;
    margin-block-start: -.5em;
    text-transform: none;
  }
  
  .contenedor-scaner figcaption a {
    display: inline-block;
    margin-block-start: .5em;
    background-color:hsl(296, 83%, 26%);
    color: hsl(0 0% 90% / 0.85);
    padding: .25em 1em;
    border-radius: 2em;
  }
  
  figcaption a::after {
    content: " →";
  }
  
  .contenedor-scaner figcaption a:hover {
    background-color:hsl(31, 95%, 52%) ;
    box-shadow: 0 .25em .25em hsla(0, 0%, 0%, 0.25);
    color: hsl(0 0% 90%);
  }

  /*esta es la parte de responsive nueva*/
  video {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; 
  }

/* eventos */
.portada-eventos {
  color: #CDF5FF;
  width: 100%;
  padding: 7em;
  position: relative;
  text-align: center;
  min-height: 25rem;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../imagenes/diomede1-celular.png);
  background-repeat: no-repeat;
  background-size: cover;
  margin:auto;
  margin-bottom: -230px;
}

.portada-eventos .texto-eventos button {
  padding: 10px;
  background-color: #710B79;
  color: white;
  border: none;
  border-radius: 50px;
  cursor: pointer;
}

.portada-eventos .texto-eventos button:hover {
  background-color: #F98810;
}
.card a {
  text-decoration: none;
  color: inherit;
}
/*slider .pasadas*/
.pasadas{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  padding: 0 35px;
  width: 100%;
  position: relative;
  margin-bottom: 5em;
}
.pasadas i {
  height: 50px;
  width: 50px;
  background-color: #e18ae5;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  cursor: pointer;
  position:absolute;
  top: 50%;
  font-size: 1.25rem;
  transform: translateY(-50%);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 23);
}
.pasadas i:first-child {
  left: 10px;
}
.pasadas i:last-child {
  right: 3px;
}
.pasadas .slider {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% / 3) - 12px);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: 0;
}
.slider::-webkit-scrollbar{
  display:none;
}
.slider :where(.card, .img) {
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider.dragging .card{
  cursor: grab;
  user-select: none;
}
.slider .card{
  scroll-snap-align:start;
  height: 200px;
  list-style: none;
  background-color: #e18ae5;
  border-radius: 8px;
  display: flex;
  cursor: pointer;
  padding-bottom: 15px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
@media screen and (max-width: 900px) {
  .wrapper .slider{
    grid-auto-columns: calc((100% / 2) - 9px);
  }
}

@media screen and (max-width: 600px) {
  .pasadas .slider{
    grid-auto-columns: 100%;
  }
}
/*slider principal eventos */
.wrapper{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 35px;
  width: 100%;
  position: relative;
  margin-bottom: 20em;
  top: 16em;
}

.wrapper i {
  height: 50px;
  width: 50px;
  background-color: #CDF5FF;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  cursor: pointer;
  position:absolute;
  top: 50%;
  font-size: 1.25rem;
  transform: translateY(-50%);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 23);
}
.wrapper i:first-child {
  left: 10px;
}
.wrapper i:last-child {
  right: 3px;
}
.wrapper .carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% / 3) - 12px);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: 0;
}
.carousel::-webkit-scrollbar{
  display:none;
}
.carousel :where(.card, .img) {
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel.no-transition{
  scroll-behavior: auto;
}
.carousel.dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
}
.carousel.dragging .card{
  cursor: grab;
  user-select: none;
}
.carousel .card{
  scroll-snap-align:start;
  height: 342px;
  list-style: none;
  background-color: #CDF5FF;
  border-radius: 8px;
  display: flex;
  cursor: pointer;
  padding-bottom: 15px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.card .img img {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 5%;
}
.card h2 {
  font-weight: 500;
  font-size: 1.56rem;
  margin: 30px 0 5px;
  text-align: center;
}
.card span{
  font-family: 'Josefin Sans', sans-serif;
  font-size: 1rem;
  text-align: center;
}
.card a{
  text-align: center;
}
@media screen and (max-width: 900px) {
  .wrapper .carousel{
    grid-auto-columns: calc((100% / 2) - 9px);
  }
}

@media screen and (max-width: 600px) {
  .wrapper .carousel{
    grid-auto-columns: 100%;
  }
}

/* EVENTOS */
.contenedor-eventos figure{
  border-radius: 5px;
  position: relative;
  overflow: hidden;
}

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

.contenedor-eventos figure:hover figcaption {
  background-color: hsla(307, 15%, 35%, 0.75);
  transition: all .3s ease;  
  transform: translateY(0);
  display: grid;
  text-align: center;
  place-items: center;
  place-content: center;
  padding-inline: .5em;
}

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

.contenedor-eventos figcaption{
background-color:hsl(312, 99%, 40%);
color:#FDFEFE;
padding: .5em;
line-height: 2em;
font-family: 'Josefin Sans', sans-serif;
text-transform: uppercase;
font-weight: 800;
position: absolute;
inset: 0;
transform: translateY(calc(100% - 4em));
transition: all .6s ease;
}

.contenedor-eventos figcaption span {
  display: block;
  font-size: 1em;
  color:#FDFEFE;
  margin-block-start: -.5em;
  text-transform: none;
}

.contenedor-eventos figcaption a {
  display: inline-block;
  margin-block-start: .5em;
  background-color:hsl(296, 83%, 26%);
  color: hsl(0 0% 90% / 0.85);
  padding: .25em 1em;
  border-radius: 2em;
}

.contenedor-eventos figcaption a:hover {
  background-color:hsl(312, 99%, 40%) ;
  box-shadow: 0 .25em .25em hsla(0, 0%, 0%, 0.25);
  color: hsl(0 0% 90%);
}

video{
width:100%;
height: auto;
margin-bottom: 2em;
}

/*diomede- ESTO ES LO NUEVO*/

.galeria-diomede {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  width: 95%;
  margin: auto;
  grid-gap: 10px;
  padding: 40px 0;
  overflow: hidden;
}

.galeria-item {
  position: relative;
  overflow: hidden;
}

.galeria-item:hover::before {
  content: attr(data-texto);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(83, 5, 82, 0.7);
  color: white;
  font-size: 1.5em;
  max-width: 80%; 
  padding: 10px;
  opacity: 0;
  transition: opacity 0.3s;
}

.galeria-item:hover::before,
.galeria-item:hover img {
  opacity: 1;
}

.galeria-diomede img {
  width: 100%;
  border-radius: 5px;
  vertical-align: top;
  height: 300px;
  object-fit: cover;
  transition: transform 0.5s;
}

.galeria-item:hover::before {
  font-size: 1em; 
  line-height: 1em;
  font-family: 'Josefin Sans', sans-serif;  
}

@media screen and (max-width: 768px) {
  .galeria-item:hover::before {
    font-size: 1em;
    line-height: 1em;
    font-family: 'Josefin Sans', sans-serif;  
  }
}
/*HASTA ACA*/ 
/*casa museo*/
.contenedor-casa figure{
  border-radius: 5px;
  position: relative;
  overflow: hidden;
}

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

.contenedor-casa figure:hover figcaption {
  background-color: hsla(306, 26%, 22%, 0.75);
  transition: all .3s ease;  
  transform: translateY(0);
  display: grid;
  text-align: center;
  place-items: center;
  place-content: center;
  padding-inline: .5em;
}

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

.contenedor-casa figcaption{
background-color:hsl(296, 83%, 26%);
color:#FDFEFE;
padding: .5em;
line-height: 2em;
font-family: 'Josefin Sans', sans-serif;
text-transform: uppercase;
font-weight: 800;
position: absolute;
inset: 0;
transform: translateY(calc(100% - 4em));
transition: all .6s ease;
}

.contenedor-casa figcaption span {
  display: block;
  font-size: 1em;
  color:#FDFEFE;
  margin-block-start: -.5em;
  text-transform: none;
}

.contenedor-casa figcaption a {
  display: inline-block;
  margin-block-start: .5em;
  background-color:hsl(296, 83%, 26%);
  color: hsl(0 0% 90% / 0.85);
  padding: .25em 1em;
  border-radius: 2em;
}

.contenedor-casa figcaption a:hover {
  background-color:hsl(312, 99%, 40%) ;
  box-shadow: 0 .25em .25em hsla(0, 0%, 0%, 0.25);
  color: hsl(0 0% 90%);
}

.galeria{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
width: 95%;
margin: auto;
grid-gap:10px;
padding:40px 0;
overflow: hidden;
}

.galeria img{
  width: 100%;
  border-radius: 5px;
  vertical-align: top;
  height: 300px;
  object-fit: cover;
  transition: transform 0.5s;
}
.galeria a{
display: block;
position: relative;
overflow: hidden;
}
.galeria a:hover img{
filter:blur(2px);
transform: rotate(10deg) scale(1.3);
}
.light-box{
  position: fixed;
  top:0;
  left:0;
  background: hsla(306, 26%, 22%, 0.75);
  transition: transform .3s ease-in-out;
  width: 100%;
  height: 100vh;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: scale(0);
}
.light-box:target{
transform: scale(1);
}
.light-box img{
  width: 75vw;
  max-height: 70vh;
}
.close {
  display: block;
  position: absolute;
  top:40px;
  right: 40px;
  background: #710B79;
  color:#ececec;
  text-decoration: none;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
  font-family: 'Josefin Sans', sans-serif;
}

.next{
  display: block;
  background: #710B79;
  color:#ececec;
  height: 30px;
  width: 30px;
  line-height: 30px;
  text-decoration: none;
  text-align: center;
}

@media screen and (max-width: 25em){
  .galeria{
    grid-template-columns: repeat(minmax (200px, 1fr));
  }
  .close{
    top:20px;
    right: 20px;
  }
  #dirección p{
    display:inline-block;
    font-size: 1em; 
   }
   
  .textocontacto{
    width: auto;
  }

}
  
/*empieza contacto*/
.titulocontacto {
  color: #CDF5FF;
  width: 100%;
  padding: 0.5em;
  position: relative;
  text-align: center;
  min-height: 10rem;
  background-image: url(../imagenes/fondocontacto.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  margin:auto;
}

.titulocontacto h3{
    text-transform: uppercase;
    }
    .titulocontacto p{
      color: #CDF5FF;
      display: block;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
    }

div {
    display: block;
    }

 .titulocontacto img{
  width: 100%;
  height: auto;
  display: block;
 }

 .textocontacto {
  position: absolute;
  width: 100%;
  margin: auto;
  height: fit-content;
  padding-inline: 1rem; 
}

 article .formularios{
  display: flex;
  flex-wrap: wrap;
 }
 #dirección li{
  display:flex;
  flex-wrap: wrap;
  color: #0331A1;
  font-weight: 700;
  line-height: 1.3em;
  margin-left: 0em;
 }

 #dirección li span{
  display:flex;
  flex-wrap: wrap;
  word-wrap: break-word;
  font-weight: 400;
  color: #0331A1;
 }

 iframe{
  width: 100%;
  height: auto;
 }

input[type=text], select, textarea {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 1.1em;
  width: 100%; 
  padding: 12px; 
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box; 
  margin-top: 6px; 
  margin-bottom: 16px; 
  resize: vertical 
}


input[type=submit] {
  font-family: 'Josefin Sans', sans-serif;
  background-color:#0331A1;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color:#F98810;
}

.container {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 1.1em;
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  width: 50%;
} 

.article-container {
  display: flex;
  flex-wrap: wrap;
}

.datosmuseo {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 600px; 
}

.datosmuseo li {
  margin-bottom: 10px; 
}
.container {
  text-align: center;
}

#dirección {
  text-align: left; 
}

.article-container .container iframe {
  width: 100%;
  height: auto;
}
.container {
  flex: 1;
  padding: 1rem;
  margin: 0.6em; 
  box-sizing: border-box;
}
.datosmuseo span {
  overflow:auto;
  overflow-wrap: break-word;
  display: block; 
}


@media (max-width: 35em) {
  .container {
    flex:auto;
  }
}

/*aca empieza el footer*/
   footer{
    background-color:#710B79;
    padding: 20px;
    margin: auto;
   }

   p.texto-footer {
    margin: auto;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 300;
    font-size: .8rem;
    color: #e18ae5;
}
  
   .logofooter{
    max-width: 100px; 
    height: auto; 
    margin: auto;
  }

.boton-scan{
    background-color: #F98810;
    border: 4px solid #C901A1;
    border-radius: 50%;
    box-shadow: 0 0.15em 0.1em hsla(0 0% 0% / 0.215);
    cursor: pointer;
    width: 4rem;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 1;
}

@media only screen and (min-width: 768px) {
  .boton-scan {
      display: none; /* Oculta el botón en dispositivos más grandes que 767px */
  }
}


   /*fin home*/
   /* aca empieza casa museo*/

   #portada {
    position: relative;
    margin-top: 0; 
    margin-bottom: 2em;
   }

 
  
  .objetos{
    margin-bottom: 2em;
    padding-top: 2em;
    background-color:#710B79;
    box-shadow: 5px 8px 8px grey;
    position: relative;
    display: flex;
    max-width: max-content;
    justify-content: center;
    margin:auto;
    align-items:center
  
  }

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

    h3.galeria{
      color:#FDFEFE;
    }
    .obras{
      margin: auto;
      margin-top: 2em;
      margin-bottom: 2em;
      padding-top: 2em;
      background-color:#710B79;
      box-shadow: 5px 8px 8px grey;
      position: relative;
      display: flex;
      max-width: max-content;
      justify-content: center;
      align-items:center
    }

    @media(min-width: 50em) {

      .galeria {
        padding: 1em;
      }
    
      .textos h3 {
        padding: 1em;
      }

      .menuVisible ul {
        display:flex
      }
    
    }
    
    /* cambios a partir de los 1200px */
    @media(min-width: 75em) {
    
      .galeria {
        background-color: hsl(198 50% 44% / 0.1);
        margin-block-start: 0;
        margin-block-end: 3em;
        padding-inline: 4em;
        width: 100%;
        min-height: 60vh;
        display: grid;
        align-items: center;
        align-content: center;
      }
    
    
    }