/*
 * Atenciones Web · atencionesweb.com — PORTADA "DE CINE" (estilos extra, solo de la portada nueva)
 * Desarrollado por Autorys · https://autorys.com · sales@autorys.com
 * (c) Autorys. Todos los derechos reservados.
 *
 * [Autorys · Portada de cine 2026-10-22]
 *   Se carga DESPUÉS de aw.css y solo en la portada de cine (body.cine). Las demás páginas no la usan.
 *   Solo se anima transform y opacity (y una máscara al aparecer). Sin JavaScript todo se ve completo;
 *   con "reducir movimiento" cine.js no arranca y la película queda como lista (aw.css apaga las animaciones).
 *   Clases que pone cine.js:  html.cine-on (hay movimiento) · .peli.peli-on (la película va fija con el scroll)
 *                             · .heroe.cine-vivo (grano y haz en marcha)
 *
 * Índice: 1) Héroe: capas, luz, grano, viñeta   2) Entrada coreografiada   3) Cámara de las tarjetas
 *         4) Franja que corre   5) La película (lista sin JS)   6) Teléfono y plática   7) Factura timbrada
 *         8) La película fija (con JS)   9) Película en celular   10) Apariciones con máscara e inclinación
 *         11) Menos movimiento
 */

/* ---------- 1) Héroe a pantalla completa: capas, luz que se mueve, grano y viñeta ---------- */
.cine .heroe--cine { min-height: 100vh; min-height: 100svh; padding-bottom: 140px; }
.heroe--cine .heroe__in { position: relative; z-index: 1; perspective: 1600px; }
.cine-grano, .cine-vineta { position: absolute; pointer-events: none; z-index: 0; }
.cine-vineta { inset: 0; background: radial-gradient(ellipse 120% 95% at 50% 40%, transparent 52%, rgba(0, 0, 0, .62) 100%); }
.cine-grano {
  inset: -80px; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  will-change: transform;
}
/* el grano y el haz se mueven desde la primera interacción (o a los 3.5 s): la página se pinta completa primero */
.cine-vivo .cine-grano { animation: cine-grano 1.1s steps(5) infinite; }
.cine-vivo .cine-haz { animation: cine-haz 10s cubic-bezier(.45, 0, .2, 1) .2s infinite; }
@keyframes cine-grano {
  0% { transform: translate(0, 0); } 20% { transform: translate(-34px, 18px); } 40% { transform: translate(22px, -30px); }
  60% { transform: translate(-16px, -12px); } 80% { transform: translate(30px, 26px); } 100% { transform: translate(0, 0); }
}
/* Haz de luz que cruza la escena (como el reflejo de un reflector) */
.cine-haz {
  position: absolute; top: -30%; left: -40%; width: 55%; height: 160%;
  background: linear-gradient(100deg, transparent 30%, rgba(91, 140, 255, .14) 46%, rgba(159, 216, 255, .22) 50%, rgba(91, 140, 255, .14) 54%, transparent 70%);
  transform: translateX(-40%) rotate(10deg); opacity: 0;
  will-change: transform, opacity;
}
@keyframes cine-haz {
  0% { transform: translateX(-40%) rotate(10deg); opacity: 0; }
  8% { opacity: 1; }
  45% { transform: translateX(300%) rotate(10deg); opacity: .9; }
  52%, 100% { transform: translateX(300%) rotate(10deg); opacity: 0; }
}
/* Foco que sigue al ratón (solo computadora; lo mueve cine.js) */
.cine-foco {
  position: absolute; left: 0; top: 0; width: 760px; height: 760px; margin: -380px 0 0 -380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(79, 209, 255, .16), rgba(26, 71, 255, .08) 35%, transparent 62%);
  opacity: 0; transition: opacity .8s ease; will-change: transform;
}
.cine-foco.vivo { opacity: 1; }

