/* ═══════════════════════════════════════════════════════════════════════
   PRONTO · CAPA CINEMATOGRÁFICA 3D · v1 (2026-08-07)
   ─────────────────────────────────────────────────────────────────────────
   REGLAS DE ORO (contrato de esta capa):
   · 100% ADITIVA. No cambia paleta (reusa las variables :root del sitio),
     no cambia tipografía, no toca textos, IDs, formularios ni funciones.
   · Si este archivo no carga, el sitio queda EXACTAMENTE como el original.
   · Todo selector nuevo lleva prefijo .cine- / #cine para no colisionar.
   · prefers-reduced-motion: DECISIÓN DEL DUEÑO (2026-08-12) — la capa
     cinematográfica del sitio corre SIEMPRE (muchos teléfonos traen
     "Reducir movimiento" activado y el sitio se veía estático); solo el
     widget de chat sigue respetando la señal del sistema.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 0 · Escenario global ──────────────────────────────────────────────── */
html.cine-on{scroll-behavior:smooth}
html.cine-on body{position:relative}

/* Lienzo WebGL de brasas — polvo de fuego flotando SOBRE el encuadre
   (alpha bajísimo: nunca compite con el texto; bajo el grano y el cursor) */
#cineGL{position:fixed;inset:0;width:100%;height:100%;z-index:2147482800;
  pointer-events:none;opacity:0;transition:opacity 1.2s ease}
html.cine-on #cineGL{opacity:1}
/* Los modales del sitio usan z-index 1400-3000: el halo/grano viven por
   encima, pero son pointer-events:none y casi transparentes — no estorban */

/* Grano de película — textura viva sobre todo el encuadre */
#cineGrain{position:fixed;inset:-60px;z-index:2147483000;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:240px 240px;
  animation:cineGrainShift 1.1s steps(4) infinite}
@keyframes cineGrainShift{
  0%{transform:translate3d(0,0,0)}25%{transform:translate3d(-24px,18px,0)}
  50%{transform:translate3d(16px,-22px,0)}75%{transform:translate3d(-12px,-14px,0)}
  100%{transform:translate3d(20px,12px,0)}}

/* Halo de cursor — foco de linterna ámbar (solo puntero fino) */
#cineCursor{position:fixed;left:0;top:0;width:520px;height:520px;z-index:2147482900;
  pointer-events:none;border-radius:50%;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(circle,rgba(249,115,22,.14) 0%,rgba(249,115,22,.05) 34%,transparent 68%);
  transform:translate3d(-50%,-50%,0);mix-blend-mode:screen}
#cineCursor.cine-cur-on{opacity:1}
#cineCursor.cine-cur-hot{background:radial-gradient(circle,rgba(249,115,22,.26) 0%,rgba(249,115,22,.08) 36%,transparent 68%)}
@media(hover:none),(pointer:coarse){#cineCursor{display:none}}

/* Barra de progreso de la película (hilo incandescente) */
#cineReel{position:fixed;top:0;left:0;height:2px;width:100%;z-index:2147483100;
  pointer-events:none;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--orange),var(--od));
  box-shadow:0 0 12px rgba(249,115,22,.65),0 0 3px rgba(249,115,22,.9)}

/* ── 1 · Telones de medios inyectados (video / imagen por sección) ─────── */
.cine-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.cine-bg video,.cine-bg img{position:absolute;left:50%;top:50%;width:106%;height:106%;
  min-width:106%;min-height:106%;object-fit:cover;
  transform:translate3d(-50%,-50%,0);filter:saturate(1.06) contrast(1.04)}
.cine-bg .cine-veil{position:absolute;inset:0}
/* Cada telón declara su intensidad con una variable */
.cine-bg{opacity:var(--cine-op,1)}

/* Telones específicos */
.cine-bg-intro video,.cine-bg-intro img{opacity:.78}
.cine-bg-intro .cine-veil{background:
  radial-gradient(ellipse at 50% 44%,rgba(9,9,11,.05) 0%,rgba(9,9,11,.45) 56%,rgba(9,9,11,.9) 88%),
  linear-gradient(180deg,rgba(9,9,11,.42),transparent 30%,transparent 70%,rgba(9,9,11,.66))}

.cine-bg-demo video,.cine-bg-demo img{opacity:.16;mix-blend-mode:screen}
.cine-bg-demo .cine-veil{background:radial-gradient(ellipse at 50% 30%,transparent 0%,rgba(15,15,16,.55) 78%)}

.cine-bg-cta video,.cine-bg-cta img{opacity:.34}
.cine-bg-cta .cine-veil{background:
  radial-gradient(ellipse at 50% 52%,rgba(9,9,11,.22) 0%,rgba(9,9,11,.78) 74%),
  linear-gradient(180deg,rgba(9,9,11,.85),transparent 26%,transparent 72%,rgba(9,9,11,.9))}

/* r34 (2026-08-24): #problem es clara; su fondo jobsite ya no se inyecta.
.cine-bg-problem img{opacity:.2}
.cine-bg-problem .cine-veil{background:
  linear-gradient(180deg,var(--nb) 0%,transparent 34%,transparent 62%,var(--nb) 100%),
  radial-gradient(ellipse at 78% 40%,transparent 0%,rgba(24,24,27,.66) 78%)} */

/* r33 (2026-08-24): #platform es clara; su fondo de onda ya no se inyecta.
.cine-bg-platform img{opacity:.15;mix-blend-mode:screen}
.cine-bg-platform .cine-veil{background:
  linear-gradient(180deg,var(--black) 0%,transparent 30%,transparent 66%,var(--black) 100%)} */

/* r34 (2026-08-24): #stats-bar, #btrust y #bemerg son claras; sus fondos
   ember/jobsite ya no se inyectan.
.cine-bg-stats img{opacity:.12;mix-blend-mode:screen}
.cine-bg-stats .cine-veil{background:linear-gradient(90deg,var(--black),transparent 30%,transparent 70%,var(--black))}

.cine-bg-btrust img,.cine-bg-bemerg img{opacity:.14;mix-blend-mode:screen}
.cine-bg-btrust .cine-veil,.cine-bg-bemerg .cine-veil{background:
  linear-gradient(180deg,var(--nb) 0%,transparent 40%,transparent 64%,var(--nb) 100%)} */

/* Hero faceta B — postal al atardecer flotando tras la tarjeta de llamada */
.cine-bhero-media{position:absolute;right:-40px;top:50%;width:min(560px,52vw);
  aspect-ratio:4/3;transform:translate3d(0,-50%,0) rotateY(-8deg) rotateX(2deg);
  border-radius:26px;overflow:hidden;pointer-events:none;z-index:0;
  box-shadow:0 60px 120px rgba(9,9,11,.35),0 18px 50px rgba(249,115,22,.12);
  opacity:.9}
.cine-bhero-media img{width:100%;height:100%;object-fit:cover;
  filter:saturate(1.05) contrast(1.03)}
.cine-bhero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.14) 46%,rgba(255,255,255,0) 62%),
  linear-gradient(180deg,transparent 55%,rgba(9,9,11,.34));border-radius:inherit}
@media(max-width:960px){.cine-bhero-media{display:none}}

/* Postales del gate — cabecera cinematográfica dentro de cada naipe de
   elección (proveedor / cliente). El texto del naipe queda íntegro debajo. */
/* r56: la caja lleva la proporción REAL del video (960x540 = 16/9). Con
   21/9 y `cover` se comía la cabeza del contratista y el paisaje de la
   clienta. Igualando la proporción, `cover` ya no recorta NADA y tampoco
   deja franjas: el cuadro se ve entero y lleno. */
.cine-gate-media{position:relative;margin:-32px -28px 20px;aspect-ratio:16/9;
  overflow:hidden;border-radius:20px 20px 0 0;background:#0c0c0c}
.cine-gate-media img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(1.05) contrast(1.04);transform:scale(1.08);
  transition:transform 5s cubic-bezier(.16,.84,.28,1)}
.gate-card:hover .cine-gate-media img{transform:scale(1.01)}
/* r47: el video LLENA su casilla entera (pedido del dueño: no puede verse
   más pequeño que su recuadro). Revierte el `contain` de la r43, que lo
   dejaba completo pero con franjas borrosas a los lados; el encuadre se
   sube al 38 % porque las dos caras viven en el tercio alto del cuadro. */
.cine-gate-media video{position:relative;z-index:1;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;display:block}
/* la casilla ocupa el ancho del naipe pase lo que pase: en celular la r46
   le fijó un alto y, al ser hijo flex con align-items:flex-start, se
   encogía al ancho que pedía la proporción del video (152 px de 339) */
/* r56: con aspect-ratio, `align-self:stretch` NO basta — el navegador saca
   el ancho del contenido y la postal se quedaba en 217px de los 339 del
   naipe. El ancho se fija a mano: el contenido más los dos márgenes. */
.cine-gate-media{align-self:stretch;width:calc(100% + 56px);flex:none}
.cine-gate-media .cine-gate-fill{position:absolute;inset:-10%;z-index:0;
  background-size:cover;background-position:center;
  filter:blur(18px) saturate(1.08);transform:scale(1.12)}
.cine-gate-media::after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(9,9,11,0) 42%,rgba(9,9,11,.38) 100%),
  linear-gradient(90deg,rgba(249,115,22,.14),transparent 46%)}
.cine-gate-media .cine-gate-glint{position:absolute;inset:0;z-index:3;
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.16) 46%,transparent 58%);
  background-size:230% 100%;background-position:120% 0;
  transition:background-position 1.1s ease}
.gate-card:hover .cine-gate-media .cine-gate-glint{background-position:-30% 0}
@media(max-width:760px){.cine-gate-media{margin:-14px -16px 10px;border-radius:16px 16px 0 0}}
/* r43: en celular la compuerta se compacta — las DOS opciones a la vista
   sin scroll (pedido del dueño) */
@media(max-width:760px){
  html.cine-on #gate .gate-top{padding:7px 16px}
  html.cine-on #gate .gate-inner{padding:0 18px 12px}
  html.cine-on #gate .gate-tag{margin-bottom:4px}
  html.cine-on #gate .gate-h1{font-size:1.55rem;line-height:1;letter-spacing:-.045em;margin-bottom:6px}
  html.cine-on #gate .gate-sub{font-size:.8rem;line-height:1.45;margin:0 auto 10px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  html.cine-on #gate .gate-grid{gap:8px}
  html.cine-on #gate .gate-card{padding:14px 16px 12px}
  html.cine-on #gate .gate-ic{width:34px;height:34px;border-radius:10px;margin-bottom:8px}
  html.cine-on #gate .gate-ic svg{width:17px;height:17px}
  html.cine-on #gate .gate-ct{font-size:.95rem}
  html.cine-on #gate .gate-cd{font-size:.72rem;line-height:1.4;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  html.cine-on #gate .gate-cta{font-size:.72rem;margin-top:6px}
}
/* r46: el ritmo vertical de la compuerta se ata al alto VISIBLE (svh), así
   cabe entera en iPhone SE, Android de 640 y en los Pro Max — y en los
   teléfonos altos el aire crece solo. Cada regla lleva su px de reserva
   para navegadores sin svh. */
