/* =========================================================
   Vástago — sistema visual
   Tokens, reset, layout, componentes, secciones, motion
   ========================================================= */

:root {
  color-scheme: light;

  /* Color */
  --bg: #FAFAF8;
  --bg-muted: #F1EEE9;
  --bg-dark: #0B0B10;
  --ink: #0B0B10;
  --ink-soft: #55555F;
  --ink-faint: #8A8A93;
  --line: rgba(11, 11, 16, 0.10);
  --line-light: rgba(255, 255, 255, 0.16);
  --white: #FFFFFF;

  --brand-purple: #6D28D9;
  --brand-blue: #3B82F6;
  --brand-dot: #581C87;
  --brand-gradient: linear-gradient(135deg, var(--brand-purple), var(--brand-blue));

  /* Type */
  --font-heading: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Layout */
  --container-w: 1280px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-pad: clamp(4rem, 9vw, 8rem);

  /* Radius & elevation */
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 32px;
  --radius-shelf: clamp(24px, 4vw, 48px);
  --shadow-sm: 0 2px 10px rgba(11, 11, 16, 0.06);
  --shadow-md: 0 12px 32px rgba(11, 11, 16, 0.10);
  --shadow-lift: 0 18px 40px rgba(11, 11, 16, 0.12);

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 220ms;
  --dur-med: 500ms;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; margin: 0; color: var(--ink); }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea { font-family: inherit; font-size: 1rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

.skip-link {
  position: absolute; left: 1rem; top: -60px;
  background: var(--ink); color: var(--white);
  padding: 0.75rem 1.25rem; border-radius: 8px; z-index: 1000;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: 1rem; }

:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 3px;
}

.container {
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Type helpers ---------- */
.eyebrow {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-purple);
  margin: 0 0 1rem;
}
.eyebrow--light { color: #C4B5FD; }

.section__title {
  font-size: clamp(2rem, 4vw, 3rem);
  max-width: 20ch;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.section__title--center { max-width: none; text-align: center; margin-inline: auto; }

.editorial { max-width: 780px; }
.editorial--center { max-width: 720px; margin-inline: auto; text-align: center; }
.editorial__title {
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  margin-bottom: 1.5rem;
}
.editorial__title--light { color: var(--white); }
.editorial__title--accent {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.editorial__lede {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 60ch;
  margin-bottom: 1.25rem;
}
.editorial__lede--light { color: #C7C7D1; }
.editorial__accent {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 600;
  margin: 2rem 0;
}
.editorial__body p { color: var(--ink-soft); font-size: 1.05rem; margin-bottom: 1.1rem; max-width: 60ch; }

/* ---------- Word-by-word reveal on scroll (titles + accent lines) ----------
   Each word starts dimmed and fades to full opacity as its heading scrolls
   through the viewport. Uses opacity (not color) so it works unmodified on
   plain ink text, light text on dark sections, and the gradient-clip
   .editorial__title--accent line. */
.word-reveal__word {
  display: inline-block;
  opacity: 0.3;
  transition: opacity 0.3s var(--ease);
  will-change: opacity;
}
.word-reveal__word.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .word-reveal__word { opacity: 1 !important; transition: none; }
}

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.btn--primary { background: var(--ink); color: var(--white); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: #000; transform: translateY(-2px) scale(1.02); box-shadow: var(--shadow-md); }
.btn--primary:active { transform: translateY(0) scale(0.98); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); background: var(--ink); color: var(--white); transform: translateY(-2px); }
.btn--ghost:active { transform: translateY(0) scale(0.98); }
.btn--light { background: var(--white); color: var(--ink); margin-top: 2rem; }
.btn--light:hover { transform: translateY(-2px) scale(1.02); box-shadow: var(--shadow-md); }
.btn--sm { padding: 0.6rem 1.25rem; font-size: 0.85rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  transition: gap var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.link-arrow:hover { color: var(--brand-purple); border-color: var(--brand-purple); }
.link-arrow::after { content: "→"; transition: transform var(--dur-fast) var(--ease-spring); }
.link-arrow:hover::after { transform: translateX(6px); }

/* Breadcrumb back-link on the capability pages — same family as
   .link-arrow but pointing back, so it doesn't inherit the "→" suffix. */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: var(--ink-soft);
  transition: color var(--dur-fast) var(--ease), gap var(--dur-fast) var(--ease);
}
.back-link:hover { color: var(--brand-purple); gap: 0.6rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding-top: clamp(0.75rem, 2vw, 1.25rem);
  transition: padding var(--dur-med) var(--ease);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.7rem 0.9rem 0.7rem 1.4rem;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid transparent;
  box-shadow: none;
  transition: border-color var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
}
.site-header[data-scrolled] .site-header__inner {
  border-color: var(--line);
  box-shadow: var(--shadow-md);
}
.brand__logo { height: 46px; width: auto; transition: transform var(--dur-fast) var(--ease-spring); }
.brand:hover .brand__logo { transform: scale(1.04); }

@media (max-width: 860px) {
  .site-header { padding-top: 0; }
  .site-header__inner { border-radius: 0; padding: 0.9rem var(--gutter); }
}

.nav__list { display: flex; gap: clamp(1.25rem, 2vw, 2.25rem); }
.nav__list a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-soft);
  position: relative;
  padding-bottom: 4px;
  transition: color var(--dur-fast) var(--ease);
}
.nav__list a:hover, .nav__list a[aria-current="true"] { color: var(--ink); }
.nav__list a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--brand-gradient);
  transform: scaleX(0); transform-origin: center;
  transition: transform var(--dur-fast) var(--ease-spring);
}
.nav__list a:hover::after { transform: scaleX(0.6); }
.nav__list a[aria-current="true"]::after { transform: scaleX(1); }

