/* Presentación de entrada de Pelis TV: sala de cine, película antigua, telón rojo y marquesina. */
@font-face{font-family:"Cinzel";src:url(../fonts/cinzel-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Cinzel";src:url(../fonts/cinzel-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Josefin";src:url(../fonts/josefin-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Josefin";src:url(../fonts/josefin-sans-latin-300-normal.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Cormorant";src:url(../fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap}

.intro{position:fixed;inset:0;z-index:1000;overflow:hidden;background:#000;color:#f4efe4;font-family:"Cinzel",Georgia,serif;
  --rojo:#d71920;--rojo-osc:#5c0a0e;--oro:#f5c518;--oro2:#e3a83a;--crema:#f4efe4;--negro:#050505}
.intro[hidden]{display:none}
.intro.fuera{opacity:0;transition:opacity .9s ease}
.intro .escena{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;opacity:0;overflow:hidden}

/* Textos: entran «enfocándose», como al ajustar el proyector */
.intro .palabra{display:block;position:relative;font-weight:700;line-height:1.08;letter-spacing:.06em;white-space:nowrap}
.intro .palabra.fina{font-family:"Josefin",sans-serif;font-weight:300;letter-spacing:.34em}
.intro .palabra .txt{display:inline-block;padding-top:.22em;margin-top:-.22em}  /* Safari recorta la tilde de Ñ/Ó al animar si sobresale */
.intro .palabra.oro .txt,.intro .titulo .txt{background:linear-gradient(180deg,#fff3c4 0%,#f5c518 45%,#b9821a 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.intro .palabra.oro,.intro .titulo{filter:drop-shadow(0 2px 10px rgba(245,197,24,.35))}
.intro .lema-intro{font-family:"Josefin",sans-serif;font-weight:300;letter-spacing:.32em;text-transform:uppercase;font-size:clamp(12px,2.6vmin,22px);opacity:.85}

/* 1 · Cuenta atrás */
.intro .colin{background:radial-gradient(circle at 50% 50%,#8b8478,#3c3832 75%)}
.intro .disco{position:relative;width:min(78vmin,560px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:#a39b8c}
.intro .barrido{position:absolute;inset:0;background:#5d574d}
.intro .aro{position:absolute;border-radius:50%;border:3px solid #f4efe4}
.intro .a1{inset:4%}.intro .a2{inset:14%;border-width:2px}
.intro .eje{position:absolute;background:#1a1814}
.intro .eje.h{left:-10%;right:-10%;top:50%;height:2px}.intro .eje.v{top:-10%;bottom:-10%;left:50%;width:2px}
.intro .num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:"Josefin",sans-serif;font-weight:600;font-size:min(52vmin,380px);color:#111;line-height:1;opacity:0;padding-top:.08em}
.intro .destello{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}

/* 2 · Sala */
.intro .sala{background:#000}
.intro .foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.intro .haz{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:conic-gradient(from 222deg at 98% -4%,transparent 0deg,rgba(255,236,190,.0) 4deg,rgba(255,236,190,.42) 12deg,rgba(255,236,190,.22) 22deg,rgba(255,236,190,0) 34deg,transparent 360deg)}
.intro .polvo{position:absolute;inset:0;pointer-events:none}
.intro .polvo i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff2cc;box-shadow:0 0 6px 1px rgba(255,236,190,.8)}
.intro .grupo{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-shadow:0 3px 26px rgba(0,0,0,.9)}

/* 3 · Tiras de película */
.intro .tiras{background:radial-gradient(ellipse at 50% 50%,#2a0507,#050505 75%)}
.intro .tira{position:absolute;left:-30%;right:-30%;height:min(27vmin,220px);background:#0c0c0c;
  box-shadow:0 10px 40px rgba(0,0,0,.7)}
.intro .tira::before,.intro .tira::after{content:"";position:absolute;left:0;right:0;height:13%;z-index:2;
  background:repeating-linear-gradient(90deg,transparent 0 6px,#d9d2c3 6px 16px,transparent 16px 26px);background-clip:content-box;padding:2.2% 0;box-sizing:border-box;opacity:.85}
.intro .tira::before{top:0}.intro .tira::after{bottom:0}
.intro .t1{top:18%;transform:rotate(-7deg)}.intro .t2{bottom:18%;transform:rotate(5deg)}
.intro .cinta{position:absolute;top:16%;bottom:16%;left:0;display:flex;gap:1.4vmin;padding:0 .7vmin}
.intro .foto-tira{flex:0 0 auto;height:100%;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;border-radius:4px;
  font-size:min(3.2vmin,24px);letter-spacing:.12em;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6);padding:0 6px;white-space:nowrap}
.intro .tono0{background:linear-gradient(140deg,#7a4a1c,#2e1a0a)}.intro .tono1{background:linear-gradient(140deg,#2b2b2b,#060606)}
.intro .tono2{background:linear-gradient(140deg,#c98a1a,#6b3f08)}.intro .tono3{background:linear-gradient(140deg,#5a0a0e,#120203)}
.intro .tono4{background:linear-gradient(140deg,#7b2a6b,#24081f)}.intro .tono5{background:linear-gradient(140deg,#1d3b5c,#071422)}
.intro .rotulo{position:relative;z-index:3;padding:2.2vmin 5vmin;background:var(--rojo);box-shadow:0 0 0 4px #050505,0 0 0 6px var(--oro)}

/* 4 · Claqueta */
.intro .plato{background:radial-gradient(ellipse at 50% 35%,#3a3a3a,#0b0b0b 70%)}
.intro .temblor{position:relative}
.intro .claqueta{position:relative;width:min(80vw,62vh,560px);padding-top:16%;filter:drop-shadow(0 18px 40px rgba(0,0,0,.8))}
.intro .palo{position:absolute;left:0;right:0;height:16%;top:0;border-radius:4px;transform-origin:3% 100%;
  background:repeating-linear-gradient(-58deg,#111 0 7%,#f4f4f4 7% 14%);border:3px solid #111;box-sizing:border-box}
.intro .palo.fijo{top:16%;transform:none;background:repeating-linear-gradient(58deg,#111 0 7%,#f4f4f4 7% 14%)}
.intro .tabla{display:grid;grid-template-columns:1fr 1fr;margin-top:16%;background:#141414;border:3px solid #111;border-radius:0 0 8px 8px;font-family:"Josefin",sans-serif}
.intro .fila{display:flex;flex-direction:column;align-items:flex-start;padding:2.2% 4%;border:1px solid rgba(255,255,255,.55);text-align:left}
.intro .fila.ancha{grid-column:1/-1}
.intro .fila small{font-size:min(2.2vmin,15px);letter-spacing:.2em;opacity:.7;font-weight:300}
.intro .fila b{font-size:min(5.4vmin,40px);font-weight:600;letter-spacing:.05em;font-family:"Cormorant",Georgia,serif;font-style:italic}
.intro .accion{margin-top:4vmin}
.intro .accion .txt{color:var(--oro)}

/* 5 · Sala moderna: pantalla panorámica y butacas */
.intro .multicine{background:linear-gradient(180deg,#07080c 0%,#0d0f16 55%,#050507 100%);justify-content:flex-start;padding-top:10vh}
@media (orientation:portrait){.intro .multicine{padding-top:26vh}}
.intro .pantalla{position:relative;width:min(84vw,118vh);aspect-ratio:2.39/1;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#f3f6ff,#d9e2f5);border-radius:3px;color:#0b0b0d;overflow:hidden}
.intro .pantalla .brillo{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,0),rgba(150,175,230,.35))}
.intro .pantalla .palabra{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);color:#0b0b0d;letter-spacing:.14em}
.intro .luz-sala{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 45% at 50% 30%,rgba(190,210,255,.28),transparent 70%)}
.intro .butacas{position:absolute;left:-4%;right:-4%;bottom:0;height:34vh}
.intro .butacas i{position:absolute;bottom:0;border-radius:42% 42% 10% 10% / 60% 60% 10% 10%;
  background:linear-gradient(180deg,#1b1d26,#050507);box-shadow:inset 0 2px 0 rgba(170,190,255,.12)}
/* 6 · Formato panorámico */
.intro .creditos{background:radial-gradient(ellipse at 50% 50%,#1b1408,#000 70%)}
.intro .banda-cine{position:absolute;left:0;right:0;height:14vh;background:#000;z-index:2}
.intro .banda-cine.sup{top:0}.intro .banda-cine.inf{bottom:0}
.intro .estrellas-intro{display:flex;gap:1.6vmin;margin-top:3vmin;font-size:min(6vmin,46px);color:var(--oro)}
.intro .estrellas-intro i{font-style:normal;display:inline-block;filter:drop-shadow(0 0 10px rgba(245,197,24,.6))}

/* 7 · Marquesina */
.intro .cartel{background:radial-gradient(ellipse at 50% 40%,#5c0a0e,#170203 70%)}
.intro .marquesina{position:relative;display:flex;flex-direction:column;align-items:center;padding:5vmin 7vmin;border:3px solid var(--oro2);border-radius:18px;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.75));box-shadow:0 0 60px rgba(245,197,24,.18),inset 0 0 40px rgba(0,0,0,.6);max-width:92vw}
.intro .bombillas{position:absolute;inset:0;pointer-events:none}
.intro .bombillas i{position:absolute;width:1.5vmin;height:1.5vmin;min-width:7px;min-height:7px;margin:-.75vmin 0 0 -.75vmin;border-radius:50%;
  background:#fff1b8;box-shadow:0 0 8px 3px rgba(255,214,90,.85)}
.intro .marquesina .logo{width:clamp(70px,17vmin,170px);height:auto;margin-bottom:1.6vmin}
.intro .lema-final{display:block;font-family:"Cormorant",Georgia,serif;font-style:italic;font-weight:500;font-size:min(4.6vmin,4.4vw,34px);line-height:1.25;margin-top:1.8vmin;max-width:min(80vw,640px);color:var(--crema)}
.intro .llamada{margin-top:3vmin;padding:.8em 1.6em;background:var(--rojo);color:#fff;font-family:"Josefin",sans-serif;font-weight:600;letter-spacing:.2em;font-size:min(3vmin,3.4vw,18px);border-radius:999px;box-shadow:0 6px 24px rgba(215,25,32,.45)}

/* Capas de película antigua */
.intro .pelicula{position:absolute;inset:0;pointer-events:none;z-index:40}
.intro .grano{position:absolute;inset:-50%;opacity:.13;mix-blend-mode:overlay;background-size:180px 180px}
.intro .raya{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.5);opacity:0}
.intro .parpadeo{position:absolute;inset:0;background:#000;opacity:0}
.intro .vineta{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(0,0,0,.6) 100%)}

/* Portada y botones */
.intro .portada{opacity:1;z-index:50;gap:2.2vmin;background:linear-gradient(180deg,rgba(5,5,5,.6),rgba(5,5,5,.92)),url(../img/fondo.webp) center/cover}
.intro .portada .logo{width:clamp(90px,22vmin,210px);height:auto;filter:drop-shadow(0 8px 30px rgba(0,0,0,.8))}
.intro .botones-intro{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:3vmin;padding:0 16px}
.intro .botones-intro button,.intro .saltar{font-family:"Segoe UI",Roboto,Arial,sans-serif;font-size:15px;letter-spacing:.04em;cursor:pointer;border-radius:999px}
.intro .entrar{background:var(--rojo);color:#fff;border:1px solid var(--rojo);padding:14px 28px;font-weight:700;box-shadow:0 6px 24px rgba(215,25,32,.45)}
.intro .entrar:hover{background:#ff2a33}
.intro .silencio{background:rgba(0,0,0,.35);color:#fff;border:1px solid rgba(255,255,255,.45);padding:14px 28px}
.intro .silencio:hover{background:rgba(255,255,255,.1)}
.intro .saltar{position:absolute;right:16px;top:16px;z-index:60;background:rgba(0,0,0,.55);color:#fff;border:1px solid rgba(255,255,255,.4);padding:8px 16px}
.intro .saltar:hover{background:rgba(0,0,0,.85)}
.intro.video .saltar,.intro.video .portada{display:none}
@media (prefers-reduced-motion:reduce){.intro{display:none}}

/* Final épico: ascuas doradas y destello sobre la marquesina */
.intro .ascuas{position:absolute;inset:0;pointer-events:none;z-index:30;overflow:hidden}
.intro .ascuas i{position:absolute;bottom:-10px;border-radius:50%;background:#ffd36b;box-shadow:0 0 8px 2px rgba(255,170,40,.85);opacity:0}
.intro .marco-brillo{position:absolute;inset:0;overflow:hidden;border-radius:16px;pointer-events:none;z-index:3}
.intro .brillo-oro{position:absolute;top:-20%;bottom:-20%;left:0;width:45%;pointer-events:none;z-index:3;mix-blend-mode:screen;
  background:linear-gradient(90deg,transparent,rgba(255,236,170,.0) 20%,rgba(255,236,170,.55) 50%,rgba(255,236,170,0) 80%,transparent)}