/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════ poyntia.com · SÓLO MÓVIL (10-oct-2026). Se carga con : por encima de 720 px el navegador ni lo aplica, así que el ESCRITORIO (y la tableta) NO CAMBIAN. Todo lo de aquí va sin @media. Pablo (9-oct): «en móvil no se ve nada bien la web ni las demos»; «sencillo como spacefs.com o elevenlabs.io»; «que se quede lo importante, sin tanta demo»; «cada demo, UNA pantalla, sin scroll». Criterio: ¿en ~10 s se entiende qué acelera Poyntia y cómo se ve? Estructura de cada página en móvil: pantalla 1 = titular + frase + UN botón · pantalla 2 = UNA demo entera dentro de la pantalla · cierre. Reglas: letra ≥ 14 px · objetivos táctiles ≥ 44 px · la altura es 100svh (la barra del navegador no la rompe) · lo que no cabe se OCULTA, no se encoge. El motor de las demos (apps/landing/_demos/, sala-v3.*, lienzo-*) NO se toca: aquí sólo se oculta o se coloca lo que llevan dentro las páginas. ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */ :root { --gut:20px; --m-arriba:84px; --m-pie:20px } /* ── 1 · PRIMERA PANTALLA de cada página: aviso, titular, una frase y UN botón, todo dentro de 100svh y centrado ───────────────────────────── */ .hero { min-height:100svh; padding:var(--m-arriba) var(--gut) 40px; justify-content:center } .hero .aviso, .hero .aviso-et { min-height:44px; font-size:15px } .hero h1 { margin-top:20px } .hero .lede { margin-top:18px; font-size:18px; line-height:1.4; max-width:21em } .hero .hero-cta, .hero .hero-botones { margin-top:28px } .hero .hero-sub { display:none } /* la lista de sectores sobra: los sectores ya están más abajo */ .hero .hero-botones { flex-direction:column; align-items:stretch; width:100%; max-width:340px } .hero .hero-botones .pill { width:100%; justify-content:center } .hero .hero-botones .pill-white { display:none } /* UN botón en la primera pantalla; «Hablar con ventas» sigue en el cierre */ .hero .pill-l { height:56px } /* /grid/: el aviso del real decreto no cabe junto al botón; pasa a ser una línea de texto con zona táctil de 44 px, debajo */ .hero .hero-rd { position:static; width:100%; max-width:340px; margin-top:14px; align-items:center; text-align:center } .hero .hero-rd .pill { width:100%; min-height:44px; justify-content:center } .hero .hero-rd small { display:none } @media (max-height:740px) { .hero { padding-top:76px; padding-bottom:24px } .hero h1 { margin-top:14px } .hero .lede { margin-top:12px; font-size:17px } .hero .hero-cta, .hero .hero-botones { margin-top:20px } .hero .hero-rd { display:none } } /* ── 2 · lo que sobra en móvil: se oculta (el escritorio lo conserva todo) ─────────────────────────────────────────────────────────────────── */ #agentes, #como, #preguntas, #rapido, #cerv, #demo, #servicios { display:none } /* minis, pasos, preguntas, ventanas, marcos de Cervaleda, demo de GUADAME */ .mn-col li:has(> a[href="#como"]), .mn-col li:has(> a[href="#agentes"]) { display:none } /* ── 3 · EL CASO, UNA PANTALLA: el titular, la sala (pregunta · imagen · lo que hacen los agentes → la respuesta) y un botón ─────────────────── */ #casos { padding-block:0 } #casos .pista { margin-top:0 } #casos .escena { width:100%; margin:0; padding:0 var(--gut) } #casos .esc-eyebrow { display:none } #casos .casos-lista { gap:0 } #casos .caso:not(:first-child) { display:none } /* UN caso por página */ body:has(#demo2) #casos { display:none } /* /grid/ enseña la parcela (#demo2), no un caso */ #casos .caso { min-height:100svh; height:100svh; padding:var(--m-arriba) 0 var(--m-pie); gap:12px; grid-template-rows:auto minmax(0, 1fr) auto } #casos .esc-h { font-size:clamp(24px, 7vw, 30px); line-height:1.1; letter-spacing:-.03em } #casos .esc-h span { display:inline } #casos .sala-caja { height:100%; min-height:0 } #casos .sala-caja .sala { --tj:15px; height:100%; min-height:0; max-height:none; border-radius:24px } /* barra: sólo el rótulo «ejemplo ilustrativo», pausa y estado; sin puntos de ventana, sin velocidad */ #casos .sala-b { min-height:48px; padding:0 10px 0 14px; gap:8px } #casos .sala-b .pto, #casos .sc-vel, #casos .sc-re, #casos .sc-fin { display:none } #casos .sala-b b { margin-left:0; flex:1; font-size:14px; line-height:1.2; white-space:normal; overflow:visible } #casos .sc-b { min-width:44px; height:44px; font-size:14px } #casos .sala-st { height:44px; padding:0 14px; font-size:14px } #casos .sala-st span { display:none } #casos .sala-ctl + .sala-st { margin-left:0 } /* la pregunta */ #casos .sala-q { margin:10px 12px 6px; padding:10px 10px 10px 16px; gap:10px } #casos .sala-qt { font-size:15px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden } #casos .sala-qb { display:none } /* la flecha de la pregunta es decorativa: aquí sólo le quita sitio al texto */ /* el cuerpo: la imagen (mapa o agentes) arriba, un solo panel debajo */ #casos .sala-c { flex:1; min-height:0; display:flex; flex-direction:column } #casos .sala-izq { flex:0 0 auto; padding:0; border:0 } #casos .sala-mapa-col { aspect-ratio:auto; height:clamp(150px, calc(100svh - 640px), 340px); margin:6px 12px 0; border-radius:16px } #casos .sala-izq:not(.sala-mapa-col) { height:clamp(150px, calc(100svh - 640px), 300px); padding:8px 12px 0 } #casos .sala-izq .sala-h, #casos .sala-izq .log { display:none } #casos .sala-izq .red { height:100%; min-height:0; flex:1 } #casos .nodo { height:30px; font-size:14px; padding:0 .7em 0 .6em } #casos .m-escala, #casos .m-cred, #casos .m-tick { display:none } #casos .m-nota, #casos .m-ar, #casos .m-dist { white-space:normal; max-width:12em; text-align:center; font-size:14px } #casos .m-pill { height:30px; font-size:14px } /* el panel: mientras trabajan, las últimas líneas de lo que hacen; al terminar, la respuesta (titular + UNA fuente) */ #casos .sala-der { flex:1; min-height:0; overflow:hidden; padding:10px 14px 8px } #casos .sala-der[data-vista] .reg-b, #casos .sala-der[data-vista] .resp-b { flex:1 1 auto; min-height:0; margin:0; position:static } #casos .sala-der[data-vista="reg"] .resp-b, #casos .sala-der[data-vista="resp"] .reg-b { display:none } #casos .sala-der[data-vista] .reg-h, #casos .sala-der[data-vista] .resp-h { display:flex; margin:0 0 6px; padding:0; min-height:0; font-size:14px } #casos .reg-t { display:none !important } #casos .sala-der[data-vista] .reg { display:flex; flex-direction:column; justify-content:flex-start; flex:1; max-height:none; overflow:hidden; padding:0 } #casos .sala-der[data-vista] .reg { -webkit-mask-image:none; mask-image:none } #casos .reg-l { font-size:14px; line-height:1.3; padding:4px 4px } #casos .reg-k { font-size:14px; line-height:1.3 } #casos .reg-l code { display:none } #casos .reg-l:nth-last-child(n+4) { display:none } /* sólo las tres últimas líneas: ninguna se corta ni hace falta scroll */ #casos .sala-der[data-vista] .hall-l, #casos .resp-b .hall-l { display:grid; overflow:visible; gap:8px; padding:0; -webkit-mask-image:none; mask-image:none } #casos .hall:not(:first-child) { display:none } #casos .hall { padding:10px 12px; gap:10px } #casos .hall-t { font-size:18px; line-height:1.25 } #casos .hall-q, #casos .hall-m, #casos .hall-p, #casos .hall-n, #casos .hall-f .tag, #casos .hall-f .chip-f:not(:first-of-type) { display:none } #casos .chip-f { min-height:44px; font-size:14px } #casos .resp-esq { display:none } /* el botón del caso */ #casos .esc-pie { min-height:0; margin-top:0 } #casos .esc-acc .pill { min-height:48px } #casos .puntos { display:none } /* ── 4 · SECTORES de la portada: una lista de filas grandes y tocables, sin tarjetas ─────────────────────────────────────────────────────── */ .sec-sectores { padding-block:56px } .sec-sectores .sc-t, .sec-sectores .mn-tag { display:none } .sec-sectores .sector-c { min-height:64px } /* ── 5 · /grid/: la parcela (UNA demo grande) + el real decreto reducido + cierre ─────────────────────────────────────────────────────────── */ #demo2 { padding:var(--m-arriba) 0 var(--m-pie); min-height:100svh; display:flex; align-items:center } #demo2 .wrap { width:100%; padding-inline:0 } #demo2 .h2 { font-size:clamp(24px, 7vw, 30px); padding-inline:var(--gut); margin-bottom:14px } #demo2 .demo-hueco { margin-top:0; width:calc(100% - 2 * var(--gut)); margin-inline:auto; aspect-ratio:auto; height:min(calc(100svh - var(--m-arriba) - 120px), 560px) } .sec-que { padding-block:64px } .sec-que .n-verbos, .sec-que .rd-et { display:none } .sec-que .que-p { font-size:18px } .sec-cierre { padding-block:72px } /* ── 6 · /planes/: el primer plan con su botón dentro de la primera pantalla ─────────────────────────────────────────────────────────────── */ .pg-planes .hero { min-height:0; justify-content:flex-start; padding-bottom:16px } @media (max-height:760px) { .pg-planes .hero .aviso-et, .pg-planes .hero .lede { display:none } } .pg-planes .sec-planes { padding-top:8px } /* ── 7 · cabecera y pie: objetivos táctiles de 44 px ──────────────────────────────────────────────────────────────────────────────────── */ .logo { --logo-w:44px; --logo-h:44px; --logo-y:19px; --logo-pal:47px; --logo-ext:10px } /* en ≤ 640 px el logo bajaba a 40 px: aquí vuelve a su tamaño de escritorio (un tamaño sólo sube) */ .pie a, .pie button { display:inline-flex; align-items:center; min-height:44px } /* ── 8 · reparto de la altura según la pantalla (la imagen se encoge; en pantallas bajas se va al enseñar la respuesta) ───────────────────── */ @media (max-height:899px) { #casos .reg-l:nth-last-child(n+3) { display:none } } /* hasta 899 px de alto: dos entradas del registro (cada una puede ocupar 2-3 líneas); a partir de 900 px, tres */ @media (max-height:779px) { #casos .sala-mapa-col { height:clamp(100px, calc(100svh - 520px), 260px) } #casos .sala-izq:not(.sala-mapa-col) { height:clamp(100px, calc(100svh - 520px), 220px) } } @media (max-height:700px) { #casos .reg-l:nth-last-child(n+2) { display:none } /* una sola: lo que hace ahora */ #casos .sala-qt { font-size:14px } #casos .sala:has(.sala-der[data-vista="resp"]) .sala-izq { display:none } /* con la respuesta a la vista, la imagen cede su sitio */ } /* ── 9 · la demo grande de /grid/ (motor de poyntia-da: no se edita, sólo se amplía un botón): los controles táctiles de 44 px ──────────────── */ #demo-parcela .s3-btn { min-width:44px; min-height:44px }