/* ════════════════ CINE — la piel oscura del sitio de marketing ════════════════
   Una sola hoja, cargada DESPUÉS de `app.css` (home, /neo/, /hub/) o de `pages.css` (FAQ y
   legales), que repinta el sitio público con el lenguaje de las referencias: base oscura que no es
   negro puro, una foto atmosférica fundida al fondo en el hero, tipografía blanca de peso medio,
   bordes de un pelo y cero sombras en las tarjetas.

   Cada regla de aquí cuelga de `html:not(.nx-portal) body.cine`: la clase `cine` solo la llevan
   las páginas del sitio. El `:not(.nx-portal)` apagaba la piel dentro del portal viejo, que
   compartía documento con la home; ese portal se borró el 2026-09-22 y el prefijo se conserva
   para no mover la especificidad. `tests/test_landing_cine.py` vigila que ninguna regla se salga
   del scope.

   El oro va con cuentagotas: el `.g` del titular del hero, el rombo del logo, la barra de progreso
   del mockup y un hilo de un píxel sobre la tarjeta destacada. Todo lo demás es blanco y gris. */

body.cine{
  --c-bg:#0A0A0B;
  --c-bg-2:#0F0F11;
  --c-panel:#141416;
  --c-panel-2:#19191C;
  --c-surface:rgba(255,255,255,.035);
  --c-surface-2:rgba(255,255,255,.065);
  --c-line:rgba(255,255,255,.08);
  --c-line-2:rgba(255,255,255,.17);
  --c-txt:#F4F2EE;
  --c-txt-2:rgba(244,242,238,.68);
  --c-txt-3:rgba(244,242,238,.46);
  --c-gold:#C9A84C;
  --c-gold-soft:rgba(201,168,76,.16);
  --c-ok:#34D399;
  --c-warn:#FBBF24;
  --c-ease:cubic-bezier(0.16,1,0.3,1);
}
html:not(.nx-portal) body.cine{background:var(--c-bg);color:var(--c-txt)}
html:not(.nx-portal) body.cine ::selection{background:rgba(201,168,76,.3)}
html:not(.nx-portal) body.cine :where(a,button,[tabindex],summary):focus-visible{outline-color:var(--c-gold)}

/* ─── Navbar: cristal oscuro. Sube de opacidad al hacer scroll (la clase ya la pone landing.js). ─── */
html:not(.nx-portal) body.cine #navbar{
  background:rgba(14,14,16,.5);border-color:var(--c-line);box-shadow:none;
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
}
html:not(.nx-portal) body.cine #navbar.scrolled{background:rgba(14,14,16,.82);box-shadow:0 10px 40px rgba(0,0,0,.35)}
html:not(.nx-portal) body.cine .brand-word{color:var(--c-txt)}

html:not(.nx-portal) body.cine .nav-links a{color:var(--c-txt-2);font-weight:500}
html:not(.nx-portal) body.cine .nav-links a:hover{color:var(--c-txt)}
html:not(.nx-portal) body.cine .nav-links a::after{background:var(--c-gold)}
html:not(.nx-portal) body.cine .btn-nav{background:var(--c-txt);color:#0A0A0B;box-shadow:none;font-weight:600}
html:not(.nx-portal) body.cine .btn-nav:hover{background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.4)}
/* «Agenda una demo» lleva el mismo círculo negro con flecha que los botones del hero. El alto no
   cambia: el relleno se recorta lo que mide el círculo, y la píldora sigue midiendo lo de antes. */
html:not(.nx-portal) body.cine .btn-nav.con-ico{display:inline-flex;align-items:center;gap:.55rem;padding:.35rem .35rem .35rem 1.1rem}
/* …pero en el teléfono la barra no lo lleva: `app.css` lo esconde a ≤768 (el botón vive en el menú) y
   el `inline-flex` de arriba le ganaría a ese `display:none`. */
