.containerImgLanding {
  position: absolute;
  top: 5%;
  right: 0;
  width: 60%;
}

.containerImgLanding img {
  width: 100%;
}

.text-intro {
  align-items: flex-start;
}

.allRoom {
  margin-top: 12rem;
}
@keyframes glitch {
  0% {
    transform: translate(0);
    filter: invert(1);
  }
  20% {
    transform: translate(-3px, 3px) skewX(-5deg);
    filter: invert(1);
  }
  40% {
    transform: translate(3px, -3px) skewX(5deg);
    filter: invert(0);
  }
  60% {
    transform: translate(-3px, 3px) skewX(-5deg);
    filter: invert(1);
  }
  80% {
    transform: translate(3px, -3px) skewX(5deg);
    filter: invert(1);
  }
  100% {
    transform: translate(0);
    filter: invert(1);
  }
}
.innerContent {
  position: absolute;
  top: calc(50% - 65% / 2);
  left: calc(50% - 80% / 2);
  width: 80%;
  height: 65%;
  overflow: hidden;
  cursor: pointer;
  transition: filter 2s;
  filter: blur(5px) grayscale(50%) brightness(70%);
  /* position: relative; */
  transition: all 0.5s ease-in-out;
  filter: contrast(90%) brightness(80%);
}

.containerImgFrame:hover .innerContent {
  filter: invert(100%) contrast(1.75);
  /* animation: glitch 0.6s infinite; */
  filter: contrast(120%) saturate(150%) invert(100%);
  /* transform: scale(1.05); */
}

.popContent {
  position: absolute;
  width: 8%;
  height: 8%;
  z-index: 1;
  bottom: calc(25% - 8% / 2);
  right: calc(18% - 8% / 2);
  cursor: pointer;
  animation: spectrum 15s infinite ease-in alternate;
}

.popover,
.popover-arrow {
  /* background-color: #5a0000; */
  --bs-popover-bg: #5a0000;
}

@keyframes spectrum {
  0% {
    transform: scale(0.8);
  }

  50% {
    /* filter:  invert(2)  brightness(2); */
    transform: scale(1.1) rotate(360deg);
  }

  100% {
    transform: scale(0.8);
  }
}

.btn-seeMore {
  justify-self: flex-end;
}
footer {
  margin: 12rem 0 1rem 0;
}

.innerContent img {
  width: 100%;
  display: block;
  transition: 0.2s ease-in-out;
}

.innerContent:hover img {
  animation: glitch-animation 0.5s infinite linear;
  filter: brightness(1.1);
}

@keyframes glitch-animation {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(-2px, 2px);
  }
  40% {
    transform: translate(2px, -2px);
  }
  60% {
    transform: translate(-2px, -2px);
  }
  80% {
    transform: translate(2px, 2px);
  }
  100% {
    transform: translate(0, 0);
  }
}

.innerContent::before,
.innerContent::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  mix-blend-mode: screen;
  opacity: 0;
}
.innerContent:hover::before,
.innerContent:hover::after {
  opacity: 0.7; /* Mostrar al hacer hover */
}
.innerContent::before {
  transform: translate(-2px, 2px);
  filter: blur(2px) hue-rotate(30deg);
  animation: glitch-before 0.5s infinite linear alternate;
}

.innerContent::after {
  transform: translate(2px, -2px);
  filter: blur(1px) hue-rotate(-10deg);
  animation: glitch-after 0.5s infinite linear alternate;
}

@keyframes glitch-before {
  0% {
    transform: translate(-3px, 3px);
  }
  100% {
    transform: translate(3px, -3px);
  }
}

@keyframes glitch-after {
  0% {
    transform: translate(3px, -3px);
  }
  100% {
    transform: translate(-3px, 3px);
  }
}

.innerContent1::before,
.innerContent1::after {
  background: url("/work/models/memorica/recursos/exposiciones/mpm2/img/s1/s1_1.jpg");
}

