/* ===================================================================
   areqo — v4 Pro stylesheet (additive over styles.css + stylesv3-overrides.css)
   Loaded only by indexv4.html. Contains: skip-link, focus-visible audit,
   sticky CTA, reading progress, number counter, prefers-reduced-motion respect.
   =================================================================== */

/* ===== SKIP TO CONTENT ===== */
.skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 10000;
  padding: 12px 20px;
  background: #0a0a0a;
  color: #fafafa;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 8px;
  text-decoration: none;
  transition: top 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 16px;
  outline: 2px solid #fafafa;
  outline-offset: 2px;
}

/* ===== FOCUS-VISIBLE AUDIT (consistent keyboard focus) ===== */
:focus { outline: none; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #0a0a0a;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Buttons on dark bg get inverted focus */
.btn--primary:focus-visible,
.case-cta .btn--primary:focus-visible,
.final-cta .btn--primary:focus-visible,
.next-slot .btn--primary:focus-visible {
  outline-color: #fafafa;
}

.nav__link:focus-visible {
  outline-offset: 6px;
  border-radius: 2px;
}

.proof__scarcity-link:focus-visible {
  outline-color: #fafafa;
  outline-offset: 4px;
}

.wa-float:focus-visible {
  outline-color: #25d366;
  outline-offset: 4px;
}

/* ===== STICKY MINI-CTA (appears after 40% scroll) ===== */
.sticky-cta {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 120%);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: #0a0a0a;
  color: #fafafa;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms ease;
  opacity: 0;
  pointer-events: none;
}
.sticky-cta.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}
.sticky-cta:hover { background: #262626; }
.sticky-cta svg { width: 16px; height: 16px; }
@media (max-width: 640px) {
  .sticky-cta { left: 16px; right: 16px; transform: translate(0, 120%); }
  .sticky-cta.is-visible { transform: translate(0, 0); }
}

/* ===== READING PROGRESS BAR (visible on blog posts via class hook) ===== */
.reading-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #0a0a0a, #525252);
  z-index: 9999;
  transition: width 80ms linear;
}

/* ===== NUMBER COUNTER (animation hook) ===== */
[data-counter] {
  font-variant-numeric: tabular-nums;
  transition: opacity 240ms ease;
}
[data-counter]:not(.is-counted) { opacity: 0.4; }
[data-counter].is-counted { opacity: 1; }

/* ===== HOVER STATES — refined micro-interactions ===== */
.btn--primary {
  transition: background 200ms ease, transform 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms ease;
}
.btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.service-card,
.case-card,
.discovery__card {
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), border-color 200ms ease, box-shadow 320ms ease;
}
.service-card:hover,
.discovery__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08);
}

/* ===== prefers-reduced-motion — kill animations for accessibility ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .sticky-cta {
    transform: translate(-50%, 0);
    transition: opacity 0.001ms;
  }
  .reading-bar { transition: width 0.001ms linear; }
  [data-counter]:not(.is-counted) { opacity: 1; }
}

/* ===== PRINT (clean output for /precios y /casos B2B) ===== */
@media print {
  .nav, .mobile-menu, .wa-float, .sticky-cta, .reading-bar, .banner, .skip-link { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  a { color: #000 !important; text-decoration: underline; }
  .hg, .overview__visual, .tools, .final-cta { display: none !important; }
  .pricing, .case-section { page-break-inside: avoid; }
}

/* ===== Nav entrance (React home only) =====
   Whole items arrive left to right: logo, links, then actions. The extra
   specificity overrides the legacy is-ready transitions and nth-child delays.
   No overshoot or blur: each item moves just 4px over 200ms, 40ms apart. */
html[data-entrance="react"] body .nav :is(.nav__logo, .nav__menu .nav__link, .nav__actions > *) {
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 200ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--nav-order, 0) * 40ms);
}
html[data-entrance="react"] .nav__actions { --nav-actions-start: calc(var(--nav-link-count) + 1); }
html[data-entrance="react"] .nav__actions > :nth-child(1) { --nav-order: var(--nav-actions-start); }
html[data-entrance="react"] .nav__actions > :nth-child(2) { --nav-order: calc(var(--nav-actions-start) + 1); }
html[data-entrance="react"] .nav__actions > :nth-child(3) { --nav-order: calc(var(--nav-actions-start) + 2); }


