/* ===================================================================== MOVQRA · PORTADA PUBLICA V7 · "CORRIENTE" ===================================================================== LA IDEA VISUAL --------------------------------------------------------------------- Una sala oscura donde lo unico iluminado es EL PRODUCTO y LA CORRIENTE que lo atraviesa. La marca de MOVQRA es una cinta continua que sube, dobla dos veces y baja: un solo recorrido que no se levanta del papel. Que es, literalmente, el argumento del producto -una operacion que recorre el negocio entero sin cortarse-. Asi que la cinta no es un logotipo pegado en una esquina: es la GEOMETRIA de la pagina. La M sostiene el hero, la jornada de "Un dia" traza su silueta y la corriente que reparte la venta en cuatro consecuencias es la misma linea, fina. LA REGLA QUE ORDENA TODO EL ARCHIVO --------------------------------------------------------------------- LA PORTADA VIVE EN LA PALETA DEL PRODUCTO. Esta hoja NO declara un solo color propio. Cada token --lp-* de color es un alias de app.css, asi que el dia que el producto cambie de azul la portada cambia con el: no hay dos sistemas que puedan separarse. QUE HABIA ANTES Y POR QUE ERA UN ERROR. Desde la V3 mandaba otra frase: "el mundo es oscuro, el producto es claro". Como composicion funcionaba -un dashboard blanco flotando sobre azul noche es una imagen potente-, pero como MARCA no: el visitante veia una interfaz navy con cyan neon, se registraba, entraba, y se encontraba otro producto (neutros calidos, azul corporativo #1d4ed8, teal #0d9488). Dos identidades pegadas por una URL. La portada estaba compitiendo con la aplicacion que vendia. COMO SE CONSIGUE CONTRASTE SIN SALIRSE DE LA MARCA. Con SUPERFICIE, no con otro color: claro #f7f7f6 hero, el producto, la activacion alterna #faf9f6 el problema, la jornada OSCURO #14140f la demostracion y el cierre (.lp-oscuro) Y el oscuro tampoco esta inventado: son los valores exactos del tema oscuro de app.css, el mismo que ve quien pone el producto en modo noche. Dos escenas de siete, no la pagina entera. LAS PIEZAS DE INTERFAZ NO SE TINEN NUNCA. El carrito, el corte, las metricas y el dashboard usan los tokens de app.css directamente -y solo esos-, asi que se ven como se ven dentro. .lp-oscuro redefine unicamente tokens --lp-*, por eso una pieza clara sigue siendo clara aunque el fondo que tenga detras sea negro. La comprobacion es literal: entre las marcas ZONA CLARA y FIN ZONA CLARA no puede aparecer un token --lp-* de color. TRES COMPOSICIONES, DOS CORTES --------------------------------------------------------------------- El archivo esta escrito DE TELEFONO HACIA ARRIBA. La base -sin una sola media query- es la composicion de telefono: vertical, editorial, cercana, con las piezas del producto saliendose por los lados. Sobre ella, dos cortes: >= 768 TABLETA composicion intermedia. Empieza la asimetria; el producto se va a la derecha. >= 1024 ESCRITORIO composicion espacial. Aparecen el escenario pegajoso del recorrido y la jornada trazando la silueta de la M. No hay reglas por ancho suelto: entre corte y corte todo es clamp(). Comprobado de 320 a 2560. EL PRESUPUESTO DE MOVIMIENTO --------------------------------------------------------------------- NI UNA sola animacion se repite en toda la pagina. Ninguna. La comprobacion es de una linea y conviene rehacerla al tocar esta hoja: grep -c "in""finite" public/css/landing.css -> 0 (partido en dos trozos a proposito, para que la palabra no aparezca en el comentario que afirma que no aparece y el grep siga valiendo). Las quince declaraciones de animation que hay son todas de un solo disparo: se lanzan al cargar o al entrar en pantalla, y terminan. Eso NO es una pagina quieta: es que lo que se mueve significa algo -la marca materializandose, la venta repartiendose en cuatro consecuencias, una cifra contando- en vez de un punto latiendo porque si. La sensacion de estar vivo la da el momento en que pasa algo, no el ruido de fondo. No hay parallax, no hay bucles, no hay filtros animandose y no hay ni un requestAnimationFrame permanente. El hilo de progreso de la barra usa animation-timeline:scroll(), o sea que lo lleva el compositor sin un solo listener; donde el navegador no lo entienda, sencillamente no se pinta. INDICE 0. Tokens 1. Cimientos y ritmo 2. La voz (tipografia y la etiqueta monoespaciada) 3. El sistema de movimiento 4. La marca (la M: plano, volumen, escena) 5. Botones y enlaces 6. La barra y el menu 7. Acto 01 · el hero <- incluye ZONA CLARA 8. Acto 02 · una venta, todo cambia <- incluye ZONA CLARA 9. Acto 03 · conoce MOVQRA <- incluye ZONA CLARA 10. Acto 04 · un dia con MOVQRA 11. Acto 05 · el cierre 12. El pie 13. TABLETA (>= 768) 14. ESCRITORIO (>= 1024) 15. Menos movimiento ===================================================================== */ /* ===================================================================== 0. TOKENS --------------------------------------------------------------------- Van en :root y no en .lp porque el menu de telefono vive FUERA de .lp -es fijo y tiene que poder tapar la barra pegajosa- y necesita los mismos valores. ===================================================================== */ :root { /* ================================================================= LA PALETA NO SE DECLARA AQUI: SE TOMA DEL PRODUCTO ================================================================= Esta portada NO tiene identidad cromatica propia. Cada token de color es un ALIAS de un token de app.css, asi que el dia que el producto cambie de azul, la portada cambia con el. Sin migraciones, sin dos sistemas compitiendo y sin la posibilidad de que se separen. POR QUE ESTO ES UN CAMBIO DE FONDO Y NO UN CAMBIO DE COLORES. Desde la V3 esta pagina se regia por una frase: "el mundo es oscuro, el producto es claro". Como composicion funcionaba -un dashboard blanco flotando sobre azul noche es una imagen potente- pero como MARCA era un error: el visitante veia una interfaz navy con cyan neon, se registraba, entraba, y se encontraba con otro producto -neutros calidos, azul corporativo, teal-. Dos identidades pegadas por una URL. La regla nueva es la contraria: LA PORTADA VIVE EN LA PALETA DEL PRODUCTO. El contraste se consigue con SUPERFICIE, no con otro color. Y el contraste sigue existiendo: dos de las siete escenas son oscuras. Pero su oscuro tampoco es inventado: ver la seccion 0b. ================================================================= */ /* ---------- Superficies: los tres neutros calidos del producto ---------- */ --lp-fondo: var(--bg); /* #f7f7f6 el suelo de la pagina */ --lp-piso: var(--surface-2); /* #faf9f6 la escena alterna */ --lp-panel: var(--surface); /* #ffffff una superficie */ --lp-alto: var(--surface); /* lo que se levanta sobre ella */ --lp-hondo: var(--bg); /* el fondo de las zonas oscuras */ /* ---------- Marca y acento ---------- */ --lp-marca: var(--brand-600); /* #1d4ed8 acciones, estructura */ --lp-marca-2: var(--brand-700); /* #1e3a8a su estado pulsado */ --lp-marca-txt: var(--brand-600); /* el azul que ESCRIBE */ --lp-marca-suave: var(--brand-50); /* #eff6ff su fondo tenue */ --lp-acento: var(--accent-600); /* #0d9488 teal: el filo */ --lp-acento-2: var(--accent-600); /* ---------- Tipografia ---------- */ --lp-texto: var(--text); /* #1c1c1a */ --lp-texto-2: var(--text-2); /* #6b6b66 */ --lp-texto-3: var(--text-3); /* #9a9a94 */ /* ---------- Juntas ---------- */ --lp-junta: var(--border); /* #e5e3dd */ /* La reticula del fondo. Sobre claro es TINTA muy diluida; en las escenas oscuras se vuelve luz. */ --lp-reticula: rgba(28, 28, 26, .045); --lp-vidrio: rgba(28, 28, 26, .04); --lp-junta-2: var(--border-2); /* #d8d5cd */ /* ---------- Profundidad ---------- Sobre claro la profundidad la da la ELEVACION, no el resplandor: se usan las mismas sombras que el producto para que una pieza levantada en la portada pese lo mismo que en el panel. */ --lp-sombra: var(--sh-3); --lp-sombra-p: var(--sh-5); /* ---------- La voz ---------- No hay fuente descargada, y no por descuido: la politica de contenido del sitio (.htaccess) es default-src 'self', asi que un tipo de un servicio externo sencillamente no cargaria. Lo que se hace en su lugar es TRABAJAR el sistema: el titular apretado y enorme, y una monoespaciada para toda la microtipografia, que es lo que le da a la pagina voz de instrumento y no de folleto. */ --lp-mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace; /* ---------- La escala, continua de 320 a 2560 ---------- Una sola serie de clamp() para toda la pagina. Es lo que permite que no haya una regla de tamano por cada ancho de telefono. */ --lp-d1: clamp(2rem, 21px + 3.52vw, 5.6rem); /* hero y cierre */ --lp-d2: clamp(1.8rem, 17px + 2.9vw, 4.2rem); /* titular de acto */ --lp-d3: clamp(1.4rem, 1.02rem + 1.9vw, 2.25rem); /* titulo de escena */ --lp-d4: clamp(1.05rem, .96rem + .5vw, 1.35rem); /* titulo pequeno */ --lp-cuerpo: clamp(.97rem, .93rem + .3vw, 1.12rem); --lp-micro: clamp(.66rem, .63rem + .12vw, .74rem); /* ---------- El espacio ---------- */ --lp-margen: clamp(20px, 5.4vw, 76px); --lp-ancho: min(1560px, max(1320px, 62vw)); --lp-acto: clamp(84px, 6.4vw + 44px, 170px); /* Lo que hay del borde interior de la caja al borde de la pantalla. */ --lp-sangra: calc((100vw - min(var(--lp-ancho), 100vw)) / 2 + var(--lp-margen)); --lp-barra: 60px; /* ---------- El tiempo ---------- Cuatro duraciones y dos curvas. Todo el movimiento de la pagina sale de aqui; si una animacion necesita un tiempo propio es que esta contando otra cosa, y casi siempre es que sobra. */ --lp-t-micro: 140ms; --lp-t-rapida: 260ms; --lp-t-media: 460ms; --lp-t-larga: 900ms; --lp-sal: cubic-bezier(.22, .68, .16, 1); --lp-sal-vivo: cubic-bezier(.32, 1.04, .42, 1); /* ---------- Sombras de la portada ---------- */ --lp-sombra: 0 22px 60px -22px rgba(0, 0, 0, .8); --lp-sombra-p: 0 40px 90px -30px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .07); } /* ===================================================================== 0b. LAS ESCENAS OSCURAS --------------------------------------------------------------------- Dos de las siete lo son -la demostracion y el cierre- y su oscuro NO esta inventado: son los valores EXACTOS del tema oscuro de app.css, el mismo que ve un usuario que pone el producto en modo noche. Asi que ni siquiera las zonas de contraste se salen de la marca. Solo se redefinen tokens --lp-*. Los de app.css se quedan como estan, y esa es la razon de que las piezas de interfaz que van dentro -el carrito, el corte, las metricas- sigan viendose CLARAS y reales: el producto se ve como el producto, pase lo que pase con el fondo que tiene detras. ===================================================================== */ /* LA PORTADA NO TIENE TEMA OSCURO, Y ESO ES UNA DECISION. Aqui habia dos reglas :root[data-tema="oscuro"] que bajaban un escalon mas estas escenas cuando el producto estaba en modo noche. Ya no pueden ocurrir: index.php incluye cabeza_preferencias.php con temaFijo='claro', asi que el de la portada NUNCA lleva data-tema y no hay dos pieles que mantener sincronizadas. El motivo es la direccion de arte, no el codigo. La portada cuenta una historia en siete escenas de las que DOS son oscuras a proposito; si la pagina entera se diera la vuelta, esas dos dejarian de decir nada. Lo que sigue -el bloque .lp-oscuro- es esa decision, y se queda exactamente como estaba. */ .lp-oscuro { --lp-fondo: #14140f; --lp-piso: #1e1e1a; --lp-panel: #1e1e1a; --lp-alto: #292924; --lp-hondo: #0e0e0a; --lp-marca: #2563eb; --lp-marca-2: #276af5; --lp-marca-txt: #60a5fa; --lp-marca-suave: #172554; --lp-acento: #2dd4bf; --lp-acento-2: #2dd4bf; --lp-texto: #f2f1ec; --lp-texto-2: #adaca3; --lp-texto-3: #7e7d75; --lp-junta: #383731; --lp-junta-2: #4a4941; --lp-reticula: rgba(255, 255, 255, .045); --lp-vidrio: rgba(255, 255, 255, .05); --lp-sombra: 0 8px 28px rgba(0, 0, 0, .65); --lp-sombra-p: 0 4px 10px rgba(0, 0, 0, .45), 0 12px 28px -10px rgba(0, 0, 0, .6); background: var(--lp-fondo); color: var(--lp-texto); } /* ===================================================================== 1. CIMIENTOS Y RITMO ===================================================================== */ html, body { /* Sin esto, el rebote elastico de un telefono ensena una franja blanca por arriba y por abajo. */ background: var(--lp-fondo); } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } .lp { background: var(--lp-fondo); color: var(--lp-texto); font-size: var(--lp-cuerpo); /* clip y NO hidden. overflow-x:hidden aqui convierte a .lp en contenedor de desplazamiento en el eje Y -hidden fuerza al otro eje a auto- y entonces la barra pegajosa de dentro se pega a un contenedor que nunca se desplaza: o sea que NO SE PEGA. Comprobado en la V1: al bajar, la barra desaparecia de la pantalla. clip recorta sin crear contenedor de desplazamiento. */ overflow-x: clip; } /* Safari por debajo de 16 no sabe clip. Ahi el recorte se le pide al documento, que es el unico sitio donde esconder el eje X no le quita el desplazamiento a nadie. */ @supports not (overflow-x: clip) { .lp { overflow-x: visible; } body { overflow-x: hidden; } } /* La barra es pegajosa: sin esto, saltar a un ancla deja el titular debajo de ella. Es un fallo de uso, no de estetica. */ .lp [id], .lp-cierre { scroll-margin-top: calc(var(--lp-barra) + 20px); } .lp-caja { width: 100%; max-width: var(--lp-ancho); margin-inline: auto; padding-inline: var(--lp-margen); } .lp-sec { padding-block: var(--lp-acto); position: relative; } /* La densidad NO es la misma en todas partes, y esa es justo la diferencia entre una pagina con ritmo y una lista de secciones: hero alta escena, secuencia, producto el salto media solo tipografia, y cambia de tono el mecanismo MUY ALTA la pieza central: mas aire para aislarla el producto alta cuatro escenas a pantalla completa la jornada media respiracion narrativa tu control baja texto y aire empezar minima una franja de tres renglones el cierre baja la firma */ #venta { padding-block: clamp(96px, 7.4vw + 50px, 200px); } /* La cabecera de acto. No va centrada: esta pagina se lee por el borde izquierdo y un titular centrado rompe esa columna de lectura cada vez que aparece. Lo que la limita es la medida del titular, no una caja. */ .lp-cab { margin-bottom: clamp(38px, 5vw, 76px); } .lp-cab-p { max-width: 54ch; } /* Enlace de salto. Invisible hasta que el teclado lo enfoca. */ .lp-salto { position: fixed; top: 12px; left: 12px; z-index: 400; padding: 10px 16px; border-radius: 8px; background: var(--lp-marca); color: #fff; font: var(--peso-fuerte) 13px/1 var(--font); text-decoration: none; transform: translateY(-220%); transition: transform var(--lp-t-rapida) var(--lp-sal); } .lp-salto:focus { transform: none; } /* La reticula. Casi invisible a proposito: el fondo tecnico generico -una cuadricula bien visible- es la senal mas rapida de plantilla que existe. Esta se DESCUBRE, no se anuncia: solo existe donde hay luz, porque va recortada por una mascara radial centrada en la fuente. */ .lp-amb { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .lp-amb-reticula { position: absolute; inset: -10%; background-image: linear-gradient(var(--lp-reticula) 1px, transparent 1px), linear-gradient(90deg, var(--lp-reticula) 1px, transparent 1px); background-size: 76px 76px; -webkit-mask-image: radial-gradient(112% 74% at 68% 22%, #000 0%, transparent 72%); mask-image: radial-gradient(112% 74% at 68% 22%, #000 0%, transparent 72%); opacity: .7; } /* El charco de luz de la sala: un solo degradado radial, estatico. */ .lp-amb-luz { position: absolute; inset: 0; /* Un tinte de marca, no un foco. Sobre un neutro calido basta un 7% para que la esquina superior derecha pese mas que el resto; al 22% -que es lo que hacia falta sobre azul noche- esto seria una mancha azul en mitad de una pagina blanca. */ background: radial-gradient(74% 58% at 74% 2%, color-mix(in srgb, var(--brand-600) 7%, transparent), transparent 64%), radial-gradient(60% 46% at 10% 86%, color-mix(in srgb, var(--accent-600) 5%, transparent), transparent 68%); } /* El horizonte: el suelo se oscurece hacia abajo y la seccion siguiente entra sin costura. */ .lp-amb-suelo { position: absolute; inset: auto 0 0; height: 42%; background: linear-gradient(transparent, var(--lp-fondo) 92%); } /* ===================================================================== 2. LA VOZ ===================================================================== */ .lp h1, .lp h2, .lp h3, .lp-menu h2 { margin: 0; font-weight: 700; line-height: 1.04; letter-spacing: -.034em; text-wrap: balance; } .lp p, .lp ul, .lp ol, .lp-menu p, .lp-menu ul, .lp-menu ol { margin: 0; } .lp ul, .lp ol, .lp-menu ul, .lp-menu ol { list-style: none; padding: 0; } .lp-cab-h { font-size: var(--lp-d2); max-width: 15ch; } .lp h1 em, .lp h2 em, .lp h3 em { font-style: normal; /* El unico sitio de la pagina donde el color de marca escribe. Y lo hace con --lp-marca-txt, no con --lp-marca: el azul de estructura da 4.3:1 sobre el fondo y no pasa AA. */ color: var(--lp-marca-txt); } .lp-cab-p { margin-top: clamp(20px, 2.4vw, 32px); color: var(--lp-texto-2); font-size: var(--lp-cuerpo); line-height: 1.58; } /* LA ETIQUETA MONOESPACIADA. El idioma editorial de la pagina: siempre la misma voz, siempre en pequeno, siempre en humo. Aparece encima de cada acto, dentro de las piezas de producto y al pie de las cifras. Es lo que sustituye a las pastillas de colores de la V6: una pastilla repetida ocho veces deja de ser una senal y pasa a ser papel pintado. */ .lp-eti { display: flex; align-items: center; gap: 8px; font-family: var(--lp-mono); font-size: var(--lp-micro); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--lp-texto-3); } .lp-eti i { font-style: normal; color: var(--lp-marca-txt); letter-spacing: .06em; } .lp-eti .icono { color: var(--lp-marca-txt); flex: none; } .lp-cab-eti { margin-bottom: clamp(14px, 1.8vw, 22px); } .lp-cab-eti::after { content: ""; flex: 1; height: 1px; max-width: 120px; background: linear-gradient(90deg, var(--lp-junta-2), transparent); } /* El punto de estado. NO late: es un indicador, no un adorno. Un punto parpadeando sin parar es exactamente el tipo de bucle que esta pagina no tiene. */ .lp-punto { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--lp-acento); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lp-acento) 16%, transparent); } /* ===================================================================== 3. EL SISTEMA DE MOVIMIENTO --------------------------------------------------------------------- Cuatro primitivas y nada mas. No hay una animacion inventada por elemento: hay cuatro maneras de aparecer y todo el mundo usa una. ENTRA sube 16px y se enciende. El 90% de la pagina. ESCALA entra desde 0.965. Solo las piezas de producto, que son objetos y no renglones. GRUPO un contenedor que revela a sus hijos con retraso en cascada. El retraso lo pone --i, que lo escribe el PHP o el JavaScript segun el caso. SECUENCIA la del hero. Es la unica coreografia con reloj propio y vive en la seccion 7. TODO ESTO ES ADORNO. El estado escondido solo existe dentro de .anim, que la pone un script de tres lineas en el y SOLO si el navegador puede animar Y el usuario no ha pedido menos movimiento. Sin esa clase la pagina se pinta directamente en su estado final: nunca una pagina en blanco. ===================================================================== */ .anim .lp [data-mov] { opacity: 0; transition: opacity var(--lp-t-media) var(--lp-sal), transform var(--lp-t-media) var(--lp-sal); transition-delay: calc(var(--i, 0) * 70ms); } .anim .lp [data-mov="entra"] { transform: translateY(16px); } .anim .lp [data-mov="escala"] { transform: scale(.965); } .anim .lp [data-mov="grupo"] { opacity: 1; } .anim .lp [data-mov][data-visto] { opacity: 1; transform: none; } /* Un grupo no se anima a si mismo: reparte. Y sus hijos no vuelven a escalonarse por su cuenta cuando el observador los ve, porque el grupo ya les ha dado su turno. */ .anim .lp [data-mov="grupo"] > [data-mov] { transition-delay: calc(var(--i, 0) * 70ms); } /* ===================================================================== 4. LA MARCA: LA M, QUE AHORA ES UNA IMAGEN --------------------------------------------------------------------- AQUI HABIA UNA MAQUINA, Y SE FUE ENTERA. Hasta la V7 el isotipo se inyectaba como arbol SVG: el contorno de la cinta calculado a mano, trece desplazados para fingir el canto, dos mascaras de bisel, un degradado de forma, una ola de revelado con id unico por instancia y su chispa recortada contra la silueta. Unas doscientas lineas entre PHP y CSS, mas un modulo de JavaScript para decidir cuando se revelaba cada copia. Todo eso para animar un logotipo. Ahora la M es : el asset OFICIAL -el archivo que entrego diseno, recortado a su tinta y nada mas- en una sola peticion cacheable y CERO nodos que mantener. Lo que queda aqui son veinte lineas: un halo detras -un degradado radial estatico- y una entrada de opacidad y escala. POR QUE ES MEJOR Y NO SOLO MAS BARATO: · la identidad no necesitaba una maquina; el producto si necesitaba el espacio y la atencion que la maquina se llevaba; · el asset y lo que se ve en pantalla son ahora EL MISMO archivo, asi que no pueden separarse nunca; · no hay un solo filtro ni una sola mascara animandose, que era el punto mas caro de la pagina en telefono. NADA DE ESTA SECCION TOCA LA FORMA. Se coloca, se escala, se le baja la opacidad y se le desvanece un borde por mascara para que no le estorbe al titular. Ni una sola regla redibuja, estira o recorta la M: height:auto en el logotipo y width:100%/height:auto en las escenas es lo que mantiene su proporcion (2.29:1) pase lo que pase con el ancho del contenedor. La M aparece en cuatro sitios y en dos tamanos: logotipo (barra, pie, menu) y escena (hero, cierre, fondo del menu). Nada mas. ===================================================================== */ .lp-logo { display: inline-flex; align-items: center; gap: 9px; } .lp-logo-m { width: 30px; height: auto; flex: none; display: block; } .lp-logo-txt { font: 700 17px/1 var(--font); letter-spacing: .015em; color: var(--lp-texto); } /* LA M COMO ESCENA. El halo es un degradado radial en un elemento aparte, no un drop-shadow sobre la imagen: un filtro sobre un elemento que ademas escala obliga a rehacer el desenfoque en cada cuadro de la entrada. Un degradado se pinta una vez. */ .lp-hero-m img, .lp-cierre-m img, .lp-menu-m img { display: block; width: 100%; height: auto; } /* LA OPACIDAD DE REPOSO VIVE EN LA IMAGEN, NO EN EL CONTENEDOR. La entrada es una animacion con fill "forwards" que termina en opacity:1, asi que cualquier opacidad puesta en el mismo elemento se la comia y la M acababa a plena fuerza. Separadas, el contenedor hace el fundido de 0 a 1 y la imagen sostiene su porcentaje. Y el porcentaje depende de la SUPERFICIE: sobre claro la cinta es filigrana -al 55% que aguantaba sobre azul noche seria una mancha compitiendo con el producto- y en el cierre, que es oscuro, vuelve a ser la firma. */ .lp-hero-m img { opacity: .13; } .lp-cierre-m img { opacity: .42; } .lp-m-halo { position: absolute; inset: -20% -14%; pointer-events: none; opacity: 0; } .lp-oscuro .lp-m-halo { opacity: 1; background: radial-gradient(52% 52% at 50% 46%, color-mix(in srgb, var(--brand-600) 13%, transparent), transparent 70%), radial-gradient(70% 62% at 62% 50%, color-mix(in srgb, var(--accent-600) 8%, transparent), transparent 74%); } /* La entrada: opacidad y escala, una vez, y se queda. No hay revelado por mascara, ni destello que recorra, ni nada que repetir. */ .anim .lp-hero-m, .anim .lp-cierre-m { opacity: 0; transform: scale(.965); } .anim .lp-hero-m { animation: lpMarca 1.15s var(--lp-sal) .25s forwards; } .anim .lp-cierre-m[data-visto] { animation: lpMarca 1.15s var(--lp-sal) forwards; } @keyframes lpMarca { to { opacity: 1; transform: none; } } /* ===================================================================== 5. BOTONES Y ENLACES --------------------------------------------------------------------- El boton de la portada es mas alto y mas apretado de letra que el .btn del panel -es un CTA, no un control de una tabla- pero su COLOR sale de los mismos tokens: --btn-primario-bg y su hover. Si el producto cambia el azul de sus acciones, el CTA cambia con el. Antes el principal era BLANCO, y tenia su razon: sobre azul noche, blanco sobre #0077FF daba 4.1:1 y no pasaba AA. En la paleta del producto esa restriccion desaparece -#1d4ed8 sobre blanco da 7.0:1- y el boton puede ser el que de verdad es. ===================================================================== */ .lp-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 22px; border: 1px solid transparent; border-radius: 10px; font: 600 15px/1 var(--font); letter-spacing: -.01em; text-decoration: none; white-space: nowrap; cursor: pointer; transform: translate(var(--ix, 0), var(--iy, 0)); transition: transform var(--lp-t-rapida) var(--lp-sal), background var(--lp-t-rapida) var(--lp-sal), border-color var(--lp-t-rapida) var(--lp-sal), color var(--lp-t-rapida) var(--lp-sal); } .lp-btn-gde { min-height: 54px; padding: 0 26px; font-size: 16px; } .lp-btn .icono { flex: none; } /* El mismo boton que el del panel, token a token: si el producto cambia el azul de sus acciones, el CTA de la portada cambia con el. */ .lp-btn-luz { background: var(--btn-primario-bg); color: var(--btn-primario-texto); box-shadow: var(--sh-marca); } .lp-btn-luz:hover { background: var(--btn-primario-bg-hover); } .lp-btn-borde { background: transparent; color: var(--lp-texto); border-color: var(--lp-junta-2); } .lp-btn-borde:hover { background: var(--lp-vidrio); border-color: var(--lp-texto-3); } .lp-btn:active { transform: translate(var(--ix, 0), var(--iy, 0)) scale(.978); } /* ---------- EL PRECIO ---------- Que el precio sea visible desde el primer viewport es una decision comercial, no de composicion: esconderlo hasta el final solo sirve para que alguien llegue abajo y descubra que no le encaja. */ .lp-precio { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; color: var(--lp-texto); } .lp-precio b { font: 700 clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem)/1 var(--font); letter-spacing: -.035em; font-variant-numeric: tabular-nums; } .lp-precio-mon { font-family: var(--lp-mono); font-size: var(--lp-micro); letter-spacing: .14em; color: var(--lp-texto-2); } .lp-precio-nota { font-family: var(--lp-mono); font-size: var(--lp-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--lp-acento); } .lp-precio-nota::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 8px 3px 0; border-radius: 50%; background: currentColor; vertical-align: middle; } .lp-precio-gde b { font-size: clamp(2.4rem, 1.6rem + 3vw, 3.6rem); } .lp-hero-precio { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; margin-top: clamp(22px, 3vw, 30px); padding-top: clamp(20px, 2.6vw, 26px); border-top: 1px solid var(--lp-junta); } .lp-hero-precio-txt { font-size: .88rem; line-height: 1.45; color: var(--lp-texto-3); max-width: 34ch; } .lp-cierre-acc { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(16px, 3vw, 30px); margin-top: clamp(28px, 4vw, 40px); } .lp-txtlink { color: var(--lp-texto-2); font: 600 14px/1 var(--font); text-decoration: none; padding: 10px 6px; transition: color var(--lp-t-rapida) var(--lp-sal); } .lp-txtlink:hover { color: var(--lp-texto); } .lp :focus-visible, .lp-menu :focus-visible, .lp-salto:focus-visible { outline: 2px solid var(--lp-marca); outline-offset: 3px; border-radius: 6px; } /* ===================================================================== 6. LA BARRA Y EL MENU --------------------------------------------------------------------- DOS ESTADOS. Sobre el hero la barra no tiene fondo: lo que hay detras es el entorno del producto y taparlo con un panel lo mata. En cuanto empieza a pasarle contenido por debajo se vuelve superficie. El cambio NO lo decide un listener de scroll: lo decide un observador sobre un centinela invisible al principio de la pagina. Un atributo, cero calculos por cuadro. ===================================================================== */ .lp-barra { position: sticky; top: 0; z-index: 120; transition: background-color var(--lp-t-rapida) var(--lp-sal), box-shadow var(--lp-t-rapida) var(--lp-sal); } .lp-barra[data-pegada="1"] { background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: inset 0 -1px 0 var(--lp-junta); } /* El desenfoque de fondo SOLO en escritorio y solo si el navegador lo entiende: en un telefono medio, una capa con backdrop-filter pegada arriba obliga a recomponer la pantalla entera en cada cuadro de desplazamiento. Es una de las cosas que hacian que la V6 se arrastrara. */ @media (min-width: 1024px) { @supports (backdrop-filter: blur(1px)) { .lp-barra[data-pegada="1"] { background: color-mix(in srgb, var(--surface) 76%, transparent); backdrop-filter: blur(14px) saturate(140%); } } } .lp-barra-fila { display: flex; align-items: center; gap: 16px; height: var(--lp-barra); } /* EL HILO DE PROGRESO. Sin un solo listener: lo lleva una linea de tiempo de desplazamiento, o sea el compositor. Donde el navegador no la entienda, el hilo se queda en cero y no se pinta. Es adorno; que falte no le quita nada a nadie. */ .lp-hilo { position: absolute; inset: auto 0 0; height: 2px; overflow: hidden; pointer-events: none; } .lp-hilo i { display: block; height: 100%; background: linear-gradient(90deg, var(--lp-marca), var(--lp-acento)); transform: scaleX(0); transform-origin: left; } @supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) { .lp-hilo i { animation: lpHilo linear; animation-timeline: scroll(root block); } @keyframes lpHilo { to { transform: scaleX(1); } } } } .lp-barra-logo { display: flex; align-items: center; min-height: 44px; text-decoration: none; margin-right: auto; } /* LA NAVEGACION. Oculta por debajo de 1024: cuatro anclas al lado del logotipo y de dos botones no caben, y apretarlas hasta que quepan es peor que darles una pantalla entera. */ .lp-nav { display: none; } .lp-barra-acc { display: flex; align-items: center; gap: 10px; } .lp-solo-ancho { display: none; } /* El boton del menu LLEVA LA PALABRA. En una barra que por debajo de 1024 solo tiene el logotipo a la izquierda sobra sitio para decir que es, y un rotulo se pulsa mejor -y se entiende antes- que tres rayas sueltas. */ .lp-menu-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 14px; border: 1px solid var(--lp-junta-2); border-radius: 10px; background: transparent; color: var(--lp-texto); font: 600 13px/1 var(--font); letter-spacing: .02em; cursor: pointer; transition: border-color var(--lp-t-rapida) var(--lp-sal), background var(--lp-t-rapida) var(--lp-sal); } .lp-menu-btn:hover { background: var(--lp-vidrio); } .lp-menu-rayas { display: grid; gap: 4px; width: 16px; } .lp-menu-rayas i { height: 1.5px; background: currentColor; border-radius: 2px; transition: transform var(--lp-t-rapida) var(--lp-sal-vivo); } .lp-menu-btn[aria-expanded="true"] .lp-menu-rayas i:first-child { transform: translateY(2.75px) rotate(45deg); } .lp-menu-btn[aria-expanded="true"] .lp-menu-rayas i:last-child { transform: translateY(-2.75px) rotate(-45deg); } /* ---------- EL MENU: UNA PANTALLA, NO UN CAJON ---------- Cuatro enlaces de catorce pixeles deslizandose desde la derecha es lo que hace todo el mundo. Aqui el menu es una pantalla de la marca: los enlaces numerados y grandes son lo unico que hay, y la M entra enorme por la esquina de abajo, que es la misma licencia de composicion que usa el hero. */ .lp-velo { position: fixed; inset: 0; z-index: 190; background: var(--velo); opacity: 0; transition: opacity var(--lp-t-media) var(--lp-sal); } .lp-velo[data-abierto] { opacity: 1; } .lp-menu { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; padding: 0 var(--lp-margen) calc(24px + env(safe-area-inset-bottom)); background: var(--lp-fondo); color: var(--lp-texto); overflow: hidden auto; overscroll-behavior: contain; opacity: 0; transform: translateY(-14px); transition: opacity var(--lp-t-media) var(--lp-sal), transform var(--lp-t-media) var(--lp-sal); } .lp-menu[data-abierto] { opacity: 1; transform: none; } .lp-menu-m { position: absolute; right: -30%; bottom: -8%; width: 118%; opacity: .1; pointer-events: none; } .lp-menu-cab { position: relative; display: flex; align-items: center; justify-content: space-between; height: var(--lp-barra); flex: none; } .lp-menu-cerrar { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--lp-junta-2); border-radius: 10px; background: transparent; color: var(--lp-texto); cursor: pointer; } .lp-menu-enlaces { position: relative; margin-top: clamp(18px, 4vh, 44px); flex: 1 1 auto; } .lp-menu-enlaces li { border-top: 1px solid var(--lp-junta); } .lp-menu-enlaces li:last-child { border-bottom: 1px solid var(--lp-junta); } .lp-menu-enlaces a { display: flex; align-items: center; gap: 16px; padding: clamp(15px, 2.4vh, 22px) 0; color: var(--lp-texto); font: 600 clamp(1.35rem, 5.4vw, 1.9rem)/1.1 var(--font); letter-spacing: -.03em; text-decoration: none; } .lp-menu-enlaces i { font: 500 var(--lp-micro)/1 var(--lp-mono); font-style: normal; letter-spacing: .14em; color: var(--lp-marca-txt); width: 2.4em; flex: none; } .lp-menu-enlaces a span { flex: 1; } .lp-menu-enlaces a .icono { color: var(--lp-texto-3); flex: none; } .lp-menu-pie { position: relative; display: grid; gap: 10px; margin-top: clamp(22px, 4vh, 40px); flex: none; } .lp-menu-pie .lp-btn { width: 100%; } /* La cascada de entrada. Cada pieza del menu lleva su --i desde el PHP, asi que el escalonado no depende de nadie mas. */ .anim .lp-menu-enlaces li, .anim .lp-menu-pie { opacity: 0; transform: translateY(14px); } .anim .lp-menu[data-abierto] .lp-menu-enlaces li, .anim .lp-menu[data-abierto] .lp-menu-pie { opacity: 1; transform: none; transition: opacity var(--lp-t-media) var(--lp-sal), transform var(--lp-t-media) var(--lp-sal); transition-delay: calc(60ms + var(--i, 0) * 48ms); } /* Con el menu abierto el documento no se desplaza por debajo. */ body[data-sin-scroll] { overflow: hidden; } /* ===================================================================== 7. ACTO 01 · EL HERO --------------------------------------------------------------------- TELEFONO (la base): vertical y editorial. Etiqueta, titular enorme, una linea, las acciones, tres hechos, y DEBAJO el producto -que se sale por la derecha- con la M enorme detras, cortada por los dos lados. La M no pasa por detras del titular: ahi el texto tiene que leerse y una cinta cyan detras de blanco es un problema de contraste, no una composicion. ESCRITORIO (seccion 17): dos columnas, la escena a la derecha saliendose del viewport, la M enorme detras tapada por el centro. ===================================================================== */ .lp-hero { position: relative; isolation: isolate; padding-top: clamp(26px, 7vw, 56px); padding-bottom: clamp(34px, 7vw, 60px); overflow: hidden; } .lp-hero-fila { position: relative; z-index: 2; } .lp-hero-eti { margin-bottom: clamp(18px, 3vw, 26px); align-items: flex-start; } .lp-hero-eti .lp-punto { margin-top: .34em; } .lp-hero-h { font-size: var(--lp-d1); max-width: 15ch; } /* El titular se revela POR RENGLONES detras de una mascara. Es la unica animacion de texto de la pagina y solo ocurre una vez. */ .lp-ln { display: block; overflow: hidden; } .lp-ln > span { display: block; } .lp-hero-sub { margin-top: clamp(18px, 3vw, 28px); max-width: 46ch; color: var(--lp-texto-2); line-height: 1.58; } .lp-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(26px, 4vw, 40px); } .lp-hero-ctas .lp-btn { flex: 1 1 auto; } /* ---------- LA M DEL HERO ---------- Detras del producto, no al lado. Al lado seria un logotipo grande compitiendo con el titular; detras es una estructura sobre la que el dashboard se apoya. Que la ventana le tape el centro es el efecto: lo que asoma por arriba son las dos cumbres y por los lados las dos patas, o sea justo lo que hace reconocible al isotipo. */ .lp-hero-m { position: absolute; z-index: 1; left: -34%; top: 32%; width: 178%; pointer-events: none; /* Se desvanece por arriba para no estorbarle al titular. */ -webkit-mask-image: linear-gradient(transparent, #000 26%); mask-image: linear-gradient(transparent, #000 26%); } /* ---------- >>> ZONA CLARA: EL PRODUCTO <<< ---------- A partir de aqui y hasta la marca de FIN, ni un token de COLOR de la portada: esto son los componentes reales del sistema con los tokens claros de app.css, flotando iluminados sobre el azul noche. */ .lp-hero-prod { position: relative; z-index: 2; --lp-corte: 128px; margin-top: clamp(40px, 9vw, 72px); /* Se sale por la derecha. Una captura completa y centrada se lee como una captura; una cortada por el borde de la pantalla se lee como un objeto que esta ahi y del que ves un trozo. */ margin-right: calc(var(--lp-sangra) * -1 - 6%); } .lp-vent { max-height: 62svh; overflow: hidden; border-radius: 14px; /* La sombra es de la PORTADA, no del producto: es como se posa el objeto claro sobre el mundo oscuro. Por eso va en literal y no con un token de ninguno de los dos lados. */ box-shadow: var(--sh-5); border: 1px solid var(--border); background: var(--surface); color: var(--text); overflow: hidden; } .lp-hero-prod::after { content: ""; position: absolute; z-index: 2; inset: auto 0 0; height: var(--lp-corte); pointer-events: none; background: linear-gradient(transparent, var(--lp-fondo) 92%); } .lp-vent-barra { display: flex; align-items: center; gap: 12px; padding: 0 14px; height: 38px; background: var(--surface-2); border-bottom: 1px solid var(--border); } .lp-vent-puntos { display: flex; gap: 6px; } .lp-vent-puntos i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-2); } .lp-vent-ruta { display: flex; align-items: center; gap: 5px; font-size: var(--fs-2xs); color: var(--text-3); } .lp-vent-ruta .icono { color: var(--text-3); } .lp-vent-cuerpo { display: flex; background: var(--bg); } /* El lateral no cabe en un telefono y ademas ahi el sistema de verdad tampoco lo ensena: se va y el contenido ocupa el ancho. */ .lp-vent-lat { display: none; } .lp-vent-main { flex: 1; min-width: 0; display: grid; gap: 12px; padding: 14px; } .lp-vent-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .lp-vent-cab h3 { margin: 0; font: var(--peso-fuerte) var(--fs-lg)/1.2 var(--font); letter-spacing: -.02em; color: var(--text); } .lp-vent-cab span { font-size: var(--fs-2xs); color: var(--text-3); } .lp-vent-cab-min h3 { font-size: var(--fs-sm); } .lp-vent-act { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 9px; background: var(--ok-bg, #dcfce7); font-size: var(--fs-xs); } .lp-vent-act-punto { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--ok); } .lp-vent-act-txt { flex: 1; min-width: 0; color: var(--text-2); } .lp-vent-act-num { font-weight: var(--peso-fuerte); font-variant-numeric: tabular-nums; color: var(--ok); white-space: nowrap; } .lp-vent-panel { border: 1px solid var(--border); border-radius: var(--r-md, 10px); background: var(--surface); padding: 12px; display: grid; gap: 8px; } /* Las barras crecen desde el suelo. scaleY sobre transform-origin bottom: no recalcula el alto de nada y el navegador reserva el espacio desde el primer pintado. Cero salto de composicion. */ .lp-barras { display: flex; align-items: flex-end; gap: 6px; height: 64px; } .lp-barras i { flex: 1; height: var(--h); border-radius: 3px 3px 2px 2px; background: linear-gradient(var(--brand-600), color-mix(in srgb, var(--brand-600) 62%, #fff)); transform-origin: bottom; } .anim .lp-barras i { transform: scaleY(0); } .anim .lp-vent-panel .lp-barras i { animation: lpBarra .62s var(--lp-sal-vivo) forwards; animation-delay: calc(1.05s + var(--i) * 65ms); } @keyframes lpBarra { to { transform: scaleY(1); } } /* El renglon: la fila que usan TODAS las piezas de producto de la pagina. Una sola definicion para el hero, las cuatro escenas del recorrido, los cuatro efectos de la firma y la pieza del valor. */ .lp-fila { display: flex; align-items: center; gap: 10px; min-height: 34px; font-size: var(--fs-sm); color: var(--text); } .lp-fila + .lp-fila { border-top: 1px solid var(--border-sutil); padding-top: 8px; } .lp-fila-crece { flex: 1; min-width: 0; color: var(--text-2); } .lp-fila-num { font-variant-numeric: tabular-nums; font-weight: var(--peso-fuerte); color: var(--text); } .lp-fila-num-gde { font-size: var(--fs-lg); } .lp-fila-sub { font-size: var(--fs-xs); min-height: 26px; } .lp-fila-total { border-top: 1px solid var(--border-2); margin-top: 2px; padding-top: 10px; } .lp-fila-total strong { color: var(--text); font-size: var(--fs-sm); } .lp-fila .prod-linea { min-width: 0; } /* El delta. Es el unico componente que esta portada anade al producto, y existe porque el sistema lo pinta con la tabla de movimientos entera alrededor: aqui hace falta el dato desnudo. */ .lp-delta { font-variant-numeric: tabular-nums; font-size: var(--fs-xs); font-weight: var(--peso-fuerte); padding: 2px 7px; border-radius: 999px; white-space: nowrap; } .lp-delta-baja { background: var(--error-bg, #fee2e2); color: var(--error); } .lp-delta-sube { background: var(--ok-bg, #dcfce7); color: var(--ok); } /* ---------- LAS DOS PIEZAS QUE SE SALEN ---------- No son tarjetas de adorno: son partes del producto proyectadas FUERA de su interfaz, cada una con un hilo que la ata al sitio del que sale. Es la licencia que convierte una captura en una escena. */ .lp-proy { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--surface); box-shadow: var(--sh-3); border: 1px solid var(--border); font-size: var(--fs-xs); color: var(--text); } .lp-proy strong { display: block; font-size: var(--fs-sm); } .lp-proy span { color: var(--text-2); } .lp-proy-ico { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 9px; background: var(--crit-bg, #ffedd5); color: var(--crit); } /* El hilo: una linea corta que sale del borde de la pieza hacia la ventana. No mide nada, no se mueve, y es lo que dice "esto viene de ahi" sin escribirlo. */ .lp-proy-hilo { position: absolute; height: 1px; background: linear-gradient(90deg, transparent, var(--lp-marca)); opacity: .45; } .lp-proy-alerta { top: -22px; right: -5%; max-width: min(80%, 300px); } .lp-proy-alerta .lp-proy-hilo { left: 14px; bottom: -14px; width: 46px; transform: rotate(62deg); transform-origin: left; } .lp-proy-ticket { display: none; left: calc(var(--lp-margen) * -1 - 4px); bottom: 14px; padding: 12px 14px; } .lp-proy-ticket .lp-proy-hilo { right: 10px; top: -12px; width: 40px; transform: rotate(-58deg); transform-origin: right; } .lp-ticket { margin: 0; font: 400 11px/1.45 "Courier New", Courier, monospace; color: var(--text); white-space: pre; } .lp-ticket b { font-weight: 700; } /* <<< FIN ZONA CLARA */ /* ---------- LA SECUENCIA DEL HERO ---------- Dos segundos, una sola vez, y todo en transform y opacity. 0.00 el fondo, ya pintado 0.15 el titular, renglon a renglon 0.30 la M empieza a materializarse (seccion 4) 0.70 la ventana del producto aterriza 1.05 las barras crecen desde el suelo 1.50 LA VENTA SE REGISTRA: el renglon de actividad aparece 1.70 la alerta se proyecta fuera de la interfaz 1.92 el ticket nace 2.20 quieto No es un cargador ni una cortina: la pagina es legible desde el primer cuadro y esto ocurre encima. Si no hay .anim -sin IntersectionObserver o con menos movimiento pedido- no ocurre nada de esto y la escena se pinta montada. */ .anim .lp-ln > span { transform: translateY(105%); } .anim .lp-hero-sub, .anim .lp-hero-ctas, .anim .lp-hero-precio, .anim .lp-hero-eti { opacity: 0; } .anim .lp-vent { opacity: 0; transform: translateY(26px) scale(.985); } .anim .lp-vent-act { opacity: 0; transform: translateY(-8px); } .anim .lp-proy { opacity: 0; transform: translateY(14px) scale(.96); } .anim .lp-ln > span { animation: lpSube .85s var(--lp-sal) forwards; } .anim .lp-ln:nth-child(1) > span { animation-delay: .15s; } .anim .lp-ln:nth-child(2) > span { animation-delay: .27s; } .anim .lp-hero-eti { animation: lpAparece .7s var(--lp-sal) .05s forwards; } .anim .lp-hero-sub { animation: lpAparece .7s var(--lp-sal) .5s forwards; } .anim .lp-hero-ctas { animation: lpAparece .7s var(--lp-sal) .62s forwards; } .anim .lp-hero-precio { animation: lpAparece .7s var(--lp-sal) .74s forwards; } .anim .lp-vent { animation: lpMonta .9s var(--lp-sal) .7s forwards; } .anim .lp-vent-act { animation: lpMonta .6s var(--lp-sal-vivo) 1.5s forwards; } .anim .lp-proy-alerta { animation: lpMonta .7s var(--lp-sal-vivo) 1.7s forwards; } .anim .lp-proy-ticket { animation: lpMonta .7s var(--lp-sal-vivo) 1.92s forwards; } @keyframes lpSube { to { transform: none; } } @keyframes lpAparece { to { opacity: 1; } } @keyframes lpMonta { to { opacity: 1; transform: none; } } /* ===================================================================== 8. ACTO 02 · UNA VENTA. TODO CAMBIA. --------------------------------------------------------------------- LA COMPOSICION. Un bloque OSCURO que manda -la accion- y cuatro LAJAS CLARAS que obedecen -el estado del sistema-. Esa es la razon de que el origen no sea otra tarjeta blanca: si los cinco fueran iguales, la seccion seria una rejilla de cinco tarjetas y no se entenderia quien causa que. Y las cuatro lajas no son tarjetas: no tienen borde, ni sombra, ni icono metido en un cuadrado. Son TROZOS DE INTERFAZ, con su rotulo fuera, sobre el fondo oscuro. Lo que las separa es su propia superficie clara. LA CRONOLOGIA, que es el argumento entero: 0ms el boton se pulsa 60ms la corriente sale del origen 60-180 recorre el riel 180ms LOS CUATRO CAMBIAN A LA VEZ Los cuatro comparten EXACTAMENTE el mismo retraso. Escalonarlos -que es lo que pedia el ojo- convertiria "todo pasa en el mismo segundo" en "pasan cuatro cosas seguidas", que es justo lo contrario de lo que hace el producto. NADA DE ESTO SE MIDE. El riel es el ::before de la lista y cada efecto se engancha con su propio codo. Funciona igual en columna -telefono- que en dos columnas -escritorio-, con cuatro efectos o con seis. ===================================================================== */ .lp-sinc { display: grid; gap: 0; } /* ---------- EL ORIGEN ---------- */ .lp-sinc-origen { position: relative; padding: clamp(20px, 4vw, 30px); border-radius: 16px; background: radial-gradient(120% 130% at 12% 0%, color-mix(in srgb, var(--lp-marca) 14%, transparent), transparent 62%), var(--lp-panel); box-shadow: inset 0 0 0 1px var(--lp-junta); } .lp-sinc-cifra { margin-top: 14px; font: 700 clamp(2.4rem, 9vw, 3.4rem)/1 var(--font); letter-spacing: -.04em; font-variant-numeric: tabular-nums; } .lp-sinc-meta { margin-top: 8px; font-family: var(--lp-mono); font-size: var(--lp-micro); letter-spacing: .07em; color: var(--lp-texto-3); } .lp-sinc[data-sinc="1"] .lp-sinc-btn { animation: lpPulsa 420ms var(--lp-sal); } @keyframes lpPulsa { 40% { transform: scale(.972); box-shadow: var(--sh-1); } 100% { transform: none; } } /* La salida: el tramo de corriente que va del origen al riel. */ /* EL ESTADO POR OMISION DE LA CORRIENTE ES: DIBUJADA. Esto no es un adorno, es INFORMACION -dice que la venta alimenta a los cuatro-, asi que el estado apagado solo puede existir dentro de .anim. Sin JavaScript, sin IntersectionObserver o con menos movimiento pedido, la seccion se pinta ya conectada. La primera version tenia el scaleY(0) suelto y ahi la corriente sencillamente no aparecia: cuatro trozos de interfaz sueltos sin nada que dijera de donde salian. */ .lp-sinc-salida { position: absolute; left: 50%; bottom: calc(var(--lp-corriente) * -1); width: 2px; height: var(--lp-corriente); margin-left: -1px; background: linear-gradient(var(--lp-marca), var(--lp-acento-2)); transform-origin: top; } .lp-sinc { --lp-corriente: 42px; } .js .lp-sinc-salida { transform: scaleY(0); } .js .lp-sinc[data-sinc="1"] .lp-sinc-salida { transform: scaleY(1); } .anim .lp-sinc[data-sinc="1"] .lp-sinc-salida { transform: scaleY(1); transition: transform 120ms linear 60ms; } /* ---------- LOS CUATRO EFECTOS ---------- */ .lp-efectos { position: relative; margin-top: calc(var(--lp-corriente) + clamp(8px, 2vw, 16px)); display: grid; gap: clamp(26px, 4vw, 38px); } /* EL RIEL. Es el ::before de la lista, o sea que mide exactamente lo que mide la lista pase lo que pase. */ .lp-efectos::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(var(--lp-marca), var(--lp-acento-2)); transform-origin: top; opacity: .8; } .js .lp-efectos::before { transform: scaleY(0); } .js .lp-sinc[data-sinc="1"] .lp-efectos::before { transform: scaleY(1); } .anim .lp-sinc[data-sinc="1"] .lp-efectos::before { transform: scaleY(1); transition: transform 120ms linear 60ms; } .lp-efecto { position: relative; padding-left: clamp(18px, 3.4vw, 30px); } /* El codo: el tramo corto que engancha cada efecto al riel. */ .lp-efecto::before { content: ""; position: absolute; left: 0; top: 9px; width: clamp(12px, 2.4vw, 22px); height: 1px; background: var(--lp-acento-2); transform-origin: left; opacity: .75; } .js .lp-efecto::before { transform: scaleX(0); } .js .lp-sinc[data-sinc="1"] .lp-efecto::before { transform: scaleX(1); } .anim .lp-sinc[data-sinc="1"] .lp-efecto::before { transform: scaleX(1); transition: transform 110ms linear 175ms; } .lp-efecto > .lp-eti { margin-bottom: 10px; } /* LA LAJA. >>> ZONA CLARA <<< Sin borde y sin sombra a proposito: lo que la separa del fondo es su propia superficie. Los anchos se escalonan para que las cuatro no formen una columna de rectangulos identicos. */ .lp-efecto-cuerpo { border-radius: 12px; background: var(--surface); color: var(--text); padding: 12px 14px; display: grid; gap: 6px; box-shadow: var(--sh-3); border: 1px solid var(--border); } .lp-efecto:nth-child(2) .lp-efecto-cuerpo { margin-right: clamp(0px, 4vw, 44px); } .lp-efecto:nth-child(3) .lp-efecto-cuerpo { margin-right: clamp(0px, 9vw, 116px); } .lp-efecto:nth-child(4) .lp-efecto-cuerpo { margin-right: clamp(0px, 2vw, 22px); } .lp-efecto-nota { font-size: var(--fs-xs); color: var(--text-3); } .lp-efecto-ticket { grid-template-columns: auto 1fr; align-items: center; gap: 14px; } /* EL CAMBIO DE ESTADO. Las dos cifras ocupan la MISMA celda de una rejilla, asi que el renglon no cambia de ancho cuando muta: sin esto el "$2,934.00" y el "$3,240.00" moverian todo lo que tienen al lado. Y el estado por omision es el FINAL -la cifra nueva-, para que sin JavaScript la seccion se lea ya contada. */ .lp-mut { display: inline-grid; font-variant-numeric: tabular-nums; font-weight: var(--peso-fuerte); color: var(--text); justify-items: end; } .lp-mut b { grid-area: 1 / 1; font-weight: inherit; } .lp-mut-gde { font-size: var(--fs-lg); } .lp-mut b:first-child { opacity: 0; } .js .lp-sinc .lp-mut b:first-child { opacity: 1; } .js .lp-sinc .lp-mut b:last-child { opacity: 0; transform: translateY(7px); } .js .lp-sinc[data-sinc="1"] .lp-mut b:first-child { opacity: 0; transform: translateY(-7px); } .js .lp-sinc[data-sinc="1"] .lp-mut b:last-child { opacity: 1; transform: none; } .anim .lp-sinc .lp-mut b { transition: opacity 260ms var(--lp-sal), transform 260ms var(--lp-sal); transition-delay: 180ms; } /* El ticket NACE: no estaba y ahora esta. Es el unico de los cuatro que no muta una cifra, porque el ticket no cambia de valor: aparece. */ .js .lp-sinc .lp-ticket-nace { opacity: 0; transform: translateY(8px) scale(.97); } .js .lp-sinc[data-sinc="1"] .lp-ticket-nace { opacity: 1; transform: none; } .anim .lp-sinc[data-sinc="1"] .lp-ticket-nace { opacity: 1; transform: none; transition: opacity 320ms var(--lp-sal-vivo) 180ms, transform 320ms var(--lp-sal-vivo) 180ms; } /* El destello: la laja se enciende un instante en el momento del cambio. Es un box-shadow que se apaga, no un filtro. */ .lp-sinc[data-sinc="1"] .lp-efecto-cuerpo { animation: lpFlash 720ms var(--lp-sal) 175ms; } @keyframes lpFlash { 0% { box-shadow: var(--sh-3), 0 0 0 0 color-mix(in srgb, var(--accent-600) 0%, transparent); } 18% { box-shadow: var(--sh-3), 0 0 0 2px var(--accent-600); } 100% { box-shadow: var(--sh-3), 0 0 0 0 color-mix(in srgb, var(--accent-600) 0%, transparent); } } /* <<< FIN ZONA CLARA */ .lp-sinc-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: clamp(30px, 4.5vw, 48px); color: var(--lp-texto-2); font-size: var(--lp-cuerpo); } .lp-sinc-pie b { color: var(--lp-texto); } /* ===================================================================== 9. ACTO 03 · CONOCE MOVQRA --------------------------------------------------------------------- TELEFONO Y TABLETA (la base): cuatro actos verticales a sangre. Cada uno es su rotulo, su titulo, una linea, tres datos y el trozo de interfaz saliendose por la derecha. Ni escenario, ni posicion pegajosa, ni una sola medicion: el JavaScript de esta seccion no se monta por debajo de 1024. ESCRITORIO (seccion 17): el bloque mide cuatro pantallas de alto, su interior se clava y lo que cambia al bajar es la ESCENA. Las escenas se apilan con GRID y no con position:absolute. La diferencia importa: apiladas en la misma celda de una rejilla, el contenedor sigue midiendo lo que mide la mas alta y no hay que darle una altura a mano que se quede corta en cuanto cambie un texto. ===================================================================== */ .lp-recorrido { padding-bottom: 0; } .lp-indice { display: none; } .lp-escenas { display: grid; gap: clamp(64px, 11vw, 120px); } .lp-esc { display: grid; gap: clamp(26px, 5vw, 40px); } .lp-esc-txt > .lp-eti { margin-bottom: 16px; } .lp-esc h3 { font-size: var(--lp-d3); max-width: 17ch; } .lp-esc-txt > p { margin-top: 14px; max-width: 46ch; color: var(--lp-texto-2); line-height: 1.58; } /* LA PIEZA. >>> ZONA CLARA <<< El trozo de interfaz. Se sale por la derecha igual que la ventana del hero: ensenar solo la parte necesaria es mas elegante -y mas creible- que centrar una captura completa. */ .lp-pieza { border-radius: 14px; background: var(--surface); color: var(--text); padding: 14px; display: grid; gap: 8px; box-shadow: var(--sh-5); border: 1px solid var(--border); margin-right: calc(var(--lp-sangra) * -1); border-radius: 14px 0 0 14px; padding-right: clamp(20px, 5vw, 34px); } .lp-pieza-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .lp-pieza-cab strong { font-size: var(--fs-sm); color: var(--text); } .lp-pieza-cab span { font-size: var(--fs-2xs); color: var(--text-3); } .lp-pieza-estado { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; background: var(--ok-bg, #dcfce7); color: var(--ok); } .lp-pieza-estado > div { flex: 1; min-width: 0; } .lp-pieza-estado strong { display: block; font-size: var(--fs-sm); color: var(--text); } .lp-pieza-estado span { font-size: var(--fs-xs); color: var(--text-2); } .lp-pieza-accion { margin-top: 4px; } .lp-pieza-accion .btn { width: 100%; justify-content: center; } .lp-pieza-metricas { gap: 12px; } /* <<< FIN ZONA CLARA */ /* ===================================================================== 10. ACTO 04 · UN DIA CON MOVQRA --------------------------------------------------------------------- TELEFONO: una columna con la hora en monoespaciada a la izquierda y un riel que la recorre. Se lee como una jornada. ESCRITORIO (seccion 17): los seis momentos NO estan en fila recta. Sus alturas trazan la silueta de la M -sube, cumbre, valle, cumbre, baja- y una polilinea los une. La marca deja de ser un dibujo que se pone encima y pasa a ser la forma que tiene el dia. La geometria vive en UN sitio: las variables --x y --t que el PHP le pone a cada momento. Las usan las dos cosas que la necesitan -la posicion del momento y los vertices de la polilinea- asi que por construccion no pueden descuadrarse, y no hay una sola medicion. ===================================================================== */ .lp-dia { position: relative; } .lp-dia-traza { display: none; } ol.lp-dia-lista { position: relative; display: grid; gap: clamp(22px, 4vw, 34px); padding-left: 62px; } /* El riel vertical de telefono. */ .lp-dia-lista::before { content: ""; position: absolute; left: 15px; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(var(--lp-junta-2), var(--lp-junta)); } .lp-momento { position: relative; } .lp-momento-nodo { position: absolute; left: -62px; top: -3px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--lp-panel); box-shadow: inset 0 0 0 1px var(--lp-junta-2); color: var(--lp-marca-txt); } .lp-momento-hora { display: block; font: 500 clamp(.8rem, 3.2vw, .92rem)/1 var(--lp-mono); letter-spacing: .1em; color: var(--lp-marca-txt); margin-bottom: 8px; } .lp-momento h3 { font-size: var(--lp-d4); } .lp-momento p { margin-top: 6px; color: var(--lp-texto-2); font-size: .9rem; line-height: 1.5; } .lp-momento .chip { margin-top: 11px; } /* ===================================================================== 9b. LAS SENALES DEL PRODUCTO --------------------------------------------------------------------- Lo que en la V6 era una rejilla de OCHO TARJETAS titulada "Ocho modulos". Nadie llega a una portada a leer un catalogo. Aqui cada modulo aparece como una senal al pie de la pantalla que lo contiene -el codigo de barras debajo del punto de venta, los cortes anteriores debajo de la caja- y se descubren mirando el producto, que es donde significan algo. De paso son la densidad que le faltaba a cada escena: cuatro o cinco microdatos por pantalla. Sin separadores entre ellos, y no por descuido: una fila de palabras que se parte en dos renglones deja el separador del primer elemento colgando al principio de la segunda linea. El hueco separa igual y no se rompe nunca. ===================================================================== */ .lp-senales { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: clamp(18px, 2.6vw, 26px); max-width: 46ch; font-family: var(--lp-mono); font-size: var(--lp-micro); letter-spacing: .09em; text-transform: uppercase; color: var(--lp-texto-3); } .lp-senales span { white-space: nowrap; } /* ===================================================================== 8b. ESCENA 02 · EL PROBLEMA: CAOS -> CONTROL --------------------------------------------------------------------- Nueve fragmentos reales de informacion entran torcidos y se enderezan a la vez. No dice que un negocio va desordenado: lo ensena. ES TRANSFORM PURO. Los nueve ESTAN en su rejilla final desde el primer pintado -es una rejilla normal, con su hueco y su alto- y lo unico que se anima es un translate y un rotate que se van a cero. Ni una medicion, ni un reposicionamiento, ni un salto de composicion. El desorden es un estado inicial, no una posicion. ===================================================================== */ /* LA ESCENA ALTERNA. Sobre oscuro lo que separaba dos secciones era un escalon hacia la luz; sobre claro es al reves -un escalon hacia el gris calido- y la junta se ve de verdad, asi que basta con ella. */ .lp-alterna { background: var(--lp-piso); border-block: 1px solid var(--lp-junta); } .lp-caos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 16px); margin-top: clamp(8px, 2vw, 20px); } .lp-caos-pieza { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 13px 14px; border-radius: 10px; background: var(--lp-panel); box-shadow: inset 0 0 0 1px var(--lp-junta), var(--sh-1); font-size: var(--fs-xs, 12px); } .lp-caos-pieza b { font-weight: 500; color: var(--lp-texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lp-caos-pieza i { font-style: normal; font-family: var(--lp-mono); font-size: var(--lp-micro); letter-spacing: .04em; white-space: nowrap; color: var(--lp-texto); } /* El tono es la unica pista de color, y va en el dato, no en el fondo: nueve rectangulos de nueve colores serian confeti. */ .lp-caos-pieza[data-tono="ok"] i { color: var(--ok); } .lp-caos-pieza[data-tono="warn"] i { color: var(--warn); } .lp-caos-pieza[data-tono="crit"] i { color: var(--crit); } .lp-caos-pieza[data-tono="info"] i { color: var(--info); } .anim .lp-caos-pieza[data-mov="orden"] { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--giro)); transition: opacity var(--lp-t-media) var(--lp-sal), transform 680ms var(--lp-sal-vivo); transition-delay: calc(var(--i, 0) * 45ms); } .anim .lp-caos-pieza[data-visto] { opacity: 1; transform: none; } .lp-caos-pie { margin-top: clamp(22px, 3vw, 34px); font-size: clamp(1.1rem, 1rem + .8vw, 1.5rem); font-weight: 600; letter-spacing: -.02em; color: var(--lp-texto); } .lp-caos-pie span::before { content: ""; display: inline-block; width: 18px; height: 1px; margin: 0 12px 6px 0; background: var(--lp-acento); vertical-align: middle; } /* ===================================================================== 9b. LA DEMOSTRACION: EL BOTON ES DE VERDAD --------------------------------------------------------------------- El resto de la escena 03 -el origen, el riel, los codos y la mutacion simultanea- ya vive en la seccion 8. Lo que se anade aqui es lo que convierte una ilustracion en una DEMOSTRACION: que se pueda pulsar. Y la advertencia, que no es un detalle legal sino de diseno: un boton que dice "Cobrar $306.00" y parece del producto TIENE que decir que no cobra nada. Sin esa linea, la primera reaccion de alguien desconfiado no es curiosidad, es cerrar la pestana. ===================================================================== */ .lp-sinc-btn { display: block; width: 100%; margin-top: clamp(16px, 3vw, 22px); padding: 15px 20px; border: 0; border-radius: 10px; background: var(--lp-marca); color: #fff; font: 600 15px/1 var(--font); text-align: center; cursor: pointer; box-shadow: var(--sh-marca); transition: transform 110ms var(--lp-sal), background 160ms var(--lp-sal); } .lp-sinc-btn:hover { background: var(--lp-marca-2); } .lp-sinc-btn:active { transform: scale(.985); } .lp-sinc-btn[disabled] { cursor: default; opacity: .75; } .lp-sinc-pista { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: var(--lp-micro); font-family: var(--lp-mono); letter-spacing: .05em; line-height: 1.5; color: var(--lp-texto-3); } .lp-sinc-pista .icono { flex: none; margin-top: 1px; } /* El estado accesible. Ocupa sitio siempre -aunque este vacio- para que rellenarlo no mueva nada de lo que hay debajo. */ html:not(.js) .lp-sinc-btn, html:not(.js) .lp-sinc-pista { display: none; } .lp-sinc-estado { min-height: 1.5em; margin-top: clamp(20px, 3vw, 30px); font-family: var(--lp-mono); font-size: var(--lp-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--lp-acento); } /* ===================================================================== 12b. ESCENA 06 · ACTIVACION --------------------------------------------------------------------- La confianza a la izquierda y en voz baja; la oferta a la derecha y dentro de una tarjeta. Y SI, ES UNA TARJETA. La unica de la pagina. Se la ha ganado: un precio, cuatro pasos y un boton son literalmente un objeto -una oferta- y encerrarlo es lo que le da el peso que necesita para cerrar. Usar tarjetas para seis beneficios es pereza; usarla para la unica cosa que hay que comprar es composicion. ===================================================================== */ .lp-activacion-sec { padding-block: clamp(74px, 5vw + 36px, 148px); } .lp-activacion { display: grid; gap: clamp(32px, 4vw, 60px); align-items: start; } .lp-activacion-txt { max-width: 34rem; } .lp-confia { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--lp-junta); color: var(--lp-texto-2); font-size: .94rem; line-height: 1.55; } .lp-confia:first-of-type { margin-top: clamp(20px, 3vw, 30px); } .lp-confia:last-of-type { border-bottom: 1px solid var(--lp-junta); } .lp-confia > span:first-child { color: var(--lp-marca-txt); display: flex; margin-top: 2px; } /* ---------- LA OFERTA ---------- */ .lp-oferta { padding: clamp(22px, 3.4vw, 34px); border-radius: 18px; background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--lp-marca) 8%, transparent), transparent 62%), var(--lp-panel); box-shadow: inset 0 0 0 1px var(--lp-junta), var(--sh-5); } .lp-oferta-que { margin-top: 12px; color: var(--lp-texto-2); font-size: .96rem; line-height: 1.55; } .lp-oferta-pasos { display: grid; margin-top: clamp(20px, 3vw, 28px); } .lp-oferta-pasos li { display: grid; grid-template-columns: auto 1fr; gap: 3px 13px; padding: 13px 0; border-top: 1px solid var(--lp-junta); } .lp-oferta-pasos i { grid-row: 1 / span 2; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: var(--lp-marca-suave); box-shadow: inset 0 0 0 1px var(--lp-junta); font: 600 12px/1 var(--lp-mono); font-style: normal; color: var(--lp-marca-txt); } .lp-oferta-pasos b { font-size: .98rem; font-weight: 600; color: var(--lp-texto); } .lp-oferta-pasos span { color: var(--lp-texto-2); font-size: .89rem; line-height: 1.5; } .lp-oferta-acc { display: grid; gap: 10px; margin-top: clamp(20px, 3vw, 26px); } .lp-oferta-acc .lp-btn { width: 100%; } .lp-oferta-aviso { display: flex; align-items: flex-start; gap: 9px; margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--lp-junta); color: var(--lp-texto-3); font-size: .87rem; line-height: 1.5; } .lp-oferta-aviso .icono { flex: none; margin-top: 2px; color: var(--lp-texto-3); } .lp-oferta-aviso b { color: var(--lp-texto-2); } .lp-oferta-ya { margin-top: 12px; font-size: .87rem; color: var(--lp-texto-3); } .lp-oferta-ya a { color: var(--lp-marca-txt); text-decoration: none; } .lp-oferta-ya a:hover { text-decoration: underline; } /* ===================================================================== 11. ACTO 05 · EL CIERRE --------------------------------------------------------------------- La pagina cierra donde empezo: la M. Pero al reves que en el hero, donde estaba DETRAS del producto y era una estructura. Aqui esta sola, enorme y saliendose del marco, o sea que ya no sostiene nada: la marca ha dejado de ser un dibujo y se ha convertido en el ambiente. ===================================================================== */ .lp-cierre { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(96px, 13vw, 190px); border-top: 1px solid var(--lp-junta); } .lp-cierre-m { position: absolute; z-index: 0; left: 50%; top: 50%; width: min(148%, 1500px); transform: translate(-50%, -46%); pointer-events: none; } .lp-amb-cierre .lp-amb-reticula { -webkit-mask-image: radial-gradient(90% 70% at 50% 50%, #000, transparent 70%); mask-image: radial-gradient(90% 70% at 50% 50%, #000, transparent 70%); opacity: .5; } .lp-cierre-txt { position: relative; z-index: 2; } .lp-cierre h2 { margin-top: 18px; font-size: var(--lp-d1); max-width: 14ch; } .lp-cierre-p { margin-top: clamp(18px, 3vw, 26px); max-width: 44ch; color: var(--lp-texto-2); line-height: 1.58; } /* ===================================================================== 12. EL PIE ===================================================================== */ .lp-pie { border-top: 1px solid var(--lp-junta); padding-block: clamp(40px, 6vw, 70px) 0; } .lp-pie-fila { display: grid; gap: clamp(28px, 4vw, 44px); padding-bottom: clamp(32px, 5vw, 54px); } .lp-pie-marca p { margin-top: 12px; color: var(--lp-texto-3); font-size: .92rem; max-width: 34ch; } .lp-logo-pie .lp-logo-m { width: 34px; } .lp-logo-pie .lp-logo-txt { font-size: 19px; } .lp-pie-col { display: grid; gap: 2px; align-content: start; } .lp-pie-col h2 { font: 500 var(--lp-micro)/1 var(--lp-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--lp-texto-3); margin-bottom: 4px; } .lp-pie-col a { display: flex; align-items: center; min-height: 38px; color: var(--lp-texto-2); text-decoration: none; font-size: .94rem; transition: color var(--lp-t-rapida) var(--lp-sal); } .lp-pie-col a:hover { color: var(--lp-texto); } .lp-pie-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; padding-block: 18px 22px; border-top: 1px solid var(--lp-junta); font-family: var(--lp-mono); font-size: var(--lp-micro); letter-spacing: .08em; color: var(--lp-texto-3); } /* ===================================================================== 13. TABLETA (>= 768) --------------------------------------------------------------------- No es el escritorio comprimido ni el telefono estirado. Es su propia composicion: aparece la ASIMETRIA -el texto se queda en una columna de lectura y el producto se va a la derecha- pero todavia no hay escenario pegajoso ni jornada espacial, porque a este ancho un escenario de cuatro pantallas de alto se lee como un secuestro del desplazamiento. ===================================================================== */ @media (min-width: 768px) { /* El hero deja de ser una pila. El texto se limita a su medida y el producto ocupa el resto, saliendose por la derecha bastante mas que en telefono. */ .lp-hero { padding-top: clamp(36px, 5vw, 64px); } .lp-hero-txt { max-width: 34rem; } .lp-hero-ctas .lp-btn { flex: 0 0 auto; } .lp-hero-prod { margin-right: calc(var(--lp-sangra) * -1 - 7%); } .lp-hero-m { top: 34%; left: -14%; width: 118%; opacity: .42; } .lp-vent-lat { display: grid; } .lp-vent { max-height: none; } .lp-hero-prod::after { display: none; } .lp-proy-alerta { right: 16%; max-width: 320px; } .lp-proy-ticket { display: flex; left: -4%; bottom: -18px; } /* LA FIRMA a dos columnas: la accion manda desde la izquierda y la corriente cruza el hueco hacia el riel de los efectos. Es la misma cronologia; lo unico que cambia es que la corriente va en horizontal. */ .lp-sinc { --lp-sinc-gap: clamp(34px, 5vw, 76px); grid-template-columns: minmax(250px, .88fr) 1.12fr; gap: var(--lp-sinc-gap); align-items: start; } .lp-sinc-origen { position: sticky; top: calc(var(--lp-barra) + 28px); } .lp-sinc-salida { left: 100%; bottom: auto; top: 50%; width: var(--lp-sinc-gap); height: 2px; margin-left: 0; background: linear-gradient(90deg, var(--lp-marca), var(--lp-acento-2)); transform: scaleX(0); transform-origin: left; } .js .lp-sinc-salida { transform: scaleX(0); } .js .lp-sinc[data-sinc="1"] .lp-sinc-salida { transform: scaleX(1); } .lp-efectos { margin-top: 0; } /* El recorrido: texto a la izquierda, pieza a la derecha, y la pieza se sale del borde. */ .lp-esc { grid-template-columns: minmax(260px, .92fr) 1.1fr; align-items: center; } .lp-esc:nth-child(even) > .lp-esc-txt { order: 2; } .lp-esc:nth-child(even) > .lp-pieza { order: 1; margin-right: 0; margin-left: calc(var(--lp-sangra) * -1); border-radius: 0 14px 14px 0; padding-right: 14px; padding-left: clamp(20px, 4vw, 34px); } /* LA ACTIVACION a dos columnas: la confianza en su columna de lectura y la oferta -que es un objeto- a la derecha, mas estrecha para que se lea como una tarjeta y no como un panel. */ .lp-caos { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lp-activacion { grid-template-columns: minmax(260px, 1fr) minmax(320px, .92fr); gap: clamp(34px, 5vw, 76px); } .lp-oferta-acc { grid-auto-flow: row; } .lp-pie-fila { grid-template-columns: 1.4fr 1fr 1fr 1fr; } .lp-menu-enlaces a { font-size: clamp(1.9rem, 4.2vw, 2.6rem); } .lp-menu-m { width: 72%; right: -14%; bottom: -6%; } } /* ===================================================================== 14. ESCRITORIO (>= 1024) --------------------------------------------------------------------- Aqui la pagina se vuelve ESPACIAL. Aparecen las dos piezas que solo tienen sentido con sitio de sobra: · el ESCENARIO PEGAJOSO del recorrido, cuatro pantallas de alto con el interior clavado; · la JORNADA trazando la silueta de la M. Y las dos son las UNICAS que necesitan JavaScript de posicion. Por debajo de 1024 ese JavaScript ni se monta, que es la razon de que en un telefono no haya un solo listener de desplazamiento. ===================================================================== */ @media (min-width: 1024px) { :root { --lp-barra: 72px; } /* ---------- LA BARRA COMPLETA ---------- */ .lp-menu-btn { display: none; } .lp-solo-ancho { display: inline-flex; } .lp-nav { position: relative; display: flex; align-items: center; gap: 2px; margin-inline: auto; } .lp-nav a { position: relative; z-index: 1; padding: 9px 14px; border-radius: 8px; color: var(--lp-texto-2); font: 500 14px/1 var(--font); text-decoration: none; transition: color var(--lp-t-rapida) var(--lp-sal); } .lp-nav a:hover, .lp-nav a[data-activo] { color: var(--lp-texto); } /* UNA sola pastilla que se desliza, en vez de cuatro fondos que se encienden y se apagan. La mueve el JavaScript escribiendo --x y --w; sin JavaScript no se pinta y los enlaces se comportan como siempre. */ .lp-nav-luz { position: absolute; left: 0; top: 50%; height: 34px; width: var(--w, 0); margin-top: -17px; border-radius: 8px; background: var(--lp-marca-suave); box-shadow: inset 0 0 0 1px var(--lp-junta); transform: translateX(var(--x, 0)); opacity: 0; transition: transform var(--lp-t-media) var(--lp-sal), width var(--lp-t-media) var(--lp-sal), opacity var(--lp-t-rapida) var(--lp-sal); } .lp-nav[data-luz="1"] .lp-nav-luz { opacity: 1; } /* ---------- EL HERO ESPACIAL ---------- */ .lp-hero { display: flex; align-items: center; min-height: 100svh; padding-top: calc(var(--lp-barra) + clamp(20px, 3vw, 54px)); padding-bottom: clamp(56px, 7vw, 110px); } .lp-hero-fila { display: grid; grid-template-columns: minmax(430px, 1.02fr) 1.22fr; gap: clamp(28px, 3vw, 60px); align-items: center; width: 100%; } .lp-hero-txt { max-width: none; } .lp-hero-prod { margin-top: 0; /* Hasta el borde del viewport, y despues un poco mas: lo recorta el overflow:clip de .lp. */ margin-right: calc(var(--lp-sangra) * -1 - 3vw); } /* La M se coloca para que su VALLE quede detras de la ventana. Lo que asoma son las dos cumbres por arriba y las dos patas por los lados, o sea justo lo que hace reconocible al isotipo. */ .lp-hero-m { top: 5%; left: auto; right: -6vw; width: 66vw; max-width: 1180px; translate: 0 0; -webkit-mask-image: none; mask-image: none; } .lp-hero-m img { opacity: .11; } .lp-proy-alerta { top: 8%; right: auto; left: -7%; max-width: 310px; } .lp-proy-alerta .lp-proy-hilo { left: auto; right: 14px; bottom: auto; top: 50%; width: 58px; transform: rotate(14deg); transform-origin: left; } .lp-proy-ticket { left: -7%; right: auto; bottom: -5%; } .lp-proy-ticket .lp-proy-hilo { right: auto; left: calc(100% + 4px); top: 22px; width: 54px; transform: rotate(-18deg); transform-origin: left; } .lp-vent-main { padding: 18px; gap: 14px; } .lp-vent-lat { width: 176px; flex: none; padding: 12px 10px; background: var(--surface-2); border-right: 1px solid var(--border); align-content: start; gap: 2px; } .lp-vl-grupo { padding: 10px 8px 4px; font-size: var(--fs-3xs); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); } .lp-vl-item { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 7px; font-size: var(--fs-xs); color: var(--text-2); } .lp-vl-item .icono { color: var(--text-3); } .lp-vl-item[data-activo] { background: var(--selected); color: var(--brand-600); font-weight: var(--peso-fuerte); } .lp-vl-item[data-activo] .icono { color: var(--brand-600); } .lp-barras { height: 86px; } /* ---------- EL ESCENARIO PEGAJOSO ---------- */ .anim .lp-escenario { height: 400svh; } .anim .lp-escenario-pega { position: sticky; top: 0; min-height: 100svh; display: flex; align-items: center; } .lp-escenario-fila { width: 100%; } /* La columna del indice solo existe si hay indice, y el indice solo existe con .anim: sin ella quedaba una franja muerta de 200px a la izquierda de las cuatro escenas apiladas. */ .anim .lp-escenario-fila { display: grid; grid-template-columns: 200px 1fr; gap: clamp(36px, 4vw, 86px); align-items: center; } .anim .lp-indice { display: grid; align-content: center; gap: 2px; } .lp-indice li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 10px; padding: 13px 0 0; opacity: .34; transition: opacity var(--lp-t-media) var(--lp-sal); } .lp-indice i { font: 500 var(--lp-micro)/1 var(--lp-mono); font-style: normal; letter-spacing: .12em; color: var(--lp-marca-txt); } .lp-indice b { font: 600 15px/1.2 var(--font); letter-spacing: -.02em; } .lp-indice-riel { grid-column: 1 / -1; position: relative; height: 1px; margin-top: 13px; background: var(--lp-junta); } .lp-indice-riel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--lp-marca), var(--lp-acento-2)); transform-origin: left; } /* El relleno de cada riel sale de UN solo numero -el avance total, de 0 a 4, que el JavaScript escribe en --p-. El que ya paso queda lleno, el activo se llena y los que faltan estan a cero: tres estados con una resta y un clamp, sin una regla por combinacion. */ .lp-indice li:nth-child(1) .lp-indice-riel::after { transform: scaleX(clamp(0, calc(var(--p, 0) - 0), 1)); } .lp-indice li:nth-child(2) .lp-indice-riel::after { transform: scaleX(clamp(0, calc(var(--p, 0) - 1), 1)); } .lp-indice li:nth-child(3) .lp-indice-riel::after { transform: scaleX(clamp(0, calc(var(--p, 0) - 2), 1)); } .lp-indice li:nth-child(4) .lp-indice-riel::after { transform: scaleX(clamp(0, calc(var(--p, 0) - 3), 1)); } .anim .lp-escenario[data-escena="0"] .lp-indice li:nth-child(1), .anim .lp-escenario[data-escena="1"] .lp-indice li:nth-child(2), .anim .lp-escenario[data-escena="2"] .lp-indice li:nth-child(3), .anim .lp-escenario[data-escena="3"] .lp-indice li:nth-child(4) { opacity: 1; } /* Las cuatro escenas comparten celda de rejilla: el contenedor mide lo que mide la mas alta y no hay que darle una altura a mano. */ .lp-esc { grid-template-columns: minmax(300px, .88fr) 1.18fr; gap: clamp(30px, 3.2vw, 64px); } .anim .lp-escenas { gap: 0; } .anim .lp-esc { grid-area: 1 / 1; opacity: 0; pointer-events: none; transform: translateY(22px); transition: opacity var(--lp-t-media) var(--lp-sal), transform var(--lp-t-media) var(--lp-sal); } .lp-esc:nth-child(even) > .lp-esc-txt { order: 0; } .lp-esc:nth-child(even) > .lp-pieza { order: 0; margin-left: 0; margin-right: calc(var(--lp-sangra) * -1); border-radius: 16px 0 0 16px; padding-left: 22px; padding-right: clamp(28px, 3.4vw, 60px); } .lp-esc .lp-pieza { margin-right: calc(var(--lp-sangra) * -1); border-radius: 16px 0 0 16px; padding: 22px clamp(28px, 3.4vw, 60px) 22px 22px; gap: 10px; } .lp-esc .lp-fila { min-height: 46px; font-size: var(--fs-base); } .lp-esc .lp-fila-num-gde, .lp-esc .lp-mut-gde { font-size: var(--fs-xl); } .anim .lp-escenario[data-escena="0"] .lp-esc[data-n="0"], .anim .lp-escenario[data-escena="1"] .lp-esc[data-n="1"], .anim .lp-escenario[data-escena="2"] .lp-esc[data-n="2"], .anim .lp-escenario[data-escena="3"] .lp-esc[data-n="3"] { opacity: 1; pointer-events: auto; transform: none; } /* ---------- LA JORNADA TRAZA LA M ---------- */ .lp-dia { height: clamp(410px, 32vw, 560px); } /* La polilinea tiene que ocupar EXACTAMENTE la misma caja contra la que se resuelven --x y --t, o sus vertices y los nodos hablan de porcentajes distintos y la linea pasa por al lado. */ .lp-dia-traza { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .lp-dia-traza polyline { fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .lp-dia-fondo { stroke: var(--lp-junta-2); } .lp-dia-viva { stroke: url(#mqCorrienteDeg); stroke-dasharray: 1; stroke-dashoffset: 0; } .anim .lp-dia-viva { stroke-dashoffset: 1; } .anim .lp-dia[data-visto] .lp-dia-viva { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--lp-sal) .1s; } /* position:static y no relative: si la lista sigue siendo el bloque contenedor, su alto es CERO -todos sus hijos estan absolutos- y el --t del 76% resuelve a cero pixeles. Los seis momentos se apilan en la misma esquina. Comprobado. */ ol.lp-dia-lista { display: block; position: static; padding-left: 0; } .lp-dia-lista::before { display: none; } .lp-momento { position: absolute; left: var(--x); top: var(--t); width: clamp(146px, 12vw, 184px); /* translate y transform son propiedades distintas y se componen: el centrado vive aqui y la entrada sigue usando transform sin pisarlo. */ translate: -50% 0; padding-top: 42px; } .lp-momento-nodo { left: 50%; top: 0; translate: -50% -50%; width: 30px; height: 30px; } /* LOS DOS PIES DE LA M. El primero y el ultimo caen en los extremos del recorrido -x=5% y x=95%, que son los pies del isotipo- y ahi una caja centrada se saldria del bloque por los lados. Se anclan por su borde: el primero empieza en el nodo y escribe hacia la derecha, el ultimo termina en el y escribe hacia la izquierda. El nodo se queda EXACTAMENTE en el vertice, que es lo unico que no puede moverse. Y ademas escriben hacia ARRIBA, porque son los momentos bajos de la silueta y no hay sitio por debajo. Tener texto a los dos lados de la linea es lo que convierte una fila de rotulos en una jornada anotada. */ .lp-momento:nth-child(1), .lp-momento:nth-child(5) { padding-top: 0; padding-bottom: 42px; } .lp-momento:nth-child(1) { translate: 0 -100%; } .lp-momento:nth-child(5) { translate: -100% -100%; text-align: right; } .lp-momento:nth-child(1) .lp-momento-nodo { left: 0; top: auto; bottom: 0; translate: -50% 50%; } .lp-momento:nth-child(5) .lp-momento-nodo { left: auto; right: 0; top: auto; bottom: 0; translate: 50% 50%; } .lp-momento-hora { font-size: .84rem; } /* ---------- EL CIERRE, MAS AIRE ---------- */ .lp-cierre-txt { max-width: 760px; } .lp-pie-fila { grid-template-columns: 1.6fr 1fr 1fr 1fr; } } /* Por encima de 2130px de viewport la caja empieza a crecer sola -min(1560, max(1320, 62vw))- y el sangrado la sigue sin tocar nada, porque --lp-sangra esta escrito en funcion de ella. No hace falta un corte nuevo. Comprobado a 1600, 1920 y 2560. */ /* ===================================================================== 15. MENOS MOVIMIENTO --------------------------------------------------------------------- Dos capas, y la primera es la importante: 1. La clase .anim NO SE PONE si el usuario ha pedido menos movimiento. Y como TODO estado escondido de esta hoja vive dentro de .anim, lo que ocurre entonces no es que las animaciones se apaguen: es que nunca llegan a existir. La pagina se pinta directamente montada. 2. Esto de abajo es la red por si la clase llegara a estar puesta -por ejemplo si el usuario cambia el ajuste con la pagina ya abierta-. Apaga lo que queda: el punto que late y las dos transiciones que llevan informacion se dejan, pero instantaneas. ===================================================================== */ @media (prefers-reduced-motion: reduce) { .lp *, .lp *::before, .lp *::after, .lp-menu *, .lp-menu *::before, .lp-menu *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } /* La M se queda entera y quieta: una marca a medio aparecer es un logotipo roto. */ .lp-hero-m, .lp-cierre-m { opacity: 1; transform: none; } } /* ===================================================================== LOS ENLACES LEGALES DEL PIE ===================================================================== El marcado lo pone includes/vistas/legal_enlaces.php, que es LA MISMA vista que pintan entrar, el registro y recuperar. Lo que cambia aqui es solo el traje: el pie de la portada es oscuro y tiene su propia tipografia de dato (--lp-mono), asi que los tres enlaces se visten como el resto de esa franja -el copyright y el precio- en vez de traerse el gris del producto a una banda negra. Es un RECOLOREADO, no una segunda version: si manana se anade un cuarto documento, aparece aqui sin tocar esta regla. --------------------------------------------------------------------- */ .lp-pie-legal .legal-enlaces { margin-top: 0; gap: 8px 20px; justify-content: flex-start; } .lp-pie-legal .legal-enlaces a { min-height: 0; font-family: var(--lp-mono); font-size: var(--lp-micro); font-weight: 400; letter-spacing: .08em; color: var(--lp-texto-3); transition: color var(--lp-t-rapida) var(--lp-sal); } .lp-pie-legal .legal-enlaces a:hover { color: var(--lp-texto); } /* Por debajo de 768 la franja legal ya se apila sola por el flex-wrap. Lo unico que hace falta es que los tres enlaces no queden pegados al copyright como si fueran la misma linea. */ @media (max-width: 767px) { .lp-pie-legal .legal-enlaces { gap: 6px 16px; } }