* {
  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:    var(--color-dark); */
}


.collapse {
  transition: height 1 ease;
}
.acronym {
  font-variant: small-caps;
}

p {
  font-family: "Aleo-Regular";
  font-size: 2rem;
  line-height: 2.5rem;
  color: var(--color-darkGreen);
  /* margin-top: 2rem; */
}

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


.landing{
  position: relative;

  width: 100%;
  /* height: 100vh; */
  overflow: hidden;

  
}
.landing img{
  width: 100%;

  height: 100%;
  object-fit: cover;
  position: relative;
}
.landingr > * {
  animation: projectorFlicker 3s infinite;
}

.container-title{
  position: absolute;
  width: 27%;
  left: 3%;
  bottom: 15%;
  z-index: 1;
}
.container-ornament{
  position: absolute;
  width: 12%;
  left: -1%;
  bottom: 70%;
    z-index: 1;
    display: inline-block;
}
.container-ornament img {
  transform-origin: center bottom; /* como si colgara del soporte */
  animation: mic-adjust 3.5s ease-in-out infinite;
  animation-delay: 1s;
}

@keyframes mic-adjust {
  0% {
    transform: rotate(0deg) translateY(0);
  }
  6% {
    transform: rotate(1.5deg) translateY(1px);
  }
  12% {
    transform: rotate(-1.2deg) translateY(2px);
  }
  18% {
    transform: rotate(0.8deg) translateY(1px);
  }
  24% {
    transform: rotate(-0.4deg) translateY(0);
  }
  30% {
    transform: rotate(0deg) translateY(0);
  }
  100% {
    transform: rotate(0deg) translateY(0);
  }
}
.container-subtitle{
   position: absolute;
  width: 25%;
  left: 3%;
  bottom: 5%;
    z-index: 1;
    overflow: hidden; /* CLAVE para el efecto */
  width: fit-content
}
.subtitle-img {
  display: block;
  animation: subtitle-reveal 2.2s ease-out forwards;
  clip-path: inset(0 100% 0 0);
  animation-delay: 2s;
}

@keyframes subtitle-reveal {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
.circlePink{
  background-color: var(--color-pink);
  border-radius: 50%;
  padding: 1rem;
  width: 2.5rem;
  height: 2.5rem;
    z-index: 1;
     animation: rec-light 1.6s ease-in-out infinite;
}
@keyframes rec-light {
  0% {
    opacity: 0.35;
    transform: scale(0.98);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
  70% {
    opacity: 0.6;
    transform: scale(0.99);
  }
  100% {
    opacity: 0.35;
    transform: scale(0.98);
  }
}
h3{
  font-family: "Barrio-Regular";
  color:  var(--color-grey);
  font-size: 3.3rem;
    z-index: 1;
}
.container-Rec{
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  top: 11%;
  right: 1%;
}


.landing::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-radial-gradient(circle at 30% 40%, rgba(255,255,255,0.1) 0px, transparent 2px);
  background-size: 4px 4px;
  pointer-events: none;
  z-index: 1;
  animation: noise 0.2s infinite;
  opacity: 0.3;
  mix-blend-mode: overlay; /* Mezcla el efecto con la imagen */
}

@keyframes noise {
  0% { transform: translate(0, 0); }
  10% { transform: translate(-1px, 1px); }
  20% { transform: translate(1px, -1px); }
  30% { transform: translate(-1px, -1px); }
  40% { transform: translate(1px, 1px); }
  50% { transform: translate(0, 1px); }
  60% { transform: translate(1px, 0); }
  70% { transform: translate(-1px, 0); }
  80% { transform: translate(0, -1px); }
  90% { transform: translate(1px, -1px); }
  100% { transform: translate(0, 0); }
}


.cinema-effect {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  filter: blur(0.45px);
}
.cinema-effect::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 120%;
  opacity: 0.6;
   background: repeating-linear-gradient(
  90deg,
  rgba(255,255,255,0.45) 0px,
  rgba(255,255,255,0.45) 1px,   /* ← grosor de la rayadura */
  transparent 0px,
  transparent 38vmin 
  );

  animation: cinemaScratch 0.45s steps(1) infinite;
}

