* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

html,
body {
  font-size: 62.5%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  scroll-behavior: smooth;
  background: #fbf4d3;
}

.landing {
  position: relative;

  z-index: 1;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wheel-container, .wheelS3-container {
  position: absolute;
  bottom: 10%;
  left: 50%;
  width: 150%; /* ancho de la rueda */
  height: auto;
  transform: translateX(-50%); /* centra exactamente la rueda */
  overflow: visible;
  z-index: -1;
}
.wheelS3-container{
  bottom: none;
  top:20%;
  width: 120%;
  z-index:0;
  
}
/* Rueda giratoria */
.wheel {
  width: 100%;
  height: auto;
  animation: spin 20s linear infinite;
  transform-origin: center center;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.title-container {
  position: absolute;
  z-index: 2;
  width: 60%;
  bottom: 10%;
  text-shadow: 5px 5px 10px black;
  box-shadow: inset;
}

.title-container1 {
  position: absolute;
  z-index: 2;
  width: 45%;
  right: 0;
  text-shadow: 5px 5px 10px black;
  animation: slideInRightRetro1 2.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
  opacity: 0;
/* animation-delay: 1s; */

}
.title-container4{
    position: absolute;
  z-index: 2;
  width: 47%;
  top: 10%;
  right: 8%;
  text-shadow: 5px 5px 10px black;
  animation: slideInRightRetro 2.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
  opacity: 0;
animation-delay: 1s;
}
.title-container2 {
  position: absolute;
  z-index: 1;
  width: 47%;
  left: 2.5%;
  top: 16%;
  text-shadow: 5px 5px 10px black;
  opacity: 1;
  animation: slideInDownRetro 1.5s ease-out;

}
.music-container {
  position: absolute;
  z-index: 1;
  width: 53%;
  left: 2%;
  bottom: 0%;
  animation: slideInLeftRetro 2.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
  opacity: 0;
  animation-delay: .5s; /* Llega un poco después para dar ritmo */


}

@keyframes slideInRightRetro1 {
  0% {
    transform: translateX(120%) rotate(20deg) scale(0.8);
    opacity: 0;
    filter: brightness(1.4) hue-rotate(40deg);
  }
  60% {
    transform: translateX(-10%) rotate(-5deg) scale(1.05);
    opacity: 1;
  }
  80% {
    transform: translateX(5%) rotate(2deg);
  }
  100% {
    transform: translateX(-5%) rotate(0deg) scale(1);
    opacity: 1;
    filter: brightness(1) hue-rotate(0deg);
  }
}


/* 🌟 De derecha al centro con rebote y ligera rotación (tipo cartel que entra) */
@keyframes slideInRightRetro {
  0% {
    transform: translateX(120%) rotate(20deg) scale(0.8);
    opacity: 0;
    filter: brightness(1.4) hue-rotate(40deg);
  }
  60% {
    transform: translateX(-10%) rotate(-5deg) scale(1.05);
    opacity: 1;
  }
  80% {
    transform: translateX(5%) rotate(2deg);
  }
  100% {
    transform: translateX(0) rotate(0deg) scale(1);
    opacity: 1;
    filter: brightness(1) hue-rotate(0deg);
  }
}

/* 🌟 De izquierda al centro, rebotando como una placa luminosa */
@keyframes slideInLeftRetro {
  0% {
    transform: translateX(-120%) rotate(-20deg) scale(0.8);
    opacity: 0;
    filter: brightness(1.4) hue-rotate(-40deg);
  }
  60% {
    transform: translateX(8%) rotate(5deg) scale(1.05);
    opacity: 1;
  }
  80% {
    transform: translateX(-4%) rotate(-2deg);
  }
  100% {
    transform: translateX(0) rotate(0deg) scale(1);
    opacity: 1;
    filter: brightness(1) hue-rotate(0deg);
  }
}
/* ANIMACIÓN: desde abajo al centro con rotación de abanico y hue-rotate */
@keyframes slideInUpRetro {
  0% {
    transform: translateY(120%) rotate(-40deg) scale(0.8);
    opacity: 0;
    filter: brightness(0.6) saturate(0.7) hue-rotate(0deg);
  }
  30% {
    transform: translateY(30%) rotate(25deg) scale(1.1);
    opacity: 1;
    filter: brightness(1.3) saturate(1.5) hue-rotate(90deg);
  }
  55% {
    transform: translateY(-10%) rotate(-10deg) scale(1.05);
    filter: brightness(1.1) saturate(1.2) hue-rotate(180deg);
  }
  75% {
    transform: translateY(5%) rotate(5deg) scale(0.98);
    filter: brightness(1) hue-rotate(270deg);
  }
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
    opacity: 1;
    filter: brightness(1) saturate(1) hue-rotate(360deg);
  }
}

/* ANIMACIÓN: desde arriba hacia el centro (igual que antes) */
@keyframes slideInDownRetro {
  0% {
    transform: translateY(-100%) scale(0.9) rotate(2deg);
    opacity: 0;
    filter: brightness(0.6) saturate(0.7);
  }
  60% {
    transform: translateY(10%) scale(1.05) rotate(-1deg);
    opacity: 1;
    filter: brightness(1.2) saturate(1.3);
  }
  80% {
    transform: translateY(-5%) scale(0.98);
  }
  100% {
    transform: translateY(0) scale(1) rotate(0);
    opacity: 1;
    filter: brightness(1) saturate(1);
  }
}
.subtitle-container {
  position: absolute;
  z-index: 2;
  bottom: 2%;
}
.subtitle-container h2 {
  color: #ffd93d;
  font-size: 45px;
  text-shadow: 3px 3px 5px black;
  font-family: "CourierPrime-Bold";
}
.acronym {
  font-variant: small-caps;
}

p {
  font-family: "CourierPrime-Regular";
  font-size: 2rem;
  line-height: 2.5rem;
  color: black;
  margin-top: 2rem;
}

.bold {
  font-family: "CourierPrime-Bold";
}

.landing img {
  width: 100%;
}
.intro {
  position: relative;
  /* display: flex;
  justify-content: center;
  align-items: center; */
  margin: auto;
}
/* .intro img{
  width: 100%;
} */

.intro .introBg {
  width: 100%;
  height: auto;
}
.nucleo1 {
  width: 17.2vw;
  position: absolute;
  top: calc(58.1% - 17.2vw / 2);
  left: calc(30.3% - 9.8vw / 2);
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.5s, transform 0.5s;
  transform: rotate(-25deg);
}
.nucleo1:hover {
  opacity: 1;
  transform: rotate(-25deg) scale(1.05);
}
.nucleo2 {
  width: 18vw;
  position: absolute;
  top: calc(48.3% - 18vw / 2);
  left: calc(49.2% - 9.8vw / 2);
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.5s, transform 0.5s;
  transform: rotate(-26deg);
}
.nucleo2:hover {
  opacity: 1;
  transform: rotate(-26deg) scale(1.05);
}
.nucleo3 {
  width: 17.3vw;
  position: absolute;
  top: calc(76.3% - 17.3vw / 2);
  left: calc(38.4% - 9.8vw / 2);
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.5s, transform 0.5s;
  transform: rotate(-29deg);
}
.nucleo3:hover {
  opacity: 1;
  transform: rotate(-29deg) scale(1.05);
}
.nucleo4 {
  width: 17.5vw;
  position: absolute;
  top: calc(63.7% - 17.5vw / 2);
  left: calc(59% - 9.8vw / 2);
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.5s, transform 0.5s;
  transform: rotate(-28deg);
}
.nucleo4:hover {
  opacity: 1;
  transform: rotate(-28deg) scale(1.05);
}
.bubbles-container {
  position: absolute;
  width: 100%;
  top: 0;
  z-index: 1;
}
.bubbles-container2{
   position: absolute;
  width: 100%;
  bottom: 0;
  z-index: 1;
    transform: rotateX(180deg);
  transform-style: preserve-3d;
  backface-visibility: visible;
}
.modalIntro {
  font-family: "Chicle-Regular";
  font-size: 8.5rem;
  text-shadow: 3px 3px 5px black;
  color: #ffd93d;
  position: absolute;
  left: 5%;
  /* width: 30%; */
  top: 15%;
  background-color: transparent;
  border: none;
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.btnSources {
  background-color: #ff3e96;
  border: 8px solid #ffd93d;
  font-family: "Chicle-Regular";
  width: 100%;
  font-size: 3.5rem;
  padding: 1.5rem;
  color: #ffd93d;
}
.btnCredits {
  background-color: #4e65ed;
  border: 8px solid #ffd93d;
  font-family: "Chicle-Regular";
  width: 100%;
  font-size: 3.5rem;
  padding: 1.5rem;
  color: #ffd93d;
}

h3 {
  font-family: "CourierPrime-Bold";
  font-size: 2rem;
  line-height: 2.5rem;
}

#introModal {
  background-color: #4e66ed8c;
}

#introModal .modal-dialog .modal-content {
  background-color: transparent;
  border: none;
}

