/* =========================================================================
   YENTALY — Parte 1 · Header + Hero (paleta de marca original)
   ========================================================================= */

:root {
  --bg: #050914;
  --navy: #08162d;
  --panel: rgba(13, 30, 59, 0.72);
  --text: #f4f8ff;
  --muted: #bdc9dc;
  --dim: #8290a8;
  --line: rgba(161, 191, 235, 0.18);
  --line-strong: rgba(105, 166, 255, 0.48);
  --blue: #2d8cff;
  --blue-2: #6ed6ff;
  --red: #ff405b;
  --header-height: 74px;
  --max: 1320px;
  --radius: 8px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0 / 96px 96px,
    linear-gradient(180deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px) 0 0 / 96px 96px,
    radial-gradient(ellipse at 50% 0%, rgba(45, 140, 255, 0.2), transparent 42%),
    linear-gradient(180deg, #071329 0%, #030713 42%, #071226 100%);
  color: var(--text);
  font-family: "Aptos", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img { display: block; max-width: 100%; }

/* ---------------------------------------------------------------------
   Header
   A glassy sticky bar (blurred, semi-transparent) instead of a flat block, with a soft gradient
   line glowing along its bottom edge and a thin scroll-progress fill inside that same edge. The
   logo mark breathes gently, and hovering (or tabbing through) a nav link glides a soft highlight
   pill under it rather than just recoloring the link. Below 900px the links tuck behind a hamburger
   that opens a dropdown, so nothing simply disappears on a phone.
   --------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 16px clamp(18px, 4vw, 48px);
  background: linear-gradient(180deg, rgba(6, 11, 24, 0.92), rgba(4, 8, 18, 0.88));
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
}
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(90, 150, 255, 0.55) 22%, rgba(150, 205, 255, 0.95) 50%, rgba(90, 150, 255, 0.55) 78%, transparent);
}
.site-header__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; overflow: hidden; pointer-events: none; }
.site-header__progress span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #2d8cff, #6ed6ff); box-shadow: 0 0 8px rgba(110, 180, 255, 0.85); }

.brand {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: 0.02em;
  font-size: 1.05rem;
}

.brand-mark {
  position: relative;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
}
.brand-mark svg { position: relative; z-index: 1; width: 100%; height: 100%; }
.brand-mark__halo { position: absolute; inset: -7px; border-radius: 50%; background: radial-gradient(circle, rgba(90, 165, 255, 0.55), transparent 72%); pointer-events: none; }

.site-header__actions { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }

.site-nav { position: relative; z-index: 1; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 2px; color: var(--muted); font-size: 0.94rem; }

.site-nav__hl {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(45, 140, 255, 0.28), rgba(110, 214, 255, 0.16));
  border: 1px solid rgba(120, 175, 255, 0.4);
  box-shadow: 0 0 16px rgba(80, 150, 255, 0.25);
  opacity: 0;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), width 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
  pointer-events: none;
}
.site-nav.is-hovering .site-nav__hl { opacity: 1; }

.site-nav a {
  position: relative;
  z-index: 1;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--muted);
  transition: color 0.2s ease;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--text);
  outline: 0;
}
.site-nav a:focus-visible { box-shadow: 0 0 0 2px rgba(120, 175, 255, 0.7); }

/* hamburger + its dropdown (hidden on desktop, see the responsive block near the end of this file) */
.nav-toggle {
  position: relative;
  z-index: 1;
  display: none;
  width: 40px;
  height: 40px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
}
.nav-toggle span {
  position: absolute;
  left: 9px;
  right: 9px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease, top 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-toggle span:nth-child(1) { top: 13px; }
.nav-toggle span:nth-child(2) { top: 19px; }
.nav-toggle span:nth-child(3) { top: 25px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

.mobile-nav {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  z-index: 19;
  display: none;
  flex-direction: column;
  padding: 8px clamp(18px, 4vw, 48px) 22px;
  background: linear-gradient(180deg, rgba(7, 13, 28, 0.98), rgba(4, 8, 18, 0.99));
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
  transform: translateY(-10px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.24s ease;
}
.mobile-nav.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.mobile-nav a { padding: 14px 2px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); color: var(--muted); text-decoration: none; font-size: 1.02rem; }
.mobile-nav a.btn--pill { margin-top: 16px; border-bottom: none; justify-content: center; }
.mobile-nav a:hover, .mobile-nav a:focus-visible { color: var(--text); outline: 0; }
/* the pill keeps its own dark-on-white look in every state (it isn't a plain nav link) */
.mobile-nav a.btn--pill, .mobile-nav a.btn--pill:hover, .mobile-nav a.btn--pill:focus-visible { color: #0b1220; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes brand-breathe { 0%, 100% { opacity: 0.45; scale: 0.92; } 50% { opacity: 0.9; scale: 1.14; } }
  @keyframes cta-ring { 0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(110, 214, 255, 0); } 15% { box-shadow: 0 0 0 6px rgba(110, 214, 255, 0.32); } 35% { box-shadow: 0 0 0 11px rgba(110, 214, 255, 0); } }
  .brand-mark__halo { animation: brand-breathe 4.6s ease-in-out infinite; }
  .site-header .btn--pill { animation: cta-ring 5s ease-in-out infinite; }
}

/* the real section names ("Soluciones a medida", "Toda la empresa"...) run longer than generic labels
   did, so the switch to the hamburger happens earlier (1100px, not 900px) — tested to the pixel: the
   5 links + the "Hablemos" pill still wrap to two lines around 1000-1050px otherwise. */
@media (max-width: 1100px) {
  .site-nav { display: none; }
  .nav-toggle { display: block; }
  .mobile-nav { display: flex; }
}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 24px;
  border-radius: 999px;
  font-size: 0.96rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
  white-space: nowrap;
}

.btn--primary {
  background: linear-gradient(135deg, #1f6fe0, #123c80);
  color: #fff;
  box-shadow: 0 18px 40px rgba(10, 40, 90, 0.4);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 22px 50px rgba(10, 40, 90, 0.5); }

.btn--ghost {
  border-color: rgba(148, 189, 245, 0.75);
  background: rgba(6, 14, 30, 0.65);
  backdrop-filter: blur(6px);
  color: var(--text);
  box-shadow: 0 12px 30px rgba(2, 6, 16, 0.4);
}
.btn--ghost:hover { border-color: var(--blue-2); background: rgba(6, 14, 30, 0.8); transform: translateY(-2px); }

.btn--pill {
  min-height: 42px;
  padding: 10px 22px;
  background: var(--text);
  color: #0b1220;
  font-weight: 800;
}
.btn--pill:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(244, 248, 255, 0.18); }

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: calc(100vh - var(--header-height));
  overflow: hidden;
  background: #030713;
}

.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--header-height));
  max-width: var(--max);
  margin: 0 auto;
}

.hero__copy {
  padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 72px);
  max-width: 640px;
}

p.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  color: #4a9dff;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(18px);
  /* combined with the [data-reveal] entrance below (bumped to element+class
     specificity so it isn't clobbered by the generic reveal rule, since a
     single `animation` shorthand on one element can't be set by two rules) */
  animation:
    reveal-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.05s forwards,
    eyebrow-color-shift 5s ease-in-out 0.85s infinite;
}

@keyframes eyebrow-color-shift {
  0%, 100% { color: #4a9dff; }
  50% { color: var(--red); }
}
.eyebrow__dash {
  width: 28px;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--blue-2));
  box-shadow: 0 0 12px rgba(110, 214, 255, 0.5);
}

h1 {
  margin: 0 0 24px;
  font-size: clamp(2.3rem, 3.6vw, 3.4rem);
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}

.lead {
  margin: 0 0 34px;
  max-width: 560px;
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.65;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ---------------------------------------------------------------------
   Hero visual — the photo is the full hero background, edge to edge,
   with the copy floating on top of it (not a side-by-side column).
   --------------------------------------------------------------------- */
.hero__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 45%;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    /* the photo already has a natural dark wall behind the copy zone —
       this just adds a soft blue "spray" bloom on top of it, and a
       gentle assist fading into the desk/photo so there's no seam */
    radial-gradient(1000px 720px at 16% 42%, rgba(64, 150, 255, 0.32), rgba(64, 150, 255, 0.1) 42%, transparent 66%),
    linear-gradient(112deg, rgba(3, 8, 20, 0.5) 0%, rgba(3, 8, 20, 0.32) 30%, rgba(3, 8, 20, 0.12) 44%, rgba(3, 8, 20, 0) 58%),
    linear-gradient(0deg, rgba(3, 8, 20, 0.4), transparent 22%, transparent 80%, rgba(3, 8, 20, 0.36));
  pointer-events: none;
}

.hero__badges {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.badge {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px 11px 14px;
  border-radius: 999px;
  background: linear-gradient(155deg, rgba(15, 34, 66, 0.82), rgba(6, 14, 30, 0.86));
  border: 1px solid var(--line-strong);
  box-shadow:
    0 16px 34px rgba(2, 6, 16, 0.55),
    0 0 26px rgba(45, 140, 255, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(6px);
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 700;
  white-space: nowrap;
  animation: badge-float 4.5s ease-in-out infinite;
}

.badge--order { animation-delay: 0.6s; }
.badge--ready { animation-delay: 1.2s; }

.badge--store,
.badge--order {
  border-color: rgba(52, 211, 153, 0.5);
  box-shadow:
    0 16px 34px rgba(2, 6, 16, 0.55),
    0 0 26px rgba(52, 211, 153, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.badge--store .badge__dot,
.badge--order .badge__dot { --dot-color: 52, 211, 153; }

.badge__dot {
  --dot-color: 110, 214, 255;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgb(var(--dot-color));
  box-shadow: 0 0 0 4px rgba(var(--dot-color), 0.18);
  flex: none;
}

.badge__dot--pulse { animation: dot-pulse 2.2s ease-in-out infinite; }

.badge__check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--blue-2);
  display: grid;
  place-items: center;
  flex: none;
  box-shadow: 0 0 0 4px rgba(110, 214, 255, 0.18);
}

.hero__caption {
  position: absolute;
  right: clamp(20px, 3vw, 48px);
  bottom: 22px;
  z-index: 3;
  margin: 0;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 2px 12px rgba(0, 0, 0, 0.5);
}
.hero__caption span { color: var(--blue-2); margin-right: 6px; text-shadow: 0 0 10px rgba(110, 214, 255, 0.6); }

/* ---------------------------------------------------------------------
   Scroll "dive into the scene" (desktop only, driven by script.js)
   The hero pins to the viewport while a tall runway scrolls past; JS
   writes --zoom / --copy-o / --copy-y / --badge-o / --scrim-o.
   Section 02 shares the same pinned frame (see below) and cross-dissolves
   in over the zooming hero, so there is no gap between the two photos.
   --------------------------------------------------------------------- */
@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
  :root {
    --hero-run: 175vh;
    --problems-run: 210vh;
    --break-run: 65vh;
    --attract-run: 130vh;
    --solution-run: 100vh;
    --choice-run: 120vh;
    --bridge-run: 130vh;
    --agent-run: 170vh;
    --pay-run: 130vh;
    --up-run: 130vh;
    --grow-run: 190vh;
    --sol-run: 180vh;
    --prj-run: 170vh;
    --con-run: 150vh;
    --total-run: calc(var(--hero-run) + var(--problems-run) + var(--break-run) + var(--attract-run) + var(--solution-run) + var(--choice-run) + var(--bridge-run) + var(--agent-run) + var(--pay-run) + var(--up-run) + var(--grow-run) + var(--sol-run) + var(--prj-run) + var(--con-run));
  }

  .hero-runway { position: relative; height: var(--hero-run); }

  .hero {
    position: sticky;
    top: var(--header-offset, var(--header-height));
    height: calc(100vh - var(--header-offset, var(--header-height)));
    min-height: 0;
  }

  .hero__image,
  .hero__badges {
    transform: scale(var(--zoom, 1));
    transform-origin: 73% 47%;
    will-change: transform;
  }

  .hero__content {
    min-height: 100%;
    opacity: var(--copy-o, 1);
    transform: translateY(var(--copy-y, 0px));
    will-change: opacity, transform;
  }
  .hero__badges { opacity: var(--badge-o, 1); }
  .hero__caption { opacity: var(--copy-o, 1); }
  .hero__scrim { opacity: var(--scrim-o, 1); }

  /* once the copy has faded out, it must not stay clickable or focusable */
  .hero.is-diving .hero__content,
  .hero.is-diving .hero__caption { visibility: hidden; }
}

/* ---------------------------------------------------------------------
   Section 02 · Los problemas que impiden crecer
   Photo background + copy on top (same layering as the hero), and four red
   alert badges that appear one by one as you scroll (driven by script.js
   through --b on each badge, 0 -> 1).
   --------------------------------------------------------------------- */
.kicker {
  margin: 0 0 22px;
  color: #4a9dff;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.kicker--dash {
  display: flex;
  align-items: center;
  gap: 12px;
}
.kicker--dash .eyebrow__dash { flex: none; }

.problems {
  position: relative;
  min-height: calc(100vh - var(--header-height));
  overflow: hidden;
  background: #030713;
}

.problems__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform: scale(var(--zoom2, 1));
  transform-origin: 50% 50%;
}

.problems__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(900px 620px at 18% 26%, rgba(64, 150, 255, 0.3), rgba(64, 150, 255, 0.08) 46%, transparent 68%),
    linear-gradient(100deg, rgba(3, 8, 20, 0.72) 0%, rgba(3, 8, 20, 0.5) 30%, rgba(3, 8, 20, 0.18) 50%, transparent 62%),
    linear-gradient(180deg, rgba(3, 8, 20, 0.35), transparent 30%, transparent 78%, rgba(3, 8, 20, 0.4));
  pointer-events: none;
}

.problems__content {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
}

.problems__copy {
  max-width: 760px;
  padding: clamp(36px, 7vh, 80px) clamp(24px, 5vw, 72px);
}

.problems h2 {
  margin: 0 0 22px;
  max-width: 11.5em;
  font-size: clamp(2.4rem, 4.5vw, 4.3rem);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

.problems__lead {
  margin: 0;
  max-width: 33em;
  color: var(--text);
  font-size: clamp(1.05rem, 1.55vw, 1.4rem);
  line-height: 1.4;
  text-shadow: 0 1px 14px rgba(3, 8, 20, 0.65);
}

.problems__badges {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.problems .badge--problem {
  --b: 1;
  gap: 14px;
  padding: 12px 26px 12px 14px;
  font-size: clamp(0.9rem, 1.3vw, 1.2rem);
  background: linear-gradient(155deg, rgba(40, 10, 18, 0.88), rgba(12, 6, 12, 0.92));
  border: 1px solid rgba(255, 64, 91, 0.75);
  box-shadow:
    0 18px 38px rgba(2, 4, 10, 0.6),
    0 0 30px rgba(255, 64, 91, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  animation: none;
  opacity: var(--b, 1);
  transform:
    translate(-50%, -50%)
    perspective(900px)
    rotateY(var(--yaw, 0deg))
    rotateZ(var(--tilt, 0deg))
    translateY(calc((1 - var(--b, 1)) * 28px))
    scale(calc(0.9 + 0.1 * var(--b, 1)));
}

.badge__alert {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle, #ff3048 0 30%, rgba(255, 48, 72, 0.35) 34% 52%, rgba(0, 0, 0, 0.4) 56% 100%);
  box-shadow: 0 0 0 1px rgba(255, 64, 91, 0.35), 0 0 18px rgba(255, 48, 72, 0.75);
  animation: alert-pulse 2s ease-in-out infinite;
}

@keyframes alert-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 64, 91, 0.35), 0 0 12px rgba(255, 48, 72, 0.5); }
  50% { box-shadow: 0 0 0 1px rgba(255, 64, 91, 0.5), 0 0 26px rgba(255, 48, 72, 0.95); }
}

@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
  /* Starts at the same y as the hero runway, so both scenes are pinned in
     the same frame from the first pixel of scroll. Section 02 is invisible
     (--sec2-o: 0) until the hero has zoomed a bit, then dissolves in on top. */
  .problems-runway {
    position: relative;
    margin-top: calc(-1 * var(--hero-run));
    height: var(--total-run);
  }

  .problems {
    position: sticky;
    z-index: 5;
    top: var(--header-offset, var(--header-height));
    height: calc(100vh - var(--header-offset, var(--header-height)));
    min-height: 0;
    opacity: var(--sec2-o, 1);
    pointer-events: none;
  }

  .problems__image { will-change: transform; }
  .problems__content {
    opacity: var(--copy2-o, 1);
    transform: translateY(var(--copy2-y, 0px));
  }
  .problems__badges { opacity: var(--badges-o, 1); }
}

@media (max-width: 980px) {
  .problems { min-height: auto; }
  .problems__scrim {
    background: linear-gradient(180deg, rgba(3, 8, 20, 0.72), rgba(3, 8, 20, 0.86) 55%, rgba(3, 8, 20, 0.94));
  }
  .problems__badges {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 4px clamp(24px, 5vw, 72px) 44px;
  }
  .problems .badge--problem {
    position: static;
    transform: none;
    opacity: 1;
  }
}

/* ---------------------------------------------------------------------
   Section 02b · El punto de quiebre
   Night-office photo with a centered statement. Same pinned frame as the
   sections before it: it dissolves in over section 02, then its copy
   arrives in four beats (--k1..--k4, written by script.js).
   --------------------------------------------------------------------- */
.break {
  position: relative;
  min-height: calc(100vh - var(--header-height));
  overflow: hidden;
  background: #030713;
}

.break__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform: scale(var(--zoom3, 1));
  transform-origin: 50% 50%;
}

.break__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 70% 46% at 50% 44%, rgba(3, 8, 20, 0.6), rgba(3, 8, 20, 0.28) 62%, transparent 100%),
    linear-gradient(180deg, rgba(3, 8, 20, 0.62), rgba(3, 8, 20, 0.3) 42%, rgba(3, 8, 20, 0.5));
  pointer-events: none;
}

