/* ════════════════════════════════════════════════════════════════
   CLIENDER · PAGES
   Page-level layouts: home, hub vertical, servicio L2
═══════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   HERO (home + hub)
═══════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100vh;
  padding-top: clamp(7rem, 6rem + 4vw, 11rem);
  padding-bottom: clamp(3rem, 2rem + 3vw, 6rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: clip;
}
.hero.hero--inner {
  min-height: auto;
  justify-content: flex-start;
  padding-top: clamp(0.75rem, 0.5rem + 1vw, 1.75rem);
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 4.5rem);
}
.hero__scene {
  position: absolute;
  inset: 0;
  z-index: var(--z-canvas);
  pointer-events: none;
  overflow: hidden;
}
.hero__scene canvas { width: 100%; height: 100%; display: block; position: relative; z-index: 2; }
/* Fallback ambient gradient — visible even without 3D */
.hero__scene::before,
.hero__scene::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  z-index: 1;
  pointer-events: none;
  animation: drift 22s ease-in-out infinite alternate;
}
.hero__scene::before {
  width: 50vw; height: 50vw; max-width: 760px; max-height: 760px;
  right: -12%; top: 6%;
  background: radial-gradient(circle, rgba(167,139,250,0.55), rgba(167,139,250,0) 65%);
}
.hero__scene::after {
  width: 44vw; height: 44vw; max-width: 640px; max-height: 640px;
  right: 18%; bottom: -8%;
  background: radial-gradient(circle, rgba(244,114,182,0.42), rgba(244,114,182,0) 65%);
  animation-delay: -8s;
}
.hero__bg-cyan {
  position: absolute;
  z-index: 1;
  width: 38vw; height: 38vw;
  max-width: 540px; max-height: 540px;
  left: -8%; top: 28%;
  background: radial-gradient(circle, rgba(111,227,255,0.40), rgba(111,227,255,0) 65%);
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.6;
  pointer-events: none;
  animation: drift 26s ease-in-out infinite alternate-reverse;
}
@keyframes drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(40px, -30px) scale(1.08); }
  100% { transform: translate(-30px, 40px) scale(0.96); }
}
.hero__grid {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(rgba(235,234,228,0.025) 1px, transparent 1px) 0 0 / 80px 80px,
    linear-gradient(90deg, rgba(235,234,228,0.025) 1px, transparent 1px) 0 0 / 80px 80px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000, transparent 80%);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .hero__scene::before, .hero__scene::after, .hero__bg-cyan { animation: none; }
}
.hero__inner {
  position: relative;
  z-index: var(--z-base);
  display: grid;
  gap: clamp(2rem, 1rem + 2vw, 4rem);
}

/* ─── HERO VIDEO (full-bleed background) ───────────────── */
.hero__scene {
  background: #0B0E13;
}
.hero {
  padding-top: calc(var(--topbar-h, 64px) + clamp(5rem, 4rem + 4vw, 9rem));
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* cover → fills the hero edge-to-edge, no dark gaps; topbar overlays the top */
  object-fit: cover;
  object-position: 50% 35%;
  background: #0B0E13;
  z-index: 1;
}
.hero__video-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    /* heavy bottom-to-top dark ramp — keeps text readable */
    linear-gradient(to top, rgba(11,14,19,0.97) 0%, rgba(11,14,19,0.72) 40%, rgba(11,14,19,0.45) 70%, rgba(11,14,19,0.25) 100%),
    /* subtle brand tint */
    linear-gradient(135deg, rgba(143,126,233,0.22) 0%, transparent 55%);
}
.hero__scene canvas { display: none; }
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}

.hero__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.hero__head .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--purple); margin-right: 0.6rem; box-shadow: 0 0 0 4px rgba(143,126,233,0.18); animation: blink 2.6s ease-in-out infinite; }
@keyframes blink { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } }

.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.045em;
  text-wrap: balance;
  max-width: 18ch;
}

.hero__sub {
  font-size: var(--lead);
  font-weight: 400;
  color: var(--fg-dim);
  max-width: 52ch;
  text-wrap: pretty;
  margin-top: 0.5rem;
}

.hero__actions {
  display: flex; flex-wrap: wrap; gap: 0.85rem;
  margin-top: 0.6rem;
}

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(2rem, 1rem + 2vw, 4rem);
  align-items: end;
}
@media (max-width: 720px) {
  .hero__stats { gap: 0.5rem; }
}
.stat {
  padding: 1rem 1.4rem;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--r-lg);
  background: rgba(11,14,19,0.38);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
@media (max-width: 720px) {
  .hero__stats { grid-template-columns: 1fr 1fr; row-gap: 1.5rem; }
}
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.2rem + 2.5vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--fg);
  display: flex; align-items: baseline; gap: 0.1em;
}
.stat__num .plus { color: var(--purple-light); font-size: 0.7em; }
.stat__label {
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

/* ════════════════════════════════════════════════════════════════
   VERTICALES (split rows on home)
═══════════════════════════════════════════════════════════════ */
.verticals {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}
.vrow {
  display: grid;
  grid-template-columns: 0.9fr 1.4fr;
  gap: clamp(2rem, 1rem + 2vw, 4rem);
  align-items: stretch;
  padding-block: clamp(2rem, 1.2rem + 1.6vw, 3.4rem);
  border-bottom: 1px solid var(--line);
  position: relative;
  isolation: isolate;
}
.vrow::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 0% 50%, var(--accent-tint), transparent 70%);
  opacity: 0;
  transition: opacity 800ms var(--ease-out);
  z-index: -1;
}
.vrow:hover::before { opacity: 1; }
.vrow[data-v="sales"]     { --accent-tint: oklch(60% 0.085 150 / 0.08); --vc: var(--sales); }
.vrow[data-v="tech"]      { --accent-tint: oklch(62% 0.13 278 / 0.07);  --vc: var(--tech); }
.vrow[data-v="media"]     { --accent-tint: oklch(60% 0.075 192 / 0.07); --vc: var(--media); }
.vrow[data-v="formacion"] { --accent-tint: oklch(68% 0.09 72 / 0.07);   --vc: var(--formacion); }
@media (max-width: 820px) { .vrow { grid-template-columns: 1fr; } }

.vrow__num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--fg-mute);
  margin-bottom: 0.8rem;
}
.vrow__num .pill {
  display: inline-block;
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--vc);
  margin-right: 0.5rem;
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--vc), transparent 78%);
}
.vrow__title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.3rem + 2vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.96;
  margin-bottom: 0.8rem;
}
.vrow__lede {
  color: var(--fg-dim);
  max-width: 46ch;
  margin-bottom: 1.5rem;
  font-size: 1.05rem;
  line-height: 1.5;
}
.vrow__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--fg);
  font-weight: 500;
  font-size: 0.95rem;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 4px;
  transition: border-color var(--t-base), color var(--t-base);
}
.vrow:hover .vrow__cta { color: var(--vc); border-color: var(--vc); }
.vrow:hover .vrow__cta .arrow { transform: translateX(6px); }
.vrow__cta .arrow { transition: transform var(--t-base) var(--ease-out); }

.vrow__items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.55rem;
}
@media (max-width: 520px) { .vrow__items { grid-template-columns: 1fr; } }
.vrow__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.95rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  font-size: 0.92rem;
  color: var(--fg-dim);
  transition: border-color var(--t-base), color var(--t-base), transform var(--t-base);
}
.vrow__item:hover { color: var(--fg); border-color: var(--vc); transform: translateY(-2px); }
.vrow__item .arrow { opacity: 0; transition: opacity var(--t-fast), transform var(--t-fast); }
.vrow__item:hover .arrow { opacity: 1; transform: translateX(3px); }
.vrow__item .badge {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  color: var(--fg-mute);
  text-transform: uppercase;
}
.vrow__item .badge.is-ia {
  color: var(--grad-2);
  border-color: rgba(167,139,250,0.4);
  background: rgba(167,139,250,0.08);
}

/* Portrait video rotated to landscape — sized by JS ResizeObserver */
.vrow__media-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  z-index: 1;
  border-radius: inherit;
}
.vrow__media-video.is-vertical {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  object-fit: cover;
  will-change: transform;
}
.vrow__media-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(11,14,19,0.18) 0%, transparent 30%, transparent 65%, rgba(11,14,19,0.45) 100%),
    linear-gradient(90deg, color-mix(in oklch, var(--vc), transparent 82%) 0%, transparent 40%);
  border-radius: inherit;
}
.vrow__media {
  position: relative;
  min-height: 240px;
  perspective: 1000px;
  transform-style: preserve-3d;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background:
    repeating-linear-gradient(
      135deg,
      color-mix(in oklch, var(--vc), transparent 92%) 0 14px,
      transparent 14px 28px
    ),
    var(--panel);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--t-base);
}
.vrow:hover .vrow__media { border-color: var(--vc); }
.vrow__media-link {
  position: absolute;
  inset: 0;
  z-index: 5;
  cursor: pointer;
}
.vrow__media-meta {
  position: absolute;
  top: 0.9rem; left: 0.9rem; right: 0.9rem;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--fg-mute);
  text-transform: uppercase;
}
.vrow__media-label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--fg-dim);
  padding: 0.5rem 0.85rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-pill);
  background: color-mix(in oklch, var(--panel), transparent 20%);
  backdrop-filter: blur(4px);
}