#introModal .modal-dialog .modal-content .modal-header {
  border: none;
}
#introModal .modal-dialog .modal-content .modal-header .btn-close {
  --bs-btn-close-bg: url("/work/models/memorica/recursos/exposiciones/cuandoLaMusicaAgitaba/img/landing/close.svg");
  --bs-btn-close-opacity: 1;
  width: 3rem;
  height: 3rem;
  background-size: 3rem;
  margin-bottom: 3rem;
    background-image:url("/work/models/memorica/recursos/exposiciones/cuandoLaMusicaAgitaba/img/landing/close.svg") ;
    opacity: 1;
}

.btn-close {
   background-image:url("/work/models/memorica/recursos/exposiciones/cuandoLaMusicaAgitaba/img/landing/close.svg") ;
}
#introModal .modal-dialog .modal-content .modal-body {
  background-image: url("/work/models/memorica/recursos/exposiciones/cuandoLaMusicaAgitaba/img/landing/dfs1.png");
  padding: 10rem 5rem 5rem 5rem;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.dfs-container {
  width: 40%;
}
.firm {
  text-align: center;
  padding-bottom: 5rem;
  padding-top: 5rem;
}

.date {
  text-align: end;
  padding-bottom: 5rem;
}
.decor-container {
  width: 100%;
}
.decor-container img {
  width: 100%;
}

