/* ═══════════════════════════════════════════════════════════════════════════════════════
cine-movil.css — el teléfono del SITIO de marketing (las 7 páginas con la piel "cine")
── El contrato ──
Este archivo contiene EXCLUSIVAMENTE bloques `@media (max-width: N)` con N ≤ 1024.
Ninguna regla suelta, nunca. Un navegador a 1440px no evalúa una sola línea de aquí, así
que por construcción NO puede tocar la vista de escritorio. Lo vigila
`tests/test_frontend_responsive.py`, que falla el build si alguien mete una regla fuera de
un media query acotado. Si el cambio es para >1024px, va en `cine.css`.
── El scope, que aquí NO es cosmético ──
Cada regla cuelga de `html:not(.nx-portal) body.cine`, igual que `cine.css`. El scope nació
cuando la home servía el landing Y el portal viejo (`#dashboard`) en el mismo documento; ese
portal se borró el 2026-09-22 y `nx-portal` ya no se pone, pero el prefijo se conserva: cambiarlo
movería la especificidad de cada regla.
── Orden de carga ──
Va DESPUÉS de `cine.css` en las 7 páginas. A igual especificidad gana la última hoja: si
el fuera antes, estas reglas se escribirían y no harían nada.
── Los breakpoints ──
≤1024 tablet: higiene táctil y áreas seguras
≤768 teléfono grande: el hero cambia de orden y las secciones se compactan
≤640 teléfono: precios lado a lado, comparativo que cabe, cifras sin huérfana
≤380 teléfono estrecho: un escalón más de reducción
═══════════════════════════════════════════════════════════════════════════════════════ */
/* ════════════════ ≤1024 — higiene táctil ════════════════
Nada de esto existía en el sitio: se buscó en todo el repo y solo el Hub tenía parte. Son
las cuatro cosas que separan "una web en un teléfono" de "una app". */
@media(max-width:1024px){
/* Android infla por su cuenta el cuerpo de texto de los bloques largos y rompe la escala
tipográfica de la página; esto se lo prohíbe sin impedir el zoom del usuario. */
html:not(.nx-portal) body.cine{
-webkit-text-size-adjust:100%;text-size-adjust:100%;
/* El rebote elástico al final de la página deja ver el fondo del navegador y delata que
no es una app. */
overscroll-behavior-y:none;
}
/* El rectángulo gris que iOS/Android pintan sobre cada enlace al tocarlo. */
html:not(.nx-portal) body.cine :where(a,button,summary,[role=button]){-webkit-tap-highlight-color:transparent}
/* Apaisado con muesca: sin esto el texto se mete debajo del recorte de la cámara. */
html:not(.nx-portal) body.cine .container{
padding-left:max(1.5rem,env(safe-area-inset-left));
padding-right:max(1.5rem,env(safe-area-inset-right));
}
/* La raya de gestos del iPhone se come el último renglón del pie. */
html:not(.nx-portal) body.cine footer{padding-bottom:calc(2.25rem + env(safe-area-inset-bottom))}
/* ── Objetivos táctiles: 44px es el mínimo, no una aspiración ──
Medidos: los enlaces del pie 18px de alto, "Volver al inicio" 17px, la marca 26px y los
del navegador de tablet 18px. El dedo ahí no falla por poco, falla siempre.
Los del pie son `display:block` y van SIN separador en el HTML (`……`): con
`inline-flex` se pondrían en fila y "Nexel CopilotNexel Hub" quedaría pegado en un renglón.
`flex` a secas es de nivel de bloque, así que cada enlace sigue en su línea y solo crece. */
html:not(.nx-portal) body.cine .foot-col a{
display:flex;align-items:center;min-height:44px;margin-bottom:0;
}
html:not(.nx-portal) body.cine .foot-bottom a{
display:inline-flex;align-items:center;min-height:44px;
}
html:not(.nx-portal) body.cine .brand{min-height:44px;display:inline-flex;align-items:center}
/* El navegador de la tablet (769–1024) sigue siendo el de escritorio: seis enlaces de 18px
dentro de una píldora. Crecer su caja subiría el alto de la barra y cambiaría el diseño, así
que el área táctil se agranda con relleno y se devuelve con un margen negativo idéntico: el
dedo gana 44px y la maquetación no se mueve ni un píxel. El subrayado del hover cuelga del
borde inferior de la caja, así que se recoloca lo mismo que creció. */
html:not(.nx-portal) body.cine .nav-links a{padding-block:.8rem;margin-block:-.8rem}
html:not(.nx-portal) body.cine .nav-links a::after{bottom:calc(.8rem - 4px)}
/* "Ingresar" mide 37px y es una píldora con fondo: crecerla se VE. Aquí el área táctil se
extiende con una capa invisible por encima, que no ocupa espacio ni pinta nada. */
html:not(.nx-portal) body.cine .btn-nav{position:relative}
html:not(.nx-portal) body.cine .btn-nav::after{
content:"";position:absolute;left:0;right:0;top:-4px;bottom:-4px;
}
/* El selector mensual/anual medía 34px. Es un interruptor, no un adorno: crece de verdad, y
lo hace en toda la franja táctil (≤1024), no solo en el teléfono. */
html:not(.nx-portal) body.cine .pt-opt{min-height:44px;display:inline-flex;align-items:center}
}
/* ════════════════ ≤768 — el hero cambia de orden ════════════════ */
@media(max-width:768px){
/* ── El orden: título → párrafo → (kicker) → MOCKUP → botones → confianza ──
`.hero-inner` es un grid de DOS hijos: `.hero-left` (con el texto entero dentro) y
`.hero-mockup`. Para meter la captura entre el párrafo y los botones no hace falta mover
marcado: `.hero-left` no tiene NI UNA regla propia en todo el repo, así que se disuelve
con `display:contents` y sus hijos pasan a ser ítems del grid, ordenables uno a uno.
Ojo con `app.css:1780`: dentro de su `@media(max-width:768px)` declara
`.hero-mockup{order:0}` y, por ir más abajo en el archivo, le ganaba al `order:-1` de las
líneas 1196 y 1241. Ese empate a especificidad es el que dejaba la captura DEBAJO de los
botones en el teléfono y bien en la tablet. Aquí se resuelve nombrando las seis piezas. */
html:not(.nx-portal) body.cine .hero-left{display:contents}
html:not(.nx-portal) body.cine .hero-h1{order:1}
html:not(.nx-portal) body.cine .hero-p{order:2}
html:not(.nx-portal) body.cine .hero-kicker{order:3}
html:not(.nx-portal) body.cine .hero-mockup{order:4}
html:not(.nx-portal) body.cine .hero-ctas{order:5}
html:not(.nx-portal) body.cine .hero-trust{order:6}
/* Con `display:contents` el `gap` del grid ya no separa dos bloques sino SEIS renglones: se
anula y el ritmo lo dan los márgenes de cada pieza, que es lo que permite apretar el
texto y dejar aire solo alrededor de la captura. */
html:not(.nx-portal) body.cine .hero-inner{gap:0;align-items:stretch}
html:not(.nx-portal) body.cine .hero-h1{margin-bottom:.85rem}
html:not(.nx-portal) body.cine .hero-p{margin-bottom:.9rem}
html:not(.nx-portal) body.cine .hero-kicker{margin:0 0 1rem}
html:not(.nx-portal) body.cine .hero-mockup{margin:.35rem 0 1.5rem}
html:not(.nx-portal) body.cine .hero-ctas{margin-bottom:1.15rem;gap:.65rem}
/* `app.css:1784` le pone `flex-wrap:wrap` a la línea de confianza, y en 390px la frase entera
salta bajo el escudo: el icono queda solo en su renglón, como si le faltara algo. El icono y
el texto van en la misma fila y el que envuelve es el texto, dentro de su columna. */
html:not(.nx-portal) body.cine .hero-trust{margin-bottom:0;flex-wrap:nowrap;align-items:flex-start}
html:not(.nx-portal) body.cine .hero-trust > div:last-child{line-height:1.4;padding-top:.4rem}
/* ── La captura, a sangre ──
Es una pantalla de escritorio de 1400px metida en un teléfono: cada píxel de ancho que se
le quite la vuelve menos legible. Sale del padding del contenedor y ocupa el ancho real
de la pantalla, respetando la zona segura del apaisado. */
html:not(.nx-portal) body.cine .hero-mockup{
margin-left:calc(-1 * max(1.5rem,env(safe-area-inset-left)));
margin-right:calc(-1 * max(1.5rem,env(safe-area-inset-right)));
}
html:not(.nx-portal) body.cine .mock-shell{border-radius:.7rem}
/* El hero ya no va a sangre (2026-09-17): la captura era demasiado grande en el teléfono. Se queda
al 84% y centrada; en /neo/ al 76% y cargada a la izquierda, para que Neo se asome a su derecha. */
html:not(.nx-portal) body.cine .hero-mockup{margin-left:auto;margin-right:auto;width:84%}
html:not(.nx-portal) body.cine .hero-mockup:has(.neo-asomado){margin-left:0;width:76%}
/* ── El velo de la foto ──
`cine.css` funde la foto entre el 52% y el 66% de la altura del hero porque ahí abajo
antes solo quedaba el mockup. Con los botones al final, ese degradado los dejaba sobre la
parte clara de la imagen. Ahora la foto vive en el tercio superior —donde está el
titular— y de ahí al fondo es plano: el cristal del mockup y los botones se apoyan en
fondo liso. */
html:not(.nx-portal) body.cine #hero::before{
background:linear-gradient(180deg,rgba(10,10,11,.5) 0%,rgba(10,10,11,.46) 18%,rgba(10,10,11,.9) 34%,var(--c-bg) 46%);
}
html:not(.nx-portal) body.cine .hero-photo{top:-6%;height:112%;object-position:62% 28%}
/* ── La foto de `/neo/`, que en el teléfono no se entendía ──
La regla de arriba vale para las tres landings, pero mide 112% del alto del hero y en un
teléfono ese hero es una columna: 390 de ancho por 1050 de alto. Con `cover`, una foto 3:2
recortada a esa proporción enseña el 23% de su ancho — una tira vertical. En la home y en
el Hub esa tira cae en una pared y en una pantalla, y pasa por textura; en Copilot caía en
el hombro de la persona de granate y se leía como una mancha de color, no como una escena.
La foto es de dos personas revisando documentos: eso es lo que tiene que verse.
La salida no es mover el punto focal —ninguna tira de 23% cuenta esa escena— sino dejar de
pedirle a la foto que cubra el hero entero. El velo de arriba ya la apaga del todo al 46%
del alto: de ahí abajo NO SE VE NADA. Así que la foto ocupa solo esa franja, y al bajar el
alto de la caja el recorte se abre al 50% del ancho: manos, papeles y la persona, legibles.
`sizes` en el HTML acompaña, o el navegador seguiría bajando el archivo de 1280 para
pintarlo a 2200 px reales en una pantalla retina. */
html:not(.nx-portal) body.cine .hero-photo--copilot{top:0;height:58%;object-position:40% 38%}
/* ── Ritmo vertical ──
La piel compacta `#features`, `#how` y `#pricing` a 3.5rem, pero se dejó dos huecos:
· En la home `#how` lleva además la clase `on-light`, y `#how.on-light` (0,2,0) le gana a
`#how` (0,1,0) dentro del mismo @media: esa sección se quedaba con las 7rem del
escritorio, 112px arriba y 112px abajo en un teléfono.
· Las secciones `.sec-pad` (`#centraliza`, `#cta`) nunca entraron en la compactación y
siguen en las 5rem de `app.css:1219`.
Con las dos, el sitio deja de tener respiraciones de escritorio entre bloques. */
html:not(.nx-portal) body.cine #how.on-light{padding:3.5rem 0}
html:not(.nx-portal) body.cine .sec-pad{padding:3.5rem 0}
html:not(.nx-portal) body.cine .sec-title{font-size:1.75rem;line-height:1.14}
html:not(.nx-portal) body.cine .sec-sub{font-size:1rem}
html:not(.nx-portal) body.cine .sec-head-center{margin-bottom:1.75rem}
}
/* ════════════════ ≤640 — el teléfono de verdad ════════════════ */
@media(max-width:640px){
/* ── Las cifras: la quinta no puede quedar huérfana ──
`/neo/` tiene CINCO cifras en una rejilla de dos columnas: la última caía sola en la
columna izquierda, descentrada, como si faltara algo. Que ocupe el ancho entero. Escrito
con `:nth-child(odd)` para que no haga nada en las páginas que tienen un número par. */
html:not(.nx-portal) body.cine .stats-grid > .stat:last-child:nth-child(odd){grid-column:1/-1}
/* ── El comparativo, que se estaba comiendo su propia conclusión ──
`app.css:1895` lo resuelve con `overflow-x:auto` y filas de 460px mínimo. En 390px eso
deja la columna "Nexel Copilot" —la única que importa— FUERA de la pantalla, sin ninguna
señal de que haya más a la derecha: el visitante lee "A mano / Otros proveedores" y se va.
Aquí se le quita el mínimo y se aprieta hasta que las cuatro columnas caben de verdad. */
html:not(.nx-portal) body.cine .cmp-table{overflow-x:visible}
html:not(.nx-portal) body.cine .cmp-row{grid-template-columns:1.55fr .72fr .8fr .86fr;min-width:0}
/* Con el rótulo corto la fila baja de cuatro-seis renglones a uno o dos, así que la letra
puede VOLVER A SUBIR: la tabla entera medía 988px —más de una pantalla— con cabeceras de
9,7px que ya no se leían. Ahora cabe casi entera y se lee. */
html:not(.nx-portal) body.cine .cmp-feat{padding:.8rem .5rem .8rem .7rem;font-size:.84rem;line-height:1.3}
html:not(.nx-portal) body.cine .cmp-c{padding:.8rem .15rem;font-size:.72rem;line-height:1.2}
html:not(.nx-portal) body.cine .cmp-colhead .cmp-feat,
html:not(.nx-portal) body.cine .cmp-colhead .cmp-c{font-size:.68rem;letter-spacing:-.01em}
html:not(.nx-portal) body.cine .cmp-c svg{width:18px;height:18px}
html:not(.nx-portal) body.cine .cmp-feat .pf-full,
html:not(.nx-portal) body.cine .cmp-c .pf-full{display:none}
html:not(.nx-portal) body.cine .cmp-feat .pf-mini,
html:not(.nx-portal) body.cine .cmp-c .pf-mini{display:inline}
/* ── Precios: los dos planes, uno al lado del otro ──
Apilados obligaban a recorrer una pantalla entera para comparar dos números, que es
justo lo que la sección existe para evitar. `zoom` cambia el valor local del píxel CSS,
así que la rejilla sigue llenando el ancho del contenedor y TODO lo de dentro
—tipografía, relleno, radios, proporción 1fr/1.15fr— se encoge en bloque, sin rediseñar
ni una tarjeta. Es literalmente alejar la cámara. */
html:not(.nx-portal) body.cine #pricing .price-grid{
grid-template-columns:1fr 1.15fr;gap:.7rem;zoom:.7;
}
html:not(.nx-portal) body.cine #pricing .price-card{padding:1.5rem 1.15rem}
/* ── Y lo que el zoom NO arregla: la tarjeta seguía midiendo 523px de alto real ──
Alejar la cámara encoge, pero no acorta: seis features de tres renglones cada una siguen
siendo seis features de tres renglones. Aquí se ataca el ALTO en sus dos causas.
1. El rótulo corto (`.pf-mini`, ver `cine.css`): cada feature pasa a UN renglón.
2. El aire de escritorio. Los márgenes de la tarjeta están calculados para una columna de
380px en un monitor; en media pantalla de teléfono son huecos. Se recortan uno a uno, y
la cifra —que es lo único que el visitante viene a comparar— se queda grande. */
html:not(.nx-portal) body.cine #pricing .pf-full{display:none}
html:not(.nx-portal) body.cine #pricing .pf-mini{display:inline}
html:not(.nx-portal) body.cine #pricing .price-badge{margin-bottom:.75rem}
html:not(.nx-portal) body.cine #pricing .price-name{margin-bottom:.3rem}
html:not(.nx-portal) body.cine #pricing .price-seats{margin-bottom:.5rem}
html:not(.nx-portal) body.cine #pricing .price-amt{font-size:2.6rem}
html:not(.nx-portal) body.cine #pricing .price-annual-note{margin-bottom:.85rem}
html:not(.nx-portal) body.cine #pricing .price-feats{gap:.55rem;margin-bottom:1.1rem}
html:not(.nx-portal) body.cine #pricing .price-feat{line-height:1.3}
/* El dedo NO se encoge con el zoom: un botón de 44px dentro de un bloque al 62% mide 27px
de verdad. Se compensa en el espacio zoomeado para que el objetivo real vuelva a ≥44px. */
html:not(.nx-portal) body.cine #pricing .price-cta-free,
html:not(.nx-portal) body.cine #pricing .price-cta-pro{min-height:72px}
/* «Empezar 7 días gratis» no cabe en la columna estrecha: partía en dos líneas SOLO en Starter
—la columna del destacado es más ancha— y las dos tarjetas quedaban con botones distintos.
Se encoge la letra y se prohíbe el corte, que es lo que iguala las dos. Acotada a
`.price-grid-4`: el Hub comparte `#pricing` con DOS tarjetas y ahí su rótulo sí cabe. */
html:not(.nx-portal) body.cine .price-grid-4 .price-cta-free,
html:not(.nx-portal) body.cine .price-grid-4 .price-cta-pro,
html:not(.nx-portal) body.cine .price-grid-4 .price-cta-contacto{font-size:.82rem;white-space:nowrap}
/* El respaldo: un navegador sin `zoom` (Firefox anterior a la 126) tiene que caer en algo
usable, no en dos tarjetas cortadas por la mitad. */
@supports not (zoom:1){
html:not(.nx-portal) body.cine #pricing .price-grid{grid-template-columns:1fr}
}
/* Neo (cuatro planes desde el 2026-09-18): uno debajo de otro, CADA UNA A SU ALTO. Con tres se
igualaban; con Starter (4 renglones) contra Basic (9) igualar dejaba media tarjeta vacía.
Antes (tres planes, 2026-09-17): las tres del mismo alto. Sin zoom: a una
columna ya caben. Con el rótulo corto: con el largo, igualar el alto dejaba media tarjeta vacía en
Pro y Enterprise. El Hub (dos tarjetas) sigue como estaba. */
html:not(.nx-portal) body.cine #pricing .price-grid-4{grid-template-columns:1fr;grid-auto-rows:auto;gap:1rem;zoom:1;width:calc(100vw - 2rem);max-width:none;margin-inline:calc(50% - 50vw + 1rem)}
html:not(.nx-portal) body.cine #pricing .price-grid-4 .price-card{padding:1.75rem 1.4rem;grid-column:auto}
/* Con una tarjeta por renglón hay ancho para la frase COMPLETA (usuario, 2026-09-19: el rótulo
corto se leía recortado). El corto sigue en el Hub, que va en dos columnas. La rejilla sale
1rem a cada lado del contenedor: 295px de 390 dejaba cada frase en tres renglones. */
html:not(.nx-portal) body.cine #pricing .price-grid-4 .pf-full{display:inline}
html:not(.nx-portal) body.cine #pricing .price-grid-4 .pf-mini{display:none}
html:not(.nx-portal) body.cine #pricing .price-grid-4 .price-feat{line-height:1.4;font-size:.95rem}
html:not(.nx-portal) body.cine #pricing .price-grid-4 .price-cta-free,
html:not(.nx-portal) body.cine #pricing .price-grid-4 .price-cta-pro,
html:not(.nx-portal) body.cine #pricing .price-grid-4 .price-cta-contacto{min-height:52px;font-size:.95rem}
/* El selector mensual/anual y la letra del pie NO se encogen: son control y advertencia. */
html:not(.nx-portal) body.cine .price-toggle{margin-inline:auto}
}
/* ════════════════ ≤640 — el pie, que se había vuelto un scroll aparte ════════════════
En una sola columna el pie medía 860px en `/neo/`: una pantalla entera de teléfono para
doce enlaces. Y crecía al darle a cada enlace sus 44px de dedo, que no se negocian.
Lo que se acorta es el AIRE, no el contenido: las cuatro cabeceras de sección heredaban
3.5rem de separación entre bloques y 5rem sobre la barra de créditos, medidas pensadas para
un pie de cuatro columnas a lo ancho de un monitor. Aquí la marca cruza a lo ancho y los tres
grupos de enlaces se reparten en dos columnas, que es lo que de verdad recorta altura:
"Producto" y "Empresa" comparten renglón en vez de ir uno detrás de otro. */
@media(max-width:640px){
html:not(.nx-portal) body.cine footer{padding-top:2.5rem}
/* Dos columnas, con las celdas asignadas a mano.
Dejar fluir la rejilla apila los tres grupos como caigan y el más largo empuja un renglón
entero de aire debajo del corto: medido en `/neo/`, 657px de pie. La clave es que el
grupo LARGO ocupe las dos filas de su columna mientras los dos cortos se apilan en la otra,
y cuál es el largo cambia por página: en `/neo/` es "Producto" (cuatro enlaces) y en
las otras seis "Empresa" (cinco: Inicio, FAQ, Contáctanos y las dos redes). Se le dan las
dos filas a "Empresa", que es la que gana en seis de siete: el pie de esas seis baja de 344
a 235px de enlaces y `/neo/` se queda en 302 — contra los 504 que medía apilado.
El orden de lectura se conserva: columna izquierda "Producto" y debajo "Legal", columna
derecha "Empresa".
Depende de que el pie tenga esta forma exacta —marca + tres grupos—, que es la que
comparten las siete páginas; lo fija `tests/test_movil_sitio.py` para que una columna nueva
no lo descoloque en silencio. */
html:not(.nx-portal) body.cine .foot-grid{
grid-template-columns:1fr 1fr;gap:1.5rem 1.25rem;margin-bottom:1.75rem;
}
/* La marca y su descripción cruzan enteras: partidas en media columna, la frase se rompe en
ocho renglones y ocupa más que todos los enlaces juntos. */
html:not(.nx-portal) body.cine .foot-brand{grid-column:1/-1;grid-row:1}
html:not(.nx-portal) body.cine .foot-grid > .foot-col:nth-child(2){grid-column:1;grid-row:2}
html:not(.nx-portal) body.cine .foot-grid > .foot-col:nth-child(3){grid-column:2;grid-row:2/span 2}
html:not(.nx-portal) body.cine .foot-grid > .foot-col:nth-child(4){grid-column:1;grid-row:3}
html:not(.nx-portal) body.cine .foot-desc{font-size:.85rem;line-height:1.55;margin-top:.6rem;max-width:none}
html:not(.nx-portal) body.cine .foot-col h4{margin-bottom:.35rem}
/* 42px sigue por encima del mínimo cómodo y le quita 24px al bloque de doce enlaces. */
html:not(.nx-portal) body.cine .foot-col a{min-height:42px}
/* La barra de créditos: dos frases cortas, una debajo de otra, sin el hueco de escritorio. */
html:not(.nx-portal) body.cine .foot-bottom{padding-top:1.15rem;gap:.35rem;font-size:.8rem}
}
/* ════════════════ ≤380 — el teléfono estrecho ════════════════ */
@media(max-width:380px){
html:not(.nx-portal) body.cine .hero-h1{font-size:1.95rem}
html:not(.nx-portal) body.cine .sec-title{font-size:1.55rem}
/* El escalón de 380px era `.6` cuando la tarjeta traía features de tres renglones: había que
alejar mucho para que cupiera. Con el rótulo corto ya no hace falta, y `.6` dejaba la letra
en 8,8px reales — legible en una captura, no en la mano. */
html:not(.nx-portal) body.cine #pricing .price-grid{zoom:.65}
html:not(.nx-portal) body.cine #pricing .price-grid-4{zoom:1}
/* Un escalón más de zoom encoge también el botón: se vuelve a compensar. */
html:not(.nx-portal) body.cine #pricing .price-cta-free,
html:not(.nx-portal) body.cine #pricing .price-cta-pro{min-height:70px}
html:not(.nx-portal) body.cine .cmp-feat{font-size:.72rem}
html:not(.nx-portal) body.cine .cmp-colhead .cmp-feat,
html:not(.nx-portal) body.cine .cmp-colhead .cmp-c{font-size:.58rem}
}