/* ════════════════════════════════════════════════════════════════
   SECTORES GRID
═══════════════════════════════════════════════════════════════ */
.sectors {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
}
@media (max-width: 920px) { .sectors { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .sectors { grid-template-columns: 1fr; } }
.sector {
  padding: 1.4rem 1.3rem 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 260px;
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--t-base), transform var(--t-base);
}
.sector:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.sector__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: -2;
  transition: transform 600ms var(--ease-out), filter 600ms;
  filter: saturate(0.85) brightness(0.72);
}
.sector::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(11,14,19,0.35) 0%, transparent 40%, rgba(11,14,19,0.7) 75%, rgba(11,14,19,0.92) 100%);
  transition: opacity var(--t-base);
}
.sector:hover .sector__bg { transform: scale(1.05); filter: saturate(1) brightness(0.8); }
.sector__idx {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.6);
}
.sector__name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: #fff;
  text-wrap: balance;
  margin-top: 3.5rem;
}
.sector__arrow {
  position: absolute;
  top: 1.2rem; right: 1.2rem;
  width: 28px; height: 28px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  display: grid; place-items: center;
  color: rgba(255,255,255,0.7);
  transition: transform var(--t-base), color var(--t-base), border-color var(--t-base), background var(--t-base);
}
.sector:hover .sector__arrow {
  color: #fff;
  border-color: var(--purple-light);
  background: color-mix(in oklch, var(--purple), transparent 70%);
  transform: rotate(-45deg);
}

/* ════════════════════════════════════════════════════════════════
   PROCESO · PASOS
═══════════════════════════════════════════════════════════════ */
.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  counter-reset: step;
  position: relative;
}
.process::before {
  content: '';
  position: absolute;
  top: 28px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 6%, var(--line-strong) 94%, transparent);
}
.process::after {
  content: '';
  position: absolute;
  top: 27px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    transparent 10%,
    color-mix(in oklch, var(--purple), transparent 30%) 38%,
    var(--purple-light) 50%,
    color-mix(in oklch, var(--purple), transparent 30%) 62%,
    transparent 90%,
    transparent 100%
  );
  background-size: 50% 100%;
  background-repeat: no-repeat;
  background-position: -50% 0;
  animation: process-flow 3.2s ease-in-out infinite;
  pointer-events: none;
  border-radius: 2px;
}
@keyframes process-flow {
  0%   { background-position: -50% 0; opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { background-position: 150% 0; opacity: 0; }
}
@media (max-width: 800px) {
  .process { grid-template-columns: 1fr 1fr; }
  .process::before { display: none; }
  .process::after  { display: none; }
}
@media (prefers-reduced-motion: reduce) { .process::after { display: none; } }
.step {
  position: relative;
  padding-top: 4.2rem;
  counter-increment: step;
}
.step__dot {
  position: absolute;
  top: 18px; left: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--ink);
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
}
.step__dot::after {
  content: '';
  width: 8px; height: 8px;
  background: var(--purple);
  border-radius: 50%;
  transition: background var(--t-base), transform var(--t-base);
}
.step:hover .step__dot::after { background: var(--grad-2); transform: scale(1.3); }
.step__num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--fg-mute);
  margin-bottom: 0.3rem;
}
.step__num::before { content: '0' counter(step) ' / '; }
.step__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}
.step__desc { color: var(--fg-dim); font-size: 0.95rem; line-height: 1.55; max-width: 28ch; }

/* ════════════════════════════════════════════════════════════════
   CTA BLOCK
═══════════════════════════════════════════════════════════════ */
.ctaBlock__logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}
.ctaBlock__logo img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
}
.ctaBlock__logo span {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.ctaBlock {
  border: 1px solid color-mix(in oklch, var(--purple), transparent 60%);
  border-radius: var(--r-xl);
  padding: clamp(2.5rem, 2rem + 3vw, 5rem) clamp(1.5rem, 1rem + 3vw, 4rem);
  background:
    radial-gradient(ellipse 70% 90% at 0% 0%, color-mix(in oklch, var(--purple), transparent 80%), transparent 60%),
    radial-gradient(ellipse 60% 80% at 100% 100%, color-mix(in oklch, var(--media), transparent 82%), transparent 60%),
    linear-gradient(180deg, var(--panel), var(--panel-2));
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--purple), transparent 80%) inset,
    0 40px 100px -40px color-mix(in oklch, var(--purple), transparent 60%);
}
/* Decorative ornament: oversized arrow watermark */
.ctaBlock::after {
  content: '';
  position: absolute;
  right: clamp(-2rem, -4vw, -1rem);
  bottom: clamp(-3rem, -5vw, -1.5rem);
  width: clamp(180px, 26vw, 360px);
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in oklch, var(--purple), transparent 88%), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.ctaBlock__inner {
  display: grid;
  grid-template-columns: 1.5fr auto;
  gap: clamp(2rem, 1.5rem + 2vw, 4rem);
  align-items: center;
  position: relative;
  z-index: 2;
}
@media (max-width: 760px) {
  .ctaBlock__inner { grid-template-columns: 1fr; align-items: stretch; }
}
.ctaBlock__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 3vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-wrap: balance;
}
.ctaBlock__sub {
  color: var(--fg-dim);
  font-size: 1.05rem;
  margin-top: 1rem;
  max-width: 38ch;
}
.ctaBlock__actions {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  align-items: stretch;
  padding: 1.6rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: color-mix(in oklch, var(--bg), transparent 30%);
  backdrop-filter: blur(8px);
  min-width: 240px;
}
.ctaBlock__actions .btn,
.ctaBlock__actions .btn--lg {
  justify-content: center;
  width: 100%;
  padding: 1.15rem 1.7rem;
  font-size: 1.05rem;
  font-weight: 600;
}
.ctaBlock__actions .btn-link {
  justify-content: center;
  text-align: center;
  border-bottom: 0;
  padding: 0.4rem 0.6rem;
  color: var(--fg-dim);
}
.ctaBlock__actions .btn-link:hover { color: var(--purple-light); }
@media (max-width: 760px) {
  .ctaBlock__actions { min-width: 0; }
}

/* ── Calendar variant — stacked: text top, full-width calendar below ── */
.ctaBlock--cal {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.ctaBlock--cal .ctaBlock__inner {
  grid-template-columns: 1fr;
  padding: clamp(2rem, 1.5rem + 2vw, 3rem) clamp(2rem, 1.5rem + 2vw, 3rem) 1.5rem;
  align-items: start;
}
/* Wrap that adds padding and background for the calendar card */
.ctaBlock__cal-wrap {
  padding: 0 clamp(1.5rem, 1rem + 1.5vw, 2.5rem) clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}
.ctaBlock__cal {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  height: 860px;
  max-width: 720px;
  width: 100%;
  margin-inline: auto;
  background: #ffffff;
  overflow: auto;
  overscroll-behavior: contain;
  position: relative;
  box-shadow: 0 18px 50px -24px rgba(0,0,0,0.4);
}
.ctaBlock__cal iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
@media (max-width: 900px) {
  .ctaBlock__cal { height: 760px; }
  .ctaBlock__cal-wrap { padding: 0 1rem 1.5rem; }
}

/* ════════════════════════════════════════════════════════════════
   HUB · SERVICE CARDS (Sales/Tech/Media)
═══════════════════════════════════════════════════════════════ */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 1000px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .svc-grid { grid-template-columns: 1fr; } }

/* ── Carousel variant (transform-based, Lenis-proof) ── */
.svc-carousel {
  position: relative;
  overflow: hidden;
  padding-block: 2.75rem;
  margin-block: -2.75rem;
  perspective: 1500px;
  perspective-origin: 50% 50%;
}
.svc-grid.is-carousel {
  display: flex;
  grid-template-columns: none;
  gap: 1rem;
  transition: transform 520ms cubic-bezier(.4,0,.2,1);
  will-change: transform;
  transform-style: preserve-3d;
}
.svc-grid.is-carousel .svc {
  flex: 0 0 clamp(270px, 31%, 360px);
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  will-change: transform, opacity;
}
/* JS drives the fisheye transform on each card — don't let the base transition fight it */
.svc-grid.is-carousel.is-fisheye .svc {
  transition: border-color var(--t-base), box-shadow var(--t-base), filter var(--t-base);
}
/* The centered card is the one the visitor can open — make it read as primary */
.svc-grid.is-carousel.is-fisheye .svc.is-center {
  border-color: color-mix(in oklch, var(--purple), transparent 42%);
  box-shadow: 0 22px 60px -22px rgba(0,0,0,0.6);
}
.svc-grid.is-carousel.is-fisheye .svc:not(.is-center) {
  cursor: pointer;
}
.svc-carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  color: var(--fg);
  cursor: pointer;
  z-index: 4;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; line-height: 1;
  box-shadow: 0 8px 24px -10px rgba(0,0,0,0.5);
  transition: border-color var(--t-fast), background var(--t-fast), opacity var(--t-fast);
}
.svc-carousel__btn:hover { border-color: var(--purple); background: var(--panel-2); }
.svc-carousel__btn--prev { left: 4px; z-index: 30; }
.svc-carousel__btn--next { right: 4px; z-index: 30; }
/* Keep the next arrow clear of the fixed right-side dial nav on desktop so it stays clickable */
@media (min-width: 981px){ .svc-carousel__btn--next { right: 3.5rem; } }
.svc-carousel__btn[disabled] { opacity: 0; pointer-events: none; }
@media (max-width: 640px) {
  .svc-grid.is-carousel .svc { flex: 0 0 85%; }
  .svc-carousel__btn { display: none; }
}

.svc {
  position: relative;
  background: var(--panel) var(--svc-bg, transparent) center / cover no-repeat;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.4rem 1.4rem 1.6rem;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  box-shadow: none;
  transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
  isolation: isolate;
}
.svc::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(143,126,233,0.10), transparent 70%);
  opacity: 0;
  transition: opacity var(--t-base);
  z-index: -1;
}
.svc:hover { border-color: color-mix(in oklch, var(--purple), transparent 58%); transform: translateY(-3px); box-shadow: 0 12px 36px -12px rgba(0,0,0,0.45); }
.svc:hover::before { opacity: 1; }
.svc.is-primary {
  background: linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 60%);
  border-color: var(--line-strong);
}
.svc.is-primary::after { display: none; }
.svc__header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: auto;
}
.svc__idx {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--fg-mute);
}
.svc__pill {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  border: 1px solid;
  background: var(--accent-soft);
  color: var(--purple-light);
  border-color: rgba(143,126,233,0.3);
}
.svc__pill.is-ia { color: var(--grad-2); border-color: rgba(167,139,250,0.4); background: rgba(167,139,250,0.10); }
.svc__pill.is-kw { color: var(--grad-1); border-color: rgba(111,227,255,0.4); background: rgba(111,227,255,0.10); }
.svc__pill.is-trend { color: var(--grad-3); border-color: rgba(244,114,182,0.4); background: rgba(244,114,182,0.10); }