.nucleos a {
  position: absolute;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
  transform: rotate(var(--rot));
}

/* posiciones individuales */
.nucleo1 {
  --rot: -25deg;
  width: 17.3vw;
  top: calc(56.3% - 17.3vw / 2);
  left: calc(29.9% - 9.8vw / 2);
}
.nucleo2 {
  --rot: -26deg;
  width: 18.2vw;
  top: calc(46.2% - 18.2vw / 2);
  left: calc(48.6% - 9.8vw / 2);
}
.nucleo3 {
  --rot: -29deg;
  width: 17.3vw;
  top: calc(74% - 17.3vw / 2);
  left: calc(38% - 9.8vw / 2);
}
.nucleo4 {
  --rot: -28deg;
  width: 17.5vw;
  top: calc(61.7% - 17.5vw / 2);
  left: calc(58.5% - 9.8vw / 2);
}

.nucleos a img {
  width: 100%;
  height: auto;
}

/* estado activo de la animación */
.nucleos a.activo {
  opacity: 1;
  transform: rotate(var(--rot)) scale(1.05);
}

.landing1, .landing2, .landing3 {
  /* background-image: url("/work/models/memorica/recursos/exposiciones/cuandoLaMusicaAgitaba/img/s1/landingS1_.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: fondoTrip 10s linear infinite, zoomTrip 8s ease-in-out infinite; */
  /* margin-top: 50px; */
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.landing1 img, .landing2 img, .landing3 img  {
  width: 100%;
}
@keyframes zoomTrip {
  0% {
    background-size: 120%;
    background-position: 50% 50%;
  }
  50% {
    background-size: 123%;
    background-position: 51% 49%;
  }
  100% {
    background-size: 120%;
    background-position: 50% 50%;
  }
}
@keyframes fondoTrip {
  0% {
    background-position: 50% 50%;
  }
  25% {
    background-position: 52% 48%;
  }
  50% {
    background-position: 50% 52%;
  }
  75% {
    background-position: 48% 50%;
  }
  100% {
    background-position: 50% 50%;
  }
}
.s1 {
  background-color: white;
}
.flower-container {
  position: absolute;
  width: 100px;
  bottom: 0;
  right: 3%;
  z-index: 2;
}
.flower-containerBook {
  position: absolute;
  width: 100px;
  bottom: 0;
  right: 0;
}
.flower-container2 {
  position: absolute;
  width: 100px;
  bottom: 3%;
  left: 3%;
}
.flower-container2 {
  position: absolute;
  width: 100px;
  bottom: 3%;
  left: 3%;
  z-index: 2;
}
.flower-container3, .flower-container4 {
  position: absolute;
  width: 100px;
  bottom: 28%;
  left: 3%;
  z-index: 2;
}
.flower-containerIntro {
  position: absolute;
  width: 100px;
  bottom: 3%;
  right: 3%;
}
.popover {
  --bs-popover-bg: #fbf4d3;
}
.popover p {
  font-size: 1.5rem;
  line-height: 1.8rem;
}

.photos {
  position: relative;
}

.grid-album1 {
  display: grid;
  grid-template-areas:
    "img1 img2"
    "img3 img4";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 70vh 73vh;
}

.grid-album1 .image {
  position: relative;
  overflow: hidden;
  display: block;
  cursor: pointer;
   height: 100%;      /* llena toda la fila */
  
}

/* Asignar las áreas */
.grid-album1 .image:nth-child(1) { grid-area: img1; }
.grid-album1 .image:nth-child(2) { grid-area: img2; }
.grid-album1 .image:nth-child(3) { grid-area: img3; }
.grid-album1 .image:nth-child(4) { grid-area: img4; }

/* Pseudo-elemento que contendrá la imagen */
.grid-album1 .image::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 1s ease;
  height: 100%;      /* pseudo-elemento también llena la celda */
  width: 100%;
  display: block;
 
}
.image-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
}
/* Asignar las imágenes */
.grid-album1 .image:nth-child(1)::before {
  background-image: url("/work/models/memorica/recursos/exposiciones/cuandoLaMusicaAgitaba/img/s1/img1_1.jpg");
  background-position: top center;
}
.grid-album1 .image:nth-child(2)::before {
  background-image: url("/work/models/memorica/recursos/exposiciones/cuandoLaMusicaAgitaba/img/s1/img1_2.jpg");
  background-position: top center;
}
.grid-album1 .image:nth-child(3)::before {
  background-image: url("/work/models/memorica/recursos/exposiciones/cuandoLaMusicaAgitaba/img/s1/img1_3.jpg");
  background-position: center center;
}
.grid-album1 .image:nth-child(4)::before {
  background-image: url("/work/models/memorica/recursos/exposiciones/cuandoLaMusicaAgitaba/img/s1/img1_4.jpg");
  background-position: top center;
}