@media(max-width:760px){
  html.cine-on #gate .gate-tag{display:none}
  html.cine-on #gate .gate-inner{padding:0 18px 10px;padding-bottom:clamp(8px,1.4svh,16px)}
  html.cine-on #gate .gate-h1{margin-bottom:8px;margin-bottom:clamp(6px,1.3svh,14px)}
  html.cine-on #gate .gate-sub{margin:0 auto 12px;margin-bottom:clamp(9px,2.1svh,22px)}
  html.cine-on #gate .gate-grid{gap:16px;gap:clamp(14px,4.6svh,46px)}
  /* r62 · EL RECUADRO, LLENO.
     Los dos videos son 960×540 (16:9 clavado). En la r56 se puso `contain`
     para que no se cortaran cabezas, pero el recuadro en un teléfono mide
     339×122 —proporción 2.78—, así que el video encajaba por altura y solo
     ocupaba 217 de los 339 px de ancho: dos franjas vacías de 61 px y esa
     sensación de «se ven pequeños» que reportó el dueño.

     No cabe un 16:9 entero: la compuerta ya ocupa la pantalla completa y solo
     quedan ~50 px libres en total. Así que se hacen las dos cosas que sí
     caben: subir el alto todo lo que hay (122 → 147) y volver a `cover`,
     que llena el recuadro de borde a borde.

     `object-position` es lo que evita repetir el fallo de la r56: el recorte
     que queda se lo lleva sobre todo la parte de ABAJO, no la de arriba,
     que es donde están las caras. */
  html.cine-on #gate .cine-gate-media{aspect-ratio:auto;
    height:clamp(126px,22svh,168px);
    width:calc(100% + 32px);margin:-14px -16px 9px;margin-bottom:clamp(8px,1.4svh,13px)}
  html.cine-on #gate .cine-gate-media video{object-fit:cover;object-position:center 32%}
  html.cine-on #gate .gate-ic{width:30px;height:30px;border-radius:9px;margin-bottom:6px;margin-bottom:clamp(4px,.9svh,10px)}
  html.cine-on #gate .gate-ic svg{width:15px;height:15px}
  html.cine-on #gate .gate-card{padding:12px 15px 11px}
  html.cine-on #gate .gate-cd{margin-bottom:9px;margin-bottom:clamp(7px,1.1svh,13px)}
}
/* teléfonos bajos (iPhone SE, iPhone 8, Androids de 640): la postal se
   estrecha y el naipe se aprieta, pero las dos opciones siguen enteras */
@media(max-width:760px) and (max-height:700px){
  html.cine-on #gate .cine-gate-media{height:clamp(74px,13svh,120px);width:calc(100% + 28px)}
  html.cine-on #gate .gate-ic{width:26px;height:26px;border-radius:8px}
  html.cine-on #gate .gate-ic svg{width:13px;height:13px}
  html.cine-on #gate .gate-card{padding:10px 14px 10px}
  html.cine-on #gate .cine-gate-media{margin:-10px -14px 8px}
}
/* pantallas muy bajas (SE en horizontal, teléfonos antiguos): fuera la postal */
@media(max-width:760px) and (max-height:600px){
  html.cine-on #gate .cine-gate-media{display:none}
  html.cine-on #gate .gate-h1{font-size:1.35rem}
}

/* r47: en celular el ICONO y el TÍTULO comparten renglón (pedido del dueño).
   El naipe se ahorra el alto de una línea entera y ese aire va al subtítulo,
   que ya no queda pegado al titular ni a los naipes. Una rejilla de dos
   columnas lo resuelve sin tocar el HTML: todo lo demás ocupa las dos. */
@media(max-width:760px){
  html.cine-on #gate .gate-card{display:grid;grid-template-columns:auto 1fr;
    column-gap:10px;align-items:center}
  html.cine-on #gate .gate-card>*{grid-column:1/-1}
  html.cine-on #gate .gate-ic{grid-column:1;justify-self:start;align-self:center;margin:0}
  html.cine-on #gate .gate-ct{grid-column:2;justify-self:start;align-self:center;margin:0;font-size:1rem}
  html.cine-on #gate .gate-cd{margin-top:9px;margin-top:clamp(7px,1.2svh,12px)}
  html.cine-on #gate .gate-h1{margin-bottom:10px;margin-bottom:clamp(8px,1.8svh,18px)}
  html.cine-on #gate .gate-sub{margin-bottom:14px;margin-bottom:clamp(11px,2.6svh,26px)}
  /* r62: esta es la regla que MANDA sobre el alto del recuadro (va después de
     la de arriba y tiene la misma especificidad). Sube de 15svh a 18.1svh:
     son los ~25 px por naipe que quedaban libres en la compuerta, y cada uno
     de ellos es recorte que el video ya no pierde. */
  html.cine-on #gate .cine-gate-media{height:104px;height:clamp(112px,18.1svh,152px)}
}
/* en un teléfono alto cabe la frase entera del subtítulo, sin recorte */
@media(max-width:760px) and (min-height:740px){
  html.cine-on #gate .gate-sub{-webkit-line-clamp:3}
}
/* teléfonos bajos (SE, iPhone 8, Androids de 667): aquí la compuerta va
   justa de verdad — titular, subtítulo y dos naipes con texto. Se le dan los
   ~25 px por naipe que quedan libres y ni uno más; con `cover` el recuadro
   queda lleno y el recorte se lo lleva la parte de abajo (object-position
   32%), así que las caras, que están en el tercio superior, no se pierden.
   Es lo máximo que cabe sin que la compuerta empiece a desplazarse (r62). */
@media(max-width:760px) and (max-height:700px){
  html.cine-on #gate .cine-gate-media{height:66px;height:clamp(72px,13.2svh,110px)}
}

/* Postales de industria — se insertan DENTRO de la tarjeta .ind-vis */
.cine-ind-media{position:relative;margin:-26px -26px 20px;border-radius:20px 20px 0 0;
  overflow:hidden;aspect-ratio:21/9;transform:translateZ(0)}
.cine-ind-media img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(1.05) contrast(1.04);transform:scale(1.06);
  transition:transform 6s cubic-bezier(.16,.84,.28,1)}
.cine-in .cine-ind-media img,.ind-panel.active .cine-ind-media img{transform:scale(1)}
.cine-ind-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,9,11,.05) 40%,rgba(9,9,11,.42) 100%),
  linear-gradient(90deg,rgba(249,115,22,.12),transparent 42%)}
.cine-ind-media .cine-ind-tag{position:absolute;left:14px;bottom:12px;display:inline-flex;
  align-items:center;gap:7px;background:rgba(9,9,11,.55);backdrop-filter:blur(8px);
  border:1px solid rgba(249,115,22,.35);color:#fff;font-size:9.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:var(--rpill)}
.cine-ind-media .cine-ind-tag i{width:7px;height:7px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 8px rgba(249,115,22,.9);animation:blink 1.4s ease infinite}

/* ── 2 · Profundidad 3D global ─────────────────────────────────────────── */
/* Perspectiva en contenedores cuyos hijos se inclinan */
html.cine-on .gate-grid,html.cine-on .pr-grid,html.cine-on .feat-grid,
html.cine-on .prob-cards,html.cine-on .bento,html.cine-on .intel-grid,
html.cine-on .proof-grid,html.cine-on .btrades,html.cine-on .bsteps,
html.cine-on .btrust-g,html.cine-on .steps-row,html.cine-on .data-grid,
html.cine-on .chan-grid,html.cine-on .demo-stage,html.cine-on .bhero-in,
html.cine-on .hero-inner,html.cine-on .roi-card{perspective:1400px}

/* Los naipes inclinables — la transición la gobierna JS con rAF */
.cine-tilt{transform-style:preserve-3d;will-change:transform}
.cine-tilt>*{transform:translateZ(0)}
/* Brillo espejado que barre el naipe siguiendo el puntero */
.cine-tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;opacity:var(--glare-o,0);z-index:3;
  background:radial-gradient(560px circle at var(--glare-x,50%) var(--glare-y,50%),
    rgba(255,255,255,.16) 0%,rgba(249,115,22,.05) 32%,transparent 60%);
  transition:opacity .35s ease}
/* Variante para superficies oscuras: destello ámbar */
.cine-tilt.cine-tilt-dark::after{background:radial-gradient(560px circle at var(--glare-x,50%) var(--glare-y,50%),
  rgba(249,115,22,.2) 0%,rgba(249,115,22,.06) 34%,transparent 62%)}

/* El teléfono del hero — flotación idle + reflejo de pantalla */
html.cine-on .hero-phone-wrap{transform-style:preserve-3d}
html.cine-on .hero-phone{animation:cinePhoneFloat 7s ease-in-out infinite;
  transform-style:preserve-3d;position:relative}
@keyframes cinePhoneFloat{
  0%,100%{transform:rotateY(-7deg) rotateX(3deg) translateY(0)}
  50%{transform:rotateY(-3deg) rotateX(1.2deg) translateY(-12px)}}
html.cine-on .hero-phone::after{content:"";position:absolute;inset:12px;border-radius:32px;
  pointer-events:none;z-index:5;
  background:linear-gradient(118deg,transparent 30%,rgba(255,255,255,.075) 44%,rgba(255,255,255,.02) 52%,transparent 64%);
  background-size:240% 240%;animation:cinePhoneSheen 8.5s ease-in-out infinite}
@keyframes cinePhoneSheen{0%,100%{background-position:88% 0}50%{background-position:8% 100%}}
html.cine-on .hf{transform:translateZ(56px)}
html.cine-on .hf-1{box-shadow:var(--sl),0 22px 44px rgba(249,115,22,.14)}
html.cine-on .hf-2{box-shadow:var(--sl),0 22px 44px rgba(16,185,129,.12)}

/* Halo respirando bajo el teléfono */
html.cine-on .hero-phone-wrap::before{content:"";position:absolute;left:50%;top:52%;
  width:420px;height:420px;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(249,115,22,.16) 0%,transparent 62%);
  filter:blur(6px);animation:cineHalo 5.5s ease-in-out infinite;pointer-events:none;z-index:0}
@keyframes cineHalo{0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}}

/* Titular hero — el degradado existente respira (misma paleta, solo animación) */
html.cine-on .hero-h1 em{background-size:220% 100%;animation:cineEmberText 6s ease-in-out infinite}
html.cine-on .bh1 em,html.cine-on .gate-h1 em{position:relative}
@keyframes cineEmberText{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ── 3 · Entradas cinematográficas por sección (solo capas nuevas) ─────── */
.cine-bg{transform:translateZ(0)}
.cine-bg[data-plx] video,.cine-bg[data-plx] img{will-change:transform}

/* La cortina #intro — profundidad para capas existentes (aditivo) */
/* FLAT a propósito (2026-08-12): preserve-3d + la rotación del parallax
   perforaba la región clicable de #introCue en Chrome (el clic caía en el
   padre y el botón exigía dos intentos). Sin perspective en #intro, flat
   se ve idéntico y el botón vuelve a responder al primer clic. */
html.cine-on #intro .in-in{transform-style:flat}
html.cine-on #intro .in-meet{transform:translateZ(30px)}
html.cine-on #intro .in-h1{transform:translateZ(46px)}
html.cine-on #intro .in-sub{transform:translateZ(24px)}
html.cine-on #intro .in-eyebrow{transform:translateZ(14px)}
/* nota: las animaciones inUp/inPop del sitio siguen mandando; el translateZ
   convive porque ellas animan opacity/translateY con `to{transform:...}` —
   por eso el translateZ se aplica al terminar, vía la clase .cine-intro-set */
html.cine-on #intro:not(.cine-intro-set) .in-meet,
html.cine-on #intro:not(.cine-intro-set) .in-h1,
html.cine-on #intro:not(.cine-intro-set) .in-sub,
html.cine-on #intro:not(.cine-intro-set) .in-eyebrow{transform:none}

/* Onda expansiva al elegir «Which one are you?» */
#cineWipe{position:fixed;left:0;top:0;width:120px;height:120px;border-radius:50%;
  z-index:2147483200;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(249,115,22,.9) 0%,rgba(234,88,12,.5) 40%,transparent 70%);
  transform:translate(-50%,-50%) scale(0)}