@media(max-width:768px){html:not(.nx-portal) body.cine .btn-nav.con-ico{display:none}}
html:not(.nx-portal) body.cine .btn-nav .btn-ico{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#0A0A0B;color:var(--c-txt);font-size:.8rem;transition:transform .3s var(--c-ease)}
html:not(.nx-portal) body.cine .btn-nav:hover .btn-ico{transform:translate(2px,-1px) scale(1.06)}
html:not(.nx-portal) body.cine .ham-line{background:var(--c-txt)}

/* ─── Botones: el primario es blanco con tinta oscura, como en la referencia. ─── */
html:not(.nx-portal) body.cine .btn-primary,html:not(.nx-portal) body.cine .btn-indigo{background:var(--c-txt);color:#0A0A0B;box-shadow:none;font-weight:600}
html:not(.nx-portal) body.cine .btn-primary:hover,html:not(.nx-portal) body.cine .btn-indigo:hover{background:#fff;transform:translateY(-1px);box-shadow:0 14px 34px rgba(0,0,0,.45)}
html:not(.nx-portal) body.cine .btn-primary .btn-ico,html:not(.nx-portal) body.cine .btn-indigo .btn-ico{background:#0A0A0B;color:var(--c-txt)}
html:not(.nx-portal) body.cine .btn-ghost{background:transparent;border-color:var(--c-line-2);color:var(--c-txt);font-weight:500;-webkit-backdrop-filter:none;backdrop-filter:none}
html:not(.nx-portal) body.cine .btn-ghost:hover{background:var(--c-surface-2);border-color:rgba(255,255,255,.32)}

/* ─── Cabeceras de sección: eyebrow en texto plano (sin píldora ni punto), titular a dos tonos
   (gris → blanco en el `.g`). ─── */
html:not(.nx-portal) body.cine .eyebrow{
  display:block;font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--c-txt-3);background:none;border:0;padding:0;margin-bottom:1.25rem;
}
html:not(.nx-portal) body.cine .eyebrow.on-dark{color:var(--c-txt-3)}
/* Los ids de sección (#features, #how, #how.on-light, .page-head) fijan su propio color de título
   en app.css y le ganan a una clase: se nombran uno a uno. */
html:not(.nx-portal) body.cine .sec-title,html:not(.nx-portal) body.cine #features .sec-title,html:not(.nx-portal) body.cine #how .sec-title,html:not(.nx-portal) body.cine #how.on-light .sec-title{font-weight:500;letter-spacing:-.03em;line-height:1.06;color:var(--c-txt-2)}
html:not(.nx-portal) body.cine .sec-title .g,
html:not(.nx-portal) body.cine #features .sec-title .g,
html:not(.nx-portal) body.cine #how .sec-title .g,
html:not(.nx-portal) body.cine #how.on-light .sec-title .g{
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:var(--c-txt);color:var(--c-txt);
}
html:not(.nx-portal) body.cine .sec-sub{color:var(--c-txt-2)}
html:not(.nx-portal) body.cine .sec-sub b,html:not(.nx-portal) body.cine #features .sec-sub b,html:not(.nx-portal) body.cine #how .sec-sub b,html:not(.nx-portal) body.cine #how.on-light .sec-sub b{
  background:none;-webkit-text-fill-color:var(--c-txt);color:var(--c-txt);font-weight:600;
}

/* ─── Hero: la foto manda. Texto a la izquierda; a la derecha la foto entra a sangre con el
   mockup flotando ENCIMA (cristal oscuro), y se funde al fondo por la izquierda (para que el
   titular se lea) y por abajo. La foto es más alta que la sección a propósito: el parallax la
   mueve. ─── */
html:not(.nx-portal) body.cine #hero{background:var(--c-bg);padding:7rem 0 6rem;isolation:isolate}
html:not(.nx-portal) body.cine #hero .hero-orb{display:none}
html:not(.nx-portal) body.cine .hero-photo{
  position:absolute;left:0;top:-14%;width:100%;height:128%;object-fit:cover;object-position:68% 50%;
  z-index:0;transform-origin:62% 55%;will-change:transform;
}
html:not(.nx-portal) body.cine #hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--c-bg) 0%,rgba(10,10,11,.95) 26%,rgba(10,10,11,.7) 50%,rgba(10,10,11,.2) 76%,rgba(10,10,11,.04) 100%);
}
html:not(.nx-portal) body.cine #hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,11,.6) 0%,rgba(10,10,11,0) 24%,rgba(10,10,11,0) 56%,var(--c-bg) 100%);
}
html:not(.nx-portal) body.cine .hero-inner{grid-template-columns:1fr 1fr;gap:3rem;z-index:2}
/* El mockup se sale un poco por la derecha, como en la referencia: #hero lo recorta. */
html:not(.nx-portal) body.cine .hero-mockup{margin-right:-14%}
/* Las insignias se apartan de la pantalla: sobre una captura real taparían la interfaz.
   Y son de CRISTAL, no de papel blanco: `app.css` las pinta `background:#fff` para el landing
   claro de antes, y sobre la foto oscura ese rectángulo blanco es lo único de la pieza que no
   pertenece a la escena. Aquí pasan al mismo material que el marco del mockup —fondo translúcido,
   desenfoque de fondo, borde de un pelo— y el texto se invierte a los tonos claros de la piel. */
html:not(.nx-portal) body.cine .float-badge.b1{top:-40px;left:-40px}
html:not(.nx-portal) body.cine .float-badge.b2{bottom:-36px;right:10%}
html:not(.nx-portal) body.cine .float-badge{
  background:rgba(20,20,22,.55);border:1px solid var(--c-line-2);
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(18px) saturate(120%);backdrop-filter:blur(18px) saturate(120%);
}
html:not(.nx-portal) body.cine .float-badge .fb-t{color:var(--c-txt-3)}
html:not(.nx-portal) body.cine .float-badge .fb-v{color:var(--c-txt);font-weight:600}
/* La ficha de países lista cinco nombres donde antes había tres siglas, y la ficha no tiene ancho:
   crece con su texto hasta salirse del mockup por la derecha. Se le pone tope y se la deja partir. */
html:not(.nx-portal) body.cine .float-badge.b2 .fb-v{max-width:22ch;font-size:.9rem;line-height:1.3}
/* El icono llevaba su color de fondo EN LÍNEA en el HTML (`style="background:rgba(...)"`), que le
   gana a cualquier clase: se neutraliza con la capa de cristal encima, no peleando por el fondo. */
html:not(.nx-portal) body.cine .float-badge .fb-ico{
  background:var(--c-surface-2)!important;border:1px solid var(--c-line);
}
/* Neo asomándose (solo en /neo/), arriba a la derecha de la captura. Su borde izquierdo viene
   recto (la figura está cortada ahí): se apoya EXACTO en el borde derecho del marco, como si lo
   agarrara, y va por encima (z 2) para que la sombra del marco no le caiga en la cara.
   Sin sombra propia (decisión del usuario, 2026-09-17). Decorativo: no recibe clics. */
html:not(.nx-portal) body.cine .hero-mockup .mock-shell{z-index:1}
html:not(.nx-portal) body.cine .neo-asomado{
  position:absolute;z-index:2;top:22px;right:-138px;width:140px;height:auto;pointer-events:none;
}
/* La captura se corre hacia el texto (le come parte del hueco de 3rem) y se encoge lo justo para que
   Neo quepa dentro de la pantalla. Medido a 1100/1280/1440/1728/1920. En tableta y teléfono (≤1024)
   la captura va a todo el ancho y no queda sitio al lado: ahí Neo no sale. */