/* Efecto de zoom */
.grid-album1 .image:hover::before {
  transform: scale(1.1);
}

.grid-album2 {
  display: grid;
  grid-template-areas:
    "img5 img7"
    "img6 img7";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 70vh 70vh;
}
.grid-album3 {
  display: grid;
  grid-template-areas:
    "img2_1 img2_2"
    "img2_1 img2_3"
    "img2_4 img2_5"
    "img2_6 img2_7"
    "img2_8 img2_10"
    "img2_9 img2_10" ;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 70vh 70vh;
}

.grid-album4 {
  display: grid;
  grid-template-areas:
    "img3_5 img3_5 img3_6 img3_6"
    "img3_7 img3_7 img3_8 img3_8"
  "img3_9 img3_10 img3_10 img3_10"
   "img3_11 img3_11 img3_11 img3_12";
  grid-template-columns: 1fr 1fr 1fr 1fr;
  /* grid-auto-rows: 70vh; */
  grid-template-rows: repeat(4, 70vh);
}

.grid-album2 .image, .grid-album3 .image, .grid-album4 .image, .grid-album5 .image {
  position: relative;
  overflow: hidden;
  display: block;
  cursor: pointer;
   height: 100%;      /* llena toda la fila */
  
}

/* Pseudo-elemento que contendrá la imagen */
.grid-album2 .image::before, .grid-album3 .image::before, .grid-album4 .image::before, .grid-album5 .image::before  {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 1s ease;
  height: 100%;      /* pseudo-elemento también llena la celda */
  width: 100%;
  display: block;

}

/* Asignación de áreas + imágenes */
.grid-album2 .image:nth-child(1) {
  grid-area: img5;
}
.grid-album2 .image:nth-child(1)::before {
  background-image: url("/work/models/memorica/recursos/exposiciones/cuandoLaMusicaAgitaba/img/s1/img1_5.jpg");
  background-position: top center;
}

.grid-album2 .image:nth-child(2) {
  grid-area: img7;
}
.grid-album2 .image:nth-child(2)::before {
  background-image: url("/work/models/memorica/recursos/exposiciones/cuandoLaMusicaAgitaba/img/s1/img1_7.jpg");
  background-position: top center;
}

.grid-album2 .image:nth-child(3) {
  grid-area: img6;
}
.grid-album2 .image:nth-child(3)::before {
  background-image: url("/work/models/memorica/recursos/exposiciones/cuandoLaMusicaAgitaba/img/s1/img1_6.jpg");
  background-position: top center;
}
/* Efecto de zoom */
.grid-album2 .image:hover::before, .grid-album3 .image:hover::before, .grid-album4 .image:hover::before, .grid-album5 .image:hover::before {
  transform: scale(1.1);
}
.grid-album3 .image:nth-child(1) {
  grid-area: img2_1;
}
.grid-album3 .image:nth-child(1)::before {
  background-image: url("/work/models/memorica/recursos/exposiciones/cuandoLaMusicaAgitaba/img/s2/img2_1.jpg");
  background-position: top center;
}

.grid-album3 .image:nth-child(2) {
  grid-area: img2_2;
}
.grid-album3 .image:nth-child(2)::before {
  background-image: url("/work/models/memorica/recursos/exposiciones/cuandoLaMusicaAgitaba/img/s2/img2_2.jpg");
  background-position: top center;
}

