:root {
  --orange: #FF8940;
  --texto: #fff;
}
body {
  background: #000 !important;
}
.c-detail__embed {
  overflow: unset !important;
}
.c-detail__top,
.c-detail__data {
  display: none !important;
}
.c-detail--special .c-detail__content {
  background: #000 !important;
  margin: 0 auto!important;
  padding: 0 !important;
}
.content-title-h1,
.content-title-h2,
.c-paragraph__title {
  color: var(--orange) !important;
}
.content-title-h1,
.content-title-h2 {
  font-size: 3rem !important;
  line-height: 3.4rem !important;
  font-weight: 600 !important;
  text-align: center !important;
}
.c-paragraph__title {
  font-family: "pfd-medium", serif !important;
  font-size: 2.2rem !important;
  line-height: 2.2rem !important;
  font-weight: 600 !important;
  text-align: left !important;
  text-transform: none !important;
}
.c-paragraph {
  font-size: 1.8rem !important;
  line-height: 2.6rem !important;
  font-weight: 400 !important;
  color: var(--texto) !important;
}
.c-paragraph b {
  font-weight: 700 !important;
}
.composite-richtext p {
  font-family: "Source-Serif-Regular", serif !important;
  font-size: 2.2rem !important;
  line-height: 2.8rem !important;
  font-weight: 400 !important;
  color: var(--texto) !important;
}
.c-phrase__blockquote {
  display: flex !important;
  align-items: center !important;
  gap: 1.5rem !important;
  margin: 3.5rem auto !important;
  padding: 0  1rem !important;
  font-family: "pfd-medium", serif !important;
  font-size: 2rem !important;
  line-height: 2.6rem !important;
  font-weight: 400 !important;
  color: var(--texto) !important;
  font-style: italic !important;
  text-align: center !important;
  background: none !important;
}
.c-phrase__blockquote:before,
.c-phrase__blockquote:after {
  content: "" !important;
  width: 10rem !important;
  height: .1rem !important;
  background-color: var(--orange) !important;
}

figure.imagen-apertura {
  position: relative;
}

#embersCanvas {
  position: absolute;
  width: 100%;
  height: 100%;
}

.reel__content {
  display: flex;
  align-items: center;
  gap: 7rem;
  max-width: 110rem;
  margin: 3.5rem auto;
  padding: 0 1rem;
}
.left-door,
.right-door {
  display: none;
}
.reel__wrapper {
  width: 100%;
  max-width: 33.5rem;
  height: auto;
  margin: 0 auto;
}
.reel__link {
  display: inline-block;
  perspective: 1000px;
}
.reel__link:before {
  content: '';
  display: inline-block;
  width: 10rem;
  height: 10rem;
  position: absolute;
  top: 50%;
  left: 50%;
  background: url(https://dkumiip2e9ary.cloudfront.net/xalok/cinemania/especiales/rancho-dutton/img/Play.svg) no-repeat center;
  background-size: contain;
  z-index: 2;
  transform: translate(-50%, -50%) rotateY(0deg);
  transition: transform .8s cubic-bezier(0.4, 0, 0.2, 1);
  backface-visibility: hidden;
}
.reel__link:hover:before {
 transform: translate(-50%, -50%) rotateY(-360deg);
}

@keyframes swing-right {
  100% {
    transform: rotateY(0);
    transform-origin: left;
  }
  0% {
    transform: rotateY(-180deg);
    transform-origin: left;
  }
}

@keyframes swing-left {
  100% {
    transform: rotateY(0);
    transform-origin: right;
  }
  0% {
    transform: rotateY(180deg);
    transform-origin: right;
  }
}

@media only screen and (min-width: 768px) {}

@media only screen and (min-width: 900px) {
  .left-door,
  .right-door {
    display: block;
    width: 100%;
    height: 55rem;
    opacity: .3;
  }
  .left-door {
    background: url(https://dkumiip2e9ary.cloudfront.net/xalok/cinemania/especiales/rancho-dutton/img/movistar_recurso_puertas-rancho-dcha.svg) no-repeat center center;
    background-size: contain;
    view-timeline: --scroll;
    animation: swing-left both linear;
    animation-timeline: --scroll;
    animation-range: entry 0 cover 40%;
  }
  .right-door {
    background: url(https://dkumiip2e9ary.cloudfront.net/xalok/cinemania/especiales/rancho-dutton/img/movistar_recurso_puertas-rancho-izq.svg) no-repeat center center;
    background-size: contain;
    view-timeline: --scroll;
    animation: swing-right both linear;
    animation-timeline: --scroll;
    animation-range: entry 0 cover 40%;
  }
}

@media only screen and (min-width: 1024px) {
  .content-title-h1,
  .content-title-h2 {
    font-size: 5rem !important;
    line-height: 5.6rem !important;
  }
  .c-paragraph__title {
    font-size: 2.8rem !important;
    line-height: 2.8rem !important;
  }
  .c-paragraph {
    font-size: 2rem !important;
    line-height: 2.8rem !important;
  }
  .composite-richtext p {
    font-size: 3rem !important;
    line-height: 3.6rem !important;
  }
  .c-phrase__blockquote {
    font-size: 2.6rem !important;
    line-height: 3.2rem !important;
  }
  .c-phrase__blockquote:before,
  .c-phrase__blockquote:after {
    width: 20rem !important;
  }
}