html[data-entrance="react"] body.nav-wave-go .nav :is(.nav__logo, .nav__menu .nav__link, .nav__actions > *),
html[data-entrance="react"]:not(.entrance) body .nav :is(.nav__logo, .nav__menu .nav__link, .nav__actions > *) {
  opacity: 1;
  transform: none;
}
@media (max-width: 768px) {
  /* Hidden desktop links don't leave a gap in the mobile item sequence. */
  html[data-entrance="react"] .nav__actions { --nav-actions-start: 1; }
}
/* Keep the language switch legible on the dark mobile menu, independently
   of the top bar's palette. Reuse the same links and active-state classes. */
html[data-entrance="react"] .mobile-menu .lang-toggle {
  align-self: flex-start;
  margin-right: 0;
  background: #fff;
  border-color: #000;
}
html[data-entrance="react"] .mobile-menu .lang-toggle__btn {
  color: #000;
}
html[data-entrance="react"] .mobile-menu .lang-toggle__btn--active {
  background: #000;
  color: #fff;
  box-shadow: none;
}
@media (width < 400px) {
  /* The new logo lockup crowds the top-bar language switch on narrow phones.
     Keep language selection in the menu and skip its hidden entrance slot. */
  html[data-entrance="react"] .nav__actions .lang-toggle { display: none; }
  html[data-entrance="react"] .nav__actions { --nav-actions-start: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-entrance="react"] body .nav :is(.nav__logo, .nav__menu .nav__link, .nav__actions > *) {
    transform: none;
    /* Out-rank the global !important reduced-motion duration resets: keep a
       short 400ms opacity cross-fade, without travel or item stagger. */
    transition: opacity 400ms ease !important;
    transition-delay: 0ms !important;
  }
}

/* Hero headline, desktop/tablet: centered vertically in the hero, wide enough
   for the approved two-line title; no CTA below, so no bottom margin. */
@media (min-width: 641px) {
  .hg__headline {
    top: 50%;
    transform: translateY(-50%);
    max-width: min(960px, calc(100% - 64px));
    /* Centered, the card now sits over vivid tiles instead of the white fade:
       lighter tint so the blurred tiles show through like before. */
    background: rgba(255, 255, 255, 0.55);
    border: 0;
  }
  .hg__title { margin-bottom: 0; }
}

/* Hero tiles hover: softer lift, critically damped curve, no overshoot. */
.marquee__img {
  transition:
    transform 600ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.marquee__img:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.18);
}