.svc__title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 4rem;
  line-height: 1.1;
  text-wrap: balance;
}
.svc__desc {
  color: var(--fg-dim);
  font-size: 0.9rem;
  line-height: 1.55;
  margin-top: 0.65rem;
}
.svc__foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.svc__more {
  font-size: 0.85rem;
  color: var(--fg-dim);
  display: inline-flex; align-items: center; gap: 0.4rem;
  transition: color var(--t-fast);
}
.svc:hover .svc__more { color: var(--fg); }
.svc:hover .svc__more .arrow { transform: translateX(3px); }
.svc__more .arrow { transition: transform var(--t-fast); }

/* ════════════════════════════════════════════════════════════════
   DIFFERENTIATORS
═══════════════════════════════════════════════════════════════ */
.diffs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 0.5rem + 0.8vw, 1.5rem);
}
@media (max-width: 900px) { .diffs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .diffs { grid-template-columns: 1fr; } }
.diff {
  padding: 1.8rem 1.6rem 2rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  display: flex; flex-direction: column; gap: 0.7rem;
  position: relative;
  overflow: hidden;
  box-shadow: none;
  transition: border-color var(--t-base), background var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.diff::after {
  content: '';
  position: absolute;
  inset: auto -30% -60% auto;
  width: 70%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(143,126,233,0.10), transparent 65%);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
  pointer-events: none;
}
.diff:hover {
  border-color: color-mix(in oklch, var(--purple-light), transparent 65%);
  background: var(--panel-2);
  transform: translateY(-2px);
  box-shadow: 0 10px 32px -12px rgba(0,0,0,0.4);
}
.diff:hover::after { opacity: 1; }
.diff__num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--purple-light);
}
.diff__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.diff__desc { color: var(--fg-dim); font-size: 0.93rem; line-height: 1.55; }

/* ════════════════════════════════════════════════════════════════
   FAQ
═══════════════════════════════════════════════════════════════ */
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.faq__item {
  border-bottom: 1px solid var(--line);
  padding-block: 0.4rem;
}
.faq__sum {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.35rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: color var(--t-fast);
}
.faq__sum::-webkit-details-marker { display: none; }
.faq__sum:hover { color: var(--purple-light); }
.faq__sum .ico {
  width: 26px; height: 26px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: background var(--t-base), border-color var(--t-base), transform var(--t-base);
}
.faq__item[open] .faq__sum .ico { background: var(--purple); border-color: var(--purple); color: var(--paper); transform: rotate(45deg); }
.faq__answer { padding: 0 0 1.4rem; color: var(--fg-dim); max-width: 70ch; line-height: 1.6; }

/* ─── Back-to-index link (case studies, service pages) ─── */
.case-back-link {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-dim);
  text-decoration: none;
  margin-bottom: 1.4rem;
  transition: color 0.15s ease, gap 0.15s ease;
}
.case-back-link:hover { color: var(--fg); gap: 0.6rem; }
.l2-hero[data-photo-hero] .case-back-link { color: rgba(244,243,239,0.78); }
.l2-hero[data-photo-hero] .case-back-link:hover { color: #F4F3EF; }

/* ════════════════════════════════════════════════════════════════
   SERVICE L2 — HERO + BLOCKS
═══════════════════════════════════════════════════════════════ */
.l2-hero {
  margin-top: var(--topbar-h, 64px);
  padding-top: clamp(2.75rem, 2rem + 2.5vw, 5rem);
  padding-bottom: clamp(4rem, 3rem + 2.5vw, 6.5rem);
  position: relative;
  overflow: clip;
}
.l2-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 50% at 80% 20%, rgba(111,227,255,0.07), transparent 60%),
    radial-gradient(ellipse 40% 60% at 10% 80%, rgba(143,126,233,0.08), transparent 70%);
  pointer-events: none;
}
.l2-hero__inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(2rem, 1rem + 3vw, 5rem);
  align-items: end;
}
@media (max-width: 820px) { .l2-hero__inner { grid-template-columns: 1fr; } }
.l2-hero__h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.4rem + 3.5vw, 5.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-wrap: balance;
}
/* Photo hero — dedicated scrim element.
   The darkening gradient MUST live on its own layer, not stacked into the same
   background-image as the photo url() — mixing multiple gradients + url() in one
   background-image list fails to composite correctly in some renderers, silently
   dropping the darkening and leaving the raw photo at full brightness. Keeping the
   photo as the section's own background and the scrim as a separate absolutely
   positioned child avoids that. */
.l2-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(115deg, rgba(8,10,14,0.95) 0%, rgba(8,10,14,0.88) 34%, rgba(8,10,14,0.58) 58%, rgba(8,10,14,0.42) 100%),
    linear-gradient(to bottom, rgba(8,10,14,0.30) 0%, rgba(8,10,14,0.08) 35%, rgba(8,10,14,0.88) 100%);
}
.l2-hero[data-photo-hero] > .container { position: relative; z-index: 1; }
/* Safety net: keep the title/lede/CTA legible over a real photo in BOTH themes.
   var(--fg)/var(--fg-dim)/var(--line-strong) flip to dark in light mode, which would
   turn invisible against the dark scrim -- so pin these to a fixed light value instead. */
.l2-hero[data-photo-hero] .l2-hero__h1,
.l2-hero[data-photo-hero] .l2-hero__sub {
  text-shadow: 0 2px 20px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.6);
}
.l2-hero[data-photo-hero] .l2-hero__h1 { color: #F4F3EF; }
.l2-hero[data-photo-hero] .l2-hero__sub { color: rgba(244,243,239,0.82); }
.l2-hero[data-photo-hero] .btn--ghost {
  --fg-: #F4F3EF;
  border-color: rgba(244,243,239,0.32);
}
.l2-hero[data-photo-hero] .btn--ghost:hover {
  border-color: rgba(244,243,239,0.55);
  background: rgba(244,243,239,0.08);
}
.l2-hero__sub {
  color: var(--fg-dim);
  font-size: var(--lead);
  margin-top: 1.3rem;
  max-width: 50ch;
  line-height: 1.45;
}
.l2-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 1px solid color-mix(in oklch, var(--purple), transparent 70%);
  border-radius: var(--r-lg);
  background: var(--panel);
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--purple), transparent 86%) inset, 0 16px 48px -18px rgba(0,0,0,0.32);
}
.l2-meta::before { display: none; }
.l2-meta__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
  padding: 0.85rem 1.2rem;
  border-bottom: 1px solid var(--line);
  transition: background var(--t-fast);
}
.l2-meta__row:hover { background: var(--panel-2); }
.l2-meta__row:last-child { border-bottom: 0; }
.l2-meta__k { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; color: var(--purple-light); text-transform: uppercase; flex-shrink: 0; line-height: 1.4; }
.l2-meta__v { font-size: 0.92rem; color: var(--fg); font-weight: 600; text-align: right; min-width: 0; flex: 1 1 auto; line-height: 1.4; text-wrap: pretty; }

/* L2 content blocks */
.block-grid {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: clamp(2rem, 1rem + 2vw, 4rem);
  padding-block: clamp(3rem, 2rem + 2vw, 5rem);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 820px) { .block-grid { grid-template-columns: 1fr; } }
.block-grid__head {
  position: sticky;
  top: 100px;
  align-self: start;
}
.block-grid__num {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  color: var(--purple-light);
  background: color-mix(in oklch, var(--purple), transparent 88%);
  border: 1px solid color-mix(in oklch, var(--purple), transparent 75%);
  padding: 0.3rem 0.75rem;
  border-radius: var(--r-pill);
  margin-bottom: 1.2rem;
  text-transform: uppercase;
}
.block-grid__h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  text-wrap: balance;
  max-width: 14ch;
}
.block-grid__lede {
  color: var(--fg-dim);
  font-size: 1rem;
  margin-top: 1rem;
  max-width: 32ch;
  line-height: 1.55;
}

/* ── Steplist (Cómo trabajamos) ── */
.steplist { display: flex; flex-direction: column; gap: 0; position: relative; }
.steplist::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 24px;
  bottom: 24px;
  width: 1px;
  background: linear-gradient(180deg, var(--purple) 0%, color-mix(in oklch, var(--purple), transparent 70%) 100%);
  z-index: 0;
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 1.6s var(--ease-out);
}
.steplist.is-in::before { transform: scaleY(1); }

