/* 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; } html { scroll-behavior: smooth; /* 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; } body { color: var(--text); font-family: 'Space Grotesk', -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.65; background: transparent; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* nace invisible y se funde desde el color de html: sin blanco -> nube de golpe */ #gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: 0; transition: opacity 1s ease; } #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; } .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; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 700px) { .grid2 { grid-template-columns: 1fr; } } /* --- cifras --- */ .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; text-align: center; } .stat .n { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; } .stat .t { font-size: .8rem; font-weight: 300; color: var(--text-dim); line-height: 1.4; margin-top: 4px; } @media (max-width: 620px) { .stats { grid-template-columns: 1fr; gap: 18px; } } /* --- cierre --- */ /* ángulos de arranque de las dos capas espectrales del borde; registrados para animarse directo (el color fluye por el aro, no gira como pieza) */ @property --ga { syntax: ""; inherits: true; initial-value: 0deg; } @property --gb { syntax: ""; inherits: true; initial-value: 180deg; } .cta-card { text-align: center; } .cta-card .btn { position: relative; display: inline-block; margin-top: 8px; /* vidrio de verdad: translúcido, con blur del fondo, borde de luz y brillo superior */ background: rgba(29, 36, 48, 0.52); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); border: 1px solid rgba(255, 255, 255, 0.35); box-shadow: 0 8px 28px rgba(30, 50, 90, .18), inset 0 1px 0 rgba(255, 255, 255, .30); color: #fff; text-decoration: none; padding: 13px 30px; border-radius: 999px; font-weight: 500; font-size: .95rem; overflow: visible; /* el halo se derrama fuera del contorno */ isolation: isolate; transition: box-shadow .45s ease; } /* borde espectral líquido, la MISMA paleta y movimiento del anillo del botón de enviar: dos capas conic contra-rotando con vaivén. En hover los colores aparecen (fade) y quedan FLUYENDO por el borde mientras el cursor esté encima */ .cta-card .btn::before, .cta-card .btn::after { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; pointer-events: none; background: conic-gradient(from var(--ga), rgba(255,255,255,0), rgba(255,80,90,.90), rgba(255,170,60,.85), rgba(255,255,255,0) 40%, rgba(60,230,160,.85) 58%, rgba(60,140,255,.95), rgba(200,80,255,.90), rgba(255,60,150,.75), rgba(255,255,255,0)), conic-gradient(from var(--gb), rgba(255,255,255,0) 8%, rgba(255,255,255,.95) 21%, rgba(255,255,255,0) 34%, rgba(90,210,255,.80) 54%, rgba(255,120,230,.70) 69%, rgba(255,255,255,.60) 78%, rgba(255,255,255,0) 86%); opacity: 0; transition: opacity .6s ease; animation: glow-flow 14s ease-in-out infinite; /* lento: el color pasea, no parpadea */ animation-play-state: paused; /* el flujo corre solo cuando se ve */ } /* hilo de luz: el gradiente recortado a la línea del borde */ .cta-card .btn::before { padding: 2px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; filter: blur(.7px) saturate(1.1); } /* halo neón: el mismo gradiente difuminado, por detrás del botón */ .cta-card .btn::after { z-index: -1; filter: blur(12px) saturate(1.05); } .cta-card .btn:hover { box-shadow: 0 8px 30px rgba(60, 90, 150, .26); } .cta-card .btn:hover::before { opacity: .8; animation-play-state: running; } .cta-card .btn:hover::after { opacity: .3; animation-play-state: running; } @keyframes glow-flow { 0% { --ga: 0deg; --gb: 360deg; } 33% { --ga: 260deg; --gb: 210deg; } 66% { --ga: 420deg; --gb: 40deg; } 100% { --ga: 720deg; --gb: -360deg; } } @media (prefers-reduced-motion: reduce) { .cta-card .btn::before, .cta-card .btn::after { animation: none; } }