/* ================================================
   QUNOX — Home Page Cinematic CSS
   ================================================ */

:root {
  --z-canvas:   1;
  --z-bg:       2;
  --z-content:  10;
  --z-sticky:   20;
  --z-nav:      100;
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-expo:   cubic-bezier(0.7, 0, 0.84, 0);
  --ease-cinematic: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── NAV transparent on home ─────────────────── */
#nav {
  background: transparent !important;
  border-bottom: none !important;
  transition: background 0.4s var(--ease-cinematic), backdrop-filter 0.4s;
}
#nav.scrolled {
  background: rgba(255,255,255,0.9) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}

/* Logo visible on transparent nav */
#nav .nav-logo-img {
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.35));
  transition: filter 0.3s;
}
#nav.scrolled .nav-logo-img {
  filter: none;
}

/* ── PAGE LOAD ───────────────────────────────── */
.page-wrap { animation: none !important; opacity: 0; transition: opacity 0.4s ease; }
body.ready .page-wrap { opacity: 1; }

/* ================================================
   SCENE BASE
   ================================================ */
.scene { position: relative; width: 100%; }

/* ================================================
   SCENE 1 — HERO  (200vh)
   ================================================ */
.scene--hero { min-height: 200vh; background: #fff; }

.qnx-canvas {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100vh;
  z-index: var(--z-canvas);
  pointer-events: none;
}

.hero__grid-bg {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100vh;
  z-index: var(--z-bg);
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(67,97,238,0.10) 1px, transparent 1px);
  background-size: 32px 32px;
}

.hero__copy {
  position: sticky; top: 0;
  height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  z-index: var(--z-content);
  pointer-events: none;
  padding: 0 2rem;
}