/* Animated flowing pulse along the line */
.steplist::after {
  content: '';
  position: absolute;
  left: 17px;
  top: 24px;
  bottom: 24px;
  width: 3px;
  background: linear-gradient(180deg,
    transparent 0%,
    color-mix(in oklch, var(--purple), transparent 30%) 30%,
    var(--purple-light) 50%,
    color-mix(in oklch, var(--purple), transparent 30%) 70%,
    transparent 100%
  );
  background-size: 100% 30%;
  background-repeat: no-repeat;
  background-position: 0 -30%;
  z-index: 1;
  border-radius: 3px;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 0 6px color-mix(in oklch, var(--purple), transparent 60%));
}
.steplist.is-in::after {
  animation: steplist-flow 4s ease-in-out 1s infinite;
}
@keyframes steplist-flow {
  0%   { background-position: 0 -30%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { background-position: 0 130%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .steplist::after { display: none; }
  .steplist::before { transform: scaleY(1); transition: none; }
}

.steplist__row {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 1.25rem;
  padding: 1.2rem 0;
  position: relative;
  z-index: 1;
  transition: background var(--t-fast);
  opacity: 0;
  transform: translateY(20px);
}
.steplist.is-in .steplist__row {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.steplist.is-in .steplist__row:nth-child(1) { transition-delay: 0.15s; }
.steplist.is-in .steplist__row:nth-child(2) { transition-delay: 0.35s; }
.steplist.is-in .steplist__row:nth-child(3) { transition-delay: 0.55s; }
.steplist.is-in .steplist__row:nth-child(4) { transition-delay: 0.75s; }
.steplist.is-in .steplist__row:nth-child(5) { transition-delay: 0.95s; }
@media (prefers-reduced-motion: reduce) {
  .steplist__row { opacity: 1; transform: none; }
}
.steplist__row:last-child { border-bottom: 0; }
.steplist__k {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0.15rem;
}
.steplist__k-badge {
  position: relative;
  width: 44px; height: 44px;
  border-radius: 50%;
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    var(--grad-cliender) border-box;
  border: 1.5px solid transparent;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--em-color);
  flex-shrink: 0;
  box-shadow: 0 2px 12px -4px color-mix(in oklch, var(--purple), transparent 70%);
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base), color var(--t-fast);
}
.steplist__row:hover .steplist__k-badge {
  transform: scale(1.08);
  box-shadow: 0 6px 22px -6px color-mix(in oklch, var(--purple), transparent 50%);
}
.steplist__v {
  padding: 0.8rem 1.1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.steplist__row:hover .steplist__v {
  border-color: color-mix(in oklch, var(--purple), transparent 65%);
  box-shadow: 0 4px 24px -8px color-mix(in oklch, var(--purple), transparent 80%);
}
.steplist__label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--purple-light);
  margin-bottom: 0.35rem;
}
.steplist__v h4 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 0.4rem; }
.steplist__v p { color: var(--fg-dim); font-size: 0.93rem; line-height: 1.55; max-width: 56ch; }

/* ── Bullets (Qué es + Entregables) ── */
.bullets { list-style: none; display: grid; grid-template-columns: 1fr; gap: 0.6rem; }
.bullets li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 0.85rem;
  align-items: start;
  font-size: 0.95rem;
  color: var(--fg-dim);
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.bullets li:hover {
  border-color: color-mix(in oklch, var(--purple), transparent 68%);
  background: var(--panel-2);
  transform: translateX(3px);
}
.bullets li::before {
  content: '';
  width: 20px; height: 20px;
  border-radius: 50%;
  background: color-mix(in oklch, var(--purple), transparent 82%);
  border: 1px solid color-mix(in oklch, var(--purple), transparent 60%);
  flex-shrink: 0;
  margin-top: 2px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 10l3.5 3.5L15 7' stroke='%238F7EE9' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 14px;
  background-repeat: no-repeat;
  background-position: center;
}
.bullets li strong { color: var(--em-color); font-weight: 700; }

/* ── Timeline (Tiempos) — pipeline flow ── */
.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
  padding-top: 50px;
}
/* Static base line — runs through the dot centers */
.timeline::before {
  content: '';
  position: absolute;
  top: 30px;
  /* center on dots: dots are at 50% of each 1/4 column */
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: var(--line-strong);
  z-index: 0;
}
/* Animated flow pulse — sits exactly on the same line */
.timeline::after {
  content: '';
  position: absolute;
  top: 29px;
  left: 12.5%;
  right: 12.5%;
  height: 4px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in oklch, var(--purple), transparent 30%) 30%,
    var(--purple-light) 50%,
    color-mix(in oklch, var(--purple), transparent 30%) 70%,
    transparent 100%
  );
  background-size: 45% 100%;
  background-repeat: no-repeat;
  background-position: -45% 0;
  animation: timeline-flow 3.5s ease-in-out infinite;
  pointer-events: none;
  border-radius: 2px;
  z-index: 1;
  filter: drop-shadow(0 0 6px color-mix(in oklch, var(--purple), transparent 60%));
}
@keyframes timeline-flow {
  0%   { background-position: -45% 0; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { background-position: 145% 0; opacity: 0; }
}
@media (max-width: 800px) {
  .timeline { grid-template-columns: 1fr; padding-top: 0; }
  .timeline::before, .timeline::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .timeline::after { display: none; } }

.timeline__col {
  padding: 24px 1rem 0 0;
  position: relative;
}
/* Dot — pulled up to sit on the line */
.timeline__col::before {
  content: '';
  position: absolute;
  top: -27px;   /* pulls dot up out of col, into .timeline's padding-top zone */
  left: 50%;
  transform: translateX(-50%);
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--purple);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 2px var(--purple), 0 0 0 6px color-mix(in oklch, var(--purple), transparent 70%);
  animation: dot-pulse 3.5s ease-in-out infinite;
  z-index: 3;
}
.timeline__col:nth-child(2)::before { animation-delay: 0.85s; }
.timeline__col:nth-child(3)::before { animation-delay: 1.7s; }
.timeline__col:nth-child(4)::before { animation-delay: 2.55s; }
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--purple), 0 0 0 6px color-mix(in oklch, var(--purple), transparent 70%); }
  50%      { box-shadow: 0 0 0 2px var(--purple), 0 0 0 10px color-mix(in oklch, var(--purple), transparent 85%), 0 0 16px 3px color-mix(in oklch, var(--purple), transparent 60%); }
}
@media (max-width: 800px) { .timeline__col::before { display: none; } }

.timeline__when {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--purple-light);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  text-align: center;
}
.timeline__what {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-bottom: 0.5rem;
  text-align: center;
}
.timeline__detail {
  color: var(--fg-mute);
  font-size: 0.85rem;
  line-height: 1.5;
  text-align: center;
  margin: 0 auto;
  max-width: 24ch;
}
@media (max-width: 800px) {
  .timeline__when, .timeline__what, .timeline__detail { text-align: left; margin-left: 0; }
}
.bullets li strong { color: var(--em-color); font-weight: 700; }

/* ════════════════════════════════════════════════════════════════
   VERT DIAL NAV (sticky right)
═══════════════════════════════════════════════════════════════ */
.dial {
  position: fixed;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: flex-end;
}
@media (max-width: 980px) { .dial { display: none; } }
.dial__item {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.25rem 0;
}
.dial__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
  transition: background var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.dial__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
  opacity: 0;
  transform: translateX(8px);
  transition: opacity var(--t-base), transform var(--t-base);
  pointer-events: none;
}
.dial__item:hover .dial__label { opacity: 1; transform: none; }
.dial__item:hover .dial__dot { transform: scale(1.3); }
.dial__item.is-active .dial__dot {
  background: var(--purple);
  box-shadow: 0 0 0 4px rgba(143,126,233,0.2);
  transform: scale(1.3);
}

/* ════════════════════════════════════════════════════════════════
   CASOS + RESEÑAS — iMessage floating bubbles
═══════════════════════════════════════════════════════════════ */
.casos-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1.5rem + 2vw, 4rem);
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(1.8rem, 1.2rem + 2vw, 3rem);
  background: var(--panel);
  position: relative;
  overflow: hidden;
  min-height: 420px;
}
@media (max-width: 780px) {
  .casos-wrap { grid-template-columns: 1fr; }
  .casos-bubbles { display: none; }
}

.casos-text { position: relative; z-index: 1; }

/* Bubble stream container */
.casos-testimonials {
  position: relative;
  height: 400px;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
}

.testimonials-track {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  animation: scroll-testimonials 50s linear infinite;
  padding: 1rem 0;
}

.testimonial-card {
  flex-shrink: 0;
  padding: 1.5rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: all var(--t-base);
}
.testimonial-card:hover {
  border-color: var(--purple);
  background: var(--panel-2);
  transform: translateX(0.5rem);
}

.testimonial-quote {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--fg);
  margin: 0;
  font-style: italic;
}

.testimonial-source {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-top: 0.75rem;
  margin-bottom: 0;
}

@keyframes scroll-testimonials {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

/* iMessage bubble */
.imsg {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 18px 18px 18px 4px;
  padding: 0.75rem 1rem;
  position: relative;
  transition: border-color var(--t-base);
  flex-shrink: 0;
}
.imsg:hover { border-color: var(--sales-border); }
.imsg p {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--fg-dim);
  margin: 0 0 0.4rem 0;
  font-style: italic;
}
.imsg__sender {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--purple);
  display: block;
}

/* Stars decoration */
.imsg::before {
  content: '★★★★★';
  display: block;
  font-size: 0.55rem;
  color: var(--purple);
  letter-spacing: 0.05em;
  margin-bottom: 0.35rem;
  opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
  .bubble-col { animation: none; }
}
.eyebrow--sales { color: var(--sales); }
.eyebrow--tech  { color: var(--tech); }
.eyebrow--media { color: var(--media); }

.platform__head { max-width: 70ch; margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3.5rem); }

.platform__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 1080px) {
  .platform__grid { grid-template-columns: 1fr; }
}

.platform__mock {
  position: sticky;
  top: calc(var(--topbar-h, 64px) + 2rem);
  align-self: start;
}
@media (max-width: 1080px) { .platform__mock { position: static; } }
.mock-app {
  display: flex;
  height: 380px;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  box-shadow:
    0 30px 80px -20px rgba(0,0,0,0.6),
    0 0 60px -30px rgba(143,126,233,0.25);
  background: #0e1117;
  font-size: 0;
}

