/* La landing en el móvil: un diseño aparte, no la de escritorio encogida.
   Solo se carga en pantallas de hasta 760 px (ver el <link media> de index.html).
   Idea: como una app. Arriba, el dolor y el vídeo; lo demás en tarjetas que se pasan con el dedo;
   abajo, siempre a mano, «Ver la demo» y «Pide tu demo». */

:root { --lado: 16px; }
body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
section { scroll-margin-top: 64px; }
.sec-cab h2, .dudas h2 { font-size: clamp(28px, 8.4vw, 36px); }
.sec-sub { font-size: 15.5px; }

/* Arriba: la marca entera y nada más (pedir la demo va en la barra de abajo) */
.nav { padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; gap: 10px; }
.nav-marca img { height: 38px; }
.nav .btn { display: none; }
.carril-sec, .guia-lanzar { display: none !important; }

/* La barra de abajo */
.barra-movil { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: 1fr 1fr 50px; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(8,8,14,.92); border-top: 1px solid var(--linea-2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.en-peli .barra-movil, .cfg-abierta .barra-movil { display: none; }
.barra-movil > * { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; height: 50px; padding: 0 8px; white-space: nowrap; border-radius: 14px; border: 0; font-family: var(--cab); font-weight: 800; font-size: 15px; text-decoration: none; }
@media (max-width: 400px) { .bm-presu svg { display: none; } }
.bm-ver { background: linear-gradient(135deg, var(--violeta), #5e3ae4); color: #fff; }
.bm-presu { background: #fff; color: #120f2a; }
.bm-notas { order: 3; position: relative; padding: 0; background: var(--tarjeta-2); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--linea-2); }
.bm-notas b { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--cian); color: #04222a; font: 800 12px/20px var(--cuerpo); }
.bm-notas b[hidden] { display: none; }

/* Portada: el titular, una línea y el vídeo, que es lo que hay que ver */
.hero { min-height: auto; display: block; padding: calc(78px + env(safe-area-inset-top, 0px)) 16px 34px; }
.hero h1 { font-size: clamp(40px, 12.5vw, 54px); }
.hero-txt > p { font-size: 16px; margin: 14px 0 18px; }
.hero-cta, .hero-equipo, .hero-bajar { display: none; }
.hv.solo-movil { display: block; aspect-ratio: 4 / 5; border-radius: 20px; margin-top: 2px; }
.hv-sonido { top: 10px; right: 10px; height: 38px; font-size: 13.5px; }
.hv-fin { gap: 10px; padding: 16px; }
.hv-fin > div { width: 100%; }
.hv-fin .btn { flex: 1 1 100%; height: 46px; }
.poster-movil { position: relative; display: flex; align-items: flex-end; width: 100%; aspect-ratio: 16 / 11; padding: 18px; border: 0; border-radius: 24px; overflow: hidden; color: #fff; text-align: left; background: #0d0c1a; box-shadow: 0 0 0 1px rgba(160,140,255,.3), 0 30px 70px rgba(0,0,0,.55), 0 0 60px rgba(124,92,252,.22); }
.pm-fondo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,14,.1) 30%, rgba(8,8,14,.88)), url(capturas/escritorio/accesos.webp) 28% 52% / 230% auto no-repeat; filter: saturate(1.1); transform: scale(1.02); animation: pm-mueve 14s ease-in-out infinite alternate; }
@keyframes pm-mueve { to { background-position: 72% 48%; } }
.pm-play { position: absolute; left: 50%; top: 42%; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: rgba(124,92,252,.95); box-shadow: 0 0 0 10px rgba(124,92,252,.25), 0 16px 40px rgba(0,0,0,.5); transform: translate(-50%, -50%); }
.pm-play svg { margin-left: 4px; }
.pm-play::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 2px solid rgba(127,239,255,.5); animation: onda 2.4s ease-out infinite; }
.pm-txt { position: relative; }
.pm-txt b { display: block; font-family: var(--cab); font-size: 22px; }
.pm-txt small { color: #d6d0ff; font-size: 13.5px; font-weight: 600; }
.hero-sellos { display: flex; flex-wrap: nowrap; gap: 8px; margin: 16px -16px 0; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
.hero-sellos::-webkit-scrollbar { display: none; }
.hero-sellos li { flex: none; padding: 8px 12px; border-radius: 999px; background: var(--tarjeta); border: 1px solid var(--linea); font-size: 13.5px; white-space: nowrap; }

/* Tarjetas que se pasan con el dedo: las claves, el punto de paso y lo del dueño */
.tiles, .paso-grid, .tres-claves { display: flex !important; gap: 12px; margin: 0 -16px; padding: 4px 16px 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 16px; scrollbar-width: none; }
.tiles::-webkit-scrollbar, .paso-grid::-webkit-scrollbar, .tres-claves::-webkit-scrollbar { display: none; }
.tiles > *, .paso-grid > *, .tres-claves > * { flex: 0 0 80%; scroll-snap-align: start; }
.claves { padding: 6px 16px 40px; }
.tile, .paso-card { padding: 20px; }
.inclina.visto { transform: none; }

/* La puerta: la escena, grande; quién pasa, en botones de dos en dos */
.puerta, .prueba, .paso, .dueno, .nube, .empezar, .precio, .datos, .dudas { padding: 56px 16px; }
.puerta .sec-sub { font-size: 15px; margin-top: 12px; }
.escenario { height: min(62svh, 520px); margin: 0 -16px; border-radius: 0; }
.puerta-mandos { grid-template-columns: 1fr !important; gap: 12px; margin-top: 14px; }
.sim-botones { grid-template-columns: 1fr 1fr !important; gap: 8px; }
.sim-botones button { padding: 10px 12px !important; }
.sim-botones button small { font-size: 11.5px; }
.registro { padding: 12px 14px; border-radius: 18px; }
.registro ul { max-height: 128px; }
.registro li { padding: 7px 10px; font-size: 13px; }
/* Encima de la escena, solo lo que cuenta lo que pasa: el resto, debajo o fuera */
.escena3d .h3d-botones, .escena3d .h3d-red { display: none; }
.mandos-izq .h3d-modo { position: static; transform: none; display: flex; width: 100%; margin: 0 0 10px; padding: 4px; background: var(--tarjeta); }
.mandos-izq .h3d-modo button { flex: 1; padding: 10px 8px; font-size: 14px; }

/* Pruébalo: la pantalla recortada a lo que importa, los momentos en una tira y se pasa con el dedo */
.prueba .sec-sub { display: none; }
.prueba-grid { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.prueba-controles { display: contents; }
.perfiles { order: 1; }
.prueba-equipo { order: 2; margin: 0; min-height: 0; }
.momentos { order: 3; display: flex; gap: 8px; min-width: 0; max-width: 100vw; margin: 0 -16px; padding: 2px 16px 6px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.momentos::-webkit-scrollbar { display: none; }
.momentos li { flex: none; scroll-snap-align: start; }
.momentos button { padding: 9px 14px 9px 9px; border-radius: 999px; white-space: nowrap; font-size: 14px; }
.prueba-pie { order: 4; }
.prueba-equipo .portatil { width: 100%; }
.prueba-equipo .portatil .base { display: none; }
.prueba-equipo .portatil .pantalla { aspect-ratio: 5 / 4; border-radius: 18px; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 24px 60px rgba(0,0,0,.55); }
.prueba-equipo .pantalla .cap.on { animation: none; }
.prueba-equipo .movil { width: min(250px, 66vw); }
.bocadillo { position: relative; left: auto; bottom: auto; transform: none; width: 100%; margin-top: 12px; }
.prueba-equipo::after { content: "Desliza para ver más"; display: block; margin-top: 8px; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--gris-2); }

/* El dueño: la captura recortada a las cifras, y las cuentas de dos en dos */
.dueno-grid { gap: 18px; }
.dueno-grid .portatil .base { display: none; }
.dueno-grid .portatil .pantalla { aspect-ratio: 16 / 11; border-radius: 18px; }
.dueno-grid .portatil .pantalla img { object-fit: cover; object-position: 30% 47%; transform: scale(1.7); transform-origin: 30% 47%; }
.contadores { grid-template-columns: 1fr 1fr; gap: 10px; }
.tres-claves > * { padding: 16px; border-radius: 16px; background: var(--tarjeta); border: 1px solid var(--linea); }

/* La nube: el móvil primero, la lista compacta */
.nube { gap: 22px; }
.nube-lista li { padding: 12px 0; }

/* Dudas, cómo empezar, precio y datos: compactos */
.dudas summary { font-size: 15.5px; padding: 16px 48px 16px 16px; }
.dudas details p { padding: 0 16px 16px; font-size: 14.5px; }
.pasos { gap: 18px; }
.opciones button { min-height: 44px; }
.datos { text-align: center; }
.contacto { padding: 40px 16px; }
.contacto-caja { padding: 34px 20px; }
.pie { padding-bottom: 24px; }

/* La demo completa, debajo del vídeo */
.poster-completa { display: block; width: 100%; margin-top: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--linea-2); background: var(--tarjeta); color: var(--gris); font: 600 14px/1.3 var(--cuerpo); text-align: center; }
.poster-completa b { color: var(--tinta); font-family: var(--cab); }
.poster-completa span { color: var(--gris-2); }

/* Tu presupuesto, en una columna: preguntas, lo que sale y los datos */
.cfg { border-radius: 22px; }
.cfg-preguntas, .cfg-resultado, .cfg-datos { padding: 20px 16px; }
.cfg-preguntas { gap: 22px; }
.cfg-tarjetas button { padding: 12px; }
.cfg-tarjetas button b { font-size: 15px; }
.cfg-tarjetas button small { font-size: 12.5px; }
.cfg-total b { font-size: clamp(30px, 9vw, 40px); }
.cfg-filas { grid-template-columns: 1fr; }
.cfg-filas input, .cfg-filas input[name="email"] { grid-column: auto; font-size: 16px; }
.cfg-botones .btn { flex-basis: 100%; height: 54px; font-size: 15.5px; }
/* La ventana, a pantalla completa, con su propio desplazamiento */
.cfg-ventana { padding: 0; place-items: stretch; }
.cfg-marco { width: 100%; height: 100%; max-height: none; padding: calc(12px + env(safe-area-inset-top, 0px)) 12px calc(20px + env(safe-area-inset-bottom, 0px)); border-radius: 0; }
.cfg-cab { margin: 6px 48px 14px; }
.cfg-cab h2 { font-size: 26px; }
.cfg-cab p { font-size: 14.5px; }
.cfg-cerrar { margin: 0; }
.cfg-ventana .cfg { border-radius: 18px; }

/* Las dudas: el botón va en la barra de abajo; el panel sube desde abajo */
.notas-boton { display: none; }
.notas-panel, .en-peli .notas-panel { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 82svh; padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 22px 22px 0 0; }
/* Encima de la demo en vídeo, una hoja baja (9-oct-2026): la peli se sigue viendo arriba, parada donde iba. */
.en-peli .notas-panel { max-height: 60vh; max-height: 60svh; padding-top: 14px; }
.en-peli .notas-que { margin: 4px 0 10px; font-size: 13px; }
.en-peli .notas-escribir textarea { min-height: 64px; }
.en-peli .notas-seguir { height: 46px; margin-top: 10px; }
.notas-escribir textarea { font-size: 16px; }
.notas-aviso { left: 12px; right: 12px; top: auto; max-width: none; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
.en-peli .notas-aviso { left: auto; right: 12px; top: calc(62px + env(safe-area-inset-top, 0px)); bottom: auto; max-width: 250px; }

/* El final de la visita guiada */
.prueba-fin { padding: 18px 16px; border-radius: 18px; }
.prueba-fin img { height: 40px; }
.prueba-fin span { font-size: 14.5px; }
.prueba-fin div { width: 100%; }
.prueba-fin div .btn { flex: 1 1 100%; height: 48px; font-size: 15px; }
.prueba-pie { flex-wrap: nowrap; }
.prueba-pie .prueba-nota { display: none; }