/* Señal para bajar */
.cine-bajar {
  position: absolute; left: 50%; bottom: 26px; z-index: 1; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--claro-2); text-decoration: none; font: 650 .78rem/1 var(--cuerpo); letter-spacing: .16em; text-transform: uppercase;
  animation: cine-aparece 1s cubic-bezier(.16, 1, .3, 1) 1.6s both;
}
.cine-bajar:hover { color: #fff; }
.cine-bajar i { position: relative; width: 2px; height: 46px; border-radius: 2px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.cine-bajar i::after { content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 16px; border-radius: 2px; background: var(--cian-claro); animation: cine-gota 1.8s cubic-bezier(.6, 0, .4, 1) infinite; }
@keyframes cine-gota { from { transform: translateY(-16px); } to { transform: translateY(46px); } }

/* ---------- 2) Entrada coreografiada (solo CSS: funciona aun sin JavaScript) ---------- */
@keyframes cine-aparece { from { opacity: 0; transform: translateY(26px); } }
@keyframes cine-sube { from { transform: translateY(108%) rotate(4deg); } }
@keyframes cine-linea { from { clip-path: inset(0 100% -20% 0); transform: translateX(-.18em); } to { clip-path: inset(0 -6% -20% 0); transform: none; } }
.cine-entra { animation: cine-aparece 1s cubic-bezier(.16, 1, .3, 1) both; }
.cine-entra--1 { animation-delay: .05s; }
.cine-entra--2 { animation-delay: .7s; }
.cine-entra--3 { animation-delay: .85s; }
.cine-entra--4 { animation-delay: 1s; }
.heroe--cine h1 .pal { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 .03em .12em; margin: 0 -.03em -.12em; }
.heroe--cine h1 .pal > span { display: inline-block; transform-origin: 0 100%; animation: cine-sube 1s cubic-bezier(.16, 1, .3, 1) both; }
.heroe--cine h1 .pal:nth-child(1) > span { animation-delay: .12s; }
.heroe--cine h1 .pal:nth-child(2) > span { animation-delay: .2s; }
.heroe--cine h1 .pal:nth-child(3) > span { animation-delay: .28s; }
.heroe--cine h1 .pal:nth-child(4) > span { animation-delay: .36s; }
.heroe--cine h1 .pal:nth-child(5) > span { animation-delay: .44s; }
.heroe--cine h1 .pal:nth-child(n+6) > span { animation-delay: .5s; }
.heroe--cine h1 .brillo { animation: cine-linea 1.3s cubic-bezier(.16, 1, .3, 1) .5s both; text-shadow: none; }
.cine-on [data-cine-txt] { will-change: transform, opacity; }

/* ---------- 3) Cámara de las tarjetas del héroe (profundidad real: cada tarjeta a otra distancia) ---------- */
.escena--cine { transform-style: preserve-3d; }
.cine-on .escena--cine { will-change: transform; }
.escena__camara { position: relative; height: 100%; transform-style: preserve-3d; animation: cine-camara 1.9s cubic-bezier(.16, 1, .3, 1) .25s both; }
@keyframes cine-camara { from { opacity: 0; transform: translate3d(60px, 90px, -460px) rotateX(26deg) rotateY(-30deg) rotateZ(5deg); } }
.escena--cine .escena__logo { translate: 0 0 -160px; }
.escena--cine .tarjeta--wa { translate: 0 0 40px; }
.escena--cine .tarjeta--cfdi { translate: 0 0 110px; }
.escena--cine .tarjeta--kpi { translate: 0 0 170px; }
/* Las burbujas y el sello esperan a que termine la entrada de cámara */
.escena--cine .burbuja:nth-of-type(1) { animation-delay: 1.3s; } .escena--cine .burbuja:nth-of-type(2) { animation-delay: 2s; }
.escena--cine .burbuja:nth-of-type(3) { animation-delay: 2.8s; } .escena--cine .burbuja:nth-of-type(4) { animation-delay: 3.6s; }
.escena--cine .sello { animation-delay: 4.4s; }
.escena--cine .sello::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--cian-claro); opacity: 0; animation: cine-onda 1s ease-out 4.6s; }
@keyframes cine-onda { from { opacity: .9; transform: scale(.8); } to { opacity: 0; transform: scale(1.8); } }