.nav-toggle { display: none; flex-direction: column; gap: 4px; background: none; border: none; padding: 8px; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.nav-toggle__bar { width: 22px; height: 2px; background: var(--ink); transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(4) { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 1.5rem;
  /* Fixed full-height panel (not static flow inside the sticky header): an
     opaque background plus covering down to the viewport bottom means the
     page underneath can never show through or be touch-scrolled while the
     menu is open, whatever position the page was scrolled to when it
     opened. --header-h is kept in sync with the real header height by JS. */
  position: fixed;
  top: var(--header-h, 88px);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: var(--bg);
  padding: 1.5rem var(--gutter) 2rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--line);
}
.mobile-nav__list { display: flex; flex-direction: column; gap: 1.1rem; }
.mobile-nav__list a { font-size: 1.15rem; font-weight: 500; display: block; padding: 0.5rem 0; min-height: 44px; display: flex; align-items: center; }
.mobile-nav__cta { justify-content: center; margin-top: 0.5rem; }

@media (max-width: 860px) {
  .nav, .nav__cta { display: none; }
  .nav-toggle { display: flex; }
  .mobile-nav[data-open] { display: flex; }
}

/* ---------- Hero (full-bleed photo) ---------- */
:root { --header-h: 88px; } /* fallback until JS measures the real floating-header height */
.hero {
  position: relative;
  min-height: 92vh;
  margin-top: calc(var(--header-h) * -1); /* pull up so the photo reaches behind the floating header */
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--white);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  will-change: transform, filter;
}
.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: var(--bg-dark); /* shows behind the poster while the video loads */
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  will-change: opacity;
  background:
    linear-gradient(180deg, rgba(5, 8, 15, 0.45) 0%, rgba(5, 8, 15, 0.1) 30%, rgba(5, 8, 15, 0.5) 100%),
    linear-gradient(90deg, rgba(6, 10, 8, 0.85) 0%, rgba(6, 10, 8, 0.58) 35%, rgba(6, 10, 8, 0.24) 65%, rgba(6, 10, 8, 0.05) 100%);
}
/* Below ~900px .hero__content is no longer capped at 640px (the viewport
   itself is narrower), so text runs edge-to-edge into the low-alpha right
   side of the gradient above — measured contrast failures down to ~3:1.
   Swap to a flatter, uniformly darker scrim instead of a left-to-right fade. */
