, y TODO lo de este archivo cuelga de .hm: ni una regla se escapa fuera. Por eso las variables van en .hm y no en :root (--linea también existe en cuestionar.css, con otro valor) y el reset va en ".hm, .hm *" y no en "*". Vino de movil-prototipo.html, que era una página entera y podía permitirse mandar sobre html y body. Quién lo enciende: el interruptor del de index.html pone la clase .home-movil en el , y solo la pone si además la pantalla es de móvil. La media query de aquí abajo repite esa condición a propósito: si la clase apareciera alguna vez en una ventana ancha, aquí no se pinta nada igualmente. El comportamiento está en home-movil.js. ============================================================ */ /* Apagada por defecto. Sin la clase, o en escritorio, aquí no hay nada. */ .hm { display: none; } @media (max-width: 1024px) { /* Mientras manda la home móvil el documento no scrollea: el recorrido es por gestos y detrás no hay nada que mirar. OJO: esto tiene que estar DENTRO de la media query. Hubo una versión en la que la clase .home-movil se ponía sin mirar la anchura, y esta regla, que entonces estaba fuera, tumbaba el scroll también en escritorio: el documento se quedaba del alto de la ventana y la home clásica no bajaba a los bloques. Roto el 11 de septiembre de 2026 y encontrado el mismo día. Ahora la anchura se mira en dos sitios, y este es uno. */ html.home-movil, html.home-movil body { height: 100%; overflow: hidden; overscroll-behavior: none; } html.home-movil .hm { display: block; position: fixed; inset: 0; /* Por debajo del panel de sección, que en móvil es fixed a pantalla completa con z-index 100. Así abrir una sección la tapa y cerrarla la descubre, sin tener que esconder ni enseñar nada a mano. */ z-index: 90; } /* La home de siempre deja de verse, pero sigue ahí: el panel de sección vive dentro de .stage y tiene que poder abrirse. visibility y no display:none, porque la apertura del panel mide el bloque con getBoundingClientRect() y con display:none le saldría todo a cero. */ html.home-movil .saludo, html.home-movil .firma-autor, html.home-movil .target-frame, html.home-movil .block:not(.expanded) { visibility: hidden; } } .hm { --tinta: #0a0a0a; --gris: rgba(10, 10, 10, .45); --gris-claro: rgba(10, 10, 10, .10); --linea: rgba(10, 10, 10, .22); --fondo: #fff; --oro: #D4A535; /* --gold-card de questionit */ } .hm, .hm * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } .hm { background: var(--fondo); color: var(--tinta); font-family: "Inter", system-ui, sans-serif; /* El alto ya lo da inset:0 de la regla de abajo, que además sigue al viewport visible cuando entra y sale la barra del navegador. Antes esto era 100dvh sobre el . */ overflow: hidden; overscroll-behavior: none; /* mata el rebote elástico de iOS */ -webkit-user-select: none; user-select: none; } /* ---- Atajo a las seis secciones ---- El recorrido de esta pantalla es por gestos. Sin esta lista, quien no puede deslizar no llega a ninguna sección, y quien no ejecuta JavaScript —los rastreadores de IA, entre otros— no ve la estructura del sitio. Va escrita a mano en el HTML, igual que en index.html y por la misma razón: es lo que se lee sin correr nada. Oculta a la vista pero NO para el lector de pantalla: 1px y clip-path, nunca display:none, que la quitaría también de ahí. Y al recibir el foco se muestra, para que quien navega con teclado vea dónde ha aterrizado en vez de oír enlaces invisibles. */ .hm .atajos { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .hm .atajos:focus-within { position: fixed; top: 0; left: 0; right: 0; width: auto; height: auto; margin: 0; padding: 14px 16px; overflow: visible; clip-path: none; white-space: normal; background: var(--fondo); border-bottom: 1px solid var(--linea); z-index: 200; } .hm .atajos ul { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 18px; } .hm .atajos a { font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta); text-decoration: none; box-shadow: inset 0 -1px 0 var(--linea); } /* ============================================================ EL MARCO · igual en las tres capas y nunca se mueve ============================================================ */ .hm .marco { height: 100%; display: flex; flex-direction: column; align-items: center; padding: 18px 16px 14px; gap: 12px; } .hm .marco-top, .hm .marco-pie { flex: none; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gris); text-align: center; line-height: 1.4; } /* El pie va en UNA línea: si no cabe, encoge la letra antes que partirse. */ .hm .marco-pie { letter-spacing: .1em; white-space: nowrap; font-size: clamp(8px, 2.6vw, 11px); } .hm .marco-pie a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--gris-claro); } /* ---- El recuadro ---- Ocupa TODO lo que queda entre la cabecera y el pie. No es un cuadrado geométrico: si se le pone aspect-ratio, en un móvil alto sobra medio pantalla de hueco muerto y el contenido queda diminuto. */ .hm .cuadro { position: relative; flex: 1; min-height: 0; width: 100%; border: 1px solid var(--linea); /* El borde derecho no se pinta aquí: lo dibuja .nivel, tramo a tramo, porque ES el indicador de capa. */ border-right: none; /* Todo lo de dentro mide contra este recuadro: cqw / cqh. */ container-type: size; /* El gesto lo llevamos nosotros; el navegador no debe hacer scroll. */ touch-action: none; } /* ---- La ventana: recorta ---- El overflow va aquí y no en .cuadro para que .nivel pueda apoyarse en el borde sin que se lo coma el recorte. También es lo que esconde la capa que se ha ido hacia delante y ya no cabe. Sin perspective: los planos se hacen con escala, no con 3D. La única perspectiva del prototipo es la de la carta, que sí gira. */ .hm .ventana { position: absolute; inset: 0; overflow: hidden; } /* ---- El indicador de nivel: el propio borde derecho, en tres ---- */ .hm .nivel { position: absolute; /* right:0 es el filo del recuadro (ahí no hay borde que pintar: se le quitó arriba). El -1px de arriba y abajo es para tapar las dos esquinas y que el borde se cierre. */ top: -1px; bottom: -1px; right: 0; width: 3px; display: flex; flex-direction: column; /* Por encima de las capas. Desde que van en planos, cada una lleva su z-index (10, 20 y 30, que los escribe colocarPlanos) y son hojas opacas que ocupan el recuadro entero: con el 3 de antes se comían el borde derecho y el indicador desaparecía. */ z-index: 50; } /* Los tres tramos son la vía: siempre en el mismo gris que el resto del borde del recuadro, para que se lean como borde. Marcan los tercios y ya está; el que está encendido no es ninguno de ellos. */ .hm .nivel i { flex: 1; background: var(--linea); } /* La marca de en qué capa estás. Antes eran los propios tramos, que se encendían y se apagaban: el negro aparecía en un tercio y desaparecía del otro, sin recorrido. Ahora es una sola barra de un tercio que se DESPLAZA, y durante el gesto va siguiendo al dedo: un tercio de recorrido por cada capa. */ .hm .nivel-marca { position: absolute; left: 0; right: 0; top: 0; height: calc(100% / 3); background: var(--tinta); will-change: transform; } /* Solo al soltar. Mientras el dedo manda no hay transición, o la barra iría por detrás de él. Misma curva que las capas; la duración la escribe animarPlanos, que sabe cuánto falta. */ .hm .nivel-marca.moviendo { transition: transform .42s cubic-bezier(.25, .1, .25, 1); } /* ---- Las capas, en planos de profundidad ---- Las tres están siempre puestas; lo que cambia es a qué distancia. Cada una es una hoja opaca con su sombra: al encogerse se ve como una hoja más pequeña detrás, y eso es lo que da la profundidad. A tamaño natural la hoja tapa el recuadro entero y su sombra cae fuera, así que no se ve. El transform y la opacidad los escribe el JavaScript. */ .hm .capa { position: absolute; inset: 0; display: flex; background: var(--fondo); box-shadow: 0 8px 30px rgba(10, 10, 10, .14); /* El hueco de abajo es para los puntos, que van DENTRO del recuadro. Arriba y abajo van en variables porque la tira de la capa de las secciones se apoya en la misma banda. */ --pad-arriba: 20px; --pad-abajo: 54px; padding: var(--pad-arriba) 18px var(--pad-abajo); will-change: transform, opacity; /* Nacen invisibles. Hasta que colocarPlanos() reparte los planos, las tres están sin colocar, una encima de otra y opacas, y la última del HTML —question.it— tapa a las demás: al entrar se veía esa capa un instante antes que la que toca. aplicarPlano() escribe la opacidad en línea, así que a partir de ahí manda el JS. */ opacity: 0; } /* La duración la pone el JavaScript: depende de lo que falte. */ .hm .capa.moviendo { transition: transform .42s cubic-bezier(.25, .1, .25, 1), opacity .42s cubic-bezier(.25, .1, .25, 1); } /* ---- Puntos y cuadraditos: dentro del recuadro, pegados al borde ---- */ .hm .bajo { position: absolute; left: 0; right: 0; bottom: 18px; height: 14px; display: flex; align-items: center; justify-content: center; gap: 9px; } .hm .bajo .punto { width: 6px; height: 6px; border-radius: 50%; background: var(--gris-claro); transition: all .3s ease; } .hm .bajo .punto.activo { width: 9px; height: 9px; background: var(--tinta); } .hm .bajo .cuadrito { width: 9px; height: 9px; opacity: .45; transition: all .3s ease; } .hm .bajo .cuadrito.activo { width: 14px; height: 14px; opacity: 1; } /* ============================================================ CAPA 1 · el lema ============================================================ */ .hm .capa-lema { align-items: center; justify-content: center; text-align: center; } .hm .lema { width: 100%; transition: filter .26s ease, transform .26s ease, opacity .26s ease; } .hm .lema.cambiando { filter: blur(10px); transform: scale(.94); opacity: 0; } .hm .lema-pequeno { font-size: clamp(13px, 4.4cqw, 24px); font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--gris); margin-bottom: .3em; } /* nowrap a propósito: cada línea es una sola palabra y no debe partirse. Que quepa es cosa de ajustarLema(), que mide la palabra de verdad y baja el cuerpo si hace falta. */ .hm .lema-grande { font-size: clamp(28px, 12.5cqw, 96px); font-weight: 300; letter-spacing: .01em; line-height: 1.02; text-transform: uppercase; white-space: nowrap; } /* ---- La pista de que hay más abajo ---- El lema no es cíclico: en DE CUESTIONARSE se acaba el recorrido horizontal y ahí no hay ninguna señal de que la salida sea bajar. Esta flecha solo sale en la última línea, y se mueve despacio para que se lea como una invitación y no como un aviso. */ .hm .pista { position: absolute; left: 0; right: 0; /* Sube a 46 porque la flecha ha crecido y ahora baja 9px: con los 38 de antes llegaba a tocar los puntos. La flecha crece hacia ARRIBA, porque la caja va anclada por abajo: agrandarla no le quita sitio a los puntos. */ bottom: 46px; text-align: center; font-family: "IBM Plex Mono", monospace; /* Era de 20px y en un móvil había que buscarla. Es lo único que avisa de que debajo del lema hay dos capas más, así que ahora pesa casi tanto como una línea del lema. */ font-size: 40px; line-height: 1; color: var(--gris); opacity: 0; pointer-events: none; transition: opacity .45s ease; } .hm .capa-lema.final .pista { opacity: .8; animation: pista-baja 2s ease-in-out infinite; } @keyframes pista-baja { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(9px); } } /* ---- Los dos extremos del recorrido vertical ---- El recorrido dejó de ser un anillo. En el lema por arriba y en question.it por abajo, el gesto que no lleva a ninguna parte no mueve nada: en su lugar sale la flecha de la única salida que hay, con el mismo estilo, el mismo sitio y el mismo vaivén que la del lema. Se va sola a los 2,4s. */ .hm .capa.tope .pista { opacity: .8; animation: pista-baja 2s ease-in-out infinite; } /* En question.it la salida es hacia arriba, así que la flecha va arriba del todo. Abajo, donde está la del lema, quedaba justo debajo del enlace de la app y parecía que lo que pedía era pinchar ahí, no subir. Mismo cuerpo y mismo vaivén; cambian el sitio, la punta y el sentido del rebote. */ .hm .pista-arriba { top: 16px; bottom: auto; } .hm .capa.tope .pista-arriba { animation-name: pista-sube; } @keyframes pista-sube { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } /* ============================================================ CAPA 2 · las secciones, en mazo ============================================================ */ .hm .capa-secciones { align-items: center; justify-content: center; /* El alto de las tarjetas. La tira lo comparte, así que vive aquí y no repetido en dos sitios. */ --alto-tarjeta: min(58cqh, 100cqw); } /* ---- La tira del borde izquierdo ---- Lleva el color de la sección anterior a la que está delante, y en Cuestionar, que es la primera, no hay ninguna. Va pegada al borde del recuadro y no toca el mazo: entre las dos quedan más de 20px. Con top/bottom, alto propio y margin auto queda centrada en la misma banda que el mazo, sin depender de dónde caiga el flex. */ .hm .tira { position: absolute; left: 0; top: var(--pad-arriba); bottom: var(--pad-abajo); margin: auto 0; width: 5px; height: var(--alto-tarjeta); transition: background .3s ease, opacity .3s ease; } .hm .mazo { position: relative; /* Manda el alto, que es lo que ahora sobra; el ancho sale de la proporción 5:7. El tope en cqw es para que en una pantalla ancha no se coma el recuadro. */ height: var(--alto-tarjeta); aspect-ratio: 5 / 7; /* Las de detrás asoman a la derecha, así que el mazo se corre un poco a la izquierda para quedar centrado a ojo. */ margin-right: 14%; } .hm .tarjeta { position: absolute; inset: 0; /* Sin esquinas redondeadas: es lo que las distingue de la carta de question.it, que sí las lleva. */ border-radius: 0; box-shadow: 0 6px 18px rgba(0,0,0,.10); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding: 20px 16px; transform-origin: center; will-change: transform; } .hm .tarjeta.detras { pointer-events: none; } .hm .tarjeta-titulo { font-family: "IBM Plex Mono", monospace; font-size: clamp(14px, 5.4cqw, 26px); font-weight: 700; letter-spacing: .1em; } .hm .tarjeta-frase { font-size: clamp(12px, 3.9cqw, 18px); line-height: 1.45; max-width: 22ch; } .hm .tarjeta-boton { margin-top: 4px; font-family: "IBM Plex Mono", monospace; font-size: clamp(10px, 3.2cqw, 14px); letter-spacing: .12em; padding: 9px 18px; border: 1px solid rgba(10,10,10,.55); background: none; color: inherit; cursor: pointer; } /* ============================================================ CAPA 3 · question.it ============================================================ */ .hm .capa-qit { flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; /* Banda reservada arriba para la flecha de salida, igual que la de abajo guarda sitio para los puntos en las otras dos capas. Con los 20px de siempre, en una pantalla corta el contenido sube y la flecha le caía encima a QUESTION.IT: el hueco hay que reservarlo, no basta con mover la flecha. */ --pad-arriba: 72px; } .hm .qit-etiqueta { font-family: "IBM Plex Mono", monospace; font-size: clamp(10px, 3.2cqw, 14px); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta); } .hm .qit-linea { font-size: clamp(12px, 3.5cqw, 16px); line-height: 1.45; color: rgba(10,10,10,.7); max-width: 32ch; } /* La escena da la perspectiva; la carta gira dentro de ella. */ .hm .qit-escena { /* Un poco mayor que antes: la pregunta ha subido de cuerpo y tiene más margen dentro, y la más larga son 112 caracteres. */ height: min(58cqh, 108cqw); aspect-ratio: 5 / 7; perspective: 1200px; /* igual que questionit/index.html:211 */ } .hm .qit-carta { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; } /* Mismo remate que la app: .6s cubic-bezier(.4,0,.15,1). */ .hm .qit-carta.animada { transition: transform .6s cubic-bezier(.4, 0, .15, 1); } .hm .qit-cara { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; /* Con esquinas redondeadas, al contrario que las de sección. */ border-radius: 14px; background: var(--oro); background-image: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.08) 0%, transparent 50%); box-shadow: 0 4px 12px rgba(0,0,0,.15), 0 14px 34px rgba(0,0,0,.10); padding: clamp(22px, 7.5cqw, 34px); text-align: left; } .hm .qit-cara-frente { display: grid; grid-template-rows: 1fr auto; } /* El dorso va vacío a propósito: la pregunta nueva no asoma por detrás, entra cuando el giro ya ha terminado. */ .hm .qit-cara-dorso { transform: rotateY(180deg); } .hm .qit-texto { display: flex; align-items: center; min-height: 0; overflow: hidden; } .hm .qit-pregunta { font-size: clamp(17px, 6.2cqw, 30px); font-weight: 300; line-height: 1.4; color: #fff; /* La entrada es la que usa la app cuando cae una carta nueva (questionit/index.html:211-212, .card-scene → .landed): sube 20px y se asienta desde una escala un pelo mayor, con ese mismo easing. Allí dura .7s porque entra la carta entera; aquí es solo la línea de texto y a .7s se hacía esperar, así que va a .5s. */ transition: opacity .5s ease, transform .5s cubic-bezier(.25, .1, .25, 1); } .hm .qit-pregunta.entrando { opacity: 0; transform: translateY(20px) scale(1.02); transition: none; } .hm .qit-otra { align-self: end; font-size: clamp(10px, 3cqw, 13px); font-weight: 300; letter-spacing: .06em; color: #fff; opacity: .55; } .hm .qit-enlace { font-size: clamp(12px, 3.5cqw, 16px); color: inherit; text-decoration: none; border-bottom: 1px solid var(--gris-claro); padding-bottom: 2px; } @media (prefers-reduced-motion: reduce) { .hm .capa.moviendo, .hm .qit-carta.animada { transition: none; } .hm .capa-lema.final .pista { animation: none; } .hm .lema, .hm .qit-pregunta, .hm .tarjeta, .hm .bajo .punto, .hm .bajo .cuadrito { transition: none; } .hm .nivel-marca.moviendo { transition: none; } }