.hero__brand-label {
  font-family: var(--font-head, 'Space Grotesk', sans-serif);
  font-size: clamp(3rem, 5.5vw, 5.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink, #0D0D1A);
  display: block;
  margin-bottom: 0.6rem;
  opacity: 0;
  will-change: opacity, transform;
}

.hero__headline {
  font-family: var(--font-head, 'Space Grotesk', sans-serif);
  font-size: clamp(1.8rem, 3.5vw, 3.75rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #6B6B7B;
  margin-bottom: 1.4rem;
}

.hero__headline .word { display: inline-block; overflow: hidden; }
.hero__headline .word-inner { display: inline-block; will-change: transform; }

.hero__sub {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: clamp(0.72rem, 1vw, 0.88rem);
  font-weight: 700;
  color: #4B4B5A;
  letter-spacing: 0.06em;
  text-transform: none;
  opacity: 0;
  transform: translateY(16px);
  will-change: opacity, transform;
}

.hero__scroll-hint {
  position: absolute; bottom: 2.5rem; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  opacity: 0;
}

.scroll-hint__line {
  display: block; width: 1px; height: 40px;
  background: var(--ink, #0D0D1A);
  transform-origin: top;
  animation: scrollLineAnim 1.8s var(--ease-cinematic) infinite 1s;
}

@keyframes scrollLineAnim {
  0%    { transform: scaleY(0); transform-origin: top; }
  50%   { transform: scaleY(1); transform-origin: top; }
  50.1% { transform: scaleY(1); transform-origin: bottom; }
  100%  { transform: scaleY(0); transform-origin: bottom; }
}

.scroll-hint__text {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.65rem; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: #6B6B7B;
}

.hero__scroll-buffer { height: 100vh; position: relative; }

/* ================================================
   SCENE 2 — DIAGNOSTIC
   ================================================ */
.scene--diagnostic {
  background: #0a0a0a;
  position: relative;
  z-index: var(--z-content);
  padding: 8rem 4rem;
}

.diagnostic__container { width: 100%; max-width: 1100px; margin: 0 auto; }

.diagnostic__header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 2.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.diagnostic__label {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.12em;
  color: rgba(100,130,255,0.8);
}

.diagnostic__status {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.12em; color: rgba(255,255,255,0.28);
}

/* Strategic intro block */
.diagnostic__intro { margin-bottom: 3rem; }

.diagnostic__title {
  font-family: var(--font-head, 'Space Grotesk', sans-serif);
  font-size: clamp(1.8rem, 3vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin-bottom: 0.75rem;
  line-height: 1.1;
}

.diagnostic__desc {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: clamp(0.875rem, 1.1vw, 1rem);
  color: rgba(255,255,255,0.4);
  line-height: 1.7;
  max-width: 560px;
}

/* 2-column layout: items left, image right */
.diagnostic__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.diagnostic__items { display: flex; flex-direction: column; }

.diag-item {
  position: relative; overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.diag-item__scanline {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--blue, #4361EE);
  transform-origin: left; transform: scaleX(1);
  z-index: 2; pointer-events: none;
}

.diag-item__content {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  align-items: center; gap: 1.5rem;
  padding: 1.4rem 0;
}

.diag-item__num {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.75rem; color: rgba(255,255,255,0.28); font-weight: 500;
}

.diag-item__label {
  font-family: var(--font-head, 'Space Grotesk', sans-serif);
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  letter-spacing: -0.015em;
  transition: color 0.2s;
}

.diag-item__status {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.65rem; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  padding: 0.25rem 0.65rem; border-radius: 2px;
  min-width: 8.5rem;
  text-align: center;
}

.diag-item__status--warn { background: rgba(67,97,238,0.18); color: rgba(120,150,255,0.9); }
.diag-item__status--err  { background: rgba(114,9,183,0.18); color: rgba(190,110,255,0.9); }

/* Right: visual panel */
.diagnostic__visual {
  position: sticky;
  top: calc(90px + 2rem);
}

.diagnostic__visual-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
  border-radius: 4px;
  background: #111;
}

/* Cohesive blue-tinted dark overlay on all photos */
.diagnostic__visual-frame::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(67,97,238,0.18) 0%, rgba(0,0,0,0.32) 100%);
  z-index: 3;
  pointer-events: none;
  border-radius: 4px;
}

.diag-img {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s var(--ease-cinematic);
  filter: brightness(0.72) contrast(1.12) saturate(0.6);
  z-index: 1;
}
.diag-img.active { opacity: 1; }

/* ── Diagnostic accordion panel ─────────────── */
.diag-item { cursor: pointer; }
.diag-item:hover .diag-item__label { color: #ffffff; }

.diag-item__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.16,1,0.3,1), opacity 0.3s ease;
  opacity: 0;
}
.diag-item.expanded .diag-item__panel {
  max-height: 180px;
  opacity: 1;
}
.diag-item__panel-inner {
  padding: 1rem 0 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.diag-panel__label {
  display: block;
  font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.25); margin-bottom: 0.4rem;
}
.diag-panel__label--blue { color: rgba(100,130,255,0.75); }
.diag-panel__text {
  font-size: 0.82rem; line-height: 1.72;
  color: rgba(255,255,255,0.45);
}

/* ── Service tags ────────────────────────────── */
.services__tags-area {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-top: 1.75rem;
}
.svc-tag {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.05em;
  padding: 0.3rem 0.7rem;
  border-radius: 2px;
  border: 1px solid rgba(67,97,238,0.2);
  color: var(--blue, #4361EE);
  background: rgba(67,97,238,0.04);
}

.diagnostic__visual-label {
  display: flex; align-items: center; gap: 0.75rem;
  margin-top: 1rem;
  padding-left: 0.25rem;
}

.diag-vl-num {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.7rem; color: rgba(100,130,255,0.8);
  font-weight: 600; letter-spacing: 0.1em;
}

.diag-vl-text {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.8rem; color: rgba(255,255,255,0.38);
  letter-spacing: 0.02em;
  transition: opacity 0.3s ease;
}

.diagnostic__footer {
  margin-top: 3rem;
  display: flex; align-items: center; gap: 2rem;
}

.diagnostic__progress-bar {
  flex: 1; height: 1px;
  background: rgba(255,255,255,0.08); position: relative;
}

.diagnostic__progress-fill {
  position: absolute; top: 0; left: 0;
  height: 100%; background: var(--blue, #4361EE);
  width: 0%; will-change: width;
}

.diagnostic__footer-text {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.65rem; letter-spacing: 0.12em;
  color: rgba(255,255,255,0.22); text-transform: uppercase; white-space: nowrap;
}

/* ================================================
   SCENE 3-8 — SERVICES GRID
   ================================================ */
.scene--services {
  position: relative;
  height: auto;
  background: #EAEAE4;
  padding: 5rem 2.5rem 6rem;
}

.svc-grid__container {
  max-width: 1300px;
  margin: 0 auto;
}

.svc-grid__header {
  margin-bottom: 1.75rem;
}

.svc-grid__eyebrow {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(20,18,14,0.45);
}

/* ── Grid ── */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* No fixed rows — aspect-ratio on cards controls height */
  gap: 8px;
}

/* ── Card ── */
.svc-gc {
  position: relative;
  overflow: hidden;
  display: block;
  text-decoration: none;
  cursor: pointer;
  border-radius: 10px;
  background: #1A1814;
  aspect-ratio: 3 / 4; /* matches the 1086×1448 portrait images */
}

/* Background photo — no filters, full fidelity */
.svc-gc__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: none;
  transition: filter 0.6s cubic-bezier(0.16,1,0.3,1),
              transform 0.65s cubic-bezier(0.16,1,0.3,1);
}
.svc-gc:hover .svc-gc__img {
  filter: brightness(0.22) saturate(0.4) blur(6px);
  transform: scale(1.04);
}

/* Overlay: invisible at rest, dark on hover so tags are legible */
.svc-gc__overlay {
  position: absolute; inset: 0;
  background: rgba(10,9,6,0.72);
  opacity: 0;
  transition: opacity 0.45s ease;
}
.svc-gc:hover .svc-gc__overlay { opacity: 1; }

/* Title area: image already has the title — hidden at all times */
.svc-gc__top { display: none; }

.svc-gc__title {
  font-family: var(--font-head, 'Space Grotesk', sans-serif);
  font-size: clamp(1.1rem, 1.7vw, 1.55rem);
  font-weight: 700; line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff; margin: 0;
}

.svc-gc__count {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.65rem; font-weight: 500;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.4);
  margin-top: 0.35rem;
}

