/* Home: fondo de películas en el hero, bloque de ventajas y tira de pósters.
   Solo lo carga index.html. No cambia estilos.css ni el contenido del hero. */

/* 1. Fondo del hero: cuadros de películas y series en alta (AVIF/WebP, 1920-2560 px
   en la compu y recorte vertical de 640-960 px en el celular). Se ven nítidos:
   sin desenfoque ni velo parejo. El oscurecido es solo un degradé del lado del
   texto, y el borde de abajo se funde con el fondo de la página (máscara alta). */
.hero-cine{position:relative;isolation:isolate;overflow-x:clip}
.cine-fondo{position:absolute;inset:0 0 -120px;z-index:-1;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 52%,#0000 100%);mask-image:linear-gradient(180deg,#000 0%,#000 52%,#0000 100%)}
.cine-fondo picture{position:absolute;inset:0;opacity:0;transition:opacity 1.8s ease-in-out}
.cine-fondo picture.on{opacity:1;z-index:2}
/* la que sale queda entera debajo hasta que la nueva terminó de aparecer: sin bajón a oscuro */
.cine-fondo picture.sale{opacity:1;z-index:1;transition:none}
/* mientras baja la primera, una versión mínima (menos de 1 KB, en la página) ocupa su lugar */
.cine-fondo picture[style*="--previa"]{background:var(--previa) var(--foco,50% 40%)/cover no-repeat}
.cine-fondo img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--foco,50% 40%);transform:scale(1.02);transition:transform 14s linear;will-change:transform}
.cine-fondo picture.on img,.cine-fondo picture.sale img{transform:scale(1.09)}
.cine-fondo:after{content:'';position:absolute;inset:0;z-index:3;background:
  linear-gradient(90deg,#0a0f1aeb 0%,#0a0f1ad1 28%,#0a0f1a99 44%,#0a0f1a2e 60%,#0a0f1a00 74%),
  linear-gradient(180deg,#0a0f1a66 0%,#0a0f1a00 18%)}
@media (max-width:900px){
  .cine-fondo{bottom:auto;height:min(100%,760px);
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 45%,#0000 100%);mask-image:linear-gradient(180deg,#000 0%,#000 45%,#0000 100%)}
  .cine-fondo img{object-position:50% 35%;filter:brightness(var(--brillo-movil,1))}
  .cine-fondo picture[style*="--previa"]{background-image:var(--previa-movil);background-position:50% 35%}
  .cine-fondo:after{background:
    linear-gradient(180deg,#0a0f1a73 0%,#0a0f1a99 20%,#0a0f1ab8 42%,#0a0f1ad6 66%,#0a0f1a 100%)}
  .hero-cine .hero h1,.hero-cine .hero-description{text-shadow:0 1px 2px #0009,0 2px 14px #000a}
}
@media (min-width:901px){
  .hero-cine .hero h1,.hero-cine .hero-description,.hero-cine .visual-title{text-shadow:0 1px 2px #0006,0 2px 18px #0008}
}
/* el renglón con degradé es texto transparente: la sombra va por filter, si no se ve a través */
.hero-cine .hero h1>span{text-shadow:none;filter:drop-shadow(0 1px 1px #0008) drop-shadow(0 2px 10px #0009)}

/* 2. Ventajas: una sola frase grande y tres renglones, sin tarjetas. */
.vt-section{padding-block:72px 40px}
.vt-section h2{max-width:900px;margin:0;font-size:clamp(30px,4vw,52px);letter-spacing:-1.5px;line-height:1.1}
.vt-lista{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px;border-top:1px solid var(--border)}
.vt-lista li{padding-top:18px;color:var(--muted);font-size:16px;line-height:1.6}
.vt-lista b{color:var(--text);font-weight:600}
@media (max-width:900px){
  .vt-lista{grid-template-columns:1fr;border-top:0}
  .vt-lista li{padding:14px 0;border-top:1px solid var(--border)}
}
@media (max-width:600px){
  .vt-section{padding-block:52px 28px}
  .vt-lista{margin-top:22px}
  .vt-lista li{font-size:15px}
}

/* 3. Catálogo: pósters quietos; se recorren deslizando, sin animación. */
.ct-section{padding-block:40px 72px}
.ct-section h2{text-align:center;margin:0 auto 32px}
.ct-marquee{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;overscroll-behavior-x:contain;padding-bottom:12px}
.ct-pista{display:flex;width:max-content;margin-inline:auto}
.ct-lista{display:flex;gap:14px;margin:0;padding:0 14px;list-style:none}
.ct-lista li{flex:none;scroll-snap-align:start}
.ct-lista img{display:block;width:160px;height:240px;object-fit:cover;border-radius:12px;background:var(--raised);box-shadow:0 10px 30px #0006}
@media (max-width:600px){
  .ct-section{padding-block:28px 52px}
  .ct-section h2{margin-bottom:22px}
  .ct-lista{gap:10px;padding-inline:10px}
  .ct-lista img{width:120px;height:180px;border-radius:10px}
}
/* 3b. Qué podés ver: lista de definiciones, sin cajas. */
.cat-lista{margin:8px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.cat-lista>div{padding:20px 0;border-top:1px solid var(--border)}
.cat-lista dt{font-size:19px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cat-lista dt>span{color:var(--accent)}
.cat-lista dt>.cat-badge{position:static;color:var(--yellow)}
.cat-lista dd{margin:6px 0 0;color:var(--muted);line-height:1.65}
@media (max-width:700px){.cat-lista{grid-template-columns:1fr}}
/* Botón del video: solo el círculo de play, arriba de la frase del póster para no
   taparla. El triángulo es CSS (el glifo ▶ queda oculto) y va
   levemente corrido a la derecha para que se vea centrado. */
.video-play{min-width:0;padding:10px;border-radius:50%;top:22%}
.video-play>span{justify-content:center;align-items:center;padding:0;font-size:0;line-height:0}
.video-play>span::before{content:"";width:0;height:0;margin-left:5px;border-style:solid;border-width:.42em 0 .42em .7em;border-color:transparent transparent transparent #fff;font-size:20px}
@media(max-width:600px){.video-play>span::before{font-size:16px;margin-left:2px}}

/* 4. Eventos importantes (debajo de los planes). El contenido entre
   <!-- eventos-semana:inicio/fin --> lo renueva SEO Stella cada semana. */
.ev-section{padding-block:12px 56px}
.ev-section h2{text-align:center;margin:0 auto 24px}
.ev-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:0 auto;padding:0;list-style:none}
.ev-lista li{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:0 10px 30px #0004}
.ev-lista time{align-self:flex-start;margin-bottom:6px;padding:3px 10px;border-radius:999px;background:#ff8f7e1a;color:var(--accent);font-size:13px;font-weight:600}
.ev-lista a{color:var(--text);font-weight:600;font-size:17px;text-decoration:none}
.ev-lista a:hover{color:var(--accent)}
.ev-lista span{color:var(--muted);font-size:14px;line-height:1.45}
.ev-nota{margin:16px auto 0;text-align:center;color:var(--muted);font-size:14px}
@media (max-width:600px){
  .ev-section{padding-block:4px 40px}
  .ev-section h2{margin-bottom:16px}
  .ev-fila{overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:20px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .ev-fila::-webkit-scrollbar{display:none}
  .ev-lista.container{display:flex;width:max-content;margin:0;padding:0 20px;gap:10px}
  .ev-lista li{width:236px;padding:14px;scroll-snap-align:start}
  .ev-lista a{font-size:16px}
  .ev-nota{font-size:13px;padding-inline:20px}
}

/* Sin movimiento si la persona lo pidió en su sistema. */
@media (prefers-reduced-motion:reduce){
  .cine-fondo picture,.cine-fondo img{transition:none;transform:none}
  .cine-fondo picture.on img{transform:none}
}

/* 4. Título en dos renglones: el segundo con el degradé de la marca. */
.hero h1.h1-mix>span{display:block;background:linear-gradient(90deg,var(--accent) 0%,#f0566e 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero h1.h1-a{font-size:56px}
.hero h1.h1-a>span{font-size:.6em;letter-spacing:-.8px;line-height:1.18;margin-top:.35em}
.hero h1.h1-b{font-size:54px}
.hero h1.h1-b>span{margin-top:.05em}
@media (max-width:1100px){.hero h1.h1-a,.hero h1.h1-b{font-size:48px}}
@media (max-width:600px){.hero h1.h1-a,.hero h1.h1-b{font-size:36px}.hero h1.h1-a>span{font-size:.66em;letter-spacing:-.5px}}
@media (max-width:380px){.hero h1.h1-a,.hero h1.h1-b{font-size:32px}}

/* 5. Compatibilidad: línea chica abajo de los botones (mismo texto de antes). */
.hero-compat{margin-top:14px;max-width:520px;font-size:13px;line-height:1.55;color:var(--muted)}
.hero-compat a{color:inherit}
@media (max-width:600px){.hero-compat{font-size:12px;margin-top:12px}}