@media (max-width: 900px) {
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(5, 8, 15, 0.5) 0%, rgba(5, 8, 15, 0.25) 30%, rgba(5, 8, 15, 0.55) 100%),
      linear-gradient(90deg, rgba(6, 10, 8, 0.88) 0%, rgba(6, 10, 8, 0.74) 50%, rgba(6, 10, 8, 0.58) 100%);
  }
}

/* Scroll-exit wash: fades the hero to the page background color (instead of
   to black) so it hands off cleanly into the plain section right below it. */
.hero__exit-fade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

/* ---------- Hero: digital connection network, growing out of the vástago ----------
   Sits above the scrim/exit-fade (same z-tier, painted after them) and below
   the text (.hero__inner is z-index:2), off to the right where the scrim is
   lightest. pointer-events:none — it never blocks the CTA/nav; the mouse
   tracking that drives it listens on .hero itself (see main.js). */
.hero__network {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
  overflow: visible;
}
.network--hero {
  width: min(48vw, 620px);
  height: auto;
  overflow: visible;
  margin-right: clamp(-2vw, 0vw, 4vw);
  filter: drop-shadow(0 0 50px rgba(5, 8, 15, 0.55));
}
/* White/translucent instead of the brand blue-purple used elsewhere — reads
   as part of the photo's own light rather than a distinct brand overlay.
   Kept deliberately faint at rest (more nodes than before, so each one
   needs to read as quieter) — main.js brightens only the ones near the
   cursor, so the density only becomes obvious on interaction. */
.network--hero .network__line { stroke: rgba(255, 255, 255, 0.3); }
.network--hero .network__node { fill: rgba(255, 255, 255, 0.45); }
.network--hero .network__layer--far .network__line,
.network--hero .network__layer--far .network__node { opacity: 0.4; }
.network--hero .network__layer--mid .network__line { stroke: rgba(255, 255, 255, 0.3); }
.network--hero .network__layer--mid .network__node { fill: rgba(255, 255, 255, 0.5); }
.network--hero .network__line--bright {
  stroke: rgba(255, 255, 255, 0.65);
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
}
.network--hero .network__node--bright {
  fill: rgba(255, 255, 255, 0.85);
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.55));
}
.network--hero .network__node--hub {
  fill: #fff;
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.75));
}
@media (max-width: 900px) {
  .network--hero { width: min(70vw, 460px); opacity: 0.85; }
}
@media (max-width: 620px) {
  .hero__network { justify-content: center; }
  .network--hero { width: min(85vw, 380px); margin-right: 0; opacity: 0.32; }
}

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
.hero__content > * { opacity: 0; animation: heroFadeUp 800ms var(--ease) forwards; }
.hero__content > .eyebrow { animation-delay: 80ms; }
.hero__content > .hero__title { animation-delay: 200ms; }
.hero__content > .hero__text { animation-delay: 340ms; }
.hero__content > .hero__actions { animation-delay: 460ms; }
.hero__content > .hero__actions > * { opacity: 1; } /* avoid double-fade on children */

@media (prefers-reduced-motion: reduce) {
  .hero__content > * { animation: none; opacity: 1; transform: none; }
  .hero__media { transform: none !important; }
}