.grid-album3 .image:nth-child(3) {
  grid-area: img2_3;
}
.grid-album3 .image:nth-child(3)::before {
  background-image: url("/work/models/memorica/recursos/exposiciones/cuandoLaMusicaAgitaba/img/s2/img2_3.jpg");
  background-position: top center;
}
.grid-album3 .image:nth-child(4) {
  grid-area: img2_4;
}
.grid-album3 .image:nth-child(4)::before {
  background-image: url("/work/models/memorica/recursos/exposiciones/cuandoLaMusicaAgitaba/img/s2/img2_4.jpg");
  background-position: top center;
}

.grid-album3 .image:nth-child(5) {
  grid-area: img2_5;
}
.grid-album3 .image:nth-child(5)::before {
  background-image: url("/work/models/memorica/recursos/exposiciones/cuandoLaMusicaAgitaba/img/s2/img2_5.jpg");
  background-position: top center;
}

.grid-album3 .image:nth-child(6) {
  grid-area: img2_6;
}
.grid-album3 .image:nth-child(6)::before {
  background-image: url("/work/models/memorica/recursos/exposiciones/cuandoLaMusicaAgitaba/img/s2/img2_6.jpg");
  background-position: top center;
}
.grid-album3 .image:nth-child(7) {
  grid-area: img2_7;
}
.grid-album3 .image:nth-child(7)::before {
  background-image: url("/work/models/memorica/recursos/exposiciones/cuandoLaMusicaAgitaba/img/s2/img2_7.jpg");
  background-position: top center;
}
.grid-album3 .image:nth-child(8) {
  grid-area: img2_8;
}
.grid-album3 .image:nth-child(8)::before {
  background-image: url("/work/models/memorica/recursos/exposiciones/cuandoLaMusicaAgitaba/img/s2/img2_8.jpg");
  background-position: top center;
}

.grid-album3 .image:nth-child(9) {
  grid-area: img2_9;
}
.grid-album3 .image:nth-child(9)::before {
  background-image: url("/work/models/memorica/recursos/exposiciones/cuandoLaMusicaAgitaba/img/s2/img2_9.jpg");
  background-position: top center;
}

.grid-album3 .image:nth-child(10) {
  grid-area: img2_10;
}
.grid-album3 .image:nth-child(10)::before {
  background-image: url("/work/models/memorica/recursos/exposiciones/cuandoLaMusicaAgitaba/img/s2/img2_10.jpg");
  background-position: top center;
}


.grid-album4 .image:nth-child(1) {
  grid-area: img3_5;
}
.grid-album4 .image:nth-child(1)::before {
  background-image: url("/work/models/memorica/recursos/exposiciones/cuandoLaMusicaAgitaba/img/s3/img3_5.jpg");
  background-position: top center;
}

.grid-album4 .image:nth-child(2) {
  grid-area: img3_6;
}
.grid-album4 .image:nth-child(2)::before {
  background-image: url("/work/models/memorica/recursos/exposiciones/cuandoLaMusicaAgitaba/img/s3/img3_6.jpg");
  background-position: top center;
}

.grid-album4 .image:nth-child(3) {
  grid-area: img3_7;
}
.grid-album4 .image:nth-child(3)::before {
  background-image: url("/work/models/memorica/recursos/exposiciones/cuandoLaMusicaAgitaba/img/s3/img3_7.jpg");
  background-position: top center;
}
.grid-album4 .image:nth-child(4) {
  grid-area: img3_8;
}
.grid-album4 .image:nth-child(4)::before {
  background-image: url("/work/models/memorica/recursos/exposiciones/cuandoLaMusicaAgitaba/img/s3/img3_8.jpg");
  background-position: top center;
}

.grid-album4 .image:nth-child(5) {
  grid-area: img3_9;
}
.grid-album4 .image:nth-child(5)::before {
  background-image: url("/work/models/memorica/recursos/exposiciones/cuandoLaMusicaAgitaba/img/s3/img3_9.jpg");
  background-position: top center;
}

.grid-album4 .image:nth-child(6) {
  grid-area: img3_10;
}
.grid-album4 .image:nth-child(6)::before {
  background-image: url("/work/models/memorica/recursos/exposiciones/cuandoLaMusicaAgitaba/img/s3/img3_10.jpg");
  background-position: bottom center;
}
.grid-album4 .image:nth-child(7) {
  grid-area: img3_11;
}
.grid-album4 .image:nth-child(7)::before {
  background-image: url("/work/models/memorica/recursos/exposiciones/cuandoLaMusicaAgitaba/img/s3/img3_11.jpg");
  background-position: top center;
}
.grid-album4 .image:nth-child(8) {
  grid-area: img3_12;
}
.grid-album4 .image:nth-child(8)::before {
  background-image: url("/work/models/memorica/recursos/exposiciones/cuandoLaMusicaAgitaba/img/s3/img3_12.jpg");
  background-position: top center;
}


