/* ========================================================================== SYCLOPS · efectos Único dueño del movimiento de la página: revelado, títulos, recorrido de scroll y transiciones entre componentes. Por qué existe este archivo. En site.css el sistema de revelado quedó declarado siete veces, en seis generaciones sucesivas que se contradicen entre sí: unas ocultan con visibility, otras con opacity, otras con transform e !important, y la última gana con un retardo que dejaba bloques invisibles incluso teniendo la clase que debía mostrarlos. En lugar de seguir sumando reglas encima, acá se anula ese sistema de una sola vez y se define uno solo, legible. Tres reglas de las que no se sale: 1. NUNCA se oculta con `visibility` ni con `display`. Solo opacity y transform. Un efecto que falla debe dejar el contenido corrido de lugar, nunca desaparecido. 2. El estado oculto solo existe si el motor arrancó, y lo declara marcando . Sin JavaScript, o con movimiento reducido, todo se ve desde el primer cuadro. 3. Una sola curva y una sola duración base para todo, para que el conjunto se lea como una pieza y no como cinco animaciones sueltas. ========================================================================== */ :root { --curva: cubic-bezier(0.22, 1, 0.36, 1); --curva-corta: cubic-bezier(0.32, 0.72, 0.24, 1); --dur: 0.72s; --titulo: 'Exo 2', 'Trebuchet MS', sans-serif; --interfaz: Inter, 'Helvetica Neue', 'Segoe UI', Arial, sans-serif; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } /* -------------------------------------------------------------------------- Anulación del sistema viejo Un solo lugar. Cuando se limpien las reglas de site.css, este bloque se va entero y no queda nada colgando. -------------------------------------------------------------------------- */ .reveal, .reveal.visible, .reveal.exit, .reveal.exit-up, .reveal.exit-down, .title-reactive, .title-reactive .title-word { visibility: visible !important; filter: none !important; opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; } /* -------------------------------------------------------------------------- Tipografía del manual Sección 02 del documento de arranque. Antes la página entera caía en la pila del sistema porque no había ninguna familia declarada. -------------------------------------------------------------------------- */ body { font-family: var(--interfaz); } h1, h2, h3, h4, .brand-name, .nav-cta, .btn { font-family: var(--titulo); } h1, h2 { letter-spacing: -0.015em; } .brand-name { letter-spacing: 0.16em; } /* En un producto financiero las columnas de importes se alinean siempre. */ .amount, .num, .metric, .price-value, .metric-meta, .mono, [data-price], [data-amount] { font-family: var(--mono); font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- El anclaje necesita que nadie sea contenedor de scroll `overflow-x: hidden` obliga al navegador a usar `auto` en el otro eje, y eso convierte a html y a body en contenedores de scroll: un `position: sticky` adentro se ancla a ellos, que no se desplazan, en vez de a la ventana. `clip` recorta igual sin crear contenedor. -------------------------------------------------------------------------- */ html, body { overflow-x: clip; overflow-y: visible; } /* -------------------------------------------------------------------------- Revelado Se muestra al entrar y no se vuelve atrás. Lo ya visto queda visto. -------------------------------------------------------------------------- */ html.efectos .reveal { opacity: 0 !important; transform: translate3d(0, 22px, 0) !important; transition: opacity var(--dur) var(--curva), transform var(--dur) var(--curva) !important; transition-delay: calc(var(--orden, 0) * 60ms) !important; } html.efectos .reveal.dentro { opacity: 1 !important; transform: none !important; } /* -------------------------------------------------------------------------- Títulos palabra por palabra Suben una detrás de otra, una sola vez. La versión anterior las reproducía de nuevo según el sentido del scroll, y al subir salían al revés: por eso se sentía errático. -------------------------------------------------------------------------- */ .title-reactive .palabra { display: inline-block; white-space: pre; } html.efectos .title-reactive .palabra { opacity: 0 !important; transform: translate3d(0, 0.5em, 0) !important; transition: opacity 0.5s var(--curva), transform 0.58s var(--curva) !important; transition-delay: calc(var(--i, 0) * 42ms) !important; } html.efectos .title-reactive.dentro .palabra { opacity: 1 !important; transform: none !important; } /* -------------------------------------------------------------------------- Recorrido de lectura -------------------------------------------------------------------------- */ .sc-avance { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 120; background: var(--text, #f7f7f5); transform: scaleX(var(--sc-progress, 0)); transform-origin: 0 50%; pointer-events: none; } /* -------------------------------------------------------------------------- Escena anclada -------------------------------------------------------------------------- */ .pin { position: relative; height: 300vh; } .pin-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; place-items: center; border-top: 1px solid var(--line, rgba(255, 255, 255, 0.055)); border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.055)); } .pin-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; } .pin-ui { position: relative; z-index: 2; width: min(var(--max, 1220px), calc(100% - 40px)); display: flex; flex-direction: column; gap: 20px; pointer-events: none; } .pin-rotulo { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted, #969699); margin: 0; } .pin-titulo { font-family: var(--titulo); font-size: clamp(32px, 5.4vw, 72px); font-weight: 700; line-height: 1; letter-spacing: -0.03em; margin: 0; max-width: 16ch; } .pin-texto { color: var(--muted, #969699); line-height: 1.62; max-width: 460px; margin: 0; min-height: 3.3em; } .pin-cifras { display: flex; gap: 10px; flex-wrap: wrap; } .ficha { border: 1px solid var(--line2, rgba(255, 255, 255, 0.11)); border-radius: 999px; padding: 7px 13px; font-family: var(--mono); font-size: 11px; color: var(--muted, #969699); } .ficha b { color: var(--text, #f7f7f5); font-weight: 500; } /* -------------------------------------------------------------------------- Riel lateral, anclado Antes las tarjetas desfilaban mientras la página seguía bajando, así que nunca daba tiempo a leerlas. Ahora la sección frena: el bloque queda quieto y el riel avanza en horizontal con el desplazamiento. La altura de la sección define cuánto dura ese recorrido. -------------------------------------------------------------------------- */ .riel-seccion { position: relative; height: 320vh; } .riel-fijo { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: 26px; overflow: hidden; } .riel-encabezado h2 { margin: 0 0 10px; } .riel-encabezado .lead { margin: 0; } .riel-marco { overflow: hidden; } .riel-pista { display: flex; gap: 18px; width: max-content; padding-left: max(20px, calc((100vw - var(--max, 1220px)) / 2)); transform: translate3d(calc(var(--riel-x, 0) * -1px), 0, 0); } .riel-tarjeta { width: min(46vw, 460px); min-height: 300px; border: 1px solid var(--line, rgba(255, 255, 255, 0.055)); background: var(--surface, #0b0b0d); padding: 26px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; } .riel-tarjeta__num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: var(--muted, #969699); } .riel-tarjeta h3 { font-size: clamp(21px, 2.4vw, 28px); line-height: 1.08; margin: 0 0 10px; } .riel-tarjeta p { color: var(--muted, #969699); line-height: 1.6; margin: 0; font-size: 14.5px; } .riel-barra { height: 2px; background: var(--line2, rgba(255, 255, 255, 0.11)); position: relative; overflow: hidden; } .riel-barra span { position: absolute; inset: 0; background: var(--text, #f7f7f5); transform: scaleX(var(--riel-p, 0)); transform-origin: 0 50%; } /* -------------------------------------------------------------------------- Respuesta al puntero -------------------------------------------------------------------------- */ .btn, .nav-cta, .card, .price, .pay-panel, .riel-tarjeta, .loop-card { transition: transform 0.34s var(--curva-corta), border-color 0.34s var(--curva-corta); } .btn:hover, .nav-cta:hover { transform: translateY(-2px); } .btn:active, .nav-cta:active { transform: translateY(0); transition-duration: 0.09s; } .card:hover, .price:hover, .riel-tarjeta:hover, .loop-card:hover { transform: translateY(-3px); } /* -------------------------------------------------------------------------- Movimiento reducido y pantallas chicas -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .pin { height: auto; } .pin-stage { position: static; height: auto; padding: 12vh 0; } .pin-lienzo { display: none; } .sc-avance { display: none; } .riel-seccion { height: auto; } .riel-fijo { position: static; height: auto; padding: 12vh 0; overflow: visible; } .riel-marco { overflow: visible; } .riel-pista { transform: none; flex-wrap: wrap; width: 100%; padding-left: 0; } .riel-tarjeta { width: 100%; min-height: 0; } .riel-barra { display: none; } } @media (max-width: 860px) { .pin { height: 240vh; } .riel-tarjeta { width: 80vw; min-height: 300px; } .pin-titulo { font-size: clamp(28px, 8vw, 44px); } } /* ========================================================================== Sección de proceso: el panel se queda, los pasos avanzan Mismo recurso que la escena anclada. El bloque visual se ancla y la columna de pasos, que ahora es más alta que la ventana, corre al lado. El paso que queda a la altura de la vista es el que se marca activo. ========================================================================== */ /* En site.css `.process-step` está declarado siete veces, y el que gana usa `#producto .process-step` con !important dentro de una consulta de medios. Un identificador le gana a cualquier cantidad de clases, así que hay que igualar el selector para poder corregirlo. Lo que faltaba era recorrido: la columna de pasos medía 514 px contra 576 del panel, o sea que el anclaje no tenía dónde sostenerse y la página nunca frenaba. Con cada paso ocupando media pantalla, la columna pasa a ser más alta que el panel y el panel se queda quieto mientras los pasos avanzan. La consulta de medios es la misma que usa site.css, para no abrir una franja de anchos donde se pisen las dos. */ .process { align-items: start; } @media (min-width: 821px) { #producto .process-step { position: relative !important; inset: auto !important; min-height: 56vh !important; display: flex !important; flex-direction: column; justify-content: center; opacity: 0.3 !important; visibility: visible !important; transition: opacity 0.5s var(--curva) !important; } #producto .process-step.active { opacity: 1 !important; } #producto .process-visual { position: sticky !important; top: 15vh !important; } } /* Palabras construidas también en lo marcado con data-construir, sin heredar las reglas viejas de .title-reactive. */ [data-construir] .palabra { display: inline-block; white-space: pre; } html.efectos [data-construir] .palabra { opacity: 0; transform: translate3d(0, 0.5em, 0); transition: opacity 0.5s var(--curva), transform 0.58s var(--curva); transition-delay: calc(var(--i, 0) * 42ms); } html.efectos [data-construir].dentro .palabra { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { #producto .process-visual { position: static !important; } #producto .process-step { min-height: 0 !important; opacity: 1 !important; } } /* ========================================================================== Preguntas frecuentes Estaban rotas: al hacer clic el
abría, pero la respuesta seguía en max-height 0 y opacidad 0, así que no se veía nada. La lógica que debía medirla y abrirla no llegaba a ejecutarse. Ahora abre con el estado nativo del elemento, sin depender de JavaScript. Si el guion falla, las preguntas siguen funcionando. ========================================================================== */ .faq details p { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.5s var(--curva), opacity 0.35s ease, padding 0.5s var(--curva); } .faq details[open] p { max-height: 40em !important; opacity: 1 !important; } .faq summary { cursor: pointer; } .faq summary::-webkit-details-marker { display: none; } /* ========================================================================== Medios de pago por región Cada opción declara en qué regiones aplica. La que no corresponde se oculta, en vez de ofrecer un medio que no se puede usar. ========================================================================== */ .pay-detalle { display: block; margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--muted, #969699); } .pay-option[hidden] { display: none !important; } .pay-nota { margin-top: 14px; font-size: 12.5px; line-height: 1.6; color: var(--muted, #969699); } /* ========================================================================== Tipografía: composición, no solo elección de fuentes Las familias son las del manual (sección 02) y se mantienen: Exo 2 en marca y títulos, Inter en interfaz, monoespaciada con cifras tabulares en importes. El documento ya descartó Orbitron con un argumento correcto, que una display de ciencia ficción comunica entretenimiento donde hace falta solidez, y ese mismo criterio sostiene a Exo 2. Lo que estaba mal no era la elección sino la composición: sin ajuste óptico de interletrado en los tamaños grandes, sin medida de línea, y con cifras que no eran tabulares en varios lugares. Un producto que promete números confiables no se puede permitir que una columna de importes baile. Para probar otra pareja alcanza con cambiar --titulo acá arriba: hay dos alternativas anotadas al final de este bloque. ========================================================================== */ /* Los títulos grandes necesitan interletrado negativo; los chicos, no. Sin este ajuste, un mismo valor deja los grandes sueltos y los chicos apretados. */ h1 { letter-spacing: -0.03em; line-height: 1.02; } h2 { letter-spacing: -0.025em; line-height: 1.06; } h3 { letter-spacing: -0.015em; line-height: 1.15; } h4 { letter-spacing: -0.01em; } /* Medida de línea. Un párrafo de 110 caracteres cansa y se pierde el renglón; entre 60 y 75 es donde el ojo vuelve solo. */ p, .lead, .pin-texto, .riel-tarjeta p, .process-step p { max-width: 68ch; text-wrap: pretty; } /* Los rótulos en versalitas van en Inter, no en la display: a 11 px la Exo 2 pierde definición y el interletrado ancho la desarma. */ .pin-rotulo, .metric-label, .card-num, .riel-tarjeta__num, .console-brand, .pie__titulo, .region-kicker { font-family: var(--interfaz); font-weight: 600; letter-spacing: 0.16em; } /* Cifras tabulares en todo lo que sea un número, incluido el panel de demostración, que era donde más se notaba el baile. */ .metric, .amount, .num, .price-value, .price, .pay-big, .mini strong, .tx-node span, .loop-card span, .ficha, .acto__cifra, .cifra__valor, [data-price], [data-amount] { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } .metric, .price-value, .amount, .cifra__valor, .acto__cifra { font-family: var(--mono); letter-spacing: -0.02em; } /* La marca es lo único que lleva interletrado abierto. */ .brand-name { letter-spacing: 0.18em; font-weight: 700; } /* -------------------------------------------------------------------------- Alternativas, por si se quiere comparar en pantalla Se cambia una línea en :root y se recarga. Editorial y sobria, la que elegiría para un producto que va a mirar un contador. Pierde el aire técnico y gana autoridad: --titulo: "Instrument Serif", Georgia, serif; Grotesca neutra, si se prefiere que el número sea lo único con carácter: --titulo: Inter, "Helvetica Neue", Arial, sans-serif; Las dos exigen sumar la familia al enlace de fuentes de cada página. -------------------------------------------------------------------------- */ /* site.css fuerza letter-spacing: inherit !important sobre .title-reactive, así que el ajuste óptico de los títulos grandes no llegaba a aplicarse. */ h1.title-reactive, .hero h1 { letter-spacing: -0.03em !important; } h2.title-reactive { letter-spacing: -0.025em !important; } h3.title-reactive, h3[data-construir] { letter-spacing: -0.015em !important; } /* ========================================================================== Contraste de los botones `.btn.ghost` heredaba texto negro sobre un fondo casi transparente encima de la página oscura: quedaba ilegible. El botón secundario es de contorno, así que su texto va claro; el primario es sólido y va oscuro. ========================================================================== */ .btn.ghost, .btn.ghost:link, .btn.ghost:visited, button.btn.ghost { color: var(--text, #f7f7f5) !important; background: transparent !important; border: 1px solid var(--line2, rgba(255, 255, 255, 0.22)) !important; } .btn.ghost:hover { background: rgba(255, 255, 255, 0.07) !important; border-color: rgba(255, 255, 255, 0.34) !important; } .btn.primary, button.btn.primary { color: #08080a !important; background: var(--text, #f7f7f5) !important; border: 1px solid var(--text, #f7f7f5) !important; } .btn.primary:hover { background: #e6e6e2 !important; } /* ========================================================================== Títulos: el salto al pasar el puntero site.css cambiaba el interletrado en hover sin transición, así que las letras se separaban de golpe. No aporta nada y distrae en un titular de ochenta píxeles: se quita del todo. ========================================================================== */ .title-reactive, .title-reactive:hover, .title-reactive.is-hovered, [data-construir]:hover { letter-spacing: inherit; transition: none; } h1.title-reactive, h1.title-reactive:hover { letter-spacing: -0.03em !important; } h2.title-reactive, h2.title-reactive:hover { letter-spacing: -0.025em !important; } h3.title-reactive, h3[data-construir], h3.title-reactive:hover, h3[data-construir]:hover { letter-spacing: -0.015em !important; } .title-reactive::before, .title-reactive::after { display: none !important; } /* Botón para volver a elegir región y moneda. */ .cambiar-region { font: inherit; font-size: 11.5px; letter-spacing: 0.04em; color: var(--muted, #969699); background: none; border: 1px solid var(--line2, rgba(255, 255, 255, 0.11)); border-radius: 999px; padding: 5px 11px; margin-left: 10px; cursor: pointer; white-space: nowrap; transition: color 0.3s var(--curva), border-color 0.3s var(--curva); } .cambiar-region:hover { color: var(--text, #f7f7f5); border-color: rgba(255, 255, 255, 0.3); } /* ========================================================================== Teléfono Las secciones ancladas necesitan otro trato en una pantalla angosta y alta: el recorrido se acorta para que no se sienta interminable, los bloques que iban al lado pasan a ir debajo, y los tamaños de título bajan para que no partan palabras. ========================================================================== */ @media (max-width: 820px) { /* Escena anclada: menos recorrido y el texto abajo, que es donde el pulgar no lo tapa. */ .pin { height: 200vh; } .pin-ui { justify-content: flex-end; padding-bottom: 14vh; } .pin-titulo { font-size: clamp(26px, 7.6vw, 40px); max-width: 100%; } .pin-texto { font-size: 14.5px; max-width: 100%; } .pin-cifras { gap: 7px; } .ficha { font-size: 10px; padding: 6px 10px; } /* Riel: una tarjeta por pantalla, y recorrido proporcional a cuántas hay. */ .riel-seccion { height: 260vh; } .riel-fijo { gap: 18px; justify-content: center; } .riel-tarjeta { width: 78vw; min-height: 260px; padding: 20px; } .riel-tarjeta h3 { font-size: 20px; } .riel-tarjeta p { font-size: 14px; } .riel-pista { padding-left: 20px; gap: 12px; } .riel-encabezado h2 { font-size: clamp(24px, 7vw, 34px); } /* La demostración deja de ser un tablero de escritorio. */ .app { grid-template-columns: minmax(0, 1fr); } .app__lateral { display: none; } .acto { padding: 16px 14px; gap: 10px; } .acto__titulo { font-size: 15px; } .acto__nota { font-size: 12.5px; } .acto__cifra { font-size: clamp(24px, 8vw, 34px); } .demo__aclaracion { display: none; } /* Medios de pago y botones al ancho completo: nada de columnas de 40 px. */ .pay-options { grid-template-columns: minmax(0, 1fr) !important; } .pay-option { width: 100%; } .btn { width: 100%; text-align: center; } .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; } /* Medida de línea y respiración. */ p, .lead { max-width: 100%; } .wrap { padding-left: 20px; padding-right: 20px; } /* El cambio de región no puede empujar la barra a dos renglones. */ .cambiar-region { margin-left: 6px; padding: 4px 9px; font-size: 11px; } } @media (max-width: 520px) { .riel-tarjeta { width: 84vw; } .riel-seccion { height: 300vh; } h1 { font-size: clamp(30px, 10vw, 46px) !important; } } /* Nada de anclajes en horizontal apaisado: no hay altura para sostenerlos. */ @media (max-height: 520px) and (orientation: landscape) { .pin, .riel-seccion { height: auto; } .pin-stage, .riel-fijo { position: static; height: auto; padding: 8vh 0; } .pin-lienzo { display: none; } .riel-pista { transform: none; flex-wrap: wrap; width: 100%; padding-left: 0; } .riel-tarjeta { width: 100%; } }