#cineWipe.cine-wipe-go{animation:cineWipeGo .9s cubic-bezier(.22,.9,.24,1) forwards}
@keyframes cineWipeGo{0%{opacity:.95;transform:translate(-50%,-50%) scale(0)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(28)}}

/* Gate — naipes con brillo y el fondo respira */
html.cine-on #gate .gate-card{position:relative;overflow:hidden}
html.cine-on #gate .gate-glow-1{animation:cineDrift1 11s ease-in-out infinite}
html.cine-on #gate .gate-glow-2{animation:cineDrift2 13s ease-in-out infinite}
@keyframes cineDrift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-40px,30px,0) scale(1.12)}}
@keyframes cineDrift2{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(36px,-24px,0) scale(1.1)}}

/* Glows del hero también derivan lentamente */
html.cine-on #hero .hero-glow-1{animation:cineDrift1 14s ease-in-out infinite}
html.cine-on #hero .hero-glow-2{animation:cineDrift2 17s ease-in-out infinite}

/* Botones primarios — pulso incandescente sutil (paleta intacta) */
html.cine-on .btn-primary,html.cine-on .bbtn-p,html.cine-on .in-cue{
  position:relative;isolation:isolate}
html.cine-on .btn-primary::before,html.cine-on .bbtn-p::before,html.cine-on .in-cue::before{
  content:"";position:absolute;inset:-3px;border-radius:inherit;z-index:-1;
  background:radial-gradient(60% 120% at 50% 50%,rgba(249,115,22,.45),transparent 70%);
  filter:blur(10px);opacity:.55;animation:cineBtnPulse 3.6s ease-in-out infinite;pointer-events:none}
@keyframes cineBtnPulse{0%,100%{opacity:.35;transform:scale(.98)}50%{opacity:.75;transform:scale(1.03)}}

/* ── 4 · Ajustes de convivencia (solo posicionamiento, cero estética) ──── */
/* Secciones que reciben telón inyectado y no traían contexto propio */
html.cine-on #btrust,html.cine-on #bemerg{position:relative;overflow:hidden}
html.cine-on #btrust .btrust-g,html.cine-on #bemerg .bemerg-in{position:relative;z-index:1}
html.cine-on #bhero{overflow:hidden}
html.cine-on #bhero .bhero-in{z-index:2}
/* El contenido del demo/cta/problem/platform ya declara z-index:1 en el sitio */

/* ── 5 · Cinemática de scroll: revelado de telones ─────────────────────── */
.cine-reveal{opacity:0;transform:translateY(34px) scale(.985);
  transition:opacity .9s cubic-bezier(.16,.84,.28,1),transform .9s cubic-bezier(.16,.84,.28,1)}
.cine-in .cine-reveal,.cine-reveal.cine-in{opacity:1;transform:translateY(0) scale(1)}

/* ── 6 · Accesibilidad y móviles ───────────────────────────────────────── */
@media (max-width:768px){
  #cineCursor{display:none}
  .cine-bg-intro video,.cine-bg-intro img{opacity:.5}
  html.cine-on .hero-phone{animation-duration:9s}
}

/* Poster estático que sustituye al video cuando hay reduced-motion
   (el JS lo inserta junto al video; aquí solo se decide cuál se ve) */
.cine-bg .cine-poster{display:none}

/* ═════════════════ CHATBOT HOLOGRÁFICO — piel 3D del asistente ═════════════
   Solo presentación sobre las clases .pa-* que pinta pronto-assistant.js.
   Ni una línea de su lógica cambia: si esta hoja falta, el widget queda
   exactamente como salió de fábrica. El scope html.cine-on gana en
   especificidad a la <style> que el widget inyecta en runtime. */

@property --cine-a2{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes cine-ring-spin{to{--cine-a2:360deg}}

/* ── Lanzador: pastilla levitante con anillo orbital y barrido de luz ────── */
html.cine-on .pa-btn{
  overflow:visible;
  background:linear-gradient(135deg,#FDBA74,#FB923C 34%,#EA580C 72%,#C2410C)!important;
  box-shadow:0 18px 44px rgba(234,88,12,.5),0 4px 14px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.38),inset 0 -8px 18px rgba(124,45,18,.55)!important;
  animation:cine-fab-float 5s ease-in-out infinite;
}
html.cine-on .pa-btn::before{
  content:"";position:absolute;inset:-7px;border-radius:inherit;pointer-events:none;
  padding:2px;
  background:conic-gradient(from var(--cine-a2),transparent 0 30%,
    rgba(251,146,60,.9) 44%,rgba(255,237,213,.95) 50%,rgba(251,146,60,.9) 56%,
    transparent 70% 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:cine-ring-spin 3.4s linear infinite;
}
html.cine-on .pa-btn::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45) 47%,transparent 60%);
  background-size:220% 100%;background-position:130% 0;
  animation:cine-fab-sheen 4.6s ease-in-out infinite;
}
@keyframes cine-fab-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes cine-fab-sheen{0%,55%{background-position:130% 0}85%,100%{background-position:-40% 0}}

/* ── Telón y panel: losa de cristal en profundidad ───────────────────────── */
html.cine-on .pa-scrim{
  background:radial-gradient(120% 100% at 50% 38%,rgba(9,9,11,.5),rgba(9,9,11,.84))!important;
  -webkit-backdrop-filter:blur(10px) saturate(.85);
  backdrop-filter:blur(10px) saturate(.85)!important;
}
html.cine-on .pa-panel{
  border:1px solid rgba(251,146,60,.24)!important;
  background:
    radial-gradient(90% 70% at 85% 0%,rgba(249,115,22,.15),transparent 60%),
    radial-gradient(70% 60% at 0% 100%,rgba(194,65,12,.12),transparent 55%),
    radial-gradient(120% 90% at 18% 40%,#2a1206 0%,#140a06 42%,#0b0b0f 100%)!important;
  box-shadow:0 60px 160px rgba(0,0,0,.75),0 24px 60px rgba(234,88,12,.16),
    0 0 0 1px rgba(249,115,22,.12) inset,0 1px 0 rgba(255,255,255,.09) inset!important;
  animation:cine-pa-in .6s cubic-bezier(.16,.84,.28,1) both!important;
}
@keyframes cine-pa-in{
  from{opacity:0;transform:translate(-50%,-46%) perspective(1200px) rotateX(7deg) scale(.94)}
  to{opacity:1;transform:translate(-50%,-50%) perspective(1200px) rotateX(0deg) scale(1)}
}
/* Constelación y aurora superior, tras el contenido */
html.cine-on .pa-panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.85;
  background:
    radial-gradient(1.6px 1.6px at 11% 24%,rgba(255,255,255,.5),transparent 100%),
    radial-gradient(1.2px 1.2px at 27% 68%,rgba(255,237,213,.38),transparent 100%),
    radial-gradient(1.8px 1.8px at 43% 12%,rgba(255,255,255,.32),transparent 100%),
    radial-gradient(1.2px 1.2px at 61% 82%,rgba(253,186,116,.4),transparent 100%),
    radial-gradient(1.5px 1.5px at 74% 30%,rgba(255,255,255,.42),transparent 100%),
    radial-gradient(1.2px 1.2px at 88% 58%,rgba(255,237,213,.34),transparent 100%),
    radial-gradient(1.9px 1.9px at 94% 14%,rgba(253,186,116,.45),transparent 100%),
    radial-gradient(1.2px 1.2px at 8% 86%,rgba(255,255,255,.3),transparent 100%),
    linear-gradient(180deg,rgba(251,146,60,.1),transparent 16%);
  animation:cine-pa-stars 16s ease-in-out infinite alternate;
}
@keyframes cine-pa-stars{from{opacity:.55}to{opacity:1}}
html.cine-on .pa-head,html.cine-on .pa-cols{position:relative;z-index:1}