.grid-album5 {
  display: grid;
  grid-template-areas:
    "img4_3 img4_4"
    "img4_5 img4_6"
  "img4_7 img4_7 "
   "img4_8 img4_9"
   "img4_10 img4_10";
  grid-template-columns: 1fr 1fr ;
  /* grid-auto-rows: 70vh; */
  grid-template-rows: repeat(5, 70vh);
}


.grid-album5 .image:nth-child(1) {
  grid-area: img4_5;
}
.grid-album5 .image:nth-child(1)::before {
  background-image: url("/work/models/memorica/recursos/exposiciones/cuandoLaMusicaAgitaba/img/s4/img4_3.jpg");
  background-position: top center;
}

.grid-album5 .image:nth-child(2) {
  grid-area: img4_6;
}
.grid-album5 .image:nth-child(2)::before {
  background-image: url("/work/models/memorica/recursos/exposiciones/cuandoLaMusicaAgitaba/img/s4/img4_4.jpg");
  background-position: bottom center;
}

.grid-album5 .image:nth-child(3) {
  grid-area: img4_3
}
.grid-album5 .image:nth-child(3)::before {
  background-image: url("/work/models/memorica/recursos/exposiciones/cuandoLaMusicaAgitaba/img/s4/img4_5.jpg");
  background-position: top center;
}
.grid-album5 .image:nth-child(4) {
  grid-area: img4_4;
}
.grid-album5 .image:nth-child(4)::before {
  background-image: url("/work/models/memorica/recursos/exposiciones/cuandoLaMusicaAgitaba/img/s4/img4_6.jpg");
  background-position: top center;
}

.grid-album5 .image:nth-child(5) {
  grid-area: img4_8;
}
.grid-album5 .image:nth-child(5)::before {
  background-image: url("/work/models/memorica/recursos/exposiciones/cuandoLaMusicaAgitaba/img/s4/img4_7.jpg");
  background-position: top center;
}

.grid-album5 .image:nth-child(6) {
  grid-area: img4_7;
}
.grid-album5 .image:nth-child(6)::before {
  background-image: url("/work/models/memorica/recursos/exposiciones/cuandoLaMusicaAgitaba/img/s4/img4_8.jpg");
  background-position:  center;
}
.grid-album5 .image:nth-child(7) {
  grid-area: img4_9;
}
.grid-album5 .image:nth-child(7)::before {
  background-image: url("/work/models/memorica/recursos/exposiciones/cuandoLaMusicaAgitaba/img/s4/img4_9.jpg");
  background-position: top center;
}
.grid-album5 .image:nth-child(8) {
  grid-area: img4_10;
}
.grid-album5 .image:nth-child(8)::before {
  background-image: url("/work/models/memorica/recursos/exposiciones/cuandoLaMusicaAgitaba/img/s4/img4_10.jpg");
  background-position: bottom center;
}

.wheelS2-container{
  width: 130%;
  position: absolute;
  right: 57.5%;
  animation: rotateWheel 5s ease-in-out;

}

.hippies-container {
  width: 52%;
  position: absolute;
  bottom: 0;
  right: 0;
  
  animation: slideInRightRetro 2.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
  animation-delay: 0.3s;
}
.hippies4-container {
  width: 70%;
  position: absolute;
  bottom: 0;
 left: 0;
  
  animation: slideInLeftRetro 2.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
  animation-delay: 0.3s;
}

.hippies3-container{
  width: 68%;
  position: absolute;
 bottom: 0;
  animation: slideInUpRetro 2s cubic-bezier(0.25, 1.3, 0.5, 1) ;
  transform-origin: center bottom
}
.landing2, .landing3{
 overflow: hidden; /* para que el destello no se salga del contenedor */
}
/* capa del destello */
.landing2::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  animation: lensFlare 9s ease-in-out infinite;
  animation-delay: 2s;
}