.hero__inner { position: relative; z-index: 2; width: 100%; padding-top: calc(var(--header-h) + clamp(3rem, 8vw, 5rem)); padding-bottom: clamp(3rem, 8vw, 5rem); will-change: opacity, transform; }
.hero__content { max-width: 640px; }
.hero .eyebrow { color: #E9E6FF; }
.hero__title {
  font-size: clamp(2.25rem, 4.8vw, 3.9rem);
  max-width: 18ch;
  margin-bottom: 1.5rem;
  color: var(--white);
}
.hero__title-accent { color: #C4B5FD; }
.hero__text {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.94);
  max-width: 48ch;
  margin-bottom: 2.25rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.hero .btn--ghost { color: var(--white); border-color: rgba(255, 255, 255, 0.4); }
.hero .btn--ghost:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.hero .btn__arrow { display: inline-block; transition: transform var(--dur-fast) var(--ease-spring); }
.hero .btn--light:hover .btn__arrow { transform: translateX(4px); }

/* ---------- Hero: capability strip ---------- */
.hero__steps {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 0;
  margin-top: clamp(3rem, 9vw, 6rem);
  opacity: 0;
  animation: heroFadeUp 800ms var(--ease) forwards;
  animation-delay: 620ms;
}
.hero__steps a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  transition: color var(--dur-fast) var(--ease);
}
.hero__steps a:hover { color: var(--white); }
.hero__steps a:not(:last-child)::after {
  content: "→";
  margin: 0 0.9rem;
  color: rgba(255, 255, 255, 0.3);
  font-weight: 400;
}
.hero__steps-index { color: rgba(255, 255, 255, 0.45); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .hero__steps { animation: none; opacity: 1; }
}

@media (max-width: 760px) {
  .hero { min-height: 86vh; }
  .hero__steps { gap: 0.5rem 0; margin-top: 2.5rem; }
  .hero__steps a { font-size: 0.78rem; }
  .hero__steps a:not(:last-child)::after { margin: 0 0.5rem; }
}

/* ---------- Sprout graphic system ---------- */
.sprout { width: 100%; height: auto; overflow: visible; }
.sprout__line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s var(--ease);
}
.sprout__stem { stroke: url(#gradHero); }
.sprout__branch { stroke: var(--brand-purple); }
.sprout__offshoot { stroke: var(--brand-blue); opacity: 0.85; }
.sprout__node {
  fill: var(--brand-blue);
  opacity: 0;
  transform-origin: center;
  transform: scale(0.4);
  transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}
.sprout__node--origin { fill: var(--ink); }
.sprout__square { fill: var(--brand-dot); opacity: 0; transition: opacity var(--dur-med) var(--ease); }

.sprout[data-inview] .sprout__line { stroke-dashoffset: 0; }
.sprout[data-inview] .sprout__node,
.sprout[data-inview] .sprout__square { opacity: 1; transform: scale(1); }
.sprout[data-inview] .sprout__branch { transition-delay: 0.15s; }
.sprout[data-inview] .sprout__offshoot { transition-delay: 0.3s; }
.sprout[data-inview] .sprout__node { transition-delay: 0.5s; }
.sprout[data-inview] .sprout__square { transition-delay: 0.6s; }

.sprout--capability { max-width: 260px; margin-inline: auto; }
.sprout--ai { width: 100%; max-width: 640px; margin: 3rem auto 0; }
.sprout--grown { max-width: 560px; margin: 3rem auto 0; }

@media (prefers-reduced-motion: reduce) {
  .sprout__line, .sprout__node, .sprout__square { transition: none !important; }
  .sprout__line { stroke-dashoffset: 0 !important; }
  .sprout__node, .sprout__square { opacity: 1 !important; transform: scale(1) !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--section-pad); }
.section--muted {
  background: var(--bg-muted);
  border-radius: var(--radius-shelf) var(--radius-shelf) 0 0;
  margin-top: calc(var(--radius-shelf) * -1);
  padding-top: calc(var(--section-pad) + var(--radius-shelf));
}
.section--feature { padding-block: var(--section-pad); }
.section--dark {
  background: var(--bg-dark);
  color: var(--white);
  padding-block: var(--section-pad);
  position: relative;
  overflow: hidden;
  /* overflow:hidden alone can fail to clip an animated/transformed descendant
     (the .showcase__bg parallax graphic) in some browsers, letting it paint
     past the section's edge and over the next section. clip-path forces a
     hard compositor clip to the same rounded shape as a fix. */
  clip-path: inset(0 0 0 0 round var(--radius-shelf) var(--radius-shelf) 0 0);
  border-radius: var(--radius-shelf) var(--radius-shelf) 0 0;
  margin-top: calc(var(--radius-shelf) * -1);
  padding-top: calc(var(--section-pad) + var(--radius-shelf));
}
.section--brand { padding-block: calc(var(--section-pad) * 1.2); }
.section--cta {
  padding-block: var(--section-pad);
  background: var(--bg-muted);
  border-radius: var(--radius-shelf) var(--radius-shelf) 0 0;
  margin-top: calc(var(--radius-shelf) * -1);
  padding-top: calc(var(--section-pad) + var(--radius-shelf));
}

/* Principles */
.principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
}
.principles__item { border-top: 1px solid var(--line); padding-top: 1.5rem; }
.principles__index { font-family: var(--font-heading); color: var(--ink-faint); font-size: 0.9rem; }
.principles__item h3 { font-size: 1.4rem; margin: 0.5rem 0 0.75rem; }
.principles__item p:not(.eyebrow) { color: var(--ink-soft); }
@media (max-width: 760px) { .principles { grid-template-columns: 1fr; } }

/* Value */
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3rem); }
.value-grid__tag { font-family: var(--font-heading); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-blue); margin-bottom: 0.75rem; }
.value-grid__item h3 { font-size: 1.75rem; margin-bottom: 0.5rem; }
.value-grid__item p:not(.value-grid__tag) { color: var(--ink-soft); }
@media (max-width: 760px) { .value-grid { grid-template-columns: 1fr; gap: 2.5rem; } }