/* ── Cabecera ────────────────────────────────────────────────────────────── */
html.cine-on .pa-head{
  border-bottom:1px solid rgba(251,146,60,.16)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.035),transparent);
}
html.cine-on .pa-av{
  color:transparent!important;/* la P de texto cede al glifo del logo nuevo */
  background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22121 262 713 527%22%3E%3Cpath d=%22M 492.643 262.982 C 488.995 264.134%2C 486.464 266.435%2C 485.120 269.822 C 484.105 272.379%2C 479.772 299.222%2C 472.499 348 C 470.654 360.375%2C 468.819 372.482%2C 468.420 374.905 C 467.988 377.530%2C 466.578 380.560%2C 464.930 382.405 L 462.165 385.500 334.832 386 C 208.001 386.498%2C 207.482 386.508%2C 202.949 388.606 C 192.080 393.635%2C 186.557 402.053%2C 186.616 413.500 C 186.673 424.775%2C 191.833 433.151%2C 201.493 437.649 L 206.500 439.980 327 439.992 C 439.711 440.002%2C 447.726 440.116%2C 450.989 441.752 C 456.621 444.574%2C 456.740 446.252%2C 453.062 471.198 C 449.679 494.140%2C 448.886 496.718%2C 444.281 499.736 C 441.774 501.379%2C 435.371 501.534%2C 351.045 502 L 260.500 502.500 255.708 505.317 C 240.402 514.314%2C 238.279 535.706%2C 251.484 547.878 C 253.853 550.062%2C 257.525 552.330%2C 259.645 552.919 C 262.241 553.639%2C 290.619 553.991%2C 346.500 553.996 C 423.510 554.003%2C 429.752 554.129%2C 432.999 555.752 C 439.466 558.983%2C 439.517 559.790%2C 435.068 588.681 C 432.882 602.882%2C 429.264 626.875%2C 427.028 642 C 424.792 657.125%2C 422.082 675.350%2C 421.006 682.500 C 419.930 689.650%2C 417.635 704.950%2C 415.906 716.500 C 414.177 728.050%2C 411.299 747.175%2C 409.512 759 C 406.007 782.181%2C 406.156 785.408%2C 410.850 787.920 C 413.943 789.575%2C 508.686 789.380%2C 512 787.711 C 513.375 787.019%2C 515.283 784.888%2C 516.239 782.976 C 517.807 779.843%2C 531.057 696.052%2C 539.481 636 C 542.378 615.351%2C 543.061 612.968%2C 547.041 609.619 L 549.824 607.278 595.162 606.672 C 650.012 605.939%2C 661.848 604.797%2C 690.622 597.467 C 776.504 575.587%2C 830.571 509.656%2C 833.697 423 C 835.428 375.004%2C 821.965 336.906%2C 793.040 307.949 C 768.375 283.257%2C 737.526 269.619%2C 693.500 263.944 C 682.353 262.507%2C 496.958 261.619%2C 492.643 262.982 M 299.734 268.069 C 277.631 273.388%2C 270.198 300.886%2C 286.981 315.251 C 295.027 322.139%2C 293.507 322%2C 361.018 322 L 421.681 322 427.804 318.940 C 448.810 308.443%2C 448.048 279.719%2C 426.500 269.801 L 421.500 267.500 362.500 267.332 C 330.011 267.239%2C 301.808 267.570%2C 299.734 268.069 M 587.314 360.908 C 581.760 364.368%2C 583.507 355.883%2C 569.014 449.813 C 560.777 503.199%2C 560.744 503.673%2C 564.988 507.500 C 567.063 509.371%2C 568.861 509.521%2C 592.853 509.822 C 620.601 510.170%2C 635.801 509.103%2C 648.799 505.894 C 685.657 496.797%2C 708.756 470.616%2C 713.059 433.059 C 717.316 395.912%2C 702.641 370.162%2C 672.466 361.829 C 665.056 359.782%2C 661.918 359.604%2C 627.500 359.276 C 591.998 358.937%2C 590.371 359.003%2C 587.314 360.908 M 136.444 504.374 C 115.880 513.949%2C 116.515 543.796%2C 137.468 552.551 C 140.241 553.710%2C 147 553.996%2C 171.218 553.978 C 205.046 553.954%2C 206.174 553.760%2C 213.164 546.769 C 223.773 536.160%2C 223.775 520.579%2C 213.168 510.049 C 205.201 502.139%2C 204.451 501.998%2C 170.384 502.010 C 142.160 502.019%2C 141.384 502.073%2C 136.444 504.374 M 257.994 615.917 C 246.768 619.411%2C 239 630.100%2C 239 642.052 C 239 652.269%2C 244.567 661.167%2C 253.792 665.697 L 259.500 668.500 309 668.500 L 358.500 668.500 363.788 666.111 C 380.186 658.701%2C 385.068 636.936%2C 373.262 623.868 C 365.381 615.145%2C 368.138 615.524%2C 311 615.318 C 283.225 615.218%2C 259.372 615.487%2C 257.994 615.917%22 fill=%22%23fff%22 fill-rule=%22evenodd%22/%3E%3C/svg%3E") center/64% auto no-repeat,
    conic-gradient(from 210deg,#FDBA74,#EA580C 30%,#7C2D12 55%,#FB923C 80%,#FDBA74)!important;
  box-shadow:0 0 18px rgba(249,115,22,.55),inset 0 1px 0 rgba(255,255,255,.35);
  animation:cine-av-pulse 3.4s ease-in-out infinite;
}
@keyframes cine-av-pulse{0%,100%{box-shadow:0 0 14px rgba(249,115,22,.45),inset 0 1px 0 rgba(255,255,255,.35)}
  50%{box-shadow:0 0 26px rgba(249,115,22,.75),inset 0 1px 0 rgba(255,255,255,.35)}}

/* ── Columna de voz: orbe levitando sobre pedestal de luz ────────────────── */
html.cine-on .pa-voice{position:relative;border-right:1px solid rgba(251,146,60,.13)!important}
html.cine-on .pa-orb{animation:cine-orb-lev 6s ease-in-out infinite}
@keyframes cine-orb-lev{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
html.cine-on .pa-orb::before{
  content:"";position:absolute;inset:-8%;border-radius:50%;pointer-events:none;
  background:conic-gradient(from var(--cine-a2),transparent 0 32%,
    rgba(251,146,60,.55) 45%,rgba(255,237,213,.6) 50%,rgba(251,146,60,.55) 55%,
    transparent 68% 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
  animation:cine-ring-spin 6s linear infinite;
}
html.cine-on .pa-orb::after{
  content:"";position:absolute;left:50%;bottom:-13%;width:72%;height:11%;
  transform:translateX(-50%);border-radius:50%;pointer-events:none;filter:blur(7px);
  background:radial-gradient(50% 50% at 50% 50%,rgba(249,115,22,.42),transparent 72%);
  animation:cine-orb-floor 6s ease-in-out infinite;
}
@keyframes cine-orb-floor{0%,100%{opacity:.85;transform:translateX(-50%) scaleX(1)}
  50%{opacity:.5;transform:translateX(-50%) scaleX(.8)}}
html.cine-on .pa-mic{
  box-shadow:0 0 46px rgba(249,115,22,.55),0 0 96px rgba(249,115,22,.26),
    inset 0 1px 0 rgba(255,255,255,.42),inset 0 -6px 14px rgba(124,45,18,.5)!important;
}

/* ── Burbujas: entran girando desde la profundidad ───────────────────────── */
html.cine-on .pa-body{perspective:800px}
html.cine-on .pa-row{animation:cine-bub .5s cubic-bezier(.16,.84,.28,1) both;transform-origin:top center}
@keyframes cine-bub{from{opacity:0;transform:translateY(14px) rotateX(-14deg)}to{opacity:1;transform:none}}
html.cine-on .pa-it{
  background:linear-gradient(160deg,rgba(255,255,255,.085),rgba(255,255,255,.032))!important;
  border:1px solid rgba(251,146,60,.18)!important;
  box-shadow:0 6px 18px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.07);
}
html.cine-on .pa-me{box-shadow:0 10px 26px rgba(234,88,12,.4),inset 0 1px 0 rgba(255,255,255,.3)}
html.cine-on .pa-pin{box-shadow:0 0 14px rgba(249,115,22,.6);color:transparent!important;
  background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22121 262 713 527%22%3E%3Cpath d=%22M 492.643 262.982 C 488.995 264.134%2C 486.464 266.435%2C 485.120 269.822 C 484.105 272.379%2C 479.772 299.222%2C 472.499 348 C 470.654 360.375%2C 468.819 372.482%2C 468.420 374.905 C 467.988 377.530%2C 466.578 380.560%2C 464.930 382.405 L 462.165 385.500 334.832 386 C 208.001 386.498%2C 207.482 386.508%2C 202.949 388.606 C 192.080 393.635%2C 186.557 402.053%2C 186.616 413.500 C 186.673 424.775%2C 191.833 433.151%2C 201.493 437.649 L 206.500 439.980 327 439.992 C 439.711 440.002%2C 447.726 440.116%2C 450.989 441.752 C 456.621 444.574%2C 456.740 446.252%2C 453.062 471.198 C 449.679 494.140%2C 448.886 496.718%2C 444.281 499.736 C 441.774 501.379%2C 435.371 501.534%2C 351.045 502 L 260.500 502.500 255.708 505.317 C 240.402 514.314%2C 238.279 535.706%2C 251.484 547.878 C 253.853 550.062%2C 257.525 552.330%2C 259.645 552.919 C 262.241 553.639%2C 290.619 553.991%2C 346.500 553.996 C 423.510 554.003%2C 429.752 554.129%2C 432.999 555.752 C 439.466 558.983%2C 439.517 559.790%2C 435.068 588.681 C 432.882 602.882%2C 429.264 626.875%2C 427.028 642 C 424.792 657.125%2C 422.082 675.350%2C 421.006 682.500 C 419.930 689.650%2C 417.635 704.950%2C 415.906 716.500 C 414.177 728.050%2C 411.299 747.175%2C 409.512 759 C 406.007 782.181%2C 406.156 785.408%2C 410.850 787.920 C 413.943 789.575%2C 508.686 789.380%2C 512 787.711 C 513.375 787.019%2C 515.283 784.888%2C 516.239 782.976 C 517.807 779.843%2C 531.057 696.052%2C 539.481 636 C 542.378 615.351%2C 543.061 612.968%2C 547.041 609.619 L 549.824 607.278 595.162 606.672 C 650.012 605.939%2C 661.848 604.797%2C 690.622 597.467 C 776.504 575.587%2C 830.571 509.656%2C 833.697 423 C 835.428 375.004%2C 821.965 336.906%2C 793.040 307.949 C 768.375 283.257%2C 737.526 269.619%2C 693.500 263.944 C 682.353 262.507%2C 496.958 261.619%2C 492.643 262.982 M 299.734 268.069 C 277.631 273.388%2C 270.198 300.886%2C 286.981 315.251 C 295.027 322.139%2C 293.507 322%2C 361.018 322 L 421.681 322 427.804 318.940 C 448.810 308.443%2C 448.048 279.719%2C 426.500 269.801 L 421.500 267.500 362.500 267.332 C 330.011 267.239%2C 301.808 267.570%2C 299.734 268.069 M 587.314 360.908 C 581.760 364.368%2C 583.507 355.883%2C 569.014 449.813 C 560.777 503.199%2C 560.744 503.673%2C 564.988 507.500 C 567.063 509.371%2C 568.861 509.521%2C 592.853 509.822 C 620.601 510.170%2C 635.801 509.103%2C 648.799 505.894 C 685.657 496.797%2C 708.756 470.616%2C 713.059 433.059 C 717.316 395.912%2C 702.641 370.162%2C 672.466 361.829 C 665.056 359.782%2C 661.918 359.604%2C 627.500 359.276 C 591.998 358.937%2C 590.371 359.003%2C 587.314 360.908 M 136.444 504.374 C 115.880 513.949%2C 116.515 543.796%2C 137.468 552.551 C 140.241 553.710%2C 147 553.996%2C 171.218 553.978 C 205.046 553.954%2C 206.174 553.760%2C 213.164 546.769 C 223.773 536.160%2C 223.775 520.579%2C 213.168 510.049 C 205.201 502.139%2C 204.451 501.998%2C 170.384 502.010 C 142.160 502.019%2C 141.384 502.073%2C 136.444 504.374 M 257.994 615.917 C 246.768 619.411%2C 239 630.100%2C 239 642.052 C 239 652.269%2C 244.567 661.167%2C 253.792 665.697 L 259.500 668.500 309 668.500 L 358.500 668.500 363.788 666.111 C 380.186 658.701%2C 385.068 636.936%2C 373.262 623.868 C 365.381 615.145%2C 368.138 615.524%2C 311 615.318 C 283.225 615.218%2C 259.372 615.487%2C 257.994 615.917%22 fill=%22%23fff%22 fill-rule=%22evenodd%22/%3E%3C/svg%3E") center/64% auto no-repeat,linear-gradient(135deg,#F97316,#EA580C)!important}
html.cine-on .pa-chip{
  background:rgba(255,255,255,.05)!important;border:1px solid rgba(251,146,60,.26)!important;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:transform .18s,box-shadow .18s,border-color .18s,color .18s;
}
html.cine-on .pa-chip:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(234,88,12,.3)}
html.cine-on .pa-card,html.cine-on .pa-form{
  border:1px solid rgba(251,146,60,.22)!important;
  background:linear-gradient(165deg,rgba(255,255,255,.06),rgba(255,255,255,.02))!important;
  box-shadow:0 14px 34px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06);
}
html.cine-on .pa-ok{box-shadow:0 14px 34px rgba(234,88,12,.25),inset 0 1px 0 rgba(255,255,255,.08)}

/* ── Pie de escritura ────────────────────────────────────────────────────── */
html.cine-on .pa-foot{
  border-top:1px solid rgba(251,146,60,.14)!important;
  background:linear-gradient(180deg,transparent,rgba(249,115,22,.05));
}
html.cine-on .pa-in:focus{
  border-color:#FB923C!important;
  box-shadow:0 0 0 3px rgba(249,115,22,.22),0 0 24px rgba(249,115,22,.18);
}
html.cine-on .pa-send{
  box-shadow:0 8px 20px rgba(234,88,12,.45),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .15s,box-shadow .15s;
}
html.cine-on .pa-send:hover{transform:translateY(-1px)}

/* ── Móvil: hoja inferior con asa, entrada desde abajo en perspectiva ────── */
@media(max-width:860px){
  html.cine-on .pa-panel{
    animation:cine-pa-up .5s cubic-bezier(.16,.84,.28,1) both!important;
    border-radius:24px 24px 0 0!important;border-bottom:0!important;
  }
  html.cine-on .pa-head::before{
    content:"";position:absolute;left:50%;top:7px;width:44px;height:4px;
    border-radius:2px;transform:translateX(-50%);background:rgba(255,255,255,.22);
  }
}
@keyframes cine-pa-up{
  from{opacity:0;transform:translateY(64px) perspective(900px) rotateX(6deg)}
  /* Termina en NONE a propósito: un transform 3D persistente en el panel
     (fill:both) rompe el touch-scroll interno en iOS Safari — bug de
     compositing de WebKit con overflow dentro de ancestros transformados. */
  to{opacity:1;transform:none}
}

/* ── Accesibilidad: sin animación para quien la pide quieta ──────────────── */
@media (prefers-reduced-motion:reduce){
  html.cine-on .pa-btn,html.cine-on .pa-btn::before,html.cine-on .pa-btn::after,
  html.cine-on .pa-orb,html.cine-on .pa-orb::before,html.cine-on .pa-orb::after,
  html.cine-on .pa-av,html.cine-on .pa-row,html.cine-on .pa-panel,
  html.cine-on .pa-panel::before{animation:none!important}
}

/* ── Móvil: el orbe de voz GRANDE, como en escritorio ────────────────────────
   El widget de fábrica esconde la columna de voz en el teléfono y deja solo un
   micro de 46px en la barra de escritura — demasiado pequeño para el gesto más
   importante del producto. Aquí la voz recupera el escenario: orbe protagonista
   arriba, chat debajo. Solo capas de presentación; misma lógica de siempre. */
@media(max-width:860px){
  html.cine-on .pa-cols{flex-direction:column}
  html.cine-on .pa-voice{
    display:flex!important;flex:0 0 auto;flex-direction:column;gap:2px;
    padding:14px 16px 12px;border-right:0!important;
    border-bottom:1px solid rgba(251,146,60,.13);
  }
  html.cine-on .pa-orb{width:132px;height:132px}
  html.cine-on .pa-tap{margin-top:6px;font-size:13px}
  html.cine-on .pa-opt,html.cine-on .pa-vh{display:none}
  /* Con el orbe en escena, el micro chico de la barra sobra */
  html.cine-on .pa-micsm{display:none!important}
  /* Al escribir (teclado abierto) la voz cede su sitio al chat */
  html.cine-on .pa-panel:has(.pa-in:focus) .pa-voice{display:none!important}
  html.cine-on .pa-panel:has(.pa-in:focus) .pa-micsm{display:grid!important}
}


/* ── Móvil: el chat SIEMPRE desplazable ──────────────────────────────────────
   Al apilar las columnas (orbe arriba, chat abajo) la cadena flex necesita
   min-height:0 en .pa-chat — sin él, el ítem se niega a encoger por debajo de
   su contenido, .pa-body nunca desborda y el dedo no puede desplazar la
   conversación. overscroll-behavior evita que el gesto se escape a la página
   de fondo; touch-action deja claro al navegador que aquí se panea vertical. */
@media(max-width:860px){
  html.cine-on .pa-chat{min-height:0}
  html.cine-on .pa-body{
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
    perspective:none;
  }
}

/* ═══════════ INTRO FIEL AL VIDEO DE REFERENCIA (2026-08-07) ═══════════════
   La pantalla inicial (#intro) elevada a la estética del video del dueño:
   fondo Higgsfield de brasas/nebulosa, logo en caja naranja con glow,
   ecualizador de voz vivo (JS), iconos de oficios fantasma, destellos de
   4 puntas y anillos orbitales. TODO el contenido y textos originales
   (bilingües) quedan intactos — esto es únicamente vestuario. */

/* El telón Higgsfield llena el encuadre; velo suave para el contraste */
html.cine-on .cine-bg-intro video,html.cine-on .cine-bg-intro img{opacity:.92}
html.cine-on .cine-bg-intro .cine-veil{background:
  radial-gradient(ellipse at 50% 46%,rgba(18,9,2,0) 0%,rgba(18,9,2,.14) 52%,rgba(18,9,2,.55) 92%),
  linear-gradient(180deg,rgba(18,9,2,.35),transparent 18%,transparent 80%,rgba(18,9,2,.5))}
/* La viñeta original en el mismo negro-brasa del lienzo abisal */
html.cine-on #intro .in-vig{background:radial-gradient(ellipse at 50% 46%,rgba(18,9,2,0) 0%,rgba(18,9,2,.12) 50%,rgba(18,9,2,.5) 92%)}
/* La malla original cede el fondo al video; las chispas .in-sky se quedan */
html.cine-on #intro .in-mesh{opacity:0}

/* Anillos orbitales retirados (prompt 2026-08-13: el encuadre es video puro) */

/* ── Chip superior: uppercase con tracking como el video ── */
html.cine-on .in-eyebrow{
  text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:400;
  color:#C7BCB2;background:transparent;border:none;border-radius:0;
  padding:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}

/* ── Logo: caja-app naranja con brillo, como el icono real de Pronto ── */
html.cine-on .in-mark{
  background:linear-gradient(135deg,#FB923C 0%,#F97316 45%,#EA580C 100%);
  border-radius:24%;box-shadow:none;animation:none}
@keyframes cine-iv-logo{0%,100%{box-shadow:0 18px 50px rgba(234,88,12,.55),0 0 80px rgba(249,115,22,.35),inset 0 2px 2px rgba(255,255,255,.5),inset 0 -10px 22px rgba(124,45,18,.55)}
  50%{box-shadow:0 18px 60px rgba(234,88,12,.7),0 0 130px rgba(249,115,22,.55),inset 0 2px 2px rgba(255,255,255,.5),inset 0 -10px 22px rgba(124,45,18,.55)}}
html.cine-on .in-mark svg{width:66%;height:66%;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
html.cine-on .in-halo{background:radial-gradient(circle,rgba(249,115,22,.2) 0%,rgba(249,115,22,.06) 42%,transparent 70%)}

/* ── Ondas: viven en el telón de video (intro-ondas.mp4). Las barras del
   ecualizador se retiran del encuadre; si el telón muriera (404/códec),
   cine-ondas-dead las devuelve con su animación original del sitio. ── */
html.cine-on:not(.cine-ondas-dead) .in-wv{display:none!important}

/* ── Iconos de oficios fantasma flotando (inyectados por JS) ── */
.cine-iv-icons{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.cine-iv-ic{position:absolute;opacity:0;animation:cine-iv-ic-in 1.4s ease forwards,
  cine-iv-float 7s ease-in-out infinite}
.cine-iv-ic svg{width:100%;height:100%;display:block}
@keyframes cine-iv-ic-in{to{opacity:var(--o,.13)}}
@keyframes cine-iv-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* ── Destellos de 4 puntas ── */
.cine-iv-star{position:absolute;pointer-events:none;z-index:2;
  filter:drop-shadow(0 0 10px rgba(253,186,116,.8));
  animation:cine-iv-twinkle 3.2s ease-in-out infinite}
.cine-iv-star svg{width:100%;height:100%;display:block;fill:#FFEDD5}
@keyframes cine-iv-twinkle{0%,100%{opacity:.35;transform:scale(.7) rotate(0deg)}
  50%{opacity:1;transform:scale(1.12) rotate(8deg)}}

/* ── Botón "Which one are you?": píldora contorneada como la referencia ── */
html.cine-on .in-cue{text-transform:uppercase;letter-spacing:.14em;
  font-size:12.5px;font-weight:800;color:#fff;
  background:rgba(9,9,11,.66);border:1.5px solid rgba(249,115,22,.65);
  border-radius:999px;padding:15px 28px;
  box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 24px rgba(249,115,22,.16),
    inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html.cine-on .in-cue:hover{background:linear-gradient(135deg,var(--orange),var(--od));
  border-color:transparent;box-shadow:0 14px 44px rgba(249,115,22,.5)}

/* Accesibilidad: quieto cuando así se pide */

/* ═══════════════ REDISEÑO PREMIUM v7 (brief 2026-08-11) ══════════════════
   Solo capa visual: cero funciones, cero textos, cero rutas tocadas. Todo
   scoped a html.cine-on. */

/* ── A · PALETA CLARA (2026-08-16, pedido del dueño) ──────────────────────
   Hasta la v19 esta capa VOLTEABA los tokens :root a negro (#0C0C0C) para
   las dos facetas. El dueño pidió volver a la paleta clara del sitio —la de
   la referencia «The pro you call actually answers»: lienzo #fafaf9/#fff,
   tinta #1c1917, naranja #f97316 y neutros— SIN perder el diseño de la capa
   cine (nav píldora, hero con video, tilt, marquee, videos de oficio…) y
   sin tocar el intro, que sigue abisal (sus reglas usan literales, no estos
   tokens). Aquí NO se redefine ningún token: manda el :root original del
   index.html. (r33 2026-08-24: #platform pasó a claro. r34 2026-08-24: el
   dueño pidió TODO el sitio en claro salvo tres acentos — hoy solo siguen
   oscuros #demo-section, #cta-final y los pies #footer/#bfooter, además
   del intro, que no se toca. #stats-bar, #cineMarquee, #problem, #btrust
   y #bemerg pasaron al marfil.) */
html.cine-on .hero-glow{opacity:.85;filter:saturate(1.05)}
html.cine-on #hero,html.cine-on #features,html.cine-on #industries,
html.cine-on #pricing,html.cine-on #proof,html.cine-on #faq,
html.cine-on #solution,html.cine-on #chan-section,html.cine-on #data-section,
html.cine-on #roi-section,html.cine-on #intel-suite,html.cine-on #phygital{
  position:relative;
}

/* ── B · Navegación píldora flotante (6.1) — vidrio CLARO ─────────────────── */
html.cine-on #nav{
  top:14px;left:50%;right:auto;transform:translateX(-50%);
  width:auto;max-width:calc(100% - 24px);padding:0 6px;
  background:rgba(255,255,255,.66);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  backdrop-filter:blur(24px) saturate(1.4);
  border:1px solid rgba(28,25,23,.08);border-radius:999px;
  box-shadow:0 12px 40px rgba(28,25,23,.10),inset 0 1px 0 rgba(255,255,255,.8);
}
html.cine-on #nav.scrolled{
  background:rgba(255,255,255,.86);box-shadow:0 16px 48px rgba(28,25,23,.14);
}
html.cine-on #nav .nav-inner{height:56px;gap:14px;padding:0 12px}
html.cine-on #nav .logo-mark{width:34px;height:34px}
html.cine-on .nav-link{color:#52525b}
html.cine-on .nav-link:hover{color:var(--text);background:rgba(28,25,23,.06)}
html.cine-on .lang-btn{border-color:rgba(28,25,23,.16);color:var(--muted)}
html.cine-on .lang-btn:hover{border-color:var(--orange);color:var(--orange)}
/* Nav B: <nav id="bnav"> SIN clase — vidrio blanco un poco más denso que el
   original (rgba(255,255,255,.92)) para que el sticky se lea sobre el hero. */
html.cine-on #bnav{
  background:rgba(255,255,255,.84);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  backdrop-filter:blur(24px) saturate(1.4);
  border-bottom:1px solid rgba(28,25,23,.08);
  box-shadow:0 12px 40px rgba(28,25,23,.08);
}

/* ── C · Hero con video propio y scrub (6.2) — DORMIDO ────────────────────
   2026-08-16: el dueño pidió quitar la imagen/video de fondo del hero (con
   la paleta clara no se apreciaba). El módulo 11a del JS ya no inyecta
   .cine-hero-media (HERO_MEDIA=false); estas reglas quedan por si se
   reactiva: velo marfil, más denso sobre la columna de texto. El hero hoy
   es el lienzo #fafaf9 del sitio con sus glows naranjas. */
.cine-hero-media{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.cine-hero-media video{width:100%;height:100%;object-fit:cover;
  filter:saturate(.96) contrast(.98) brightness(1.06)}
.cine-hero-media .cine-hero-veil,#hero .cine-hero-veil{position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(250,250,249,.94) 0%,rgba(250,250,249,.86) 40%,rgba(250,250,249,.46) 72%,rgba(250,250,249,.6) 100%),
    linear-gradient(180deg,rgba(250,250,249,.82) 0%,rgba(250,250,249,.18) 32%,rgba(250,250,249,.18) 60%,#fafaf9 100%)}
.cine-hero-poster{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("../../media/hero/hero-poster.jpg") center/cover no-repeat}
html.cine-on #hero .hero-inner{position:relative;z-index:2}
html.cine-on .hero-h1{color:var(--black);text-shadow:none}
/* .hero-sub: sin override — el --muted del index (paleta igual, pedido del dueño) */
@media(max-width:768px){
  /* En celular el texto va SOBRE el video: velo más denso y uniforme */
  .cine-hero-media .cine-hero-veil,#hero .cine-hero-veil{
    background:
      linear-gradient(180deg,rgba(250,250,249,.9) 0%,rgba(250,250,249,.82) 45%,rgba(250,250,249,.9) 80%,#fafaf9 100%)}
}

/* ── D · TextEffect blur-slide por caracteres (6.3) ──────────────────────── */
html.cine-on .cine-tx{opacity:1!important;transform:none!important}
.cine-ch{display:inline-block;opacity:0;transform:translateY(20px);
  filter:blur(10px);will-change:transform,filter,opacity;
  transition:opacity .45s cubic-bezier(.16,1,.3,1),
    transform .45s cubic-bezier(.16,1,.3,1),filter .45s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i)*.018s)}
.cine-tx-in .cine-ch{opacity:1;transform:translateY(0);filter:blur(0)}

/* ── E · Oficios: video propio por tarjeta + relevo cruzado (6.4) ────────── */
.cine-ind-media video{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(1.05) contrast(1.04)}
html.cine-on .ind-panel.active{
  animation:cine-relevo .55s cubic-bezier(.16,1,.3,1) both}
@keyframes cine-relevo{
  from{opacity:0;transform:translateY(24px);filter:blur(12px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}}
html.cine-on .ind-vis{background:var(--white);border-color:var(--border)}

/* ── F · Numeración editorial (6.5) ──────────────────────────────────────── */
.cine-sec-num{display:block;font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.15em;color:var(--muted);
  margin:0 auto 26px;text-align:center;position:relative;z-index:2}
.cine-sec-num i{font-style:normal;color:var(--orange);margin-right:10px}
/* En las secciones oscuras del diseño original la numeración va en claro
   (r33: #platform salió; r34: #problem también — solo queda el demo) */
#demo-section .cine-sec-num{
  color:rgba(255,255,255,.55)}

/* ── G · RETIRADO en la r59 (la franja de teléfonos, con su módulo 11d) ──── */

/* ── H · Imágenes 3D flotando en la bifurcación ──────────────────────────── */
/* r34 (2026-08-24): el módulo 11f del JS está desactivado (el dueño pidió
   quitar casco, teléfono, llave y estrella de la compuerta); estas reglas
   quedan inertes por si se revive. */
.cine-3d{position:absolute;pointer-events:none;z-index:1;
  filter:drop-shadow(0 18px 30px rgba(28,25,23,.28));
  animation:cine-3d-float 7s ease-in-out infinite}
.cine-3d img{width:100%;height:auto;display:block}
@keyframes cine-3d-float{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}
  50%{transform:translateY(-14px) rotate(var(--r,0deg))}}
/* En móvil las 3D NO desaparecen (pedido del dueño): esquinas, pequeñas,
   detrás de las tarjetas (z-index 0) y sin estorbar al toque. */
@media(max-width:760px){
  .cine-3d{width:62px!important;opacity:.45;z-index:0}
  .cine-3d:nth-of-type(1){left:-2%!important;top:9%!important}
  .cine-3d:nth-of-type(2){left:auto!important;right:-2%;top:7%!important}
  .cine-3d:nth-of-type(3){left:-3%!important;top:84%!important}
  .cine-3d:nth-of-type(4){left:auto!important;right:-3%;top:86%!important}
}
@media(max-width:400px){.cine-3d{width:48px!important;opacity:.32}}

/* ── I · RETIRADO en la r64: ni #demo-section (r59) ni #roi-section (r64)
      llevan ya telón de video. Los dos son de fondo liso y oscuro. ──────── */

/* ── J · Revelado estándar unificado (6.7) ───────────────────────────────── */
html.cine-on body.js-ready .fade-up{
  transform:translateY(35px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
html.cine-on body.js-ready .fade-up.visible{transform:translateY(0)}

/* ── K · Accesibilidad (6.8): quieto cuando se pide quieto ───────────────── */

/* ── L · Tinta: la del sitio (#1c1917 del body original) — sin volteo.
   El banner PWA (#pvpwaBar), la hamburguesa, el menú móvil y los enlaces
   del nav B ya vienen claros de fábrica en el index: no necesitan vestido.
   (Las reglas oscuras de las rondas 7-8 para esas piezas se retiraron
   el 2026-08-16 junto con el volteo de tokens.) */
/* Línea de tiempo del demo (#demo-section, oscura): el index define .f-lbl
   dos veces —la del formulario (var(--text)) pisa a la del demo (blanco
   .76)— y las etiquetas «Incoming Call Detected…» quedaban tinta oscura
   sobre negro en el diseño original; el volteo lo tapaba. Se restituye. */
html.cine-on #demo-section .f-lbl{color:rgba(255,255,255,.76)}

/* ═════════════ RONDA 8 · 7 ARREGLOS REPORTADOS POR EL DUEÑO ═════════════ */

/* ── R8-2 · Nav móvil faceta A: la píldora rompía el layout de dos filas.
   En ≤768px vuelve a barra completa fija (vidrio CLARO) con su canalón de
   50px para el Get Demo (que el sitio posiciona absoluto con !important). */
/* r67 · Este umbral IBA EN PAREJA con el del sitio, y al subir aquel a 959
   (la fila de escritorio pedía 936 px y por debajo se salía) esta pareja se
   rompió: entre 769 y 959 el sitio ya montaba las dos filas mientras esta
   capa seguía dibujando la píldora de 56 px sin canalón, y el botón caía
   ENCIMA del chip «Para contratistas». Los dos números tienen que ser el
   mismo; si uno cambia, el otro también. */
@media(max-width:959px){
  html.cine-on #nav{
    top:0;left:0;right:0;
    transform:none;
    width:auto;max-width:none;
    padding:0 16px;
    border:0;border-bottom:1px solid rgba(28,25,23,.08);
    border-radius:0;
    background:rgba(255,255,255,.86);
    -webkit-backdrop-filter:blur(20px) saturate(1.4);
    backdrop-filter:blur(20px) saturate(1.4);
    box-shadow:0 6px 22px rgba(28,25,23,.08);
  }
  html.cine-on #nav.scrolled{
    background:rgba(255,255,255,.95);
    box-shadow:0 8px 26px rgba(28,25,23,.12);
  }
  html.cine-on #nav .nav-inner{
    position:relative;height:auto;padding:10px 0 50px;
    gap:12px;align-items:center;max-width:1140px;margin:0 auto;
  }
  html.cine-on #nav .logo-mark{width:38px;height:38px}
}

/* ── R8-4 · TextEffect: las palabras son unidades indivisibles (el troceo
   por caracteres permitía cortar "Answer|?" o "Llama|r." a mitad de palabra) */
.cine-w{display:inline-block;white-space:nowrap}
/* El <em> del hero (gradiente con background-clip:text) se anima ENTERO como
   una sola pieza: trocearlo en spans vaciaba el recorte del gradiente. */
.cine-tx em.cine-ch,.cine-tx .cine-ch-solo{display:inline-block}

/* ── R8-5 · Ecualizador del intro: ondas más presentes también en móvil ── */
@media(max-width:768px){
  html.cine-on .in-wv{gap:4px}
  html.cine-on .in-wv i{width:5px}
}

/* ═════ RONDA 9 · Experiencia completa en celular/iPad (pedido del dueño) ═══ */

/* r42: el marquee de fichas fue reemplazado por la franja de pantallas (bloque
   G). La deriva táctil ahora la lleva el propio rAF del módulo 11d. */

/* El hero táctil lleva su video en loop: el poster CSS ya no es necesario
   ahí, pero el veil sí — nada que cambiar, solo asegurar cover correcto */
@media(max-width:768px){
  .cine-hero-media video{object-position:60% 50%}
}

/* Accesibilidad: la deriva también se detiene si el sistema lo pide */

/* Red de seguridad del intro: si las animaciones de entrada no corrieron
   (webviews raras), a los 2.2s el JS marca cine-intro-safe y todo aparece.
   Cuando las animaciones SÍ corren, su fill:forwards ya manda y esta regla
   no cambia nada. */
html.cine-on.cine-intro-safe .in-eyebrow,
html.cine-on.cine-intro-safe .in-core,
html.cine-on.cine-intro-safe .in-h1,
html.cine-on.cine-intro-safe .in-sub,
html.cine-on.cine-intro-safe .in-cue,
html.cine-on.cine-intro-safe .in-wv{opacity:1;transform:none}


/* ═══════════ INTRO ABISAL (DESIGN.md + refero/Auros, 2026-08-13 · v2) ═════
   Sistema "Auros — abyssal terminal" en paleta Pronto (naranja + negro
   brasa) y CON LA LETRA DE PRONTO: el dueño pidió explícitamente no perder
   el estilo tipográfico del sitio (grotesca del sistema, titulares 900
   apretados) — así que aquí NO se toca font-family ni el peso del titular;
   solo escala, color y ritmo del MD. Composición fiel a la referencia:
   etiqueta uppercase espaciada → titular → subtexto → CTA degradado firma
   → ESFERA DE PARTÍCULAS naranja (canvas, módulo 10 del JS) respirando
   abajo. Cero sombras: la jerarquía es color y escala. SOLO el intro. */

/* — Lienzo: negro-brasa abisal; el orbe no debe desbordar el encuadre — */
html.cine-on #intro{background:#190D03;overflow:hidden}

/* — Titular: LA LETRA DE PRONTO (familia y 900 del sitio, intactos);
     del MD solo la escala hero (tope ~61px), lh 1.02 y el blanco — */
html.cine-on .in-h1{
  font-size:clamp(1.7rem,4.6vw + .6rem,3.8rem);
  line-height:1.02;color:#fff;text-shadow:none;
  max-width:900px;margin-left:auto;margin-right:auto}
html.cine-on .in-h1 span.o{color:var(--orange)}

/* — Cuerpo: 16px lh 1.4 plata cálida (nunca blanco puro), medida 600px — */
html.cine-on .in-sub{
  font-size:16px;line-height:1.4;color:#C7BCB2;
  max-width:600px;margin:20px auto 0}
/* r38: en celular el intro respira más entre bloques (orden del dueño).
   Con #intro para ganarles a las reglas base vengan donde vengan. */
@media (max-width:560px){
  html.cine-on #intro .in-sub{margin-top:26px}
  html.cine-on #intro .in-cue{margin-top:44px}
}

/* — CTA firma: gradiente aurora-Pronto, texto oscuro, radio 6px — */
html.cine-on .in-cue{
  font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#190D03;border:none;border-radius:6px;padding:16px 26px;gap:10px;
  margin-top:40px;
  background:linear-gradient(90deg,#F97316 0%,#FDBA74 55%,#FFEDD5 100%);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:none;position:relative;overflow:visible;isolation:auto;
  transition:filter .2s,transform .2s}
html.cine-on .in-cue::before{content:none}   /* sin halo: sistema sin sombras */
html.cine-on .in-cue:hover{filter:brightness(1.07) saturate(1.05);transform:translateY(-1px);
  background:linear-gradient(90deg,#F97316 0%,#FDBA74 55%,#FFEDD5 100%);box-shadow:none}
html.cine-on .in-cue:focus-visible{outline:2px solid rgba(254,215,170,.7);outline-offset:4px}
html.cine-on .in-cue svg{width:16px;height:16px}

/* — Etiquetas de instrumento (chip / idioma / pie): fantasma, uppercase,
     tracking ancho del MD; la familia sigue siendo la del sitio — */
html.cine-on .in-eyebrow{
  text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:500;
  color:#C7BCB2;background:transparent;border:none;border-radius:0;
  padding:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
html.cine-on .in-lang{
  font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  background:transparent;border:none;border-radius:0;padding:8px 10px;
  -webkit-backdrop-filter:none;backdrop-filter:none;color:#C7BCB2}
html.cine-on .in-lang:hover{color:#fff;border-color:transparent;background:transparent}
html.cine-on .in-foot{
  left:0;right:0;padding:0 24px;border-top:none;
  font-weight:500;font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:#C7BCB2}

/* — El orbe: media esfera asomando bajo el contenido, como la referencia — */
html.cine-on .cine-orb{
  position:absolute;left:50%;bottom:0;
  transform:translate(-50%,calc(100% - 46vh));
  width:min(100vw,860px);aspect-ratio:1;z-index:1;pointer-events:none;opacity:.92}

/* — Silencio decorativo: chispas fuera mientras el orbe viva; si el canvas
     no arranca (cine-ondas-dead), chispas y ecualizador vuelven solos — */
html.cine-on:not(.cine-ondas-dead) #intro .in-sky{opacity:0}

/* ═══════════ VIDEOS DE OFICIO EN LA FACETA B (2026-08-13) ═══════════════
   Marco de video en la cabecera de cada tarjeta de #btrades (módulo 10b
   del JS): a sangre contra el filo de la tarjeta (compensa su padding
   22px 20px y su borde de 1.5px), esquinas superiores con el radio del
   card y encuadre 16:9 con cover. Solo bajo la capa cine — sin ella las
   tarjetas quedan exactamente como el original. */
html.cine-on .cine-btrade-media{position:relative;margin:-22px -20px 14px;
  border-radius:calc(var(--r) - 1.5px) calc(var(--r) - 1.5px) 0 0;
  overflow:hidden;aspect-ratio:16/9;background:var(--light)}
html.cine-on .cine-btrade-media video{width:100%;height:100%;object-fit:cover;display:block}


/* ═══════════ PIEL DEL ASISTENTE EN LA CARA B (mock del dueño, 2026-08-13) ══
   Consola negra con marco naranja, columna de voz con marca y orbe con el
   tile del logo, píldoras EN/ES, banda de categorías con conteos reales y
   compositor de píldora con enviar naranja. Solo bajo html.cine-on.cine-fb
   (faceta B activa): en la cara A y en el directorio el widget conserva su
   piel de siempre. El canvas del orbe NO se toca — ya late con el audio. */

/* — Consola: void negro, marco cálido — */
html.cine-on.cine-fb .pa-panel{
  background:#050505!important;
  border:1px solid rgba(249,115,22,.28)!important;
  border-radius:24px!important;
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 30px 90px rgba(0,0,0,.7)!important}
html.cine-on.cine-fb .pa-scrim{background:rgba(0,0,0,.72)!important}
html.cine-on.cine-fb .pa-head{
  background:transparent!important;border-bottom:none!important}

/* — Columna de voz: tarjeta contorneada como el mock — */
html.cine-on.cine-fb .pa-voice{
  border-right:none!important;margin:14px 0 14px 14px;
  border:1px solid rgba(249,115,22,.32)!important;border-radius:18px;
  background:radial-gradient(120% 90% at 50% 38%,rgba(249,115,22,.07),transparent 60%),#070604!important}
html.cine-on.cine-fb .cine-pab-brand{
  position:absolute;top:18px;left:18px;display:flex;align-items:center;gap:10px;
  pointer-events:none;z-index:2}
html.cine-on.cine-fb .cine-pab-tile{
  width:34px;height:34px;border-radius:9px;flex:0 0 auto;
  background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22121 262 713 527%22%3E%3Cpath d=%22M 492.643 262.982 C 488.995 264.134%2C 486.464 266.435%2C 485.120 269.822 C 484.105 272.379%2C 479.772 299.222%2C 472.499 348 C 470.654 360.375%2C 468.819 372.482%2C 468.420 374.905 C 467.988 377.530%2C 466.578 380.560%2C 464.930 382.405 L 462.165 385.500 334.832 386 C 208.001 386.498%2C 207.482 386.508%2C 202.949 388.606 C 192.080 393.635%2C 186.557 402.053%2C 186.616 413.500 C 186.673 424.775%2C 191.833 433.151%2C 201.493 437.649 L 206.500 439.980 327 439.992 C 439.711 440.002%2C 447.726 440.116%2C 450.989 441.752 C 456.621 444.574%2C 456.740 446.252%2C 453.062 471.198 C 449.679 494.140%2C 448.886 496.718%2C 444.281 499.736 C 441.774 501.379%2C 435.371 501.534%2C 351.045 502 L 260.500 502.500 255.708 505.317 C 240.402 514.314%2C 238.279 535.706%2C 251.484 547.878 C 253.853 550.062%2C 257.525 552.330%2C 259.645 552.919 C 262.241 553.639%2C 290.619 553.991%2C 346.500 553.996 C 423.510 554.003%2C 429.752 554.129%2C 432.999 555.752 C 439.466 558.983%2C 439.517 559.790%2C 435.068 588.681 C 432.882 602.882%2C 429.264 626.875%2C 427.028 642 C 424.792 657.125%2C 422.082 675.350%2C 421.006 682.500 C 419.930 689.650%2C 417.635 704.950%2C 415.906 716.500 C 414.177 728.050%2C 411.299 747.175%2C 409.512 759 C 406.007 782.181%2C 406.156 785.408%2C 410.850 787.920 C 413.943 789.575%2C 508.686 789.380%2C 512 787.711 C 513.375 787.019%2C 515.283 784.888%2C 516.239 782.976 C 517.807 779.843%2C 531.057 696.052%2C 539.481 636 C 542.378 615.351%2C 543.061 612.968%2C 547.041 609.619 L 549.824 607.278 595.162 606.672 C 650.012 605.939%2C 661.848 604.797%2C 690.622 597.467 C 776.504 575.587%2C 830.571 509.656%2C 833.697 423 C 835.428 375.004%2C 821.965 336.906%2C 793.040 307.949 C 768.375 283.257%2C 737.526 269.619%2C 693.500 263.944 C 682.353 262.507%2C 496.958 261.619%2C 492.643 262.982 M 299.734 268.069 C 277.631 273.388%2C 270.198 300.886%2C 286.981 315.251 C 295.027 322.139%2C 293.507 322%2C 361.018 322 L 421.681 322 427.804 318.940 C 448.810 308.443%2C 448.048 279.719%2C 426.500 269.801 L 421.500 267.500 362.500 267.332 C 330.011 267.239%2C 301.808 267.570%2C 299.734 268.069 M 587.314 360.908 C 581.760 364.368%2C 583.507 355.883%2C 569.014 449.813 C 560.777 503.199%2C 560.744 503.673%2C 564.988 507.500 C 567.063 509.371%2C 568.861 509.521%2C 592.853 509.822 C 620.601 510.170%2C 635.801 509.103%2C 648.799 505.894 C 685.657 496.797%2C 708.756 470.616%2C 713.059 433.059 C 717.316 395.912%2C 702.641 370.162%2C 672.466 361.829 C 665.056 359.782%2C 661.918 359.604%2C 627.500 359.276 C 591.998 358.937%2C 590.371 359.003%2C 587.314 360.908 M 136.444 504.374 C 115.880 513.949%2C 116.515 543.796%2C 137.468 552.551 C 140.241 553.710%2C 147 553.996%2C 171.218 553.978 C 205.046 553.954%2C 206.174 553.760%2C 213.164 546.769 C 223.773 536.160%2C 223.775 520.579%2C 213.168 510.049 C 205.201 502.139%2C 204.451 501.998%2C 170.384 502.010 C 142.160 502.019%2C 141.384 502.073%2C 136.444 504.374 M 257.994 615.917 C 246.768 619.411%2C 239 630.100%2C 239 642.052 C 239 652.269%2C 244.567 661.167%2C 253.792 665.697 L 259.500 668.500 309 668.500 L 358.500 668.500 363.788 666.111 C 380.186 658.701%2C 385.068 636.936%2C 373.262 623.868 C 365.381 615.145%2C 368.138 615.524%2C 311 615.318 C 283.225 615.218%2C 259.372 615.487%2C 257.994 615.917%22 fill=%22%23fff%22 fill-rule=%22evenodd%22/%3E%3C/svg%3E") center/62% auto no-repeat,
    linear-gradient(135deg,#FB923C,#EA580C)}
html.cine-on.cine-fb .cine-pab-word{
  font-size:11px;font-weight:800;letter-spacing:.34em;color:#FB923C;
  font-style:italic}

/* — Orbe: el tile del logo al centro; el canvas de ondas sigue siendo suyo — */
html.cine-on.cine-fb .pa-mic{
  border-radius:22%!important;
  background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22121 262 713 527%22%3E%3Cpath d=%22M 492.643 262.982 C 488.995 264.134%2C 486.464 266.435%2C 485.120 269.822 C 484.105 272.379%2C 479.772 299.222%2C 472.499 348 C 470.654 360.375%2C 468.819 372.482%2C 468.420 374.905 C 467.988 377.530%2C 466.578 380.560%2C 464.930 382.405 L 462.165 385.500 334.832 386 C 208.001 386.498%2C 207.482 386.508%2C 202.949 388.606 C 192.080 393.635%2C 186.557 402.053%2C 186.616 413.500 C 186.673 424.775%2C 191.833 433.151%2C 201.493 437.649 L 206.500 439.980 327 439.992 C 439.711 440.002%2C 447.726 440.116%2C 450.989 441.752 C 456.621 444.574%2C 456.740 446.252%2C 453.062 471.198 C 449.679 494.140%2C 448.886 496.718%2C 444.281 499.736 C 441.774 501.379%2C 435.371 501.534%2C 351.045 502 L 260.500 502.500 255.708 505.317 C 240.402 514.314%2C 238.279 535.706%2C 251.484 547.878 C 253.853 550.062%2C 257.525 552.330%2C 259.645 552.919 C 262.241 553.639%2C 290.619 553.991%2C 346.500 553.996 C 423.510 554.003%2C 429.752 554.129%2C 432.999 555.752 C 439.466 558.983%2C 439.517 559.790%2C 435.068 588.681 C 432.882 602.882%2C 429.264 626.875%2C 427.028 642 C 424.792 657.125%2C 422.082 675.350%2C 421.006 682.500 C 419.930 689.650%2C 417.635 704.950%2C 415.906 716.500 C 414.177 728.050%2C 411.299 747.175%2C 409.512 759 C 406.007 782.181%2C 406.156 785.408%2C 410.850 787.920 C 413.943 789.575%2C 508.686 789.380%2C 512 787.711 C 513.375 787.019%2C 515.283 784.888%2C 516.239 782.976 C 517.807 779.843%2C 531.057 696.052%2C 539.481 636 C 542.378 615.351%2C 543.061 612.968%2C 547.041 609.619 L 549.824 607.278 595.162 606.672 C 650.012 605.939%2C 661.848 604.797%2C 690.622 597.467 C 776.504 575.587%2C 830.571 509.656%2C 833.697 423 C 835.428 375.004%2C 821.965 336.906%2C 793.040 307.949 C 768.375 283.257%2C 737.526 269.619%2C 693.500 263.944 C 682.353 262.507%2C 496.958 261.619%2C 492.643 262.982 M 299.734 268.069 C 277.631 273.388%2C 270.198 300.886%2C 286.981 315.251 C 295.027 322.139%2C 293.507 322%2C 361.018 322 L 421.681 322 427.804 318.940 C 448.810 308.443%2C 448.048 279.719%2C 426.500 269.801 L 421.500 267.500 362.500 267.332 C 330.011 267.239%2C 301.808 267.570%2C 299.734 268.069 M 587.314 360.908 C 581.760 364.368%2C 583.507 355.883%2C 569.014 449.813 C 560.777 503.199%2C 560.744 503.673%2C 564.988 507.500 C 567.063 509.371%2C 568.861 509.521%2C 592.853 509.822 C 620.601 510.170%2C 635.801 509.103%2C 648.799 505.894 C 685.657 496.797%2C 708.756 470.616%2C 713.059 433.059 C 717.316 395.912%2C 702.641 370.162%2C 672.466 361.829 C 665.056 359.782%2C 661.918 359.604%2C 627.500 359.276 C 591.998 358.937%2C 590.371 359.003%2C 587.314 360.908 M 136.444 504.374 C 115.880 513.949%2C 116.515 543.796%2C 137.468 552.551 C 140.241 553.710%2C 147 553.996%2C 171.218 553.978 C 205.046 553.954%2C 206.174 553.760%2C 213.164 546.769 C 223.773 536.160%2C 223.775 520.579%2C 213.168 510.049 C 205.201 502.139%2C 204.451 501.998%2C 170.384 502.010 C 142.160 502.019%2C 141.384 502.073%2C 136.444 504.374 M 257.994 615.917 C 246.768 619.411%2C 239 630.100%2C 239 642.052 C 239 652.269%2C 244.567 661.167%2C 253.792 665.697 L 259.500 668.500 309 668.500 L 358.500 668.500 363.788 666.111 C 380.186 658.701%2C 385.068 636.936%2C 373.262 623.868 C 365.381 615.145%2C 368.138 615.524%2C 311 615.318 C 283.225 615.218%2C 259.372 615.487%2C 257.994 615.917%22 fill=%22%23fff%22 fill-rule=%22evenodd%22/%3E%3C/svg%3E") center/62% auto no-repeat,
    linear-gradient(135deg,#FB923C 0%,#F97316 45%,#EA580C 100%)!important;
  box-shadow:0 10px 40px rgba(249,115,22,.45),inset 0 1px 0 rgba(255,255,255,.35)!important}
html.cine-on.cine-fb .pa-mic svg{display:none}
html.cine-on.cine-fb .pa-tap{
  font-size:clamp(20px,2.2vw,27px);font-weight:800;color:#fff;letter-spacing:-.02em}
html.cine-on.cine-fb .pa-vh,html.cine-on.cine-fb .pa-opt{color:#9a9a9a}

/* — Cabecera: título limpio; se viste el selector de idioma NATIVO del
     widget (.pa-lang) — inyectar otro lo duplicaba, lección del dueño — */
html.cine-on.cine-fb .pa-ht b{color:#fff}
html.cine-on.cine-fb .pa-st{color:#9a9a9a}
html.cine-on.cine-fb .pa-lang{
  background:rgba(255,255,255,.06)!important;border:none!important;
  border-radius:999px!important;padding:3px!important;gap:2px!important}
html.cine-on.cine-fb .pa-lang button{
  border:none!important;background:transparent!important;color:#9a9a9a!important;
  font-size:12px!important;font-weight:700!important;letter-spacing:.04em!important;
  padding:5px 12px!important;border-radius:999px!important;cursor:pointer;
  transition:color .2s,background .2s}
html.cine-on.cine-fb .pa-lang button:hover{color:#fff!important}
html.cine-on.cine-fb .pa-lang button.sel{
  background:linear-gradient(135deg,#FB923C,#EA580C)!important;color:#fff!important}

/* — Las sugerencias genéricas ceden el sitio a las categorías fijas — */
html.cine-on.cine-fb .pa-chips{display:none!important}

/* — Cuerpo del chat: void con ondas de partículas al fondo — */
html.cine-on.cine-fb .pa-body{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 300'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M0 170 C 150 120, 260 220, 420 165 S 720 110, 900 160' stroke='rgba(249,115,22,.16)' stroke-width='1.4'/%3E%3Cpath d='M0 185 C 160 140, 280 235, 450 180 S 740 130, 900 178' stroke='rgba(251,146,60,.12)' stroke-width='1.2'/%3E%3Cpath d='M0 155 C 140 105, 300 205, 470 150 S 760 95, 900 145' stroke='rgba(253,186,116,.10)' stroke-width='1'/%3E%3Cpath d='M0 200 C 170 160, 300 250, 480 196 S 750 150, 900 195' stroke='rgba(249,115,22,.08)' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E")
    center 62%/140% auto no-repeat,#050505!important}

/* — Burbujas sobre el void — */
html.cine-on.cine-fb .pa-it{
  background:rgba(255,255,255,.055)!important;border:none!important;
  border-radius:16px!important;color:#EDEDED!important;
  box-shadow:none!important}
html.cine-on.cine-fb .pa-me{
  background:linear-gradient(135deg,#F97316,#EA580C)!important;
  border-radius:16px!important;box-shadow:none!important}
html.cine-on.cine-fb .pa-fine{color:#9a9a9a}

/* — Chips de sugerencia existentes, afinados al mock — */
html.cine-on.cine-fb .pa-chip{
  background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.1)!important;
  border-radius:12px!important;color:#D9D9D9!important}
html.cine-on.cine-fb .pa-chip:hover{border-color:rgba(249,115,22,.5)!important;color:#FB923C!important}

/* — Banda de categorías (inyectada): título con filos y carril de chips — */
html.cine-on.cine-fb .cine-pab-cats{padding:10px 16px 2px;background:transparent}
html.cine-on.cine-fb .cine-pab-ct{
  display:flex;align-items:center;gap:12px;
  font-size:12.5px;color:#C9C4BE;white-space:nowrap;margin-bottom:10px}
html.cine-on.cine-fb .cine-pab-ct::before,
html.cine-on.cine-fb .cine-pab-ct::after{
  content:"";height:1px;flex:1;
  background:linear-gradient(90deg,transparent,rgba(249,115,22,.5))}
html.cine-on.cine-fb .cine-pab-ct::after{
  background:linear-gradient(90deg,rgba(249,115,22,.5),transparent)}
html.cine-on.cine-fb .cine-pab-row{
  display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;
  scrollbar-width:none}
html.cine-on.cine-fb .cine-pab-row::-webkit-scrollbar{display:none}
html.cine-on.cine-fb .cine-pab-cat{
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);
  border-radius:12px;padding:9px 13px;cursor:pointer;font:inherit;
  transition:border-color .2s,background .2s,transform .2s}
html.cine-on.cine-fb .cine-pab-cat:hover{
  border-color:rgba(249,115,22,.55);background:rgba(249,115,22,.07);
  transform:translateY(-1px)}
html.cine-on.cine-fb .cine-pab-ci{font-size:15px;line-height:1}
html.cine-on.cine-fb .cine-pab-cn{
  display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;
  font-size:12px;font-weight:700;color:#EDEDED;text-align:left;white-space:nowrap}
html.cine-on.cine-fb .cine-pab-cn b{
  font-weight:700;font-size:11px;color:#FB923C}

/* — Compositor: píldora oscura + enviar circular naranja — */
html.cine-on.cine-fb .pa-foot{
  background:transparent!important;border-top:none!important;padding:10px 16px 16px!important}
html.cine-on.cine-fb .pa-in{
  background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.08)!important;
  border-radius:999px!important;color:#fff!important;
  padding:13px 18px!important}
html.cine-on.cine-fb .pa-in:focus{border-color:rgba(249,115,22,.5)!important;outline:none!important}
html.cine-on.cine-fb .pa-send{
  width:46px!important;height:46px!important;border-radius:50%!important;
  background:linear-gradient(135deg,#FB923C,#EA580C)!important;border:none!important;
  box-shadow:0 0 0 5px rgba(249,115,22,.14),0 8px 24px rgba(249,115,22,.35)!important}
html.cine-on.cine-fb .pa-micsm{border-radius:50%!important}

/* — móvil: la banda de categorías respira y el carril se desliza — */
@media (max-width:760px){
  /* width:auto — con width:100% los márgenes laterales desbordaban el panel */
  html.cine-on.cine-fb .pa-voice{margin:10px 10px 0 10px;width:auto}
  html.cine-on.cine-fb .cine-pab-cats{padding:8px 12px 0}
}


/* ═══════════ FLUIDEZ DE LOS PLANES (2026-08-14) ═══════════════════════════
   El dueño reportó que elegir una membresía costaba varios clics: las
   tarjetas de #pricing llevaban el tilt 3D (preserve-3d) y la rotación
   separa la región clicable del botón de donde SE VE el botón — el mismo
   bug de la ronda 8 con «Which one are you?». En los planes el tilt se
   apaga por completo (transform:none pisa el estilo inline del módulo) y
   la entrada de la grid se acorta para que el CTA responda al instante. */
html.cine-on #pricing .cine-tilt{transform:none!important;transform-style:flat!important;will-change:auto!important}
html.cine-on #pricing .cine-tilt::after{display:none}
html.cine-on body.js-ready #pricing .fade-up{transition-duration:.28s}
html.cine-on #pricing .pr-cta{position:relative;z-index:3}