/* sidebar */
.mock-app__sidebar {
  width: 130px;
  flex-shrink: 0;
  background: #0a0d12;
  border-right: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mock-app__logo {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 0.75rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--purple-light);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.mock-app__nav {
  flex: 1;
  overflow: hidden;
  padding: 0.4rem 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mock-nav__sep {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.22);
  padding: 0.55rem 0.75rem 0.2rem;
  display: block;
}
.mock-nav__item {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: rgba(255,255,255,0.38);
  padding: 0.32rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: default;
  border-radius: 0;
  transition: color 0.15s, background 0.15s;
}
.mock-nav__item--active {
  color: var(--purple-light);
  background: var(--sales-soft);
}
.mock-app__upgrade {
  padding: 0.5rem 0.75rem;
  border-top: 1px solid rgba(255,255,255,0.05);
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: rgba(255,255,255,0.4);
}

/* main content */
.mock-app__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #f3f4f8;
}
.mock-app__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.9rem;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}
.mock-app__pagetitle {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: #1e2333;
  letter-spacing: 0.02em;
}
.mock-app__newbtn {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  background: var(--purple);
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: default;
}

/* stats row */
.mock-stats {
  display: flex;
  gap: 0;
  padding: 0.5rem 0.7rem;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}
.mock-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0 0.5rem;
  border-right: 1px solid #e5e7eb;
}
.mock-stat:first-child { padding-left: 0; }
.mock-stat:last-child { border-right: none; }
.mock-stat__val {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  color: #1e2333;
  display: flex;
  align-items: center;
  gap: 0.15rem;
}
.mock-stat__up { color: #22c55e; font-size: 0.6rem; }
.mock-stat__label { font-size: 0.58rem; color: #6b7280; font-family: var(--font-mono); }

/* kpi cards */
.mock-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.45rem;
  padding: 0.5rem 0.7rem;
}
.mock-kpi {
  background: #fff;
  border-radius: 6px;
  padding: 0.55rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.mock-kpi__label { font-size: 0.58rem; color: #6b7280; font-family: var(--font-mono); }
.mock-kpi__val {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  color: #1e2333;
}
.mock-kpi__delta { font-family: var(--font-mono); font-size: 0.55rem; font-weight: 700; }
.mock-kpi__delta--up { color: #22c55e; }
.mock-kpi__delta--down { color: #ef4444; }
.mock-kpi__bar {
  height: 3px;
  background: rgba(143,126,233,0.15);
  border-radius: 2px;
  margin-top: 0.3rem;
  overflow: hidden;
}
.mock-kpi__bar > div { height: 100%; background: var(--purple); border-radius: 2px; }
.mock-kpi__bar--green > div { background: #22c55e; }
.mock-kpi__ring {
  position: absolute;
  bottom: 0.3rem;
  right: 0.4rem;
  opacity: 0.9;
}

/* bottom row */
.mock-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  padding: 0 0.7rem 0.7rem;
  flex: 1;
  overflow: hidden;
}
.mock-recent, .mock-upcoming {
  background: #fff;
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  overflow: hidden;
}
.mock-recent__h {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #9ca3af;
  text-transform: uppercase;
  margin-bottom: 0.1rem;
  display: block;
}
.mock-recent__row {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  color: #374151;
  padding: 0.22rem 0;
  border-bottom: 1px solid #f3f4f6;
  font-family: var(--font-mono);
}
.mock-recent__row span:last-child { color: var(--purple); font-weight: 700; }
.mock-recent__row--last { border-bottom: none; }
.mock-apt {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 0.22rem 0;
  border-bottom: 1px solid #f3f4f6;
}
.mock-apt:last-child { border-bottom: none; }
.mock-apt__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--purple);
  flex-shrink: 0;
  margin-top: 0.15rem;
}
.mock-apt strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.63rem;
  color: #1e2333;
  font-weight: 700;
}
.mock-apt span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.57rem;
  color: #9ca3af;
}

/* ── Feature grid cards (mismo patrón que .sector) ── */
.platform__features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
@media (max-width: 540px) { .platform__features { grid-template-columns: 1fr; } }

.pfeat-card {
  padding: 1.4rem 1.3rem 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: none;
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
.pfeat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 0%, var(--sales-soft), transparent 70%);
  opacity: 0;
  transition: opacity var(--t-base);
  pointer-events: none;
}
.pfeat-card:hover {
  border-color: color-mix(in oklch, var(--purple), transparent 62%);
  box-shadow: 0 8px 32px -12px rgba(0,0,0,0.45);
  transform: translateY(-2px);
}
.pfeat-card:hover::before { opacity: 1; }

.pfeat-card__idx {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--purple);
  display: block;
  margin-bottom: 0.2rem;
}
.pfeat-card__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--fg);
  line-height: 1.2;
}
.pfeat-card__desc {
  font-size: 0.88rem;
  color: var(--fg-dim);
  line-height: 1.55;
}

/* ── Footer strip ── */
.platform__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.platform__foot p { color: var(--fg-dim); font-size: 0.95rem; max-width: 52ch; }

/* ════════════════════════════════════════════════════════════════
   IA AGENTS + CEREBRO IA
═══════════════════════════════════════════════════════════════ */
.ac-tech { color: var(--tech); font-style: normal; }

.section--ai {
  /* Muted premium sage — overrides neon --tech within this section only */
  --tech:        oklch(62% 0.095 150);
  --tech-soft:   oklch(62% 0.095 150 / 0.10);
  --tech-border: oklch(62% 0.095 150 / 0.25);
  --vc:          oklch(62% 0.095 150);
  --vc-soft:     oklch(62% 0.095 150 / 0.10);
  --vc-border:   oklch(62% 0.095 150 / 0.25);
}

.ai__head { max-width: 74ch; margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3.5rem); }

.ai__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 0.6rem + 1.5vw, 2rem);
  align-items: stretch;
}
@media (max-width: 840px) { .ai__grid { grid-template-columns: 1fr; } }

.aiblock {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 2rem 1.8rem 2.2rem;
  background: var(--panel);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.aiblock::after { display: none; }
.aiblock::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 90% 10%, oklch(62% 0.095 150 / 0.07), transparent 55%);
  pointer-events: none;
}
.aiblock:hover {
  border-color: var(--tech-border);
  box-shadow: 0 8px 40px -16px oklch(62% 0.095 150 / 0.18);
}

.aiblock--feature {
  background: var(--panel-2);
  border-color: var(--tech-border);
  box-shadow: 0 0 0 1px oklch(62% 0.095 150 / 0.08), 0 20px 60px -20px oklch(62% 0.095 150 / 0.14);
}
.aiblock--feature::before {
  background: radial-gradient(ellipse at 20% 90%, oklch(62% 0.095 150 / 0.09), transparent 60%);
}

.aiblock__pin {
  position: absolute;
  top: 1.4rem; right: 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tech);
  padding: 4px 10px;
  border-radius: 99px;
  border: 1px solid var(--tech-border);
  background: var(--tech-soft);
}

.aiblock__tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tech);
  display: block;
  margin-bottom: 0.7rem;
}
.aiblock__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 0.8rem;
}
.aiblock__lead {
  font-size: 0.93rem;
  color: var(--fg-dim);
  line-height: 1.6;
  max-width: 48ch;
}

.aiblock__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: rgba(0,0,0,0.2);
  border: 1px solid var(--line);
}
.aiblock__list li {
  display: grid;
  grid-template-columns: 6.4rem 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1.1rem 1.2rem;
  border-bottom: 1px solid var(--line);
  transition: background var(--t-fast);
}
.aiblock__list li:last-child { border-bottom: none; }
.aiblock__list li:hover { background: oklch(62% 0.095 150 / 0.05); }

/* Pill group */
.aiblock__pill-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-top: 0.15rem;
}
.aiblock__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tech);
  background: color-mix(in oklch, var(--tech) 11%, transparent);
  border: 1px solid color-mix(in oklch, var(--tech) 26%, transparent);
  border-radius: 999px;
  padding: 4px 10px 4px 8px;
  white-space: nowrap;
  width: fit-content;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.aiblock__pill::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tech);
  box-shadow: 0 0 6px color-mix(in oklch, var(--tech) 65%, transparent);
  flex: none;
}
.aiblock__list li:hover .aiblock__pill {
  border-color: color-mix(in oklch, var(--tech) 45%, transparent);
  background: color-mix(in oklch, var(--tech) 16%, transparent);
}
.aiblock__pill--dim {
  color: var(--fg-mute);
  background: transparent;
  border-color: var(--line);
  border-style: dashed;
  font-size: 0.55rem;
  letter-spacing: 0.16em;
  padding: 2px 9px;
}
.aiblock__pill--dim::before { display: none; }
.aiblock__list li:hover .aiblock__pill--dim {
  border-color: color-mix(in oklch, var(--tech) 32%, transparent);
  background: transparent;
}

/* Item body */
.aiblock__item-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.aiblock__list strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.3;
}
.aiblock__list span { font-size: 0.86rem; color: var(--fg-dim); line-height: 1.55; }

.ai__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.ai__foot p { color: var(--fg-dim); font-size: 0.95rem; max-width: 52ch; }


/* ════════════════════════════════════════════════════════════════
   CORE SUITE
═══════════════════════════════════════════════════════════════ */
.suite__head { margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
.suite__head-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: end;
  margin-top: 1.2rem;
}
@media (max-width: 720px) { .suite__head-row { grid-template-columns: 1fr; } }
.suite__head-lead { color: var(--fg-dim); font-size: 1rem; line-height: 1.6; max-width: 42ch; }

.suite__combos { margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.suite__combos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 960px) {
  .suite__combos-grid { grid-template-columns: repeat(2, 1fr); }
  .suite__combo--full { grid-column: span 2; }
}
@media (max-width: 640px) {
  .suite__combos-grid { grid-template-columns: 1fr; }
  .suite__combo--full { grid-column: span 1; }
}