/* Capability alternating rows */
.capability { padding-block: clamp(3rem, 7vw, 6rem); border-top: 1px solid var(--line); }
.capability__inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.capability--reverse .capability__inner { grid-template-columns: 0.9fr 1.1fr; }
.capability--reverse .capability__visual { order: -1; }
.capability__text h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 1rem; }
.capability__text p { color: var(--ink-soft); font-size: 1.05rem; margin-bottom: 1rem; max-width: 52ch; }
.capability__visual { transition: transform var(--dur-med) var(--ease); }
.capability__visual:hover { transform: scale(1.05); }
.capability__visual:hover .sprout__node { transform: scale(1.15); }
@media (max-width: 860px) {
  /* .capability--reverse .capability__inner (2 classes) outweighs the plain
     .capability__inner rule above even inside this query, so it must be
     named here too or Procesos/Tecnología stay stuck in the 2-column
     desktop grid on mobile, crushing the text into a narrow column. */
  .capability__inner,
  .capability--reverse .capability__inner { grid-template-columns: 1fr; }
  .capability--reverse .capability__visual { order: 0; }
  .capability__visual { max-width: 220px; margin-inline: auto; }
}

.tag-list { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.25rem 0 1.5rem; }
.tag-list li {
  border: 1px solid var(--line); border-radius: 999px; padding: 0.4rem 0.9rem; font-size: 0.85rem; color: var(--ink-soft);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease-spring);
}
.tag-list li:hover { border-color: var(--brand-purple); color: var(--ink); transform: translateY(-2px); }
.tag-list--light li { border-color: var(--line-light); color: #D8D8E2; }
.tag-list--light li:hover { border-color: #fff; color: #fff; }

/* AI section */
.section--dark .sprout__line { stroke: rgba(255, 255, 255, 0.35); }
.section--dark .sprout__node--origin { fill: var(--white); }
.section--dark .eyebrow { margin-top: 0; }
.section--dark .editorial { max-width: 820px; position: relative; z-index: 1; }
.section--dark .btn--light { display: inline-flex; }


/* Perspectives */
.perspectives { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.perspectives__item {
  border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1.75rem; background: var(--white);
  transition: box-shadow var(--dur-med) var(--ease), transform var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease);
}
.perspectives__item:hover { box-shadow: var(--shadow-lift); transform: translateY(-6px); border-color: transparent; }
.perspectives__item h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.perspectives__item p { color: var(--ink-soft); font-size: 0.95rem; }
.perspectives__item--center { background: var(--ink); color: var(--white); }
.perspectives__item--center p { color: #C7C7D1; }
.perspectives__item--center:hover { transform: translateY(-6px) scale(1.02); }
@media (max-width: 760px) { .perspectives { grid-template-columns: 1fr; } }

/* Diagnosis */
.diagnosis { display: flex; flex-direction: column; gap: 0; margin: 2rem 0 2.5rem; counter-reset: diag; }
.diagnosis li {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 0.5rem; border-bottom: 1px solid var(--line);
  font-family: var(--font-heading); font-size: 1.15rem; font-weight: 500;
  counter-increment: diag;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease), padding-left var(--dur-fast) var(--ease);
}
.diagnosis li:hover { background: var(--bg-muted); padding-left: 1rem; }
.diagnosis li::before { content: counter(diag, decimal-leading-zero) "  "; color: var(--ink-faint); font-weight: 700; }
.diagnosis li::after {
  content: "→"; flex-shrink: 0; color: var(--ink-faint);
  opacity: 0; transform: translateX(-8px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease-spring);
}
.diagnosis li:hover::after { opacity: 1; transform: translateX(0); color: var(--brand-purple); }

/* Relationship */
.relationship { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.relationship__item {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); padding: clamp(1.5rem, 3vw, 2rem);
  transition: box-shadow var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}
.relationship__item:hover { box-shadow: var(--shadow-lift); transform: translateY(-6px); }
.relationship__item h3 { font-size: 1.35rem; margin-bottom: 0.75rem; }
.relationship__item p { color: var(--ink-soft); margin-bottom: 0.75rem; }
.relationship__flow { font-family: var(--font-heading); font-weight: 600; color: var(--ink); font-size: 0.9rem; }
@media (max-width: 860px) { .relationship { grid-template-columns: 1fr; } }

/* CTA final + form */
.cta-final { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 900px) { .cta-final { grid-template-columns: 1fr; } }

.form { display: flex; flex-direction: column; gap: 1.25rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.5rem); box-shadow: var(--shadow-sm); }
.form__row { display: flex; flex-direction: column; gap: 0.5rem; }
.form__row label { font-size: 0.9rem; font-weight: 600; }
.form__row input, .form__row textarea {
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.85rem 1.1rem;
  background: var(--bg); color: var(--ink); resize: vertical;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.form__row input:focus, .form__row textarea:focus { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }
.form__row[data-invalid] input, .form__row[data-invalid] textarea { border-color: #DC2626; }
.form__error { font-size: 0.85rem; color: #DC2626; min-height: 1.1em; }
.form__status { font-size: 0.95rem; min-height: 1.2em; }
.form__status[data-state="success"] { color: #15803D; }
.form__status[data-state="error"] { color: #DC2626; }

/* ---------- Footer ---------- */
.footer { background: var(--bg-muted); border-top: 1px solid var(--line); padding-top: clamp(3.5rem, 7vw, 5.5rem); overflow: hidden; }
.footer__top {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
  padding-bottom: clamp(3rem, 8vw, 6rem);
}
.footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.footer__logo { height: 154px; width: auto; }
.footer__tagline {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
  max-width: 22ch;
}
.footer__tagline em {
  font-style: italic;
  font-weight: 500;
  color: var(--brand-purple);
}
.footer__columns { display: grid; grid-template-columns: repeat(3, auto); gap: clamp(1.5rem, 4vw, 3rem); justify-content: end; text-align: left; }
.footer__col { display: flex; flex-direction: column; gap: 0.75rem; }
.footer__col-title { font-family: var(--font-heading); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-faint); margin-bottom: 0.25rem; }
.footer__col a, .footer__col-soon { color: var(--ink-soft); font-size: 0.95rem; }
.footer__col a:hover { color: var(--brand-purple); }
.footer__col-soon { color: var(--ink-faint); cursor: default; }
.footer__bottom { border-top: 1px solid var(--line); padding: 1.5rem 0; }
.footer__bottom p { color: var(--ink-faint); font-size: 0.85rem; }
@media (max-width: 760px) {
  .footer__top { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer__tagline { max-width: none; }
  .footer__columns { grid-template-columns: repeat(2, auto); justify-content: start; row-gap: 2rem; }
  /* The fixed height:154px (desktop) forces width down via the global
     img{max-width:100%} once the mobile container is narrower than the
     logo's natural width at that height, but height stays literal —
     stretching/squashing the aspect ratio. height:auto here lets width
     and height scale together instead. */
  .footer__logo { height: auto; }
}

/* ---------- Showcase: full-bleed background modules ---------- */
.showcase {
  position: relative;
  overflow: hidden;
  min-height: 78vh;
  display: flex;
  align-items: center;
}
.showcase__bg {
  position: absolute;
  inset: -15%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  will-change: transform;
}
.showcase__bg .sprout { width: min(150%, 1500px); max-width: none; opacity: 0.55; }
.showcase--dark .showcase__bg .sprout__line { stroke: rgba(255, 255, 255, 0.3); }
.showcase--dark .showcase__bg .sprout__node--origin { fill: var(--white); }

/* No scroll-parallax on this background (data-parallax removed in the
   markup) — the only motion here is the connection network's cursor
   parallax (see main.js), driven by mouse position, never by scroll. */

/* ---------- AI section: connection network, drifts toward the cursor ---------- */
.showcase--network .showcase__bg {
  justify-content: flex-start;
  inset: -14% auto -14% -4%;
  width: 100%;
}
.network {
  width: min(56vw, 620px);
  height: auto;
  overflow: visible;
}
.network__line {
  fill: none;
  stroke: var(--brand-blue);
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.35;
  transition: stroke-width var(--dur-fast) var(--ease);
}
.network__node {
  fill: var(--brand-blue);
  opacity: 0.55;
  transform-origin: center;
  transition: transform var(--dur-fast) var(--ease);
}
.network__layer--far .network__line,
.network__layer--far .network__node { opacity: 0.25; }
.network__layer--mid .network__line { stroke: var(--brand-purple); opacity: 0.4; }
.network__layer--mid .network__node { fill: var(--brand-purple); opacity: 0.6; }
.network__line--bright {
  stroke: url(#networkGradient);
  stroke-width: 2;
  opacity: 0.8;
  filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.6));
}
.network__node--bright {
  fill: #C4B5FD;
  opacity: 0.9;
  filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.7));
}
.network__node--hub {
  fill: #E0D8FF;
  filter: drop-shadow(0 0 16px rgba(139, 92, 246, 0.9));
}
.network__layer { will-change: transform; }
.showcase--network .editorial.showcase__content { margin-left: auto; max-width: 480px; }
@media (max-width: 860px) {
  .showcase--network .showcase__bg { justify-content: center; inset: -8% -10% auto -10%; width: auto; top: 2%; opacity: 0.7; }
  .network { width: min(90vw, 420px); }
  .showcase--network .editorial.showcase__content { margin-left: 0; max-width: none; }
}

.showcase__content { position: relative; z-index: 1; }

.showcase__cta {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  font-weight: 600;
  font-size: 1.05rem;
}
.btn-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 1.2rem;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease-spring), border-color var(--dur-fast) var(--ease);
}
.showcase__cta:hover .btn-circle { background: var(--ink); color: var(--white); transform: translateX(4px) scale(1.05); }
.showcase--dark .showcase__cta { color: var(--white); }
.showcase--dark .btn-circle { border-color: var(--line-light); color: var(--white); }
.showcase--dark .showcase__cta:hover .btn-circle { background: var(--white); color: var(--ink); border-color: var(--white); }

@media (max-width: 760px) {
  .showcase { min-height: 60vh; }
  .showcase__bg .sprout { opacity: 0.4; }
}

/* ---------- Showcase: split layout (text left, graphic right) ---------- */
.showcase--split { min-height: 0; display: block; overflow: visible; }
.showcase__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.showcase--split .showcase__content { text-align: left; margin-inline: 0; max-width: 560px; }
.showcase--split .showcase__cta { margin-top: 2rem; }
.showcase__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}
.showcase__visual-inner {
  width: 100%;
  transition: transform var(--dur-med) var(--ease-spring);
}
.showcase__visual:hover .showcase__visual-inner,
.showcase__visual:focus-within .showcase__visual-inner { transform: scale(1.08); }
.showcase__visual .network { width: 100%; height: auto; overflow: visible; }

