/* moova.pro · portada + landing pública (v01, 29/10/2026) Base: la portada «coming soon» v04 (../2026-10-16-moova-pro-coming-soon-v01/pagina/styles.css), variante A «vidrio sobrio». Cambios de esta ronda: - La portada deja de ser fija a pantalla completa: es la primera sección (100svh) y abajo sigue la landing (producto/). - Clases y variables con prefijo pt- para convivir con landing.css (que define --ui, --ease, .ic, .glass… con otros valores). - Sale «Private demo» y su modal. Sale la variante B (descartada el 16/10). En su lugar, arriba a la derecha, la misma pastilla de vidrio lleva a la landing («See how it works»). - El campo de correo es un componente (.pt-form): se usa arriba y en la caja final, con la misma lógica (app.js). Mobile-first. Movimiento sólo con transform y opacity. */ @font-face { font-family: "Archivo"; src: url("assets/fonts/Archivo-Variable.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; } :root { --pt-bg: #07090c; --pt-lime: #e4ff4a; --pt-ink: #eef2f6; --pt-ink-2: #9a9cb0; --pt-ink-3: #6f7284; --pt-danger: #ff6b5f; --pt-ui: "Archivo", "Helvetica Neue", Arial, sans-serif; /* Vidrio oscuro esmerilado */ --pt-glass-fill: linear-gradient(180deg, rgba(44, 48, 55, .46) 0%, rgba(22, 25, 30, .58) 100%); --pt-glass-rim: linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .08) 30%, rgba(255, 255, 255, .035) 70%, rgba(255, 255, 255, .07) 100%); --pt-glass-blur: blur(26px) saturate(150%); --pt-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 2px rgba(0, 0, 0, .3), 0 28px 70px -18px rgba(0, 0, 0, .75); --pt-ease: cubic-bezier(.22, 1, .36, 1); --pt-gutter: 16px; } * { box-sizing: border-box; } html, body { margin: 0; } /* El fondo va en html y no en body: la atmósfera de la landing vive en una capa con z-index negativo. */ html { background: var(--pt-bg); color: var(--pt-ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } body { font-family: var(--pt-ui); font-size: 15px; line-height: 1.5; font-weight: 400; } button, input { font: inherit; color: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } ::selection { background: rgba(228, 255, 74, .28); color: var(--pt-ink); } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Lo de la portada lleva su letra y su foco aunque la hoja de la landing cambie los de la página */ .pt, .pt-form { font-family: var(--pt-ui); font-weight: 400; letter-spacing: normal; } .pt :focus, .pt-form :focus { outline: none; } .pt :focus-visible, .pt-form :focus-visible { outline: 1.5px solid rgba(228, 255, 74, .8); outline-offset: 3px; } .pt-ic { flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* ---------- Vidrio: relleno, filete con luz arriba (máscara) y brillo interior ---------- */ .pt-glass { position: relative; isolation: isolate; background: var(--pt-glass-fill); -webkit-backdrop-filter: var(--pt-glass-blur); backdrop-filter: var(--pt-glass-blur); box-shadow: var(--pt-glass-shadow); } .pt-glass::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; background: var(--pt-glass-rim); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; transition: opacity .3s ease; } /* ===================================================================== PORTADA: la primera sección. Mismas capas que la v04, ahora dentro de la sección (absolute) y no de la ventana (fixed): así se desplaza con la página y el lienzo de luz no cambia de tamaño cuando la barra del navegador del teléfono se esconde. ===================================================================== */ .pt { position: relative; isolation: isolate; height: 100vh; height: 100svh; overflow: hidden; color: var(--pt-ink); background: var(--pt-bg); scroll-snap-align: start; scroll-snap-stop: always; } .pt-poster, #fondo, .pt-veil { position: absolute; inset: 0; } .pt-poster { z-index: 0; display: block; transition: opacity 1.2s var(--pt-ease); } .pt-poster img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; max-width: none; } #fondo { z-index: 1; } html[data-fondo="listo"] .pt-poster { opacity: 0; } .pt-veil { z-index: 2; pointer-events: none; background: linear-gradient(to top, rgba(7, 9, 12, .8) 0%, rgba(7, 9, 12, .45) 20%, rgba(7, 9, 12, 0) 42%), linear-gradient(to bottom, rgba(7, 9, 12, .35) 0%, rgba(7, 9, 12, 0) 14%); } /* ---------- Interfaz: no captura el puntero, sólo sus controles ---------- */ .pt-ui { position: absolute; inset: 0; z-index: 3; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; padding: max(var(--pt-gutter), env(safe-area-inset-top)) max(var(--pt-gutter), env(safe-area-inset-right)) max(26px, calc(env(safe-area-inset-bottom) + 18px)) max(var(--pt-gutter), env(safe-area-inset-left)); } .pt-ui button, .pt-ui input, .pt-ui label, .pt-ui .pt-field, .pt-ui a { pointer-events: auto; } .pt-top { display: flex; justify-content: flex-end; } /* «See how it works»: la pastilla de vidrio con filete que antes era «Private demo». La flecha, en lima, apunta abajo. */ .pt-more { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 15px 0 13px; border-radius: 999px; font-size: 13px; font-weight: 500; letter-spacing: .005em; color: rgba(238, 242, 246, .86); text-decoration: none; -webkit-tap-highlight-color: transparent; transition: color .25s ease; } .pt-more .pt-ic { color: var(--pt-lime); transition: transform .35s var(--pt-ease); } .pt-more:hover { color: var(--pt-ink); } .pt-more:hover .pt-ic { transform: translateY(2px); } .pt-more::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: rgba(255, 255, 255, .05); opacity: 0; transition: opacity .25s ease; pointer-events: none; } .pt-more:hover::after { opacity: 1; } /* ---------- Bloque inferior ---------- */ .pt-bottom { width: 100%; max-width: 420px; margin: 0 auto; text-align: center; } .pt-tagline { margin: 0 0 22px; font-weight: 500; font-stretch: 100%; font-size: 24px; line-height: 1.14; letter-spacing: -.018em; color: rgba(238, 242, 246, .94); text-wrap: balance; } /* ===================================================================== CAMPO DE CORREO (.pt-form): el de la portada v04, como componente. Se usa arriba y en la caja final. ===================================================================== */ .pt-form { color: var(--pt-ink); text-align: center; } .pt-field-label { display: block; margin: 0 0 12px; font-size: 13px; font-weight: 400; letter-spacing: .005em; color: var(--pt-ink-2); } /* Campo: pastilla de vidrio con el botón adentro. Sin borde lima permanente; el foco tiñe el filete. */ .pt-field { display: flex; align-items: center; gap: 6px; height: 52px; padding: 5px; border-radius: 999px; text-align: left; transition: box-shadow .3s ease; } .pt-field::after { /* filete del foco (lima tenue) y del error, superpuesto al filete de vidrio */ content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(180deg, rgba(228, 255, 74, .55), rgba(228, 255, 74, .22)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; transition: opacity .3s ease; pointer-events: none; } .pt-field:focus-within::after { opacity: 1; } .pt-field:focus-within { box-shadow: var(--pt-glass-shadow), 0 0 0 4px rgba(228, 255, 74, .045); } .pt-field input { flex: 1; min-width: 0; height: 100%; padding: 0 6px 0 17px; background: transparent; border: 0; font-size: 16px; font-weight: 400; letter-spacing: .005em; /* 16 px: iOS no hace zoom al enfocar */ color: var(--pt-ink); caret-color: var(--pt-lime); transition: opacity .3s ease; } .pt-field input:focus-visible { outline: none; } .pt-field input::placeholder { color: var(--pt-ink-3); } /* Error: el filete pasa a rojo tenue */ .pt-form[data-invalid] .pt-field::after { opacity: 1; background: linear-gradient(180deg, rgba(255, 107, 95, .6), rgba(255, 107, 95, .28)); } .pt-form[data-invalid] .pt-field:focus-within { box-shadow: var(--pt-glass-shadow), 0 0 0 4px rgba(255, 107, 95, .05); } /* ---------- Botón de acción (dentro del campo): A · vidrio sobrio, el lima queda en la flecha ---------- */ .pt-btn { position: relative; z-index: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 16px 0 17px; border-radius: 999px; font-size: 14px; font-weight: 500; letter-spacing: .005em; white-space: nowrap; color: var(--pt-ink); background: linear-gradient(180deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .055) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 2px rgba(0, 0, 0, .35), 0 6px 16px -6px rgba(0, 0, 0, .5); transition: opacity .25s ease, transform .25s var(--pt-ease); } .pt-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .06)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; } .pt-btn::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(255, 255, 255, .07); opacity: 0; transition: opacity .25s ease; pointer-events: none; } .pt-btn:hover::after { opacity: 1; } .pt-btn:active { transform: scale(.98); } .pt-btn[disabled] { cursor: default; transform: none; } .pt-btn .pt-label, .pt-btn .pt-arrow { transition: opacity .2s ease; } .pt-btn .pt-arrow { color: var(--pt-lime); transition: opacity .2s ease, transform .3s var(--pt-ease); } .pt-btn:hover .pt-arrow { transform: translateX(2px); } .pt-form .pt-btn:focus-visible { outline: 1.5px solid rgba(238, 242, 246, .85); outline-offset: 3px; } .pt-spin { position: absolute; left: 50%; top: 50%; margin: -8px 0 0 -8px; opacity: 0; color: var(--pt-lime); transition: opacity .2s ease; } .pt-spin circle { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 26 60; } .pt-form[data-state="sending"] .pt-btn .pt-label, .pt-form[data-state="sending"] .pt-btn .pt-arrow { opacity: 0; } .pt-form[data-state="sending"] .pt-btn .pt-spin { opacity: 1; animation: pt-spin .8s linear infinite; } @keyframes pt-spin { to { transform: rotate(360deg); } } /* ---------- Anotado / ya anotado: la pastilla se queda, cambia su contenido ---------- */ .pt-done { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 0 20px; font-size: 14.5px; font-weight: 500; color: var(--pt-ink); opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .45s var(--pt-ease), transform .45s var(--pt-ease); } .pt-done .pt-ic { color: var(--pt-lime); stroke-width: 1.7; } .pt-form[data-state="done"] .pt-field input, .pt-form[data-state="done"] .pt-field .pt-btn, .pt-form[data-state="already"] .pt-field input, .pt-form[data-state="already"] .pt-field .pt-btn { opacity: 0; pointer-events: none; } .pt-form[data-state="done"] .pt-done, .pt-form[data-state="already"] .pt-done { opacity: 1; transform: none; transition-delay: .12s; } /* ---------- Privacidad y mensajes, en el mismo renglón ---------- */ .pt-note { position: relative; margin-top: 12px; min-height: 18px; } .pt-legal { margin: 0; font-size: 12px; line-height: 18px; font-weight: 400; letter-spacing: .005em; color: var(--pt-ink-3); transition: opacity .3s ease; } .pt-note[data-msg] .pt-legal { opacity: 0; } .pt-status { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0; font-size: 13px; line-height: 18px; font-weight: 400; letter-spacing: .005em; color: var(--pt-ink-2); } .pt-note .pt-status { position: absolute; left: 0; right: 0; top: 0; transition: opacity .3s ease; } .pt-status:empty { visibility: hidden; } .pt-status[data-tone="error"] { color: var(--pt-danger); } .pt-status .pt-ic { stroke-width: 1.5; } /* ---------- Anotado: la reserva con el equipo, en el mismo renglón (respaldo si la página no navega) ---------- */ .pt-next { position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: center; margin: 0; visibility: hidden; opacity: 0; transform: translateY(4px); transition: opacity .3s ease, transform .3s var(--pt-ease), visibility 0s linear .3s; } .pt-next-link { --next-y: -3px; /* centrada en el renglón; en pantallas bajas baja un poco, porque ahí la nota se pega al campo */ position: relative; z-index: 0; display: inline-flex; align-items: center; gap: 7px; height: 24px; margin: var(--next-y) 0 0; padding: 0 11px 0 12px; border-radius: 999px; font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: .005em; color: rgba(238, 242, 246, .92); text-decoration: none; white-space: nowrap; background: linear-gradient(180deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .04) 100%) rgba(255, 255, 255, 0); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 1px 2px rgba(0, 0, 0, .3), 0 6px 14px -6px rgba(0, 0, 0, .5); -webkit-tap-highlight-color: transparent; transition: color .25s ease, background-color .25s ease, opacity .25s ease; } .pt-next-link::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; background: linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .05)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; } .pt-next-link::after { content: ""; position: absolute; inset: -9px -8px; } /* área de toque de 42 px de alto, sin ocupar lugar */ .pt-next-link .pt-arrow { width: 13px; height: 13px; color: var(--pt-lime); transition: transform .3s var(--pt-ease); } .pt-next-link:hover { color: var(--pt-ink); background-color: rgba(255, 255, 255, .05); } .pt-next-link:hover .pt-arrow { transform: translateX(2px); } .pt-next-link:active { opacity: .85; } .pt-form .pt-next-link:focus-visible { outline-offset: 2px; } .pt-form[data-state="done"] .pt-note .pt-status, .pt-form[data-state="already"] .pt-note .pt-status, .pt-form[data-state="done"] .pt-legal, .pt-form[data-state="already"] .pt-legal { opacity: 0; } .pt-form[data-state="done"] .pt-next, .pt-form[data-state="already"] .pt-next { visibility: visible; opacity: 1; transform: none; transition: opacity .6s var(--pt-ease) .32s, transform .6s var(--pt-ease) .32s; } /* Anotado, la página sale sola a /join. Mientras sale, sólo el visto; la reserva aparece si la navegación no ocurre. */ .pt-form[data-going] .pt-next { visibility: hidden; opacity: 0; transition: none; } /* Campo trampa: fuera de la vista y del árbol accesible */ .pt-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* ---------- Entrada suave de la portada (sólo con JS; sin JS todo se ve) ---------- */ .pt-js .pt-reveal { opacity: 0; transform: translateY(12px); } .pt-js.pt-in .pt-reveal { opacity: 1; transform: none; transition: opacity 1s var(--pt-ease), transform 1s var(--pt-ease); } .pt-js.pt-in .pt-more.pt-reveal { transition-delay: .25s; } .pt-js.pt-in .pt-tagline.pt-reveal { transition-delay: .4s; } .pt-js.pt-in .pt-form.pt-reveal { transition-delay: .55s; } .pt-js.pt-in.pt-settled .pt-reveal { transition-delay: 0s; } .pt-js.pt-in.pt-settled .pt-more { transition: color .25s ease; } /* ===================================================================== LA LANDING (producto/): llega después de la portada. Hasta que su hoja está aplicada, no se muestra: así no se ve un instante sin estilo y sus imágenes no compiten con el póster. app.js la carga después del evento load o al primer intento de bajar. Sin JS se muestra con la