.suite__combo {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.6rem 1.5rem 1.8rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  isolation: isolate;
  box-shadow: none;
  transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
  cursor: pointer;
}
/* Inner radial glow on hover — same pattern as pfeat-card, svc, diff */
.suite__combo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 65% at 50% 0%, rgba(143,126,233,0.13), transparent 72%);
  opacity: 0;
  transition: opacity var(--t-base);
  z-index: -1;
  pointer-events: none;
}
.suite__combo:hover::before { opacity: 1; }
.suite__combo:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklch, var(--purple), transparent 60%);
  box-shadow: 0 12px 36px -12px rgba(0,0,0,0.45);
}
/* Top accent bars removed per design feedback */
.suite__combo--full {
  background: var(--panel-2);
  border-color: color-mix(in oklch, var(--purple), transparent 72%);
  box-shadow: 0 16px 50px -20px rgba(0,0,0,0.3);
}
.suite__combo--full:hover {
  box-shadow: 0 20px 60px -16px rgba(0,0,0,0.5);
}
.suite__combo-pin {
  position: absolute;
  top: 1.2rem; right: 1.2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.42em;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--purple);
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--purple), transparent 62%);
  background: color-mix(in oklch, var(--purple), transparent 88%);
}
.suite__combo-pin::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
  flex: none;
}
.suite__combo-tags { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.suite__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.42em;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  border: 1px solid;
  background: transparent;
}
.suite__tag::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
  flex: none;
}
.suite__tag--sales { color: var(--sales); border-color: color-mix(in oklch, var(--sales), transparent 68%); }
.suite__tag--tech  { color: var(--tech);   border-color: color-mix(in oklch, var(--tech), transparent 68%); }
.suite__tag--media { color: var(--media);  border-color: color-mix(in oklch, var(--media), transparent 68%); }
.suite__combo-sep  { font-size: 0.72rem; color: var(--fg-mute); font-weight: 400; opacity: 0.55; }
.suite__combo-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--fg);
  line-height: 1.15;
}
.suite__combo-desc { font-size: 0.88rem; color: var(--fg-dim); line-height: 1.55; flex: 1; }
.suite__combo-cta {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--purple);
  margin-top: 0.25rem;
  transition: color var(--t-fast);
}
.suite__combo:hover .suite__combo-cta { color: var(--purple-light); }

.suite__included {
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  padding: 1.4rem 1.6rem;
  margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  position: relative;
  overflow: hidden;
}
.suite__included-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 1.1rem;
}
.suite__pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 720px) { .suite__pillars { grid-template-columns: 1fr; gap: 1rem; } }
.suite__pillar {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel-2);
  position: relative;
  overflow: hidden;
  transition: border-color var(--t-base);
}
.suite__pillar:hover { border-color: color-mix(in oklch, var(--purple-light), transparent 55%); }
/* Left accent stripe — same treatment as mega__link--hub */
.suite__pillar::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 28px;
  border-radius: 2px;
  background: var(--purple);
  opacity: 0.45;
  transition: height var(--t-base), opacity var(--t-base);
}
.suite__pillar:hover::before { height: 44px; opacity: 0.85; }
.suite__pillar-num { font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700; color: var(--purple); letter-spacing: 0.08em; }
.suite__pillar-title { font-size: 0.95rem; font-weight: 700; color: var(--fg); line-height: 1.2; }
.suite__pillar-desc { font-size: 0.84rem; color: var(--fg-dim); line-height: 1.5; }

/* ── Section sub-label above combos grid ── */
.suite__sub {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 0.9rem;
}

/* ── Combo bullet list ── */
.suite__combo-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.2rem;
  flex: 1;
}
.suite__combo-bullets li {
  font-size: 0.78rem;
  color: var(--fg-dim);
  padding-left: 1rem;
  position: relative;
  line-height: 1.4;
}
.suite__combo-bullets li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--purple);
  font-weight: 700;
}

/* ── Full combo — 3-col breakdown grid ── */
.suite__combo-full-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-top: 0.35rem;
  flex: 1;
}
.suite__combo-full-col {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.65rem 0.7rem;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
}
.suite__combo-full-label {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--purple-light);
}
.suite__combo-full-col span:last-child {
  font-size: 0.72rem;
  color: var(--fg-dim);
  line-height: 1.4;
}

/* ── Pricing notice box ── */
.suite__notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.4rem 1.6rem;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: none;
}
.suite__notice-inner {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex: 1;
  min-width: 0;
}
.suite__notice-badge {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--purple);
  background: color-mix(in oklch, var(--purple), transparent 90%);
  border: 1px solid color-mix(in oklch, var(--purple), transparent 70%);
  border-radius: var(--r-md);
  padding: 0.5rem 0.9rem;
  box-shadow: none;
  line-height: 1;
}
.suite__notice-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.suite__notice-text strong {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--fg);
}
.suite__notice-text span {
  font-size: 0.82rem;
  color: var(--fg-dim);
  max-width: 52ch;
  line-height: 1.5;
}

.suite__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.suite__foot p { color: var(--fg-dim); font-size: 0.9rem; max-width: 58ch; }

/* Visual rhythm — alternating section backgrounds use border-top separator */
.section--suite,
.section--ai {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* ════════════════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES
   All hardcoded dark rgba values need light equivalents
═══════════════════════════════════════════════════════════════ */

/* ── Hero: video overlay is theme-agnostic now (see index.html inline override) ── */

/* ── Hero grid — flip to dark lines on light bg ── */
[data-theme="light"] .hero__grid {
  background:
    linear-gradient(rgba(11,14,19,0.04) 1px, transparent 1px) 0 0 / 80px 80px,
    linear-gradient(90deg, rgba(11,14,19,0.04) 1px, transparent 1px) 0 0 / 80px 80px;
}

/* ── Hero ambient blobs — soften for light bg ── */
[data-theme="light"] .hero__scene::before {
  background: radial-gradient(circle, rgba(167,139,250,0.30), rgba(167,139,250,0) 65%);
  opacity: 0.35;
}
[data-theme="light"] .hero__scene::after {
  background: radial-gradient(circle, rgba(244,114,182,0.22), rgba(244,114,182,0) 65%);
  opacity: 0.30;
}
[data-theme="light"] .hero__bg-cyan {
  background: radial-gradient(circle, rgba(111,227,255,0.22), rgba(111,227,255,0) 65%);
  opacity: 0.40;
}

/* ── Stat chips — glass white ── */
[data-theme="light"] .stat {
  background: rgba(255,255,255,0.75);
  border-color: rgba(0,0,0,0.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ── Vertical row media overlay ── */
[data-theme="light"] .vrow__media-overlay {
  background:
    linear-gradient(180deg,
      rgba(250,250,247,0.18) 0%,
      transparent 30%,
      transparent 65%,
      rgba(250,250,247,0.50) 100%),
    linear-gradient(90deg,
      color-mix(in oklch, var(--vc), transparent 80%) 0%,
      transparent 40%);
}

/* ── AI block list ── */
[data-theme="light"] .aiblock__list {
  background: rgba(0,0,0,0.04);
}
[data-theme="light"] .aiblock__list li:hover {
  background: oklch(62% 0.095 150 / 0.07);
}

/* ── Suite full-combo cells ── */
[data-theme="light"] .suite__combo-full-col {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.07);
}
[data-theme="light"] .suite__combo-full-label {
  color: var(--purple-deep);
}

/* ── Suite notice box ── */
[data-theme="light"] .suite__notice {
  border-color: rgba(0,0,0,0.10);
}
[data-theme="light"] .suite__notice-badge {
  border-color: rgba(0,0,0,0.10);
  background: var(--panel-2);
  box-shadow: none;
}

/* ── Step dots ── */
[data-theme="light"] .step__dot {
  background: var(--ink); /* correctly light (#FAFAF7) in light mode */
}

/* ── Preloader text ── */
[data-theme="light"] .preloader__num { color: rgba(11,14,19,0.55); }

/* ── Mock app — intentionally always dark (it's a product screenshot) ── */
/* Keep mock-app styles as-is; they display a dark-UI product mock */

/* ── Sector image overlay stays dark for text readability over photos ── */
/* .sector::after stays hardcoded dark — photos need it regardless of theme */

/* ── Bubble testimonials ── */
[data-theme="light"] .imsg {
  background: #fff;
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 2px 12px -4px rgba(0,0,0,0.08);
}
[data-theme="light"] .imsg p { color: rgba(11,14,19,0.65); }

/* ── FAQ ── */
[data-theme="light"] .faq__sum .ico {
  border-color: rgba(0,0,0,0.14);
}

/* ── Block grid num badge ── */
[data-theme="light"] .block-grid__num {
  background: color-mix(in oklch, var(--purple), transparent 90%);
  border-color: color-mix(in oklch, var(--purple), transparent 78%);
}

/* ── Platform section heading ── */
[data-theme="light"] .platform__foot p { color: var(--fg-dim); }

/* ── Timeline dot border ── */
[data-theme="light"] .timeline__col::before {
  border-color: var(--bg); /* light bg border around dot */
}

/* ── Steplist track line ── */
[data-theme="light"] .steplist::before {
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--purple), transparent 40%) 0%,
    color-mix(in oklch, var(--purple), transparent 80%) 100%);
}

/* ── CTA block subtle adjust ── */
[data-theme="light"] .ctaBlock {
  background:
    radial-gradient(ellipse 70% 90% at 0% 0%, color-mix(in oklch, var(--purple), transparent 88%), transparent 60%),
    radial-gradient(ellipse 60% 80% at 100% 100%, color-mix(in oklch, var(--media), transparent 90%), transparent 60%),
    linear-gradient(180deg, var(--panel), var(--panel-2));
  border-color: color-mix(in oklch, var(--purple), transparent 75%);
}
[data-theme="light"] .ctaBlock__actions {
  background: rgba(255,255,255,0.6);
  border-color: rgba(0,0,0,0.08);
  backdrop-filter: blur(8px);
}

