.elementor-20 .elementor-element.elementor-element-a7d5ce5{--display:flex;}.elementor-20 .elementor-element.elementor-element-62fdbf3{--display:flex;--min-height:1001px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:-171px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-20 .elementor-element.elementor-element-d0bb532{margin:924px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}@media(max-width:767px){.elementor-20 .elementor-element.elementor-element-62fdbf3{--margin-top:-203px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}}@media(min-width:768px){.elementor-20 .elementor-element.elementor-element-62fdbf3{--content-width:1600px;}}/* Start custom CSS for html, class: .elementor-element-9f78970 *//* ============================
   CINE MODERNO “REEL” BESTIAL
   ============================ */

/* Contenedor tipo proyector */
.cine-reel{
  position: relative;
  overflow: hidden;
  background: #070708; /* negro cine */
  transform: translateZ(0);
}

/* Simula marco/ventana del proyector (vignette + depth) */
.cine-reel::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 55%, rgba(0,0,0,0) 52%, rgba(0,0,0,.42) 100%),
    linear-gradient(to top, rgba(0,0,0,.22), rgba(0,0,0,0) 55%);
  opacity:.95;
  z-index: 2;
}

/* Rollo de película: perforaciones laterales (moderno, limpio) */
.cine-reel::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  z-index: 3;

  /* Dos columnas de perforaciones + sombreado de carril */
  background:
    /* carril izquierdo */
    linear-gradient(to right, rgba(0,0,0,.55), rgba(0,0,0,0) 12%),
    /* carril derecho */
    linear-gradient(to left, rgba(0,0,0,.55), rgba(0,0,0,0) 12%),

    /* perforaciones izquierda */
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.22) 0px,
      rgba(255,255,255,.22) 10px,
      rgba(255,255,255,0) 10px,
      rgba(255,255,255,0) 34px
    ),
    /* perforaciones derecha */
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.22) 0px,
      rgba(255,255,255,.22) 10px,
      rgba(255,255,255,0) 10px,
      rgba(255,255,255,0) 34px
    );

  background-size:
    100% 100%,
    100% 100%,
    12px 100%,
    12px 100%;

  background-position:
    left top,
    right top,
    16px 0,
    calc(100% - 28px) 0;

  background-repeat: no-repeat, no-repeat, repeat-y, repeat-y;
  opacity: .55;
  mix-blend-mode: screen;

  animation: reelDrift 1.6s ease-in-out infinite alternate;
}

/* El logo dentro del intro */
.cine-reel img,
.cine-reel .intro-logo{
  position: relative;
  z-index: 4;
  will-change: transform, filter, opacity;
  transform: translateZ(0);
}

/* “Quitar fondo” del PNG (SIMULADO):
   - Si el fondo es blanco, sobre negro con mix-blend-mode:screen se integra muy bien
   - Si el fondo NO es blanco, no hace magia.
*/
.cine-reel .intro-logo{
  mix-blend-mode: screen;     /* clave para “borrar” blanco sobre negro */
  filter:
    contrast(1.25)
    brightness(1.05)
    saturate(1.05);
}

/* Halation / glow moderno (añade un duplicado luminoso del logo via drop-shadow) */
.cine-reel .intro-logo{
  filter:
    contrast(1.25)
    brightness(1.05)
    saturate(1.05)
    drop-shadow(0 0 14px rgba(255,255,255,.25))
    drop-shadow(0 0 34px rgba(255,255,255,.12));
}

/* Grano fino + scanlines sutiles (MODERNO, no VHS) */
.cine-reel .cine-noise{
  position:absolute; inset:-20%;
  pointer-events:none;
  z-index: 5;
  opacity: .22;
  mix-blend-mode: overlay;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.02) 0px,
      rgba(0,0,0,.02) 1px,
      rgba(255,255,255,0) 2px
    ),
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.08), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(0,0,0,.12), transparent 42%);
  animation: noiseFlick 1.1s steps(6) infinite;
  filter: blur(.2px);
}

/* Barrido de luz de lente (premium) */
.cine-reel .cine-sweep{
  position:absolute; inset:-35%;
  pointer-events:none;
  z-index: 6;
  background: linear-gradient(115deg,
    rgba(255,255,255,0) 38%,
    rgba(255,255,255,.10) 50%,
    rgba(255,255,255,0) 62%);
  mix-blend-mode: soft-light;
  opacity: .35;
  transform: translateX(-30%) translateY(-10%);
  animation: sweepMove 5.8s ease-in-out infinite;
}

/* Micro-jitter (sensación proyector moderno, muy sutil) */
.cine-reel{
  animation: projectorJitter 2.6s ease-in-out infinite;
}

/* Animaciones */
@keyframes reelDrift{
  0%{ transform: translateY(-1px); opacity:.50; }
  100%{ transform: translateY(1px); opacity:.62; }
}

@keyframes noiseFlick{
  0%{ transform: translate3d(-2%, -1%, 0) scale(1.02); opacity:.18; }
  50%{ transform: translate3d(1%, 2%, 0) scale(1.03); opacity:.25; }
  100%{ transform: translate3d(-1%, 1%, 0) scale(1.02); opacity:.20; }
}

@keyframes sweepMove{
  0%,100%{ transform: translateX(-30%) translateY(-10%); opacity:.25; }
  50%{ transform: translateX(10%) translateY(8%); opacity:.40; }
}

@keyframes projectorJitter{
  0%,100%{ transform: translate3d(0,0,0); }
  20%{ transform: translate3d(.2px,-.3px,0); }
  45%{ transform: translate3d(-.3px,.2px,0); }
  70%{ transform: translate3d(.15px,.15px,0); }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  .cine-reel, .cine-reel::after, .cine-reel .cine-noise, .cine-reel .cine-sweep{ animation:none !important; }
}/* End custom CSS */