.showcase__visual:hover .network__node,
.showcase__visual:focus-within .network__node { transform: scale(1.2); }
.showcase__visual:hover .network__line,
.showcase__visual:focus-within .network__line { stroke-width: 2.5; }
@media (prefers-reduced-motion: reduce) {
  .showcase__visual-inner { transition: none; }
}
@media (max-width: 860px) {
  .showcase__grid { grid-template-columns: 1fr; }
  .showcase--split .showcase__content { max-width: none; }
  .showcase__visual { max-width: 340px; margin: 0 auto; }
}

/* ---------- Ambient background orbs (parallax + idle drift) ---------- */
.orb-host { position: relative; overflow: hidden; }
.bg-orb-wrap {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}
.bg-orb-wrap--1 { width: 560px; height: 560px; top: -160px; left: -140px; }
.bg-orb-wrap--2 { width: 460px; height: 460px; bottom: -140px; right: -120px; }
.bg-orb {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  filter: blur(50px);
  opacity: 0.6;
  animation: orbDrift 19s ease-in-out infinite;
}
.bg-orb--purple { background: radial-gradient(circle, rgba(109, 40, 217, 0.55), transparent 68%); }
.bg-orb--blue { background: radial-gradient(circle, rgba(59, 130, 246, 0.5), transparent 68%); animation-delay: -8s; }
@keyframes orbDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(34px, -26px) scale(1.14); }
}