/* ════════════════════════════════════════════════════════════════
   CONTACT PAGE — hero layout + form
═══════════════════════════════════════════════════════════════ */
/* Top-align the columns on contact (form is taller than the aside) */
.l2-hero--contact .l2-hero__inner { align-items: start; }

/* — Form card — */
.cform {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.4rem);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--purple), transparent 92%) inset,
              0 24px 64px -28px rgba(0,0,0,0.45);
}
.cform__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
}
.cform__head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 0.9rem + 0.8vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.cform__step {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--purple-light);
  white-space: nowrap;
}
.cform__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
@media (max-width: 520px) { .cform__row { grid-template-columns: 1fr; } }

/* — Field — */
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field__label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.field__label .req { color: var(--purple-light); }
.field__input,
.field__select,
.field__textarea {
  width: 100%;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 0.9rem 1rem;
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.4;
  transition: border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
}
.field__textarea { resize: vertical; min-height: 130px; }
.field__input::placeholder,
.field__textarea::placeholder { color: var(--cream-faint); }
.field__input:hover,
.field__select:hover,
.field__textarea:hover { border-color: var(--line-strong); }
.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  outline: none;
  border-color: var(--purple);
  background: var(--panel);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--purple), transparent 82%);
}
.field__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23B3A8F0' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.6rem;
  cursor: pointer;
}

/* — Consent checkbox — */
.field__check {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.85rem;
  color: var(--fg-dim);
  line-height: 1.5;
}
.field__check input[type="checkbox"] {
  margin-top: 0.2rem;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--purple);
  cursor: pointer;
}
.field__check a { color: var(--fg); border-bottom: 1px solid var(--line-strong); }
.field__check a:hover { border-color: var(--purple); }

.cform__foot {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 0.4rem;
}
.cform__note {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--fg-mute);
}
.cform.is-sent { opacity: 0.55; pointer-events: none; }

/* ── Contact rail (right column) ── */
.crail {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: sticky;
  top: 88px;
}
.crail__card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.35rem 1.5rem;
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--purple), transparent 92%) inset,
              0 16px 48px -24px rgba(0,0,0,0.4);
}
.crail__title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--purple-light);
  margin-bottom: 0.4rem;
  white-space: nowrap;
}
.crail__ch {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--fg);
  text-decoration: none;
  transition: transform var(--t-fast) var(--ease-out);
}
.crail__ch:last-child { border-bottom: 0; padding-bottom: 0; }
.crail__ch:hover { transform: translateX(3px); }
.crail__ch:hover .crail__v { color: var(--purple-light); }
.crail__ico {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--purple-light);
}
.crail__ch-txt { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.crail__k {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.crail__v {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: color var(--t-fast) var(--ease-out);
  word-break: break-word;
}

/* Offices list */
.crail__office {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
}
.crail__office:last-child { border-bottom: 0; padding-bottom: 0; }
.crail__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--purple);
  margin-top: 0.5rem;
  flex-shrink: 0;
}
.crail__office--soft .crail__dot { background: var(--cream-faint); }
.crail__office-body { min-width: 0; }
.crail__office-city {
  font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em;
  display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
}
.crail__tag {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--purple-light);
  background: var(--accent-soft);
  padding: 0.12rem 0.45rem;
  border-radius: var(--r-pill);
}
.crail__office-meta {
  font-size: 0.82rem;
  color: var(--fg-dim);
  margin-top: 0.2rem;
  line-height: 1.45;
}
.crail__addr {
  font-style: normal;
  font-size: 0.82rem;
  color: var(--fg-dim);
  line-height: 1.5;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--line-strong);
}
.crail__addr strong { color: var(--fg); font-weight: 600; }

/* Promise card */
.crail__card--promise {
  background:
    radial-gradient(ellipse 80% 100% at 0% 0%, color-mix(in oklch, var(--purple), transparent 86%), transparent 62%),
    linear-gradient(180deg, var(--panel), var(--panel-2));
  border-color: color-mix(in oklch, var(--purple), transparent 72%);
}
.crail__promise-list { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 0.3rem; }
.crail__promise-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.9rem;
  color: var(--fg-dim);
  line-height: 1.45;
}
.crail__promise-item strong { color: var(--fg); font-weight: 600; }
.crail__check {
  color: var(--purple-light);
  flex-shrink: 0;
  margin-top: 0.12rem;
}
@media (max-width: 820px) {
  .crail { position: static; }
}

/* ════════════════════════════════════════════════════════════════
   ARTICLE / BLOG POST  (.art-*)
═══════════════════════════════════════════════════════════════ */
.art-hero { margin-top: var(--topbar-h, 64px); padding-block: clamp(2rem,1.5rem + 2vw,4rem) clamp(1.5rem,1rem + 1.5vw,2.5rem); border-bottom:1px solid var(--line); }
.art-meta { display:flex; flex-wrap:wrap; gap:0.6rem 1.4rem; align-items:center; font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.06em; color:var(--fg-mute); margin-bottom:1.4rem; }
.art-cat { color:var(--purple-light); text-transform:uppercase; letter-spacing:0.14em; }
.art-h1 { font-family:var(--font-display); font-size:clamp(1.9rem,1.3rem + 3vw,3.4rem); font-weight:800; letter-spacing:-0.03em; line-height:1.04; max-width:18ch; }
.art-dek { font-size:clamp(1.05rem,0.95rem + 0.5vw,1.3rem); color:var(--fg-dim); line-height:1.55; max-width:60ch; margin-top:1.2rem; }
.art-byline { display:flex; align-items:center; gap:0.85rem; margin-top:1.8rem; }
.art-avatar { width:42px; height:42px; border-radius:50%; background:var(--accent-soft); display:grid; place-items:center; font-family:var(--font-display); font-weight:700; color:var(--purple-light); font-size:1rem; flex-shrink:0; }
.art-byline__name { font-weight:600; font-size:0.95rem; }
.art-byline__role { font-size:0.82rem; color:var(--fg-mute); }
.art-wrap { display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:clamp(2rem,1rem + 4vw,5rem); padding-block:clamp(2.5rem,2rem + 2vw,4rem); }
@media (max-width:900px){ .art-wrap { grid-template-columns:1fr; } .art-toc { display:none; } }
.art-toc { position:sticky; top:90px; align-self:start; }
.art-toc__k { font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--fg-mute); margin-bottom:1rem; }
.art-toc a { display:block; font-size:0.85rem; color:var(--fg-dim); padding:0.4rem 0; border-left:2px solid var(--line); padding-left:1rem; transition:color var(--t-fast), border-color var(--t-fast); }
.art-toc a:hover, .art-toc a.is-active { color:var(--purple-light); border-color:var(--purple); }
.art-body { max-width:72ch; }
.art-body h2 { font-family:var(--font-display); font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem); font-weight:700; letter-spacing:-0.02em; margin:2.6rem 0 1rem; scroll-margin-top:90px; }
.art-body h3 { font-family:var(--font-display); font-size:clamp(1.1rem,1rem + 0.5vw,1.4rem); font-weight:600; letter-spacing:-0.01em; margin:1.8rem 0 0.7rem; }
.art-body p { font-size:1.02rem; color:var(--fg-dim); line-height:1.75; margin-bottom:1.2rem; }
.art-body p strong, .art-body li strong { color:var(--fg); font-weight:600; }
.art-body a:not(.btn) { color:var(--purple-light); border-bottom:1px solid color-mix(in oklch, var(--purple), transparent 60%); }
.art-body a:not(.btn):hover { border-color:var(--purple-light); }
.art-body ul, .art-body ol { margin:0 0 1.3rem; padding-left:1.3rem; display:flex; flex-direction:column; gap:0.6rem; }
.art-body li { font-size:1.02rem; color:var(--fg-dim); line-height:1.65; }
.art-body li::marker { color:var(--purple-light); }
.art-body blockquote { margin:1.8rem 0; padding:1.2rem 1.6rem; border-left:3px solid var(--purple); background:var(--ink-2); border-radius:0 var(--r-md) var(--r-md) 0; }
.art-body blockquote p { font-family:var(--font-display); font-size:1.15rem; color:var(--fg); font-style:italic; line-height:1.5; margin:0; }
.art-lead { font-size:1.15rem !important; color:var(--fg) !important; line-height:1.7 !important; }
.art-key { margin:2rem 0; padding:1.5rem 1.7rem; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); }
.art-key__k { display:flex; align-items:center; gap:0.5rem; font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--purple-light); margin-bottom:0.9rem; }
.art-key ul { margin:0; padding-left:1.2rem; }
.art-callout { margin:2rem 0; padding:1.4rem 1.6rem; border:1px solid color-mix(in oklch, var(--purple), transparent 65%); border-radius:var(--r-lg); background:linear-gradient(180deg, color-mix(in oklch, var(--purple), transparent 93%), transparent); }
.art-callout p { margin:0; font-size:0.98rem; }
.art-authorbox { display:flex; gap:1.1rem; align-items:flex-start; margin-top:3rem; padding-top:2rem; border-top:1px solid var(--line); }
.art-authorbox .art-avatar { width:54px; height:54px; font-size:1.2rem; }
.art-authorbox__name { font-family:var(--font-display); font-weight:700; font-size:1.1rem; }
.art-authorbox__role { font-size:0.85rem; color:var(--purple-light); margin:0.1rem 0 0.6rem; }
.art-authorbox__bio { font-size:0.9rem; color:var(--fg-mute); line-height:1.6; max-width:60ch; }
.art-related { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; }
.art-related a { display:flex; flex-direction:column; gap:0.5rem; padding:1.4rem 1.5rem; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); transition:border-color var(--t-fast), transform var(--t-fast); }
.art-related a:hover { border-color:color-mix(in oklch, var(--purple), transparent 55%); transform:translateY(-3px); }
.art-related__k { font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--purple-light); }
.art-related__t { font-family:var(--font-display); font-weight:600; font-size:1.02rem; letter-spacing:-0.01em; line-height:1.3; }
/* blog listing row: status tag */
.post-status { font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--fg-mute); padding:0.2rem 0.55rem; border:1px solid var(--line-strong); border-radius:var(--r-pill); white-space:nowrap; }
.post-status.is-soon { color:var(--cream-faint); }