/* Tableta y teléfono: Neo sigue asomado, más pequeño, y la captura le deja sitio (≤768 en cine-movil.css). */
@media (max-width:1024px){html:not(.nx-portal) body.cine .neo-asomado{top:10px;right:-60px;width:62px}}
@media (min-width:1025px){html:not(.nx-portal) body.cine .hero-mockup:has(.neo-asomado){margin-left:-2.25rem}}
@media (min-width:1600px) and (max-width:1699px){html:not(.nx-portal) body.cine .hero-mockup:has(.neo-asomado){margin-right:0}}
@media (min-width:1440px) and (max-width:1599px){html:not(.nx-portal) body.cine .hero-mockup:has(.neo-asomado){margin-right:6%}}
@media (min-width:1025px) and (max-width:1439px){
  html:not(.nx-portal) body.cine .hero-mockup:has(.neo-asomado){margin-right:14%}
  html:not(.nx-portal) body.cine .neo-asomado{top:16px;right:-108px;width:110px}
}
@media (min-width:1025px) and (max-width:1199px){html:not(.nx-portal) body.cine .hero-mockup:has(.neo-asomado){margin-right:20%}}
html:not(.nx-portal) body.cine .hero-h1{font-weight:500;letter-spacing:-.035em;line-height:1.04;color:var(--c-txt)}
html:not(.nx-portal) body.cine .hero-h1 .g{background:linear-gradient(120deg,#E6D6A4 0%,#C9A84C 55%,#D9B85F 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
html:not(.nx-portal) body.cine .hero-p{color:var(--c-txt-2);max-width:520px}
html:not(.nx-portal) body.cine .hero-kicker{color:var(--c-txt-3)}
html:not(.nx-portal) body.cine .hero-kicker b{color:var(--c-txt);font-weight:600}
html:not(.nx-portal) body.cine .hero-trust{color:var(--c-txt-3)}
html:not(.nx-portal) body.cine .hero-trust-ico{background:var(--c-surface-2);border:1px solid var(--c-line);color:var(--c-txt-2)}
/* Encuadre por foto. `--flip` sirve la imagen en espejo: en la de la home la sala iluminada está a
   la izquierda del original y aquí tiene que caer a la derecha, bajo el mockup. Ojo: el Ken Burns de
   landing.js anima scaleX/scaleY por separado y respeta el signo. */
html:not(.nx-portal) body.cine .hero-photo--flip{transform:scaleX(-1);transform-origin:50% 50%}
/* La de la home entra MÁS CERCA que las otras dos: la foto original traía una franja negra
   muerta a la derecha —el archivo ya viene recortado ahí— y aun recortada, a 128% de alto se
   veía el marco entero, con la ventana terminando dentro del cuadro. Con 150% el `cover` recorta
   más ancho y la escena llena la sección de borde a borde. `top` se ajusta a la mitad de lo que
   sobra (150-100)/2 para que el encuadre vertical no se mueva. */
html:not(.nx-portal) body.cine .hero-photo--nexel{top:-25%;height:150%;object-position:50% 42%;filter:brightness(1.22) contrast(1.04)}
html:not(.nx-portal) body.cine .hero-photo--copilot{object-position:44% 38%;filter:brightness(.86)}

/* ─── El mockup: ventana de la app sobre la foto, con una CAPTURA del portal real dentro (datos de
   muestra, ver img/hero/FUENTES.md). En la home el portal va "vestido" de Nexel OS: mismos huesos,
   módulos renombrados. Entra inclinado en 3D, le pasa un brillo una vez y sigue al ratón. ─── */
html:not(.nx-portal) body.cine .hero-mockup{perspective:1400px}
/* El marco es la VENTANA de la app, no un cristal alrededor (referencia: Linear, 2026-09-17): la
   captura llega hasta el borde, recortada por las esquinas redondas, con un filo de un pixel y una
   sombra suave. Sin relleno ni desenfoque: la app se ve nativa, no enmarcada. */
html:not(.nx-portal) body.cine .mock-shell{
  position:relative;overflow:hidden;background:var(--c-panel);border:1px solid rgba(255,255,255,.12);
  border-radius:.9rem;padding:0;box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.4);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  /* Sin `will-change`: congela la capa al tamaño de la entrada (escala .94) y la captura se ve blanda. */
  transform-style:preserve-3d;
}
html:not(.nx-portal) body.cine .mock-shell::after{
  content:"";position:absolute;inset:-40% -60%;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.09) 50%,transparent 58%);
  transform:translateX(-70%);animation:mkShine 1.9s cubic-bezier(.4,0,.2,1) 1.6s 1 both;
}
@keyframes mkShine{to{transform:translateX(70%)}}
html:not(.nx-portal) body.cine .mock-img{display:block;width:100%;height:auto;border-radius:0;border:0;background:var(--c-panel)}

/* "Nuestra solución": la misma captura-en-marco del hero, a todo el ancho de la sección. Entra
   inclinada desde abajo (landing.js) y se queda plana. */
html:not(.nx-portal) body.cine .feat-shot{max-width:1080px;margin:1rem auto 0;perspective:1600px}
/* «La solución» de /neo/ (2026-09-17): una MacBook (foto) y un iPhone (CSS), lado a lado y apoyados
   en la misma línea, con Neo de brazos cruzados a la izquierda y Neo recostado en el iPhone a la
   derecha. Las medidas van en `cqw` (ancho del propio aparato): el marco escala con la captura. */
/* `left` recentra el grupo ENTERO (aparatos + Neo): el Neo del iPhone sobresale más que el de la
   MacBook y el conjunto se veía cargado a la derecha. Medido en cada ancho (2026-09-17). */