/* Floating geometric shapes (echoing the logo's small square pixels) */
.bg-shape {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border: 2px solid rgba(109, 40, 217, 0.35);
  animation: shapeFloat 12s ease-in-out infinite;
}
.bg-shape--square { border-radius: 6px; }
.bg-shape--circle { border-radius: 50%; border-color: rgba(59, 130, 246, 0.4); }
.bg-shape--sm { width: 14px; height: 14px; }
.bg-shape--md { width: 22px; height: 22px; }
.bg-shape--lg { width: 32px; height: 32px; }
@keyframes shapeFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-22px) rotate(20deg); }
}

/* content that sits above the orbs within an .orb-host section */
.orb-host > .container { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .bg-orb, .bg-shape { animation: none; }
  .bg-orb-wrap { transform: none !important; }
}
@media (max-width: 760px) {
  .bg-orb-wrap--1, .bg-orb-wrap--2 { width: 300px; height: 300px; }
  .bg-shape { display: none; }
}

/* ---------- Whole-section entrance (scale + fade) as each section reaches the viewport ---------- */
main > section[data-scene] {
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}
main > section[data-scene][data-inview] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  main > section[data-scene] { opacity: 1; transform: none; transition: none; }
}

/* Reveal-on-scroll (generic, with stagger for grid siblings) */
[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
[data-reveal][data-inview] { opacity: 1; transform: none; }

.principles__item:nth-child(2)[data-reveal],
.value-grid__item:nth-child(2)[data-reveal],
.perspectives__item:nth-child(2)[data-reveal],
.relationship__item:nth-child(2)[data-reveal] { transition-delay: 100ms; }

.principles__item:nth-child(3)[data-reveal],
.value-grid__item:nth-child(3)[data-reveal],
.perspectives__item:nth-child(3)[data-reveal],
.relationship__item:nth-child(3)[data-reveal] { transition-delay: 200ms; }

.perspectives__item:nth-child(4)[data-reveal] { transition-delay: 300ms; }
.perspectives__item:nth-child(5)[data-reveal] { transition-delay: 400ms; }
.perspectives__item:nth-child(6)[data-reveal] { transition-delay: 500ms; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}