@keyframes cinemaScratch {
  0%, 100% { transform: translateX(0); opacity: 0.45; }
  30% { transform: translateX(-2%); opacity: 0.7; }
  60% { transform: translateX(8%); }
  80% { transform: translateX(10%); opacity: 0.25; }
}
.cinema-grain::after {
  content: '';
  position: absolute;
  inset: -5%;
  opacity: 0.35;

  background-image:
    repeating-conic-gradient(
  rgba(255,255,255,0.6) 0.1%,
  transparent 0.0004%,
  transparent 0.008%
),
   repeating-conic-gradient(
  rgba(255,255,255,0.6) 0.1%,
  transparent 0.0004%,
  transparent 0.008%
);

  animation: grainMove  .5s steps(1) infinite;

  will-change: transform;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
}

@keyframes grainMove {
  0% { transform: translate(0,0); }
  20% { transform: translate(-1%,1%); }
  40% { transform: translate(2%,-2%); }
  60% { transform: translate(-3%,3%); }
  80% { transform: translate(1%,-1%); }
  100% { transform: translate(0,0); }
}
/* .cinema-wrapper > * {
  animation: projectorFlicker 3s infinite;
} */

@keyframes projectorFlicker {
  0% { opacity: 1; }
  4% { opacity: 0.85; }
  8% { opacity: 1; }
  12% { opacity: 0.9; }
  100% { opacity: 1; }
}
.scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;

  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.35) 0px,
    rgba(0,0,0,0.35) 3px,  /* ← grosor línea */
    transparent 5px,
    transparent 10px
  );

  opacity: 0.4;
  animation: scanMove 0.15s linear infinite;
}
@keyframes scanMove {
  from { background-position: 0 0; }
  to   { background-position: 0 10px; }
}
@keyframes projectorFlicker {
  0%   { opacity: 1; }
  5%   { opacity: 0.75; }
  10%  { opacity: 1; }
  15%  { opacity: 0.85; }
  100% { opacity: 1; }
}
.filmLine{
  height: 22px;
  background-image: url("/work/models/memorica/recursos/exposiciones/lucesCamaraAccion/img/filmLine.svg");
  background-repeat: repeat;

}
 main{
  /* background-image: url("/work/models/memorica/recursos/exposiciones/lucesCamaraAccion/img/bg.jpg"); */
  background: repeating-linear-gradient(
  0deg,
  rgba(255,255,255,0.7) 0px,
  rgba(255,255,255,0.7) 4px,
  rgba(233, 233, 232,0.6) 4px,
  rgba(233, 233, 232,0.6) 8px
);

 }
 
 .degrade{
background: linear-gradient(
  to bottom,
  var(--color-darkGreen) 0%,
  var(--color-darkGreen) 10%,
  transparent 100%

);
height: 70px;
 }

 h4{
 font-family: "Aleo-Regular";
 font-size: 3.7rem;
 color: var(--color-darkGreen);
 }
 h5{
  font-family: "Aleo-Regular";
 font-size: 2rem;
 line-height: 2.5rem;
 color: var(--color-darkGreen);
 margin-top: 3rem;
 
 }

 .pinkText{
  background-image: url("/work/models/memorica/recursos/exposiciones/lucesCamaraAccion/img/linePink.svg");
  background-size:100% 100%;
padding: 2rem 0.5rem;
display: inline-block;
background-size: auto 100%;
 }
 .intro{
  display: flex;
   align-items: stretch;
   margin-top: 10rem;
 }

.lineGlitch {
  width: 6rem;
  background-image: url("/work/models/memorica/recursos/exposiciones/lucesCamaraAccion/img/landing/lineGlitch.svg");
  background-repeat: repeat-y;
  background-size: contain;
  background-position: top;
}

.film-menu {
  position: relative;
  /* aspect-ratio: 1 / 1; */
  padding: 10rem 0;
}

.fondoCinta {
  width: 100%;
  height: auto;
}

.sala-home {
  position: absolute;
  width: 16.5%;
  height: 20.5%;
  border-radius: 50%;
  background: var(--color-green);
  border: 5px solid var(--color-pink);
  color: var(--color-white);
display: flex;              
  justify-content: center;   
  align-items: center;       

  text-decoration: none;
}
.sala-home:hover{
    background: var(--color-pink);
  border: 5px solid var(--color-green)
}



.sala-1 { top: 16.9%; left: 23.3%; }
 .sala-2 {
  top: 32%;
  left: 41%;
}

.sala-3 {
  top: 57%;
  left: 34%;
}