/* animación del brillo */
@keyframes lensFlare {
  0% {
    left: -75%;
  }
  50% {
    left: 125%;
  }
  100% {
    left: 125%;
  }
}
@keyframes rotateWheel {
  0%{
    transform: rotate(100deg);
  }
  40% {
    transform: rotate(60deg);
  }
    60% {
    transform: rotate(120deg);
  }
  100%{
    transform: rotate(0deg);
  }
}
.photosOrnament{
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.photosOrnament-container{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 65vh;
}

.photosOrnament-container .leftPhotoOrnaments{
  position: absolute;
  width: 40%;
  top: 39%;
  left: 6%;
  z-index: 0;
  transform: rotate(2deg);
}
.photosOrnament-container .centerPhotoOrnaments{
  position: absolute;
  width: 40%;
  top: 42%;
  z-index: 0;
  transform: rotate(-2deg);
 /* box-shadow: 5px 5px 10px black; */
}
.centerPhotoOrnaments::before, .leftPhotoOrnaments::before, .rightPhotoOrnaments::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  filter: blur(20px);
  transform: translate(10px, 10px);
  z-index: -1; /* coloca la sombra detrás */
  border-radius: 20px; /* opcional, suaviza los bordes */
}
.photosOrnament-container .rightPhotoOrnaments{
  position: absolute;
   width: 41%;
  top: 39.5%;
  right: 6%;
  z-index: 0;
  transform: rotate(2deg);
}
.photosOrnament-container2{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 35vh;
}

.photosOrnament-container2 .leftPhotoOrnaments{
  position: absolute;
  width: 40%;
 
  left: 6%;
  z-index: 0;
  transform: rotate(2deg);
}
.photosOrnament-container2 .rightPhotoOrnaments{
  position: absolute;
   width: 40%;

  right: 6%;
  z-index: 0;
  transform: rotate(-2deg);
}

.ornament{
  cursor: pointer;
  transition: transform 1s;
}
.ornament:hover{
  transform: scale(1.05);
}
.title-container3a {
  position: absolute;
  z-index: 1;
  width: 125%;
  left: 4%;
  top: 12%;
  text-shadow: 5px 5px 10px black;
  opacity: 1;
  animation: slideInDownRetro 1.5s ease-out;

}
.title-container3b {
  position: absolute;
  z-index: 1;
  width: 125%;
  left: 9%;
  top: 35%;
  text-shadow: 5px 5px 10px black;
  opacity: 1;
  animation: slideInDownRetro 1.5s ease-out;

}

.song p{
  text-align: center;
}

.popoverContent {
  position: relative;
  padding-bottom: 50px; /* espacio para el ícono */
}

.iconPopover {
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 50px;
  height: 50px;
  cursor: pointer;
}
.magazine{
  position: relative;
}

.popoversStyle{
  width: 100px;
  border: none;
  background: transparent;
  cursor: pointer;
}


h5{
  font-size: 1.5vw;
  text-shadow: 3px 3px #ffae21;
    font-family: "Chicle-Regular";
    /* color: #ff3e96; */
   line-height: 1.5vw;
}
.image {
  position: relative;
  overflow: hidden;
  height: 100%;

}

.image-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
}


@media only screen and (max-width: 1800px) {
  .subtitle-container h2 {
    font-size: 26px;
  }
  .flower-containerIntro{
    width: 70px;
  }
}

@media only screen and (max-width: 1100px) {
  .subtitle-container h2 {
    font-size: 17px;
  }
  .modalIntro {
    font-size: 6rem;
  }.title-container2 {
  position: absolute;
  
  top: 19%;

}
}

