/* ===================================================================== ritloop.app — la landing (/ en inglés, /es/ en español) LA FRASE: «La web es la pantalla del reproductor de RitLoop en Nocturno, sonando "Quedo en la mar": todo lo que se mueve va al pulso medido de esa canción.» PROCEDENCIA: web/direccion-nocturno-a-tempo-2026-10-08.md, §1-§3 (paso 0 de no-web-slop, 8-oct-2026), y la frase de Ignacio del mismo día: «la web tiene que tener la estética de la app, la estética de Nocturno». Los valores salen de ios/LoopMaster/LoopMaster/Vistas/TemaApp.swift y de WaveformView.swift. El tempo, de «Quedo en la mar»: 24 pulsos a 165 BPM entre A = 6,5156 s y B = 15,2429 s del máster, en 3/4 (notas/fragmento de la Ruta, medido el 8-oct). Lo que se deduce: - Color. El FondoNocturno exacto, a sangre y quieto detrás de todo, como en la app. Un solo acento, #1A9EFF, para lo que suena, el «1» y el botón; #B3E0FF para el texto que lleva acento. A en verde y B en naranja, solo donde haya un bucle. - Letra. La del sistema, como la app. Rounded en el nombre y en las cifras que cuentan tiempo; cifras tabulares donde la app usa monospacedDigit. - Retícula. La rejilla en 3/4 vive en la onda del héroe, como en la app. Entre secciones no hay rayas: Ignacio no las entendía (8-oct). - Movimiento. Nada lleva duración propia: todo cuelga del reloj de «Quedo en la mar». La onda del héroe, V1 y el pulso de la oferta van al 100 %, como suena; lo que entra y la flecha de las preguntas, al 75 % (123,75 BPM): entra en la siguiente corchea, dura una corchea y se escalona a semicorcheas (a-tempo.js). Si se cae la app, se cae la paleta; si se cae la canción, el reloj. ===================================================================== */ /* PROCEDENCIA fuente: la app no tiene ni una Font.custom en todo ios/; su letra es SF Pro del sistema, y Rounded en el nombre (VeloLanzamiento.swift:26) y en las cifras que cuentan tiempo (BloqueRitmoView.swift:1530, MetronomoView.swift:767 y :893, PlayerView.swift:3103). Fuera de Apple cae a la del sistema de cada equipo: la web no carga ninguna letra. */ :root{ color-scheme:dark; /* FondoNocturno, TemaApp.swift:80-99: (0.09, 0.14, 0.28) → (0.05, 0.07, 0.15) → (0.03, 0.04, 0.10) */ --noche-alto:#172447; --noche:#0D1226; --noche-bajo:#080A1A; /* Su resplandor: Color.cyan al 26 % y Color.blue al 12 %, radio 8 → 480 en (50 %, 30 %). En oscuro son el cian (100, 210, 255) y el azul (10, 132, 255) del sistema. */ --resplandor-cian:rgb(100 210 255 / .26); --resplandor-azul:rgb(10 132 255 / .12); /* acentoVivo, TemaApp.swift:33: (0.10, 0.62, 1.0) */ --acento:rgb(25.5 158.1 255); /* hieloNocturno, TemaApp.swift:35 */ --hielo:#B3E0FF; /* Color.cyan del sistema en oscuro, el del pulso activo del metrónomo (IndicadorPulsos) */ --cian:rgb(100 210 255); /* La rejilla, WaveformView.swift:30-31: el pulso en blanco al 20 %, el «1» en el acento al 70 % */ --pulso:rgb(255 255 255 / .2); --uno:rgb(25.5 158.1 255 / .7); /* A y B, WaveformView.swift:18-19: el verde y el naranja del sistema en oscuro */ --marca-a:#30D158; --marca-b:#FF9F0A; /* El texto: blanco, como textoValor en Nocturno (TemaApp.swift:58). El suave es el gris más bajo que da AA encima del centro del resplandor: 4,7:1 calculado sobre su color más claro. */ --tinta:#FFFFFF; --tinta-suave:rgb(235 235 245 / .75); /* El reloj de la página: «Quedo en la mar» al 75 %, 165 × 0,75 = 123,75 BPM */ --corchea:242.424ms; --semicorchea:121.212ms; --curva:cubic-bezier(.22, 1, .36, 1); --letra:-apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --letra-redonda:ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --ancho:1160px; --margen:clamp(16px, 4vw, 40px); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:100px;background:var(--noche-bajo)} @media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}} body{margin:0;min-height:100vh;color:var(--tinta-suave);font:400 17px/1.55 var(--letra);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} img{max-width:100%;height:auto} h1,h2,h3{margin:0;color:var(--tinta);text-wrap:balance} p,figure,blockquote,ol,ul{margin:0} p{text-wrap:pretty} small{font-size:inherit} /* PROCEDENCIA resplandor: es el RadialGradient del propio FondoNocturno (TemaApp.swift:92-97), el único de la página, quieto detrás del contenido como en la app. */ .fondo{position:fixed;top:0;left:0;right:0;height:100vh;height:100lvh;z-index:-1;pointer-events:none; background: radial-gradient(circle 480px at 50% 30%, var(--resplandor-cian) 8px, var(--resplandor-azul) 244px, transparent 480px), linear-gradient(to bottom right, var(--noche-alto), var(--noche) 50%, var(--noche-bajo))} a{color:var(--hielo);text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:rgb(179 224 255 / .4)} a:hover{text-decoration-color:var(--hielo)} :focus-visible{outline:2px solid var(--hielo);outline-offset:3px;border-radius:4px} .marco{width:min(100% - 2 * var(--margen), var(--ancho));margin-inline:auto} .saltar{position:absolute;left:var(--margen);top:-80px;z-index:30;padding:12px 18px;background:var(--noche-bajo);color:var(--tinta);text-decoration:none;border-radius:8px} .saltar:focus{top:12px} .aviso-idioma{padding:0 var(--margen);text-align:center;font-size:15px;border-bottom:1px solid var(--pulso)} .aviso-idioma a{display:inline-flex;align-items:center;min-height:44px} /* PROCEDENCIA cristal: la barra de arriba es la de la app, de cristal (Liquid Glass: 50 usos de glassEffect/.glass en ios/). Es el único cristal de la página. Debajo se desplaza el contenido: se mide en el iPhone 11 en la fase 4, y si da tirones va sólida (web/direccion-nocturno-a-tempo-2026-10-08.md §5). El fundido de debajo es la rampa de la app bajo sus barras (fundidoScrollTema, TemaApp.swift), con las paradas de fundido-suavizado.css. */ .cabecera{position:sticky;top:0;z-index:20;background:rgb(8 10 26 / .58);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4)} .cabecera::after{content:"";position:absolute;left:0;right:0;top:100%;height:24px;pointer-events:none;background:rgb(8 10 26 / .58);-webkit-mask-image:linear-gradient(to top, var(--fundido-paradas));mask-image:linear-gradient(to top, var(--fundido-paradas))} .cabecera .marco{display:flex;align-items:center;gap:28px;min-height:76px} .nombre{display:inline-flex;align-items:center;gap:10px;color:var(--tinta);text-decoration:none;font:650 20px/1 var(--letra-redonda);letter-spacing:-.01em} .nombre img{width:30px;height:30px} .cabecera .nombre{gap:16px;font-size:40px} .cabecera .nombre img{width:60px;height:60px} .secciones{display:flex;gap:26px;margin-left:auto} .secciones a,.idioma{display:inline-flex;align-items:center;min-height:44px;color:var(--tinta-suave);text-decoration:none;font-size:15px;white-space:nowrap} .secciones a:hover,.idioma:hover{color:var(--tinta)} /* PROCEDENCIA pildora: las cápsulas van solo donde la app las pone (28 Capsule() en ios/): el botón principal y la marca de Pro. La marca copia el borde del candado de Pro, el acento al 45 % (BadgeCandadoPro, CandadoPro.swift:90-92), con la palabra en vez del candado, como la ficha. */ /* PROCEDENCIA cristal, sombra: el botón «Descargar» es el de las hojas de la app en Nocturno, BotonHoja con .buttonStyle(.glass) en cápsula (TemaApp.swift:629-630). Copiado de su «Hecho», que Ignacio capturó en la app: «el Tipico alo de loquid glass de la app o qie sea exactamente como ese» (8-oct). Medido: el relleno es el azul de detrás aclarado ((23,41,77) → (46,69,113); aquí sale (47,70,109)), y el halo, una luz de 1 px arriba y abajo que se apaga hacia los lados, con un filo oscuro por fuera. Lo de detrás se ve casi nítido y con el contraste bajado, como en las píldoras de Safari: con texto blanco detrás, el rótulo queda a 5,2:1. La refracción del borde no se copia: Safari no admite filtros SVG en backdrop-filter. Para que no pase desapercibido, el filo en el azul hielo de Nocturno al 30 % y un resplandor del acento muy bajo, como la cápsula de Pro destacada de la app (FondoProDestacado, .halo: filo y luz en el acento y el hielo). Ignacio, 11-oct: «el borde a lo mejor del azul plateado de nocturno o algo, no sé, noq ueiro anda exageraro». */ .boton{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border-radius:999px;color:var(--tinta);font:600 16px/1 var(--letra);text-decoration:none;background:rgb(179 224 255 / .17);-webkit-backdrop-filter:blur(3px) saturate(3) contrast(.7) brightness(.55);backdrop-filter:blur(3px) saturate(3) contrast(.7) brightness(.55);box-shadow:inset 0 1px 0 rgb(200 225 255 / .2), inset 0 -1px 0 rgb(200 225 255 / .18), inset 0 2px 3px -1px rgb(200 225 255 / .1), inset 0 -2px 3px -1px rgb(200 225 255 / .12), inset 0 8px 10px -8px rgb(200 225 255 / .05), inset 0 -8px 10px -8px rgb(200 225 255 / .07), inset 0 0 0 1px rgb(179 224 255 / .3), 0 0 0 .5px rgb(0 0 0 / .45), 0 10px 24px -10px rgb(0 0 0 / .5), 0 0 14px rgb(25.5 158.1 255 / .16);transition:transform 120ms var(--curva), background-color 120ms linear} .boton:hover{background-color:rgb(179 224 255 / .24)} .boton:active{transform:scale(.97)} .pro{display:inline-block;margin-inline-start:.2em;padding:.24em .6em .26em;border:1px solid rgb(25.5 158.1 255 / .45);border-radius:999px;color:var(--hielo);font:600 13px/1 var(--letra);letter-spacing:.01em;vertical-align:.18em;white-space:nowrap} p > .pro:first-child{margin-inline:0 .35em} h2 .pro,h3 .pro{font-size:max(13px, .3em);vertical-align:.5em} .sin-corte{white-space:nowrap} .cifra{font-variant-numeric:tabular-nums} .cifra-tiempo{font-family:var(--letra-redonda);font-variant-numeric:tabular-nums} /* Un tercio menos que al principio (Ignacio, 14-oct: «veo mucho espacio entre todas las secciones»). */ .bloque{padding-block:clamp(48px, 6vw, 84px)} h1{font-size:clamp(40px, 6.2vw, 76px);line-height:1.03;letter-spacing:-.02em;font-weight:700} h2{font-size:clamp(30px, 4.4vw, 52px);line-height:1.08;letter-spacing:-.015em;font-weight:700} h3{font-size:20px;line-height:1.3;letter-spacing:-.005em;font-weight:650} .entradilla{font-size:clamp(19px, 1.9vw, 22px);line-height:1.45} .iphone{display:block;width:min(330px, 74vw);border-radius:12% / 5.5%;outline:1px solid rgb(255 255 255 / .12);outline-offset:-1px;box-shadow:0 2px 6px rgb(0 0 0 / .25), 0 32px 64px -24px rgb(0 0 0 / .65)} /* V6 va en el iPad (Air de 11", 820×1180 pt): sus esquinas son las de la pantalla del iPad, no las del iPhone. */ .ipad{display:block;width:min(460px, 88vw);border-radius:2.2% / 1.5%;outline:1px solid rgb(255 255 255 / .12);outline-offset:-1px;box-shadow:0 2px 6px rgb(0 0 0 / .25), 0 32px 64px -24px rgb(0 0 0 / .65)} /* Los vídeos de la app van dentro de un botón que los pausa, como la onda (WCAG 2.2.2); el póster es su primer fotograma. La ventana del Mac (V7) no es un iPhone: esquinas de foto, misma sombra. */ .video{display:block;margin:0 auto;padding:0;border:0;background:none;color:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;border-radius:12% / 5.5%} .video:focus-visible{outline:2px solid var(--hielo);outline-offset:6px} .video:has(.ventana){border-radius:14px} .video:has(.ipad){border-radius:2.2% / 1.5%} video.iphone,video.ipad,.ventana{height:auto} video.iphone,video.ipad,video.ventana{background:center / cover no-repeat} .ventana{display:block;width:min(400px, 86vw);border-radius:14px;outline:1px solid rgb(255 255 255 / .12);outline-offset:-1px;box-shadow:0 2px 6px rgb(0 0 0 / .25), 0 32px 64px -24px rgb(0 0 0 / .65)} .mac{display:block;width:100%;filter:drop-shadow(0 28px 40px rgb(0 0 0 / .45))} /* V10 es la ventana sola, sin escritorio: su filo de macOS se recorta en el vídeo y aquí no lleva el contorno de las demás. */ .ventana.sin-filo{outline:none} .tienda{display:inline-block;line-height:0;padding:12px 0} .tienda img{height:48px;width:auto} /* Una insignia por pieza, como pide Apple: la del Mac App Store en un Mac (desde-mac la pone el ) y la del App Store en lo demás. */ .tienda-mac,.desde-mac .tienda-app{display:none} .desde-mac .tienda-mac{display:inline-block} /* Héroe */ .heroe{border-top:0;padding-block:clamp(24px, 4vw, 56px) clamp(40px, 5vw, 72px)} .heroe .marco{display:grid;grid-template-columns:minmax(0, 1.3fr) minmax(0, .7fr);align-items:center;gap:clamp(40px, 6vw, 88px)} .heroe h1{font-size:clamp(40px, 4.8vw, 60px)} .heroe h1 .linea{display:block} .heroe .entradilla{margin-top:24px;max-width:34ch} .heroe .tiendas{margin-top:20px} .condiciones{font-size:15px} /* PROCEDENCIA pildora: la cuenta atrás es la fila de pulsos del metrónomo de la app (IndicadorPulsos, en MetronomoView.swift): los pulsos en blanco al 20 % y el activo en cian, con halo, más grande y con su número dentro en Rounded heavy. Aquí cada pulso es un día que queda y el activo es hoy, que late con la onda (latido() en a-tempo.js). Es la única excepción al acento único, y la pone la app. Ignacio, 14-oct, sobre el aviso de antes, una línea gris: «que sosoooo! parece eso un velatorio!!!!!». */ .oferta[hidden]{display:none} .oferta-precio{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px} /* PROCEDENCIA cristal: en el héroe el aviso es la cápsula de la barra de ritmo de la app, .ultraThinMaterial con .glassEffect(.clear) y esquinas de 26 (barraFlotante, BloqueRitmoView.swift:715 el 15-oct), con el pulso de hoy dentro. Debajo solo está el fondo quieto, así que no lleva desenfoque: el material se queda en un velo claro y su filo en hielo. */ .oferta-heroe{display:inline-flex;align-items:center;gap:14px;max-width:100%;margin-top:20px;padding:10px 22px 10px 12px;border-radius:26px;background:rgb(255 255 255 / .07);box-shadow:inset 0 0 0 1px rgb(179 224 255 / .2);color:var(--tinta);text-decoration:none} .oferta-heroe:hover{background-color:rgb(255 255 255 / .1)} .oferta-heroe .dias{min-height:0} .oferta-heroe .dia.hoy{width:42px;height:42px;margin:0;font-size:18px} .oferta-texto{display:grid;gap:3px} .oferta-linea{font:650 18px/1.2 var(--letra-redonda)} .oferta-sub{color:var(--hielo);font-size:14px} .dias{display:flex;align-items:center;gap:6px;min-height:32px} .dia{flex:none;width:12px;height:12px;border-radius:50%;background:var(--pulso)} .dia.hoy{position:relative;display:grid;place-items:center;width:28px;height:28px;margin-inline-end:2px;background:none;color:#FFFFFF;font:800 13px/1 var(--letra-redonda);font-variant-numeric:tabular-nums} .dia.hoy .disco{position:absolute;inset:0;border-radius:50%;background:var(--cian);box-shadow:0 0 18px rgb(100 210 255 / .95)} .dia.hoy .cifra{position:relative} .confianza{margin-top:28px;font-size:15px} .pantalla{justify-self:center} .pantalla figcaption{margin-top:18px;text-align:center;font-size:15px;color:var(--hielo);font-variant-numeric:tabular-nums} /* PROCEDENCIA onda: el momento animado de la página (dirección §3, «Movimiento»); V1 y el pulso de la oferta van a su compás. Es la envolvente real de «Quedo en la mar», que corre bajo el cabezal quieto en el centro, como el reproductor de la app (WaveformView.swift: el desplazamiento, las capas y colores, A y B con su barra verde y naranja; el dibujo, en a-tempo.js). Corre al 100 %, como suena, y al llegar a B la onda salta a A como un bucle de verdad; con el botón de escuchar suena y la onda sigue al audio. Con movimiento reducido, quieta en el «1». En el escritorio va de donde arrancan las letras a donde empieza el iPhone (Ignacio, 8-oct, con dos marcas sobre una captura) y se funde por los cuatro lados: entra y sale con --fundido-onda y se apaga arriba y abajo, que a escuadra quedaba estática. */ .heroe{overflow-x:clip} .heroe .marco{grid-template-rows:auto auto auto;row-gap:clamp(20px, 2.5vw, 36px)} .heroe .marco > div:first-child{grid-column:1;grid-row:1;align-self:end} .heroe .pantalla{grid-column:2;grid-row:1 / span 3} .heroe .iphone{width:min(300px, 74vw)} .onda{--fundido-onda:48px;grid-column:1;grid-row:2;align-self:start;height:clamp(150px, 14vw, 230px);margin-left:calc(var(--fundido-onda) / -2);margin-right:calc(24px - clamp(40px, 6vw, 88px));-webkit-mask-image:linear-gradient(90deg, transparent, #000 var(--fundido-onda), #000 calc(100% - var(--fundido-onda)), transparent);mask-image:linear-gradient(90deg, transparent, #000 var(--fundido-onda), #000 calc(100% - var(--fundido-onda)), transparent)} .onda canvas{display:block;width:100%;height:100%} /* La onda es un botón: al tocarla se pausa y se reanuda (WCAG 2.2.2, lo que se mueve solo más de 5 s). */ button.onda{display:block;justify-self:stretch;padding:0;border:0;background:none;color:inherit;font:inherit;-webkit-appearance:none;appearance:none;cursor:pointer;-webkit-tap-highlight-color:transparent} button.onda:focus-visible{outline-offset:-2px} /* El botón de escuchar es un círculo del mismo cristal que «Descargar», solo con el altavoz mudo o sonando según aria-pressed, y su nombre en aria-label (Ignacio, 12-oct). Solo lo enseña a-tempo.js, si el navegador tiene Web Audio. */ .escucha{grid-column:1;grid-row:3;align-self:start;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:-16px} .escucha[hidden]{display:none} .con-audio .escucha[hidden]{display:flex} /* Un