.break__content {
  position: relative;
  z-index: 2;
  min-height: calc(100vh - var(--header-height));
  max-width: var(--max);
  margin: 0 auto;
  padding: 4vh clamp(24px, 5vw, 72px) 12vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.break__intro { display: flex; flex-direction: column; align-items: center; }

.break__rule {
  display: block;
  width: 88px;
  height: 3px;
  margin-bottom: clamp(22px, 3.6vh, 34px);
  border-radius: 2px;
  background: #2d8cff;
  box-shadow: 0 0 18px rgba(45, 140, 255, 0.6);
  transform-origin: center;
}

.break .kicker {
  margin: 0 0 clamp(28px, 4.6vh, 46px);
  color: #3d8bff;
  font-size: clamp(0.85rem, 1.25vw, 1.15rem);
  font-weight: 400;
  letter-spacing: 0.22em;
}

.break__title {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.14em;
  font-size: clamp(1.5rem, 2.6vw, 2.6rem);
  line-height: 1.28;
  font-weight: 400;
  text-wrap: balance;
}

.break__line--soft { font-weight: 300; color: #b9c2d6; }
.break__line--strong { font-weight: 700; color: var(--text); }
.break__line em { font-style: normal; color: #2f86ff; }

.break__sub {
  margin: clamp(26px, 4.4vh, 42px) 0 0;
  color: #2f86ff;
  font-size: clamp(1rem, 1.5vw, 1.4rem);
  line-height: 1.4;
  text-wrap: balance;
}

@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
  .break-runway {
    position: relative;
    margin-top: calc(-1 * var(--total-run));
    height: var(--total-run);
  }

  .break {
    position: sticky;
    z-index: 6;
    top: var(--header-offset, var(--header-height));
    height: calc(100vh - var(--header-offset, var(--header-height)));
    min-height: 0;
    opacity: var(--sec3-o, 1);
    pointer-events: none;
  }

  .break__content { min-height: 100%; opacity: var(--breakc-o, 1); }
  .break__image { will-change: transform; }

  .break__intro,
  .break__title,
  .break__sub { will-change: opacity, transform; }

  .break__intro { opacity: var(--k1, 1); transform: translateY(calc((1 - var(--k1, 1)) * 22px)); }
  .break__rule { transform: scaleX(var(--k1, 1)); }
  .break__line--soft { display: block; opacity: var(--k2, 1); transform: translateY(calc((1 - var(--k2, 1)) * 22px)); }
  .break__line--strong { display: block; opacity: var(--k3, 1); transform: translateY(calc((1 - var(--k3, 1)) * 22px)); }
  .break__sub { opacity: var(--k4, 1); transform: translateY(calc((1 - var(--k4, 1)) * 22px)); }
}

@media (max-width: 980px) {
  .break { min-height: auto; }
  .break__content { min-height: auto; padding: 72px clamp(24px, 5vw, 72px); }
  .break__scrim { background: linear-gradient(180deg, rgba(3, 8, 20, 0.6), rgba(3, 8, 20, 0.7)); }
}

/* ---------------------------------------------------------------------
   Section 03 · Páginas que atraen
   Dark backdrop, copy on the left, and a glowing 3D laptop on the right fed
   by three traffic sources (Google, Instagram, Anuncio) through animated
   curves. The laptop screen is an empty slot for a video (16:9). Arrives in
   nine beats (--a1..--a9, written by script.js) inside the shared pinned frame.
   --------------------------------------------------------------------- */
.attract {
  position: relative;
  min-height: calc(100vh - var(--header-height));
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(120, 165, 255, 0.045) 1px, transparent 1px) 0 0 / 96px 96px,
    linear-gradient(0deg, rgba(120, 165, 255, 0.045) 1px, transparent 1px) 0 0 / 96px 96px,
    radial-gradient(ellipse 55% 60% at 74% 62%, rgba(40, 120, 255, 0.2), transparent 64%),
    radial-gradient(ellipse 40% 50% at 6% 30%, rgba(30, 80, 200, 0.16), transparent 62%),
    linear-gradient(180deg, #060f26 0%, #040b1e 55%, #030815 100%);
}

.attract__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.attract__floor {
  position: absolute;
  left: 30%;
  right: -4%;
  bottom: 0;
  height: 30%;
  background: radial-gradient(ellipse 60% 100% at 55% 100%, rgba(45, 140, 255, 0.28), transparent 70%);
}

.attract__copy {
  position: relative;
  z-index: 2;
  width: min(44vw, 730px);
  padding: 0 0 0 clamp(24px, 3.5vw, 64px);
  min-height: calc(100vh - var(--header-height));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.attract .kicker--split { color: #d7e2f7; }
.attract .kicker__rule {
  background: linear-gradient(90deg, #ff9a3c, rgba(255, 154, 60, 0.3));
  box-shadow: 0 0 10px rgba(255, 154, 60, 0.45);
}

.attract h2 {
  margin: 0 0 clamp(18px, 3.2vh, 30px);
  font-size: clamp(2rem, 3.3vw, 3.4rem);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
}

.attract__lead {
  margin: 0;
  max-width: 21em;
  color: #b9c6de;
  font-size: clamp(1rem, 1.5vw, 1.45rem);
  font-weight: 300;
  line-height: 1.45;
}

.attract__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: clamp(26px, 5vh, 46px);
}
.attract__actions .btn { gap: 12px; }

.btn--wa {
  border-color: rgba(70, 150, 255, 0.85);
  background: rgba(6, 16, 40, 0.6);
  color: var(--text);
  box-shadow: 0 0 22px rgba(45, 140, 255, 0.14);
}
.btn--wa:hover { border-color: var(--blue-2); transform: translateY(-2px); }

/* the stage is a fixed-aspect box so the curves line up with chips + laptop */
.attract__stage {
  position: absolute;
  z-index: 2;
  left: 43.5%;
  width: 55%;
  aspect-ratio: 1000 / 680;
  top: 50%;
  transform: translateY(-50%);
}

.attract__links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.link {
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  filter: drop-shadow(0 0 5px rgba(90, 170, 255, 0.7));
}
.link--2 { filter: drop-shadow(0 0 5px rgba(220, 110, 255, 0.7)); }
.link--3 { filter: drop-shadow(0 0 5px rgba(255, 150, 60, 0.7)); }
.link-dot { filter: drop-shadow(0 0 6px currentColor); }
.link-dot--1 { color: #4fb0ff; }
.link-dot--2 { color: #e46bff; }
.link-dot--3 { color: #ff9a3c; }

.chip {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  min-height: 34px;
  height: 7.4%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 clamp(10px, 1.1vw, 16px);
  border-radius: 16px;
  background: linear-gradient(155deg, rgba(16, 30, 64, 0.92), rgba(7, 14, 34, 0.94));
  border: 1px solid rgba(190, 210, 255, 0.3);
  box-shadow: 0 14px 30px rgba(2, 6, 16, 0.5), 0 0 22px rgba(70, 140, 255, 0.16);
  color: #fff;
  font-size: clamp(0.82rem, 1.1vw, 1.08rem);
  font-weight: 600;
  white-space: nowrap;
}
.chip svg { flex: none; width: clamp(20px, 1.8vw, 26px); height: auto; }

.laptop {
  position: absolute;
  left: 13%;
  width: 84.5%;
  top: 14%;
}
.laptop__body {
  transform: perspective(1800px) rotateY(-9deg);
  transform-origin: 60% 50%;
}
.laptop__lid {
  position: relative;
  margin-left: 10.7%;
  width: 89.3%;
  padding: 2.3%;
  border-radius: 20px;
  background: linear-gradient(160deg, #0b1430, #050a1c);
  box-shadow:
    0 0 0 2px rgba(75, 150, 255, 0.9),
    0 0 44px rgba(45, 140, 255, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.laptop__screen {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(180deg, #f7faff, #eaf1ff);
}
.laptop__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.laptop__base {
  position: relative;
  height: clamp(16px, 2.6vw, 36px);
  margin: -1px -4% 0 0;
  border-radius: 0 0 26px 26px / 0 0 38px 38px;
  background: linear-gradient(180deg, #0d1a3c, #050a1a);
  box-shadow:
    0 0 0 1.5px rgba(75, 150, 255, 0.65),
    0 30px 70px rgba(40, 120, 255, 0.4);
}

.badge--ready-store {
  left: 37%;
  top: auto;
  bottom: calc(100% + 24px);
  right: auto;
  gap: 12px;
  padding: 13px 26px 13px 16px;
  font-size: clamp(0.85rem, 1.25vw, 1.2rem);
  font-weight: 600;
  background: linear-gradient(155deg, rgba(10, 30, 72, 0.9), rgba(5, 14, 36, 0.94));
  border: 1px solid rgba(80, 160, 255, 0.85);
  box-shadow: 0 16px 36px rgba(2, 6, 16, 0.55), 0 0 32px rgba(45, 140, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: none;
  transform: none;
}

@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
  .attract-runway {
    position: relative;
    margin-top: calc(-1 * var(--total-run));
    height: var(--total-run);
  }

  .attract {
    position: sticky;
    z-index: 6;
    top: var(--header-offset, var(--header-height));
    height: calc(100vh - var(--header-offset, var(--header-height)));
    min-height: 0;
    opacity: var(--att-o, 1);
    pointer-events: none;
  }
  .attract__copy { min-height: 100%; opacity: var(--attc-o, 1); }

  .attract .kicker--split { opacity: var(--a1, 1); transform: translateY(calc((1 - var(--a1, 1)) * 22px)); }
  .attract h2 { opacity: var(--a2, 1); transform: translateY(calc((1 - var(--a2, 1)) * 24px)); }
  .attract__lead { opacity: var(--a3, 1); transform: translateY(calc((1 - var(--a3, 1)) * 22px)); }
  .attract__actions {
    opacity: var(--a4, 1);
    transform: translateY(calc((1 - var(--a4, 1)) * 22px));
    visibility: hidden;
    pointer-events: none;
  }
  /* the only clickable things here: enabled just while this scene is the top one */
  .attract.is-live .attract__actions { visibility: visible; pointer-events: auto; }

  .attract__stage { opacity: var(--attc-o, 1); }

  .laptop {
    opacity: var(--a5, 1);
    transform: translateX(calc((1 - var(--a5, 1)) * 120px));
  }

  .chip--google { opacity: var(--a6, 1); transform: translateX(calc((1 - var(--a6, 1)) * -34px)); }
  .chip--instagram { opacity: var(--a7, 1); transform: translateX(calc((1 - var(--a7, 1)) * -34px)); }
  .chip--ads { opacity: var(--a8, 1); transform: translateX(calc((1 - var(--a8, 1)) * -34px)); }

  .link--1 { stroke-dashoffset: calc(1 - var(--a6, 1)); }
  .link--2 { stroke-dashoffset: calc(1 - var(--a7, 1)); }
  .link--3 { stroke-dashoffset: calc(1 - var(--a8, 1)); }
  .link-dot--1 { opacity: var(--a6, 1); }
  .link-dot--2 { opacity: var(--a7, 1); }
  .link-dot--3 { opacity: var(--a8, 1); }

  .badge--ready-store {
    opacity: var(--a9, 1);
    transform:
      translateY(calc((1 - var(--a9, 1)) * 22px))
      scale(calc(0.9 + 0.1 * var(--a9, 1)));
  }
}

@media (max-width: 980px) {
  .attract { min-height: auto; padding: 56px 0 64px; }
  .attract__copy { width: auto; min-height: auto; padding: 0 clamp(24px, 5vw, 72px); }
  .attract__stage {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    aspect-ratio: auto;
    margin: 36px clamp(18px, 5vw, 48px) 0;
    transform: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .attract__links { display: none; }
  .chip { position: static; width: auto; height: auto; min-height: 44px; align-self: flex-start; padding: 8px 16px; }
  .laptop { position: relative; left: auto; top: auto; width: 100%; margin-top: 10px; }
  .laptop__body { transform: none; }
  .laptop__lid { margin-left: 0; width: 100%; }
  .laptop { margin-top: 62px; }
  .laptop .badge--ready-store {
    position: absolute;
    top: auto;
    bottom: calc(100% + 10px);
    left: 4%;
    right: auto;
    padding: 9px 16px 9px 12px;
    font-size: 0.8rem;
    transform: none;
    opacity: 1;
  }
}

/* ---------------------------------------------------------------------
   Section 04 · Buscador inteligente
   The framed store video sits on the LEFT (flat, no tilt) and the copy on the
   RIGHT, ending in a three-step timeline. Same pinned frame as the scenes
   before it; everything arrives in nine beats (--s1..--s9, script.js).
   --------------------------------------------------------------------- */
.kicker--split {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(26px, 5vh, 46px);
  color: #cfdcf5;
  font-size: clamp(0.8rem, 1.05vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.07em;
}
.kicker--split b { color: var(--blue-2); font-weight: 800; }
.kicker--split .kicker__dot { color: var(--dim); }
.kicker__rule {
  flex: none;
  width: 38px;
  height: 2px;
  background: linear-gradient(90deg, #ff9a3c, rgba(255, 154, 60, 0.3));
  box-shadow: 0 0 10px rgba(255, 154, 60, 0.45);
}

.solution {
  position: relative;
  min-height: calc(100vh - var(--header-height));
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(120, 165, 255, 0.055) 1px, transparent 1px) 0 0 / 96px 96px,
    linear-gradient(0deg, rgba(120, 165, 255, 0.055) 1px, transparent 1px) 0 0 / 96px 96px,
    radial-gradient(ellipse 60% 70% at 30% 50%, rgba(45, 140, 255, 0.24), transparent 62%),
    radial-gradient(ellipse 45% 60% at 96% 20%, rgba(30, 90, 210, 0.22), transparent 62%),
    linear-gradient(180deg, #08204a 0%, #061735 52%, #040e26 100%);
}

.solution__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.streak { position: absolute; display: block; }
.streak--blue-a {
  left: 6%; top: -10%; width: 2px; height: 120%;
  background: linear-gradient(180deg, transparent, rgba(110, 170, 255, 0.28) 30%, rgba(110, 170, 255, 0.05) 80%, transparent);
  transform: rotate(24deg);
}
.streak--blue-b {
  left: 30%; top: -10%; width: 1px; height: 120%;
  background: linear-gradient(180deg, transparent, rgba(110, 170, 255, 0.18), transparent);
  transform: rotate(24deg);
}
.streak--red-a {
  left: 68%; top: -6%; width: 2px; height: 34%;
  background: linear-gradient(180deg, rgba(255, 64, 91, 0.6), transparent);
  transform: rotate(-19deg);
}
.streak--red-b {
  right: 3%; bottom: -8%; width: 2px; height: 36%;
  background: linear-gradient(0deg, rgba(255, 64, 91, 0.45), transparent);
  transform: rotate(-19deg);
}

/* left: the framed page/video */
.solution__stage {
  position: absolute;
  z-index: 2;
  left: 3.7%;
  width: 55.6%;
  top: 50%;
  transform: translateY(-50%);
}

.frame {
  border-radius: 22px;
  background: #0b1836;
  box-shadow:
    0 0 0 2px rgba(70, 150, 255, 0.95),
    0 0 46px rgba(45, 140, 255, 0.55),
    0 46px 90px rgba(0, 0, 0, 0.55);
  /* the original browser-window look, mirrored: this one now sits on the left */
  transform: perspective(1700px) rotateY(6deg) rotateX(4deg) rotateZ(-2.2deg);
  transform-origin: 50% 50%;
  overflow: hidden;
}
.frame__bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 22px;
  height: clamp(38px, 4.3vw, 58px);
  background: linear-gradient(180deg, #0f1f45, #0a1631);
}
.frame__dot { width: 13px; height: 13px; border-radius: 50%; flex: none; }
.frame__dot--red { background: #ff5f57; }
.frame__dot--yellow { background: #febc2e; }
.frame__dot--green { background: #28c840; }
.frame__url {
  flex: 1;
  height: 46%;
  margin-left: 18px;
  border-radius: 999px;
  background: #1a2a52;
  max-width: 78%;
}
.frame__screen {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(180deg, #f7faff, #eaf1ff);
}
.frame__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* right: the information */
.solution__copy {
  position: absolute;
  z-index: 2;
  left: 63.6%;
  right: 2.6%;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.solution h2 {
  margin: 0;
  font-size: clamp(1.8rem, 3.05vw, 3.2rem);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
}
.solution__h { display: block; text-wrap: balance; }
.solution__h + .solution__h { margin-top: 0.42em; }

.solution__lead {
  margin: clamp(16px, 3vh, 28px) 0 0;
  color: var(--text);
  font-size: clamp(1rem, 1.55vw, 1.55rem);
  font-weight: 300;
  line-height: 1.4;
}

.steps {
  --step-gap: clamp(16px, 3.2vh, 30px);
  margin: clamp(24px, 5vh, 46px) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--step-gap);
}
.step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 40px;
  color: #eef3ff;
  font-size: clamp(1rem, 1.45vw, 1.42rem);
}
.step__dot {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle, #56c8ff 0 30%, rgba(86, 200, 255, 0.35) 34% 48%, rgba(14, 40, 96, 0.9) 52%);
  box-shadow: 0 0 0 1px rgba(80, 150, 255, 0.35), 0 0 18px rgba(86, 200, 255, 0.45);
}
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 19px;
  top: 40px;
  width: 2px;
  height: var(--step-gap);
  background: linear-gradient(180deg, rgba(86, 200, 255, 0.85), rgba(86, 200, 255, 0.5));
  box-shadow: 0 0 8px rgba(86, 200, 255, 0.5);
}

.solution__note {
  margin: clamp(26px, 5.4vh, 52px) 0 0;
  color: var(--text);
  font-size: clamp(0.95rem, 1.45vw, 1.4rem);
  font-weight: 300;
}

@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
  .solution-runway {
    position: relative;
    margin-top: calc(-1 * var(--total-run));
    height: var(--total-run);
  }

  .solution {
    position: sticky;
    z-index: 7;
    top: var(--header-offset, var(--header-height));
    height: calc(100vh - var(--header-offset, var(--header-height)));
    min-height: 0;
    opacity: var(--sol-o, 1);
    pointer-events: none;
  }

  .solution__stage,
  .solution__copy { opacity: var(--solc-o, 1); }

  .frame {
    opacity: var(--s1, 1);
    transform:
      perspective(1700px)
      rotateY(calc(6deg + (1 - var(--s1, 1)) * 16deg))
      rotateX(4deg)
      rotateZ(-2.2deg)
      translateX(calc((1 - var(--s1, 1)) * -110px));
    will-change: transform, opacity;
  }

  .solution .kicker--split { opacity: var(--s2, 1); transform: translateY(calc((1 - var(--s2, 1)) * 22px)); }
  .solution__h:nth-child(1) { opacity: var(--s3, 1); transform: translateY(calc((1 - var(--s3, 1)) * 24px)); }
  .solution__h:nth-child(2) { opacity: var(--s4, 1); transform: translateY(calc((1 - var(--s4, 1)) * 24px)); }
  .solution__lead { opacity: var(--s5, 1); transform: translateY(calc((1 - var(--s5, 1)) * 22px)); }
  .step:nth-child(1) { opacity: var(--s6, 1); transform: translateY(calc((1 - var(--s6, 1)) * 18px)); }
  .step:nth-child(2) { opacity: var(--s7, 1); transform: translateY(calc((1 - var(--s7, 1)) * 18px)); }
  .step:nth-child(3) { opacity: var(--s8, 1); transform: translateY(calc((1 - var(--s8, 1)) * 18px)); }
  /* each connector grows in together with the step it leads to */
  .step:nth-child(1)::after { opacity: var(--s7, 1); }
  .step:nth-child(2)::after { opacity: var(--s8, 1); }
  .solution__note { opacity: var(--s9, 1); transform: translateY(calc((1 - var(--s9, 1)) * 18px)); }
}

@media (max-width: 980px) {
  .solution { min-height: auto; padding: 56px 0 64px; display: flex; flex-direction: column; }
  .solution__copy {
    position: relative;
    left: auto; right: auto; top: auto; bottom: auto;
    order: 1;
    padding: 0 clamp(24px, 5vw, 72px);
  }
  .solution__stage {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    order: 2;
    margin: 40px clamp(18px, 5vw, 48px) 0;
    transform: none;
  }
  .frame { transform: perspective(1200px) rotateY(4deg) rotateX(2deg); }
}

/* ---------------------------------------------------------------------
   Section 05 · El cliente elige cómo continuar
   Copy + two option cards on the LEFT, framed video on the RIGHT (flat,
   no tilt). Arrives in eight beats (--c1..--c8, script.js).
   --------------------------------------------------------------------- */
.choice {
  position: relative;
  min-height: calc(100vh - var(--header-height));
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(120, 165, 255, 0.05) 1px, transparent 1px) 0 0 / 96px 96px,
    linear-gradient(0deg, rgba(120, 165, 255, 0.05) 1px, transparent 1px) 0 0 / 96px 96px,
    radial-gradient(ellipse 34% 60% at 102% 26%, rgba(150, 34, 78, 0.34), transparent 66%),
    radial-gradient(ellipse 50% 65% at 22% 55%, rgba(35, 110, 230, 0.2), transparent 62%),
    linear-gradient(180deg, #07183a 0%, #051230 55%, #030b20 100%);
}
.choice__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.choice .streak--blue-a { left: 9%; }
.choice .streak--red-a { left: 70%; }
.choice .kicker--split { color: #fff; }

.choice__copy {
  position: absolute;
  z-index: 2;
  left: 3.3%;
  width: 43%;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.choice h2 {
  margin: 0;
  font-size: clamp(2.1rem, min(4.9vw, 8.4vh), 5.2rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #fff;
}
.choice__h { display: block; }
.choice__h--accent {
  /* room below the baseline so the "y" descender isn't clipped by the text gradient */
  padding: 0 0.06em 0.2em 0;
  margin-bottom: -0.2em;
  background: linear-gradient(90deg, #c4ecff, #7fcfff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.choice__lead {
  margin: clamp(14px, 2.6vh, 26px) 0 0;
  max-width: 18.5em;
  color: #fff;
  font-size: clamp(1.05rem, min(1.85vw, 3.4vh), 1.95rem);
  font-weight: 300;
  line-height: 1.3;
}

.choice__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.1vw, 20px);
  margin-top: clamp(22px, 4.6vh, 46px);
}
.option {
  position: relative;
  padding: clamp(14px, 1.7vw, 26px) clamp(14px, 1.8vw, 28px) clamp(16px, 1.9vw, 28px);
  border-radius: 10px;
  background: linear-gradient(160deg, rgba(12, 32, 72, 0.78), rgba(6, 18, 44, 0.86));
  border: 1px solid rgba(90, 145, 255, 0.24);
  border-left: 3px solid var(--accent);
  box-shadow: 0 18px 36px rgba(2, 6, 18, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}
.option--buy { --accent: #2d8cff; }
.option--wa { --accent: #2fd27d; border-color: rgba(70, 200, 140, 0.26); }
.option::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 0;
  bottom: 0;
  width: 26%;
  border-radius: 10px 0 0 10px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent);
  pointer-events: none;
}
.option__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(44px, 4.2vw, 62px);
  height: clamp(44px, 4.2vw, 62px);
  border-radius: 14px;
  background: linear-gradient(160deg, #17357a, #10275c);
  box-shadow: inset 0 0 0 1px rgba(120, 170, 255, 0.2);
}
.option--wa .option__icon { background: linear-gradient(160deg, #11795a, #0b5a43); box-shadow: inset 0 0 0 1px rgba(90, 220, 160, 0.25); }
.option__icon svg { width: 56%; height: 56%; }
.option h3 {
  position: relative;
  margin: clamp(12px, 2.2vh, 20px) 0 0;
  color: #fff;
  font-size: clamp(1.05rem, min(1.5vw, 2.8vh), 1.55rem);
  font-weight: 700;
  line-height: 1.2;
}
.option p {
  position: relative;
  margin: clamp(6px, 1.2vh, 12px) 0 0;
  color: #fff;
  font-size: clamp(0.88rem, min(1.28vw, 2.4vh), 1.32rem);
  font-weight: 300;
  line-height: 1.4;
}
.choice__note {
  margin: clamp(18px, 3.6vh, 36px) 0 0;
  color: #fff;
  font-size: clamp(0.85rem, min(1.2vw, 2.3vh), 1.25rem);
  font-weight: 300;
}

.choice__stage {
  position: absolute;
  z-index: 2;
  left: 48.3%;
  width: 49.1%;
  top: 50%;
  transform: translateY(-50%);
}
/* a desktop monitor: slim glowing bezel, a small chin with an LED, neck and base */
.choice-frame { position: relative; }
.choice-frame__inner {
  position: relative;
  padding: 1.7% 1.7% 4.4%;
  border-radius: 16px;
  background: linear-gradient(160deg, #0c1d47, #050c22);
  box-shadow:
    0 0 0 2px rgba(70, 150, 255, 0.9),
    0 0 46px rgba(45, 140, 255, 0.5),
    0 40px 80px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.choice-frame__inner::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1.4%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: #5fd0ff;
  box-shadow: 0 0 10px rgba(95, 208, 255, 0.9);
}
.monitor__neck {
  width: 10%;
  height: clamp(16px, 3.4vh, 34px);
  margin: 0 auto;
  background: linear-gradient(90deg, #08132e, #17336f 50%, #08132e);
  box-shadow: inset 0 0 0 1.5px rgba(75, 150, 255, 0.5);
}
.monitor__base {
  width: 28%;
  height: 12px;
  margin: 0 auto;
  border-radius: 8px 8px 14px 14px;
  background: linear-gradient(180deg, #17336f, #08132e);
  box-shadow: 0 0 0 1.5px rgba(75, 150, 255, 0.65), 0 16px 40px rgba(40, 120, 255, 0.4);
}
.choice-frame__screen {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  background: linear-gradient(180deg, #f7faff, #eaf1ff);
}
.choice__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
  .choice-runway {
    position: relative;
    margin-top: calc(-1 * var(--total-run));
    height: var(--total-run);
  }

  .choice {
    position: sticky;
    z-index: 8;
    top: var(--header-offset, var(--header-height));
    height: calc(100vh - var(--header-offset, var(--header-height)));
    min-height: 0;
    opacity: var(--cho-o, 1);
    pointer-events: none;
  }

  /* both halves slide in from the outside edges toward the middle, together */
  .choice__stage { opacity: var(--choc-o, 1); }
  .choice__copy {
    opacity: calc(var(--c1, 1) * var(--choc-o, 1));
    transform: translateX(calc((1 - var(--c1, 1)) * -16vw));
    will-change: transform, opacity;
  }
  .choice-frame {
    opacity: var(--c1, 1);
    transform: translateX(calc((1 - var(--c1, 1)) * 16vw));
    will-change: transform, opacity;
  }
}

@media (max-width: 980px) {
  .choice { min-height: auto; padding: 56px 0 64px; display: flex; flex-direction: column; }
  .choice__copy {
    position: relative;
    left: auto; width: auto; top: auto; bottom: auto;
    padding: 0 clamp(24px, 5vw, 72px);
  }
  .choice__stage {
    position: relative;
    left: auto;
    width: auto;
    top: auto;
    margin: 40px clamp(18px, 5vw, 48px) 0;
    transform: none;
  }
}
@media (max-width: 640px) {
  .choice__cards { grid-template-columns: 1fr; }
  .choice__lead { max-width: none; }
}

/* ---------------------------------------------------------------------
   Entre la compra y la conversación (between 05 and 06)
   Copy on the LEFT, a small diagram on the RIGHT: two customers (one buys,
   one asks for help) both flow through the product info into DAIA. Once the
   scene has faded in, everything arrives on a timer (--r1..--r11, script.js).
   The diagram scales with its own width (cqw units) so it keeps its shape.
   --------------------------------------------------------------------- */
.bridge {
  position: relative;
  min-height: calc(100vh - var(--header-height));
  overflow: hidden;
  background:
    radial-gradient(ellipse 55% 55% at 66% 50%, rgba(70, 90, 255, 0.32), transparent 70%),
    radial-gradient(ellipse 70% 26% at 46% 104%, rgba(90, 130, 255, 0.5), transparent 70%),
    radial-gradient(ellipse 30% 40% at 100% 0%, rgba(120, 40, 120, 0.28), transparent 70%),
    linear-gradient(180deg, #0a2270 0%, #081a5c 55%, #060f3d 100%);
}
.bridge__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.bridge__arc {
  position: absolute;
  border: 1px solid rgba(130, 170, 255, 0.16);
  border-radius: 50%;
}
.bridge__arc--a { left: 34%; top: 8%; width: 60%; height: 86%; }
.bridge__arc--b { left: -6%; top: 52%; width: 46%; height: 78%; border-color: rgba(130, 170, 255, 0.12); }
.bridge__glow {
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: -14%;
  height: 34%;
  background: radial-gradient(ellipse at 50% 100%, rgba(110, 150, 255, 0.5), transparent 70%);
}

.bridge__copy {
  position: absolute;
  z-index: 2;
  left: 3.3%;
  width: 37%;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bridge__eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 clamp(20px, 4vh, 40px);
  color: #d5e0fb;
  font-size: clamp(0.7rem, min(0.95vw, 2vh), 0.95rem);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.bridge__rule {
  display: block;
  flex: none;
  width: 52px;
  height: 2px;
  background: linear-gradient(90deg, #ff6f7d, #ffab8a);
  box-shadow: 0 0 10px rgba(255, 120, 130, 0.45);
}
.bridge h2 {
  margin: 0;
  font-size: clamp(2rem, min(3.5vw, 6.8vh), 4.4rem);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #fff;
}
.bridge__accent { color: #8fb5ff; }
.bridge__lead {
  max-width: 20em;
  margin: clamp(16px, 3vh, 30px) 0 0;
  color: #fff;
  font-size: clamp(1rem, min(1.6vw, 3.1vh), 1.7rem);
  font-weight: 300;
  line-height: 1.32;
}
.bridge__more { margin-top: clamp(22px, 4.4vh, 44px); }
.bridge__note {
  margin: clamp(14px, 2.6vh, 26px) 0 0;
  color: #fff;
  font-size: clamp(0.9rem, min(1.25vw, 2.5vh), 1.3rem);
  font-weight: 400;
}
.bridge__tagline {
  margin: clamp(30px, 8vh, 90px) 0 0;
  color: #b8c8f5;
  font-size: clamp(0.62rem, min(0.85vw, 1.7vh), 0.85rem);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

/* diagram ------------------------------------------------------------- */
.bridge__stage {
  --u: 1cqw;
  position: absolute;
  z-index: 2;
  container-type: inline-size;
  left: 39.6%;
  width: min(58.6%, calc((100vh - var(--header-height)) * 1.34));
  aspect-ratio: 1000 / 760;
  top: 50%;
  transform: translateY(-50%);
}
.bridge__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bline { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.bline--blue { filter: drop-shadow(0 0 6px rgba(80, 160, 255, 0.8)); stroke-dasharray: 1; }
.bline--orange { filter: drop-shadow(0 0 6px rgba(255, 140, 100, 0.8)); stroke-dasharray: 1; }
.bline--tip { filter: drop-shadow(0 0 5px rgba(255, 150, 110, 0.8)); }
/* leaves the customer's message card and heads down, toward the next page (drawn by script.js) */
.bline--exit { filter: drop-shadow(0 0 6px rgba(255, 150, 110, 0.85)); }
.bline__head { filter: drop-shadow(0 0 7px rgba(255, 150, 110, 0.9)); }
.bsparks circle { filter: drop-shadow(0 0 4px currentColor); opacity: 0.9; }

.blabel {
  position: absolute;
  margin: 0;
  text-align: center;
  color: #cfdcf9;
  font-size: max(10px, calc(var(--u) * 1.3));
  font-weight: 500;
  letter-spacing: 0.24em;
  line-height: 1.75;
  text-transform: uppercase;
  transform: translateX(-50%);
  white-space: nowrap;
}
.blabel--a { left: 15.8%; top: 1.4%; }
.blabel--b { left: 72.1%; top: 6.4%; }

.bcard {
  position: absolute;
  left: 4.7%;
  top: 9.6%;
  width: 25.3%;
  height: 31.8%;
  border-radius: 12px;
  background: #f4f7ff;
  box-shadow: 0 18px 40px rgba(2, 8, 40, 0.5), 0 0 30px rgba(110, 150, 255, 0.25);
  overflow: hidden;
  color: #0e1a44;
  text-align: center;
}
.bcard__bar { display: flex; gap: 4px; padding: 3.2% 4.4%; background: #d8e2fb; height: 11%; align-items: center; }
.bcard__bar i { width: max(5px, calc(var(--u) * 0.85)); height: max(5px, calc(var(--u) * 0.85)); border-radius: 50%; background: #ff6b6b; }
.bcard__bar i:nth-child(2) { background: #ffc043; }
.bcard__bar i:nth-child(3) { background: #45c76a; }
.bcard__head { display: flex; align-items: center; justify-content: space-between; padding: 3% 6% 0; }
.bcard__head b { font-size: max(11px, calc(var(--u) * 2)); font-weight: 800; letter-spacing: -0.03em; }
.bcard__head span { display: inline-flex; gap: 10px; }
.bcard__head svg { width: max(11px, calc(var(--u) * 1.5)); height: auto; }
.bcard__check {
  display: grid;
  place-items: center;
  width: 28%;
  aspect-ratio: 1;
  margin: 5% auto 0;
  border-radius: 50%;
  background: linear-gradient(160deg, #4a8bff, #2563eb);
  box-shadow: 0 8px 20px rgba(45, 110, 255, 0.4);
}
.bcard__check svg { width: 55%; height: 55%; }
.bcard__title { margin: 5% 0 0; font-size: max(11px, calc(var(--u) * 2)); font-weight: 700; letter-spacing: -0.01em; }
.bcard__line { display: block; width: 66%; height: max(4px, calc(var(--u) * 0.7)); margin: 3.6% auto 0; border-radius: 99px; background: #cdd6ea; }
.bcard__line--short { width: 55%; margin-top: 2.4%; }

/* "Compra directa" card: the cart gets an item, the sale is confirmed, the page keeps loading */
.bcard__cart { position: relative; display: inline-flex; font-style: normal; }
.bcard__cart em {
  position: absolute;
  right: -7px;
  top: -8px;
  display: grid;
  place-items: center;
  min-width: max(10px, calc(var(--u) * 1.3));
  height: max(10px, calc(var(--u) * 1.3));
  border-radius: 99px;
  background: #2f7bff;
  color: #fff;
  font-size: max(7px, calc(var(--u) * 0.9));
  font-style: normal;
  font-weight: 800;
  line-height: 1;
}
.bcard__check { position: relative; }
.bcard__check::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(70, 130, 255, 0.7);
  opacity: 0;
  pointer-events: none;
}
.bcard__tick { stroke-dasharray: 1; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes bcard-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
  @keyframes bcard-cart { 0%, 20%, 100% { transform: rotate(0deg) scale(1); } 4% { transform: rotate(-16deg) scale(1.2); } 8% { transform: rotate(14deg) scale(1.2); } 12% { transform: rotate(-8deg) scale(1.1); } 16% { transform: rotate(0deg) scale(1); } }
  @keyframes bcard-badge { 0%, 100% { transform: scale(1); } 3% { transform: scale(0); } 9% { transform: scale(1.5); } 14% { transform: scale(1); } }
  @keyframes bcard-circle {
    0%, 100% { transform: scale(1); }
    12% { transform: scale(0.82); }
    22% { transform: scale(1.12); }
    30% { transform: scale(1); }
  }
  @keyframes bcard-ring { 0%, 18% { transform: scale(1); opacity: 0; } 22% { transform: scale(1); opacity: 0.8; } 48% { transform: scale(1.9); opacity: 0; } 100% { transform: scale(1.9); opacity: 0; } }
  @keyframes bcard-tick { 0%, 14% { stroke-dashoffset: 1; opacity: 1; } 30% { stroke-dashoffset: 0; } 90% { stroke-dashoffset: 0; opacity: 1; } 96% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 1; opacity: 0; } }
  @keyframes bcard-shine { 0% { background-position: 120% 0; } 100% { background-position: -20% 0; } }
  .bcard { animation: bcard-float 5.5s ease-in-out infinite; }
  .bcard__cart svg { animation: bcard-cart 6.5s ease-in-out infinite; transform-origin: 50% 90%; }
  .bcard__cart em { animation: bcard-badge 6.5s ease-in-out infinite; }
  .bcard__check { animation: bcard-circle 6.5s ease-in-out infinite; }
  .bcard__check::after { animation: bcard-ring 6.5s ease-out infinite; }
  .bcard__tick { animation: bcard-tick 6.5s ease-in-out infinite; }
  .bcard__line, .bcard__line--short {
    background: linear-gradient(90deg, #cdd6ea 30%, #f6f9ff 50%, #cdd6ea 70%) 0 0 / 250% 100%;
    animation: bcard-shine 2.4s ease-in-out infinite;
  }
  .bcard__line--short { animation-delay: 0.3s; }
}

.bwa {
  position: absolute;
  left: 57.5%;
  top: 15.3%;
  width: 36.8%;
  height: 16.3%;
  display: flex;
  align-items: center;
  gap: 3%;
  padding: 0 3% 0 3.4%;
  border-radius: 14px;
  border: 1.5px solid rgba(90, 240, 170, 0.8);
  background: linear-gradient(160deg, #10508a 0%, #0c3585 55%, #0a2668 100%);
  box-shadow: 0 0 34px rgba(37, 211, 102, 0.42), 0 0 64px rgba(80, 140, 255, 0.3), 0 16px 36px rgba(2, 8, 40, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
/* speech-bubble tail: a small curved tail pointing DOWN, below the card (nothing pokes up into it) */
.bwa::after {
  content: "";
  position: absolute;
  top: calc(100% - 1.5px);
  right: 10%;
  width: 22px;
  height: 23px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -3 22 23' width='22' height='23'%3E%3Cpath d='M3 -3 L19 -3 L19 0 C18 8 12 14 3 16 C7 11 7 5 3 -1 Z' fill='%230a2a70'/%3E%3Cpath d='M19 0 C18 8 12 14 3 16 C7 11 7 5 3 0' fill='none' stroke='%235af0aa' stroke-opacity='0.8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.bwa__typing { z-index: 2; }
/* pre-drawn stronger glow; its opacity is what pulses (cheap), not the shadow itself */
.bwa::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 46px rgba(37, 211, 102, 0.68), 0 0 80px rgba(80, 140, 255, 0.42);
  opacity: 0;
  pointer-events: none;
}
.bwa__icon {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 15%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(160deg, #3be27d, #17b955);
  box-shadow: 0 0 20px rgba(37, 211, 102, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.bwa__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #3be27d;
  opacity: 0;
  pointer-events: none;
}
.bwa__icon svg { width: 62%; height: 62%; }
.bwa__icon svg path { fill: #fff; }
.bwa__msg {
  flex: 1;
  position: relative;
  padding: 3.4% 5% 8% 5.4%;
  border-radius: 10px;
  background: linear-gradient(180deg, #e6ffdf, #d2f7c8);
  color: #0d3320;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}
.bwa__msg p { margin: 0; font-size: max(11px, calc(var(--u) * 2.1)); line-height: 1.2; font-weight: 600; }
.bwa__msg small { position: absolute; right: 5%; bottom: 8%; color: rgba(13, 51, 32, 0.6); font-size: max(8px, calc(var(--u) * 1.1)); }
.bwa__msg small b { color: #2aa8e6; font-weight: 800; letter-spacing: -0.12em; }
.bwa__typing {
  position: absolute;
  right: -6.2%;
  bottom: 0;
  display: inline-flex;
  gap: 4px;
  padding: 7px 10px;
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}
.bwa__typing i { width: 5px; height: 5px; border-radius: 50%; background: #25d366; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes bwa-ping {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.9); opacity: 0; }
  }
  @keyframes bwa-dot {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
    30% { transform: translateY(-4px); opacity: 1; }
  }
  @keyframes bwa-glow { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
  .bwa::before { animation: bwa-glow 3s ease-in-out infinite; }
  .bwa__icon::after { animation: bwa-ping 2.2s ease-out infinite; }
  .bwa__typing i { animation: bwa-dot 1.2s ease-in-out infinite; }
  .bwa__typing i:nth-child(2) { animation-delay: 0.15s; }
  .bwa__typing i:nth-child(3) { animation-delay: 0.3s; }
}

.bchips {
  position: absolute;
  left: 21.4%;
  top: 49.6%;
  width: 41.4%;
  height: 12%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.2%;
  overflow: hidden;
  border-radius: 999px;
  border: 1.5px solid rgba(170, 195, 255, 0.85);
  background: linear-gradient(160deg, rgba(58, 96, 235, 0.75), rgba(26, 44, 158, 0.85));
  box-shadow: 0 0 38px rgba(120, 140, 255, 0.7), 0 0 70px rgba(255, 140, 140, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
/* a soft band of light that keeps sweeping across the pill */
.bchips::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28) 50%, transparent);
  transform: translateX(-120%);
  pointer-events: none;
}
.bchip {
  --tone: 90, 160, 255;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.9% 2.4%;
  height: 62%;
  border-radius: 999px;
  border: 1px solid rgba(190, 210, 255, 0.55);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: max(10px, calc(var(--u) * 1.45));
  font-weight: 600;
  white-space: nowrap;
}
.bchip:nth-child(2) { --tone: 255, 150, 60; }
.bchip:nth-child(3) { --tone: 50, 220, 130; }
.bchip svg { flex: none; width: max(14px, calc(var(--u) * 2)); height: auto; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes bchip-glow {
    0%, 34%, 100% {
      background-color: rgba(255, 255, 255, 0.12);
      border-color: rgba(190, 210, 255, 0.55);
      box-shadow: 0 0 0 rgba(var(--tone), 0);
      scale: 1;
    }
    8%, 24% {
      background-color: rgba(var(--tone), 0.5);
      border-color: rgba(var(--tone), 1);
      box-shadow: 0 0 22px rgba(var(--tone), 0.85), inset 0 0 12px rgba(var(--tone), 0.4);
      scale: 1.07;
    }
  }
  @keyframes bchip-icon-a { 0%, 34%, 100% { rotate: 0deg; scale: 1; } 8% { rotate: -18deg; scale: 1.2; } 16% { rotate: 14deg; scale: 1.2; } 24% { rotate: 0deg; scale: 1.1; } }
  @keyframes bchip-icon-b { 0%, 34%, 100% { rotate: 0deg; scale: 1; } 8% { rotate: 24deg; scale: 1.2; } 14% { rotate: -20deg; scale: 1.2; } 20% { rotate: 12deg; scale: 1.15; } 26% { rotate: 0deg; scale: 1.05; } }
  @keyframes bchip-icon-c { 0%, 34%, 100% { translate: 0 0; scale: 1; } 10% { translate: 0 -3px; scale: 1.25; } 18% { translate: 0 1px; scale: 1.15; } 26% { translate: 0 0; scale: 1.05; } }
  @keyframes bchips-sweep { 0% { transform: translateX(-120%); } 45%, 100% { transform: translateX(330%); } }
  .bchips::after { animation: bchips-sweep 4.5s ease-in-out infinite; }
  .bchip { animation: bchip-glow 4.5s ease-in-out infinite; }
  .bchip:nth-child(2) { animation-delay: 1.5s; }
  .bchip:nth-child(3) { animation-delay: 3s; }
  .bchip:nth-child(1) svg { animation: bchip-icon-a 4.5s ease-in-out infinite; }
  .bchip:nth-child(2) svg { animation: bchip-icon-b 4.5s ease-in-out 1.5s infinite; }
  .bchip:nth-child(3) svg { animation: bchip-icon-c 4.5s ease-in-out 3s infinite; }
}

.barrow { position: absolute; left: 43%; top: 61.6%; transform: translateX(-50%); display: block; line-height: 0; }
.barrow svg { width: max(10px, calc(var(--u) * 1.6)); height: auto; }

.bdaia {
  position: absolute;
  left: 42.9%;
  top: 78.3%;
  width: 12.7%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}
.bdaia__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(130, 170, 255, 0.28); }
.bdaia__ring--1 { transform: scale(1.5); }
.bdaia__ring--2 { transform: scale(2.1); border-color: rgba(130, 170, 255, 0.14); }
.bdaia__orb {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 26%, #bfe4ff 0%, #5a98ff 26%, #3145e0 52%, #15206e 82%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.28),
    inset -10px -8px 22px rgba(255, 140, 120, 0.6),
    inset 8px 6px 20px rgba(150, 210, 255, 0.55),
    0 0 44px rgba(100, 140, 255, 0.8);
}
.bdaia__orb { padding-bottom: 9%; }
.bdaia__orb i {
  display: block;
  width: 8%;
  height: 17%;
  border-radius: 99px;
  border-top: 0 solid #fff;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
  transition: width 0.25s ease, height 0.25s ease, background-color 0.25s ease, border-radius 0.25s ease, border-top-width 0.25s ease, translate 0.35s ease;
}
.bdaia__mouth {
  position: absolute;
  left: 50%;
  top: 61%;
  width: 26%;
  height: 0;
  box-sizing: border-box;
  border: 0 solid #fff;
  border-radius: 0 0 99px 99px;
  background: transparent;
  opacity: 0;
  transform: translateX(-50%) scale(0.6);
  transform-origin: 50% 0;
  transition: width 0.28s ease, height 0.28s ease, opacity 0.22s ease, transform 0.28s ease, background-color 0.28s ease, border-width 0.28s ease, border-radius 0.28s ease;
}
.bdaia__orb::before,
.bdaia__orb::after {
  content: "";
  position: absolute;
  top: 58%;
  width: 17%;
  height: 10%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 130, 170, 0.75), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.bdaia__orb::before { left: 9%; }
.bdaia__orb::after { right: 9%; }

/* DAIA's moods: script.js sets data-mood on .bdaia every few seconds */
.bdaia { --look-x: 0px; --look-y: 0px; --dir: -1; transition: rotate 0.4s ease, translate 0.2s ease; }
.bdaia[data-mood]:not([data-mood="idle"]):not([data-mood="follow"]):not([data-mood="dizzy"]) .bdaia__orb i { animation: none; }

/* little smile */
.bdaia[data-mood="smile"] .bdaia__mouth {
  height: 10%;
  border-bottom-width: max(2.5px, 0.5cqw);
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
/* big happy grin, ^ ^ eyes */
.bdaia[data-mood="happy"] .bdaia__mouth,
.bdaia[data-mood="hop"] .bdaia__mouth,
.bdaia[data-mood="wiggle"] .bdaia__mouth {
  width: 34%;
  height: 17%;
  background: #fff;
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
.bdaia[data-mood="happy"] .bdaia__orb i,
.bdaia[data-mood="hop"] .bdaia__orb i,
.bdaia[data-mood="wiggle"] .bdaia__orb i {
  height: 11%;
  width: 14%;
  background-color: transparent;
  border-top-width: max(3px, 0.7cqw);
  border-radius: 99px 99px 0 0;
  box-shadow: none;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.9));
}
/* wink */
.bdaia[data-mood="wink"] .bdaia__mouth {
  height: 10%;
  border-bottom-width: max(2.5px, 0.5cqw);
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
.bdaia[data-mood="wink"][data-side="r"] .bdaia__orb i:nth-of-type(2),
.bdaia[data-mood="wink"][data-side="l"] .bdaia__orb i:nth-of-type(1) {
  height: 11%;
  width: 14%;
  background-color: transparent;
  border-top-width: max(3px, 0.7cqw);
  border-radius: 99px 99px 0 0;
  box-shadow: none;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.9));
}
/* surprised */
.bdaia[data-mood="surprised"] .bdaia__orb i { height: 24%; width: 9%; }
.bdaia[data-mood="surprised"] .bdaia__mouth {
  width: 11%;
  height: 13%;
  border-width: max(2.5px, 0.5cqw);
  border-radius: 50%;
  background: rgba(10, 20, 90, 0.85);
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
/* curious: glances up and to the side, head tilted, flat mouth */
.bdaia[data-mood="curious"] { rotate: calc(var(--dir) * 7deg); }
.bdaia[data-mood="curious"] .bdaia__orb i { translate: calc(var(--dir) * 1.6cqw) -1.1cqw; }
.bdaia[data-mood="curious"] .bdaia__mouth {
  width: 14%;
  height: 0;
  border-bottom-width: max(2.5px, 0.5cqw);
  border-radius: 0;
  opacity: 1;
  transform: translateX(-50%) scale(1);
  translate: calc(var(--dir) * 0.7cqw) 0;
}
/* blush whenever it is happy */
.bdaia[data-mood="smile"] .bdaia__orb::before,
.bdaia[data-mood="smile"] .bdaia__orb::after,
.bdaia[data-mood="happy"] .bdaia__orb::before,
.bdaia[data-mood="happy"] .bdaia__orb::after,
.bdaia[data-mood="wink"] .bdaia__orb::before,
.bdaia[data-mood="wink"] .bdaia__orb::after,
.bdaia[data-mood="hop"] .bdaia__orb::before,
.bdaia[data-mood="hop"] .bdaia__orb::after,
.bdaia[data-mood="wiggle"] .bdaia__orb::before,
.bdaia[data-mood="wiggle"] .bdaia__orb::after { opacity: 1; }

/* follows the mouse with its eyes (and leans a little toward it) */
.bdaia[data-mood="follow"] { translate: calc(var(--look-x) * 0.3) calc(var(--look-y) * 0.3); }
.bdaia[data-mood="follow"] .bdaia__orb i {
  height: 19%;
  animation: daia-blink 5.2s ease-in-out infinite;
  translate: var(--look-x) var(--look-y);
  transition: translate 0.09s linear, height 0.25s ease;
}
.bdaia[data-mood="follow"] .bdaia__mouth {
  height: 8%;
  border-bottom-width: max(2.5px, 0.5cqw);
  opacity: 1;
  transform: translateX(-50%) scale(1);
  translate: calc(var(--look-x) * 0.25) calc(var(--look-y) * 0.2);
  transition: translate 0.09s linear, width 0.28s ease, height 0.28s ease, opacity 0.22s ease, transform 0.28s ease;
}

/* tickled: giggles and shakes */
@keyframes daia-tickle {
  0%, 100% { rotate: 0deg; translate: 0 0; }
  10% { rotate: -8deg; translate: -3% -7%; }
  20% { rotate: 8deg; translate: 3% 0; }
  30% { rotate: -8deg; translate: -3% -7%; }
  40% { rotate: 8deg; translate: 3% 0; }
  50% { rotate: -6deg; translate: -2% -5%; }
  60% { rotate: 6deg; translate: 2% 0; }
  75% { rotate: -3deg; translate: 0 -2%; }
  90% { rotate: 2deg; translate: 0 0; }
}
.bdaia[data-mood="ticklish"] { animation: daia-tickle 0.95s ease-in-out 2; }
.bdaia[data-mood="ticklish"] .bdaia__mouth {
  width: 36%;
  height: 19%;
  background: #fff;
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
.bdaia[data-mood="ticklish"] .bdaia__orb i {
  height: 11%;
  width: 14%;
  background-color: transparent;
  border-top-width: max(3px, 0.7cqw);
  border-radius: 99px 99px 0 0;
  box-shadow: none;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.9));
}

/* shy: looks away, tilts its head, big blush */
.bdaia[data-mood="blush"] { rotate: calc(var(--dir) * -6deg); translate: 0 2%; }
.bdaia[data-mood="blush"] .bdaia__orb i { height: 15%; translate: calc(var(--dir) * 0.9cqw) 0.35cqw; }
.bdaia[data-mood="blush"] .bdaia__mouth {
  top: 65%;
  width: 18%;
  height: 7%;
  border-bottom-width: max(2.5px, 0.5cqw);
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
.bdaia[data-mood="blush"] .bdaia__orb::before,
.bdaia[data-mood="blush"] .bdaia__orb::after { opacity: 1; width: 24%; height: 15%; top: 56%; }
.bdaia[data-mood="ticklish"] .bdaia__orb::before,
.bdaia[data-mood="ticklish"] .bdaia__orb::after { opacity: 1; }

/* speech bubble for the reactions */
.bdaia__say {
  position: absolute;
  left: 88%;
  top: -30%;
  padding: 0.45em 0.95em;
  border-radius: 14px 14px 14px 4px;
  background: rgba(255, 255, 255, 0.96);
  color: #16225e;
  font-size: max(11px, calc(var(--u, 1cqw) * 1.5));
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(2, 8, 50, 0.4);
  opacity: 0;
  transform: translateY(8px) scale(0.7);
  transform-origin: 0 100%;
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.2, 1.4, 0.4, 1);
  pointer-events: none;
}
.bdaia[data-say="1"] .bdaia__say { opacity: 1; transform: none; }
/* keep the bubble level while DAIA tilts its head */
.bdaia[data-mood="curious"] .bdaia__say { rotate: calc(var(--dir) * -7deg); }
.bdaia[data-mood="blush"] .bdaia__say { rotate: calc(var(--dir) * 6deg); }

/* dizzy: the pointer was circled around it many times */
@keyframes daia-dizzy {
  0%, 100% { rotate: -9deg; translate: -3% 0; }
  50% { rotate: 9deg; translate: 3% 0; }
}
@keyframes daia-eyespin { to { transform: rotate(360deg); } }
@keyframes daia-star {
  0% { translate: 5cqw 0; }
  12.5% { translate: 3.5cqw 1.2cqw; }
  25% { translate: 0 1.7cqw; }
  37.5% { translate: -3.5cqw 1.2cqw; }
  50% { translate: -5cqw 0; }
  62.5% { translate: -3.5cqw -1.2cqw; }
  75% { translate: 0 -1.7cqw; }
  87.5% { translate: 3.5cqw -1.2cqw; }
  100% { translate: 5cqw 0; }
}
.bdaia[data-mood="dizzy"] { animation: daia-dizzy 0.85s ease-in-out infinite; }
.bdaia[data-mood="dizzy"] .bdaia__orb i {
  width: 17%;
  height: 17%;
  border-radius: 50%;
  border-top-width: 0;
  background: radial-gradient(circle, transparent 0 16%, #fff 17% 30%, transparent 31% 46%, #fff 47% 62%, transparent 63% 78%, #fff 79% 94%, transparent 95%);
  -webkit-mask: conic-gradient(#000 0 82%, transparent 82%);
  mask: conic-gradient(#000 0 82%, transparent 82%);
  box-shadow: none;
  animation: daia-eyespin 0.7s linear infinite;
}
.bdaia[data-mood="dizzy"] .bdaia__mouth {
  top: 64%;
  width: 11%;
  height: 11%;
  border-width: max(2.5px, 0.5cqw);
  border-radius: 50%;
  background: rgba(10, 20, 90, 0.85);
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
.bdaia__stars { position: absolute; left: 50%; top: 4%; width: 0; height: 0; opacity: 0; transition: opacity 0.2s ease; pointer-events: none; }
.bdaia__stars i {
  position: absolute;
  left: -0.5em;
  top: -0.6em;
  color: #ffe38a;
  font-style: normal;
  font-size: max(11px, calc(var(--u, 1cqw) * 1.6));
  line-height: 1;
  text-shadow: 0 0 8px rgba(255, 220, 120, 0.9);
}
.bdaia[data-mood="dizzy"] .bdaia__stars { opacity: 1; }
.bdaia[data-mood="dizzy"] .bdaia__stars i { animation: daia-star 1.1s linear infinite; }
.bdaia[data-mood="dizzy"] .bdaia__stars i:nth-child(2) { animation-delay: -0.37s; }
.bdaia[data-mood="dizzy"] .bdaia__stars i:nth-child(3) { animation-delay: -0.74s; }
.bdaia[data-mood="dizzy"] .bdaia__say { rotate: 0deg; }

/* "energy": DAIA turns into a deep glass ball with a bright rim, and liquid patches of colour flow
   around inside it, hugging its edge; the dark core stays. There are five colour/light patterns
   (data-pattern 1-5, picked at random by script.js each time it switches on). */
.bdaia {
  /* pattern 1: aurora (cyan, lavender, pink-orange, white-lilac) */
  --core1: #050d5c; --core2: #14289e; --core3: #2c46e6; --core4: #6f8dff;
  --glow1: 150, 120, 255; --glow2: 70, 150, 255;
  --a1: #ff9ad6; --a2: #f27fc0; --a3: #ffb26e; --ang-a: 200deg;
  --b1: #f6f1ff; --b2: #c9a6ff; --b3: #8a63ff; --ang-b: 180deg;
  --c1: #8fe2ff; --c2: #52a6ff; --c3: #3468f0; --ang-c: 90deg;
  --d1: #ffffff; --d2: #d7c8ff; --d3: #a58bff; --ang-d: 45deg; --d-op: 1;
  --dur-a: 11s; --dur-b: 15s; --dur-c: 19s; --dur-d: 13s;
  --rev-a: normal; --rev-b: normal; --rev-c: normal; --rev-d: normal;
}
.bdaia[data-pattern="2"] { /* sunset */
  --core1: #16064a; --core2: #2e0f86; --core3: #5a22c8; --core4: #a072ff;
  --glow1: 255, 130, 120; --glow2: 150, 90, 255;
  --a1: #ffe27a; --a2: #ff9a3c; --a3: #ff4d5e; --ang-a: 160deg;
  --b1: #ffd0f0; --b2: #ff7fc8; --b3: #d040a8; --ang-b: 200deg;
  --c1: #b79cff; --c2: #7a52f0; --c3: #4a2cc8; --ang-c: 90deg;
  --d-op: 0;
  --dur-a: 9s; --dur-b: 13s; --dur-c: 17s;
  --rev-a: reverse; --rev-b: normal; --rev-c: reverse;
}
.bdaia[data-pattern="3"] { /* ocean */
  --core1: #03204a; --core2: #073f86; --core3: #1268c8; --core4: #58b4ff;
  --glow1: 70, 220, 220; --glow2: 60, 140, 255;
  --a1: #7dffe0; --a2: #1fcfc0; --a3: #16a0c8; --ang-a: 200deg;
  --b1: #eafffb; --b2: #9ff0ff; --b3: #4fc3ff; --ang-b: 180deg;
  --c1: #59a6ff; --c2: #2a6cf0; --c3: #1c3fc0; --ang-c: 90deg;
  --d1: #f2fffb; --d2: #b6f2e6; --d3: #6fd6d0; --ang-d: 45deg; --d-op: 1;
  --dur-a: 14s; --dur-b: 10s; --dur-c: 21s; --dur-d: 17s;
  --rev-a: normal; --rev-b: reverse; --rev-c: normal; --rev-d: reverse;
}
.bdaia[data-pattern="4"] { /* neon violet */
  --core1: #12044a; --core2: #2c0e94; --core3: #5a2ee0; --core4: #9a78ff;
  --glow1: 230, 100, 255; --glow2: 120, 100, 255;
  --a1: #ff8af0; --a2: #d24fe8; --a3: #8a3cf0; --ang-a: 220deg;
  --b1: #ffffff; --b2: #e2d2ff; --b3: #b38cff; --ang-b: 180deg;
  --c1: #ffb0c8; --c2: #ff7d9a; --c3: #ff8a5c; --ang-c: 90deg;
  --d1: #c8f6ff; --d2: #7fd0ff; --d3: #4a90ff; --ang-d: 45deg; --d-op: 1;
  --dur-a: 8s; --dur-b: 12s; --dur-c: 16s; --dur-d: 10s;
  --rev-a: reverse; --rev-b: reverse; --rev-c: normal; --rev-d: normal;
}
.bdaia[data-pattern="5"] { /* rainbow */
  --core1: #06105a; --core2: #182aa0; --core3: #2c44e0; --core4: #6c8cff;
  --glow1: 255, 170, 100; --glow2: 90, 200, 255;
  --a1: #ffec7a; --a2: #ff9438; --a3: #ff4a4a; --ang-a: 200deg;
  --b1: #b9ff9a; --b2: #38d68a; --b3: #16a5a5; --ang-b: 180deg;
  --c1: #7ad8ff; --c2: #4a8cff; --c3: #7a4af0; --ang-c: 90deg;
  --d1: #ffc2ee; --d2: #ff7ad0; --d3: #d040c0; --ang-d: 45deg; --d-op: 1;
  --dur-a: 12s; --dur-b: 9s; --dur-c: 15s; --dur-d: 20s;
  --rev-a: normal; --rev-b: reverse; --rev-c: reverse; --rev-d: normal;
}
.bdaia__lava {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 50%;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.9s ease;
  pointer-events: none;
  background: radial-gradient(circle at 50% 56%, var(--core1) 0 26%, var(--core2) 50%, var(--core3) 74%, var(--core4) 92%);
}
.bdaia__lava .lv { position: absolute; inset: 0; border-radius: 50%; }
.bdaia__lava .lv::before {
  content: "";
  position: absolute;
  border-radius: 55% 45% 50% 50% / 50% 55% 45% 50%;
  filter: blur(1.4px);
  box-shadow: 0 0 14px 3px rgba(var(--glow1), 0.5);
}
.lv--a::before { right: -24%; top: 16%; width: 54%; height: 68%; background: linear-gradient(var(--ang-a), var(--a1) 0%, var(--a2) 55%, var(--a3) 100%); }
.lv--b::before { left: 10%; top: -28%; width: 78%; height: 54%; background: linear-gradient(var(--ang-b), var(--b1) 0%, var(--b2) 55%, var(--b3) 100%); }
.lv--c::before { left: -26%; top: 14%; width: 42%; height: 60%; background: linear-gradient(var(--ang-c), var(--c1) 0%, var(--c2) 55%, var(--c3) 100%); }
.lv--d::before { left: -8%; top: 66%; width: 60%; height: 50%; background: linear-gradient(var(--ang-d), var(--d1) 0%, var(--d2) 55%, var(--d3) 100%); opacity: var(--d-op, 1); }
.lv--rim { box-shadow: inset 0 0 12px 2px rgba(225, 235, 255, 0.85), inset 0 0 3px 1px rgba(255, 255, 255, 0.9); }
.bdaia__orb i { position: relative; z-index: 1; }
.bdaia__mouth { z-index: 1; }
.bdaia[data-energy] .bdaia__lava { opacity: 1; }
.bdaia[data-energy] .bdaia__orb {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.35),
    0 0 40px rgba(var(--glow1), 0.8),
    0 0 90px rgba(var(--glow2), 0.5);
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes lava-spin { to { transform: rotate(360deg); } }
  @keyframes lava-morph {
    0%, 100% { scale: 1 1; }
    33% { scale: 1.14 0.9; }
    66% { scale: 0.92 1.12; }
  }
  .bdaia[data-energy] .lv,
  .bdaia[data-energy] .lv::before { will-change: transform; }
  .bdaia[data-energy] .lv--a { animation: lava-spin var(--dur-a) linear infinite var(--rev-a); }
  .bdaia[data-energy] .lv--b { animation: lava-spin var(--dur-b) linear infinite var(--rev-b); }
  .bdaia[data-energy] .lv--c { animation: lava-spin var(--dur-c) linear infinite var(--rev-c); }
  .bdaia[data-energy] .lv--d { animation: lava-spin var(--dur-d) linear infinite var(--rev-d); }
  .bdaia[data-energy] .lv::before { animation: lava-morph 6s ease-in-out infinite; }
  .bdaia[data-energy] .lv--b::before { animation-duration: 7.5s; animation-delay: -2s; }
  .bdaia[data-energy] .lv--c::before { animation-duration: 5s; animation-delay: -1s; }
  .bdaia[data-energy] .lv--d::before { animation-duration: 6.8s; animation-delay: -3s; }
  .bdaia[data-energy="fast"] .lv--a { animation-duration: 2.6s; }
  .bdaia[data-energy="fast"] .lv--b { animation-duration: 3.6s; }
  .bdaia[data-energy="fast"] .lv--c { animation-duration: 4.6s; }
  .bdaia[data-energy="fast"] .lv--d { animation-duration: 3.2s; }
}

@keyframes daia-hop {
  0%, 100% { translate: 0 0; }
  16% { translate: 0 6%; }
  40% { translate: 0 -34%; }
  62% { translate: 0 0; }
  72% { translate: 0 -12%; }
  84% { translate: 0 0; }
}
@keyframes daia-wiggle {
  0%, 100% { rotate: 0deg; translate: 0 0; }
  15% { rotate: -10deg; translate: -4% 0; }
  35% { rotate: 9deg; translate: 4% 0; }
  55% { rotate: -7deg; translate: -3% 0; }
  75% { rotate: 5deg; translate: 2% 0; }
}
.bdaia[data-mood="hop"] { animation: daia-hop 1.5s ease-in-out; }
.bdaia[data-mood="wiggle"] { animation: daia-wiggle 1.3s ease-in-out; }
.bdaia__name {
  position: absolute;
  left: 42.9%;
  top: 88%;
  margin: 0;
  transform: translateX(-50%);
  color: #fff;
  font-size: max(12px, calc(var(--u) * 2.2));
  font-weight: 500;
  letter-spacing: 0.4em;
  padding-left: 0.4em;
}
.bdaia__caption {
  position: absolute;
  left: 42.9%;
  top: 92.8%;
  margin: 0;
  transform: translateX(-50%);
  color: #cfdcf9;
  font-size: max(9px, calc(var(--u) * 1.3));
  font-weight: 500;
  letter-spacing: 0.24em;
  line-height: 1.75;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}
.bhand {
  position: absolute;
  left: 81%;
  top: 52%;
  margin: 0;
  color: #7fa9ff;
  font-family: "Segoe Script", "Bradley Hand", "Brush Script MT", "Snell Roundhand", cursive;
  font-size: max(11px, calc(var(--u) * 1.9));
  font-style: italic;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%) rotate(-12deg);
}
.bhand__line {
  display: block;
  width: 62%;
  height: 2px;
  margin: 6px 0 0 34%;
  border-radius: 99px;
  background: linear-gradient(90deg, #ff6f5a, #ffab8a);
  transform: rotate(-9deg);
}

@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
  .bridge-runway {
    position: relative;
    margin-top: calc(-1 * var(--total-run));
    height: var(--total-run);
  }

  .bridge {
    position: sticky;
    z-index: 9;
    top: var(--header-offset, var(--header-height));
    height: calc(100vh - var(--header-offset, var(--header-height)));
    min-height: 0;
    opacity: var(--bridge-o, 1);
    pointer-events: none;
  }

  /* timed reveal: every piece rises a little and fades in (individual
     `translate` so it composes with the centering transforms above) */
  .bridge__copy, .bridge__stage { opacity: var(--brc-o, 1); }
  [data-r="1"] { opacity: var(--r1, 1); translate: 0 calc((1 - var(--r1, 1)) * 18px); }
  [data-r="2"] { opacity: var(--r2, 1); translate: 0 calc((1 - var(--r2, 1)) * 22px); }
  [data-r="3"] { opacity: var(--r3, 1); translate: 0 calc((1 - var(--r3, 1)) * 20px); }
  [data-r="4"] { opacity: var(--r4, 1); translate: 0 calc((1 - var(--r4, 1)) * 18px); }
  [data-r="5"] { opacity: var(--r5, 1); translate: 0 calc((1 - var(--r5, 1)) * 14px); }
  .blabel[data-r="6"], .bcard[data-r="6"] { opacity: var(--r6, 1); translate: 0 calc((1 - var(--r6, 1)) * 24px); }
  .blabel[data-r="7"], .bwa[data-r="7"] { opacity: var(--r7, 1); translate: 0 calc((1 - var(--r7, 1)) * 24px); }
  .bchips[data-r="9"] { opacity: var(--r9, 1); translate: 0 calc((1 - var(--r9, 1)) * 20px); }
  .barrow[data-r="10"], .bdaia[data-r="10"] { opacity: var(--r10, 1); }
  .bdaia[data-r="10"] { scale: calc(0.86 + 0.14 * var(--r10, 1)); }
  .bdaia__name[data-r="11"], .bdaia__caption[data-r="11"], .bhand[data-r="11"] { opacity: var(--r11, 1); translate: 0 calc((1 - var(--r11, 1)) * 14px); }

  .bline--blue { stroke-dashoffset: calc(1 - var(--r8, 1)); }
  .bline--orange { stroke-dashoffset: calc(1 - var(--r9, 1)); }
  .bline--tip { opacity: var(--r9, 1); }
  .bsparks { opacity: var(--r10, 1); }
}

/* DAIA "alive": it floats and breathes, blinks, glances around, and sends out ripples */
@media (prefers-reduced-motion: no-preference) {
  @keyframes daia-float {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1, 1); }
    22% { transform: translateY(-7%) rotate(-2deg) scale(0.98, 1.03); }
    50% { transform: translateY(-11%) rotate(1.5deg) scale(1.03, 0.98); }
    78% { transform: translateY(-4%) rotate(-1deg) scale(0.99, 1.02); }
  }
  @keyframes daia-blink {
    0%, 86%, 92%, 100% { transform: scaleY(1); }
    89%, 95% { transform: scaleY(0.08); }
  }
  @keyframes daia-look {
    0%, 8% { translate: 0 0; }
    13%, 24% { translate: calc(var(--dir) * 1.3cqw) -0.3cqw; }
    30%, 38% { translate: 0 0; }
    44%, 58% { translate: calc(var(--dir) * -1.3cqw) 0.25cqw; }
    66%, 72% { translate: calc(var(--dir) * 0.3cqw) -0.5cqw; }
    80%, 100% { translate: 0 0; }
  }
  @keyframes daia-ripple {
    0% { transform: scale(1.05); opacity: 0.65; }
    100% { transform: scale(2.4); opacity: 0; }
  }
  .bdaia__orb { animation: daia-float 5.6s ease-in-out infinite; }
  .bdaia__orb i { animation: daia-blink 5.2s ease-in-out infinite, daia-look 6s ease-in-out infinite; }
  .bdaia__ring { border-color: rgba(140, 180, 255, 0.45); }
  .bdaia__ring--1 { animation: daia-ripple 5.6s ease-out infinite; }
  .bdaia__ring--2 { animation: daia-ripple 5.6s ease-out 2.8s infinite; }
}

@media (max-width: 980px) {
  .bridge { min-height: auto; padding: 56px 0 72px; display: flex; flex-direction: column; }
  .bridge__copy {
    position: relative;
    left: auto; width: auto; top: auto; bottom: auto;
    padding: 0 clamp(24px, 5vw, 72px);
  }
  .bridge__tagline { margin-top: 28px; }
  .bridge__stage {
    --u: 0.5rem;
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    aspect-ratio: auto;
    margin: 40px clamp(18px, 5vw, 48px) 0;
    transform: none;
    container-type: normal;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }
  .bridge__lines { display: none; }
  .bridge__stage > * { position: relative; left: auto; top: auto; transform: none; }
  .blabel { white-space: normal; margin-top: 8px; }
  .bcard { width: min(100%, 280px); height: auto; padding-bottom: 18px; }
  .bwa { width: min(100%, 340px); height: auto; padding: 14px; }
  .bwa__typing { display: none; }
  .bchips { width: 100%; height: auto; flex-wrap: wrap; padding: 14px; border-radius: 22px; }
  .bchip { height: auto; padding: 8px 14px; }
  .bdaia { width: 96px; margin: 18px 0 0; }
  .bdaia__ring { display: none; }
  .bhand { margin-top: 8px; }
}

/* ---------------------------------------------------------------------
   Section 06 · DAIA Agente de ventas
   Same language as the "entre la compra y la conversación" scene: copy on
   the LEFT, and on the RIGHT the framed WhatsApp-chat video (portrait, over a
   glowing sphere) with three floating chips. Once the scene has faded in,
   everything arrives on a timer (--g1..--g14, script.js).
   --------------------------------------------------------------------- */
.agent {
  position: relative;
  min-height: calc(100vh - var(--header-height));
  overflow: hidden;
}
.agent__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 34% 60% at 76% 42%, rgba(70, 120, 255, 0.3), transparent 70%),
    radial-gradient(ellipse 60% 24% at 40% 104%, rgba(110, 90, 255, 0.4), transparent 70%),
    radial-gradient(ellipse 30% 40% at 0% 0%, rgba(50, 90, 240, 0.16), transparent 70%),
    linear-gradient(180deg, #081b63 0%, #06154d 52%, #040c30 100%);
}
.agent__waves { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 26%; filter: drop-shadow(0 0 8px rgba(140, 130, 255, 0.7)); }
.agent__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26%;
  background:
    radial-gradient(circle, #ff9ac0 0 2.5px, transparent 3.5px) 8% 62% / 12px 12px no-repeat,
    radial-gradient(circle, #8fb6ff 0 2px, transparent 3px) 18% 40% / 12px 12px no-repeat,
    radial-gradient(circle, #ffb08a 0 2.5px, transparent 3.5px) 33% 78% / 12px 12px no-repeat,
    radial-gradient(circle, #8fb6ff 0 2px, transparent 3px) 47% 56% / 12px 12px no-repeat,
    radial-gradient(circle, #ff9ac0 0 3px, transparent 4px) 56% 88% / 12px 12px no-repeat,
    radial-gradient(circle, #cfd8ff 0 2px, transparent 3px) 68% 46% / 12px 12px no-repeat,
    radial-gradient(circle, #ffb08a 0 2.5px, transparent 3.5px) 81% 70% / 12px 12px no-repeat,
    radial-gradient(circle, #8fb6ff 0 2px, transparent 3px) 92% 38% / 12px 12px no-repeat;
  filter: drop-shadow(0 0 5px currentColor);
}

.agent__layer { position: absolute; inset: 0; }
.agent__copy {
  position: absolute;
  z-index: 2;
  left: 4.4%;
  width: 43%;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.agent__eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 clamp(18px, 3.6vh, 36px);
  color: #dbe5fc;
  font-size: clamp(0.7rem, min(0.95vw, 2vh), 0.95rem);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.agent h2 {
  margin: 0;
  font-size: clamp(2rem, min(3.7vw, 7vh), 4.8rem);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
}
.agent__accent {
  display: block;
  background: linear-gradient(90deg, #d9c9ff, #8f9dff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.agent__lead {
  max-width: 22em;
  margin: clamp(16px, 3vh, 30px) 0 0;
  color: #fff;
  font-size: clamp(1rem, min(1.7vw, 3.2vh), 1.8rem);
  font-weight: 300;
  line-height: 1.3;
}

.agent__steps {
  --r: clamp(26px, 2.4vw, 38px);
  display: flex;
  margin: clamp(40px, 7.4vh, 72px) 0 0;
  padding: 0;
  list-style: none;
}
.agent__step {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.8vh, 18px);
  color: #fff;
  font-size: clamp(0.82rem, min(1.2vw, 2.4vh), 1.25rem);
  text-align: center;
  line-height: 1.25;
}
.agent__step i {
  display: grid;
  place-items: center;
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  border-radius: 50%;
  border: 2.5px solid rgba(165, 195, 255, 0.85);
  background: radial-gradient(circle, rgba(60, 100, 230, 0.4), rgba(20, 40, 150, 0.4));
  box-shadow: 0 0 22px rgba(90, 140, 255, 0.55), inset 0 0 14px rgba(120, 170, 255, 0.25);
}
.agent__step i svg { width: 44%; height: 44%; }
.agent__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--r) - 6px);
  left: calc(50% + var(--r) + 6px);
  width: calc(100% - var(--r) * 2 - 12px);
  height: 12px;
  background:
    radial-gradient(circle, #ffc08a 0 3px, rgba(255, 150, 90, 0.4) 3.5px 6px, transparent 6.5px) center / 12px 12px no-repeat,
    linear-gradient(90deg, rgba(150, 180, 255, 0.7), rgba(255, 160, 110, 0.75)) center / 100% 2px no-repeat;
}

.agent__tagline {
  position: absolute;
  z-index: 2;
  left: 3%;
  bottom: 4.6%;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  color: #d5e0fb;
  font-size: clamp(0.6rem, min(0.82vw, 1.7vh), 0.82rem);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.agent__brand {
  position: absolute;
  z-index: 2;
  right: 2.6%;
  bottom: 4.6%;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 4px 14px;
  margin: 0;
  color: #cfdcf9;
  font-size: clamp(0.58rem, min(0.8vw, 1.6vh), 0.8rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-align: right;
}
.agent__brand span:nth-child(1) { grid-column: 1; }
.agent__brand i { grid-column: 2; grid-row: 1; }
.agent__brand span:nth-child(3) { grid-column: 1 / 3; }

/* the chat ------------------------------------------------------------ */
.agent__chat {
  --ratio: 9 / 16;
  position: absolute;
  z-index: 2;
  left: 58.4%;
  top: 50%;
  height: min(86%, 100vh);
  aspect-ratio: var(--ratio);
  transform: translateY(-50%);
}
.agent__sphere {
  position: absolute;
  left: 50%;
  top: 34%;
  width: 138%;
  aspect-ratio: 1;
  margin: 0;
  border-radius: 50%;
  translate: -50% -50%;
  background: radial-gradient(circle at 38% 32%, rgba(170, 215, 255, 0.5), rgba(80, 130, 255, 0.34) 42%, rgba(50, 70, 220, 0.16) 68%, transparent 71%);
  border: 2px solid rgba(160, 205, 255, 0.4);
  box-shadow: 0 0 60px rgba(90, 140, 255, 0.5), inset 0 0 60px rgba(120, 170, 255, 0.3);
}
.agent__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, #f4f2ea, #e9e6dc);
  box-shadow: 0 30px 70px rgba(2, 8, 50, 0.55), 0 0 40px rgba(100, 150, 255, 0.3);
}
.agent__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.achip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 12px;
  border: 1.5px solid rgba(140, 175, 255, 0.55);
  background: linear-gradient(160deg, rgba(40, 70, 210, 0.6), rgba(18, 34, 130, 0.72));
  box-shadow: 0 12px 30px rgba(2, 8, 50, 0.4), 0 0 24px rgba(100, 140, 255, 0.35);
  color: #fff;
  font-size: clamp(0.72rem, min(1vw, 2vh), 1.05rem);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
.achip svg { flex: none; }
.achip::after {
  content: "";
  position: absolute;
  right: -5px;
  top: -5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff9a6a;
  box-shadow: 0 0 10px rgba(255, 150, 100, 0.95);
}
.achip--a { left: -44%; top: 11%; }
.achip--b { left: 109%; top: 35.6%; }
.achip--c { left: 108.4%; top: 65%; }
.ahand {
  position: absolute;
  left: 112%;
  top: 4.5%;
  margin: 0;
  color: #8db1ff;
  font-family: "Segoe Script", "Bradley Hand", "Brush Script MT", "Snell Roundhand", cursive;
  font-size: clamp(0.85rem, min(1.35vw, 2.6vh), 1.5rem);
  font-style: italic;
  line-height: 1.35;
  white-space: nowrap;
  transform: rotate(-9deg);
}
.ahand__line {
  display: block;
  width: 46%;
  height: 2px;
  margin: 10px 0 0 40%;
  border-radius: 99px;
  background: linear-gradient(90deg, #7fa5ff, #b6c8ff);
  transform: rotate(-9deg);
}

/* the arrows: drawn by script.js on this overlay, one after the other */
.agent__flow { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.aflow__line { fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }

/* lit states (default = lit; script.js drives --l1..--l4 from 0 to 1 as each arrow arrives) */
.agent__step:nth-child(1) { --lv: var(--l1, 1); --ta: #2ad675; --tb: #12924f; --tr: #6bf7a8; --tg: 50, 230, 130; }
.agent__step:nth-child(2) { --lv: var(--l2, 1); --ta: #4090ff; --tb: #1d50d8; --tr: #82b8ff; --tg: 70, 140, 255; }
.agent__step:nth-child(3) { --lv: var(--l3, 1); --ta: #ffa040; --tb: #e8641c; --tr: #ffc47c; --tg: 255, 150, 60; }
.agent__step i { position: relative; scale: calc(1 + 0.16 * 4 * var(--lv, 1) * (1 - var(--lv, 1))); }
.agent__step i svg { position: relative; z-index: 1; }
.agent__step i::before {
  content: "";
  position: absolute;
  inset: -2.5px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ta), var(--tb));
  box-shadow: 0 0 0 2.5px var(--tr), 0 0 30px rgba(var(--tg), 0.8);
  opacity: var(--lv, 1);
}
.agent__step i::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--tr);
  opacity: 0;
  pointer-events: none;
}

.achip { --lv: var(--l4, 1); isolation: isolate; scale: calc(1 + 0.1 * 4 * var(--lv, 1) * (1 - var(--lv, 1))); }
.achip--a { --ta: #23c56c; --tb: #0f8f52; --tr: #63f5a4; --tg: 50, 230, 130; }
.achip--b { --ta: #ffc93a; --tb: #e89a10; --tr: #ffe07a; --tg: 255, 200, 60; }
.achip--c { --ta: #3fa8ff; --tb: #1f6fe0; --tr: #86ccff; --tg: 70, 170, 255; }
.achip::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(160deg, var(--ta), var(--tb));
  box-shadow: 0 0 0 1.5px var(--tr), 0 0 30px rgba(var(--tg), 0.75);
  opacity: var(--lv, 1);
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes agent-arrive { 0% { transform: scale(1); opacity: 0.95; } 100% { transform: scale(2); opacity: 0; } }
  @keyframes agent-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.78; } }
  @keyframes agent-type { 0%, 65%, 100% { opacity: 0.35; } 30% { opacity: 1; } }
  @keyframes agent-pulse { 0%, 100% { scale: 1; } 50% { scale: 1.16; } }
  @keyframes agent-roll { 0%, 100% { translate: -1px 0; rotate: -4deg; } 50% { translate: 2px 0; rotate: 4deg; } }
  @keyframes agent-ding { 0%, 60%, 100% { rotate: 0deg; } 10% { rotate: -16deg; } 20% { rotate: 14deg; } 30% { rotate: -10deg; } 40% { rotate: 6deg; } }
  @keyframes agent-flash { 0%, 55%, 100% { opacity: 1; scale: 1; } 62% { opacity: 0.35; scale: 1.2; } 70% { opacity: 1; scale: 1.1; } 78% { opacity: 0.5; scale: 1.2; } 86% { opacity: 1; scale: 1; } }
  @keyframes agent-bob { 0%, 100% { translate: 0 0; } 45% { translate: 0 -3px; } }

  .agent__step i.is-lit::after { animation: agent-arrive 0.9s ease-out 1; }
  .agent__step i.is-lit::before { animation: agent-breathe 2.6s ease-in-out infinite; }
  .agent__step:nth-child(1) i.is-lit svg circle { animation: agent-type 1.3s ease-in-out infinite; }
  .agent__step:nth-child(1) i.is-lit svg circle:nth-of-type(2) { animation-delay: 0.2s; }
  .agent__step:nth-child(1) i.is-lit svg circle:nth-of-type(3) { animation-delay: 0.4s; }
  .agent__step:nth-child(2) i.is-lit svg { animation: agent-pulse 2.2s ease-in-out infinite; }
  .agent__step:nth-child(3) i.is-lit svg { animation: agent-roll 1.8s ease-in-out infinite; }

  .achip.is-lit::before { animation: agent-breathe 2.4s ease-in-out infinite; }
  .achip--a.is-lit svg { animation: agent-ding 3.4s ease-in-out infinite; transform-origin: 50% 20%; }
  .achip--b.is-lit svg { animation: agent-flash 3s ease-in-out infinite; }
  .achip--c.is-lit svg { animation: agent-bob 1.8s ease-in-out infinite; }
}

/* on the animated desktop layout the arrows replace the fixed connector lines */
@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
  .agent__step:not(:last-child)::after { display: none; }
}

/* The chat frame turns into the ERP window (scroll-linked, script.js): it slides down, stretches from a
   phone-like screen into a monitor and the chat video dissolves into the blank first frame of the ERP video,
   which starts playing once the frame has landed (see .pwin). */
@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
  .agent__chat.is-morphing { aspect-ratio: auto; transform: none; }
  .agent__chat.is-morphing > :not(.agent__screen) { opacity: var(--mpf, 1); }
  .agent__video { opacity: var(--mpv, 1); }
  .agent__screen::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #f0f5fa;
    opacity: calc(1 - var(--mpv, 1));
    pointer-events: none;
  }
  .agent__screen::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1.5px rgba(90, 150, 255, 0.95);
    opacity: var(--mpe, 0);
    pointer-events: none;
  }
}

@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
  .is-off { visibility: hidden; content-visibility: hidden; }
}

@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
  .agent-runway {
    position: relative;
    margin-top: calc(-1 * var(--total-run));
    height: var(--total-run);
  }

  .agent {
    position: sticky;
    z-index: 12;
    top: var(--header-offset, var(--header-height));
    height: calc(100vh - var(--header-offset, var(--header-height)));
    min-height: 0;
    opacity: var(--agent-o, 1);
    pointer-events: none;
  }

  .agent__layer { opacity: var(--agc-o, 1); }
  .agent__bg { opacity: var(--agc-o, 1); }
  .agent__flow { opacity: var(--mpf, 1); }
  [data-g="1"] { opacity: var(--g1, 1); translate: 0 calc((1 - var(--g1, 1)) * 18px); }
  [data-g="2"] { opacity: var(--g2, 1); translate: 0 calc((1 - var(--g2, 1)) * 22px); }
  [data-g="3"] { opacity: var(--g3, 1); translate: 0 calc((1 - var(--g3, 1)) * 20px); }
  [data-g="4"] { opacity: var(--g4, 1); translate: 0 calc((1 - var(--g4, 1)) * 18px); }
  [data-g="5"] { opacity: var(--g5, 1); translate: 0 calc((1 - var(--g5, 1)) * 18px); }
  [data-g="6"] { opacity: var(--g6, 1); translate: 0 calc((1 - var(--g6, 1)) * 18px); }
  [data-g="7"] { opacity: var(--g7, 1); translate: 0 calc((1 - var(--g7, 1)) * 12px); }
  .agent__chat[data-g="8"] { opacity: var(--g8, 1); translate: calc((1 - var(--g8, 1)) * 40px) 0; }
  .agent__sphere[data-g="9"] { opacity: var(--g9, 1); scale: calc(0.9 + 0.1 * var(--g9, 1)); }
  .achip--a[data-g="10"] { opacity: var(--g10, 1); translate: 0 calc((1 - var(--g10, 1)) * 14px); }
  .achip--b[data-g="11"] { opacity: var(--g11, 1); translate: 0 calc((1 - var(--g11, 1)) * 14px); }
  .achip--c[data-g="12"] { opacity: var(--g12, 1); translate: 0 calc((1 - var(--g12, 1)) * 14px); }
  .ahand[data-g="13"] { opacity: var(--g13, 1); translate: 0 calc((1 - var(--g13, 1)) * 12px); }
  .agent__brand[data-g="14"] { opacity: var(--g14, 1); }

}

@media (max-width: 980px) {
  .agent { min-height: auto; padding: 56px 0 72px; display: flex; flex-direction: column; }
  .agent__copy {
    position: relative;
    left: auto; width: auto; top: auto; bottom: auto;
    padding: 0 clamp(24px, 5vw, 72px);
  }
  .agent__steps { flex-direction: column; gap: 22px; }
  .agent__step { flex-direction: row; text-align: left; gap: 16px; }
  .agent__step:not(:last-child)::after { display: none; }
  .agent__layer { display: contents; }
  .agent__chat { order: 1; }
  .agent__brand { order: 2; }
  .agent__tagline, .agent__brand {
    position: relative;
    left: auto; right: auto; bottom: auto;
    margin: 26px clamp(24px, 5vw, 72px) 0;
  }
  .agent__chat {
    position: relative;
    left: auto;
    top: auto;
    height: auto;
    width: min(100%, 340px);
    margin: 40px auto 0;
    transform: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .agent__screen { aspect-ratio: var(--ratio); height: auto; }
  .agent__sphere, .agent__flow { display: none; }
  .achip, .ahand { position: relative; left: auto; top: auto; align-self: flex-start; }
  .ahand { margin-top: 6px; }
}

/* ---------------------------------------------------------------------
   Section 07 · Pago y confirmación
   Copy + the three review steps on the LEFT; on the RIGHT a small DAIA ERP window where the
   supervisor confirms the payment. Everything is blue (no purple). Once the scene has faded in
   it arrives on a timer (--q1.., script.js), then a short story plays: the customer's proof of
   payment arrives, the steps light up one by one, the supervisor presses "Confirmar pago" and
   the order flips to "Pago confirmado".
   --------------------------------------------------------------------- */
.pay {
  position: relative;
  min-height: calc(100vh - var(--header-height));
  overflow: hidden;
  background:
    radial-gradient(ellipse 46% 60% at 74% 55%, rgba(50, 110, 255, 0.34), transparent 70%),
    radial-gradient(ellipse 50% 40% at 6% 4%, rgba(60, 120, 255, 0.3), transparent 70%),
    linear-gradient(180deg, #0a2790 0%, #082072 52%, #061554 100%);
}
.pay__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pshard { position: absolute; background: linear-gradient(140deg, rgba(110, 165, 255, 0.24), rgba(50, 90, 230, 0.06)); }
.pshard--1 { left: -3%; top: -6%; width: 33%; height: 32%; clip-path: polygon(0 0, 100% 0, 100% 66%, 20% 100%); }
.pshard--2 { left: 30%; top: -5%; width: 22%; height: 24%; clip-path: polygon(30% 0, 100% 0, 70% 100%, 0 62%); background: linear-gradient(140deg, rgba(90, 150, 255, 0.2), rgba(40, 80, 220, 0.04)); }
.pshard--3 { left: 38%; bottom: -5%; width: 62%; height: 36%; clip-path: polygon(0 100%, 100% 100%, 100% 0, 48% 34%); }
.pshard--4 { left: -3%; bottom: -3%; width: 36%; height: 34%; clip-path: polygon(0 34%, 100% 100%, 0 100%); }
.pshard--5 { right: -2%; top: -3%; width: 30%; height: 26%; clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 70%); background: linear-gradient(140deg, rgba(90, 150, 255, 0.16), rgba(40, 80, 220, 0.03)); }
.pstreak {
  position: absolute;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #ff7a3c 40%, #ff4a4a 75%, transparent);
  box-shadow: 0 0 10px rgba(255, 100, 60, 0.75);
  transform-origin: 0 50%;
}
.pstreak--1 { left: 77%; top: 8%; width: 9%; transform: rotate(-36deg); }
.pstreak--2 { left: -1%; top: 66%; width: 6%; transform: rotate(-34deg); }
.pstreak--3 { left: 14%; top: 90%; width: 14%; transform: rotate(32deg); }
.pstreak--4 { left: 44%; top: 52%; width: 6%; transform: rotate(-30deg); }
.pspark { position: absolute; width: 6px; height: 6px; background: #ff6a3a; box-shadow: 0 0 8px rgba(255, 100, 60, 0.9); }
.pspark--1 { left: 95%; top: 19%; }
.pspark--2 { left: 71%; top: 88%; }
.pspark--3 { left: 72.5%; top: 92%; }
.pspark--4 { left: 50%; top: 80.7%; }

.pay__layer { position: absolute; inset: 0; }
.pay__copy {
  position: absolute;
  z-index: 2;
  left: 4.4%;
  width: 46%;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pay__eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 clamp(16px, 3.4vh, 34px);
  color: #dbe5fc;
  font-size: clamp(0.7rem, min(0.95vw, 2vh), 0.95rem);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.pay h2 {
  margin: 0;
  font-size: clamp(2rem, min(4.1vw, 7.4vh), 5rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #fff;
}
.pay__accent {
  display: block;
  background: linear-gradient(90deg, #b6d0ff, #6fa2ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.pay__lead {
  max-width: 26em;
  margin: clamp(14px, 2.8vh, 28px) 0 0;
  color: #fff;
  font-size: clamp(1rem, min(1.72vw, 3.2vh), 1.8rem);
  font-weight: 300;
  line-height: 1.3;
}
.pay__steps {
  --r: clamp(26px, 2.5vw, 40px);
  display: flex;
  margin: clamp(26px, 5.6vh, 56px) 0 0;
  padding: 0;
  list-style: none;
  max-width: 34em;
}
.pay__step {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.8vh, 18px);
  color: #fff;
  font-size: clamp(0.82rem, min(1.3vw, 2.5vh), 1.35rem);
  text-align: center;
  line-height: 1.22;
}
.pay__step i {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  border-radius: 50%;
  border: 2.5px solid rgba(150, 190, 255, 0.9);
  background: radial-gradient(circle, rgba(50, 100, 240, 0.35), rgba(15, 40, 150, 0.4));
  box-shadow: 0 0 24px rgba(70, 130, 255, 0.6), inset 0 0 14px rgba(120, 170, 255, 0.25);
}
.pay__step i svg { position: relative; z-index: 1; width: 44%; height: 44%; }
/* between two steps: a thin energy line (static layouts). On the animated desktop layout it is
   replaced by a live electric arc that jumps from one step to the next (script.js). */
.pay__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--r) - 1px);
  left: calc(50% + var(--r) + 6px);
  width: calc(100% - var(--r) * 2 - 12px);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #6fb0ff, #dff0ff, #6fb0ff);
  box-shadow: 0 0 10px rgba(90, 160, 255, 0.85);
}
.pay__stepsbox { position: relative; max-width: 34em; margin: clamp(26px, 5.6vh, 56px) 0 0; }
.pay__stepsbox .pay__steps { margin: 0; max-width: none; }
.pay__arcs { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; display: none; }
.pay__arcs path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pay__arcs .arc-glow { stroke: #3f8cff; stroke-width: 10; stroke-opacity: 0.32; }
.pay__arcs .arc-core { stroke: #e8f4ff; stroke-width: 2.2; }
.pay__arcs .arc-core2 { stroke: #78ccff; stroke-width: 1.4; stroke-opacity: 0.7; }
.pay__arcs .arc-flash { fill: #fff; }
.pay__arcs .arc-halo { fill: #6fb0ff; fill-opacity: 0.4; }
.pay__arcs .arc.is-done .arc-glow { stroke-opacity: 0.24; stroke-width: 7; }
.pay__arcs .arc.is-done .arc-core { stroke: #9fcbff; stroke-width: 2; }.pay__step:nth-child(1) { --lv: var(--pl1, 1); --pc: var(--pc1, 1); --ta: #3f8cff; --tb: #1d55e0; --tr: #8ab9ff; --tg: 70, 140, 255; }
.pay__step:nth-child(2) { --lv: var(--pl2, 1); --pc: var(--pc2, 1); --ta: #38b8ff; --tb: #1b82e6; --tr: #94d6ff; --tg: 60, 180, 255; }
.pay__step:nth-child(3) { --lv: var(--pl3, 1); --ta: #2ad675; --tb: #12924f; --tr: #6bf7a8; --tg: 50, 230, 130; }
.pay__step i { scale: calc(1 + 0.16 * 4 * var(--lv, 1) * (1 - var(--lv, 1))); }
.pay__step i::before {
  content: "";
  position: absolute;
  inset: -2.5px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ta), var(--tb));
  box-shadow: 0 0 0 2.5px var(--tr), 0 0 30px rgba(var(--tg), 0.8);
  opacity: var(--lv, 1);
}
.pay__step i::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--tr);
  opacity: 0;
  pointer-events: none;
}

.pay__hand {
  position: absolute;
  z-index: 2;
  left: 79%;
  top: 9%;
  margin: 0;
  color: #8db8ff;
  font-family: "Segoe Script", "Bradley Hand", "Brush Script MT", "Snell Roundhand", cursive;
  font-size: clamp(0.9rem, min(1.6vw, 3vh), 1.7rem);
  font-style: italic;
  line-height: 1.35;
  white-space: nowrap;
  transform: rotate(-9deg);
}
.pay__hand-line { display: block; width: 46%; height: 2px; margin: 8px 0 0 50%; border-radius: 99px; background: linear-gradient(90deg, #7fb0ff, #c4dbff); transform: rotate(-7deg); }

.pchip {
  position: absolute;
  z-index: 2;
  left: 38.2%;
  top: 16.3%;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0.55vw 1.2vw;
  border-radius: 14px;
  border: 1.5px solid rgba(120, 170, 255, 0.85);
  background: linear-gradient(160deg, rgba(40, 90, 230, 0.6), rgba(14, 40, 150, 0.75));
  box-shadow: 0 0 26px rgba(90, 150, 255, 0.5), 0 12px 30px rgba(2, 8, 50, 0.4);
  color: #fff;
  font-size: clamp(0.78rem, min(1.2vw, 2.4vh), 1.25rem);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
.pchip::after {
  content: "";
  position: absolute;
  right: -5px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff9a5c;
  box-shadow: 0 0 10px rgba(255, 150, 90, 0.95);
}
.pay__flow { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.pflow { fill: none; stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--pf, 1)); }
.pflow-dot { opacity: var(--pf, 1); }

/* the ERP window: the 16:9 video of DAIA's internal work, in the same frame the chat screen morphs into ---- */
.pwin {
  position: absolute;
  z-index: 2;
  left: 49%;
  top: 52.5%;
  translate: 0 -50%;
  width: min(49.6%, calc((100vh - var(--header-height)) * 0.66 * 1.7778));
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px;
  border: 1.5px solid rgba(90, 150, 255, 0.95);
  background: #f0f5fa;
  box-shadow: 0 0 44px rgba(60, 120, 255, 0.55), 0 30px 70px rgba(0, 0, 0, 0.45);
}
.pwin__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes pay-arrive { 0% { transform: scale(1); opacity: 0.95; } 100% { transform: scale(2); opacity: 0; } }
  @keyframes pay-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.78; } }
  @keyframes pay-glow { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
  .pay__step i.is-lit::after { animation: pay-arrive 0.9s ease-out 1; }
  .pay__step i.is-lit::before { animation: pay-breathe 2.6s ease-in-out infinite; }
  .pspark { animation: pay-glow 2.4s ease-in-out infinite; }
  .pspark--2 { animation-delay: 0.6s; }
  .pspark--3 { animation-delay: 1.2s; }
  .pspark--4 { animation-delay: 1.8s; }
}

@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
  .pay__arcs { display: block; }
  .pay__layer { opacity: var(--pyc-o, 1); }
  .pay .pwin { opacity: var(--pwv, 1); }
  .pay__step:not(:last-child)::after { display: none; }
  .pay-runway { position: relative; margin-top: calc(-1 * var(--total-run)); height: var(--total-run); }
  .pay {
    position: sticky;
    z-index: 11;
    top: var(--header-offset, var(--header-height));
    height: calc(100vh - var(--header-offset, var(--header-height)));
    min-height: 0;
    opacity: var(--pay-o, 1);
    pointer-events: none;
  }
  [data-q="1"] { opacity: var(--q1, 1); translate: 0 calc((1 - var(--q1, 1)) * 18px); }
  [data-q="2"] { opacity: var(--q2, 1); translate: 0 calc((1 - var(--q2, 1)) * 22px); }
  [data-q="3"] { opacity: var(--q3, 1); translate: 0 calc((1 - var(--q3, 1)) * 20px); }
  [data-q="4"] { opacity: var(--q4, 1); translate: 0 calc((1 - var(--q4, 1)) * 18px); }
  [data-q="5"] { opacity: var(--q5, 1); translate: 0 calc((1 - var(--q5, 1)) * 18px); }
  [data-q="6"] { opacity: var(--q6, 1); translate: 0 calc((1 - var(--q6, 1)) * 18px); }
  .pchip[data-q="8"] { opacity: var(--q8, 1); translate: 0 calc((1 - var(--q8, 1)) * 14px); }
  .pay__hand[data-q="9"] { opacity: var(--q9, 1); translate: 0 calc((1 - var(--q9, 1)) * 12px); }
}

@media (max-width: 980px) {
  .pay { min-height: auto; padding: 56px 0 72px; display: flex; flex-direction: column; }
  .pay__copy { position: relative; left: auto; width: auto; top: auto; bottom: auto; padding: 0 clamp(24px, 5vw, 72px); }
  .pay__steps { flex-direction: column; gap: 22px; max-width: none; }
  .pay__stepsbox { max-width: none; }
  .pay__step { flex-direction: row; text-align: left; gap: 16px; }
  .pay__step:not(:last-child)::after { display: none; }
  .pay__layer { display: contents; }
  .pay__hand, .pchip { position: relative; left: auto; top: auto; margin: 22px clamp(24px, 5vw, 72px) 0; align-self: flex-start; }
  .pay__flow { display: none; }
  .pwin { position: relative; left: auto; top: auto; translate: none; width: auto; margin: 32px clamp(18px, 5vw, 48px) 0; }
}

/* ---------------------------------------------------------------------
   Section 08 · Toda la empresa se actualiza
   A light scene: one confirmed payment (centre) sends energy out along five wires; each area of
   the company (Ventas, Finanzas, Inventario, Cliente, Preparación) wakes up when it arrives,
   pops a small "what changed" note and keeps a tiny live animation. Blue only (no purple).
   The diagram is drawn on a 1672x941 stage and sized with container units (cqw).
   --------------------------------------------------------------------- */
.up {
  position: relative;
  min-height: calc(100vh - var(--header-height));
  overflow: hidden;
  background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
  color: #0d1a44;
}
.up__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ublob { position: absolute; aspect-ratio: 1; border-radius: 50%; }
.ublob--tl { left: -12%; top: -24%; width: 34%; background: radial-gradient(circle, rgba(165, 198, 255, 0.55), transparent 70%); }
.ublob--tr { right: -4.5%; top: -17%; width: 21.5%; background: radial-gradient(circle at 26% 76%, #7aaaff 0%, #3f70f7 55%, #2a58e8 100%); }
.ublob--bl { left: -16.7%; bottom: -27%; width: 34.7%; background: linear-gradient(140deg, #5a92ff 0%, #2f62f2 60%, rgba(42, 93, 240, 0.35) 100%); }
.ublob--br { right: 0.7%; bottom: -11%; width: 14.4%; background: radial-gradient(circle at 40% 30%, #c4d8ff, #7ea3f8 80%); }
.uarc { position: absolute; aspect-ratio: 1; border: 2px solid #f2866c; border-radius: 50%; }
.uarc--tl { left: -7%; top: -34%; width: 22%; }
.uarc--bl { left: 1%; bottom: -36%; width: 23%; }
.uarc--r { right: -11%; top: 20%; width: 12%; }
.udot { position: absolute; border-radius: 50%; background: #5b86ff; }
.udot--a { right: 12.3%; top: 19%; width: 8px; height: 8px; }
.udot--b { left: 21%; bottom: 12%; width: 14px; height: 14px; background: #a9c3ff; }

.up__stage {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: min(100%, calc((100vh - var(--header-height)) * 1.777));
  aspect-ratio: 1672 / 941;
  translate: -50% -50%;
  container-type: inline-size;
}
.up__kicker {
  position: absolute;
  left: 0;
  right: 0;
  top: 6.1%;
  margin: 0;
  text-align: center;
  color: #1d5cff;
  font-size: 0.92cqw;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.up__title {
  position: absolute;
  left: 0;
  right: 0;
  top: 10.4%;
  margin: 0;
  text-align: center;
  font-size: 3.5cqw;
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #0d1a44;
}
.up__title span { display: block; }
.up__title em {
  font-style: normal;
  background: linear-gradient(90deg, #1a5cff, #4a94ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.up__sub {
  position: absolute;
  left: 0;
  right: 0;
  top: 24.4%;
  margin: 0;
  text-align: center;
  font-size: 1.45cqw;
  color: #2a3b6b;
}
.up__foot {
  position: absolute;
  left: 26.7%;
  right: 25.9%;
  top: 89.1%;
  margin: 0;
  text-align: center;
  color: #0d1a44;
}
.up__footlabel {
  display: flex;
  align-items: center;
  gap: 1.5cqw;
  height: 1.3cqw;
  color: #2b5bff;
  font-size: 0.98cqw;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
}
.up__footlabel::before,
.up__footlabel::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: #2b5bff; }
.up__foot b { display: block; margin-top: 0.85cqw; font-size: 1.85cqw; font-weight: 800; letter-spacing: -0.03em; white-space: nowrap; }
.up__foot em {
  font-style: normal;
  background: linear-gradient(90deg, #1a5cff, #3f8bff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.up__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 4; }
.upath { fill: none; stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 1; }
#upp1 { stroke-dashoffset: calc(1 - var(--uc1, 1)); }
#upp2 { stroke-dashoffset: calc(1 - var(--uc2, 1)); }
#upp3 { stroke-dashoffset: calc(1 - var(--uc3, 1)); }
#upp4 { stroke-dashoffset: calc(1 - var(--uc4, 1)); }
#upp5 { stroke-dashoffset: calc(1 - var(--uc5, 1)); }
.uport { fill: #fff; stroke-width: 4; }
.uend { stroke: #fff; stroke-width: 2.5; }
.uidle { fill: #4a8bff; stroke: #fff; stroke-width: 2; opacity: 0; }
.up.is-live .uidle { opacity: 1; }
.upkt-halo { fill: #5b8cff; fill-opacity: 0.32; }
.upkt-core { fill: #fff; stroke: #2b6bff; stroke-width: 3.2; }

/* centre: the confirmed payment */
.ucore { position: absolute; z-index: 3; left: 40.9%; top: 37.1%; width: 20%; height: 24%; }
.ucore__card {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 1.8cqw;
  background: linear-gradient(160deg, #4b95ff 0%, #2166f4 52%, #1a4fe2 100%);
  box-shadow: 0 2cqw 4cqw rgba(30, 92, 240, 0.42), inset 0 0.2cqw 0.5cqw rgba(255, 255, 255, 0.4), inset 0 -0.4cqw 1cqw rgba(10, 40, 160, 0.35);
  color: #fff;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.ucore__check { position: relative; z-index: 2; display: grid; place-items: center; width: 5.4cqw; height: 5.4cqw; margin-bottom: 1.4cqw; border-radius: 50%; background: linear-gradient(160deg, #46d17c, #1fa955); box-shadow: 0 0.5cqw 1.2cqw rgba(10, 100, 50, 0.4); }
.ucore__check svg { width: 62%; height: auto; }
.ucore__tick { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--uck, 1)); }
.ucore b { position: relative; z-index: 2; font-size: 1.95cqw; font-weight: 700; letter-spacing: -0.01em; text-shadow: 0 0 1.4cqw rgba(170, 215, 255, 0.6), 0 0.15cqw 0.3cqw rgba(10, 40, 160, 0.35); }
.ucore__ring { position: absolute; inset: 0; border-radius: 1.8cqw; border: 2px solid rgba(60, 130, 255, 0.7); background: rgba(70, 130, 255, 0.04); opacity: 0; pointer-events: none; }

/* light and life on the centre card: glass gloss, a light running round the
   edge, a breathing glow and small motes rising from below */
.ucore__halo {
  position: absolute;
  inset: -34% -26%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(60, 130, 255, 0.72), rgba(60, 130, 255, 0.28) 55%, transparent 76%);
  opacity: 0.75;
  pointer-events: none;
}
.ucore__gloss {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.08) 34%, transparent 50%),
    radial-gradient(90% 70% at 50% 118%, rgba(120, 200, 255, 0.5), transparent 62%);
}
.ucore__edge {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 0.24cqw;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  -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 exclude, linear-gradient(#000 0 0);
}
.ucore__edge i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 175%;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: conic-gradient(from 0deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.28) 55%, rgba(170, 225, 255, 0.95) 88%, #fff 96%, rgba(255, 255, 255, 0.28) 100%);
}
.ucore__mote { position: absolute; z-index: 1; bottom: 0; width: 0.42cqw; height: 0.42cqw; border-radius: 50%; background: #dff0ff; box-shadow: 0 0 0.8cqw rgba(200, 230, 255, 0.95); opacity: 0; pointer-events: none; }
.ucore__mote--1 { left: 14%; }
.ucore__mote--2 { left: 32%; width: 0.3cqw; height: 0.3cqw; }
.ucore__mote--3 { left: 58%; }
.ucore__mote--4 { left: 76%; width: 0.3cqw; height: 0.3cqw; }
.ucore__mote--5 { left: 90%; }
.ucore__check::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 0.22cqw solid rgba(130, 245, 175, 0.85); opacity: 0; }

/* the five areas */
.usat { position: absolute; z-index: 3; transition: opacity 0.45s ease, scale 0.7s cubic-bezier(0.2, 1.5, 0.4, 1); }
.up.is-armed .usat:not(.is-on) { opacity: 0.45; scale: 0.93; }
.usat__body {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 2.2cqw 4.4cqw rgba(50, 92, 200, 0.17), 0 0.3cqw 0.8cqw rgba(50, 92, 200, 0.09), inset 0 0 0 1px rgba(255, 255, 255, 0.85);
}
.usat__icon { position: relative; display: grid; place-items: center; width: 5.6cqw; height: 5.6cqw; margin-bottom: 0.9cqw; border-radius: 50%; background: rgba(255, 255, 255, 0.7); }
.usat__icon svg { width: 58%; height: auto; }
.usat h3 { margin: 0; font-size: 1.32cqw; font-weight: 700; color: #0d1a44; }
.usat p { margin: 0.45cqw 0 0; font-size: 1.08cqw; color: #3b4d7d; }
.upop {
  position: absolute;
  z-index: 4;
  top: -1%;
  right: 4%;
  padding: 0.35cqw 0.9cqw;
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 0.6cqw 1.6cqw rgba(30, 80, 220, 0.3);
  color: #1d5cff;
  font-size: 1.05cqw;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
.usat--sales { left: 15.1%; top: 25%; width: 13.75%; height: 24.4%; }
.usat--sales .usat__body { border-radius: 50%; background: radial-gradient(circle at 34% 24%, #ffffff 0%, #eef4ff 70%, #e6efff 100%); }
.usat--sales .usat__icon { background: #dbe8ff; }
.usat--fin { left: 73.6%; top: 26%; width: 11.8%; height: 22.2%; }
.usat--fin .usat__body { border-radius: 1.6cqw; background: linear-gradient(160deg, #eafff3, #cdf3df); }
.usat--fin .usat__icon { background: #c4eed7; border-radius: 1.2cqw; }
.usat--inv { left: 13.9%; top: 59.2%; width: 17.9%; height: 18.1%; }
.usat--inv { rotate: -4deg; }
.usat--inv .usat__body { border-radius: 999px; background: linear-gradient(160deg, #f4f5ff, #dde2ff); }
.usat--inv .usat__icon { background: #d3d9ff; }
.usat--inv .usat__icon path:first-child { fill: #4f5bf0; }
.usat--cli { left: 69.3%; top: 57.2%; width: 16.6%; height: 23.8%; }
.usat--cli .usat__body { border-radius: 62% 16% 46% 54% / 62% 24% 44% 42%; padding-top: 3%; background: linear-gradient(160deg, #f4f5ff, #dbe0ff); }
.usat--cli .usat__icon { background: #d0d6ff; }
.usat--cli .usat__icon svg * { fill: #4f5bf0; }
.usat--cli .usat__icon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #3f74ff; opacity: 0; }
.usat--prep { left: 42.6%; top: 68.5%; width: 16.1%; height: 19.4%; rotate: -3deg; }
.usat--prep .usat__body {
  background: linear-gradient(160deg, #ffffff, #eef3ff);
  border-radius: 1.2cqw;
  box-shadow: none;
  -webkit-mask: radial-gradient(circle 1.3cqw at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 1.3cqw at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 1.3cqw at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 1.3cqw at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
}
.usat--prep { filter: drop-shadow(0 1.6cqw 2cqw rgba(50, 92, 200, 0.2)); }
.usat--prep .usat__icon { background: #d9e6ff; }
/* to the side of the ticket: the wire above it would hide the pill */
.usat--prep .upop { top: 6%; right: auto; left: 90%; }

/* little sparks around the cards: short round rays fanned out from a point (--d = direction, --k = spread) */
.utick { position: absolute; z-index: 2; width: 0; height: 0; color: #3b7bff; }
.utick i {
  position: absolute;
  left: 0;
  top: 0;
  width: 1.6cqw;
  height: 0.4cqw;
  margin-top: -0.2cqw;
  border-radius: 0.4cqw;
  background: currentColor;
  transform-origin: 0 50%;
  transform: rotate(var(--a, 0deg)) translateX(1.35cqw);
}
.utick i:nth-child(1) { --a: calc(var(--d) - var(--k)); }
.utick i:nth-child(2) { --a: var(--d); }
.utick i:nth-child(3) { --a: calc(var(--d) + var(--k)); }
.utick:has(i:nth-child(3)) i:nth-child(2) { --a: var(--d); }
.utick:not(:has(i:nth-child(3))) i:nth-child(1) { --a: calc(var(--d) - var(--k) / 2); }
.utick:not(:has(i:nth-child(3))) i:nth-child(2) { --a: calc(var(--d) + var(--k) / 2); }
.utick--1 { left: 17.9%; top: 27.6%; --d: 232deg; --k: 40deg; color: #f2735a; }
.utick--2 { left: 50.7%; top: 36.1%; --d: 270deg; --k: 36deg; color: #2f6cff; }
.utick--3 { left: 85.9%; top: 33.3%; --d: -14deg; --k: 34deg; color: #23b58a; }
.utick--4 { left: 84.9%; top: 60.8%; --d: -44deg; --k: 30deg; color: #f2735a; }
.utick--5 { left: 13.9%; top: 69.1%; --d: 180deg; --k: 30deg; color: #3b7bff; }
.utick--6 { left: 58.9%; top: 75.7%; --d: 6deg; --k: 30deg; color: #3b7bff; }

.up__hand {
  position: absolute;
  z-index: 3;
  margin: 0;
  color: #2b5bff;
  font-family: "Segoe Script", "Bradley Hand", "Brush Script MT", "Snell Roundhand", cursive;
  font-style: italic;
  font-size: 1.6cqw;
  line-height: 1.32;
  white-space: nowrap;
}
.up__hand svg { display: block; width: 6.2cqw; height: auto; margin-top: 0.4cqw; }
.up__hand--l { left: 4.6%; top: 42.5%; rotate: -18deg; }
.up__hand--r { left: 89%; top: 65%; rotate: -16deg; }
.up__hand--r svg { margin-left: -1cqw; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes up-ring { 0% { transform: scale(1); opacity: 0.4; } 100% { transform: scale(1.28, 1.42); opacity: 0; } }
  @keyframes up-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.6cqw); } }
  @keyframes up-pop {
    0% { opacity: 0; transform: translateY(0.6cqw) scale(0.7); }
    16% { opacity: 1; transform: translateY(0) scale(1.06); }
    70% { opacity: 1; transform: translateY(-0.4cqw) scale(1); }
    100% { opacity: 0; transform: translateY(-2cqw) scale(1); }
  }
  @keyframes up-bump { 0% { scale: 1; } 30% { scale: 1.045; } 100% { scale: 1; } }
  @keyframes up-cart { 0%, 100% { transform: translateX(-6%) rotate(-3deg); } 50% { transform: translateX(8%) rotate(3deg); } }
  @keyframes up-bars { 0%, 100% { transform: scaleY(0.4); } 40%, 70% { transform: scaleY(1); } }
  @keyframes up-box { 0%, 100% { transform: translateY(0) rotate(0deg); } 45% { transform: translateY(-9%) rotate(-5deg); } 70% { transform: translateY(0) rotate(3deg); } }
  @keyframes up-gear { to { transform: rotate(360deg); } }
  @keyframes up-cli { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.7); opacity: 0; } }
  @keyframes up-tick { 0%, 100% { opacity: 0.35; scale: 0.85; } 50% { opacity: 1; scale: 1.1; } }

  @keyframes up-halo { 0%, 100% { scale: 0.98; opacity: 0.72; } 50% { scale: 1.04; opacity: 0.9; } }
  @keyframes up-edge { to { rotate: 360deg; } }
  @keyframes up-mote { 0% { translate: 0 0; opacity: 0; } 15% { opacity: 0.95; } 100% { translate: 0.8cqw -14cqw; opacity: 0; } }
  @keyframes up-check-ring { 0% { scale: 1; opacity: 0.5; } 70%, 100% { scale: 1.6; opacity: 0; } }
  @keyframes up-check-beat { 0%, 100% { scale: 1; } 12% { scale: 1.04; } 26% { scale: 1; } }
  .up.is-pulse .ucore__halo { animation: up-halo 3.4s ease-in-out infinite; }
  .up.is-pulse .ucore__edge i { animation: up-edge 4.6s linear infinite; }
  .up.is-pulse .ucore__mote { animation: up-mote 4.4s linear infinite; }
  .up.is-pulse .ucore__mote--2 { animation-delay: -1.2s; animation-duration: 5.2s; }
  .up.is-pulse .ucore__mote--3 { animation-delay: -2.4s; animation-duration: 3.9s; }
  .up.is-pulse .ucore__mote--4 { animation-delay: -3.3s; animation-duration: 4.8s; }
  .up.is-pulse .ucore__mote--5 { animation-delay: -0.6s; animation-duration: 5.6s; }
  .up.is-pulse .ucore__check { animation: up-check-beat 2.4s ease-in-out infinite; }
  .up.is-pulse .ucore__check::before { animation: up-check-ring 2.4s ease-out infinite; }
  .up.is-pulse .ucore__ring { animation: up-ring 5s ease-out infinite; }
  .up.is-pulse .ucore__ring:nth-child(3) { animation-delay: 2.5s; }
  .up.is-pulse .ucore__ring:nth-child(4) { display: none; }
  .usat.is-on .usat__body { animation: up-float 5s ease-in-out infinite; }
  .usat--fin.is-on .usat__body { animation-delay: -1.2s; animation-duration: 5.6s; }
  .usat--inv.is-on .usat__body { animation-delay: -2.4s; animation-duration: 4.6s; }
  .usat--cli.is-on .usat__body { animation-delay: -3.1s; animation-duration: 5.2s; }
  .usat--prep.is-on .usat__body { animation-delay: -0.6s; animation-duration: 4.8s; }
  .upop.is-note { animation: up-pop 2.4s ease-out 1 both; }
  .usat.is-bump { animation: up-bump 0.7s ease-out 1; }
  .usat--sales.is-on .usat__icon svg { animation: up-cart 2.4s ease-in-out infinite; }
  .usat--fin.is-on .bar { transform-box: fill-box; transform-origin: 50% 100%; animation: up-bars 2.8s ease-in-out infinite; }
  .usat--fin.is-on .bar--2 { animation-delay: 0.25s; }
  .usat--fin.is-on .bar--3 { animation-delay: 0.5s; }
  .usat--inv.is-on .usat__icon svg { animation: up-box 3.2s ease-in-out infinite; }
  .usat--prep.is-on .gear { transform-box: fill-box; transform-origin: 50% 50%; animation: up-gear 7s linear infinite; }
  .usat--cli.is-on .usat__icon::after { animation: up-cli 2.2s ease-out infinite; }
  .utick { animation: up-tick 2.6s ease-in-out infinite; }
  .utick--2 { animation-delay: 0.5s; }
  .utick--3 { animation-delay: 1s; }
  .utick--4 { animation-delay: 1.5s; }
  .utick--5 { animation-delay: 0.8s; }
  .utick--6 { animation-delay: 1.9s; }
}
@media (prefers-reduced-motion: reduce) {
  .uidles { display: none; }
}

@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
  .up-runway { position: relative; margin-top: calc(-1 * var(--total-run)); height: var(--total-run); }
  .up {
    position: sticky;
    z-index: 12;
    top: var(--header-offset, var(--header-height));
    height: calc(100vh - var(--header-offset, var(--header-height)));
    min-height: 0;
    opacity: var(--up-o, 1);
    pointer-events: none;
  }
  .up__kicker[data-u="1"] { opacity: var(--u1, 1); translate: 0 calc((1 - var(--u1, 1)) * 1.2cqw); }
  .up__title span[data-u="2"] { opacity: var(--u2, 1); translate: 0 calc((1 - var(--u2, 1)) * 1.6cqw); }
  .up__title span[data-u="3"] { opacity: var(--u3, 1); translate: 0 calc((1 - var(--u3, 1)) * 1.6cqw); }
  .up__sub[data-u="4"] { opacity: var(--u4, 1); translate: 0 calc((1 - var(--u4, 1)) * 1.2cqw); }
  .up__foot[data-u="5"] { opacity: var(--u5, 1); }
  .ucore[data-u="6"] { opacity: var(--u6, 1); scale: calc(0.78 + 0.22 * var(--u6, 1)); }
  .up__hand[data-u="7"] { opacity: var(--u7, 1); }
}

@media (max-width: 980px) {
  .up { min-height: auto; padding: 56px 0 64px; }
  .up__stage {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    aspect-ratio: auto;
    translate: none;
    padding: 0 clamp(20px, 5vw, 60px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .up__kicker, .up__title, .up__sub, .up__foot { position: static; grid-column: 1 / -1; }
  .up__kicker { font-size: 0.75rem; }
  .up__title { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .up__sub { font-size: 1.05rem; margin-bottom: 8px; }
  .up__foot { margin-top: 8px; }
  .up__footlabel { height: auto; gap: 12px; font-size: 0.7rem; }
  .up__foot b { margin-top: 10px; font-size: 1.05rem; white-space: normal; }
  .up__lines, .utick, .up__hand { display: none; }
  .ucore { position: relative; left: auto; top: auto; width: auto; height: auto; grid-column: 1 / -1; }
  .ucore__card { padding: 22px 12px; }
  .ucore__check { width: 52px; height: 52px; }
  .ucore b { font-size: 1.25rem; }
  .usat { position: relative; left: auto; top: auto; width: auto; height: auto; rotate: 0deg; }
  .usat--prep { grid-column: 1 / -1; }
  .usat__body { padding: 18px 10px; border-radius: 20px !important; -webkit-mask: none !important; mask: none !important; }
  .usat__icon { width: 52px; height: 52px; }
  .usat h3 { font-size: 1.05rem; }
  .usat p { font-size: 0.85rem; }
  .upop { font-size: 0.75rem; }
}

/* ---------------------------------------------------------------------
   Section 09 · Crece a tu ritmo
   Entering it you fly through a bank of clouds (scroll-linked); when the clouds part, the sky, the three
   floating platforms (essentials -> order -> expand) and their cards emerge on a timer, a golden path
   is drawn between them and a light travels along it, waking each platform as it arrives.
   The scene is drawn on a 1672x941 stage and sized with container units (cqw).
   --------------------------------------------------------------------- */
.grow {
  --serif: "Cambria", "Iowan Old Style", "Georgia", "Times New Roman", serif;
  position: relative;
  min-height: calc(100vh - var(--header-height));
  overflow: hidden;
  background: linear-gradient(180deg, #b9ddfa 0%, #d9ebfb 55%, #f3ede8 100%);
  color: #0b2470;
}
.grow__sky { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; container-type: size; }
/* a 16:9 box that always covers the scene (like object-fit: cover), so the overlays line up with the picture */
.grow__world { position: absolute; left: 50%; top: 50%; width: max(100cqw, 177.78cqh); aspect-ratio: 16 / 9; translate: -50% -50%; }
.grow__bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.grow__sun {
  position: absolute;
  left: 68%;
  top: -14%;
  width: 40%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 233, 178, 0.85), rgba(255, 226, 160, 0.3) 46%, transparent 72%);
}
.grow__rays {
  position: absolute;
  left: 58%;
  top: -34%;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.55;
  background: repeating-conic-gradient(from 0deg, rgba(255, 244, 210, 0.42) 0 5deg, transparent 5deg 15deg);
  -webkit-mask: radial-gradient(closest-side, #000 12%, transparent 72%);
  mask: radial-gradient(closest-side, #000 12%, transparent 72%);
}
.grow__falls { position: absolute; left: 75.9%; top: 48.8%; width: 3%; height: 30%; overflow: hidden; opacity: 0.6; -webkit-mask: linear-gradient(180deg, transparent, #000 14%, #000 80%, transparent); mask: linear-gradient(180deg, transparent, #000 14%, #000 80%, transparent); }
.grow__falls i { position: absolute; left: 0; right: 0; top: 0; height: 200%; background: repeating-linear-gradient(180deg, transparent 0 2cqw, rgba(255, 255, 255, 0.7) 2.9cqw, transparent 3.8cqw 5.4cqw); -webkit-mask: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent); mask: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent); }
.gtw { position: absolute; width: 1.7%; aspect-ratio: 1; opacity: 0; background: linear-gradient(#fff, #fff) center / 100% 2px no-repeat, linear-gradient(#fff, #fff) center / 2px 100% no-repeat; filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.95)); }
.gtw--1 { left: 79.5%; top: 19%; }
.gtw--2 { left: 84%; top: 33%; }
.gtw--3 { left: 88%; top: 15%; }
.gtw--4 { left: 91.5%; top: 27%; }
.gtw--5 { left: 95%; top: 36%; }
.gtw--6 { left: 77%; top: 30%; }
.grow__motes { position: absolute; inset: 0; }
.gmote { position: absolute; left: var(--x); top: var(--y); width: calc(var(--s) * 0.55cqw); aspect-ratio: 1; border-radius: 50%; opacity: 0; background: radial-gradient(circle, #fff 0 25%, rgba(255, 226, 150, 0.9) 45%, transparent 72%); }

.grow__stage {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: min(100%, calc((100vh - var(--header-height)) * 1.777));
  aspect-ratio: 1672 / 941;
  translate: -50% -50%;
  container-type: inline-size;
}
.grow__kicker { position: absolute; left: 4.8%; top: 6.6%; margin: 0; display: flex; align-items: center; gap: 1.5cqw; color: #163a9c; font-size: 1.02cqw; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; }
.grow__kline { display: block; width: 4.4cqw; height: 1.5px; background: #163a9c; transform-origin: 0 50%; }
.grow__title { position: absolute; left: 4.8%; top: 10.3%; margin: 0; font-family: var(--serif); font-size: 3.4cqw; line-height: 1.04; font-weight: 700; letter-spacing: -0.03em; color: #0b2470; }
.gl { display: block; white-space: nowrap; }
.gw { display: inline-block; }
.grow__lead { position: absolute; left: 4.8%; top: 24.3%; width: 47%; margin: 0; font-size: 1.46cqw; line-height: 1.24; color: #123796; }

/* the path between the platforms */
.grow__path { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.gpath { fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--gpath, 1)); }
.gpath--halo { stroke: rgba(255, 214, 120, 0.42); stroke-width: 15; }
.gpath--core { stroke: url(#growGlow); stroke-width: 4.2; }
.gpath--flow { stroke: #fff; stroke-width: 2.4; stroke-dasharray: 0.018 0.075; stroke-dashoffset: 0; opacity: 0; }
.gn__halo { fill: rgba(255, 214, 120, 0.38); }
.gn__core { fill: #ffd76e; stroke: #fff; stroke-width: 3; }
.gn { transform-box: fill-box; transform-origin: center; scale: calc(0.3 + 0.7 * var(--gn, 1)); opacity: var(--gn, 1); }
.gorb { opacity: 0; }
.gorb__halo { fill: rgba(255, 226, 150, 0.5); }
.gorb__core { fill: #fff; stroke: #ffd05a; stroke-width: 3.5; }

/* the platforms */
.gstep { display: contents; }
.gplat { position: absolute; z-index: 2; isolation: isolate; opacity: clamp(0, calc(var(--gp, 1) * 1.7), 1); translate: 0 calc((1 - var(--gp, 1)) * 11cqw); scale: calc(0.86 + 0.14 * var(--gp, 1)); transform-origin: 50% 88%; }
.gplat img { display: block; width: 100%; height: auto; }
.gplat--1 { --gp: var(--gp1, 1); left: 3.4%; top: 34.6%; width: 26.6%; }
.gplat--2 { --gp: var(--gp2, 1); left: 36.9%; top: 34.8%; width: 27%; }
.gplat--3 { --gp: var(--gp3, 1); left: 70%; top: 32.4%; width: 27.6%; }
.gplat__glow { position: absolute; z-index: -1; left: 6%; right: 6%; bottom: 3%; height: 24%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 222, 150, 0.7), transparent 72%); }
.gplat__ring { position: absolute; left: 3%; right: 3%; top: 56%; height: 34%; border-radius: 50%; border: 2px solid rgba(255, 224, 150, 0.95); box-shadow: 0 0 1.4cqw rgba(255, 214, 120, 0.7); opacity: 0; pointer-events: none; }

/* the cards */
.gcard {
  position: absolute;
  z-index: 5;
  height: 12.9%;
  opacity: var(--gc, 1);
  translate: 0 calc((1 - var(--gc, 1)) * 2.6cqw);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 1.7cqw;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(234, 242, 255, 0.66));
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 1.2cqw 3cqw rgba(60, 100, 200, 0.2), inset 0 0 0 1px rgba(140, 175, 240, 0.4), inset 0 0.15cqw 0.4cqw rgba(255, 255, 255, 0.95);
}
.gcard::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; border: 2px solid rgba(255, 206, 110, 0.95); box-shadow: 0 0 2.4cqw rgba(255, 206, 110, 0.85); opacity: 0; pointer-events: none; }
.gcard h3 { margin: 0; font-family: var(--serif); font-size: 2.05cqw; font-weight: 700; letter-spacing: -0.02em; color: #0c2a86; }
.gcard p { margin: 0.75cqw 0 0; font-size: 1.16cqw; color: #1d43a8; }
.gcard--1 { --gc: var(--gc1, 1); left: 4.7%; top: 68.6%; width: 24.9%; }
.gcard--2 { --gc: var(--gc2, 1); left: 38.9%; top: 68.6%; width: 22.7%; }
.gcard--3 { --gc: var(--gc3, 1); left: 70.3%; top: 68.6%; width: 25.3%; }
.gburst {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9cqw;
  aspect-ratio: 1;
  translate: -50% -50%;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(circle, #ffd76e 0 22%, transparent 26%) 50% 0 / 14% 14% no-repeat,
    radial-gradient(circle, #ffd76e 0 22%, transparent 26%) 93% 25% / 14% 14% no-repeat,
    radial-gradient(circle, #ffd76e 0 22%, transparent 26%) 93% 75% / 14% 14% no-repeat,
    radial-gradient(circle, #ffd76e 0 22%, transparent 26%) 50% 100% / 14% 14% no-repeat,
    radial-gradient(circle, #ffd76e 0 22%, transparent 26%) 7% 75% / 14% 14% no-repeat,
    radial-gradient(circle, #ffd76e 0 22%, transparent 26%) 7% 25% / 14% 14% no-repeat;
}

.grow__foot { position: absolute; left: 4.5%; right: 4.5%; top: 88.7%; margin: 0; display: flex; align-items: center; gap: 1.5cqw; opacity: var(--gf, 1); translate: 0 calc((1 - var(--gf, 1)) * 1.4cqw); }
.grow__fl { flex: 1; height: 1.5px; background: linear-gradient(90deg, transparent, #2b56c0); transform-origin: 100% 50%; scale: var(--gf, 1) 1; }
.grow__fl:last-child { background: linear-gradient(90deg, #2b56c0, transparent); transform-origin: 0 50%; }
.grow__foot b { flex: none; font-family: var(--serif); font-size: 1.72cqw; font-weight: 500; letter-spacing: -0.01em; color: #0d2a80; white-space: nowrap; }

/* the clouds you fly through */
.grow__clouds { display: none; }
.gcl { display: block; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes g-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.7cqw); } }
  @keyframes g-glow { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
  @keyframes g-sun { 0%, 100% { opacity: 0.7; scale: 0.96; } 50% { opacity: 1; scale: 1.06; } }
  @keyframes g-rays { to { rotate: 360deg; } }
  @keyframes g-falls { to { translate: 0 -50%; } }
  @keyframes g-tw { 0%, 100% { opacity: 0; scale: 0.3; } 45%, 55% { opacity: 1; scale: 1; } }
  @keyframes g-mote { 0% { opacity: 0; translate: 0 0; } 15% { opacity: 0.95; } 100% { opacity: 0; translate: 2cqw -17cqw; } }
  @keyframes g-flow { to { stroke-dashoffset: -0.093; } }
  @keyframes g-ring { 0% { opacity: 0.9; scale: 0.9; } 100% { opacity: 0; scale: 1.5 1.7; } }
  @keyframes g-hit { 0% { opacity: 0; } 12% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes g-lift { 0%, 100% { transform: translateY(0); } 20% { transform: translateY(-0.7cqw); } 60% { transform: translateY(-0.4cqw); } }
  @keyframes g-burst { 0% { opacity: 1; scale: 0.35; } 100% { opacity: 0; scale: 1.5; } }

  .grow.is-live .gplat img { animation: g-float 6.4s ease-in-out infinite; }
  .grow.is-live .gplat--2 img { animation-delay: -2.1s; animation-duration: 7s; }
  .grow.is-live .gplat--3 img { animation-delay: -4s; animation-duration: 6s; }
  .grow.is-live .gplat__glow { animation: g-glow 3.6s ease-in-out infinite; }
  .grow.is-live .gplat--2 .gplat__glow { animation-delay: -1.2s; }
  .grow.is-live .gplat--3 .gplat__glow { animation-delay: -2.4s; }
  .grow.is-live .grow__sun { animation: g-sun 6s ease-in-out infinite; }
  .grow.is-live .grow__rays { animation: g-rays 110s linear infinite; }
  .grow.is-live .grow__falls i { animation: g-falls 1.5s linear infinite; }
  .grow.is-live .gtw { animation: g-tw 3.6s ease-in-out infinite; }
  .grow.is-live .gtw--2 { animation-delay: -0.7s; }
  .grow.is-live .gtw--3 { animation-delay: -1.5s; }
  .grow.is-live .gtw--4 { animation-delay: -2.2s; }
  .grow.is-live .gtw--5 { animation-delay: -2.9s; }
  .grow.is-live .gtw--6 { animation-delay: -3.3s; }
  .grow.is-live .gmote { animation: g-mote var(--d) linear infinite; animation-delay: var(--dl); }
  .grow.is-live .gpath--flow { opacity: 0.95; animation: g-flow 1.6s linear infinite; }
  .gplat.is-hit .gplat__ring { animation: g-ring 1.9s ease-out 1; }
  .gplat.is-hit .gplat__ring + .gplat__ring { animation-delay: 0.4s; }
  .gcard.is-hit { animation: g-lift 1.9s ease-out 1; }
  .gcard.is-hit::after { animation: g-hit 1.9s ease-out 1; }
  .gcard.is-hit .gburst { animation: g-burst 1.1s ease-out 1; }
}

@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
  .grow-runway { position: relative; margin-top: calc(-1 * var(--total-run)); height: var(--total-run); }
  .grow {
    position: sticky;
    z-index: 13;
    top: var(--header-offset, var(--header-height));
    height: calc(100vh - var(--header-offset, var(--header-height)));
    min-height: 0;
    opacity: var(--grow-o, 1);
    pointer-events: none;
    --g: max(var(--gcl, 1), var(--gcla, 0));
  }
  .grow__world { scale: calc(1.14 - 0.14 * var(--g)); }
  .grow__kicker[data-k="1"] { opacity: var(--gk1, 1); translate: 0 calc((1 - var(--gk1, 1)) * 1.4cqw); }
  .grow__kicker .grow__kline { scale: var(--gk1, 1) 1; }
  .grow__lead[data-k="2"] { opacity: var(--gk2, 1); translate: 0 calc((1 - var(--gk2, 1)) * 1.6cqw); }
  .gw {
    --p: clamp(0, calc((var(--gt, 1) * 11 - var(--i)) / 3), 1);
    opacity: var(--p);
    translate: 0 calc((1 - var(--p)) * 1.5cqw);
    filter: blur(calc((1 - var(--p)) * 0.7cqw));
  }
  .grow__clouds { display: block; position: absolute; inset: 0; z-index: 6; overflow: hidden; pointer-events: none; }
  .gcl { position: absolute; left: 0; width: 100%; will-change: transform, opacity; }
  .gcl--fog { top: 0; height: 100%; object-fit: cover; scale: calc(1 + 1.6 * var(--g)); opacity: clamp(0, calc(1.25 - var(--g) * 1.6), 1); }
  .gcl--top { top: 0; height: auto; translate: 0 calc(-120% * var(--g)); }
  .gcl--bot { bottom: 0; height: auto; translate: 0 calc(120% * var(--g)); }
  .grow.is-off .gcl { display: none; }
}

@media (max-width: 980px) {
  .grow { min-height: auto; padding: 60px 0 72px; }
  .grow__sky { container-type: normal; }
  .grow__world { width: 100%; height: 100%; aspect-ratio: auto; left: 0; top: 0; translate: none; }
  .grow__bg { object-fit: cover; object-position: 70% 30%; opacity: 0.85; }
  .grow__sun, .grow__rays, .grow__falls, .gtw, .grow__motes { display: none; }
  .grow__stage { position: relative; left: auto; top: auto; width: auto; aspect-ratio: auto; translate: none; padding: 0 clamp(20px, 5vw, 56px); display: block; container-type: normal; }
  .grow__kicker, .grow__title, .grow__lead, .gplat, .gcard, .grow__foot { position: static; }
  .grow__kicker { font-size: 0.74rem; margin-bottom: 14px; }
  .grow__kline { width: 40px; }
  .grow__title { font-size: clamp(2rem, 8.4vw, 2.7rem); margin-bottom: 14px; }
  .gl { white-space: normal; display: inline; }
  .grow__lead { width: auto; font-size: 1.05rem; line-height: 1.4; margin-bottom: 26px; }
  .grow__path { display: none; }
  .gstep { display: block; margin-bottom: 26px; }
  .gplat { width: min(88%, 460px) !important; margin: 0 auto; }
  .gcard { height: auto; width: auto !important; padding: 18px 16px; margin: -8px 0 0; }
  .gcard h3 { font-size: 1.35rem; }
  .gcard p { font-size: 0.92rem; margin-top: 6px; }
  .grow__foot { flex-direction: column; text-align: center; margin-top: 8px; }
  .grow__fl { display: none; }
  .grow__foot b { white-space: normal; font-size: 1.15rem; }
}

/* ---------------------------------------------------------------------
   Section 10 · Soluciones a medida
   Not a closing: it explains how we work in three glass cards (review the customer journey -> agree
   the priority -> build in stages). Coming in, coloured blobs sweep in from the corners and shrink back
   (scroll-linked); then everything lands on a timer and each card keeps telling its little story:
   the journey chips light up in turn, the priority marker moves down the list, the checklist ticks
   itself and the stages light up one after another. Blue and coral (no purple).
   Drawn on a 1672x941 stage; each card has its own container so its artwork scales with it.
   --------------------------------------------------------------------- */
.solu {
  --hand: "Segoe Script", "Bradley Hand", "Brush Script MT", "Snell Roundhand", cursive;
  --blue: #3b62ff;
  --coral: #ff7a63;
  position: relative;
  min-height: calc(100vh - var(--header-height));
  overflow: hidden;
  background: linear-gradient(180deg, #fcfaf6 0%, #f6f3ee 100%);
  color: #10123a;
}
.solu__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sblob { position: absolute; }
.sblob--tl { left: 6.4%; top: -11%; width: 19.5%; height: 21%; border-radius: 42% 58% 55% 45% / 22% 30% 70% 78%; background: linear-gradient(140deg, #1f43e6, #3e66ff 70%, #5f86ff); transform-origin: 30% 0; }
.sblob--coral { left: 76.6%; top: -9%; width: 10.6%; aspect-ratio: 1.2; border-radius: 45% 55% 60% 40% / 40% 45% 55% 60%; background: linear-gradient(160deg, #ffb29f, #ff8f76); transform-origin: 50% 0; }
.sblob--tr { right: -3%; top: -8%; width: 12%; height: 13%; border-radius: 50%; background: linear-gradient(160deg, #cbd8ff, #dfe7ff); transform-origin: 80% 10%; }
.sblob--left { left: -7%; top: 20.5%; width: 15%; height: 24%; border-radius: 50%; background: linear-gradient(150deg, #c9d7ff, #e4ebff); transform-origin: 10% 50%; }
.sblob--bl { left: -6%; top: 82%; width: 21%; height: 24%; border-radius: 48% 52% 40% 60% / 50% 50% 50% 50%; background: linear-gradient(150deg, #1b3fd6, #3b62ff 75%); transform-origin: 20% 90%; }
.sblob--bm { left: 5%; top: 95%; width: 33%; height: 14%; border-radius: 50%; background: linear-gradient(180deg, #9db4ff, #b9c9ff); transform-origin: 50% 100%; }
.sblob--br { right: -9%; top: 80%; width: 28%; height: 28%; border-radius: 50%; background: linear-gradient(200deg, #d3dcff, #e6ecff); transform-origin: 90% 90%; }

.solu__stage {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: min(100%, calc((100vh - var(--header-height)) * 1.777));
  aspect-ratio: 1672 / 941;
  translate: -50% -50%;
  container-type: inline-size;
}

/* headline */
.solu__kicker { position: absolute; left: 0; right: 0; top: 4.5%; margin: 0; text-align: center; font-size: 1.1cqw; font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase; color: #2f56f5; }
.solu__title { position: absolute; left: 0; right: 0; top: 8.3%; margin: 0; text-align: center; font-size: 3cqw; line-height: 1.1; font-weight: 800; letter-spacing: -0.045em; color: #0d0d3a; }
.sl { display: block; white-space: nowrap; }
.sw { display: inline-block; padding: 0.02em 0.04em 0.24em; margin: 0 -0.04em -0.24em; }
.solu__lead { position: absolute; left: 0; right: 0; top: 21.2%; margin: 0; text-align: center; font-size: 1.6cqw; line-height: 1.26; color: #3c4060; }
.solu__hand { position: absolute; left: 89.6%; top: 8.3%; margin: 0; rotate: -12deg; font-family: var(--hand); font-style: italic; font-size: 1.5cqw; line-height: 1.22; color: #4a6bff; white-space: nowrap; }
.solu__hand i { display: block; width: 5.4cqw; height: 2px; margin: 0.9cqw 0 0 -0.4cqw; border-radius: 2px; background: #4a6bff; rotate: -9deg; }
.scorner { position: absolute; z-index: 4; margin: 0; display: flex; flex-direction: column; gap: 0.5cqw; font-size: 0.78cqw; font-weight: 500; letter-spacing: 0.34em; text-transform: uppercase; }
.scorner--tl { left: 2.2%; top: 6.8%; color: #c39a8c; }
.scorner--br { right: 2.5%; bottom: 4.2%; text-align: right; color: #97a4cc; opacity: var(--zcr, 1); }

/* the three cards */
.zcard { position: absolute; container-type: inline-size; aspect-ratio: 510 / 433; }
.zcard--1 { left: 2.27%; top: 31%; width: 30.5%; }
.zcard--2 { left: 35.17%; top: 31.35%; width: 29.7%; }
.zcard--3 { left: 67.4%; top: 31%; width: 30.4%; }
.zcard__bg {
  position: absolute;
  inset: 0;
  border-radius: 6cqw;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(241, 244, 255, 0.72));
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 3cqw 7cqw rgba(80, 100, 200, 0.14), inset 0 0 0 1px rgba(170, 190, 245, 0.28);
  --v: 1;
  opacity: clamp(0, calc(var(--v) * 1.6), 1);
  translate: 0 calc((1 - var(--v)) * 9cqw);
  scale: calc(0.94 + 0.06 * var(--v));
}
.zcard--1 .zcard__bg { --v: var(--zp1, 1); }
.zcard--2 .zcard__bg { --v: var(--zp2, 1); }
.zcard--3 .zcard__bg { --v: var(--zp3, 1); }
.zhead { position: absolute; left: 10.8%; top: 3.7%; display: grid; grid-template-columns: 13.7cqw auto; column-gap: 4cqw; align-items: center; --v: 1; opacity: var(--v); translate: 0 calc((1 - var(--v)) * 4cqw); }
.zhead__n { grid-row: 1 / 3; display: grid; place-items: center; width: 13.7cqw; height: 13.7cqw; border-radius: 50%; color: #fff; font-size: 6.6cqw; font-weight: 700; box-shadow: 0 1.6cqw 3.4cqw rgba(60, 90, 220, 0.3), inset 0 0.5cqw 1cqw rgba(255, 255, 255, 0.4); }
.zhead h3 { margin: 0; align-self: end; font-size: 5.9cqw; line-height: 1.15; font-weight: 800; letter-spacing: -0.035em; color: #0d0d3a; white-space: nowrap; }
.zhead p { margin: 0.4cqw 0 0; align-self: start; font-size: 4.3cqw; color: #464a6e; white-space: nowrap; }
.zcard--1 .zhead { --v: var(--zh1, 1); }
.zcard--1 .zhead__n { background: linear-gradient(160deg, #9db3ff, #6f8cff); }
.zcard--2 .zhead { --v: var(--zh2, 1); left: 11.5%; top: 3.3%; }
.zcard--2 .zhead__n { background: linear-gradient(160deg, #b1c5ff, #86a2ff); }
.zcard--3 .zhead { --v: var(--zh3, 1); left: 11%; }
.zcard--3 .zhead__n { background: linear-gradient(160deg, #ffa590, #ff7f66); }

/* every object of a card pops in on its own */
.zo { position: absolute; --v: 1; opacity: clamp(0, calc(var(--v) * 1.8), 1); scale: calc(0.78 + 0.22 * var(--v)); translate: 0 calc((1 - var(--v)) * 5cqw); transform-origin: 50% 80%; }
.zo img { display: block; width: 100%; height: auto; }
.zcard--1 [data-z="a1"] { --v: var(--za1, 1); }
.zcard--1 [data-z="a2"] { --v: var(--za2, 1); }
.zcard--1 [data-z="a3"] { --v: var(--za3, 1); }
.zcard--1 [data-z="a4"] { --v: var(--za4, 1); }
.zcard--1 [data-z="a5"] { --v: var(--za5, 1); }
.zcard--1 [data-z="a6"] { --v: var(--za6, 1); }
.zcard--2 [data-z="b1"] { --v: var(--zb1, 1); }
.zcard--2 [data-z="b2"] { --v: var(--zb2, 1); }
.zcard--2 [data-z="b3"] { --v: var(--zb3, 1); }
.zcard--2 [data-z="b4"] { --v: var(--zb4, 1); }
.zcard--2 [data-z="b5"] { --v: var(--zb5, 1); }
.zcard--3 [data-z="c1"] { --v: var(--zc1, 1); }
.zcard--3 [data-z="c2"] { --v: var(--zc2, 1); }
.zcard--3 [data-z="c3"] { --v: var(--zc3, 1); }
.zcard--3 [data-z="c4"] { --v: var(--zc4, 1); }
.zcard--3 [data-z="c6"] { --v: var(--zc6, 1); }

/* card 1: the customer journey */
.zo--wa { left: 6.3%; top: 25.4%; width: 12.7%; z-index: 3; }
.zbadge { position: absolute; right: -8%; top: -8%; display: grid; place-items: center; width: 30%; aspect-ratio: 1; border-radius: 50%; background: #ff6a52; color: #fff; font-style: normal; font-size: 3.3cqw; font-weight: 800; box-shadow: 0 0 0 0.6cqw #fff; opacity: 0; scale: 0.4; }
.zbub { left: 19%; top: 29.6%; width: 21.6%; height: 16.6%; z-index: 2; border-radius: 3.4cqw; background: #fff; box-shadow: 0 2cqw 4.4cqw rgba(80, 100, 190, 0.2); }
.zbub span { position: absolute; left: 14%; height: 8%; border-radius: 1cqw; background: #cdd3e6; }
.zbub span:nth-child(1) { top: 34%; width: 66%; }
.zbub span:nth-child(2) { top: 56%; width: 46%; background: #b6c6ff; }
.zo--mail { left: 11.8%; top: 43%; width: 17%; z-index: 3; }
.zo--receipt { left: 37.3%; top: 37.6%; width: 24%; z-index: 3; rotate: 6deg; }
.zo--receipt b { position: absolute; left: 20%; top: 6%; font-size: 3.2cqw; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #4a4f6c; rotate: 8deg; }
.zo--box { left: 58.2%; top: 27.3%; width: 28.4%; z-index: 2; }
.zprof { left: 67.6%; top: 49.9%; width: 23%; height: 14.5%; z-index: 4; display: flex; align-items: center; gap: 2.6cqw; padding: 0 3cqw; border-radius: 3.4cqw; background: #fff; box-shadow: 0 2cqw 4.4cqw rgba(80, 100, 190, 0.22); }
.zprof i { flex: none; display: grid; place-items: center; width: 7.2cqw; height: 7.2cqw; border-radius: 50%; background: #3b62ff; }
.zprof i svg { width: 60%; height: 60%; }
.zprof span { display: block; height: 1.5cqw; border-radius: 1cqw; background: #cdd3e6; }
.zprof span:nth-of-type(1) { width: 6.6cqw; position: absolute; left: 13cqw; top: 5.6cqw; }
.zprof span:nth-of-type(2) { width: 4.4cqw; position: absolute; left: 13cqw; top: 8.6cqw; background: #b6c6ff; }
.zchip { position: absolute; z-index: 4; display: grid; place-items: center; height: 12.6%; border-radius: 99px; font-size: 4.3cqw; font-weight: 500; --v: 1; opacity: clamp(0, calc(var(--v) * 1.8), 1); scale: calc(0.7 + 0.3 * var(--v)); box-shadow: 0 1.6cqw 3.2cqw rgba(60, 90, 200, 0.2), inset 0 0.4cqw 0.9cqw rgba(255, 255, 255, 0.8); }
.zchip--1 { --v: var(--zf1, 1); left: 5.9%; top: 67.2%; width: 21.6%; background: linear-gradient(180deg, #e9f1ff, #cfe0ff); color: #2c56d8; }
.zchip--2 { --v: var(--zf2, 1); left: 36.1%; top: 71.1%; width: 21.6%; background: linear-gradient(180deg, #dfe8ff, #bccdff); color: #2f4fc4; }
.zchip--3 { --v: var(--zf3, 1); left: 67%; top: 74.6%; width: 25.9%; height: 12.2%; background: linear-gradient(180deg, #ffe3d9, #ffbfaa); color: #d2482c; }
.zarr { position: absolute; z-index: 4; width: 5.6%; height: auto; color: #4a6bff; }
.zarr--1 { left: 29.2%; top: 73.8%; }
.zarr--2 { left: 60%; top: 78%; }

/* card 2: the priority */
.zopt { --rh: 12cqw; --gap: 3cqw; --pad: 4.2cqw; left: 6.8%; top: 25.6%; width: 36.8%; height: 59%; z-index: 4; display: flex; flex-direction: column; justify-content: flex-start; gap: var(--gap); padding: var(--pad) 2cqw; border-radius: 4cqw; background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(239, 243, 255, 0.85)); box-shadow: 0 3cqw 6cqw rgba(80, 100, 200, 0.2), inset 0 0 0 1px rgba(170, 190, 245, 0.4); }
.zopt__row { position: relative; z-index: 1; margin: 0; display: flex; align-items: center; gap: 2.6cqw; height: var(--rh); padding: 0 2.4cqw; font-size: 3.5cqw; font-weight: 600; color: #1d2150; }
.zopt__ico { flex: none; display: grid; place-items: center; width: 5.6cqw; height: 5.6cqw; color: #3b62ff; }
.zopt__ico svg { width: 100%; height: 100%; }
.zopt__row b { flex: 1; font-weight: 600; }
.zopt__row em { flex: none; width: 4.4cqw; height: 4.4cqw; border-radius: 50%; border: 0.5cqw solid #c4cbe2; background: #fff; box-shadow: inset 0 0 0 0.7cqw #fff; transition: border-color 0.4s ease, background-color 0.4s ease; }
.zopt__hl { position: absolute; z-index: 0; left: 1.4cqw; right: 1.4cqw; top: var(--pad); height: var(--rh); border-radius: 3cqw; background: linear-gradient(180deg, #fff, #f0f4ff); box-shadow: 0 1.4cqw 3cqw rgba(60, 90, 220, 0.2), inset 0 0 0 1px rgba(150, 175, 250, 0.5); transition: translate 0.6s cubic-bezier(0.3, 1.3, 0.5, 1); }
.zopt[data-sel="0"] .zopt__row[data-i="0"] em, .zopt[data-sel="1"] .zopt__row[data-i="1"] em, .zopt[data-sel="2"] .zopt__row[data-i="2"] em { border-color: #3b62ff; background: #3b62ff; }
.zopt[data-sel="1"] .zopt__hl { translate: 0 calc(var(--rh) + var(--gap)); }
.zopt[data-sel="2"] .zopt__hl { translate: 0 calc(2 * (var(--rh) + var(--gap))); }
.zopt__row { transition: color 0.4s ease; }
.zo--podium { left: 31%; top: 72%; width: 44%; z-index: 1; }
.zo--compass { left: 44.7%; top: 50%; width: 33.2%; z-index: 5; }
.zo--sprig { left: 81.4%; top: 63%; width: 16.4%; z-index: 6; }
.zcheck { left: 67.8%; top: 21.6%; width: 33.2%; height: 32%; margin: 0; padding: 3cqw 4.4cqw; z-index: 3; list-style: none; rotate: 2.5deg; display: flex; flex-direction: column; justify-content: space-around; border-radius: 3cqw; background: linear-gradient(170deg, #ffffff, #f1f3fa); box-shadow: 0 2.4cqw 5cqw rgba(80, 90, 150, 0.22); font-family: var(--hand); font-style: italic; font-size: 3.5cqw; color: #2a2f57; }
.zcheck li { display: flex; align-items: center; gap: 2cqw; }
.zcheck svg { flex: none; width: 4.4cqw; height: 4.4cqw; }
.zcheck path { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 0.45s ease; }

/* card 3: the stages */
.zstairs { left: 4.5%; top: 60.5%; width: 86.6%; height: 35%; z-index: 1; }
.zstep { position: absolute; bottom: 0; display: block; background: linear-gradient(180deg, #ece7dc, #d3ccbe); box-shadow: inset 0 0.6cqw 1cqw rgba(255, 255, 255, 0.7), 0 1.8cqw 3cqw rgba(110, 90, 60, 0.32); border-radius: 0.8cqw; }
.zstep::before { content: ""; position: absolute; left: 0; right: 0; top: -3.2cqw; height: 3.4cqw; border-radius: 0.8cqw 0.8cqw 0 0; background: linear-gradient(180deg, #faf8f3, #e9e4d8); box-shadow: inset 0 0 0 1px rgba(150, 140, 120, 0.25); transform: skewX(-24deg); transform-origin: 0 100%; }
.zstep::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0.32; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .45 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); pointer-events: none; }
.zstep b { position: absolute; left: 0; right: 0; bottom: 22%; text-align: center; font-size: 2.5cqw; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: #6a665f; rotate: -5deg; }
.zstep--1 { left: 0; width: 44%; height: 34%; }
.zstep--2 { left: 44%; width: 27%; height: 62%; }
.zstep--3 { left: 71%; width: 29%; height: 92%; }
.ztile { z-index: 3; }
/* the name sits above its piece: the icon fills the whole face, so a caption on it would be covered */
.ztile b { position: absolute; left: 50%; top: 2%; translate: -50% -100%; padding: 0.9cqw 2.6cqw; border-radius: 99px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 1.2cqw 2.6cqw rgba(60, 90, 200, 0.2), inset 0 0 0 1px rgba(150, 175, 245, 0.4); font-size: 3cqw; font-weight: 600; letter-spacing: -0.01em; color: #1d2150; white-space: nowrap; }
.ztile--1 { left: 11%; top: 51.7%; width: 26.6%; }
.ztile--2 { left: 36%; top: 40.2%; width: 25.6%; }
.ztile--3 { left: 59.6%; top: 28.6%; width: 25.6%; }
.ztile--3 b { font-size: 2.8cqw; }
.zgrow { left: 84.8%; top: 25%; width: 13.8%; height: auto; overflow: visible; z-index: 3; }
.zgrow path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--zc5, 1)); }
.zo--sprig2 { left: 88.6%; top: 50%; width: 12%; z-index: 4; transform: scaleX(-1); }

/* the ribbons joining the cards */
.zrib { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.zrib__p { fill: none; stroke-width: 26; stroke-linecap: round; stroke-dasharray: 1; }
.zrib__p--1 { stroke-dashoffset: calc(1 - var(--zr1, 1)); }
.zrib__p--2 { stroke-dashoffset: calc(1 - var(--zr2, 1)); }
.zrib__f { fill: none; stroke: rgba(255, 255, 255, 0.85); stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 0.02 0.09; opacity: 0; }

/* closing line (not a closing: no button) */
.solu__foot { position: absolute; z-index: 5; left: 0; right: 0; top: 81.9%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.9cqw; opacity: var(--zfoot, 1); translate: 0 calc((1 - var(--zfoot, 1)) * 1.6cqw); }
.solu__foot p { margin: 0; font-size: 2.02cqw; line-height: 1.09; font-weight: 800; letter-spacing: -0.035em; color: #0d0d3a; }
.solu__foot em { font-style: normal; color: #1f4ff0; }
.solu__foot i { display: block; width: 5.3cqw; height: 2px; border-radius: 2px; background: #8d93a8; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes z-sway { 0%, 100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.4deg); } }
  @keyframes z-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.4cqw); } }
  @keyframes z-flow { to { stroke-dashoffset: -0.11; } }
  @keyframes z-badge { 0% { opacity: 0; scale: 0.3; } 18% { opacity: 1; scale: 1.15; } 30%, 78% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 0.6; } }
  @keyframes z-hit { 0% { transform: translateY(0) scale(1); } 30% { transform: translateY(-2cqw) scale(1.06); } 100% { transform: translateY(0) scale(1); } }
  @keyframes z-glow { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes z-arrow { 0%, 100% { translate: 0 0; } 50% { translate: 0.9cqw 0; } }
  @keyframes z-blob { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(0.7cqw, 0.8cqw); } }
  @keyframes z-needle { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(-7deg); } 60% { transform: rotate(4deg); } }

  .solu.is-live .zo--compass img { animation: z-needle 7s ease-in-out infinite; transform-origin: 50% 55%; }
  .solu.is-live .zo--sprig img { animation: z-sway 5s ease-in-out infinite; transform-origin: 50% 100%; }
  .solu.is-live .zo--sprig2 img { animation: z-sway 5.6s ease-in-out infinite reverse; transform-origin: 50% 100%; }
  .solu.is-live .zo--box img { animation: z-bob 6s ease-in-out infinite; }
  .solu.is-live .zo--receipt img { animation: z-bob 7s ease-in-out infinite; animation-delay: -2s; }
  .solu.is-live .zrib__f { opacity: 1; animation: z-flow 1.8s linear infinite; }
  .solu.is-live .zarr { animation: z-arrow 1.6s ease-in-out infinite; }
  .zbadge.is-pop { animation: z-badge 2.6s ease-out 1 both; }
  .zchip.is-on { box-shadow: 0 0 0 0.9cqw rgba(74, 107, 255, 0.28), 0 1.6cqw 3.2cqw rgba(60, 90, 200, 0.3), inset 0 0.4cqw 0.9cqw rgba(255, 255, 255, 0.8); transition: box-shadow 0.4s ease; }
  .zchip--3.is-on { box-shadow: 0 0 0 0.9cqw rgba(255, 122, 99, 0.3), 0 1.6cqw 3.2cqw rgba(255, 106, 82, 0.3), inset 0 0.4cqw 0.9cqw rgba(255, 255, 255, 0.8); }
  .ztile.is-hit img { animation: z-hit 1.1s ease-out 1; }
  .ztile.is-hit::after { content: ""; position: absolute; inset: 4% 4% 10%; border-radius: 22%; box-shadow: 0 0 5cqw rgba(74, 107, 255, 0.7); animation: z-glow 1.1s ease-out 1; pointer-events: none; }
  .ztile--3.is-hit::after { box-shadow: 0 0 5cqw rgba(255, 122, 99, 0.7); }
  .solu.is-live .sblob--coral { animation: z-blob 9s ease-in-out infinite; }
  .solu.is-live .sblob--tl { animation: z-blob 11s ease-in-out infinite reverse; }
}

@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
  .sol-runway { position: relative; margin-top: calc(-1 * var(--total-run)); height: var(--total-run); }
  .solu {
    position: sticky;
    z-index: 14;
    top: var(--header-offset, var(--header-height));
    height: calc(100vh - var(--header-offset, var(--header-height)));
    min-height: 0;
    opacity: var(--std-o, 1);
    pointer-events: none;
    --b: var(--sbl, 1);
  }
  .sblob { scale: calc(1 + (1 - var(--b)) * 3.6); }
  .solu__kicker[data-z="k"] { opacity: var(--zk, 1); translate: 0 calc((1 - var(--zk, 1)) * 1.2cqw); }
  .solu__lead[data-z="lead"] { opacity: var(--zlead, 1); translate: 0 calc((1 - var(--zlead, 1)) * 1.4cqw); }
  .solu__hand[data-z="hand"] { opacity: var(--zhand, 1); }
  .scorner--tl { opacity: var(--ztl, 1); }
  .sw {
    --p: clamp(0, calc((var(--zt, 1) * 13 - var(--i)) / 3), 1);
    opacity: var(--p);
    translate: 0 calc((1 - var(--p)) * 1.6cqw);
    filter: blur(calc((1 - var(--p)) * 0.6cqw));
  }
  .zcheck li:not(.is-on) path { stroke-dashoffset: 1; }
  .zrib__p--1, .zrib__p--2 { transition: none; }
}

@media (max-width: 980px) {
  .solu { min-height: auto; padding: 56px 0 72px; }
  .solu__bg { display: none; }
  .solu__stage { position: relative; left: auto; top: auto; width: auto; aspect-ratio: auto; translate: none; padding: 0 clamp(16px, 4vw, 48px); display: block; container-type: normal; }
  .zrib, .solu__hand, .scorner { display: none; }
  .solu__kicker, .solu__title, .solu__lead, .solu__foot { position: static; }
  .solu__kicker { font-size: 0.74rem; margin-bottom: 12px; }
  .solu__title { font-size: clamp(1.9rem, 8vw, 2.5rem); margin-bottom: 14px; }
  .sl { white-space: normal; display: inline; }
  .solu__lead { font-size: 1.02rem; margin-bottom: 26px; }
  .zcard { position: relative; left: auto; top: auto; width: min(100%, 560px); margin: 0 auto 22px; }
  .solu__foot { margin-top: 30px; }
  .solu__foot p { font-size: 1.25rem; }
}

/* ---------------------------------------------------------------------
   Section 11 · Empresas y proyectos
   Three brand cards (Yengle, Vaenty, Xtronger). Pointing at one (or tapping it on a phone) lifts it, gives it
   a blue border and a "Vista previa" tag, dims the others a little and unfolds, right under them, a mini view
   of that brand's real site; choosing another brand folds it away and unfolds the new one. The brand names are
   white logos, so the cards are navy. Coming in, big shapes sweep in and settle (scroll-linked); until someone
   interacts, the three brands are shown in turn so the idea is clear. Blue, navy and coral.
   Drawn on a 1672x941 stage and sized with container units (cqw).
   --------------------------------------------------------------------- */
.prj {
  --hand: "Segoe Script", "Bradley Hand", "Brush Script MT", "Snell Roundhand", cursive;
  --navy: #101b4d;
  --blue: #1f5cff;
  --coral: #ff5a45;
  position: relative;
  min-height: calc(100vh - var(--header-height));
  overflow: hidden;
  background: #fbfcff;
  color: #0d1440;
}
.prj__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.jshape { position: absolute; }
.jshape--blue { left: -1%; top: 20.5%; width: 34%; height: 80%; background: linear-gradient(165deg, #0a55ff, #1a63ff 55%, #0b45e6); clip-path: polygon(0 0, 72% 48%, 100% 74%, 100% 100%, 0 100%); transform-origin: 0 100%; }
.jshape--navy { left: 21%; top: 53%; width: 11%; height: 47%; background: linear-gradient(180deg, #101b4d, #0a1338); clip-path: polygon(0 0, 100% 34%, 96% 100%, 30% 100%); transform-origin: 30% 100%; }
.jshape--rblue { right: -1%; top: -1%; width: 16%; height: 64%; background: linear-gradient(200deg, #0a55ff, #1a63ff 60%, #0d4ae8); clip-path: polygon(46% 0, 100% 0, 100% 100%, 20% 86%, 0 46%); transform-origin: 100% 0; }
.jshape--rnavy { right: -1%; top: 62%; width: 42%; height: 40%; background: linear-gradient(200deg, #16246a, #0a1338); clip-path: polygon(38% 22%, 100% 0, 100% 100%, 0 100%, 14% 60%); transform-origin: 100% 100%; }
.jshape--coral { left: 68%; top: -26%; width: 25%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(170deg, #ff6a55, #ff4d3a); transform-origin: 50% 0; }

.prj__stage {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: min(100%, calc((100vh - var(--header-height)) * 1.777));
  aspect-ratio: 1672 / 941;
  translate: -50% -50%;
  container-type: inline-size;
}
.prj__kicker { position: absolute; left: 0; right: 0; top: 7.4%; margin: 0; text-align: center; font-size: 1.05cqw; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase; color: #2451e6; }
.prj__title { position: absolute; left: 0; right: 0; top: 11.2%; margin: 0; text-align: center; font-size: 3.5cqw; line-height: 1.1; font-weight: 800; letter-spacing: -0.045em; color: #0b0b2e; white-space: nowrap; }
.jw { display: inline-block; padding: 0.02em 0.04em 0.24em; margin: 0 -0.04em -0.24em; }
.prj__lead { position: absolute; left: 0; right: 0; top: 18.8%; margin: 0; text-align: center; font-size: 1.62cqw; color: #4a5378; }
.jnote { position: absolute; z-index: 4; margin: 0; font-family: var(--hand); font-style: italic; white-space: nowrap; line-height: 1.2; }
.jnote--l { left: 3.9%; top: 5.4%; rotate: -15deg; font-size: 2.15cqw; color: #14204f; }
.jnote--l svg { position: absolute; left: 34%; top: 108%; width: 3.2cqw; height: auto; color: #14204f; rotate: 12deg; }
.jnote--r { left: 86.4%; top: 14.2%; rotate: -14deg; font-size: 1.75cqw; color: #14204f; text-align: left; }
.jnote--r i { display: block; width: 5.6cqw; height: 0.5cqw; margin: 0.2cqw 0 0 5.4cqw; border-radius: 1cqw; background: #ff5a45; rotate: -14deg; }

/* the three brand cards */
.jcards { position: absolute; z-index: 5; left: 0; right: 0; top: 29.3%; height: 16.5%; }
.jcard {
  position: absolute;
  top: 0;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 2.6cqw;
  background: linear-gradient(160deg, #1a2866, #0f1a48 70%);
  border: 1px solid rgba(130, 160, 255, 0.35);
  box-shadow: 0 2cqw 4.6cqw rgba(15, 30, 100, 0.28), inset 0 0.2cqw 0.6cqw rgba(255, 255, 255, 0.14);
  text-decoration: none;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: translate 0.45s cubic-bezier(0.3, 1.2, 0.5, 1), scale 0.45s cubic-bezier(0.3, 1.2, 0.5, 1), opacity 0.4s ease, filter 0.4s ease, border-color 0.3s ease, box-shadow 0.4s ease;
}
.jcard img { display: block; width: var(--lw, 62%); height: auto; max-height: 52%; object-fit: contain; translate: 0 8%; }
.jcard--yengle { left: 9.8%; width: 24.2%; }
.jcard--vaenty { left: 35.8%; width: 28.4%; }
.jcard--xtronger { left: 66%; width: 24.4%; }
.jcard__ext { position: absolute; right: 5.4%; top: 11%; width: 1.9cqw; height: 1.9cqw; color: rgba(200, 215, 255, 0.75); }
.jcard__ext svg { display: block; width: 100%; height: 100%; }
.jcard__pill { position: absolute; right: 8.6%; top: 9%; padding: 0.5cqw 1.6cqw; border-radius: 99px; background: #1f5cff; color: #fff; font-size: 1.25cqw; font-weight: 600; opacity: 0; translate: 0 0.8cqw; transition: opacity 0.35s ease, translate 0.35s ease; pointer-events: none; }
.jcard__pill + .jcard__ext { right: 3%; }
.jcard:focus-visible { outline: 3px solid #7ea0ff; outline-offset: 4px; }
.jcard.is-sel { translate: 0 -1.1cqw; scale: 1.045; border-color: #3f7bff; box-shadow: 0 0 0 0.28cqw #3f7bff, 0 2.6cqw 5.6cqw rgba(30, 80, 255, 0.4), inset 0 0.2cqw 0.6cqw rgba(255, 255, 255, 0.2); }
.jcard.is-sel .jcard__pill { opacity: 1; translate: 0 0; }
.jcards.has-sel .jcard:not(.is-sel) { opacity: 0.62; filter: saturate(0.75); }

/* the mini site that unfolds under the cards */
.jview { position: absolute; z-index: 4; left: 30.4%; top: 47.6%; width: 39.2%; aspect-ratio: 657 / 428; pointer-events: none; opacity: 0; clip-path: inset(0 0 100% 0 round 2cqw); translate: 0 -1.6cqw; transition: clip-path 0.6s cubic-bezier(0.3, 0.9, 0.3, 1), opacity 0.35s ease, translate 0.6s cubic-bezier(0.3, 0.9, 0.3, 1); }
.jview.is-open { opacity: 1; clip-path: inset(0 0 0 0 round 2cqw); translate: 0 0; pointer-events: auto; }
.jv { position: absolute; inset: 0; container-type: inline-size; display: flex; flex-direction: column; border-radius: 2cqw; background: #fff; box-shadow: 0 2.4cqw 6cqw rgba(15, 30, 100, 0.3), 0 0 0 1px rgba(120, 140, 220, 0.2); overflow: hidden; opacity: 0; visibility: hidden; }
.jv.is-on { opacity: 1; visibility: visible; }
.jv__chrome { flex: none; display: flex; align-items: center; gap: 1cqw; height: 5.2cqw; padding: 0 2.4cqw; background: #eef1f8; }
.jv__chrome i { width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: #ff6a5a; }
.jv__chrome i:nth-child(2) { background: #ffc247; }
.jv__chrome i:nth-child(3) { background: #3ecf6b; }
.jv__chrome span { margin-left: 2.4cqw; padding: 0.55cqw 3.4cqw; border-radius: 99px; background: #fff; font-size: 1.5cqw; color: #6a7090; }
.jv__view { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #0b0f24; }
.jv__shot { position: absolute; left: 0; top: 0; width: 100%; height: auto; display: block; }
/* button and hint under the preview */
.jbtn { position: absolute; z-index: 6; left: 50%; top: 91.3%; translate: -50% 0.8cqw; display: inline-flex; align-items: center; gap: 0.8cqw; padding: 0.75cqw 2cqw; border-radius: 99px; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(60, 100, 230, 0.45); box-shadow: 0 0.8cqw 2cqw rgba(30, 60, 160, 0.16); color: #1f4ff0; font-size: 1.25cqw; font-weight: 600; text-decoration: none; opacity: 0; pointer-events: none; transition: opacity 0.35s ease, translate 0.35s ease, background-color 0.25s ease, color 0.25s ease; }
.jbtn i { display: block; width: 1.5cqw; height: 1.5cqw; }
.jbtn i svg { display: block; width: 100%; height: 100%; }
.jbtn.is-show { opacity: 1; translate: -50% 0; pointer-events: auto; }
.jbtn:hover, .jbtn:focus-visible { background: #1f5cff; color: #fff; outline: none; }
.jhint { position: absolute; z-index: 3; left: 30.4%; top: 47.6%; width: 39.2%; aspect-ratio: 657 / 428; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5cqw; border: 2px dashed rgba(31, 92, 255, 0.32); border-radius: 2cqw; background: rgba(255, 255, 255, 0.92); font-size: 1.4cqw; color: #3a4270; text-align: center; transition: opacity 0.4s ease; }
.jhint i { display: block; width: 2cqw; height: 2.8cqw; color: #1f4ff0; }
.jhint i svg { display: block; width: 100%; height: 100%; }
.jhint__b { display: none; }
.jhint.is-hidden { opacity: 0; pointer-events: none; }
@media (hover: none) {
  .jhint__a { display: none; }
  .jhint__b { display: inline; }
}

/* decoration */
.jbig { position: absolute; z-index: 4; left: 2.9%; top: 62.4%; margin: 0; rotate: -9deg; transform-origin: 0 100%; font-size: 3.95cqw; line-height: 0.98; font-weight: 900; font-style: italic; letter-spacing: -0.03em; text-transform: uppercase; color: #fff; }
.jbig i { display: block; width: 12.4cqw; height: 0.75cqw; margin: 0.8cqw 0 0 0.6cqw; border-radius: 1cqw; background: #ff5a45; }
.jimpact { position: absolute; z-index: 4; left: 88.9%; top: 82.4%; margin: 0; font-family: var(--hand); font-style: italic; font-size: 2.6cqw; line-height: 1; color: #f2f5ff; rotate: -8deg; }
.jimpact svg { display: block; width: 6cqw; height: auto; margin: 0.4cqw 0 0 -1cqw; color: #f2f5ff; }
.jticks { position: absolute; z-index: 3; left: 79.2%; top: 62%; width: 5cqw; height: 5cqw; }
.jticks i { position: absolute; left: 50%; top: 50%; width: 3.6cqw; height: 0.72cqw; border-radius: 0.4cqw; background: #ff5a45; transform-origin: 0 50%; }
.jticks i:nth-child(1) { transform: rotate(-58deg); }
.jticks i:nth-child(2) { transform: rotate(-62deg) translate(1.5cqw, 1.6cqw); }
.jticks i:nth-child(3) { transform: rotate(-52deg) translate(3.2cqw, 3.4cqw); }

@media (prefers-reduced-motion: no-preference) {
  @keyframes j-in { from { opacity: 0; translate: 0 2.2cqw; } to { opacity: 1; translate: 0 0; } }
  @keyframes j-note { 0%, 100% { transform: rotate(-1deg); } 50% { transform: rotate(1deg); } }
  @keyframes j-blob { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(0.6cqw, 0.8cqw); } }

  /* the real page scrolls by itself: cover, search and products, then back up */
  @keyframes j-pan { 0%, 16% { transform: translateY(0); } 46%, 66% { transform: translateY(var(--pan, -50%)); } 96%, 100% { transform: translateY(0); } }
  .jv.is-on .jv__shot { animation: j-pan 12s cubic-bezier(0.45, 0, 0.35, 1) infinite; }
  .jv.is-on .jv__chrome { animation: j-in 0.5s 0.25s ease-out both; }
  .jv.is-on .jv__view { animation: j-in 0.6s 0.4s ease-out both; }
  .prj.is-live .jnote--l, .prj.is-live .jnote--r { animation: j-note 6s ease-in-out infinite; }
  .prj.is-live .jshape--coral { animation: j-blob 9s ease-in-out infinite; }
}

@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
  .prj-runway { position: relative; margin-top: calc(-1 * var(--total-run)); height: var(--total-run); }
  .prj {
    position: sticky;
    z-index: 15;
    top: var(--header-offset, var(--header-height));
    height: calc(100vh - var(--header-offset, var(--header-height)));
    min-height: 0;
    opacity: var(--prj-o, 1);
    pointer-events: none;
    --b: var(--jbl, 1);
  }
  .jshape { scale: calc(1 + (1 - var(--b)) * 2.2); }
  .prj__kicker[data-j="k"] { opacity: var(--jk, 1); translate: 0 calc((1 - var(--jk, 1)) * 1.2cqw); }
  .prj__lead[data-j="lead"] { opacity: var(--jlead, 1); translate: 0 calc((1 - var(--jlead, 1)) * 1.4cqw); }
  .jnote--l { opacity: var(--jnl, 1); }
  .jnote--r { opacity: var(--jnr, 1); }
  .jbig { opacity: var(--jcl, 1); translate: calc((1 - var(--jcl, 1)) * -4cqw) 0; }
  .jimpact { opacity: var(--jcr, 1); }
  .jticks { opacity: var(--jcr, 1); }
  .jhint[data-j="hint"] { opacity: var(--jhint, 1); }
  .jhint.is-hidden { opacity: 0; }
  .jw {
    --p: clamp(0, calc((var(--jt, 1) * 8 - var(--i)) / 3), 1);
    opacity: var(--p);
    translate: 0 calc((1 - var(--p)) * 1.6cqw);
    filter: blur(calc((1 - var(--p)) * 0.6cqw));
  }
  .jcard { opacity: clamp(0, calc(var(--jc, 1) * 1.8), 1); }
  .jcard--yengle { --jc: var(--jc0, 1); }
  .jcard--vaenty { --jc: var(--jc1, 1); }
  .jcard--xtronger { --jc: var(--jc2, 1); }
  .jcards:not(.has-sel) .jcard { translate: 0 calc((1 - var(--jc, 1)) * 5cqw); }
  .jcards.has-sel .jcard:not(.is-sel) { opacity: 0.62; }
}

@media (max-width: 980px) {
  .prj { min-height: auto; padding: 56px 0 72px; background: linear-gradient(180deg, #fbfcff, #eaf0ff); }
  .prj__bg { display: none; }
  .prj__stage { position: relative; left: auto; top: auto; width: auto; aspect-ratio: auto; translate: none; padding: 0 clamp(16px, 4vw, 40px); display: block; container-type: normal; }
  .jnote, .jbig, .jimpact, .jticks { display: none; }
  .prj__kicker, .prj__title, .prj__lead { position: static; }
  .prj__kicker { font-size: 0.74rem; margin-bottom: 12px; }
  .prj__title { font-size: clamp(1.9rem, 8vw, 2.6rem); white-space: normal; margin-bottom: 12px; }
  .prj__lead { font-size: 1.02rem; margin-bottom: 24px; }
  .jcards { position: relative; left: auto; right: auto; top: auto; height: auto; display: grid; gap: 14px; }
  .jcard { position: relative; left: auto !important; width: auto !important; height: 96px; }
  .jcard__ext { width: 18px; height: 18px; }
  .jcard__pill { font-size: 0.72rem; padding: 4px 12px; }
  .jview { position: relative; left: auto; top: auto; width: 100%; margin-top: 16px; display: none; }
  .jview.is-open { display: block; }
  .jbtn { position: relative; left: auto; top: auto; translate: none; display: none; margin: 16px auto 0; font-size: 0.95rem; padding: 12px 22px; }
  .jbtn.is-show { display: flex; width: max-content; translate: none; }
  .jhint { position: static; width: auto; aspect-ratio: auto; margin-top: 8px; padding: 26px 16px; border-radius: 18px; font-size: 0.95rem; gap: 10px; }
  .jhint i { width: 22px; height: 30px; }
  .jhint.is-hidden { display: none; }
}

/* ---------------------------------------------------------------------
   Backgrounds of sections 03, 04 and 05: depth and light on top of the dark grid.
   Glowing orbs that drift, a floor that runs towards you, beams of light, rising sparks,
   radar rings and a scanning line. Only transforms and opacity move (cheap for the GPU) and
   a scene that is off screen stops painting them (.is-off).
   --------------------------------------------------------------------- */
.fx-orb { position: absolute; left: var(--x); top: var(--y); width: var(--w); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, var(--c), transparent 72%); opacity: var(--o, 1); pointer-events: none; }
.fx-bokeh i { position: absolute; left: var(--x); top: var(--y); width: var(--w); aspect-ratio: 1; border-radius: 50%; border: 1.5px solid rgba(150, 205, 255, 0.3); background: radial-gradient(circle at 34% 30%, rgba(170, 215, 255, 0.2), rgba(90, 150, 255, 0.04) 62%, transparent 72%); pointer-events: none; }
.fx-vig { position: absolute; inset: 0; background: radial-gradient(ellipse 85% 75% at 50% 48%, transparent 52%, rgba(2, 6, 22, 0.6) 100%); pointer-events: none; }
.fx-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; perspective: 640px; perspective-origin: 50% 0%; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(70, 150, 255, 0.3), transparent 72%); -webkit-mask-image: linear-gradient(180deg, transparent, #000 28%); mask-image: linear-gradient(180deg, transparent, #000 28%); }
.fx-floor i { position: absolute; left: -60%; right: -60%; top: 0; height: 260%; transform-origin: 50% 0; transform: rotateX(68deg); background: linear-gradient(90deg, rgba(100, 170, 255, 0.34) 1px, transparent 1px) 0 0 / 72px 72px, linear-gradient(0deg, rgba(100, 170, 255, 0.34) 1px, transparent 1px) 0 0 / 72px 72px; }
.fx-beam { position: absolute; left: -34%; top: var(--y); width: 36%; height: 2px; rotate: var(--r); opacity: 0; background: linear-gradient(90deg, transparent, rgba(110, 180, 255, 0.35) 40%, rgba(170, 220, 255, 0.95) 88%, #fff 96%, transparent); pointer-events: none; }
.fx-dots i { position: absolute; left: var(--x); top: var(--y); width: calc(var(--s) * 4px); aspect-ratio: 1; border-radius: 50%; background: var(--dc, rgba(160, 205, 255, 0.95)); box-shadow: 0 0 10px var(--dc, rgba(110, 170, 255, 0.85)); opacity: 0; }
.fx-dots { --dc: rgba(160, 205, 255, 0.95); }
.fx-stars i { position: absolute; left: var(--x); top: var(--y); width: calc(var(--s) * 3px); aspect-ratio: 1; border-radius: 50%; background: #dff0ff; box-shadow: 0 0 8px rgba(160, 210, 255, 0.9); opacity: 0.25; }
.fx-rings { position: absolute; left: var(--x); top: var(--y); width: var(--w); aspect-ratio: 1; translate: -50% -50%; pointer-events: none; }
.fx-rings i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(120, 185, 255, 0.5); box-shadow: 0 0 24px rgba(80, 150, 255, 0.25), inset 0 0 24px rgba(80, 150, 255, 0.12); opacity: 0.16; }
.fx-scan { position: absolute; top: 0; bottom: 0; left: -14%; width: 14%; background: linear-gradient(90deg, transparent, rgba(100, 170, 255, 0.08) 55%, rgba(160, 215, 255, 0.24) 96%, transparent); pointer-events: none; }
.fx-rays { position: absolute; left: var(--x); top: var(--y); width: var(--w); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(120, 185, 255, 0.15) 0 3.5deg, transparent 3.5deg 15deg); -webkit-mask: radial-gradient(closest-side, #000 18%, transparent 74%); mask: radial-gradient(closest-side, #000 18%, transparent 74%); pointer-events: none; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes fx-drift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(4%, -5%) scale(1.14); } }
  @keyframes fx-floor { from { transform: rotateX(68deg) translateY(0); } to { transform: rotateX(68deg) translateY(72px); } }
  @keyframes fx-beam { 0% { opacity: 0; translate: 0 0; } 12% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; translate: 330% 0; } }
  @keyframes fx-rise { 0% { opacity: 0; transform: translateY(0); } 14% { opacity: 0.9; } 100% { opacity: 0; transform: translateY(-190px); } }
  @keyframes fx-twinkle { 0%, 100% { opacity: 0.12; scale: 0.7; } 50% { opacity: 1; scale: 1.25; } }
  @keyframes fx-ring { 0% { scale: 0.22; opacity: 0.75; } 100% { scale: 1.55; opacity: 0; } }
  @keyframes fx-scan { from { translate: 0 0; } to { translate: 830% 0; } }
  @keyframes fx-spin { to { rotate: 360deg; } }

  @keyframes fx-bokeh { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.55; } 50% { transform: translate(-3cqw, 4cqw) scale(1.12); opacity: 1; } }
  .fx-bokeh i { animation: fx-bokeh var(--d, 20s) ease-in-out infinite; animation-delay: var(--dl, 0s); }
  .fx-orb { animation: fx-drift var(--d, 18s) ease-in-out infinite; animation-delay: var(--dl, 0s); }
  .fx-floor i { animation: fx-floor 3.4s linear infinite; }
  .fx-beam { animation: fx-beam var(--d, 6.5s) ease-in infinite; animation-delay: var(--dl, 0s); }
  .fx-dots i { animation: fx-rise var(--d, 12s) linear infinite; animation-delay: var(--dl, 0s); }
  .fx-stars i { animation: fx-twinkle var(--d, 5s) ease-in-out infinite; animation-delay: var(--dl, 0s); }
  .fx-rings i { animation: fx-ring 7.2s ease-out infinite; }
  .fx-rings i:nth-child(2) { animation-delay: -2.4s; }
  .fx-rings i:nth-child(3) { animation-delay: -4.8s; }
  .fx-scan { animation: fx-scan 10s linear infinite; }
  .fx-rays { animation: fx-spin 110s linear infinite; }
}

/* ---------------------------------------------------------------------
   Section 12 · Hablemos de tu negocio (the real closing: the contact form)
   A bright sky over a Latin American coast. Coming in, a big blue ribbon sweeps across the screen and settles
   at the bottom-left (scroll-linked); then the copy, the five priorities, the paper notes, the pencil that
   draws a loop, the fruit that drops in and the glass form arrive on a timer, and everything keeps a gentle
   life (ribbon waving, papers fluttering, clouds drifting). Choose a priority, fill the form, send.
   Drawn on a 1672x941 stage and sized with container units (cqw).
   --------------------------------------------------------------------- */
.con {
  --serif: "Cambria", "Iowan Old Style", "Georgia", "Times New Roman", serif;
  --hand: "Segoe Script", "Bradley Hand", "Brush Script MT", "Snell Roundhand", cursive;
  --ink: #0a1f66;
  --blue: #1f57ee;
  position: relative;
  min-height: calc(100vh - var(--header-height));
  overflow: hidden;
  background: linear-gradient(180deg, #cfe6fb, #eaf4fd);
  color: var(--ink);
}
.con__sky { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; container-type: size; }
.con__world { position: absolute; left: 50%; top: 50%; width: max(100cqw, 177.78cqh); aspect-ratio: 16 / 9; translate: -50% -50%; }
.con__bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transform: scale(1.13); transform-origin: 0 55%; }
.con__cloud { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5) 55%, transparent 76%); }
.con__cloud--1 { left: 0%; top: 6%; width: 34%; aspect-ratio: 2.2; }
.con__cloud--2 { left: 44%; top: 2%; width: 24%; aspect-ratio: 2.4; opacity: 0.8; }
.con__cloud--3 { left: 70%; top: 34%; width: 26%; aspect-ratio: 2.3; opacity: 0.7; }
.con__sun { position: absolute; left: -6%; top: -14%; width: 36%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 250, 225, 0.85), rgba(255, 244, 200, 0.3) 50%, transparent 74%); }
.con__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0, rgba(255, 255, 255, 0.28) 34%, rgba(255, 255, 255, 0) 58%); }

.con__stage {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: min(100%, calc((100vh - var(--header-height)) * 1.777));
  aspect-ratio: 1672 / 941;
  translate: -50% -50%;
  container-type: inline-size;
}
/* a paper plane replaces the old ribbon: no drawn line at all, just the plane cruising a loop with a
   short trail of fading dust right behind it, plus a couple of loose fireflies further along the same
   invisible route. Vector, so it never blurs no matter how it's scaled. */
.kflight { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.kflight__guide { fill: none; stroke: none; }
.kflight__spark { fill: #dff0ff; opacity: 0; filter: drop-shadow(0 0 5px rgba(150, 200, 255, 0.95)); }
.kflight__dust { fill: #eaf3ff; opacity: 0; filter: drop-shadow(0 0 4px rgba(150, 200, 255, 0.85)); }
.kflight__plane { opacity: 0; }
.kflight__plane polygon { filter: drop-shadow(0 0 5px rgba(70, 120, 255, 0.65)); }

.con__kicker { position: absolute; z-index: 5; left: 6.1%; top: 13.2%; margin: 0; font-size: 1.1cqw; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #1f4ff0; }
.con__title { position: absolute; z-index: 5; left: 6%; top: 16.2%; margin: 0; font-family: var(--serif); font-size: 3.85cqw; line-height: 1.02; font-weight: 800; letter-spacing: -0.035em; color: var(--ink); white-space: nowrap; }
.kw { display: inline-block; padding: 0.02em 0.04em 0.22em; margin: 0 -0.04em -0.22em; }
.con__lead { position: absolute; z-index: 5; left: 6.1%; top: 31.4%; width: 40%; margin: 0; font-size: 1.5cqw; line-height: 1.24; color: #22366e; }

/* the five priorities */
.con__pills { position: absolute; z-index: 5; left: 6.1%; top: 42.2%; width: 44%; display: flex; flex-wrap: wrap; gap: 1.1cqw 1cqw; }
.kpill { position: relative; display: inline-flex; align-items: center; gap: 1.1cqw; height: 3.3cqw; padding: 0 2cqw 0 1.5cqw; border-radius: 99px; border: 1.5px solid rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.86); box-shadow: 0 1cqw 2.2cqw rgba(60, 110, 220, 0.14); font: inherit; font-size: 1.1cqw; font-weight: 500; color: #10225f; cursor: pointer; pointer-events: auto; transition: translate 0.25s ease, box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease; -webkit-tap-highlight-color: transparent; }
.kpill:hover { translate: 0 -0.3cqw; box-shadow: 0 1.4cqw 2.8cqw rgba(60, 110, 220, 0.24); }
.kpill:focus-visible { outline: 3px solid #7ea0ff; outline-offset: 3px; }
.kpill__ico { display: block; flex: none; width: 1.9cqw; height: 1.9cqw; color: #2f5cf0; }
.kpill__ico svg { display: block; width: 100%; height: 100%; }
.kpill--orange .kpill__ico { color: #ff8a3d; }
.kpill--green .kpill__ico { color: #22b455; }
.kpill--coral .kpill__ico { color: #ff5a7a; }
.kpill__ck { position: absolute; right: -0.5cqw; top: -0.6cqw; display: grid; place-items: center; width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: var(--blue); color: #fff; opacity: 0; scale: 0.3; transition: opacity 0.25s ease, scale 0.4s cubic-bezier(0.3, 1.6, 0.5, 1); }
.kpill__ck svg { width: 70%; height: 70%; }
.kpill[aria-checked="true"] { border-color: #2f5cf0; background: #fff; box-shadow: 0 0 0 0.3cqw rgba(47, 92, 240, 0.18), 0 1.2cqw 2.6cqw rgba(47, 92, 240, 0.22); }
.kpill[aria-checked="true"] .kpill__ck { opacity: 1; scale: 1; }

/* paper notes, pencil, fruit and the Y on its stack of paper */
.kpaper { position: absolute; z-index: 3; --r: 0deg; rotate: var(--r); background: linear-gradient(170deg, #ffffff, #f0f4fb); box-shadow: 0 2cqw 4.4cqw rgba(50, 80, 160, 0.22); font-family: var(--hand); font-style: italic; color: #1d3a86; }
.kpaper--list { left: 45.2%; top: 8.6%; width: 17.4%; height: 29.5%; --r: 6deg; padding: 3.6cqw 2cqw; }
.kpaper--list ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1.55cqw; font-size: 1.75cqw; }
.kpaper--list li { display: flex; align-items: center; gap: 0.9cqw; }
.kpaper--list svg { width: 1.6cqw; height: 1.6cqw; color: #1f4ff0; }
.kpaper--list li:nth-child(odd) { margin-left: 0.6cqw; }
.kpaper--heart { left: 50.4%; top: 30%; width: 10%; height: 20%; --r: 16deg; padding: 2.4cqw 1.4cqw; font-size: 1.28cqw; line-height: 1.32; color: #52679b; z-index: 4; }
.kpaper--heart i { position: absolute; right: 1.6cqw; bottom: 1.2cqw; font-style: normal; font-size: 1.5cqw; color: #52679b; }
.kpaper--glass { left: 47.4%; top: 72%; width: 13%; height: 24.6%; --r: -12deg; z-index: 5; padding: 2cqw 1.6cqw; background: linear-gradient(170deg, rgba(255, 255, 255, 0.82), rgba(232, 241, 255, 0.6)); font-size: 1.32cqw; line-height: 1.34; color: #3d5490; }
.kbulb { display: block; width: 2.6cqw; height: 2.6cqw; margin-bottom: 0.6cqw; color: #4d6bd0; }
.kbulb svg { display: block; width: 100%; height: 100%; }
.kheart { position: absolute; right: 1.6cqw; bottom: 1.2cqw; font-style: normal; font-size: 1.5cqw; color: #4d6bd0; }
.kstack { position: absolute; z-index: 4; left: 40.5%; top: 44.4%; width: 19.6%; height: auto; }
.kleaf { position: absolute; z-index: 4; height: auto; pointer-events: none; }
.kleaf--a { left: 41.4%; top: 34.4%; width: 7.4%; rotate: -24deg; }
.kleaf--b { left: 70.2%; top: 9.2%; width: 4.6%; rotate: 28deg; z-index: 3; }
.kfruit { position: absolute; z-index: 2; left: 72.8%; top: -7.4%; width: 14.6%; height: auto; }
.kpencil { position: absolute; z-index: 9; left: 58.2%; top: -4.2%; width: 13.8%; height: auto; pointer-events: none; }
.kloop { position: absolute; z-index: 8; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.kloop path { fill: none; stroke: #1f4ff0; stroke-width: 3.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--nloop, 1)); }

/* the glass form */
.kform { position: absolute; z-index: 6; left: 59.8%; top: 14.9%; width: 32.8%; aspect-ratio: 548 / 590; container-type: inline-size; padding: 2.1cqw 1.85cqw 0; border-radius: 2cqw; background: linear-gradient(160deg, rgba(255, 255, 255, 0.74), rgba(238, 244, 255, 0.56)); border: 1px solid rgba(255, 255, 255, 0.92); box-shadow: 0 1cqw 3cqw rgba(50, 90, 200, 0.24), inset 0 0 0 1px rgba(160, 190, 255, 0.28); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); pointer-events: auto; text-align: center; }
.kform__eyebrow { margin: 3.4cqw 0 0; font-size: 2.1cqw; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: #6b7594; }
.kform__script { position: relative; margin: 0.6cqw 0 5.2cqw; font-family: var(--hand); font-style: italic; font-size: 6.6cqw; line-height: 1.1; color: #12285f; rotate: -2.5deg; }
.kform__script span { display: inline-block; }
.kform__script i { display: block; width: 17cqw; height: 0.9cqw; margin: 0.6cqw 0 0 8cqw; border-radius: 1cqw; background: #ff7a5a; rotate: -4deg; transform-origin: 0 50%; }
.kform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; text-align: left; }
.kfield { position: relative; display: flex; align-items: center; gap: 2.4cqw; height: 11cqw; padding: 0 3.2cqw; border-radius: 3.2cqw; background: rgba(255, 255, 255, 0.92); border: 1.5px solid transparent; box-shadow: 0 0.8cqw 2cqw rgba(60, 90, 180, 0.1); grid-column: 1 / -1; transition: border-color 0.25s ease, box-shadow 0.3s ease; }
.kfield--half { grid-column: auto; }
.kfield--area { align-items: flex-start; height: 24cqw; padding-top: 3.4cqw; }
.kfield > i { flex: none; display: block; width: 4.4cqw; height: 4.4cqw; color: #5d6d9c; transition: color 0.25s ease; }
.kfield > i svg { display: block; width: 100%; height: 100%; }
.kfield input, .kfield textarea { flex: 1; min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: 3.1cqw; color: #10225f; resize: none; }
.kfield textarea { height: 100%; }
.kfield input::placeholder, .kfield textarea::placeholder { color: #6b7799; opacity: 1; }
.kfield:focus-within { border-color: #2f5cf0; box-shadow: 0 0 0 0.7cqw rgba(47, 92, 240, 0.16), 0 1.2cqw 2.6cqw rgba(47, 92, 240, 0.16); }
.kfield:focus-within > i { color: #2f5cf0; }
.kfield.is-bad { border-color: #ff5a45; box-shadow: 0 0 0 0.7cqw rgba(255, 90, 69, 0.16); }
.kform__btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 2.2cqw; width: 100%; height: 11.6cqw; margin-top: 4cqw; border: 0; border-radius: 3.6cqw; background: linear-gradient(180deg, #2160f2, #0c3fd4); color: #fff; font: inherit; font-size: 3.8cqw; font-weight: 600; letter-spacing: -0.005em; cursor: pointer; box-shadow: 0 2cqw 4.4cqw rgba(12, 63, 212, 0.4), inset 0 0.4cqw 0.8cqw rgba(255, 255, 255, 0.3); transition: filter 0.25s ease, translate 0.25s ease; }
.kform__btn:hover { filter: brightness(1.08); translate: 0 -0.3cqw; }
.kform__btn:focus-visible { outline: 3px solid #7ea0ff; outline-offset: 3px; }
.kform__btn i { display: block; width: 4.4cqw; height: 4.4cqw; }
.kform__btn i svg { display: block; width: 100%; height: 100%; }
.kform__spin { position: absolute; right: 4cqw; width: 4cqw; height: 4cqw; border-radius: 50%; border: 0.6cqw solid rgba(255, 255, 255, 0.4); border-top-color: #fff; opacity: 0; }
.kform.is-busy .kform__spin { opacity: 1; animation: k-spin 0.8s linear infinite; }
.kform.is-busy .kform__btn { pointer-events: none; filter: saturate(0.8) brightness(0.96); }
.kform__hint { margin: 3.4cqw 0 0; font-size: 2.7cqw; color: #55608a; }
.kform__hint.is-warn { color: #d2452f; }
.kform.is-shake { animation: k-shake 0.5s ease; }
.kform__done { position: absolute; inset: 0; z-index: 3; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 2.6cqw; padding: 8cqw; border-radius: inherit; background: linear-gradient(160deg, rgba(255, 255, 255, 0.94), rgba(238, 244, 255, 0.9)); text-align: center; }
.kform.is-done .kform__done { display: flex; }
.kform__done b { display: grid; place-items: center; width: 16cqw; height: 16cqw; border-radius: 50%; background: linear-gradient(160deg, #2b6bff, #0c3fd4); color: #fff; box-shadow: 0 2cqw 5cqw rgba(12, 63, 212, 0.4); }
.kform__done b svg { width: 56%; height: 56%; }
.kform__done h3 { margin: 0; font-family: var(--serif); font-size: 7.4cqw; font-weight: 800; color: var(--ink); }
.kform__done p { margin: 0; font-size: 3.3cqw; line-height: 1.35; color: #3a4a7c; }

/* handwriting around the scene */
.kscript { position: absolute; z-index: 7; margin: 0; font-family: var(--hand); font-style: italic; line-height: 1.16; white-space: nowrap; color: #1f45c8; rotate: -14deg; pointer-events: none; }
.kscript i { display: block; height: 0.42cqw; border-radius: 0.6cqw; background: currentColor; rotate: -6deg; transform-origin: 0 50%; }
.kscript--tl { left: 88.2%; top: 2%; font-size: 2.1cqw; }
.kscript--tl i { width: 5cqw; margin: 0.5cqw 0 0 2.6cqw; }
.kscript--bl { left: 4.6%; top: 67.2%; font-size: 2.15cqw; z-index: 8; }
.kscript--bl i { width: 4.4cqw; margin: 0.5cqw 0 0 5.6cqw; background: #ff7a45; }
.kscript--rib { left: 17.4%; top: 89.4%; rotate: -7deg; font-size: 1.6cqw; z-index: 3; }
.kscript--rib i { width: 4cqw; margin: 0.6cqw 0 0 6cqw; }
.kscript--r { left: 93.6%; top: 67.6%; font-size: 1.5cqw; }
.kscript--r i { width: 3.6cqw; margin: 0.4cqw 0 0 3cqw; }
.ktrio { position: absolute; z-index: 5; left: 64.8%; top: 85.8%; margin: 0; padding: 0; list-style: none; display: flex; gap: 3.6cqw; }
.ktrio li { display: flex; align-items: center; gap: 0.9cqw; font-size: 0.72cqw; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: #3b4d86; line-height: 1.5; }
.ktrio i { display: block; width: 2.4cqw; height: 2.4cqw; color: #1f4ff0; }
.ktrio i svg { display: block; width: 100%; height: 100%; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes k-spin { to { rotate: 360deg; } }
  @keyframes k-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-1.2cqw); } 40% { transform: translateX(1cqw); } 60% { transform: translateX(-0.7cqw); } 80% { transform: translateX(0.5cqw); } }
  @keyframes k-flutter { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(1.6deg) translateY(-0.4cqw); } }
  @keyframes k-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.9cqw); } }
  @keyframes k-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2.4deg); } }
  @keyframes k-drift { 0%, 100% { translate: -2% 0; } 50% { translate: 3% 0.6%; } }
  @keyframes k-sun { 0%, 100% { opacity: 0.75; scale: 0.96; } 50% { opacity: 1; scale: 1.06; } }
  @keyframes k-tap { 0%, 84%, 100% { transform: rotate(0deg) translate(0, 0); } 90% { transform: rotate(-3deg) translate(-0.5cqw, 0.5cqw); } 95% { transform: rotate(0.5deg) translate(0.1cqw, -0.1cqw); } }
  @keyframes k-glow { 0%, 100% { box-shadow: 0 2cqw 4.4cqw rgba(12, 63, 212, 0.4), inset 0 0.4cqw 0.8cqw rgba(255, 255, 255, 0.3); } 50% { box-shadow: 0 2.4cqw 6cqw rgba(12, 63, 212, 0.62), 0 0 0 1cqw rgba(47, 92, 240, 0.12), inset 0 0.4cqw 0.8cqw rgba(255, 255, 255, 0.3); } }
  @keyframes k-arrow { 0%, 100% { translate: 0 0; } 50% { translate: 0.9cqw 0; } }
  @keyframes k-icon { 0%, 70%, 100% { scale: 1; } 82% { scale: 1.25; } }
  @keyframes k-pop { 0% { scale: 1; } 40% { scale: 1.08; } 100% { scale: 1; } }

  .con.is-live .kflight__spark { opacity: 0.9; }
  .con.is-live .kflight__dust--1 { opacity: 0.85; }
  .con.is-live .kflight__dust--2 { opacity: 0.6; }
  .con.is-live .kflight__dust--3 { opacity: 0.4; }
  .con.is-live .kflight__dust--4 { opacity: 0.2; }
  .con.is-live .kflight__plane { opacity: 1; }
  .con.is-live .kpaper { animation: k-flutter 6.5s ease-in-out infinite; }
  .con.is-live .kpaper--heart { animation-delay: -2s; animation-duration: 7.2s; }
  .con.is-live .kpaper--glass { animation-delay: -3.6s; animation-duration: 7.8s; }
  .con.is-live .kstack { animation: k-bob 6s ease-in-out infinite; }
  .con.is-live .kfruit { animation: k-bob 7s ease-in-out infinite; animation-delay: -2s; }
  .con.is-live .kleaf { animation: k-sway 5.4s ease-in-out infinite; }
  .con.is-live .kleaf--b { animation-delay: -2.6s; }
  .con.is-live .kpencil { animation: k-tap 7s ease-in-out infinite; transform-origin: 6% 92%; }
  .con.is-live .con__cloud { animation: k-drift 26s ease-in-out infinite; }
  .con.is-live .con__cloud--2 { animation-duration: 32s; animation-delay: -8s; }
  .con.is-live .con__cloud--3 { animation-duration: 36s; animation-delay: -14s; }
  .con.is-live .con__sun { animation: k-sun 7s ease-in-out infinite; }
  .con.is-live .kform__btn { animation: k-glow 3.2s ease-in-out infinite; }
  .con.is-live .kform__btn i { animation: k-arrow 1.6s ease-in-out infinite; }
  .con.is-live .ktrio i { animation: k-icon 6s ease-in-out infinite; }
  .con.is-live .ktrio li:nth-child(2) i { animation-delay: 1.4s; }
  .con.is-live .ktrio li:nth-child(3) i { animation-delay: 2.8s; }
  .kpill.is-picked { animation: k-pop 0.45s ease-out 1; }
}

@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
  .con-runway { position: relative; margin-top: calc(-1 * var(--total-run)); height: var(--total-run); }
  .con {
    position: sticky;
    z-index: 16;
    top: var(--header-offset, var(--header-height));
    height: calc(100vh - var(--header-offset, var(--header-height)));
    min-height: 0;
    opacity: var(--con-o, 1);
    pointer-events: none;
    --b: var(--cbl, 1);
  }
  .con [data-k] { --v: 1; opacity: clamp(0, calc(var(--v) * 1.6), 1); translate: 0 calc((1 - var(--v)) * 2.4cqw); }
  .con [data-k="k"] { --v: var(--nk, 1); }
  .con [data-k="lead"] { --v: var(--nlead, 1); }
  .con [data-k="p1"] { --v: var(--np1, 1); }
  .con [data-k="p2"] { --v: var(--np2, 1); }
  .con [data-k="p3"] { --v: var(--np3, 1); }
  .con [data-k="p4"] { --v: var(--np4, 1); }
  .con [data-k="p5"] { --v: var(--np5, 1); }
  .con .kpill[data-k] { scale: calc(0.8 + 0.2 * var(--v)); }
  .con [data-k="n1"] { --v: var(--nn1, 1); rotate: calc(var(--r) + (1 - var(--v)) * 14deg); translate: calc((1 - var(--v)) * 7cqw) calc((1 - var(--v)) * -6cqw); }
  .con [data-k="n2"] { --v: var(--nn2, 1); rotate: calc(var(--r) + (1 - var(--v)) * 16deg); translate: calc((1 - var(--v)) * 6cqw) calc((1 - var(--v)) * -5cqw); }
  .con [data-k="n3"] { --v: var(--nn3, 1); rotate: calc(var(--r) - (1 - var(--v)) * 14deg); translate: calc((1 - var(--v)) * -6cqw) calc((1 - var(--v)) * 6cqw); }
  .con [data-k="stack"] { --v: var(--nstack, 1); translate: 0 calc((1 - var(--v)) * 9cqw); scale: calc(0.86 + 0.14 * var(--v)); }
  .con [data-k="lv"] { --v: var(--nlv, 1); }
  .con [data-k="fruit"] { --v: var(--nfruit, 1); translate: 0 calc((1 - var(--v)) * -18cqw); }
  .con [data-k="pencil"] { --v: var(--npencil, 1); translate: calc((1 - var(--v)) * 12cqw) calc((1 - var(--v)) * -9cqw); }
  .con [data-k="form"] { --v: var(--nform, 1); translate: calc((1 - var(--v)) * 6cqw) 0; scale: calc(0.95 + 0.05 * var(--v)); }
  .con [data-k="ks"] { --v: var(--nks, 1); translate: none; }
  .con .kform__script span { clip-path: inset(-10% calc((1 - var(--nks, 1)) * 100%) -20% 0); }
  .con .kform__script i { scale: var(--nks, 1) 1; }
  .con [data-k="f1"] { --v: var(--nf1, 1); }
  .con [data-k="f2"] { --v: var(--nf2, 1); }
  .con [data-k="f3"] { --v: var(--nf3, 1); }
  .con [data-k="f4"] { --v: var(--nf4, 1); }
  .con [data-k="btn"] { --v: var(--nbtn, 1); scale: calc(0.92 + 0.08 * var(--v)); }
  .con [data-k="hint"] { --v: var(--nhint, 1); }
  .con [data-k="h1"] { --v: var(--nh1, 1); }
  .con [data-k="h2"] { --v: var(--nh2, 1); }
  .con [data-k="h3"] { --v: var(--nh3, 1); }
  .con [data-k="h4"] { --v: var(--nh4, 1); }
  .con [data-k="trio"] { --v: var(--ntrio, 1); }
  .kw {
    --p: clamp(0, calc((var(--nt, 1) * 8 - var(--i)) / 3), 1);
    opacity: var(--p);
    translate: 0 calc((1 - var(--p)) * 1.6cqw);
    filter: blur(calc((1 - var(--p)) * 0.6cqw));
  }
}

@media (max-width: 980px) {
  .con { min-height: auto; padding: 56px 0 72px; }
  .con__stage { position: relative; left: auto; top: auto; width: auto; aspect-ratio: auto; translate: none; padding: 0 clamp(16px, 4vw, 40px); display: block; container-type: normal; }
  .kflight, .kpaper, .kstack, .kleaf, .kfruit, .kpencil, .kloop, .kscript { display: none; }
  .con__veil { background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2)); }
  .con__kicker, .con__title, .con__lead, .con__pills, .ktrio { position: static; }
  .con__kicker { font-size: 0.74rem; margin-bottom: 12px; }
  .con__title { font-size: clamp(2rem, 8.6vw, 2.8rem); white-space: normal; margin-bottom: 14px; }
  .con__lead { width: auto; font-size: 1.02rem; margin-bottom: 20px; }
  .con__pills { width: auto; gap: 10px; margin-bottom: 24px; }
  .kpill { height: auto; padding: 12px 16px 12px 12px; font-size: 0.95rem; gap: 10px; }
  .kpill__ico { width: 22px; height: 22px; }
  .kpill__ck { width: 18px; height: 18px; right: -4px; top: -6px; }
  .kform { position: relative; left: auto; top: auto; width: min(100%, 560px); margin: 0 auto; aspect-ratio: auto; padding: 28px 22px 26px; container-type: inline-size; }
  .ktrio { margin-top: 28px; flex-wrap: wrap; justify-content: center; gap: 18px; }
  .ktrio li { font-size: 0.66rem; }
  .ktrio i { width: 30px; height: 30px; }
}

/* ---------------------------------------------------------------------
   Motion
   --------------------------------------------------------------------- */
@keyframes badge-float {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50% { transform: translate(-50%, -50%) translateY(-8px); }
}

@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(var(--dot-color), 0.18); }
  50% { box-shadow: 0 0 0 8px rgba(var(--dot-color), 0.05); }
}

[data-reveal] > * {
  opacity: 0;
  transform: translateY(18px);
  animation: reveal-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
[data-reveal] > *:nth-child(1) { animation-delay: 0.05s; }
[data-reveal] > *:nth-child(2) { animation-delay: 0.15s; }
[data-reveal] > *:nth-child(3) { animation-delay: 0.28s; }
[data-reveal] > *:nth-child(4) { animation-delay: 0.4s; }

@keyframes reveal-up {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .badge, .badge__dot--pulse, .badge__alert { animation: none !important; }
  [data-reveal] > *, p.eyebrow { animation: none !important; opacity: 1 !important; transform: none !important; }
  p.eyebrow { color: #4a9dff !important; }
}

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 980px) {
  .hero__image { object-position: 66% 50%; }
  .badge { font-size: 0.78rem; padding: 9px 14px 9px 11px; }
}

@media (max-width: 640px) {
  /* The crop gets tight and busy on narrow screens — go for a much
     stronger, more even wash so the copy stays readable on top of it,
     instead of chasing exact object positions through a heavy crop. */
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(3, 8, 20, 0.55) 0%, rgba(3, 8, 20, 0.86) 46%, rgba(3, 8, 20, 0.96) 100%),
      linear-gradient(90deg, rgba(3, 8, 20, 0.75), rgba(3, 8, 20, 0.55) 60%, rgba(3, 8, 20, 0.78));
  }

  .hero__content { min-height: auto; padding-top: 46vh; padding-bottom: 40px; }
  .hero__copy { padding: 0 20px; }

  /* Badges: stop chasing objects in a heavily-cropped photo — group them
     as a tidy static stack that flows below the buttons instead of
     absolutely-positioned pins (which was overlapping the CTAs). */
  .hero__badges {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 22px 20px 0;
  }
  .badge {
    position: static;
    transform: none;
    animation: none;
    background: linear-gradient(155deg, rgba(26, 56, 102, 0.98), rgba(11, 22, 46, 0.98));
    border-color: rgba(110, 214, 255, 0.6);
  }

  .hero__caption { position: static; margin: 14px 20px 0; text-align: right; }
}

@media (max-width: 640px) {
  h1 { font-size: 2rem; }
  .badge { font-size: 0.72rem; padding: 8px 12px 8px 10px; }
  .badge--store { --x: 62%; --y: 14%; }
  .badge--order { --x: 32%; --y: 70%; }
  .badge--ready { --x: 58%; --y: 88%; }
}

/* =========================================================================
   Footer
   A dark navy bookend to match the header. A thin glowing wire runs across
   the top and lifts into the brand mark, with a soft shimmer flowing along
   it and a slow pulse on the mark — always-on ambient motion (this isn't one
   of the pinned scroll scenes, so it doesn't need scroll-linked JS).
   ========================================================================= */
.site-footer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #050c1e 0%, #040914 60%, #030710 100%);
  color: var(--muted);
}
/* Two soft, oversized color washes behind the columns — pure CSS gradients (no image, so
   no resolution/blur risk) — so the tall dark stage doesn't read as an empty void. */
.foot__ambient { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.foot__orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.5; }
.foot__orb--a { left: -8%; top: 10%; width: clamp(260px, 28vw, 420px); aspect-ratio: 1; background: radial-gradient(circle, rgba(45, 140, 255, 0.32), transparent 70%); }
.foot__orb--b { right: -6%; bottom: -18%; width: clamp(220px, 24vw, 380px); aspect-ratio: 1; background: radial-gradient(circle, rgba(110, 214, 255, 0.22), transparent 70%); }
.foot__glow { position: absolute; inset: 0; height: clamp(120px, 22vw, 220px); pointer-events: none; }
.foot__glow svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* the whole wire is a neon tube: its own glow breathes brighter and dimmer, blue throughout */
.foot__wire { fill: none; stroke: rgba(140, 190, 255, 0.85); stroke-width: 2; filter: drop-shadow(0 0 7px rgba(100, 165, 255, 0.6)); }
.foot__wiremark { position: absolute; right: clamp(18px, 6vw, 64px); top: clamp(14px, 3vw, 26px); width: clamp(26px, 3vw, 36px); aspect-ratio: 1; filter: drop-shadow(0 0 10px rgba(90, 150, 255, 0.65)); }
.foot__wiremark svg { width: 100%; height: 100%; }

.foot__stage {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(96px, 14vw, 148px) clamp(20px, 4vw, 48px) clamp(48px, 6vw, 64px);
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
}
.foot__brand { display: flex; flex-direction: column; gap: 14px; }
.foot__logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.foot__mark { width: 40px; height: 40px; display: grid; place-items: center; flex: none; }
.foot__mark svg { width: 100%; height: 100%; }
.foot__word { font-size: clamp(1.5rem, 2.4vw, 1.9rem); font-weight: 800; letter-spacing: -0.01em; color: var(--text); }
.foot__tag { margin: 0; max-width: 26em; font-size: 0.98rem; line-height: 1.5; color: var(--muted); }
.foot__status { display: inline-flex; align-items: center; gap: 9px; margin: 6px 0 0; font-size: 0.88rem; color: var(--dim); }

.foot__col { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.foot__h { position: relative; margin: 0 0 6px; font-size: 1.05rem; font-weight: 700; color: var(--text); }
.foot__h i { display: block; width: 34px; height: 2px; margin-top: 10px; border-radius: 2px; background: var(--red); }
.foot__col a, .foot__row { color: var(--muted); text-decoration: none; font-size: 0.98rem; transition: color 0.2s ease, translate 0.2s ease; }
.foot__col > a:hover, .foot__col > a:focus-visible { color: var(--blue-2); translate: 3px 0; outline: 0; }
.foot__col > a { display: inline-flex; align-items: center; gap: 7px; }
.foot__ext { display: grid; place-items: center; width: 13px; height: 13px; flex: none; opacity: 0.55; transition: opacity 0.2s ease; }
.foot__ext svg { width: 100%; height: 100%; }
.foot__col > a:hover .foot__ext, .foot__col > a:focus-visible .foot__ext { opacity: 1; }
.foot__row { display: inline-flex; align-items: center; gap: 12px; }
.foot__row i { display: grid; place-items: center; width: 20px; height: 20px; flex: none; color: var(--blue); }
.foot__row i svg { width: 100%; height: 100%; }
a.foot__row:hover, a.foot__row:focus-visible { color: var(--blue-2); outline: 0; }
a.foot__row:hover i, a.foot__row:focus-visible i { color: var(--blue-2); }
.foot__row--static { color: var(--dim); }

.foot__bottom {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  padding: 22px clamp(20px, 4vw, 48px) clamp(28px, 4vw, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--dim);
}
.foot__bottom p { margin: 0; }
.foot__legal { display: inline-flex; align-items: center; gap: 4px; color: var(--dim); text-decoration: none; transition: color 0.2s ease; }
.foot__legal:hover, .foot__legal:focus-visible { color: var(--blue-2); outline: 0; }
.foot__legal svg { transition: translate 0.2s ease; }
.foot__legal:hover svg { translate: 2px 0; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes foot-pulse { 0%, 100% { opacity: 0.7; scale: 0.94; } 50% { opacity: 1; scale: 1.08; } }
  @keyframes foot-neon {
    0%, 100% { stroke: rgba(110, 165, 255, 0.55); filter: drop-shadow(0 0 3px rgba(90, 150, 255, 0.35)); }
    50% { stroke: rgba(180, 215, 255, 1); filter: drop-shadow(0 0 17px rgba(120, 185, 255, 0.95)) drop-shadow(0 0 4px rgba(200, 225, 255, 0.9)); }
  }
  .foot__wiremark { animation: foot-pulse 3.6s ease-in-out infinite; }
  .foot__wire { animation: foot-neon 3.4s ease-in-out infinite; }
}

@media (max-width: 900px) {
  .foot__stage { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .foot__stage { grid-template-columns: 1fr; padding-top: clamp(72px, 20vw, 96px); }
  .foot__glow { height: 90px; }
  .foot__wiremark { width: 26px; }
  .foot__bottom { justify-content: flex-start; flex-direction: column; align-items: flex-start; }
}