/* Hover content: tags + CTA */
.svc-gc__hover {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 1.5rem;
  gap: 1.4rem;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.16,1,0.3,1);
}
.svc-gc:hover .svc-gc__hover { opacity: 1; transform: translateY(0); }

.svc-gc__tags {
  display: flex; flex-direction: column;
  align-items: center; gap: 0.5rem;
}

.svc-gc__tag {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.75rem; font-weight: 500;
  color: rgba(255,255,255,0.88);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 100px;
  padding: 0.35rem 1rem;
  white-space: nowrap;
  backdrop-filter: blur(4px);
}

.svc-gc__more {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  border-bottom: 1px solid rgba(255,255,255,0.25);
  padding-bottom: 0.1rem;
  transition: color 0.2s, border-color 0.2s;
}
.svc-gc:hover .svc-gc__more {
  color: #fff; border-color: rgba(255,255,255,0.6);
}

/* ── Floating CTA row ── */
.svc-grid__cta-row {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

.svc-grid__cta-pill {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  background: #1A1814;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 100px;
  padding: 0.75rem 1.75rem;
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.svc-grid__cta-pill:hover {
  background: #2a2820;
  border-color: rgba(255,255,255,0.25);
}

/* ── Mobile ── */
@media (max-width: 900px) {
  /* 2-column portrait grid on tablet */
  .svc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .scene--services { padding: 4rem 1.25rem 5rem; }
  /* Single column on phone — cards are portrait so they look great full-width */
  .svc-grid {
    grid-template-columns: 1fr;
  }
  /* On mobile: always show the CTA link at the bottom (no hover state) */
  .svc-gc__overlay {
    opacity: 0.6;
    background: linear-gradient(to top, rgba(10,9,6,0.8) 0%, transparent 55%);
  }
  .svc-gc__hover {
    opacity: 1;
    transform: none;
    position: absolute;
    inset: auto;
    bottom: 0; left: 0; right: 0;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0 1.4rem 1rem;
    gap: 0;
  }
  .svc-gc__tags { display: none; }
  .svc-gc__more { font-size: 0.7rem; }
}

/* ================================================
   SCENE 9 — CLOSING
   ================================================ */
.scene--closing {
  min-height: 100vh; background: #F8F8F6;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden; padding: 8rem 4rem;
}

.closing__container {
  position: relative; z-index: var(--z-content);
  max-width: 800px; text-align: center;
}

.closing__eyebrow {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--blue, #4361EE); margin-bottom: 2rem; opacity: 0;
}

.closing__headline {
  font-family: var(--font-head, 'Space Grotesk', sans-serif);
  font-size: clamp(2.5rem, 5vw, 5.5rem);
  font-weight: 700; line-height: 1; letter-spacing: -0.03em;
  color: var(--ink, #0D0D1A); margin-bottom: 2rem;
  opacity: 0; will-change: opacity, transform;
}

.closing__headline-accent {
  background: linear-gradient(135deg, var(--blue, #4361EE), var(--purple, #7209B7));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.closing__body {
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.8; color: #6B6B7B;
  max-width: 520px; margin: 0 auto 3rem; opacity: 0;
}

.closing__actions {
  display: flex; align-items: center; justify-content: center;
  gap: 1.5rem; opacity: 0; transform: translateY(20px);
  will-change: opacity, transform;
}

.btn-closing-primary {
  display: inline-flex; align-items: center;
  padding: 0.9rem 2.25rem;
  background: #1A1A1F; color: #fff;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.9rem; font-weight: 500; letter-spacing: 0.02em;
  text-decoration: none; border-radius: 2px; border: 1.5px solid #1A1A1F;
  transition: background 0.25s, transform 0.2s;
}
.btn-closing-primary:hover { background: #2D2D35; transform: translateY(-1px); }

.btn-closing-ghost {
  display: inline-flex; align-items: center;
  padding: 0.9rem 2.25rem;
  background: transparent; color: #1A1A1F;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.9rem; font-weight: 500; letter-spacing: 0.02em;
  text-decoration: none; border-radius: 2px; border: 1.5px solid rgba(0,0,0,0.2);
  transition: border-color 0.25s, transform 0.2s;
}
.btn-closing-ghost:hover { border-color: #1A1A1F; transform: translateY(-1px); }

/* Closing seal logo */
.closing__seal {
  margin-top: 3.5rem;
  display: flex; justify-content: center;
}
.closing__seal-img {
  width: 160px; height: auto;
  border-radius: 0;
  object-fit: contain;
  opacity: 0.9;
}

/* ================================================
   PARTNERS — TICKER CAROUSEL
   ================================================ */
.scene--partners {
  background: #F4F6FF;
  padding: 3.5rem 0 4rem;
  overflow: hidden;
}

.partners__label {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--blue, #4361EE);
  display: block; text-align: center;
  margin-bottom: 2.5rem;
  opacity: 0.7;
}

.partners__ticker-outer {
  display: flex; flex-direction: column; gap: 0;
}

.partners__row {
  overflow: hidden;
  padding: 0.75rem 0;
  border-top: 1px solid rgba(67,97,238,0.09);
}
.partners__row:last-child { border-bottom: 1px solid rgba(67,97,238,0.09); }

.partners__row-inner {
  display: flex; align-items: center;
  width: max-content;
  will-change: transform;
}

.partners__row--fwd .partners__row-inner {
  animation: tickerFwd 28s linear infinite;
}
.partners__row--rev .partners__row-inner {
  animation: tickerRev 28s linear infinite;
}
.partners__row:hover .partners__row-inner { animation-play-state: paused; }

@keyframes tickerFwd {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes tickerRev {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.partners__ticker-item {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.6rem 2.5rem;
  flex-shrink: 0;
  opacity: 0.72;
  transition: opacity 0.2s;
  cursor: default;
}
.partners__ticker-item:hover { opacity: 1; }

.partners__ticker-item img {
  height: 34px; width: auto;
  max-width: 110px; object-fit: contain;
  filter: grayscale(0.15);
  flex-shrink: 0;
}

.partners__ticker-item span {
  font-family: var(--font-head, 'Space Grotesk', sans-serif);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 700;
  color: var(--ink, #0D0D1A);
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-transform: uppercase;
}

.partners__ticker-sep {
  font-size: 0.6rem;
  color: rgba(67,97,238,0.35);
  flex-shrink: 0;
  padding: 0 0.5rem;
  user-select: none;
}

/* ================================================
   ACERCA DE NOSOTROS
   ================================================ */
.scene--about {
  min-height: auto;
  background: linear-gradient(to bottom, #E8E8E8 0%, #E8E8E8 60%, #0a0a0a 100%);
  padding: 7rem 4rem 6rem;
  position: relative;
  display: flex;
  flex-direction: column;
}

.about__container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 0;
}

/* ── Header: eyebrow left, headline right ── */
.about__header {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 3rem;
  align-items: start;
  margin-bottom: 4rem;
}

.about__eyebrow {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(17,17,17,0.5);
  padding-top: 0.65rem;
  line-height: 1.6;
}

.about__headline {
  font-family: var(--font-head, 'Space Grotesk', sans-serif);
  font-size: clamp(2rem, 4vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0;
  color: #111;
}

.about__hl-dark { color: #111111; }
.about__hl-gray { color: rgba(17,17,17,0.3); }

/* ── Icons row — sits at the bottom, partial fade into black ── */
.about__icons {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  overflow: visible;
  margin-top: auto;
}

.about__icon {
  flex: 1;
  min-width: 0;
}

.about__icon svg {
  width: 100%;
  height: auto;
  max-height: 28vh;
  display: block;
  color: rgba(0,0,0,0.18);
  fill: currentColor;
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .about__header {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
  }
  .about__eyebrow { padding-top: 0; }
  .about__icons { gap: 0.5rem; }
  .about__icon svg { max-height: 28vh; }
}

@media (max-width: 768px) {
  .scene--about { padding: 6rem 1.5rem 0; }
  .about__headline { font-size: clamp(1.6rem, 6vw, 2.8rem); }
  .about__icons { flex-wrap: wrap; }
  .about__icon { flex: 0 0 calc(33.33% - 0.5rem); }
  .about__icon svg { max-height: 22vw; }
}

@media (max-width: 768px) {
  .scene--about { padding: 5rem 1.5rem 3.5rem; }
  .about__headline { font-size: clamp(1.6rem, 6vw, 2.8rem); }
  .about__icons { flex-wrap: wrap; }
  .about__icon { flex: 0 0 calc(33.33% - 0.5rem); }
  .scene--partners { padding: 3rem 0 3.5rem; }
  .partners__ticker-item span { font-size: 1rem; }
  .partners__ticker-item { padding: 0.5rem 1.5rem; }
}

/* ================================================
   CLIENTES
   ================================================ */
.scene--clients {
  background: #F8F8F6;
  padding: 4rem 0 5rem;
  overflow: hidden;
}

.clients__label {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: #6B6B7B; margin-bottom: 2.5rem;
  display: block;
  text-align: center;
}

/* ── Ticker outer wrapper ── */
.clients__ticker-outer {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}

.clients__row {
  display: flex;
  overflow: hidden;
  padding: 0.75rem 0;
}

/* Fade edges */
.clients__ticker-outer::before,
.clients__ticker-outer::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 160px;
  pointer-events: none;
  z-index: 2;
}

/* ── Inner scrolling track ── */
.clients__row-inner {
  display: flex;
  align-items: center;
  width: max-content;
  white-space: nowrap;
}

/* Forward row → scrolls left */
.clients__row--fwd .clients__row-inner {
  animation: clientsFwd 22s linear infinite;
}
/* Reverse row → scrolls right */
.clients__row--rev .clients__row-inner {
  animation: clientsRev 22s linear infinite;
}

@keyframes clientsFwd {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes clientsRev {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* Pause on hover */
.clients__ticker-outer:hover .clients__row-inner {
  animation-play-state: paused;
}

/* Company name items */
.clients__ticker-item {
  font-family: var(--font-head, 'Space Grotesk', sans-serif);
  font-size: clamp(1.4rem, 2.8vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: rgba(13,13,26,0.55);
  padding: 0.4rem 2.4rem;
  flex-shrink: 0;
  transition: color 0.25s ease;
}
.clients__ticker-item:hover { color: rgba(13,13,26,0.85); }

.clients__ticker-sep {
  font-size: 0.55rem;
  color: rgba(67,97,238,0.45);
  flex-shrink: 0;
  padding: 0 0.4rem;
  user-select: none;
}

/* Mobile-only services grid (hidden on desktop) */
.services__mobile-grid { display: none; }

/* ================================================
   SCENE — SANGFOR / TECNOLOGÍA NUEVA GENERACIÓN
   Sticky-left / scrolling-right layout.
   Dark theme continuing from the diagnostic section.
   ================================================ */
.scene--sangfor {
  background: #080808;
  position: relative;
  overflow: hidden;
  padding: 0;
}

/* ── Animated background glow ── */
.sangfor__bg {
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(ellipse 65% 55% at 15% 35%, rgba(67, 97, 238, 0.13) 0%, transparent 60%),
    radial-gradient(ellipse 50% 70% at 85% 65%, rgba(114, 9, 183, 0.09) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 50% 10%, rgba(100, 130, 255, 0.06) 0%, transparent 55%);
  animation: sangforGlow 10s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
@keyframes sangforGlow {
  from { transform: scale(1) translate(0%, 0%); }
  to   { transform: scale(1.08) translate(4%, 3%); }
}

/* ── Inner grid: left sticky / right scroll ── */
.sangfor__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 2.5rem;
}

/* ── LEFT — sticky title block ── */
.sangfor__left {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 4rem 0 1rem;
}

.sangfor__eyebrow {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(100, 130, 255, 0.75);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.sangfor__eyebrow::before {
  content: '';
  display: inline-block;
  width: 22px; height: 1px;
  background: rgba(100, 130, 255, 0.6);
}

.sangfor__headline {
  font-family: var(--font-head, 'Space Grotesk', sans-serif);
  font-size: clamp(1.6rem, 2.4vw, 2.4rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin-bottom: 1.5rem;
}

.sangfor__body {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.42);
  max-width: 420px;
  margin-bottom: 2.5rem;
}

/* Sangfor badge */
.sangfor__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  width: fit-content;
}
.sangfor__badge-logo {
  height: 20px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.7;
}
.sangfor__badge span {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

/* ── RIGHT — scrolling cards ── */
.sangfor__right {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 10vh 0 12vh 0;
}

.sangfor__card {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 3.5rem 1rem 3.5rem 2rem;
  position: relative;
  transition: border-color 0.3s ease;
}
.sangfor__card:hover {
  border-top-color: rgba(100, 130, 255, 0.35);
}

.sangfor__card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.sangfor__card-title {
  font-family: var(--font-head, 'Space Grotesk', sans-serif);
  font-size: clamp(1.15rem, 1.8vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
  line-height: 1.2;
  margin: 0;
}

.sangfor__card-num {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(100, 130, 255, 0.9);
  background: rgba(100, 130, 255, 0.12);
  border: 1px solid rgba(100, 130, 255, 0.25);
  border-radius: 3px;
  padding: 0.25rem 0.55rem;
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.sangfor__card-desc {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.45);
  max-width: 480px;
  margin: 0;
}

/* ── Impact phrase ── */
.sangfor__impact {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 4rem 2rem 5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin: 0 2.5rem;
}

.sangfor__impact-text {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: clamp(0.8rem, 1.1vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
  margin: 0;
  background: linear-gradient(
    90deg,
    rgba(100, 130, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.85) 40%,
    rgba(180, 100, 255, 0.85) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Transition into services: fade bottom edge to warm gray */
.scene--sangfor::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, #EAEAE4);
  pointer-events: none;
  z-index: 2;
}

/* ── Mobile ── */
@media (max-width: 860px) {
  .sangfor__inner {
    grid-template-columns: 1fr;
    padding: 0 1.5rem;
  }
  .sangfor__left {
    position: relative;
    height: auto;
    padding: 5rem 0 2rem;
  }
  .sangfor__right {
    padding: 2rem 0 6rem;
  }
  .sangfor__card {
    padding: 2.5rem 0;
  }
  .sangfor__impact {
    margin: 0 0;
    padding: 3rem 0 4rem;
  }
}

/* ================================================
   RESPONSIVE — MOBILE
   ================================================ */
@media (max-width: 768px) {
  .scene--services { height: auto !important; }

  /* Hide desktop scroll experience, show mobile grid */
  .services__sticky-panel { display: none !important; }
  .services__progress-track { display: none; }

  /* Mobile services grid */
  .services__mobile-grid {
    display: flex; flex-direction: column;
    padding: 3rem 1.5rem 4rem;
  }
  .svc-mobile-card {
    padding: 1.75rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.07);
  }
  .svc-mobile-num {
    display: block;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.7rem; font-weight: 600;
    letter-spacing: 0.1em; color: #6B6B7B;
    margin-bottom: 0.6rem;
  }
  .svc-mobile-card h3 {
    font-family: var(--font-head, 'Space Grotesk', sans-serif);
    font-size: clamp(1.75rem, 9vw, 2.5rem);
    font-weight: 700; line-height: 0.95;
    letter-spacing: -0.025em;
    color: var(--ink, #0D0D1A);
    margin-bottom: 0.75rem;
  }
  .svc-mobile-card p {
    font-size: 0.875rem; color: #6B6B7B;
    line-height: 1.65; margin-bottom: 0.75rem;
  }
  .svc-mobile-link {
    font-size: 0.8rem; font-weight: 600;
    color: var(--blue, #4361EE);
    text-decoration: none; letter-spacing: 0.04em;
  }

  .diagnostic__layout { grid-template-columns: 1fr; gap: 2rem; }
  .diagnostic__visual { position: relative; top: auto; }
  .scene--diagnostic { padding: 5rem 1.5rem; }
  .diag-item__content { grid-template-columns: 2rem 1fr; gap: 0.75rem; }
  .diag-item__status { display: none; }
  .diag-item__panel-inner { grid-template-columns: 1fr; gap: 1rem; }
  .services__tags-area { margin-top: 1rem; }

  .hero__headline { font-size: clamp(2.5rem, 14vw, 5rem); }

  .scene--closing,
  .scene--about { padding: 5rem 1.5rem; }
  .closing__actions { flex-direction: column; }

  .clients__ticker-item { font-size: clamp(1rem, 5vw, 1.4rem); padding: 0.3rem 1.6rem; }
  .scene--clients { padding: 3rem 0 4rem; }

  .scene--partners { padding: 3rem 1.5rem 4rem; }
  .partners__grid { gap: 2.5rem; }
  .partners__item img { height: 36px; }

  .diag-item__panel-inner { padding: 0.75rem 0 1rem; }
}