/* ════════════════════════════════════════════════════════════════
   LEAD MAGNET (guías / plantillas)  .lm-*
═══════════════════════════════════════════════════════════════ */
.lm-list { display:flex; flex-direction:column; }
.lm-item { border-bottom:1px solid var(--line); scroll-margin-top:90px; }
.lm-sum { display:grid; grid-template-columns:48px 1fr auto auto 28px; gap:1.3rem; align-items:start; padding:1.6rem 0; cursor:pointer; list-style:none; transition:background var(--t-base); }
.lm-sum::-webkit-details-marker{ display:none; }
.lm-sum:hover { background:rgba(143,126,233,0.04); }
.lm-num { font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.14em; color:var(--purple-light); padding-top:0.4rem; }
.lm-head { min-width:0; }
.lm-title { display:block; font-family:var(--font-display); font-size:clamp(1.1rem,0.9rem + 0.7vw,1.4rem); font-weight:600; letter-spacing:-0.02em; margin-bottom:0.35rem; }
.lm-desc { display:block; font-size:0.94rem; color:var(--fg-dim); line-height:1.55; max-width:66ch; }
.lm-tag { align-self:start; margin-top:0.3rem; font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--fg-mute); white-space:nowrap; padding:0.25rem 0.65rem; border:1px solid var(--line-strong); border-radius:var(--r-pill); }
.lm-meta { align-self:start; margin-top:0.4rem; font-family:var(--font-mono); font-size:0.66rem; color:var(--fg-mute); white-space:nowrap; }
.lm-chevron { color:var(--fg-mute); padding-top:0.5rem; transition:transform var(--t-base), color var(--t-fast); }
.lm-item[open] .lm-chevron { transform:rotate(180deg); color:var(--purple-light); }
.lm-body { display:grid; grid-template-columns:1.1fr 0.9fr; gap:clamp(1.5rem,1rem + 2vw,3rem); padding:0.5rem 0 2rem calc(48px + 1.3rem); animation:gl-reveal 360ms var(--ease-out); }
@media (max-width:760px){ .lm-body { grid-template-columns:1fr; padding-left:0; } }
.lm-k { display:block; font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--purple-light); margin-bottom:0.9rem; }
.lm-inside ul { display:flex; flex-direction:column; gap:0.6rem; padding-left:1.1rem; margin:0; }
.lm-inside li { font-size:0.94rem; color:var(--fg-dim); line-height:1.55; }
.lm-inside li::marker { color:var(--purple-light); }
.lm-gate { background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.4rem 1.5rem; align-self:start; }
.lm-gate form { display:flex; flex-direction:column; gap:0.7rem; }
.lm-gate input { width:100%; background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:0.75rem 0.9rem; color:var(--fg); font-family:var(--font-sans); font-size:0.92rem; transition:border-color var(--t-fast), box-shadow var(--t-fast); }
.lm-gate input:focus { outline:none; border-color:var(--purple); box-shadow:0 0 0 3px color-mix(in oklch, var(--purple), transparent 82%); }
.lm-gate input::placeholder { color:var(--cream-faint); }
.lm-gate .btn { width:100%; justify-content:center; margin-top:0.2rem; }

/* ════════════════════════════════════════════════════════════════
   DIFFS ELEGANT — Minimalist card layout
═══════════════════════════════════════════════════════════════ */
.diffs-elegant {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.diff-card {
  padding: 1.8rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--panel);
  transition: all var(--t-base);
  display: flex;
  gap: 1rem;
  position: relative;
  opacity: 0;
  transform: translateY(20px);
}

.diff-card.animate {
  animation: fade-up-card 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.diff-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(167, 139, 250, 0.05) 50%, transparent 100%);
  border-radius: var(--r-md);
  opacity: 0;
  transition: opacity var(--t-base);
}

.diff-card:hover::before {
  opacity: 1;
}

.diff-card:nth-child(1).animate { animation-delay: 0.05s; }
.diff-card:nth-child(2).animate { animation-delay: 0.15s; }
.diff-card:nth-child(3).animate { animation-delay: 0.25s; }
.diff-card:nth-child(4).animate { animation-delay: 0.35s; }
.diff-card:nth-child(5).animate { animation-delay: 0.45s; }
.diff-card:nth-child(6).animate { animation-delay: 0.55s; }

.diff-card:hover {
  border-color: var(--purple);
  background: var(--panel-2);
  transform: translateY(-2px);
}

.diff-card__num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--purple);
  font-weight: 600;
  flex-shrink: 0;
  width: 2rem;
}

.diff-card__content {
  flex: 1;
}

.diff-card__title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
  color: var(--fg);
}

.diff-card__desc {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--fg-dim);
  margin-top: 0.6rem;
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .diffs-elegant {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

@keyframes fade-up-card {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ════════════════════════════════════════════════════════════════
   SECTORES GRID — Dynamic staggered layout
═══════════════════════════════════════════════════════════════ */
.sectores-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.2rem;
}

.sector-card {
  position: relative;
  min-height: 280px;
  padding: 2rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  cursor: pointer;
  transition: all var(--t-base);
  overflow: hidden;
}

.sector-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
  z-index: 1;
}

.sector-card:hover {
  border-color: var(--purple);
  transform: translateY(-4px);
}

.sector-card__idx {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  z-index: 2;
}

.sector-card__title {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
  color: #fff;
  z-index: 2;
  position: relative;
}

.sector-card__desc {
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.82);
  margin-top: 0.75rem;
  margin-bottom: 0;
  z-index: 2;
  position: relative;
}

.sector-card__cta {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--purple);
  margin-top: 1rem;
  z-index: 2;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sector-card--1 { animation: stagger-in 0.6s ease-out 0s forwards; }
.sector-card--2 { animation: stagger-in 0.6s ease-out 0.1s forwards; }
.sector-card--3 { animation: stagger-in 0.6s ease-out 0.2s forwards; }
.sector-card--4 { animation: stagger-in 0.6s ease-out 0.1s forwards; }
.sector-card--5 { animation: stagger-in 0.6s ease-out 0s forwards; }

@keyframes stagger-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1200px) {
  .sectores-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}

@media (max-width: 768px) {
  .sectores-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .sector-card {
    min-height: 200px;
    padding: 1.5rem;
  }
  
  .sector-card__title {
    font-size: 1rem;
  }
}
.lm-gate__note { font-size:0.76rem; color:var(--fg-mute); line-height:1.5; margin-top:0.7rem; }
.lm-gate__ok { display:none; text-align:center; padding:1rem 0; }
.lm-gate.is-sent form { display:none; }
.lm-gate.is-sent .lm-gate__ok { display:block; }
.lm-gate__ok-ico { color:oklch(72% 0.15 150); margin-bottom:0.5rem; }
.lm-gate__ok p { font-size:0.92rem; color:var(--fg-dim); line-height:1.55; }

/* ── Sources / references block ── */
.art-sources { margin-top:2.5rem; padding-top:1.6rem; border-top:1px solid var(--line); }
.art-sources__k { display:flex; align-items:center; gap:0.5rem; font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--purple-light); margin-bottom:1rem; }
.art-sources ol { margin:0; padding-left:1.3rem; display:flex; flex-direction:column; gap:0.7rem; }
.art-sources li { font-size:0.88rem; color:var(--fg-mute); line-height:1.55; }
.art-sources li::marker { color:var(--purple-light); font-family:var(--font-mono); font-size:0.8rem; }
.art-sources a { color:var(--fg-dim); border-bottom:1px solid var(--line-strong); }
.art-sources a:hover { color:var(--purple-light); border-bottom-color:var(--purple); }
.art-sources__note { font-size:0.78rem; color:var(--fg-mute); margin-top:1rem; font-style:italic; }

/* ── Sector Solutions Carousel ── */
.sol-carousel {
  position: relative;
  overflow: hidden;
  padding: 1.5rem 0;
}
.sol-carousel__track {
  display: flex;
  gap: clamp(1rem, 2vw, 1.5rem);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.sol-card {
  flex: 0 0 min(360px, 82vw);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 12px);
  padding: clamp(1.5rem, 2vw, 2.2rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  text-decoration: none;
  color: var(--fg);
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
  opacity: 0;
  transform: translateY(16px);
  animation: solCardIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.sol-card:nth-child(1) { animation-delay: 0.1s; }
.sol-card:nth-child(2) { animation-delay: 0.25s; }
.sol-card:nth-child(3) { animation-delay: 0.4s; }
@keyframes solCardIn {
  to { opacity: 1; transform: translateY(0); }
}
.sol-card:hover {
  border-color: var(--purple, #a78bfa);
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.sol-card__pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--purple, #a78bfa);
  border: 1px solid var(--purple, #a78bfa);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  width: fit-content;
}
.sol-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}
.sol-card__desc {
  font-size: 0.88rem;
  color: var(--fg-dim);
  line-height: 1.55;
  flex: 1;
}
.sol-card__cta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-mute);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.3s;
}
.sol-card:hover .sol-card__cta { color: var(--purple, #a78bfa); }
.sol-card__cta .arrow { transition: transform 0.3s; }
.sol-card:hover .sol-card__cta .arrow { transform: translateX(4px); }
.sol-carousel__nav {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.sol-carousel__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--line);
  border: none;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
  padding: 0;
}
.sol-carousel__dot.is-active {
  background: var(--purple, #a78bfa);
  transform: scale(1.3);
}
@media (max-width: 640px) {
  .sol-card { flex: 0 0 85vw; }
}