@media only screen and (max-width: 768px) {
  h5{
  font-size: 3vw;

   line-height: 2.5vw;
}


  .subtitle-container h2 {
    font-size: 15px;
  }

  .title-container {
    width: 90%;
    bottom: 20%;
  }
  .subtitle-container {
    position: absolute;
    z-index: 2;
    bottom: 1%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .subtitle-container h2 {
    color: #ffd93d;
    font-size: 3.5rem;
    text-align: center;
    line-height: 4rem;
    max-width: 80%;
    text-shadow: 3px 3px 5px black;
    font-family: "CourierPrime-Bold";
  }

  .wheel-container {
    bottom: 30%;
    left: 50%;
    width: 280%; /* ancho de la rueda */
  }
  .modalIntro {
    font-size: 4rem;
  }
  .btnSources {
    font-size: 3rem;
  }
  .btnCredits {
    font-size: 3rem;
  }

  .nucleo1 {
    --rot: -26deg;
    width: 26vw;
    top: calc(56% - 26vw / 2);
    left: calc(22.5% - 9.8vw / 2);
  }

  .nucleo2 {
    --rot: -26deg;
    width: 26.7vw;
    top: calc(45.3% - 26.7vw / 2);
    left: calc(51.1% - 9.8vw / 2);
  }
  .nucleo3 {
    --rot: -29deg;
    width: 25.5vw;
    top: calc(73.3% - 25.5vw / 2);
    left: calc(35% - 9.8vw / 2);
  }
  .nucleo4 {
    --rot: -28deg;
    width: 26vw;
    top: calc(61.5% - 26vw / 2);
    left: calc(67% - 9.8vw / 2);
  }
  .landing1, .landing2, .landing3 {
    margin-top: 40px;
    /* background-image: url("/work/models/memorica/recursos/exposiciones/cuandoLaMusicaAgitaba/img/s1/landingS1Mobile_.jpg"); */
  }
  .flower-container {
    width: 50px;
  }
  .flower-containerIntro {

  width: 50px;
  bottom: 3%;
  right: 3%;
}
    .flower-containerBook {
  position: absolute;
  width: 50px;
  bottom: 1%;
  right: 3%;
}
 .grid-album1 {
    grid-template-areas:
      "img1"
      "img2"
      "img3"
      "img4";
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 50vh); /* filas uniformes */
  }
   .grid-album2 {
    grid-template-areas:
      "img5"
      "img6"
      "img7";
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 50vh); /* filas uniformes */
  }
  .grid-album3 {

  grid-template-areas:
    "img2_1"
    "img2_2"
     
    "img2_3"
    "img2_4"
     "img2_5"
    "img2_6"
     "img2_7"
    "img2_8" 
    
    "img2_9" 
    "img2_10" ;
grid-template-columns: 1fr;
    grid-template-rows: repeat(10, 50vh);
}
.grid-album4 {

  grid-template-areas:
    "img3_9"
    "img3_5"
    "img3_8"
    "img3_12"
    "img3_7"
    "img3_6"
    "img3_11"
    "img3_10";
  grid-template-columns: 1fr;
  /* grid-auto-rows: 70vh; */
  grid-template-rows: repeat(8, 70vh);
}

.grid-album5 {

  grid-template-areas:
    "img4_3 "
    "img4_4"
    "img4_5 "
    "img4_6"
  "img4_7" 
   "img4_8"
    "img4_9"
   "img4_10";
  grid-template-columns: 1fr  ;
  /* grid-auto-rows: 70vh; */
  grid-template-rows: repeat(8, 70vh);
}
  .flower-container3  {

  bottom: 3%;

}
.flower-container4{
  bottom: 15%;
}
.title-container1 {
  width: 94%;
  right: -1.2%;
  top: 10%;
  
}
.music-container {

  width: 98%;
  left: auto;
  bottom: 5%;
 
}
.wheelS2-container{
  width: 300%;
bottom:-50%;
  right: 7.5%;
  animation: none

}

.hippies-container {
  width: 95%;

}
.landing3{
  margin-top: 30px;
}
.landing2 {
  margin-top: 60px;
}


.hippies3-container{
  width: 98%;
}
.wheelS3-container {
  width: 250%;
  top: 30%;
}
.photosOrnament-container, .photosOrnament-container2{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: auto;
}
.photosOrnament-container .leftPhotoOrnaments, .photosOrnament-container2 .leftPhotoOrnaments{
  position: relative;
  width: 95%;
  top: auto;
  left: auto;
  z-index: 0;

  margin-bottom: 5rem;
}
.photosOrnament-container .centerPhotoOrnaments{
  position: relative;
  width: 95%;
  top: auto;
  left: auto;
  right: auto;
  z-index: 0;
 
  margin-bottom: 5rem;
}
.photosOrnament-container .rightPhotoOrnaments, .photosOrnament-container2 .rightPhotoOrnaments{
  position: relative;
  width: 95%;
  top: auto;
  left: auto;
  right: auto;
  z-index: 0;
  
    margin-bottom: 5rem;
}

.hippies4-container {
  width: 155%;
  bottom: 10%;
  left: -10%;
}
.title-container4 {
    width: 97%;
    top: 12%;
    right: auto;
}

}

@media only screen and (max-width: 555px) {
  .subtitle-container h2 {
    font-size: 2.5rem;
    line-height: 2.7rem;
  }
  .subtitle-container {
    bottom: 5%;
  }
}

@media only screen and (max-width: 475px) {
  .subtitle-container {
    bottom: 3%;
  }
  .modalIntro {
    font-size: 3rem;
  }
}

@media only screen and (max-width: 425px) {
  .subtitle-container h2 {
    font-size: 2rem;
    line-height: 2rem;
  }

}

@media only screen and (max-width: 375px) {
   .subtitle-container {
    bottom: 12%;
  }
  .subtitle-container h2 {
    font-size: 1.7rem;
    line-height: 1.7rem;
  }

  .title-container {
    width: 90%;
    bottom: 28%;
  }
}