/* ===== Servicios reel (hero-reel.js) ===== */
.reel {
  background: #0a0a0a;
  color: #fff;
  padding: clamp(96px, 12vw, 160px) 0 clamp(96px, 10vw, 140px);
  position: relative;
}
.reel__eyebrow {
  font: 500 13px/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a3a3a3;
  margin: 0 0 16px;
}
.reel__title {
  font: 600 clamp(32px, 4.2vw, 56px)/1.05 var(--font-display);
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 clamp(40px, 5vw, 64px);
}
.reel__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.reel__card { margin: 0; }
.reel__media {
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #161616;
  opacity: 0;
}
.reel__card.is-landed .reel__media,
.reel--static .reel__media { opacity: 1; }
.reel__media img,
.reel__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel__card figcaption {
  margin-top: 14px;
  font: 500 15px/1.3 var(--font-body);
  color: #fff;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reel__card figcaption span { display: block; color: #8a8a8a; font-size: 13px; margin-top: 2px; }
.reel__card.is-landed figcaption,
.reel--static .reel__card figcaption { opacity: 1; transform: none; }
@media (max-width: 899px) {
  .reel__row { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* Flying layer: lives inside <main> (see hero-reel.js), zero-size anchor at
   main's top-left; cards are placed in main's coordinates. Above the reel
   section, below the hero (46) and the nav (50). */
.reel-fly {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 45;
  pointer-events: none;
  visibility: hidden;
}
.reel-sheet {
  position: absolute;
  left: 0;
  right: 0;
  background: #fff;
  z-index: 44;
  pointer-events: none;
}
.reel-fly__card {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #161616;
  transform-origin: 0 0; /* hero-reel.js draws each card as a quad (matrix3d) */
  backface-visibility: hidden;
}
.reel-fly__card img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Reel on: the hero sits above the flying layer (45) and below the nav (50),
   with no background, so the flying cards pass UNDER the hero title. */
body.reel-on .hg { z-index: 46; background: transparent; }

/* Reel wordmarks: small, quiet, left-aligned under each card. */
.reel__card figcaption { display: flex; align-items: center; height: 34px; }
.reel__logo { height: 22px; width: auto; display: block; opacity: 0.9; }
.reel__logo--badge { height: 34px; }
.reel__logo--invert { height: 18px; filter: brightness(0) invert(1); }
.reel__wordmark {
  font: 500 12px/1 var(--font-body);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #e5e5e5;
}

/* Reel: section sits higher so the flight covers less screen; undim wordmark. */
.reel { padding-top: clamp(40px, 5vw, 72px); }
.reel__title { margin-bottom: clamp(28px, 3.5vw, 44px); }
.reel__logo--undim { height: 18px; }
/* Low flying layer: inside the hero, above the marquee (1), under the fade (20). */
.reel-fly--low { z-index: 5; }
.reel__card figcaption { gap: 10px; }
.reel__flag { width: 18px; height: 12px; border-radius: 2px; object-fit: cover; opacity: 0.85; flex: none; }
/* Place next to each wordmark: quiet, small, no flag. */
.reel__card figcaption { gap: 12px; }
.reel__place {
  font: 400 11px/1 var(--font-body);
  letter-spacing: 0.06em;
  color: #7a7a7a;
}
/* Landing cross-fade (see hero-reel.js). */
.reel__media { transition: opacity 380ms cubic-bezier(0.22, 1, 0.36, 1); }
/* Reel cards link to their case study. Hover: short, damped lift. */
.reel__link { display: block; color: inherit; text-decoration: none; }
.reel__link .reel__media {
  transition:
    opacity 380ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 500ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reel__link:hover .reel__media,
.reel__link:focus-visible .reel__media {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7);
}
.reel__link:focus-visible { outline: 2px solid #fff; outline-offset: 6px; border-radius: 14px; }
.reel__wordmark { white-space: nowrap; }
@media (max-width: 640px) {
  .reel__wordmark { font-size: 10.5px; letter-spacing: 0.2em; }
  .reel__card figcaption { gap: 8px; }
  .reel__logo { height: 18px; }
  .reel__logo--badge { height: 28px; }
  .reel__logo--undim { height: 14px; }
}

/* Reel video → still poster when leaving for the agent block. */
.reel__media { position: relative; }
.reel__still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reel__card.is-still .reel__still { opacity: 1; }

/* ===== Agente IA block: continues the dark section. Stage empty for now. ===== */
.agent {
  background: #0a0a0a;
  color: #fff;
  padding: clamp(48px, 7vw, 96px) 0 clamp(96px, 10vw, 140px);
}
.agent__stage {
  min-height: 70vh;
  border-radius: 16px;
  background: #0a0a0a;
}

/* ===== Reel + agent: wider stage so the cards read bigger ===== */
.reel .container,
.agent .container { max-width: min(1720px, 94vw); }
.reel__row { gap: 24px; }

/* ===== Agente IA stage =====
   Sequence (body of .agent__stage gets .is-playing via hero-reel.js):
   three messages arrive one after another, then the agent appears, then each
   message gets a "seen" tick and the caption fades in. Apple-style: opacity +
   short rise + blur-to-sharp, damped curve, no overshoot. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.agent__sub {
  font: 400 clamp(17px, 1.6vw, 21px)/1.4 var(--font-body);
  color: #a3a3a3;
  margin: calc(-1 * clamp(14px, 2vw, 26px)) 0 clamp(40px, 5vw, 64px);
}
.agent__stage {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
  padding: clamp(24px, 4vw, 56px) 0;
}
.agent__msgs { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.agent__msg {
  display: flex;
  align-items: center;
  gap: 16px;
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 700ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i) * 550ms);
}
.agent__msg:nth-child(2) { margin-left: clamp(24px, 4vw, 64px); }
.agent__msg:nth-child(3) { margin-left: clamp(8px, 1.5vw, 24px); }
.agent__app {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: #fff;
  display: grid; place-items: center;
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.6);
}
.agent__app svg { width: 26px; height: 26px; display: block; }
.agent__bubble {
  margin: 0;
  padding: 14px 18px;
  border-radius: 18px 18px 18px 6px;
  font: 500 clamp(15px, 1.25vw, 18px)/1.35 var(--font-body);
  color: #fff;
  max-width: 30ch;
}
.agent__msg--wa .agent__bubble { background: #1DA851; }
.agent__msg--ms .agent__bubble { background: #0A7CFF; }
.agent__msg--ig .agent__bubble { background: linear-gradient(135deg, #8A3AB9 0%, #B53498 100%); }
.agent__seen {
  width: 18px; height: 18px; flex: none;
  color: #5eb8ff;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 400ms ease, transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(2300ms + var(--i) * 180ms);
}

.agent__bot { display: grid; justify-items: center; text-align: center; }
.agent__orb {
  width: clamp(120px, 12vw, 168px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.35), transparent 45%),
    conic-gradient(from 200deg, #1DA851, #0A7CFF, #8A3AB9, #B53498, #1DA851);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 30px 60px -28px rgba(0,0,0,0.7);
  opacity: 0;
  transform: scale(0.86);
  filter: blur(10px);
  transition:
    opacity 900ms cubic-bezier(0.22, 1, 0.36, 1) 1750ms,
    transform 1000ms cubic-bezier(0.22, 1, 0.36, 1) 1750ms,
    filter 900ms cubic-bezier(0.22, 1, 0.36, 1) 1750ms;
}
.agent__orb svg { width: 42%; height: 42%; }
.agent__bot-name {
  margin: 22px 0 6px;
  font: 600 clamp(18px, 1.5vw, 22px)/1.2 var(--font-display);
  color: #fff;
  opacity: 0;
  transition: opacity 600ms ease 2100ms;
}
.agent__caption {
  margin: 0;
  font: 400 15px/1.4 var(--font-body);
  color: #8a8a8a;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 700ms ease 2800ms, transform 800ms cubic-bezier(0.22, 1, 0.36, 1) 2800ms;
}
/* Played */
.agent__stage.is-playing .agent__msg { opacity: 1; transform: none; filter: none; }
.agent__stage.is-playing .agent__seen { opacity: 1; transform: none; }
.agent__stage.is-playing .agent__orb { opacity: 1; transform: none; filter: none; }
.agent__stage.is-playing .agent__bot-name,
.agent__stage.is-playing .agent__caption { opacity: 1; transform: none; }
/* Slow breathing once the agent is on — "it is listening". */
@keyframes agent-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
.agent__stage.is-playing .agent__orb { animation: agent-breathe 5s ease-in-out 3s infinite; }

@media (max-width: 760px) {
  .agent__stage { grid-template-columns: 1fr; }
  .agent__msg:nth-child(2), .agent__msg:nth-child(3) { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .agent__msg, .agent__orb, .agent__seen, .agent__bot-name, .agent__caption {
    transform: none !important; filter: none !important; transition-duration: 200ms !important; transition-delay: 0ms !important;
  }
  .agent__stage.is-playing .agent__orb { animation: none; }
}
/* Agent: logos on transparent, no white tile. */
.agent__app { background: none; box-shadow: none; border-radius: 0; width: 40px; height: 40px; }
.agent__app svg { width: 36px; height: 36px; }
.agent__caption--time {
  margin-top: 6px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #d4d4d4;
  transition-delay: 3150ms, 3150ms;
}

/* Agent figure (replaces the colour orb): same damped entrance, then a very
   slow float instead of the breathing scale. */
.agent__figure {
  width: clamp(260px, 30vw, 460px);
  height: auto;
  display: block;
  opacity: 0;
  transform: translateY(18px) scale(0.97);
  filter: blur(10px);
  transition:
    opacity 1000ms cubic-bezier(0.22, 1, 0.36, 1) 1750ms,
    transform 1100ms cubic-bezier(0.22, 1, 0.36, 1) 1750ms,
    filter 1000ms cubic-bezier(0.22, 1, 0.36, 1) 1750ms;
}
@keyframes agent-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.agent__stage.is-playing .agent__figure {
  opacity: 1; transform: none; filter: none;
  animation: agent-float 6s ease-in-out 3.2s infinite;
}
.agent__bot-name { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) {
  .agent__figure { transform: none !important; filter: none !important; transition-duration: 200ms !important; transition-delay: 0ms !important; }
  .agent__stage.is-playing .agent__figure { animation: none; }
}

/* ===== Agent v3: question → agent → answer → order, left to right ===== */
.agent__stage {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
}
.agent__figure { width: clamp(180px, 17vw, 270px); }
.agent__msg:nth-child(2), .agent__msg:nth-child(3) { margin-left: 0; }

.agent__out { display: grid; gap: 28px; justify-items: end; }
.agent__replies { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; justify-items: end; }
.agent__reply {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 700ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(2700ms + var(--i) * 420ms);
}
.agent__reply p {
  margin: 0;
  padding: 14px 18px;
  border-radius: 18px 18px 6px 18px;
  background: #1c1c1e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #f2f2f2;
  font: 500 clamp(15px, 1.2vw, 17px)/1.35 var(--font-body);
  max-width: 30ch;
  position: relative;
}
/* thin channel mark on the reply so each answer maps to its question */
.agent__reply p::before {
  content: "";
  position: absolute; left: -14px; top: 50%;
  width: 6px; height: 6px; border-radius: 50%;
  transform: translateY(-50%);
}
.agent__reply--wa p::before { background: #25D366; }
.agent__reply--ms p::before { background: #0A7CFF; }
.agent__reply--ig p::before { background: #B53498; }

.agent__order {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-radius: 14px;
  background: #f5f5f7;
  color: #0a0a0a;
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1) 4200ms, transform 800ms cubic-bezier(0.22, 1, 0.36, 1) 4200ms;
}
.agent__order svg { width: 22px; height: 22px; color: #1DA851; flex: none; }
.agent__order p { margin: 0; }
.agent__order-title { font: 600 15px/1.2 var(--font-body); }
.agent__order-sub { font: 400 13px/1.3 var(--font-body); color: #6e6e73; margin-top: 2px !important; }

.agent__stage.is-playing .agent__reply { opacity: 1; transform: none; filter: none; }
.agent__stage.is-playing .agent__order { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .agent__stage { grid-template-columns: 1fr; justify-items: stretch; }
  .agent__bot { justify-self: center; }
  .agent__out, .agent__replies { justify-items: end; }
}
@media (prefers-reduced-motion: reduce) {
  .agent__reply, .agent__order { transform: none !important; filter: none !important; transition-duration: 200ms !important; transition-delay: 0ms !important; }
}

/* ===== Agent v4: faster sequence (~2.8 s total), same damped curves ===== */
.agent__msg {
  transition-duration: 560ms, 640ms, 560ms;
  transition-delay: calc(var(--i) * 280ms);
}
.agent__seen { transition-delay: calc(1300ms + var(--i) * 120ms); }
.agent__figure {
  transition:
    opacity 760ms cubic-bezier(0.22, 1, 0.36, 1) 850ms,
    transform 840ms cubic-bezier(0.22, 1, 0.36, 1) 850ms,
    filter 760ms cubic-bezier(0.22, 1, 0.36, 1) 850ms;
}
.agent__stage.is-playing .agent__figure { animation-delay: 2s; }
.agent__bot-name { transition: opacity 500ms ease 1100ms; }
.agent__caption { transition: opacity 550ms ease 1350ms, transform 600ms cubic-bezier(0.22, 1, 0.36, 1) 1350ms; }
.agent__caption--time { transition-delay: 1500ms, 1500ms; }
.agent__reply {
  transition-duration: 560ms, 640ms, 560ms;
  transition-delay: calc(1500ms + var(--i) * 260ms);
}
.agent__reply p { max-width: 34ch; }
.agent__order { transition: opacity 560ms cubic-bezier(0.22, 1, 0.36, 1) 2450ms, transform 640ms cubic-bezier(0.22, 1, 0.36, 1) 2450ms; }

/* What the agent knows how to do: quiet chips under the name. */
.agent__skills {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 550ms ease 1650ms, transform 600ms cubic-bezier(0.22, 1, 0.36, 1) 1650ms;
}
.agent__skills li {
  font: 500 12px/1 var(--font-body);
  color: #c7c7cc;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
}
.agent__stage.is-playing .agent__skills { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .agent__skills { transform: none !important; transition-duration: 200ms !important; transition-delay: 0ms !important; }
}
.agent__caption--modes {
  margin-top: 6px;
  color: #d4d4d4;
  letter-spacing: 0.02em;
  transition-delay: 1580ms, 1580ms;
}
.agent__skills { transition-delay: 1720ms, 1720ms; }

/* Reel CTA: centred under the cards, appears once they have landed. */
.reel__cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: clamp(48px, 6vw, 80px);
}
.reel__cta {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  background: #fff;
  color: #0a0a0a;
  font: 600 16px/1 var(--font-body);
  text-decoration: none;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 200ms ease;
}
.reel:has(.reel__card.is-landed) .reel__cta,
.reel--static .reel__cta { opacity: 1; transform: none; transition-delay: 350ms, 350ms, 0ms; }
.reel__cta:hover { background: #e8e8ed; }
.reel__cta:active { transform: scale(0.97); transition-duration: 100ms; }
.reel__cta:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
/* Agent CTA: same button, appears after the order card. */
.agent__cta-wrap { margin-top: clamp(32px, 4vw, 56px); }
.agent:has(.agent__stage.is-playing) .agent__cta { opacity: 1; transform: none; transition-delay: 2900ms, 2900ms, 0ms; }
/* Web CTA: always there, no entrance or press animation (Arthur, 30 sep). */
.reel .reel__cta,
.reel .reel__cta:active {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Agent CTA: fixed too, no animation. */
.agent .reel__cta,
.agent .reel__cta:active { opacity: 1; transform: none; transition: none; }

/* ===== Software a medida =====
   Mess (tilted chips) → arrow → one clean panel. On play the chips straighten
   and fade toward the panel, then the panel rows arrive one by one. */
.soft {
  background: #0a0a0a;
  color: #fff;
  padding: clamp(48px, 7vw, 96px) 0 clamp(96px, 10vw, 140px);
}
.soft .container { max-width: min(1720px, 94vw); }
.soft__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(24px, 4vw, 56px) 0;
}
.soft__mess { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; justify-items: start; }
.soft__chip {
  font: 500 clamp(15px, 1.2vw, 18px)/1 var(--font-body);
  color: #d4d4d4;
  padding: 16px 20px;
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.03);
  transform: translateX(var(--x)) rotate(var(--r));
  transition:
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 600ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 600ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(400ms + var(--i) * 120ms);
}
.soft__arrow { width: clamp(48px, 5vw, 72px); color: #6e6e73; }
.soft__arrow svg { width: 100%; height: auto; display: block; }
.soft__panel {
  border-radius: 18px;
  background: #f5f5f7;
  color: #0a0a0a;
  padding: 18px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1) 700ms, transform 800ms cubic-bezier(0.22, 1, 0.36, 1) 700ms;
}
.soft__panel-head { display: flex; align-items: center; gap: 12px; padding: 4px 6px 14px; border-bottom: 1px solid #e5e5ea; }
.soft__panel-head p { margin: 0; font: 600 15px/1 var(--font-body); }
.soft__dots { display: inline-flex; gap: 6px; }
.soft__dots i { width: 10px; height: 10px; border-radius: 50%; background: #d1d1d6; display: block; }
.soft__rows { list-style: none; margin: 0; padding: 8px 0 0; display: grid; }
.soft__row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 8px;
  border-bottom: 1px solid #ececf0;
  font: 500 clamp(14px, 1.1vw, 16px)/1.3 var(--font-body);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 500ms ease, transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(1150ms + var(--i) * 160ms);
}
.soft__row:last-child { border-bottom: 0; }
.soft__tag {
  font: 600 12px/1 var(--font-body);
  font-style: normal;
  padding: 7px 10px;
  border-radius: 999px;
  background: #e8e8ed;
  color: #3a3a3c;
  white-space: nowrap;
}
.soft__tag--ok { background: #dff5e6; color: #177a3c; }
.soft__tag--go { background: #e3efff; color: #0a5fcc; }
.soft__tag--warn { background: #fff2dc; color: #9a5b00; }
/* Played */
.soft__stage.is-playing .soft__chip { transform: translateX(24px) rotate(0deg); opacity: 0.25; filter: blur(1px); }
.soft__stage.is-playing .soft__panel { opacity: 1; transform: none; }
.soft__stage.is-playing .soft__row { opacity: 1; transform: none; }
.soft .reel__cta, .soft .reel__cta:active { opacity: 1; transform: none; transition: none; }

@media (max-width: 900px) {
  .soft__stage { grid-template-columns: 1fr; }
  .soft__arrow { justify-self: center; transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
  .soft__chip, .soft__panel, .soft__row { transition-duration: 200ms !important; transition-delay: 0ms !important; }
  .soft__stage.is-playing .soft__chip { transform: none; filter: none; }
}
/* Software: let the mess be read for ~1 s before it tidies up. */
.soft__chip { transition-delay: calc(1100ms + var(--i) * 120ms); }
.soft__panel { transition-delay: 1350ms, 1350ms; }
.soft__row { transition-delay: calc(1800ms + var(--i) * 160ms); }
/* "Ver todos" at the title's height, pushed to the right. */
.reel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}
.reel__head .reel__title { margin-right: auto; }
.reel__all {
  flex: none;
  font: 500 16px/1 var(--font-body);
  color: #d4d4d4;
  text-decoration: none;
  white-space: nowrap;
}
.reel__all:hover { color: #fff; }
.reel__all:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 4px; }


/* ===== Nav aligned with the hero title (3 oct 2026) =====
   Like clay.global, the lockup's left edge lines up with the hero title:
   headline card at left 32px + 36px padding = 68px. The nav spans the page
   and mirrors that gutter on the right. Phones keep the old gutter. */
@media (min-width: 641px) {
  .nav__inner {
    max-width: none;
    padding-left: 68px;
    padding-right: 68px;
  }
}

/* ===== Hero title at clay.global scale (3 oct 2026) =====
   Measured clay.global at 1920x1000: 86px, line-height 1.1, -0.04em.
   4.48vw reaches 86px at 1920. Inter 600 stays (the wordmark shares it);
   tracking tightens as the size grows. Three lines on desktop via the
   dictionary's .hg__title-break; the card shrink-wraps to the longest line. */
@media (min-width: 641px) {
  html[data-entrance="react"] .hg__title {
    font-size: clamp(34px, 4.48vw, 86px);
    line-height: 1.08;
    letter-spacing: -0.03em;
  }
}
@media (min-width: 1024px) {
  html[data-entrance="react"] .hg__headline {
    max-width: calc(100% - 64px);
  }
}
@media (max-width: 640px) {
  html[data-entrance="react"] .hg__title {
    font-size: clamp(30px, 9vw, 40px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.025em;
  }
}

/* ===== Hero peek (3 oct 2026) =====
   The hero stops a little short of the viewport so the top of the black
   #reel block shows: a quiet hint that the page keeps going (clay.global
   shows ~75px of its next block). svh so mobile browser bars don't eat it. */
html[data-entrance="react"] .hg {
  height: calc(100vh - clamp(56px, 7vh, 72px));
  height: calc(100svh - clamp(56px, 7svh, 72px));
}
@media (max-width: 640px) {
  html[data-entrance="react"] .hg {
    height: calc(100vh - 44px) !important;
    height: calc(100svh - 44px) !important;
  }
}

/* ===== Frosted nav over the hero (3 oct 2026) =====
   main.js adds .nav--frosted once the page leaves the top. A translucent,
   blurred layer (like clay.global) so the big hero title passing underneath
   never crosses the wordmark or links; a soft edge, not a hard divider.
   Out-ranks the phone rule that forces the bar transparent over .hg. The
   fade reuses the .nav transition already in styles.css. */
body:has(.hg) .nav.nav--frosted:not(.nav--scrolled) {
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: saturate(140%) blur(16px) !important;
  -webkit-backdrop-filter: saturate(140%) blur(16px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}
/* The burger's light lines vanish on the frosted white; darken them while
   the menu is closed (open, the menu sheet is dark and they stay light). */
body:has(.hg) .nav.nav--frosted .nav__burger:not(.nav__burger--open) span {
  background: #0a0a0a;
}
@media (prefers-reduced-transparency: reduce) {
  body:has(.hg) .nav.nav--frosted:not(.nav--scrolled) {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ===== Final CTA with a rotating key word (3 oct 2026) =====
   Like the reference: the lead in a regular weight, the key word bold on its
   own line, so its changing width never shifts the rest of the sentence.
   The word's line clips what leaves it (drop / slide read as a mask). The
   cycle itself is components/home/RotatingWord.tsx (GSAP). */
.final-cta__lead {
  display: block;
  font-weight: 500;
}
.final-cta__word-wrap {
  display: block;
  overflow: hidden;
  perspective: 600px;
  padding-bottom: 0.12em; /* room for descenders (the j in "mensajes") */
}
.final-cta__word {
  display: inline-block;
  font-weight: 700;
}
.final-cta__ch {
  display: inline-block;
  white-space: pre;
  backface-visibility: hidden;
  transform-origin: 50% 50% -0.3em;
}

/* ===== Reel ring (3 oct 2026) =====
   The 21st.dev ring (components/ui/image-fan-carousel.tsx) waits invisible
   until hero-reel.js has landed the hero cards on it (.reel.is-landed), then
   fades in under them while the flying clones fade out (.is-handoff). */
.reel__carousel {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  opacity: 0;
  transition: opacity 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reel.is-landed .reel__carousel,
.reel--static .reel__carousel { opacity: 1; }
.reel-fly.is-handoff { opacity: 0; transition: opacity 380ms cubic-bezier(0.22, 1, 0.36, 1); }
/* Wordmark of the centred project, under the ring. */
.reel__carousel a { color: inherit; text-decoration: none; }
.reel__carousel a:focus-visible { outline: 2px solid #fff; outline-offset: 6px; border-radius: 4px; }
.reel__carousel .reel__logo { height: 26px; }
.reel__carousel .reel__logo--badge { height: 38px; }
.reel__carousel .reel__logo--undim { height: 20px; }
.reel__carousel .reel__wordmark { font-size: 13px; }
.reel .reel__cta-wrap { margin-top: clamp(24px, 3vw, 40px); }
/* The ring's outer thumbnails reach past a phone's edge: clip them there
   (clip, not hidden, so the section does not become a scroll container). */
.reel { overflow-x: clip; }
/* While hero-reel.js flies the cards (they live inside the hero), the hero
   stops clipping so each card crosses its edge in one piece. */
body.reel-flying .hg { overflow: visible; }
/* …except the rest of the mosaic, which melts away inside the hero's box. */
.reel-fly--rest { right: 0; bottom: 0; width: auto; height: auto; overflow: hidden; z-index: 4; }

/* ===== Phone top bar, like clay.global (3 oct 2026) =====
   Symbol only, no language switch (it stays inside the menu), and a dark
   burger from the start: its light lines vanished on the white hero. */
@media (max-width: 768px) {
  html[data-entrance="react"] .nav__logo-text { display: none; }
  html[data-entrance="react"] .nav__actions .lang-toggle { display: none; }
  html[data-entrance="react"] .nav__actions { --nav-actions-start: 0; }
  body:has(.hg) .nav .nav__burger:not(.nav__burger--open) span { background: #0a0a0a; }
}

/* Statement: continuous dark background into the reel. */
.statement { background: #0a0a0a; color: #fff; position: relative; }
/* Keep flying cards inside the viewport horizontally, with vertical flight intact. */
html:has(.statement) { overflow-x: clip; }

/* ===== iPhone layer budget (5 oct 2026) =====
   Arthur's iPhone recording ("prueba 4") shows the page itself still (±0.01
   px) but 1-2 px slivers of logos flickering above the Stack rows: Safari
   redrawing in pieces when it runs short of graphics memory (this phone has
   already killed the tab once over memory). On touch screens, drop the
   promoted layers that buy nothing there: the hero columns no longer drift,
   and the Stack logos only cross-fade. */
@media (hover: none) {
  .marquee__col,
  .tools__logo { will-change: auto; }
}