.sala-4 {
  top: 57%;
  left: 13%;
}
.sala-5 {
 top: 32%;
  left: 6%;
}
.sala-home .label {
position: absolute;
  inset: 0;
  padding: 1.5rem;

  display: flex;
  justify-content: center;
  align-items: center;

  text-align: center;
  line-height: 1.3;

  font-size: 1.8rem;
  font-family: "Aleo-bold";

  opacity: 0;
  transform: scale(0.9);
  transition: 0.3s ease;
}

.sala-home .numero {
  font-size: 10rem;
  transition: 0.3s ease;
    font-family: "Barrio-Regular";
}

.sala-home:hover .numero {
  opacity: 0;
  transform: scale(0.7);
}

.sala-home:hover .label {
  opacity: 1;
  transform: scale(1);
}
.sala-home:focus-visible .label {
  opacity: 1;
}
.container-subtitleSection{
  width: 35%;
  position: absolute;
  top: 20%;
  left: 65%;
}
h6{
   font-family: "Barrio-Regular";
   font-size: 4rem;
   text-align: end;
   color: var(--color-grey);

}
.btnReference{
  background-image: url("/work/models/memorica/recursos/exposiciones/lucesCamaraAccion/img/landing/btnReference.jpg");
  background-position: center bottom;
  background-repeat: no-repeat;
width: 100vw;
padding: 2rem 0;
background-size: cover;
border: none;
margin-bottom: 3rem;
transition: margin 0.2s ease;
}
.btnReference[aria-expanded="true"] {
  margin-bottom: 0;
}
footer{
  display: flex;
  flex-direction: column;
 /* background-image: url("/work/models/memorica/recursos/exposiciones/lucesCamaraAccion/img/bg.jpg"); */
  background: repeating-linear-gradient(
  0deg,
  rgba(255,255,255,0.7) 0px,
  rgba(255,255,255,0.7) 4px,
  rgba(233, 233, 232,0.6) 4px,
  rgba(233, 233, 232,0.6) 8px
);
}
.btnCredits{
  background-image: url("/work/models/memorica/recursos/exposiciones/lucesCamaraAccion/img/landing/btnCredits.jpg");
  background-position: center bottom;
  background-repeat: no-repeat;
width: 100vw;
padding: 2rem 0;
background-size: cover;
border: none;
}
.linkTo{
  color: var(--color-darkGreen);
}
.linkTo:hover{
  color: var(--color-green);
}
.listWithNumbers li{
  font-size: 2rem;
 color: var(--color-darkGreen);
}
.lineFilm{
  width: 100vw;
  height: 30px;
  margin-top: 68px;
  background-image: url("/work/models/memorica/recursos/exposiciones/lucesCamaraAccion/img/filmLine.svg");
  background-size: contain;
  background-repeat: repeat-x;
}
.lineFilm2{
  width: 100vw;
  height: 30px;
  background-image: url("/work/models/memorica/recursos/exposiciones/lucesCamaraAccion/img/filmLineBlack.svg");
  background-size: contain;
  background-repeat: repeat-x;
}
.lineFilm3{
  width: 100%;
  height: 20px;
  background-image: url("/work/models/memorica/recursos/exposiciones/lucesCamaraAccion/img/filmLine.svg");
  background-size: contain;
  background-repeat: repeat-x;
}
a.menu p {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

a.menu::before {
  display: none;
}

a.menu p::before {
  content: "";
  width: 16px;
  height: 16px;
  min-width: 16px;
  border-radius: 50%;
  background-color: var(--color-pink);
}
a.menu:hover::before {
  transform: scale(1.2);
  box-shadow: 0 0 10px var(--color-pink);
}

a.menu {
  transition: color 0.3s ease;
}

a.menu::before {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ticketMenu{
  display: grid;
   grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.ticket {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* width: 25%; */
  text-align: center;
  text-decoration: none;
  border: none;
  background-color: transparent;
  height: auto;
   aspect-ratio: 200 / 120; 
}
.miniTicket {
 position: relative;
  display: inline-block;
  width: 5rem;
border: none;
background-color: transparent;
padding-bottom: 1rem;
z-index: 2;
}
.miniTicket .ticket-bg {
  transition: fill 0.4s ease;
}
.ticket.active .ticket-bg {
  fill: var(--color-green);
}
.ticket.active .ticket-border {
  fill: var(--color-green);
}
.miniTicket.active .ticket-bg {
  fill: var(--color-green);
}

.miniTicket.active .ticket-border {
  fill: var(--color-darkGreen);
}
.ticket-svg-mini {
   width: 100%;
  height: auto;
  display: block;

}
.ticket-svg {
 
  width: 100%;
  height: 100%;

}

.ticket-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;

  color: var(--color-darkGreen);
  transition: color .3s ease;
font-family: "Aleo-Regular";
font-size: 1.1rem;
max-width: 90%;
transform: rotate(-12.5deg);
top: 20%;
}
.text-miniMenu{
   position: absolute;
  font-family: "Aleo-Regular";
  font-size: 2rem;
  color: var(--color-darkGreen);
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  left: 50%;
  top: 20%;
  /* transition: transform 0.3s ease, opacity 0.3s ease; */
}
.miniTicket:hover .text-miniMenu {
  transform: scale(1.05);
  opacity: 1;
}
.miniMenu{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  position: fixed;
  right: 0;
  bottom: 0;
  width: 15rem;
  height: 30rem;
  z-index: 2;
  cursor: pointer;
  /* opacity: 0;
  display:none */
}
.miniMenu {

  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}

.miniMenu.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.ticket-bg {
  fill: var(--color-white);
}

.ticket-border {
  stroke: var(--color-darkGreen);
  fill: var(--color-white);
  stroke-width: 2;
  transition: all .3s ease;
}

/* hover */
.ticket:hover{
transform: rotate(-12deg);
}
.ticket:hover .ticket-bg {
  fill: var(--color-green);
}
.ticket:hover .ticket-border {
  fill: var(--color-green);
}
.little-lineFilm{
  background-image: url("/work/models/memorica/recursos/exposiciones/lucesCamaraAccion/img/filmLineBlack.svg");
  background-repeat: repeat-x;
  background-size: cover;
  height: 15px;
}
.little-lineFilm2{
  background-image: url("/work/models/memorica/recursos/exposiciones/lucesCamaraAccion/img/filmLineBlack.svg");
  background-repeat: repeat-x;
  background-size: cover;
  height: 35px;
}
.containerResource{
  background-color: var(--color-darkGreen);
display: flex;
 border-left: 5px solid var(--color-dark);
  border-right: 5px solid var(--color-dark);
}
.footerResource{
display: flex;
justify-content: flex-end;
flex-direction: column;
align-items: flex-end;
padding: 0 1rem 2rem 0;
}
.containerResource p{
 font-size: 1.6rem;
 color: var(--color-white);
 text-align: end;
 line-height:1.8rem;
 margin-top: 1rem;
}
.container-GoTo{
  width: 80%;
 
}

.imgResource img {
  border-radius: 20px;   
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.imgResource {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}

/* imagen base */
.imgResource .base-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* imagen overlay */
.imgResource .overlay-imgHover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none; /* no bloquea el hover */
}


.resource:hover .imgResource .overlay-imgHover {
  opacity: 1;
}
.containerResource {
  display: flex;
  align-items: stretch; /* 👈 CLAVE */
}
.carusel {
 display: flex;
  align-items: stretch;
}
.grid3 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  justify-items: center;
}

/* el tercer elemento */
.grid3 > :nth-child(3) {
  grid-column: 1 / -1;   /* ocupa ambas columnas */
  justify-self: center; /* se centra */
   max-width: 50%;
}
.grid2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  justify-items: center;
}
.grid1 {
  display: grid;
 grid-column: 1 / -1;   /* ocupa ambas columnas */
  justify-self: center; /* se centra */
   max-width: 50%;
}
.cameraman {
display: flex;
  align-items: center;
  justify-content: center;
}
.cameraman img {
   height: 588px;
  width: auto;
}
.miniTicket.active .ticket-bg {
  fill: var(--color-green);
}