.innerContent2::before,
.innerContent2::after {
  background: none;
}
.innerContent3::before,
.innerContent3::after {
  background: url("/work/models/memorica/recursos/exposiciones/mpm2/img/s1/s1_3.jpg");
}
.innerContent4::before,
.innerContent4::after {
  background: url("/work/models/memorica/recursos/exposiciones/mpm2/img/s1/s1_4.jpg");
}

.containerImgFrame:hover .innerContentFront {
  filter: none;
  animation: none;
  cursor: default;
}

.containerImgFrame:hover .innerContent.innerContentFront::before,
.containerImgFrame:hover .innerContent.innerContentFront::after,
.innerContentFront:hover img {
  filter: none;
  animation: none;
  cursor: default;
}
.containerImgLanding1 {
  position: absolute;
  width: 20%;
  top: 10%;
  right: calc(32% - 20% / 2);
  box-shadow: 20px 15px 15px #000000;
  animation:  9s infinite linear slideTopBottom; 
}

.containerImgLanding2 {
  position: absolute;
  width: 23%;
  bottom: -10%;
  transform: rotate(-75deg);
  right: calc(25% - 23% / 2);
  box-shadow: 20px 15px 15px #000000;
 
}
.containerImgLanding3 {
  position: absolute;
  width: 23%;
  bottom: 20%;
  transform: rotate(-25deg);
  right: calc(20% - 23% / 2);
  box-shadow: 20px 15px 15px #000000;
}
.containerImgLanding4 {
  position: absolute;
  width: 23%;
  bottom: 0%;
  transform: rotate(-45deg);
  right: calc(40% - 23% / 2);
  animation:  slideLeftRight 15s infinite linear; 

  box-shadow: 20px 15px 15px #000000;
}
@keyframes slideTopBottom {
    0% {
        transform: translateY(0); 
      }
      50% {
        transform: translateY(15px); 
      }
      100% {
        transform:translateY(0) ; 
      }
  }
  
  @keyframes slideLeftRight {
    0% {
      transform: rotate(-45deg); 
    }
    50% {
      transform: rotate(-40deg); 
    }
    100% {
      transform:rotate(-45deg) ; 
    }
  }


@media only screen and (max-width: 1200px) {
  .innerContent {
    position: absolute;
    top: calc(50% - 60% / 2);
    left: calc(50% - 75% / 2);
    width: 75%;
    height: 60%;
    overflow: hidden;
  }
}

@media only screen and (max-width: 768px) {
  .innerContent {
    position: absolute;
    top: calc(50% - 70% / 2);
    left: calc(50% - 80% / 2);
    width: 80%;
    height: 70%;
    overflow: hidden;
  }

  .containerImgLanding {
    position: absolute;
    top: 10%;
    right: 0;
    width: 90%;
  }
  .intro {
    margin-top: 5rem;
  }
  .containerImgLanding1 {
    position: absolute;
    width: 32%;
    top: 10%;
    right: calc(55% - 32% / 2);
  }
  
  .containerImgLanding2 {
    position: absolute;
    width: 33%;
    bottom: 20%;
    transform: rotate(-75deg);
    right: calc(35% - 23% / 2);
  }

  .containerImgLanding3 {
    position: absolute;
    width: 33%;
    bottom: 40%;
    transform: rotate(-25deg);
    right: calc(30% - 23% / 2);
  }
  .containerImgLanding4 {
    position: absolute;
    width: 40%;
    bottom: 30%;
    transform: rotate(-55deg);
    right: calc(60% - 40% / 2);
  }
}

@media only screen and (max-width: 576px) {
  h1 {
    font-size: 5rem;
    line-height: 5rem;
  }
}

@media only screen and (max-width: 470px) {
  h1 {
    font-size: 4rem;
    line-height: 4rem;
  }
}
@media only screen and (max-width: 370px) {
  h1 {
    font-size: 3rem;
    line-height: 3rem;
  }
}