.hero { overflow: hidden; }
.journey:not(.is-live) .hero { min-height: clamp(620px, 90vh, 900px); }

.hero__motif { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* círculos decorativos de respaldo (sin JS o con movimiento reducido) */
.hero__circle { position: absolute; border-radius: 50%; filter: blur(2px); }
.hero__circle--1 {
  width: clamp(240px, 32vw, 420px); height: clamp(240px, 32vw, 420px);
  background: radial-gradient(circle at 30% 30%, var(--color-sky-blue), transparent 70%);
  top: 60px; right: 60px; opacity: 0.5;
}
.hero__circle--2 {
  width: clamp(180px, 22vw, 280px); height: clamp(180px, 22vw, 280px);
  background: radial-gradient(circle at 60% 40%, var(--color-deep-cobalt), transparent 70%);
  bottom: 70px; right: 18%; opacity: 0.35;
}
.hero__circle--3 {
  width: clamp(220px, 30vw, 380px); height: clamp(220px, 30vw, 380px);
  background: radial-gradient(circle at 60% 40%, var(--color-sky-blue), transparent 70%);
  top: 18%; left: -140px; opacity: 0.5;
}

/* ---------- gotas líquidas de fondo (joy.js + liquid.js) ---------- */
.hero__liquid { position: absolute; top: 0; left: 0; pointer-events: none; }
/* área invisible para agarrar cada gota; el dibujo va en el canvas */
.hero-blob {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
}
.hero-blob.is-grabbed { cursor: grabbing; }

/* ---------- contenido ---------- */
.hero__content {
  position: relative;
  z-index: 2;
  max-width: 660px;
  padding: 0 var(--space-lg);
  pointer-events: none;
}
.hero__content > * { pointer-events: auto; }

.hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--fw-medium);
  color: var(--color-accent);
  font-size: 0.85rem;
  margin-bottom: var(--space-sm);
}

.hero__headline { position: relative; font-size: clamp(2.2rem, 5.4vw, 4rem); margin-bottom: var(--space-md); }
.hero__headline-accent { color: var(--color-accent); white-space: nowrap; cursor: pointer; }

/* los bloques que tapan "CREA SIN BLOQUEOS" y se derrumban */
.brick-layer { position: absolute; inset: 0; pointer-events: none; }
.brick {
  position: absolute;
  border-radius: 4px;
  background: linear-gradient(180deg, #2A5FFF, var(--color-deep-cobalt));
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18), inset 0 2px 0 rgba(255, 255, 255, 0.25);
  border: 1.5px solid var(--color-cloud-white);
}

.hero__subline { font-size: 1.1rem; max-width: 52ch; margin-bottom: var(--space-lg); color: var(--color-text-muted); }

.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.hero__cta {
  display: inline-block;
  background: var(--color-accent);
  color: #fff;
  font-weight: var(--fw-bold);
  font-size: 1.05rem;
  padding: 16px 30px;
  border: none;
  border-radius: var(--radius-md);
  text-decoration: none;
}
.hero__cta:hover { box-shadow: var(--shadow-card-hover); }
@media (max-width: 640px) {
  .hero__content { padding: 0; }
  .hero__headline { font-size: clamp(1.9rem, 8.6vw, 2.6rem); }
}