/* Estilos compartidos de las páginas internas de kumocloud.cl Misma estética liquid glass de la portada. */ :root { --text: #1d2430; --text-dim: #5d6b80; --glass: rgba(255, 255, 255, 0.55); --glass-border: rgba(255, 255, 255, 0.75); --shadow: 0 8px 32px rgba(30, 50, 90, 0.10); --accent: #1a73e8; --ease: cubic-bezier(.32,.72,.24,1); } * { margin: 0; padding: 0; box-sizing: border-box; } /* PROHIBIDO scroll-behavior: smooth en la raiz (quitado 2026-08-17): Chrome anima con el la rueda del mouse y el scroll se siente con inercia tardia, flotante. La latencia medida era sana (mediana 9 ms gesto-a-primer-pixel) y la incomodidad era esta rampa. El scroll del sitio es seco, como X. */ html { /* scrollbar de la página, igual de fino y translúcido que el del chat */ scrollbar-width: thin; scrollbar-color: rgba(93, 107, 128, .35) transparent; } html::-webkit-scrollbar { width: 10px; } html::-webkit-scrollbar-track { background: transparent; } html::-webkit-scrollbar-thumb { background: rgba(93, 107, 128, .30); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; } html::-webkit-scrollbar-thumb:hover { background: rgba(93, 107, 128, .55); background-clip: content-box; } html::-webkit-scrollbar-button { display: none; height: 0; } /* el fondo vive SOLO en : pinta la raíz (barra de estado y overscroll en Safari) y queda DETRÁS del canvas z-index:-1. Un fondo en body se pintaría ENCIMA del canvas y taparía la nube */ /* el fondo del elemento raiz se propaga al lienzo del documento y es lo que pinta la zona del notch y el rebote del scroll. background-attachment: fixed evita repintes al hacer overscroll */ html { background-color: #dfe7f2; background-attachment: fixed; } /* con JS (clase puesta por /assets/prepintado.js ANTES del primer pintado) la base es grafito o el último frame de la nube guardado en sessionStorage: al navegar entre páginas la nube no parpadea. Sin JS o sin WebGL2 (la clase se quita) rige el #dfe7f2 claro de arriba */ html.con-nube { background: radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 60%), #1e2126; } body { color: var(--text); font-family: 'Space Grotesk', 'Space Grotesk Fallback', -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.65; background: transparent; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* nube ya dibujando: el fondo raiz pasa del grafito al TONO PROMEDIO de la nube (#8c8f93, medido del render real). Es lo que el navegador muestra en las franjas aun no rasterizadas del scroll rapido: en grafito se veia una caja oscura; en tono nube se confunde con ella y desaparece */ html.nube-viva { background: radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%), #8c8f93; } /* SIN fade-in propio (decisión del usuario 2026-08-04): el pre-pintado ya dejó grafito o el frame anterior de la nube; esta aparece nítida encima */ #gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: 0; } #gl.on { opacity: 1; } /* --- navegación --- */ .nav { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 14px 6vw; background: rgba(255, 255, 255, 0.4); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); } .nav a.brand { font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em; color: var(--text); text-decoration: none; } .nav a.cta { font-size: .86rem; font-weight: 500; color: #fff; background: var(--text); padding: 9px 18px; border-radius: 999px; text-decoration: none; transition: transform .2s var(--ease); } .nav a.cta:hover { transform: scale(1.04); } /* max() es obligatorio: en equipos sin notch los insets valen 0px y el contenido quedaria pegado al borde. El caso apaisado es el que se olvida: en horizontal el notch se va a un costado y left/right suben a ~44-59px */ .wrap { max-width: 860px; margin: 0 auto; padding-left: max(6vw, env(safe-area-inset-left)); padding-right: max(6vw, env(safe-area-inset-right)); padding-bottom: 40px; } /* --- portada de la página --- */ /* Sin "eyebrow" (rótulo pequeño sobre el título): decisión de diseño, las páginas parten directo con el H1. */ .hero { padding: calc(76px + env(safe-area-inset-top, 0px)) 0 40px; } h1 { font-size: clamp(2.1rem, 5.4vw, 3.3rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; color: #fff; text-shadow: 0 2px 26px rgba(110, 145, 200, .4); } .lead { margin-top: 20px; font-size: clamp(1.02rem, 2vw, 1.2rem); font-weight: 300; color: #fff; text-shadow: 0 1px 14px rgba(100, 135, 190, .5); max-width: 46ch; } /* --- tarjetas de vidrio --- */ .card { background: var(--glass); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); border: 1px solid var(--glass-border); box-shadow: var(--shadow); border-radius: 26px; padding: 34px 34px 32px; margin-bottom: 20px; } /* vidrio horneado (escritorio): el blur NO lo hace el navegador por frame — eso no se puede pre-rasterizar sobre una nube animada y era la caja gris del scroll rapido — sino el motor de la nube, que publica en --vidrio-nube una miniatura ya difuminada y saturada. En tactil sigue el backdrop-filter real. OJO: la miniatura va con attachment scroll, NUNCA fixed. Un background-attachment: fixed en un elemento que no es la raiz apaga el scroll compuesto de Chrome (MainThreadScrollingReason) y CADA scroll pasa por el hilo principal, ocupado con la nube: era el lag gesto-a-scroll reportado el 2026-08-17. La textura es tan difusa que viajar con la tarjeta no se nota. */ html.vidrio-horneado .card { backdrop-filter: none; -webkit-backdrop-filter: none; background-image: linear-gradient(var(--glass), var(--glass)), var(--vidrio-nube); background-size: auto, cover; background-position: 0 0, center; background-attachment: scroll, scroll; background-repeat: repeat, no-repeat; } .card h2 { font-size: 1.42rem; font-weight: 600; letter-spacing: -.02em; margin-bottom: 14px; } .card h3 { font-size: 1.02rem; font-weight: 600; margin: 22px 0 6px; } .card p { color: #303b4d; margin-bottom: 12px; } .card p:last-child { margin-bottom: 0; } .card ul { list-style: none; margin: 10px 0 0; } .card li { position: relative; padding-left: 22px; margin-bottom: 11px; color: #303b4d; } .card li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .55; } .card strong { font-weight: 600; color: var(--text); } /* los enlaces NO usan el azul/morado del navegador: heredan el color del texto y se distinguen solo por el subrayado */ .card a, .lead a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .card a:hover, .lead a:hover { opacity: .6; } .card a:visited, .lead a:visited { color: inherit; } /* --- prosa justificada (2026-08-06) --- `hyphens: auto` NO es opcional aquí: sin guionado, el justificado en español abre ríos de espacio en blanco, y en móvil es peor porque la medida es corta. Funciona porque las 23 páginas declaran lang="es-CL"; si alguna pierde el lang, esa página vuelve a los ríos sin avisar. Se excluyen a propósito: - `.cta-card`, que se centra (y OJO: es `class="card cta-card"`, así que `.card p` le gana por especificidad y le rompe el centrado sin el :not). - las burbujas del chat (`.msg`) y `.stats`, que no son `p`/`li` dentro de `.card` y por eso no entran solas. - títulos, botones y celdas de tabla. OJO: la PORTADA no carga page.css (solo fonts.css y footer.css), así que su equivalente vive en el