.miniTicket.active  .ticket-border{
    fill: var(--color-green);
}
.miniTicket:hover .ticket-bg {
  fill: var(--color-green);
}

.miniTicket:hover  .ticket-border{
    fill: var(--color-green);
}

.salaContainer {
  display: none;
}

.salaContainer.active {
  display: block;
}
.sala {
  opacity: 0;
  transition: opacity .4s ease;
}

.sala.active {
  display: block;
  opacity: 1;
}
.titleModal-Container{
 
 background-color: transparent;
  
  border: none;
}
.titleModal{
  width: 100%;
  margin:  1.5rem auto;
  background-color: var(--color-darkGreen);
}
.title-End{
  width: 40%;
  padding: 4rem;
}
.modalCine{
  background-color: #e95ccf9c;
}
.modalCine .modal-dialog .modal-content{
  border: solid 5px var(--color-darkGreen);
  border-radius: 0;
background-color: var(--color-white);

}
.modalCine .modal-dialog .modal-content .scanLinesBg{
   background: repeating-linear-gradient(
  0deg,
  rgba(255,255,255, 1) 0px,
  rgba(255,255,255, 1) 4px,
  rgba(233, 233, 232,.55) 4px,
  rgba(233, 233, 232,  .5) 8px
);
}
.modalCine .modal-dialog .modal-content .btn-close{
  background-image: url("/work/models/memorica/recursos/exposiciones/lucesCamaraAccion/img/x.svg");
  opacity: 1;
  width: 1rem;
  height: 1rem;
  background-size: cover;
  padding: 1rem;
  align-self: flex-end;
  margin: 1rem;
}
.bodyColors.s1-a {
  background:
    radial-gradient(circle at bottom left,  #e95ccf2b 0%, transparent 75%),
    radial-gradient(circle at top right,    #0047505f 0%, transparent 75%),
    radial-gradient(circle at bottom right, #00d68f3d 0%, transparent 75%),
    radial-gradient(circle at top left,     #e9e9e823 0%, transparent 75%);
}
.bodyColors.s1-b {
  background:
    radial-gradient(circle at top left,     #e95ccf2d 0%, transparent 75%),
    radial-gradient(circle at bottom right, #00475051 0%, transparent 75%),
    radial-gradient(circle at top right,    #00d68f45 0%, transparent 75%),
    radial-gradient(circle at bottom left,  #e9e9e837 0%, transparent 75%);
}
.bodyColors.s1-c {
  background:
    radial-gradient(circle at top right,    #e95ccf2b 0%, transparent 75%),
    radial-gradient(circle at bottom left,  #00475041 0%, transparent 75%),
    radial-gradient(circle at top left,     #00d68f37 0%, transparent 75%),
    radial-gradient(circle at bottom right, #e9e9e823 0%, transparent 75%);
}
.bodyColors.s1-d {
  background:
    radial-gradient(circle at bottom right, #e95ccf26 0%, transparent 75%),
    radial-gradient(circle at top left,     #00475041 0%, transparent 75%),
    radial-gradient(circle at bottom left,  #00d68f2c 0%, transparent 75%),
    radial-gradient(circle at top right,    #e9e9e823 0%, transparent 75%);
}
.bodyColors {
  transition: background 1.2s ease-in-out;
}
.credits-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 3rem;
  margin-top: 3rem;
}

.credits-list dt {
  text-align: right;
  /* font-weight: 600; */
  font-size: 2rem;
  color: var(--color-darkGreen);
    font-family: "Aleo-Bold";
}

.credits-list dd {
  margin: 0;
    font-size: 2rem;
  color: var(--color-darkGreen);
    font-family: "Aleo-Regular";
    text-align: start;
}
#collapseReference{
  background:
    radial-gradient(circle at bottom left,  #e95ccf2b 0%, transparent 75%),
    radial-gradient(circle at top right,    #0047505f 0%, transparent 75%),
    radial-gradient(circle at bottom right, #00d68f3d 0%, transparent 75%),
    radial-gradient(circle at top left,     #e9e9e823 0%, transparent 75%);
}
#collapseCredits{
    /* filter: blur(2px); */
  opacity: 1;
   background:
 radial-gradient(circle at bottom left, #e95ccf26 0%, transparent 75%),
    radial-gradient(circle at top left,     #00475059 0%, transparent 75%),
    radial-gradient(circle at bottom right,  #00d68f54 0%, transparent 75%),
    radial-gradient(circle at top right,    #e9e9e847 0%, transparent 75%);
}

container-title img{

  width: 100%;
}

.credits-wrapper {
  min-height: 50vh;

  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
}

.credits-scroll {
  text-align: center;
  opacity: 0;
  transform: translateY(280px);
 /* animation: revealCredits 1.3s cubic-bezier(.22,1,.36,1) forwards; */
}
.credits-scroll.animate {
  animation: revealCredits 8s ease-out forwards;
}
/* .wheelTest{
  fill: var(--color-darkGreen);
   animation: spin 15s linear infinite;
   transform-box: fill-box;
transform-origin: center;
} */

.wheel-group {
  transform-box: fill-box;
  transform-origin: center;
}

.wheel-section:hover .wheel-group {
  animation: spin 4s linear infinite;
}

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

/* BOTÓN */
.btnWheel circle {
  fill: var(--color-green);
  stroke: var(--color-pink);
  stroke-width: 5;
  transition: 0.3s;
  cursor: pointer;
}

.btnWheel text {
  fill: var(--color-white);
  font-size: 10rem;
  font-family: "Barrio-Regular";
  pointer-events: none;
}
.btnWheel circle {
  pointer-events: all;
}
.btnWheel:hover circle {
  fill: var(--color-pink);
  stroke: var(--color-green);
}


.btnHome-Wheel{
  position: absolute;
  inset: 0;
  transform-origin: center;
   transform-box: fill-box;
}
.film-menu:hover .btnHome-Wheel {
  animation: spin 3s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}


@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes revealCredits {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scrollCredits {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(-100%);
  }
}
.twoColumns{
  /* display: grid;
  grid-template-columns: 1fr 1fr; 
  column-gap: 4rem; */
    column-count: 2;
  column-gap: 4rem;
}
@media only screen and (max-width:1194px){
  .ticket-text {
  
font-size: 0.8rem;

}
}
 @media only screen and (max-width: 992px){
  h6{
   font-size: 3rem;
}
  .containerResource p{
 font-size: 1.1rem;
 line-height:1.2rem;
}
  .lineFilm2{
    height: 15px;
    background-size: cover;
  }
  .titleModal{
  margin:  1rem auto;

}
.title-End{
  width: 60%;
  padding: 3rem;
}
  .little-lineFilm2{

  height: 15px;
}
  .cameraman img {
   height: auto;
  width: auto;
}
    .ticket-text {
  
font-size:1rem;

}
.sala-home .numero{
  font-size: 5rem;
}
.sala-home .label{
  font-size: 1.5rem;
  padding: 1rem;
}
.sala-1 { top: 19.5%; left: 23.5%; }
 .sala-2 {
  top: 33.5%;
  left: 41%;
}

.sala-3 {
  top: 54.5%;
  left: 34%;
}

.sala-4 {
  top: 54.5%;
  left: 13%;
}
.sala-5 {
 top: 33.5%;
  left: 6%;
}
.sala-home {
  width: 18%;
  height: 19.5%;
}
.ticketMenu {
    grid-template-columns: repeat(2, 1fr);
  }
 }
         @media only screen and (max-width: 768px){
          .intro{
            margin-top: 5rem;
          }
          .twoColumns{
    column-count: 1;
  column-gap: 0;
}
            .containerResource p{
 
 color: var(--color-white);
 text-align: end;
 line-height: 1.4rem;
 margin-top: 1rem;
}
          .footerResource {
            padding: 0 1rem 0.5rem 0;
          }
.cameraman {
display: flex;
  align-items: flex-end;
  justify-content: center;
}
   .filmLine{
  height: 10px;
  background-repeat: repeat-x;

}
h4{

 font-size: 3rem;

 }
 
.container-title{
  width: 60%;
}
.container-ornament{
  width: 25%;
  bottom: 60%;
}
.container-subtitle{
  width: 55%;
}
.lineGlitch{
  width: 12rem;
 background-size: auto auto;
        background-repeat: repeat-y;
}

.sala-home {
  width: 18%;
  height: 18%;
}
.sala-1 { top: 22.5%; left: 23.5%; }
 .sala-2 {
  top: 34.5%;
  left: 40%;
}
 .grid3 {
    grid-template-columns: 1fr;
  }
.grid2 {
 grid-template-columns: 1fr;
}
.grid1 {
   grid-column: auto;
    max-width: 100%;
}
  .grid3 > :nth-child(3) {
    grid-column: auto;
    max-width: 100%;
  }

}
 @media only screen and (max-width: 576px){
.sala-home .numero{
  font-size: 3rem;
}
.sala-home .label{
  font-size: 1.1rem;
  padding: 0.5rem;
}
    .ticket-text {
  
font-size:0.8rem;

}
.title-End{
  width: 90%;
  padding: 2rem;
}
 }
  @media only screen and (max-width: 425px){
.sala-home {
  width: 18%;
  height: 20%;
}
 .film-menu{
  padding: 5rem 0;
 }

 .sala-1 { top: 19%; left: 23.5%; }
 .sala-2 {
  top: 33.5%;
  left: 40%;
}

.sala-3 {
  top: 56%;
  left: 34%;
}

.sala-4 {
  top: 56%;
  left: 13%;
}
.sala-5 {
 top: 33.5%;
  left: 6%;
}
    .ticket-text {
  
font-size:0.6rem;

}
  .containerResource p{
 font-size: 1.1rem;

}
  }