/* ---------- 4) Franja de confianza que corre como cinta (cine.js duplica la lista, la copia va oculta a lectores) ---------- */
.franja--cinta { position: relative; }
.franja--cinta::before, .franja--cinta::after { content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; width: 8%; pointer-events: none; }
.franja--cinta::before { left: 0; background: linear-gradient(90deg, var(--tinta-2), transparent); }
.franja--cinta::after { right: 0; background: linear-gradient(-90deg, var(--tinta-2), transparent); }
.franja__pista { display: flex; width: max-content; animation: cine-cinta 40s linear infinite; will-change: transform; }
.franja--cinta:hover .franja__pista { animation-play-state: paused; }
.franja--cinta .franja__lista { flex: none; flex-wrap: nowrap; justify-content: flex-start; max-width: none; margin: 0; padding: 22px 18px; }
@keyframes cine-cinta { to { transform: translateX(-50%); } }

/* ---------- 5) LA PELÍCULA — sin JavaScript: lista de capítulos con el teléfono al lado ---------- */
.peli { position: relative; color: #fff; background: radial-gradient(ellipse 70% 45% at 72% 42%, rgba(26, 71, 255, .24), transparent 70%), var(--tinta); }
.peli__cab { text-align: center; max-width: 920px; padding-top: clamp(84px, 11vw, 140px); margin-bottom: clamp(40px, 6vw, 70px); }
.peli__cab h2 { font-size: clamp(2.1rem, 5.2vw, 4.2rem); letter-spacing: -.03em; }
.peli__cab > p:last-child { color: #C9D0E8; font-size: clamp(1.05rem, 1.6vw, 1.22rem); max-width: 680px; margin-inline: auto; }
.peli__escena { width: min(var(--ancho), 100% - 40px); margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 40px 64px; align-items: start; }
.peli__barra { display: none; }
.peli__caps { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; }
.peli__hora { font: 700 .78rem/1.2 var(--cuerpo); letter-spacing: .14em; text-transform: uppercase; color: var(--cian-claro); margin: 0 0 14px; }
.peli__hora span { color: var(--azul-claro); }
.peli__cap h3 { font-size: clamp(1.55rem, 2.7vw, 2.3rem); line-height: 1.1; margin-bottom: .45em; }
.peli__cap p:last-child { color: #C9D0E8; margin: 0; max-width: 34rem; }
.peli__set { position: sticky; top: 110px; display: flex; justify-content: center; padding: 0 0 120px; }
.peli__zoom { position: relative; width: 290px; aspect-ratio: 9 / 19; }
.peli__cierre { text-align: center; padding: clamp(50px, 7vw, 90px) 0 clamp(80px, 10vw, 130px); }
.peli__cierre p { font: 700 clamp(1.35rem, 2.6vw, 2rem)/1.25 var(--titulos); letter-spacing: -.02em; max-width: 760px; margin: 0 auto 30px; }
.peli__cierre .heroe__btns { justify-content: center; margin: 0; }

/* ---------- 6) El teléfono y la plática (todo con CSS; las medidas siguen el ancho del teléfono) ---------- */
.tel {
  position: absolute; inset: 0; container-type: inline-size; border-radius: 15% / 7.2%; padding: 3.4%;
  background: linear-gradient(150deg, #20294D, #05081A 55%, #121A3A);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .16), inset 0 0 0 5px rgba(0, 0, 0, .5), 0 50px 100px -30px rgba(0, 0, 0, .9), 0 0 90px rgba(26, 71, 255, .35);
}
.tel__pantalla { position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 12.5% / 6%; background: #E9EFFB; color: var(--texto); }
.tel__estado { display: flex; align-items: center; justify-content: space-between; padding: 3.6cqw 7cqw 2cqw; background: var(--tinta-2); color: #fff; font-size: 4.2cqw; }
.tel__estado b { font-weight: 700; font-variant-numeric: tabular-nums; }
.tel__isla { width: 28cqw; height: 7.4cqw; border-radius: 99px; background: #000; }
.tel__senal { display: flex; align-items: flex-end; gap: .9cqw; height: 3.6cqw; }
.tel__senal i { width: 1.1cqw; background: #fff; border-radius: 1px; }
.tel__senal i:nth-child(1) { height: 30%; } .tel__senal i:nth-child(2) { height: 55%; } .tel__senal i:nth-child(3) { height: 80%; } .tel__senal i:nth-child(4) { height: 100%; }
.tel__cab { display: flex; align-items: center; gap: 3cqw; padding: 2.4cqw 4.6cqw 3.4cqw; background: var(--tinta-2); color: #fff; }
.tel__cab .avatar { width: 10.5cqw; height: 10.5cqw; font-size: 3.6cqw; }
.tel__cab b { display: block; font-size: 4.6cqw; line-height: 1.2; }
.tel__cab small { color: var(--cian-claro); font-size: 3.4cqw; }
.tel__chat { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 2.4cqw; padding: 4cqw; overflow: hidden;
  background-image: radial-gradient(rgba(26, 71, 255, .08) 1px, transparent 1.4px); background-size: 6cqw 6cqw; }
.tel__escribir { display: flex; align-items: center; gap: 2.4cqw; padding: 3cqw 4cqw 5cqw; background: #E9EFFB; }
.tel__escribir span { flex: 1; padding: 2.6cqw 4cqw; border-radius: 99px; background: #fff; color: #6B7590; font-size: 3.8cqw; }
.tel__escribir i { width: 10cqw; height: 10cqw; border-radius: 50%; background: var(--azul); }
.tel__aviso {
  position: absolute; z-index: 3; top: 12cqw; left: 3.6cqw; right: 3.6cqw; display: flex; gap: 3cqw; align-items: flex-start;
  padding: 3.4cqw; border-radius: 5cqw; background: rgba(12, 22, 56, .94); color: #E3E7F5; font-size: 3.5cqw; line-height: 1.35;
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .6);
}
.tel__aviso b { color: #fff; }
.tel__aviso-ic { flex: none; width: 8cqw; height: 8cqw; border-radius: 2.4cqw; display: grid; place-items: center; background: #128C4A; color: #fff; }
.tel__aviso-ic .ic { width: 5cqw; height: 5cqw; }
.m { max-width: 82%; margin: 0; padding: 2.4cqw 3.4cqw; border-radius: 4cqw; font-size: 3.9cqw; line-height: 1.38; background: #fff; box-shadow: 0 1px 1px rgba(2, 4, 14, .06); }
.m small { display: block; margin-top: .8cqw; text-align: right; font-size: 2.8cqw; color: #5A6480; }
.m small em { font-style: normal; font-weight: 700; color: var(--azul); margin-right: 1.6cqw; }
.m--in { align-self: flex-start; border-top-left-radius: 1cqw; }
.m--out { align-self: flex-end; background: #D6E4FF; border-top-right-radius: 1cqw; }
.m--escribe { align-self: flex-end; display: flex; gap: 1.4cqw; padding: 3.4cqw 4cqw; background: #D6E4FF; overflow: hidden; }
.m--escribe span { width: 1.9cqw; height: 1.9cqw; border-radius: 50%; background: #5A6480; animation: puntitos 1.1s infinite; }
.m--escribe span:nth-child(2) { animation-delay: .15s; } .m--escribe span:nth-child(3) { animation-delay: .3s; }
.m--doc { display: flex; flex-wrap: wrap; align-items: center; gap: 2.4cqw; }
.m--doc small { width: 100%; }
.m__pdf { flex: none; width: 10cqw; height: 12cqw; border-radius: 1.6cqw; display: grid; place-items: center; background: var(--azul); color: #fff; font: 800 2.8cqw/1 var(--titulos); }
.m--chip { align-self: center; display: flex; align-items: center; gap: 1.6cqw; max-width: 92%; padding: 1.8cqw 3.4cqw; border-radius: 99px; background: rgba(2, 4, 14, .07); color: #3A4360; font-size: 3.3cqw; font-weight: 650; box-shadow: none; }
.m--chip .ic { width: 3.6cqw; height: 3.6cqw; }
.m--ok { background: #DCF5E7; color: #0B5D33; }
.m--pago { display: flex; flex-direction: column; gap: 1cqw; min-width: 62%; }
.m--pago > span:first-child { font-size: 3.2cqw; color: #3A4360; }
.m--pago b { font: 800 5.6cqw/1.1 var(--titulos); letter-spacing: -.02em; }
.m__boton { margin-top: 1.4cqw; padding: 2cqw 2.4cqw; border-radius: 99px; background: var(--azul); color: #fff; text-align: center; font-weight: 700; font-size: 3.1cqw; }

/* Tarjeta de ventas del mes (aparece con el cobro) */
.peli__kpi {
  position: absolute; z-index: 2; left: -46%; top: 16%; width: 200px; padding: 16px 18px; border-radius: 18px;
  background: rgba(7, 13, 36, .92); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8), 0 0 40px rgba(26, 71, 255, .25);
}
.peli__kpi small { display: block; color: var(--claro-2); font-size: .76rem; }
.peli__kpi b { display: block; font: 800 1.55rem/1.2 var(--titulos); font-variant-numeric: tabular-nums; }
.peli__kpi .kpi__sube { margin: 0; display: block; font-size: .74rem; }

/* ---------- 7) El final: la factura timbrada ante el SAT ---------- */
.peli__cfdi {
  position: absolute; z-index: 3; left: 40%; bottom: 4%; width: 360px; padding: 22px; border-radius: 22px;
  background: #fff; color: var(--texto); box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .5), 0 0 70px rgba(79, 209, 255, .25);
  transform: rotate(3deg);
}
.peli__cfdi .cfdi__cab b { font-size: 1.02rem; }
.peli__cfdi .cfdi__folio { margin-right: 58px; }
.peli__fiscal { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 14px; border: 1px dashed #C9D4EA; margin-bottom: 12px; }
.peli__fiscal .qr { flex: none; width: 84px; height: 84px; border-radius: 6px; }
.peli__fiscal small { display: block; color: var(--texto-2); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.peli__fiscal code { display: block; font-size: .7rem; line-height: 1.35; color: var(--texto); margin-bottom: 6px; word-break: break-all; }
.peli__sello-txt { color: var(--cian) !important; }
.peli__envio { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .78rem; }
.peli__envio span { padding: 4px 10px; border-radius: 8px; background: var(--tinta); color: #fff; font-weight: 700; letter-spacing: .06em; }
.peli__envio em { font-style: normal; color: var(--texto-2); }
.peli__sello {
  position: absolute; right: -22px; top: -30px; width: 96px; height: 96px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  border: 3px double var(--cian); color: var(--cian); background: rgba(255, 255, 255, .82); transform: rotate(-14deg);
  font: 800 .66rem/1.05 var(--titulos); text-transform: uppercase; letter-spacing: .06em;
}
.peli__sello b { display: block; font-size: 1.25rem; letter-spacing: .12em; }
.peli__sello small { display: block; font-size: .5rem; letter-spacing: .14em; }

/* ---------- 8) La película FIJA (con JavaScript): la escena se queda y la cámara avanza con el scroll ---------- */
.peli-on .peli__pista { position: relative; height: 520vh; }
.peli-on .peli__escena {
  position: sticky; top: 0; height: 100vh; height: 100svh; width: auto; margin: 0; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); grid-template-rows: auto minmax(0, 1fr); gap: 0 48px; align-items: center;
  padding: 100px max(24px, calc((100vw - 1200px) / 2)) 34px;
}
/* luces de la escena: azul y, en el final, cian (el brillo de la factura) */
.peli-on .peli__escena::before, .peli-on .peli__escena::after { content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; }
.peli-on .peli__escena::before { width: 900px; height: 900px; right: -180px; top: 50%; margin-top: -450px; background: radial-gradient(circle, rgba(26, 71, 255, .3), transparent 62%); }
.peli-on .peli__escena::after { width: 700px; height: 700px; right: 0; top: 50%; margin-top: -350px; background: radial-gradient(circle, rgba(79, 209, 255, .28), transparent 62%); opacity: 0; transition: opacity 1.2s ease; }
.peli-on .peli__escena[data-cap="5"]::after { opacity: 1; }
.peli { isolation: isolate; }

.peli-on .peli__barra { grid-column: 1 / -1; align-self: start; display: flex; gap: 8px; list-style: none; margin: 0 0 8px; padding: 0; }
.peli__barra li { flex: 1; display: grid; gap: 8px; }
.peli__barra i { display: block; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .14); overflow: hidden; position: relative; }
.peli__barra i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--azul-claro), var(--cian-claro)); transform-origin: left; transform: scaleX(var(--llena, 0)); }
.peli__barra span { font: 650 .74rem/1 var(--cuerpo); letter-spacing: .12em; text-transform: uppercase; color: #8E9BC2; transition: color .4s ease; }
.peli__barra li.activo span { color: #fff; }

.peli-on .peli__caps { display: grid; gap: 0; align-self: center; }
.peli-on .peli__cap { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(34px);
  transition: opacity .45s ease, transform .7s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .7s; }
.peli-on .peli__cap.activo { opacity: 1; visibility: visible; transform: none; transition-delay: .15s, .15s, 0s; }
.peli-on .peli__cap h3 { font-size: clamp(2rem, 3.8vw, 3.5rem); letter-spacing: -.03em; }
.peli-on .peli__cap p:last-child { font-size: clamp(1.02rem, 1.4vw, 1.18rem); }

.peli-on .peli__set { position: relative; top: auto; height: 100%; padding: 0; display: grid; place-items: center; perspective: 1700px; }
.peli-on .peli__zoom { width: auto; height: min(640px, 100%); transform-style: preserve-3d; will-change: transform; }

/* Cámara por capítulo (las transiciones las hace el navegador en la tarjeta gráfica) */
.peli-on .tel { transition: transform 1.1s cubic-bezier(.16, 1, .3, 1), opacity .9s ease; transform: rotateY(-16deg) rotateX(6deg); }
.peli-on [data-cap="2"] .tel, .peli-on [data-cap="3"] .tel { transform: rotateY(-5deg) rotateX(2deg) translateZ(40px); }
.peli-on [data-cap="4"] .tel { transform: translateX(10%) rotateY(-9deg) rotateX(2deg); }
.peli-on [data-cap="5"] .tel { transform: translateX(-34%) translateZ(-140px) rotateY(22deg); opacity: .5; }

/* Mensajes: aparecen cuando toca su capítulo (y se van si regresas) */
.peli .tel [data-hasta]:not(.ver) { display: none; }
.peli-on .tel [data-desde]:not(.ver) { display: none; }
.peli-on .tel .ver { animation: peli-burbuja .5s cubic-bezier(.2, .9, .3, 1.25) both; }
.peli-on .tel .m--tarde.ver { animation-delay: 1s; }
.peli-on .tel .m--tarde2.ver { animation-delay: 1.6s; }
.peli-on .tel .m--escribe.ver { animation: peli-escribe 1.05s ease both; }
.peli-on .tel .tel__aviso.ver { animation: peli-aviso .7s cubic-bezier(.16, 1, .3, 1) .15s both; }
@keyframes peli-burbuja { from { opacity: 0; transform: translateY(14px) scale(.92); } }
@keyframes peli-escribe { 0% { opacity: 0; transform: translateY(10px); } 15%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; max-height: 0; padding-block: 0; margin-top: -2.4cqw; } }
@keyframes peli-aviso { from { opacity: 0; transform: translateY(-140%); } }

.peli-on .peli__kpi { opacity: 0; transform: translate3d(-30px, 30px, 60px) scale(.9); transition: opacity .6s ease, transform 1s cubic-bezier(.16, 1, .3, 1); }
.peli-on .peli__kpi.ver { opacity: 1; transform: translate3d(0, 0, 80px); }
.peli-on [data-cap="5"] .peli__kpi.ver { transform: translate3d(-12%, -70%, -60px) scale(.86); opacity: .75; }

.peli-on .peli__cfdi { left: 26%; bottom: auto; top: 50%; margin-top: -250px; width: 390px; opacity: 0; visibility: hidden;
  transform: translate3d(30%, 40%, -260px) rotateX(34deg) rotateZ(10deg) scale(.7);
  transition: opacity .6s ease, transform 1.2s cubic-bezier(.16, 1, .3, 1), visibility 0s linear 1.2s; }
.peli-on .peli__cfdi.ver { opacity: 1; visibility: visible; transform: translate3d(0, 0, 120px) rotateZ(-2deg); transition-delay: .1s, .1s, 0s; }
.peli-on .peli__cfdi .peli__sello { opacity: 0; transform: rotate(-14deg) scale(2.4); }
.peli-on .peli__cfdi.ver .peli__sello { animation: peli-sello .55s cubic-bezier(.2, 1.6, .4, 1) .95s both; }
.peli-on .peli__cfdi.ver .peli__sello::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--cian-claro); opacity: 0; animation: cine-onda 1s ease-out 1.25s; }
.peli-on .peli__cfdi.ver .peli__fiscal { animation: peli-escaneo 1s ease .5s both; }
@keyframes peli-sello { to { opacity: .96; transform: rotate(-14deg) scale(1); } }
@keyframes peli-escaneo { from { opacity: 0; transform: translateY(10px); } }

/* ---------- 9) La película en el CELULAR (escena más corta; el teléfono arriba y el texto abajo) ---------- */
@media (max-width: 899px) {
  .peli__escena { grid-template-columns: 1fr; }
  .peli__set { position: relative; top: auto; padding-bottom: 300px; }
  .peli__zoom { width: 250px; }
  .peli__kpi { left: auto; right: -30%; top: 6%; width: 160px; padding: 12px 14px; }
  .peli__cfdi { left: 50%; bottom: -270px; width: min(330px, 90vw); transform: translateX(-50%) rotate(-2deg); }
  .peli__cierre .heroe__btns .btn { width: 100%; }

  .peli-on .peli__pista { height: 440vh; }
  .peli-on .peli__escena { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px 0; padding: 84px 16px 18px; }
  .peli-on .peli__barra { gap: 5px; margin: 0; }
  .peli-on .peli__barra span { font-size: .6rem; letter-spacing: .06em; }
  .peli-on .peli__set { grid-row: 2; padding: 0; }
  .peli-on .peli__zoom { width: auto; height: min(540px, 100%); }
  .peli-on .peli__caps { grid-row: 3; align-self: end; padding-right: 62px; }
  .peli-on .peli__cap h3 { font-size: clamp(1.4rem, 6.4vw, 1.9rem); margin-bottom: .35em; }
  .peli-on .peli__cap p:last-child { font-size: .95rem; line-height: 1.5; }
  .peli-on .peli__hora { margin-bottom: 8px; font-size: .7rem; }
  .peli-on .tel { transform: rotateY(-10deg) rotateX(4deg); }
  .peli-on [data-cap="2"] .tel, .peli-on [data-cap="3"] .tel { transform: translateZ(20px); }
  .peli-on [data-cap="4"] .tel { transform: translateX(-8%) rotateY(6deg); }
  .peli-on [data-cap="5"] .tel { transform: translateY(-6%) translateZ(-120px) scale(.9); opacity: .3; }
  .peli-on .peli__kpi { left: auto; right: -12%; top: 3%; width: 148px; padding: 10px 12px; }
  .peli-on .peli__kpi b { font-size: 1.2rem; }
  .peli-on .peli__kpi.ver { transform: translate3d(0, 0, 30px); }
  .peli-on [data-cap="5"] .peli__kpi.ver { transform: translate3d(0, -20%, -40px) scale(.84); opacity: 0; }
  .peli-on .peli__cfdi { left: 50%; top: 50%; bottom: auto; margin: 0; width: min(330px, calc(100vw - 44px)); padding: 16px;
    transform: translate3d(-50%, -30%, -260px) rotateX(30deg) rotateZ(8deg) scale(.7); }
  .peli-on .peli__cfdi.ver { transform: translate3d(-50%, -50%, 0) rotateZ(-1.5deg) scale(.94); }
  .peli-on .peli__sello { width: 78px; height: 78px; right: -8px; top: -26px; }
  .peli__fiscal .qr { width: 72px; height: 72px; }
}
@media (max-width: 720px) {
  /* En celular la entrada es más corta (se ve igual, pero el texto queda completo antes) */
  .heroe--cine h1 .pal > span { animation-duration: .7s; }
  .heroe--cine h1 .pal:nth-child(1) > span { animation-delay: 0s; }
  .heroe--cine h1 .pal:nth-child(2) > span { animation-delay: .05s; }
  .heroe--cine h1 .pal:nth-child(3) > span { animation-delay: .1s; }
  .heroe--cine h1 .pal:nth-child(n+4) > span { animation-delay: .15s; }
  .heroe--cine h1 .brillo { animation-duration: .8s; animation-delay: .2s; }
  .cine-entra { animation-duration: .6s; }
  .cine-entra--1 { animation-delay: 0s; } .cine-entra--2 { animation-delay: .25s; }
  .cine-entra--3 { animation-delay: .32s; } .cine-entra--4 { animation-delay: .4s; }
  .cine .heroe--cine { padding-bottom: 90px; }
  .cine-bajar { display: none; }
  .escena--cine .tarjeta--kpi { display: block; position: absolute; left: auto; right: 4px; bottom: -6px; width: 170px; padding: 12px 14px; z-index: 3; }
  .escena--cine .tarjeta--kpi b { font-size: 1.25rem; }
  .escena--cine .tarjeta--kpi .barras { height: 30px; }
}
@media (max-height: 700px) and (max-width: 899px) {
  .peli-on .peli__cap p:last-child { display: none; }
}

/* ---------- 10) Apariciones con máscara (cine) e inclinación suave de tarjetas ---------- */
/* (escondido = transparente, para que el navegador sí lo detecte; al aparecer sube desde una máscara) */
.cine-on .cine .revela { opacity: 0; transform: translateY(44px); transition: opacity .2s linear, transform 1.1s cubic-bezier(.16, 1, .3, 1); }
.cine-on .cine .revela.vis { opacity: 1; transform: none; animation: cine-mascara 1.1s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes cine-mascara { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(-60px -60px -60px -60px); } }
.cine [data-cine-inclina] { position: relative; }
.cine .servicio::before, .cine .plan::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(26, 71, 255, .11), transparent 45%);
}
.cine .plan--destacado::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(79, 209, 255, .16), transparent 45%); }
.cine .servicio:hover::before, .cine .plan:hover::before { opacity: 1; }
.cine .plan__precio b { font-variant-numeric: tabular-nums; }

/* ---------- 11) Menos movimiento: sin cámara, sin cinta, sin grano (la película queda como lista) ---------- */
@media (prefers-reduced-motion: reduce) {
  .cine-grano, .cine-haz, .cine-foco { display: none; }
  .escena--cine .escena__logo, .escena--cine .tarjeta { translate: none; }
  .franja__pista { animation: none; }
}

/* ---------- 12) Rendimiento: lo que está abajo no se calcula ni se dibuja hasta que se acerca (mismo aspecto) ---------- */
.cine .peli { content-visibility: auto; contain-intrinsic-size: auto 2400px; }
.cine .seccion { content-visibility: auto; contain-intrinsic-size: auto 900px; }