html:not(.nx-portal) body.cine .feat-duo{position:relative;left:-40px;width:100%;box-sizing:border-box;max-width:1000px;display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:1.5rem;align-items:end}
html:not(.nx-portal) body.cine .dev{position:relative;z-index:1;container-type:inline-size}
/* `#features` es flex y su `.container` toma el ancho de lo que lleva dentro; un contenedor con
   `container-type` no aporta ancho propio, así que sin esto los dos aparatos se encogían. */
html:not(.nx-portal) body.cine .container:has(> .feat-duo){width:100%}
/* MacBook: foto del aparato con fondo y pantalla transparentes (`mac-marco-*.webp`). La captura va
   DETRÁS, en el hueco de la pantalla (medido sobre la foto: 1103×653 px en 1471×956), con un pixel de
   sobra por lado para que el borde negro la tape sin dejar rendija. La pantalla es un 4 % más angosta que
   la captura: se ajusta entera (`fill`) en vez de recortar, que cortaba el logo o la campana. */
/* La sombra va en el aparato entero, no en la foto: en la foto se colaba por el hueco de la pantalla
   y dejaba una silueta sobre la captura. */
html:not(.nx-portal) body.cine .dev-mac,html:not(.nx-portal) body.cine .dev-iphone{filter:drop-shadow(0 30px 50px rgba(0,0,0,.5))}
html:not(.nx-portal) body.cine .dev-mac-marco{position:relative;z-index:1;display:block;width:100%;height:auto}
html:not(.nx-portal) body.cine .dev-mac-pantalla{position:absolute;z-index:0;left:12.44%;top:4.08%;width:75.12%;height:68.51%;overflow:hidden;background:#0b0b0c}
html:not(.nx-portal) body.cine .dev-mac-pantalla .mock-img{width:100%;height:100%;object-fit:fill;border-radius:0;border:0}
/* iPhone: foto del aparato con fondo y pantalla transparentes (`iphone-marco-*.webp`, 773×1601 con los
   botones). La pantalla va DETRÁS del hueco (684×1536 px) y la isla la pone la foto. Encima de la
   captura, una barra de estado dibujada (hora, señal, batería) a la altura de la isla. La captura es la
   app al 80 % de su tamaño (viewport más ancho), para que se lea limpia dentro del teléfono.
   `cqw` = ancho de la foto. */
html:not(.nx-portal) body.cine .dev-iphone-marco{position:relative;z-index:1;display:block;width:100%;height:auto}
html:not(.nx-portal) body.cine .dev-iphone-pantalla{position:absolute;z-index:0;left:5.69%;top:1.99%;width:88.74%;height:96.1%;overflow:hidden;border-radius:11cqw;background:#1b1b1b}
html:not(.nx-portal) body.cine .dev-iphone-pantalla .mock-img{display:block;width:100%;height:auto;border-radius:0}
html:not(.nx-portal) body.cine .dev-iphone-barra{position:relative;height:11.64cqw;color:#f2f2f2;font:600 3.9cqw/1 -apple-system,"SF Pro Text",Inter,sans-serif}
html:not(.nx-portal) body.cine .dev-iphone-hora{position:absolute;left:15cqw;top:6.1cqw;transform:translate(-50%,-50%)}
html:not(.nx-portal) body.cine .dev-iphone-iconos{position:absolute;right:14.7cqw;top:6.1cqw;transform:translate(50%,-50%);display:flex;align-items:center;gap:1.2cqw}
html:not(.nx-portal) body.cine .dev-iphone-iconos svg:first-child{width:4.2cqw;height:2.9cqw}
html:not(.nx-portal) body.cine .dev-iphone-iconos svg:last-child{width:6.3cqw;height:2.9cqw}
html:not(.nx-portal) body.cine .dev-iphone-inicio{position:absolute;left:50%;bottom:1.8cqw;width:31cqw;height:1.2cqw;border-radius:1cqw;background:rgba(255,255,255,.75);transform:translateX(-50%)}
html:not(.nx-portal) body.cine .neo-brazos,html:not(.nx-portal) body.cine .neo-telefono{position:absolute;z-index:3;bottom:-10px;width:150px;height:auto;pointer-events:none}
/* Neo de brazos cruzados pegado a la tapa: la pantalla de la MacBook empieza al 12,5 % de su ancho, y el
   ancho de la MacBook es el de la rejilla menos la columna del iPhone y el hueco. */
html:not(.nx-portal) body.cine .neo-brazos{left:calc((100% - 230px - 1.5rem) * .125 - 150px + 16px)}
html:not(.nx-portal) body.cine .neo-telefono{right:-118px;bottom:-6px}
@media (max-width:1279px){
  html:not(.nx-portal) body.cine .feat-duo{left:-32px;max-width:860px;grid-template-columns:minmax(0,1fr) 190px;gap:1.25rem}
  html:not(.nx-portal) body.cine .neo-brazos,html:not(.nx-portal) body.cine .neo-telefono{width:118px}
  html:not(.nx-portal) body.cine .neo-brazos{left:calc((100% - 190px - 1.25rem) * .125 - 118px + 12px)}
  html:not(.nx-portal) body.cine .neo-telefono{right:-86px}
}
@media (max-width:1100px){
  html:not(.nx-portal) body.cine .feat-duo{left:-16px;max-width:none;padding-inline:84px}
  html:not(.nx-portal) body.cine .neo-brazos{left:calc(84px + (100% - 168px - 190px - 1.25rem) * .125 - 118px + 12px)}
  html:not(.nx-portal) body.cine .neo-telefono{right:4px}
}
/* Teléfono y tableta chica (2026-09-17): igual que en computadora —MacBook e iPhone lado a lado, cada
   Neo pegado a su aparato—, todo más chico para que quepa. `--tel` es el ancho del iPhone; el Neo de
   brazos cruzados se calcula contra el 12,5 % de la MacBook, como arriba. */
@media (max-width:768px){
  html:not(.nx-portal) body.cine .feat-duo{--tel:clamp(66px,19vw,150px);--nb:clamp(44px,12vw,96px);--nt:clamp(46px,12.5vw,100px);
    left:0;grid-template-columns:minmax(0,1fr) var(--tel);gap:8px;padding-inline:34px calc(var(--nt) - 4px)}
  html:not(.nx-portal) body.cine .neo-brazos,html:not(.nx-portal) body.cine .neo-telefono{bottom:-3px}
  html:not(.nx-portal) body.cine .neo-brazos{width:var(--nb);left:calc(34px + (100% - 34px - var(--nt) + 4px - var(--tel) - 8px) * .125 - var(--nb) + 6px)}
  html:not(.nx-portal) body.cine .neo-telefono{width:var(--nt);right:4px}
}

/* ─── Cifras ─── */
html:not(.nx-portal) body.cine #stats{background:transparent;border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line);padding:3.5rem 0}
html:not(.nx-portal) body.cine .stat:not(:last-child)::after{background:var(--c-line)}
html:not(.nx-portal) body.cine .stat-n{background:none;-webkit-text-fill-color:var(--c-txt);color:var(--c-txt);font-weight:500}
html:not(.nx-portal) body.cine .stat-l{color:var(--c-txt-3);font-weight:400}

/* ─── "Te suena familiar": de rejilla de tarjetas a página
   editorial. La cabecera se queda fija a la izquierda y los puntos van a la derecha como una lista
   de filas con un pelo entre ellas: el icono a un lado, título y texto al otro. Sin cajas. Al pasar
   el ratón, la línea de arriba se enciende en oro de izquierda a derecha. ─── */
html:not(.nx-portal) body.cine #problem{background:var(--c-bg)}
html:not(.nx-portal) body.cine #problem::before,html:not(.nx-portal) body.cine #problem::after{display:none}
html:not(.nx-portal) body.cine #problem .container{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr);gap:2rem 5rem;align-items:start}
html:not(.nx-portal) body.cine #problem .sec-head-center{text-align:left;margin:0;max-width:none;position:sticky;top:7.5rem}
html:not(.nx-portal) body.cine #problem .sec-head-center .sec-sub{margin-left:0;margin-right:0}
html:not(.nx-portal) body.cine #problem .prob-grid{display:flex;flex-direction:column;gap:0;margin:0;max-width:none;border-bottom:1px solid var(--c-line)}
html:not(.nx-portal) body.cine .prob-card{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:1.5rem;align-items:start;background:none;border:0;border-top:1px solid var(--c-line);border-radius:0;box-shadow:none;padding:1.75rem 0;transition:none;overflow:visible}
html:not(.nx-portal) body.cine .prob-card::before{display:block;content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--c-gold);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--c-ease);opacity:.85}
html:not(.nx-portal) body.cine .prob-card:hover{transform:none;box-shadow:none;background:none;border-color:var(--c-line)}
html:not(.nx-portal) body.cine .prob-card:hover::before{transform:scaleX(1)}
html:not(.nx-portal) body.cine .prob-ico{grid-row:1/span 4;width:52px;height:52px;border-radius:.85rem;background:var(--c-surface-2);border:1px solid var(--c-line);color:var(--c-txt);box-shadow:none;margin:0}
html:not(.nx-portal) body.cine .prob-card:hover .prob-ico{transform:none}
html:not(.nx-portal) body.cine .prob-ico svg{width:22px;height:22px}
html:not(.nx-portal) body.cine .prob-h{color:var(--c-txt);font-weight:600;font-size:1.15rem;margin:.35rem 0 .4rem}
html:not(.nx-portal) body.cine .prob-d{color:var(--c-txt-2);max-width:54ch}

html:not(.nx-portal) body.cine #how,html:not(.nx-portal) body.cine #how.on-light{background:var(--c-bg);color:var(--c-txt);min-height:auto;padding:7rem 0}
html:not(.nx-portal) body.cine #how::before{display:none}
html:not(.nx-portal) body.cine #how .sec-sub,html:not(.nx-portal) body.cine #how.on-light .sec-sub{color:var(--c-txt-2)}
/* "Cómo funciona": tres columnas sin caja, apoyadas en una sola línea de arriba con una marca de
   oro por paso, separadas por un pelo vertical, y con el número grande y fantasma detrás. */
html:not(.nx-portal) body.cine .steps{gap:0;margin-top:2.5rem;border-top:1px solid var(--c-line)}
html:not(.nx-portal) body.cine .steps::before{display:none}
html:not(.nx-portal) body.cine .step,html:not(.nx-portal) body.cine #how.on-light .step{position:relative;background:none;border:0;border-radius:0;box-shadow:none;padding:2.5rem 2rem 2rem 0;transition:none;overflow:hidden}
/* OJO con el gemelo `#how.on-light`: `app.css` trae `#how.on-light .step` (un id), así que la
   regla de arriba —`#how.on-light .step{border:0;padding:…}`— le gana a este `.step+.step` de
   solo clases y en la HOME los pasos se quedaban sin tabique y sin la sangría de 2rem: los
   iconos caían pegados al borde de su columna y desalineados de su propia rayita dorada
   (que sí lleva el `left:2rem`). En Nexel Hub, que no lleva `on-light`, se veía bien. */
html:not(.nx-portal) body.cine .step+.step,
html:not(.nx-portal) body.cine #how.on-light .step+.step{border-left:1px solid var(--c-line);padding-left:2rem}
html:not(.nx-portal) body.cine .step::before{content:"";position:absolute;top:0;left:0;width:56px;height:2px;background:var(--c-gold)}
html:not(.nx-portal) body.cine .step+.step::before{left:2rem}
html:not(.nx-portal) body.cine .step:hover{transform:none;box-shadow:none;border-color:var(--c-line)}
html:not(.nx-portal) body.cine .step-ico{width:52px;height:52px;border-radius:.85rem;background:var(--c-surface-2);border:1px solid var(--c-line);color:var(--c-txt);box-shadow:0 0 0 8px rgba(201,168,76,.05);margin-bottom:1.5rem}
html:not(.nx-portal) body.cine .step-ico svg{width:22px;height:22px}
html:not(.nx-portal) body.cine .step-h{color:var(--c-txt);font-weight:600;font-size:1.25rem;position:relative}
html:not(.nx-portal) body.cine .step-d,html:not(.nx-portal) body.cine #how.on-light .step-d{color:var(--c-txt-2);position:relative}
html:not(.nx-portal) body.cine .step-badge,html:not(.nx-portal) body.cine #how.on-light .step-badge{top:.9rem;right:.5rem;font-family:var(--font-head);font-size:4.5rem;font-weight:500;letter-spacing:-.05em;line-height:1;color:rgba(244,242,238,.07);pointer-events:none}

/* ─── Comparativo (#centraliza, Copilot) ─── */
html:not(.nx-portal) body.cine .cmp-table{background:var(--c-surface);border-color:var(--c-line);border-radius:1rem;box-shadow:none}
html:not(.nx-portal) body.cine .cmp-row+.cmp-row{border-top-color:var(--c-line)}
html:not(.nx-portal) body.cine .cmp-feat{color:var(--c-txt);font-weight:500}
html:not(.nx-portal) body.cine .cmp-colhead .cmp-feat,html:not(.nx-portal) body.cine .cmp-colhead .cmp-c{color:var(--c-txt-3);background:transparent}
html:not(.nx-portal) body.cine .cmp-c.no{color:var(--c-txt-3)}
html:not(.nx-portal) body.cine .cmp-c.mid{color:var(--c-warn)}
html:not(.nx-portal) body.cine .cmp-c.ok{color:var(--c-ok)}
/* La columna de Neo es una franja continua: la celda llena el alto de la fila aunque el texto ocupe dos renglones. */
html:not(.nx-portal) body.cine .cmp-us{background:rgba(201,168,76,.05);align-self:stretch}
html:not(.nx-portal) body.cine .cmp-colhead .cmp-us{color:var(--c-gold);background:rgba(201,168,76,.1)}
html:not(.nx-portal) body.cine .cmp-row .cmp-us{color:var(--c-txt)}
html:not(.nx-portal) body.cine .cmp-us.no{color:var(--c-txt-3)}

/* ─── Precios: la tarjeta destacada se distingue por el borde y un hilo dorado arriba, no por
   un degradado. Los CTA siguen el mismo par blanco/tinta del resto del sitio. ─── */
html:not(.nx-portal) body.cine #pricing{background:var(--c-bg);min-height:auto;padding:7rem 0}
html:not(.nx-portal) body.cine .price-toggle{background:var(--c-surface);border-color:var(--c-line)}
html:not(.nx-portal) body.cine .pt-opt{color:var(--c-txt-2);font-weight:500}
html:not(.nx-portal) body.cine .pt-opt.on{background:var(--c-txt);color:#0A0A0B;box-shadow:none}
html:not(.nx-portal) body.cine .pt-save{background:rgba(16,185,129,.16);color:var(--c-ok)}
html:not(.nx-portal) body.cine .pt-opt.on .pt-save{background:rgba(10,10,11,.12);color:#0A0A0B}
html:not(.nx-portal) body.cine .price-card{border-radius:1.25rem;padding:2.25rem}
html:not(.nx-portal) body.cine .price-free{background:var(--c-surface);border:1px solid var(--c-line)}
html:not(.nx-portal) body.cine .price-pro{background:var(--c-panel);border:1px solid var(--c-line-2);box-shadow:none;color:var(--c-txt)}
html:not(.nx-portal) body.cine .price-free:hover,html:not(.nx-portal) body.cine .price-pro:hover{transform:none}
html:not(.nx-portal) body.cine .price-pro::before{top:0;right:12%;left:12%;width:auto;height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,.75),transparent)}
html:not(.nx-portal) body.cine .price-free .price-badge{color:var(--c-txt-2);background:var(--c-surface-2)}
html:not(.nx-portal) body.cine .price-pro .price-badge{color:#0A0A0B;background:var(--grad-glow)}
/* Las tres etiquetas doradas, no solo la de Pro. La distinción de arriba separaba al destacado del
   resto; con los tres botones iguales esa jerarquía ya no la lleva la etiqueta, y una fila de tres
   colores distintos no se leía como una familia. Acotada a `.price-grid-4` a propósito: el Hub
   comparte las clases `.price-*` con DOS tarjetas y allí la jerarquía vieja sigue en pie. */
html:not(.nx-portal) body.cine .price-grid-4 .price-badge{color:#0A0A0B;background:var(--grad-glow)}
html:not(.nx-portal) body.cine .price-name{color:var(--c-txt);font-weight:600}
html:not(.nx-portal) body.cine .price-amt,html:not(.nx-portal) body.cine .price-pro .price-amt,
html:not(.nx-portal) body.cine .price-amt-consulta{font-weight:500;background:none;-webkit-text-fill-color:var(--c-txt);color:var(--c-txt)}
/* Las tres listas arrancan a la misma altura: «Hablemos» es más bajo que un precio con «/ mes»,
   así que la fila del precio reserva el alto del número y centra la palabra en él (2026-09-17). */
html:not(.nx-portal) body.cine .price-grid-4 .price-tag{min-height:1.27em;font-size:3.2rem}
html:not(.nx-portal) body.cine .price-grid-4 .price-tag:has(.price-amt-consulta){align-items:center}
/* Los créditos de la semana de cada plan, bajo el precio (2026-09-21), como en la home. */
html:not(.nx-portal) body.cine .price-creditos{margin:.25rem 0 .9rem;font-size:.9rem;color:var(--c-gold);font-variant-numeric:tabular-nums}
/* Cuatro columnas (Neo, 2026-09-18): cada tarjeta mide ~280px en el contenedor de 1200px, así que
   se recorta el aire lateral y la cifra baja un escalón para que «$2,990 / año» quepa en un renglón.
   Solo mientras son cuatro de fondo; en dos por dos (≤1180px) vuelven las medidas de siempre. */
@media(min-width:1181px){
  html:not(.nx-portal) body.cine .price-grid-4 .price-card{padding:2rem 1.5rem}
  html:not(.nx-portal) body.cine .price-grid-4 .price-tag{font-size:2.6rem}
  html:not(.nx-portal) body.cine .price-grid-4 .price-amt{font-size:2.6rem}
  html:not(.nx-portal) body.cine .price-grid-4 .price-amt-consulta{font-size:2.2rem}
  /* «Un espacio de trabajo compartido» parte en dos renglones a este ancho: se reservan dos en las
     cuatro para que las cifras queden a la misma altura. */
  html:not(.nx-portal) body.cine .price-grid-4 .price-seats{line-height:1.4;min-height:2.8em}
}
html:not(.nx-portal) body.cine .price-per,html:not(.nx-portal) body.cine .price-pro .price-per{color:var(--c-txt-3)}
html:not(.nx-portal) body.cine .price-free .price-feat,html:not(.nx-portal) body.cine .price-pro .price-feat{color:var(--c-txt-2)}
html:not(.nx-portal) body.cine .price-check,html:not(.nx-portal) body.cine .price-pro .price-check{background:rgba(16,185,129,.16);color:var(--c-ok)}
/* El botón fantasma. `price-cta-contacto` —el de «Hablemos», del plan sin precio— entra en la misma
   regla y no en una suya: es el MISMO botón, y separarlos fue justo lo que lo dejó blanco relleno
   sobre la tarjeta oscura, compitiendo con el destacado de Pro. Copiar el markup no copia la piel
   que lo mira. */
html:not(.nx-portal) body.cine .price-cta-free,
html:not(.nx-portal) body.cine .price-cta-contacto{background:transparent;color:var(--c-txt);border-color:var(--c-line-2)}
html:not(.nx-portal) body.cine .price-cta-free:hover,
html:not(.nx-portal) body.cine .price-cta-contacto:hover{border-color:var(--c-txt);color:var(--c-txt)}
html:not(.nx-portal) body.cine .price-cta-pro{background:var(--c-txt);color:#0A0A0B;box-shadow:none}
html:not(.nx-portal) body.cine .price-cta-pro:hover{background:#fff}
/* …salvo en Copilot, donde los TRES son el mismo botón blanco. Lo de arriba sigue mandando en el
   Hub, que es quien conserva la jerarquía de un destacado contra dos fantasmas. */
html:not(.nx-portal) body.cine .price-grid-4 .price-cta-free,
html:not(.nx-portal) body.cine .price-grid-4 .price-cta-contacto{background:var(--c-txt);color:#0A0A0B;border-color:transparent}
html:not(.nx-portal) body.cine .price-grid-4 .price-cta-free:hover,
html:not(.nx-portal) body.cine .price-grid-4 .price-cta-contacto:hover{background:#fff;color:#0A0A0B;border-color:transparent}
html:not(.nx-portal) body.cine .price-free .price-seats,html:not(.nx-portal) body.cine .price-pro .price-seats{color:var(--c-txt-2)}
html:not(.nx-portal) body.cine .price-free .price-annual-note,html:not(.nx-portal) body.cine .price-pro .price-annual-note{color:var(--c-txt-2)}
html:not(.nx-portal) body.cine .price-free .price-annual-note b,html:not(.nx-portal) body.cine .price-pro .price-annual-note b{color:var(--c-txt)}

/* ─── Rótulos gemelos: el largo para el escritorio, el corto para el teléfono ───
   Las tarjetas de precios y el comparativo van a DOS COLUMNAS estrechas en un teléfono, y ahí
   una frase de nueve palabras no es una frase: son cuatro renglones. Con seis features por
   tarjeta y nueve filas de comparativo, eso es lo que hacía que las dos secciones midieran más
   de una pantalla cada una. El texto completo no se toca —es el que lee Google y el que se ve
   en un monitor—; al lado va su gemelo corto, oculto aquí y encendido en `cine-movil.css` a
   partir de ≤640. Los dos viven en el HTML a propósito: cambiar texto por CSS (`content`) lo
   dejaría fuera del árbol de accesibilidad y del buscador. */
html:not(.nx-portal) body.cine .pf-mini{display:none}

html:not(.nx-portal) body.cine .band-soft{background:var(--c-bg)}
html:not(.nx-portal) body.cine .tst-cta{background:var(--c-panel);border:1px solid var(--c-line-2);border-radius:1.25rem;box-shadow:none;color:var(--c-txt)}
html:not(.nx-portal) body.cine .tst-cta::before{content:"";position:absolute;top:0;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,.75),transparent)}
html:not(.nx-portal) body.cine .tst-cta h3{font-weight:500}
html:not(.nx-portal) body.cine .tst-cta p{color:var(--c-txt-2)}
html:not(.nx-portal) body.cine .tst-cta .btn-primary{box-shadow:none}
/* Neo sentado en el borde de arriba del recuadro de la demo (solo /neo/). La cadera queda sobre el
   borde (~66 % de la figura por encima) y las piernas cuelgan por delante; por eso el recuadro deja
   de recortar lo que sobresale, gana aire arriba para las piernas y se separa de la tabla de arriba. */
html:not(.nx-portal) body.cine .tst-cta:has(.neo-sentado){overflow:visible;margin-top:11rem;padding-top:calc(3rem + 56px)}
html:not(.nx-portal) body.cine .neo-sentado{
  position:absolute;z-index:2;left:50%;top:0;width:150px;height:auto;pointer-events:none;
  transform:translate(-50%,-66%);
}

/* ─── FAQ (misma regla para app.css y pages.css: las clases coinciden) ─── */
html:not(.nx-portal) body.cine #faq{background:var(--c-bg)}
html:not(.nx-portal) body.cine .faq-item{background:var(--c-surface);border-color:var(--c-line);border-radius:.85rem}
html:not(.nx-portal) body.cine .faq-item.open{border-color:var(--c-line-2);box-shadow:none}

/* ─── Footer ─── */
html:not(.nx-portal) body.cine footer{background:var(--c-bg);border-top:1px solid var(--c-line);padding:4.5rem 0 2.25rem}
html:not(.nx-portal) body.cine .foot-desc{color:var(--c-txt-3)}
html:not(.nx-portal) body.cine .foot-col h4{color:var(--c-txt-3);letter-spacing:.06em;font-weight:500}
html:not(.nx-portal) body.cine .foot-col a{color:var(--c-txt-2)}
html:not(.nx-portal) body.cine .foot-col a:hover{color:var(--c-txt)}
html:not(.nx-portal) body.cine .foot-bottom{border-top-color:var(--c-line);color:var(--c-txt-3)}

/* ─── Móvil: la foto se lee por debajo del texto, así que el velo pasa a ser vertical. ─── */
@media(max-width:768px){
  /* Hero en una columna: texto, y debajo el mockup a todo el ancho. La foto se queda detrás del
     texto y se funde ANTES de que empiece el mockup, así el cristal se apoya en fondo liso. */
  html:not(.nx-portal) body.cine #hero{padding:5.5rem 0 2.5rem;min-height:auto}
  html:not(.nx-portal) body.cine .hero-inner{grid-template-columns:1fr;gap:1.75rem}
  html:not(.nx-portal) body.cine .hero-photo{top:-8%;height:116%;object-position:62% 32%}
    html:not(.nx-portal) body.cine #hero::before{background:linear-gradient(180deg,rgba(10,10,11,.55) 0%,rgba(10,10,11,.5) 26%,rgba(10,10,11,.88) 52%,var(--c-bg) 66%)}
  html:not(.nx-portal) body.cine #hero::after{display:none}
  html:not(.nx-portal) body.cine .hero-h1{font-size:2.2rem}
  html:not(.nx-portal) body.cine .hero-p{font-size:1.02rem}
  html:not(.nx-portal) body.cine .hero-ctas .btn-primary,html:not(.nx-portal) body.cine .hero-ctas .btn-ghost{width:100%;justify-content:center}
  html:not(.nx-portal) body.cine .hero-mockup{max-width:none;margin:0}
  html:not(.nx-portal) body.cine .mock-shell{border-radius:.7rem;box-shadow:0 20px 50px rgba(0,0,0,.5)}
  html:not(.nx-portal) body.cine .eyebrow{margin-bottom:.9rem}
  html:not(.nx-portal) body.cine #stats{padding:2.5rem 0}
  html:not(.nx-portal) body.cine #features,html:not(.nx-portal) body.cine #how,html:not(.nx-portal) body.cine #pricing{padding:3.5rem 0}
  html:not(.nx-portal) body.cine #problem .container{grid-template-columns:1fr;gap:1.5rem}
  html:not(.nx-portal) body.cine #problem .sec-head-center{position:static}
  html:not(.nx-portal) body.cine .prob-card{padding:1.35rem 0;grid-template-columns:44px minmax(0,1fr);column-gap:1rem}
  html:not(.nx-portal) body.cine .prob-ico{width:44px;height:44px}
  html:not(.nx-portal) body.cine .step,
  html:not(.nx-portal) body.cine #how.on-light .step{padding:1.75rem 0 1.5rem}
  html:not(.nx-portal) body.cine .step+.step,
  html:not(.nx-portal) body.cine #how.on-light .step+.step{border-left:0;border-top:1px solid var(--c-line);padding-left:0}
  html:not(.nx-portal) body.cine .step+.step::before{left:0}
  html:not(.nx-portal) body.cine .tst-cta{padding:2.25rem 1.25rem}
  html:not(.nx-portal) body.cine .tst-cta:has(.neo-sentado){margin-top:8.5rem;padding-top:calc(2.25rem + 64px)}
  html:not(.nx-portal) body.cine .neo-sentado{width:112px}
  html:not(.nx-portal) body.cine footer{padding:3.25rem 0 2rem}
}
@media(prefers-reduced-motion:reduce){
  html:not(.nx-portal) body.cine .hero-photo{transform:none!important}
  html:not(.nx-portal) body.cine .hero-photo--flip{transform:scaleX(-1)!important}
  html:not(.nx-portal) body.cine .prob-card,html:not(.nx-portal) body.cine .step{transition:none}
}