/* 26 · hero «humo»: listón líquido morado y azul que sigue al cursor (ChromaFlow de shaders, WebGPU) y un grano fino encima */
.h-humo { padding: 64px 0; min-height: calc(100svh - 64px); display: flex; align-items: center; background: linear-gradient(var(--k0a0b0d) 72%, var(--bg)); }   /* un poco más oscuro (antes var(--k101114)) */
.h-humo::before { display: none; }
.h-humo h1 { font-size: clamp(40px, min(6.4vw, 11svh), 92px); letter-spacing: -.045em; max-width: 17ch; }
.h-humo .hero-sub { color: var(--ka9adb6); }
.humo-gpu { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; mix-blend-mode: screen; opacity: 0; transition: opacity 1.4s; pointer-events: none; }
.h-humo.gpu .humo-gpu { opacity: .9; }
/* sin mouse, el humo se mueve solo y apenas se ve; con el mouse, a toda su intensidad */
.h-humo.gpu.auto .humo-gpu { opacity: .42; }
/* en claro el humo se multiplica sobre el lavanda (con screen desaparece en un fondo claro) */
.humo-gpu { mix-blend-mode: var(--humo-blend, screen); }
/* grano: ruido fractal en SVG, apenas visible */
.grano { position: absolute; inset: -50%; z-index: 0; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grano 1.2s steps(6) infinite; }
.h-humo .wrap { position: relative; z-index: 1; width: min(1120px, 100% - 32px); }
@keyframes grano { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }
@media (prefers-reduced-motion: reduce) { .grano { animation: none; } }
/* el hero ocupa la pantalla menos la barra (64 px) y centra su contenido; el título también escala con el alto, para pantallas bajas como la de una laptop */
@media (max-width: 900px) { .h-humo { padding: 56px 0; } }

/* Gu desde el primer pantallazo: se asoma con las manos sobre una línea de luz, como en el cierre (la página abre y cierra con él),
 * y se presenta en una burbuja. Ocupa el alto que deja el texto, así en una pantalla alta (celular) crece en vez de dejar un hueco;
 * con tope para monitores muy altos, donde el bloque se centra. */
.h-humo { flex-direction: column; align-items: stretch; justify-content: center; padding: clamp(32px, 6svh, 80px) 0 0; }
.h-humo > .wrap { flex: none; margin: 0 auto; }
.h-humo h1 { font-size: clamp(38px, min(5.6vw, 8.6svh), 84px); }
.hz { position: relative; flex: 1 1 auto; min-height: 190px; max-height: 440px; margin-top: 28px; pointer-events: none; }
.hz-gu { position: absolute; left: 50%; bottom: 0; height: min(100%, calc(94vw * 524 / 900)); aspect-ratio: 900 / 524; transform: translateX(-50%); animation: hzSube 1.1s .2s cubic-bezier(.2, .8, .2, 1) both; }
.hz-gu img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 -10px 60px rgb(var(--t1) / .35)); }
@keyframes hzSube { from { transform: translate(-50%, 100%); } }
.hz-linea { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line2) 20%, rgb(var(--t1) / .8) 50%, var(--line2) 80%, transparent); }
/* burbuja: primero los puntitos de «escribiendo» y a los 2.3 s el texto, solo con CSS */
.hz-burbuja { position: absolute; z-index: 1; left: 78%; bottom: 72%; display: flex; align-items: center; padding: 12px 16px; border-radius: 18px 18px 18px 4px; background: var(--k0d0e10, #fff); border: 1px solid var(--line2); box-shadow: 0 12px 40px -12px rgb(var(--t1) / .45); font: 600 17px/1 var(--sans); color: var(--fg); white-space: nowrap; opacity: 0; animation: hzAparece .4s 1.3s cubic-bezier(.2, .8, .2, 1) forwards; }
.hz-burbuja i { width: 7px; height: 7px; margin: 0 2px; border-radius: 50%; background: var(--muted); animation: hzPuntos 1s infinite, hzFuera .01s 2.3s forwards; }
.hz-burbuja i:nth-child(2) { animation-delay: .15s, 2.3s; } .hz-burbuja i:nth-child(3) { animation-delay: .3s, 2.3s; }
.hz-burbuja span { font-size: 0; animation: hzDentro .01s 2.3s forwards; }
@keyframes hzAparece { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes hzPuntos { 0%, 60%, 100% { opacity: .3; translate: 0; } 30% { opacity: 1; translate: 0 -3px; } }
@keyframes hzFuera { to { width: 0; height: 0; margin: 0; } }
@keyframes hzDentro { to { font-size: 17px; } }
@media (max-width: 900px) {
  /* en el celular Gu puede pasarse de los bordes (el hero recorta) para crecer con la pantalla alta */
  .hz { margin-top: 20px; }
  .hz-gu { height: min(100%, calc(128vw * 524 / 900)); }
  .hz-burbuja { left: auto; right: calc(14vw + 12px); bottom: 84%; font-size: 15px; }
  @keyframes hzDentro { to { font-size: 15px; } }
}
@media (prefers-reduced-motion: reduce) { .hz-gu { animation: none; } .hz-burbuja { animation: none; opacity: 1; } .hz-burbuja i { display: none; } .hz-burbuja span { animation: none; font-size: inherit; } }