/* =========================================================================
   Servicios Informáticos — Design System
   Dark carbon, single electric accent, infrastructure/network motif.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --bg-void: #08090b;
  --bg-base: #0a0c0f;
  --bg-surface: #10131a;
  --bg-surface-2: #151922;
  --bg-elevated: #1b202b;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-accent: rgba(69, 130, 255, 0.4);

  /* Text */
  --text-primary: #f3f4f2;
  --text-secondary: #a6adb9;
  --text-tertiary: #828a99; /* WCAG AA: 5.6:1 on --bg-base, 5.3:1 on --bg-surface */
  --text-on-accent: #061021;

  /* Brand accent — electric blue + cyan (infra/cloud signal) */
  --accent: #4582ff;
  --accent-strong: #2e6fff;
  --accent-2: #22d3ee;
  --accent-soft: rgba(69, 130, 255, 0.12);
  --accent-glow: rgba(69, 130, 255, 0.45);

  /* Rare warm accent — used only for the AI/software sparks, never structurally */
  --accent-gold: #f5c065;

  /* Status */
  --success: #22c55e;
  --warning: #f5a524;
  --danger: #f2555a;

  /* Gradients */
  --gradient-accent: linear-gradient(135deg, var(--accent-strong), var(--accent-2));
  --gradient-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));

  /* Typography */
  --font-heading: "Archivo", system-ui, sans-serif;
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

  --fs-display: clamp(2.75rem, 2.05rem + 3.2vw, 5.25rem);
  --fs-h1: clamp(2.25rem, 1.85rem + 1.8vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem);
  --fs-h3: clamp(1.3rem, 1.15rem + 0.6vw, 1.75rem);
  --fs-h4: clamp(1.1rem, 1.02rem + 0.3vw, 1.25rem);
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.65;

  --ls-tight: -0.03em;
  --ls-heading: -0.02em;
  --ls-label: 0.08em;

  /* Spacing (4/8 rhythm) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 2.5rem;
  --space-10: 3rem;
  --space-12: 4rem;
  --space-16: 5rem;
  --space-20: 6rem;
  --space-24: 8rem;
  --space-32: 10rem;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;

  /* Shadow / elevation */
  --shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 20px -12px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 24px 48px -24px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 0 1px var(--border-accent), 0 0 40px -8px var(--accent-glow);

  /* Motion */
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-expo: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;

  /* Layout */
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --nav-height: 76px;
  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;

  color-scheme: dark;
}

/* -------------------------------------------------------------------------
   2. Reset
   ------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
}

html.has-lenis {
  scroll-behavior: auto;
}

body {
  min-height: 100dvh;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}

button {
  cursor: pointer;
}

ul,
ol {
  list-style: none;
}

/* Background texture: faint radial glow + grid, fixed */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 60% 40% at 15% 0%, rgba(69, 130, 255, 0.16), transparent 60%),
    radial-gradient(ellipse 50% 35% at 100% 20%, rgba(34, 211, 238, 0.1), transparent 60%),
    var(--bg-base);
  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black, transparent 75%);
  pointer-events: none;
}

/* Respect reduced motion globally */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Focus visibility */
:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--accent-strong);
  color: #fff;
}

/* Scrollbar (webkit) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg-base);
}
::-webkit-scrollbar-thumb {
  background: var(--bg-elevated);
  border-radius: var(--radius-full);
  border: 2px solid var(--bg-base);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--border-strong);
}

/* -------------------------------------------------------------------------
   3. Typography
   ------------------------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  font-weight: 600;
  color: var(--text-primary);
}

.display {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-weight: 600;
}

h1,
.h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

h2,
.h2 {
  font-size: var(--fs-h2);
}

h3,
.h3 {
  font-size: var(--fs-h3);
}

h4,
.h4 {
  font-size: var(--fs-h4);
}

p {
  color: var(--text-secondary);
  max-width: 62ch;
}

.lede {
  font-size: var(--fs-body-lg);
  color: var(--text-secondary);
  max-width: 54ch;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent-2);
}

.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 10px 2px var(--accent-glow);
}

.text-secondary {
  color: var(--text-secondary);
}
.text-tertiary {
  color: var(--text-tertiary);
}
.text-accent {
  color: var(--accent-2);
}
.text-center {
  text-align: center;
}
.balance {
  text-wrap: balance;
}

strong {
  color: var(--text-primary);
  font-weight: 600;
}

.gradient-text {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* -------------------------------------------------------------------------
   4. Layout
   ------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: var(--space-24);
  position: relative;
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 640px;
  margin-bottom: var(--space-12);
}

.section-head.center {
  margin-inline: auto;
  align-items: center;
  text-align: center;
}

.section-head.split {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  max-width: none;
  gap: var(--space-6);
}

@media (max-width: 767px) {
  .section-head.split {
    flex-direction: column;
    align-items: flex-start;
  }
}

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

.cluster {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.grid {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: -100px;
  left: var(--space-4);
  z-index: var(--z-modal);
  background: var(--accent-strong);
  color: #fff;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  transition: top var(--dur-base) var(--ease-out-expo);
}

.skip-link:focus {
  top: var(--space-4);
}

/* -------------------------------------------------------------------------
   5. Buttons
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 52px;
  padding-inline: var(--space-6);
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: var(--fs-body);
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out-expo),
    box-shadow var(--dur-base) var(--ease-out-expo),
    background var(--dur-base) var(--ease-out-expo),
    border-color var(--dur-base) var(--ease-out-expo),
    color var(--dur-base) var(--ease-out-expo);
  will-change: transform;
}

.btn svg {
  width: 18px;
  height: 18px;
  transition: transform var(--dur-base) var(--ease-out-expo);
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  position: relative;
  overflow: hidden;
  background: var(--gradient-accent);
  color: #05101f;
  box-shadow: 0 12px 30px -12px var(--accent-glow);
}

.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: skewX(-20deg);
  transition: left 0.85s var(--ease-out-expo);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px -14px var(--accent-glow);
  }

  .btn-primary:hover::after {
    left: 135%;
  }

  .btn-primary:hover svg {
    transform: translateX(3px);
  }
}

/* No hover on touch — the sweep fires once as the button scrolls into
   view instead, plus an immediate confirm-sweep on tap. */
@media (hover: none) {
  .btn-primary:active::after {
    left: 135%;
    transition: left 0.4s ease-out;
  }

  .btn-primary.touch-glow-in::after {
    animation: btn-shine-sweep 1.1s ease-out;
  }
}

@keyframes btn-shine-sweep {
  0% {
    left: -75%;
  }
  100% {
    left: 135%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary::after {
    transition: none;
  }
  .btn-primary.touch-glow-in::after {
    animation: none;
  }
}

.btn-secondary {
  position: relative;
  isolation: isolate;
  background: var(--bg-surface-2);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  transition: color var(--dur-base) var(--ease-out-expo),
    border-color var(--dur-base) var(--ease-out-expo),
    transform var(--dur-base) var(--ease-out-expo);
}

/* A dot near the icon expands to fill the pill on hover — the accent
   sweeps in as a fill rather than a border/background swap. */
.btn-secondary::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: var(--radius-full);
  background: var(--gradient-accent);
  transform: scale(0);
  transform-origin: 85% 50%;
  transition: transform 0.45s var(--ease-out-expo);
  pointer-events: none;
}

.btn-secondary svg {
  transition: transform var(--dur-base) var(--ease-out-expo);
}

@media (hover: hover) and (pointer: fine) {
  .btn-secondary:hover {
    color: #05101f;
    border-color: transparent;
    transform: translateY(-2px);
  }

  .btn-secondary:hover::before {
    transform: scale(1);
  }

  .btn-secondary:hover svg {
    transform: translateX(3px);
  }
}

/* Touch gets the same fill as a tap response instead of a hover-track. */
@media (hover: none) {
  .btn-secondary:active {
    color: #05101f;
    border-color: transparent;
  }

  .btn-secondary:active::before {
    transform: scale(1);
    transition: transform 0.25s ease-out;
  }

  .btn-secondary:active svg {
    transform: translateX(3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-secondary::before {
    transition: none;
  }
}

.btn-ghost {
  height: auto;
  padding: 0;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-strong);
  border-radius: 0;
  padding-bottom: 2px;
}

.btn-ghost:hover {
  border-color: var(--accent-2);
  color: var(--accent-2);
}

.btn-sm {
  height: 42px;
  padding-inline: var(--space-5);
  font-size: var(--fs-small);
}

.btn-block {
  width: 100%;
}

.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--radius-full);
  background: var(--accent-soft);
  border: 1px solid var(--border-accent);
  color: var(--accent-2);
  transition: background var(--dur-base) var(--ease-out-expo), color var(--dur-base) var(--ease-out-expo),
    border-color var(--dur-base) var(--ease-out-expo), transform var(--dur-base) var(--ease-out-expo),
    box-shadow var(--dur-base) var(--ease-out-expo);
}

@media (hover: hover) and (pointer: fine) {
  .btn-icon:hover {
    background: var(--gradient-accent);
    border-color: transparent;
    color: #05101f;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -10px var(--accent-glow);
  }
}

/* -------------------------------------------------------------------------
   6. Navigation
   ------------------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, rgba(8, 9, 11, 0.65) 0%, rgba(8, 9, 11, 0.28) 75%, transparent 100%);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background var(--dur-slow) var(--ease-out-expo),
    border-color var(--dur-slow) var(--ease-out-expo),
    height var(--dur-base) var(--ease-out-expo),
    box-shadow var(--dur-slow) var(--ease-out-expo),
    backdrop-filter var(--dur-slow) var(--ease-out-expo);
}

.nav.is-scrolled {
  background: rgba(8, 9, 11, 0.78);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-color: var(--border-subtle);
  height: 68px;
  box-shadow: 0 16px 32px -20px rgba(0, 0, 0, 0.65);
}

.nav-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
  transition: opacity var(--dur-base) var(--ease-out-expo);
}

@media (hover: hover) and (pointer: fine) {
  .brand:hover {
    opacity: 0.85;
  }

  .brand:hover .brand-mark-img {
    transform: scale(1.06) rotate(-2deg);
  }
}

.brand-mark {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.nav-links {
  display: none;
  align-items: center;
  gap: var(--space-8);
  position: relative;
}

.nav-lamp {
  position: absolute;
  top: -42px;
  left: 0;
  width: 156px;
  height: 78px;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%) scale(0.85);
  transition: opacity 0.4s var(--ease-out-expo), transform 0.4s var(--ease-out-expo),
    left 0.4s var(--ease-out-expo);
  z-index: 1;
}

.nav-links.lamp-on .nav-lamp {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* Soft ambient bloom */
.nav-lamp::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 66% 62% at 50% 34%, rgba(150, 205, 255, 0.42) 0%, rgba(102, 178, 255, 0.14) 50%, transparent 78%);
  filter: blur(10px);
}

/* Bright core — sized up to read like a small sun, not a pinprick */
.nav-lamp::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  width: 38px;
  height: 18px;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.95) 0%, rgba(190, 224, 255, 0.6) 45%, rgba(140, 200, 255, 0.25) 68%, transparent 82%);
  transform: translateX(-50%);
  filter: blur(2px);
}

@media (prefers-reduced-motion: reduce) {
  .nav-lamp {
    transition: opacity 0.3s var(--ease-out-expo);
  }
}

.nav-link {
  position: relative;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text-secondary);
  padding-block: var(--space-2);
  transition: color var(--dur-base) var(--ease-out-expo);
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--accent-2);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out-expo), box-shadow var(--dur-base) var(--ease-out-expo);
}

@media (hover: hover) and (pointer: fine) {
  .nav-link:hover {
    color: var(--text-primary);
  }

  .nav-link:hover::after {
    box-shadow: 0 0 8px 1px rgba(102, 178, 255, 0.55);
    transform: scaleX(1);
  }
}

.nav-link.is-active::after {
  transform: scaleX(1);
}

.nav-link.is-active {
  color: var(--text-primary);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.nav-actions .btn-primary {
  display: none;
}

.nav-toggle {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}

.nav-toggle svg {
  width: 22px;
  height: 22px;
}

.nav-toggle .icon-close {
  display: none;
}

.nav-toggle[aria-expanded="true"] .icon-menu {
  display: none;
}

.nav-toggle[aria-expanded="true"] .icon-close {
  display: block;
}

@media (min-width: 1024px) {
  .nav-links {
    display: flex;
  }
  .nav-actions .btn-primary {
    display: inline-flex;
  }
  .nav-toggle {
    display: none;
  }
}

/* Mobile menu panel */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-nav) - 1);
  background: var(--bg-void);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-8) var(--container-pad);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.mobile-menu-links a {
  position: relative;
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.mobile-menu-links a::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 50%;
  width: 3px;
  height: 0;
  border-radius: 2px;
  background: var(--gradient-accent);
  box-shadow: 0 0 10px var(--accent-glow);
  transform: translateY(-50%);
  transition: height 0.2s ease;
}

.mobile-menu-links a:active {
  color: var(--accent-2);
  padding-left: var(--space-3);
}

.mobile-menu-links a:active::before {
  height: 60%;
}

.mobile-menu-links a span {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--accent-2);
  margin-right: var(--space-3);
}

.mobile-menu-foot {
  margin-top: var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 1024px) {
  .mobile-menu {
    display: none;
  }
}

body.menu-open {
  overflow: hidden;
}

/* -------------------------------------------------------------------------
   7. Cards / Bento
   ------------------------------------------------------------------------- */
.card {
  display: block;
  position: relative;
  background: var(--bg-surface);
  background-image: var(--gradient-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out-expo),
    border-color var(--dur-base) var(--ease-out-expo),
    box-shadow var(--dur-base) var(--ease-out-expo);
}

/* Scroll-tilt: the card leans back in 3D and straightens up to face the
   viewer as it scrolls into place — JS-driven, see initScrollTilt() */
.scroll-tilt-wrap {
  perspective: 1600px;
}

.scroll-tilt-card {
  transform-origin: 50% 100%;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.55);
}

a.card-hover .btn-ghost {
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  a.card-hover:hover .btn-ghost {
    border-color: var(--accent-2);
    color: var(--accent-2);
  }
}

/* Cursor-tracking spotlight glow — restrained, fine-pointer only (see .spot-enabled) */
.card-hover,
.case-card,
.person-card {
  --spot-x: 50%;
  --spot-y: 50%;
}

.card-hover::after,
.case-card::after,
.person-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(55px circle at var(--spot-x) var(--spot-y), rgba(255, 255, 255, 0.85), transparent 70%),
    radial-gradient(190px circle at var(--spot-x) var(--spot-y), rgba(170, 205, 255, 0.55), transparent 70%),
    radial-gradient(440px circle at var(--spot-x) var(--spot-y), rgba(69, 130, 255, 0.36), transparent 74%);
  opacity: 0;
  transition: opacity var(--dur-fast) ease;
  pointer-events: none;
}

/* Same animated gradient ring as the transversal band (see "Transversal
   band" below), just triggered on hover instead of running ambient —
   an intentionally bold border-glow for the hover state, not a subtle one. */
.card-hover::before,
.case-card::before,
.person-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(115deg, var(--accent-2), var(--accent), var(--border-accent), var(--accent), var(--accent-2));
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--dur-base) ease;
  pointer-events: none;
}

@keyframes card-border-flow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 300% 50%;
  }
}

/* :hover is scoped to devices that actually have a hover-capable
   pointer — on touch, tap can trigger a synthetic/"sticky" :hover that
   never clears (or attaches to the wrong element), lighting up cards
   that aren't being touched. Touch gets its own explicit .touch-glow-in
   / :active handling instead, see below. */
@media (hover: hover) and (pointer: fine) {
  .spot-enabled.card-hover:hover::after,
  .spot-enabled.case-card:hover::after,
  .spot-enabled.person-card:hover::after {
    opacity: 1;
  }

  .spot-enabled.card-hover:hover::before,
  .spot-enabled.case-card:hover::before,
  .spot-enabled.person-card:hover::before {
    opacity: 1;
    animation: card-border-flow 8s linear infinite;
  }

  .card-hover:hover {
    transform: translateY(-6px);
    border-color: var(--border-accent);
    box-shadow: var(--shadow-md);
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .spot-enabled.card-hover:hover::before,
  .spot-enabled.case-card:hover::before,
  .spot-enabled.person-card:hover::before {
    animation: none;
  }
}

.card-hover > *,
.case-card > *,
.person-card > * {
  position: relative;
  z-index: 1;
}

/* Touch devices get no hover, so the glow/border-ring plays once as a
   catch-the-light moment when the card scrolls into view (JS toggles
   .touch-glow-in via IntersectionObserver), plus a press-down tap
   response instead of the desktop lift. */
@media (hover: none) {
  .touch-glow-in.card-hover::after,
  .touch-glow-in.case-card::after,
  .touch-glow-in.person-card::after,
  .touch-glow-in.card-hover::before,
  .touch-glow-in.case-card::before,
  .touch-glow-in.person-card::before {
    animation: touch-glow-flash 1.3s ease-out;
  }

  .card-hover:active,
  .case-card:active,
  .person-card:active,
  .logo-card:active,
  .accordion-item:active {
    transform: scale(0.97);
    transition: transform 0.15s ease-out;
  }
}

@keyframes touch-glow-flash {
  0% {
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@media (hover: none) and (prefers-reduced-motion: reduce) {
  .touch-glow-in.card-hover::after,
  .touch-glow-in.case-card::after,
  .touch-glow-in.person-card::after,
  .touch-glow-in.card-hover::before,
  .touch-glow-in.case-card::before,
  .touch-glow-in.person-card::before {
    animation: none;
  }
}

.card-icon {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent-2);
  margin-bottom: var(--space-6);
  transition: background var(--dur-base) var(--ease-out-expo), color var(--dur-base) var(--ease-out-expo);
}

.card-icon svg {
  width: 26px;
  height: 26px;
}

@media (hover: hover) and (pointer: fine) {
  .card-hover:hover .card-icon {
    background: var(--gradient-accent);
    color: #05101f;
  }
}

.card h3 {
  margin-bottom: var(--space-2);
}

.card p {
  color: var(--text-secondary);
  font-size: var(--fs-small);
}

.bento {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .bento {
    grid-template-columns: repeat(6, 1fr);
  }
  .bento .card.span-4 {
    grid-column: span 4;
  }
  .bento .card.span-3 {
    grid-column: span 3;
  }
  .bento .card.span-2 {
    grid-column: span 2;
  }
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

.pill svg {
  width: 16px;
  height: 16px;
  color: var(--accent-2);
}

/* -------------------------------------------------------------------------
   8. Stats
   ------------------------------------------------------------------------- */
.stats {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat {
  padding-block: var(--space-6);
  border-top: 1px solid var(--border-subtle);
}

.stat-num {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 1.9rem + 1.4vw, 3.25rem);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  display: flex;
  align-items: baseline;
  gap: 2px;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat-label {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

/* -------------------------------------------------------------------------
   9. Marquee (logos)
   ------------------------------------------------------------------------- */
.marquee {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  width: max-content;
  animation: marquee 32s linear infinite;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-track img,
.marquee-track .logo-chip {
  height: 28px;
  opacity: 0.55;
  filter: grayscale(1) brightness(1.6);
  transition: opacity var(--dur-base) ease, filter var(--dur-base) ease;
}

.logo-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.marquee-track img:hover,
.marquee-track .logo-chip:hover {
  opacity: 1;
  filter: none;
  color: var(--text-primary);
}

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

/* -------------------------------------------------------------------------
   10. Accordion (FAQ)
   ------------------------------------------------------------------------- */
.accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.accordion-item {
  position: relative;
  overflow: hidden;
  background: var(--bg-surface);
  background-image: var(--gradient-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding-inline: var(--space-6);
  --spot-x: 50%;
  --spot-y: 50%;
  transition: border-color var(--dur-base) var(--ease-out-expo),
    box-shadow var(--dur-base) var(--ease-out-expo),
    background-color var(--dur-base) var(--ease-out-expo);
}

@media (hover: hover) and (pointer: fine) {
  .accordion-item:hover {
    border-color: var(--border-strong);
    background-color: var(--bg-surface-2);
  }
}

.accordion-item.is-open {
  border-color: var(--border-accent);
  box-shadow: var(--shadow-sm);
}

/* A single soft, low-alpha layer — deliberately quieter than the
   card-hover spotlight (that version read as too obvious here). */
.accordion-item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(280px circle at var(--spot-x) var(--spot-y), rgba(69, 130, 255, 0.14), transparent 72%);
  opacity: 0;
  transition: opacity var(--dur-base) ease;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .spot-enabled.accordion-item:hover::after {
    opacity: 1;
  }
}

@media (hover: none) {
  .touch-glow-in.accordion-item::after {
    animation: touch-glow-flash 1.3s ease-out;
  }
}

.accordion-item > * {
  position: relative;
  z-index: 1;
}

.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-6);
  text-align: left;
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: 500;
  color: var(--text-primary);
}

.accordion-trigger .chev-wrap {
  position: relative;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  transition: background var(--dur-base) var(--ease-out-expo);
}

.accordion-item.is-open .accordion-trigger .chev-wrap {
  background: var(--gradient-accent);
}

.accordion-item.is-open .accordion-trigger .chev-wrap::before {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow), transparent 68%);
  opacity: 0.6;
  animation: method-halo-pulse 3.2s ease-in-out infinite;
}

.accordion-trigger .chev {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--accent-2);
  transition: transform var(--dur-base) var(--ease-out-expo), color var(--dur-base) var(--ease-out-expo);
}

.accordion-item.is-open .accordion-trigger .chev {
  transform: rotate(180deg);
  color: #05101f;
}

.accordion-panel {
  height: 0;
  overflow: hidden;
}

.accordion-panel-inner {
  padding-bottom: var(--space-6);
}

.accordion-panel-inner p {
  max-width: 68ch;
  color: var(--text-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .accordion-item.is-open .accordion-trigger .chev-wrap::before {
    animation: none;
  }
}

/* -------------------------------------------------------------------------
   11. Forms
   ------------------------------------------------------------------------- */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.field label {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text-primary);
}

.field .req {
  color: var(--accent-2);
}

.field input,
.field textarea,
.field select {
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  min-height: 52px;
  color: var(--text-primary);
  transition: border-color var(--dur-base) var(--ease-out-expo), box-shadow var(--dur-base) var(--ease-out-expo);
}

.field textarea {
  min-height: 140px;
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--text-tertiary);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.field-help {
  font-size: var(--fs-micro);
  color: var(--text-tertiary);
}

.field-error {
  font-size: var(--fs-micro);
  color: var(--danger);
  display: none;
  align-items: center;
  gap: var(--space-1);
}

.field.has-error input,
.field.has-error textarea,
.field.has-error select {
  border-color: var(--danger);
}

.field.has-error .field-error {
  display: flex;
}

.form-status {
  display: none;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--fs-small);
  margin-top: var(--space-5);
}

.form-status.is-visible {
  display: flex;
}

.form-status.success {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #86efac;
}

.form-status.error {
  background: rgba(242, 85, 90, 0.1);
  border: 1px solid rgba(242, 85, 90, 0.3);
  color: #fca5a5;
}

.form-status svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* -------------------------------------------------------------------------
   12. Footer
   ------------------------------------------------------------------------- */
.footer {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--border-subtle);
  padding-block: var(--space-16) var(--space-6);
  background: linear-gradient(180deg, transparent, rgba(69, 130, 255, 0.04));
  isolation: isolate;
}

/* A soft gradient shape sitting behind the whole footer, not just the
   illustration panel — the same restrained blue/cyan wash used
   everywhere else, so the footer reads as one lit space, not a plain
   section with a lit box glued to its bottom. */
.footer::before {
  content: "";
  position: absolute;
  inset: -10% -10% -30%;
  z-index: -1;
  background: radial-gradient(ellipse 55% 60% at 15% 0%, rgba(69, 130, 255, 0.1), transparent 65%),
    radial-gradient(ellipse 45% 55% at 100% 100%, rgba(34, 211, 238, 0.08), transparent 65%);
  pointer-events: none;
}

/* Faint corner traces, echoing the same circuit motif used on the CTA
   banners — a quiet "shape" rather than a decorative flourish. */
.footer-circuit {
  position: absolute;
  width: 130px;
  height: 130px;
  top: 0;
  right: 0;
  opacity: 0.4;
  pointer-events: none;
  z-index: -1;
}

.footer-circuit path {
  fill: none;
  stroke-width: 1.1;
}

.footer-top {
  display: grid;
  gap: var(--space-10);
  grid-template-columns: 1fr;
  padding-bottom: var(--space-12);
}

@media (min-width: 768px) {
  .footer-top {
    grid-template-columns: 1.4fr repeat(3, 1fr);
  }
}

.footer-brand p {
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  max-width: 32ch;
}

.footer-social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.footer-col h4 {
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--text-tertiary);
  font-weight: 600;
  margin-bottom: var(--space-5);
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-col a {
  font-size: var(--fs-small);
  color: var(--text-secondary);
  transition: color var(--dur-base) ease;
}

.footer-contact-list a,
.footer-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.footer-contact-list svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--accent-2);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--fs-micro);
  color: var(--text-tertiary);
}

.footer-top-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-tertiary);
  transition: color var(--dur-base) ease, transform var(--dur-base) var(--ease-out-expo);
}

.footer-top-link svg {
  width: 13px;
  height: 13px;
  transition: transform var(--dur-base) var(--ease-out-expo);
}

@media (hover: hover) and (pointer: fine) {
  .footer-top-link:hover {
    color: var(--accent-2);
  }

  .footer-top-link:hover svg {
    transform: translateY(-2px);
  }
}

@media (hover: hover) and (pointer: fine) {
  .footer-col a:hover {
    color: var(--accent-2);
  }

  .footer-bottom a:hover {
    color: var(--accent-2);
  }
}

/* Confetti burst — fires once, on the contact form's submit success
   (see fireConfetti() in main.js). Brand colors only, no rainbow mix. */
.confetti-piece {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 2px;
  pointer-events: none;
  z-index: var(--z-toast, 9999);
  opacity: 1;
  will-change: transform, opacity;
  animation: confetti-burst 900ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes confetti-burst {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(var(--rot)) scale(0.4);
    opacity: 0;
  }
}

/* Closing illustration — pared back to just the dot-wave itself (the
   same field the hero uses, reading the same shared clock), desaturated
   to gray. No logo, no moving light — quieter close than the earlier
   version, and the background still matches the page itself rather
   than sitting in its own box, so it reads as part of the footer. */
.footer-illustration {
  position: relative;
  margin-top: var(--space-8);
  height: clamp(200px, 30vw, 340px);
  border-radius: var(--radius-xl);
  background: transparent;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
}

.footer-illustration .dot-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.7;
  filter: grayscale(1);
}

/* -------------------------------------------------------------------------
   13. Misc components
   ------------------------------------------------------------------------- */
.divider {
  height: 1px;
  background: var(--border-subtle);
  width: 100%;
}

.badge-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

.badge-check svg {
  width: 18px;
  height: 18px;
  color: var(--success);
  flex-shrink: 0;
}

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gradient-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 600;
  color: #05101f;
  flex-shrink: 0;
}

.quote-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  height: 100%;
}

.quote-card .stars {
  display: flex;
  gap: 2px;
  color: var(--warning);
}
.quote-card .stars svg {
  width: 16px;
  height: 16px;
}

.quote-card blockquote {
  color: var(--text-primary);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
}

.quote-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
}

.quote-meta .name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: var(--fs-small);
}

.quote-meta .role {
  font-size: var(--fs-micro);
  color: var(--text-tertiary);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.city-chip {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  font-size: var(--fs-small);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.city-chip svg {
  width: 14px;
  height: 14px;
  color: var(--accent-2);
}

/* Reveal animation hooks (GSAP targets).
   Base state is visible so content never disappears without JS;
   main.js applies the hidden starting state right before animating. */
.reveal {
  opacity: 1;
}

.js-motion .reveal {
  opacity: 0;
  transform: translateY(28px);
}

/* Page hero top padding to clear fixed nav */
.page-top {
  padding-top: calc(var(--nav-height) + var(--space-16));
}

/* Utility */
.mt-0 {
  margin-top: 0;
}
.relative {
  position: relative;
}
.overflow-hidden {
  overflow: hidden;
}

/* -------------------------------------------------------------------------
   14. Hero
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-height) + var(--space-10));
  padding-bottom: var(--space-16);
  overflow: hidden;
}

.hero-canvas-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.dot-field {
  width: 100%;
  height: 100%;
  opacity: 1;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(8, 9, 11, 0.08) 0%, rgba(8, 9, 11, 0.4) 62%, var(--bg-base) 100%);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.hero-content .eyebrow {
  margin-bottom: var(--space-6);
}

.hero-content h1 {
  font-size: var(--fs-display);
  margin-bottom: var(--space-6);
}

.hero-content .lede {
  margin-bottom: var(--space-8);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: center;
}

.hero-trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

.hero-trust-item svg {
  width: 18px;
  height: 18px;
  color: var(--success);
}

.hero-scroll-cue {
  position: absolute;
  bottom: var(--space-8);
  left: var(--container-pad);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.hero-scroll-cue .line {
  width: 32px;
  height: 1px;
  background: var(--border-strong);
}

@media (max-width: 767px) {
  .hero {
    min-height: auto;
    padding-top: calc(var(--nav-height) + var(--space-8));
  }
  .hero-scroll-cue {
    display: none;
  }
}

/* Page hero (non-home) — shorter, no canvas */
.page-hero {
  position: relative;
  padding-top: calc(var(--nav-height) + var(--space-16));
  padding-bottom: var(--space-16);
  overflow: hidden;
}

.page-hero::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: 60%;
  height: 140%;
  background: radial-gradient(ellipse, rgba(69, 130, 255, 0.16), transparent 65%);
  pointer-events: none;
}

.hero-paths {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  pointer-events: none;
}

.hero-paths path {
  fill: none;
  stroke: url(#heroPathGrad);
  stroke-width: 1.5;
  animation: hero-path-drift 11s ease-in-out infinite;
}

.hero-paths path:nth-of-type(2) {
  animation-duration: 14s;
  animation-delay: -4s;
}

.hero-paths path:nth-of-type(3) {
  animation-duration: 17s;
  animation-delay: -9s;
}

@keyframes hero-path-drift {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.5;
  }
  25% {
    transform: translate(40px, -60px) scale(1.05);
    opacity: 0.85;
  }
  50% {
    transform: translate(-30px, 30px) scale(0.97);
    opacity: 0.6;
  }
  75% {
    transform: translate(60px, 20px) scale(1.04);
    opacity: 0.85;
  }
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-paths path {
    animation: none;
  }
}

/* Quieter variant for content sections (not full-bleed heroes) — same
   drifting-line technique, dialed down so it reads as texture behind
   real content rather than a hero moment. */
.section-paths {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.28;
  pointer-events: none;
  z-index: 0;
}

.section-paths path {
  fill: none;
  stroke-width: 1.2;
  animation: hero-path-drift 19s ease-in-out infinite;
}

.section-paths path:nth-of-type(2) {
  animation-duration: 24s;
  animation-delay: -6s;
}

@media (prefers-reduced-motion: reduce) {
  .section-paths path {
    animation: none;
  }
}

.page-hero-content {
  position: relative;
  max-width: 760px;
}

/* -------------------------------------------------------------------------
   15. Methodology diagram
   ------------------------------------------------------------------------- */
.method {
  position: relative;
}

.method-diagram {
  position: relative;
  margin-top: var(--space-16);
}

/* Variant used where the steps are full card surfaces (contacto.html) rather
   than bare text on the section background: the number badge overlaps the
   card's top edge instead of sitting inside its padding, so the connecting
   line has open space to cross through instead of hiding behind the card. */
.method-diagram-cards {
  margin-top: calc(var(--space-16) + 30px);
}

.method-diagram-cards .card.method-step {
  overflow: visible;
}

.method-line {
  display: none;
}

.method-steps {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  position: relative;
}

@media (min-width: 768px) {
  .method-steps {
    grid-template-columns: repeat(4, 1fr);
  }
  .method-line {
    display: block;
    position: absolute;
    top: 22px;
    left: 0;
    width: 100%;
    height: 24px;
    z-index: 0;
    overflow: visible;
    opacity: 0.9;
    filter: drop-shadow(0 0 10px var(--accent-glow)) drop-shadow(0 0 3px rgba(102, 178, 255, 0.8));
  }
}

/* A bright pulse travels the full line on a loop — the "cycle" the copy
   talks about, made literal instead of implied — and lights up each
   numbered step as it passes, instead of marking stages with static nodes.
   Position and step sync are driven by JS (initMethodPulse in main.js) so
   the dot always lines up with the real, measured center of each step —
   and so it can follow the cursor on hover. */
.method-line-node {
  display: none;
}

.method-line-pulse {
  fill: #fff;
  filter: drop-shadow(0 0 8px var(--accent-2));
  transform-box: fill-box;
  opacity: 0;
  transition: opacity 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .method-line-pulse {
    opacity: 0 !important;
  }
}

.method-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.method-step-num {
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 1px solid var(--border-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--accent-2);
  box-shadow: 0 0 30px -6px var(--accent-glow);
  isolation: isolate;
  transition: box-shadow 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.method-step-num.is-lit {
  border-color: var(--accent-2);
  color: #fff;
  box-shadow: 0 0 12px 4px var(--accent-2), 0 0 60px 10px var(--accent-glow);
}

.method-step-num::before {
  content: "";
  position: absolute;
  inset: -22px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow), transparent 68%);
  opacity: 0.55;
  animation: method-halo-pulse 3.2s ease-in-out infinite;
}

.method-step:nth-child(2) .method-step-num::before {
  animation-delay: 0.5s;
}
.method-step:nth-child(3) .method-step-num::before {
  animation-delay: 1s;
}
.method-step:nth-child(4) .method-step-num::before {
  animation-delay: 1.5s;
}

@keyframes method-halo-pulse {
  0%,
  100% {
    transform: scale(0.85);
    opacity: 0.35;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.7;
  }
}

@media (prefers-reduced-motion: reduce) {
  .method-step-num::before {
    animation: none;
    opacity: 0.45;
  }
}

.method-step h4 {
  margin-bottom: var(--space-1);
}

.method-step p {
  font-size: var(--fs-small);
}

/* -------------------------------------------------------------------------
   16. CTA banner
   ------------------------------------------------------------------------- */
.cta-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: var(--space-16) var(--space-8);
  text-align: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  isolation: isolate;
  --spot-x: 50%;
  --spot-y: 50%;
}

/* Bold cursor-tracking spotlight — this is the closing pitch of the
   page, so unlike the card/FAQ glows it's deliberately not subtle. */
.cta-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(30px circle at var(--spot-x) var(--spot-y), rgba(255, 255, 255, 0.9), transparent 70%),
    radial-gradient(460px circle at var(--spot-x) var(--spot-y), rgba(120, 180, 255, 0.6), transparent 72%);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .cta-banner.spot-enabled:hover::after {
    opacity: 1;
  }

  .cta-banner.spot-enabled:hover {
    border-color: var(--border-accent);
  }
}

/* The edge itself lights up too, brightest nearest the cursor — a real
   element, not a pseudo (both ::before/::after are already spoken for
   on this component). */
.cta-banner-ring {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1.5px;
  background: radial-gradient(420px circle at var(--spot-x) var(--spot-y), rgba(255, 255, 255, 0.95), var(--accent-2) 40%, transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .cta-banner.spot-enabled:hover .cta-banner-ring {
    opacity: 1;
  }
}

.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 60% 80% at 20% 0%, rgba(69, 130, 255, 0.35), transparent 60%),
    radial-gradient(ellipse 50% 70% at 100% 100%, rgba(34, 211, 238, 0.25), transparent 60%);
  animation: cta-glow-drift 10s ease-in-out infinite;
}

@keyframes cta-glow-drift {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-2%, 2%) scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta-banner::before {
    animation: none;
  }
}

.cta-banner h2 {
  max-width: 20ch;
  margin-inline: auto;
  margin-bottom: var(--space-5);
}

.cta-banner .lede {
  margin-inline: auto;
  margin-bottom: var(--space-8);
}

.cta-banner-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}

/* Faint circuit traces in the corners — echoes the glow blobs already
   sitting top-left/bottom-right, kept quiet enough to read as texture. */
.cta-circuit {
  position: absolute;
  width: 130px;
  height: 130px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}

.cta-circuit-tl {
  top: 0;
  left: 0;
}

.cta-circuit-br {
  bottom: 0;
  right: 0;
  transform: rotate(180deg);
}

.cta-circuit path {
  fill: none;
  stroke-width: 1.1;
  stroke-linecap: round;
}

.cta-circuit-node {
  fill: var(--accent-2);
  filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.75));
  transform-box: fill-box;
  transform-origin: center;
  animation: cta-circuit-pulse 3.4s ease-in-out infinite;
}

@keyframes cta-circuit-pulse {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.7);
  }
  50% {
    opacity: 1;
    transform: scale(1.3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta-circuit-node {
    animation: none;
    opacity: 0.7;
  }
}

/* -------------------------------------------------------------------------
   17. Coverage (nosotros)
   ------------------------------------------------------------------------- */
.coverage-grid {
  display: grid;
  gap: var(--space-10);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .coverage-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.coverage-visual {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  overflow: hidden;
}

/* -------------------------------------------------------------------------
   18. Value / feature list (icon + text rows)
   ------------------------------------------------------------------------- */
.feature-row {
  display: flex;
  gap: var(--space-5);
  padding-block: var(--space-6);
  border-top: 1px solid var(--border-subtle);
}

.feature-row:last-child {
  padding-bottom: 0;
}

.feature-row .card-icon {
  margin-bottom: 0;
  flex-shrink: 0;
}

/* -------------------------------------------------------------------------
   19. Case study cards
   ------------------------------------------------------------------------- */
.case-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.case-card-tag {
  align-self: flex-start;
  color: var(--accent-2);
  background: rgba(34, 211, 238, 0.08);
  border-color: rgba(34, 211, 238, 0.28);
}

/* Thin gradient hairline across the top of each card — the one accent
   this grid gets, kept quiet everywhere else. Its own element rather
   than a pseudo-class because ::before/::after on .case-card are already
   spoken for by the shared hover spotlight/border-glow system. */
.case-card-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  opacity: 0.85;
  pointer-events: none;
}

.case-card-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
}

.case-card-metric .num {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--accent-2);
}

.case-card-metric .label {
  font-size: var(--fs-micro);
  color: var(--text-tertiary);
}

/* -------------------------------------------------------------------------
   20. Contact page
   ------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  gap: var(--space-10);
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .contact-grid {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

.contact-info-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.contact-channel {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.contact-channel .card-icon {
  margin-bottom: 0;
}

.contact-channel .label {
  font-size: var(--fs-micro);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
}

.contact-channel .value {
  font-weight: 600;
  color: var(--text-primary);
}

/* -------------------------------------------------------------------------
   21. 404
   ------------------------------------------------------------------------- */
.error-page {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-8);
}

.error-code {
  font-family: var(--font-heading);
  font-size: clamp(5rem, 10vw, 9rem);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.error-page .btn-primary {
  margin-top: var(--space-8);
}

/* -------------------------------------------------------------------------
   22. Real brand mark (logo image, replaces placeholder SVG)
   ------------------------------------------------------------------------- */
.brand-mark-img {
  height: clamp(42px, 3vw + 30px, 52px);
  width: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 0 14px var(--accent-glow));
  transition: transform var(--dur-base) var(--ease-out-expo);
}

.hero-mark-wrap {
  position: absolute;
  right: clamp(0.5rem, 3vw, 3.5rem);
  bottom: clamp(1rem, 6vh, 3rem);
  width: clamp(280px, 30vw, 460px);
  aspect-ratio: 900 / 701;
  z-index: 1;
  pointer-events: none;
  will-change: transform, opacity;
}

.hero-mark-body {
  position: absolute;
  right: 0;
  top: 0;
  width: 70.2%;
  height: 99.7%;
  object-fit: contain;
  object-position: bottom right;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
}

.hero-cube-field {
  position: absolute;
  inset: 0;
}

.hero-cube {
  position: absolute;
  left: var(--cx);
  top: var(--cy);
  width: var(--cs);
  height: var(--cs);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
  will-change: transform;
}

@media (max-width: 767px) {
  .hero-mark-wrap {
    display: none;
  }
}

/* -------------------------------------------------------------------------
   23. Logo grid (real client / certification logos on light cards)
   ------------------------------------------------------------------------- */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .logo-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .logo-grid.grid-dense {
    grid-template-columns: repeat(5, 1fr);
  }
  .logo-grid:not(.grid-dense) {
    grid-template-columns: repeat(4, 1fr);
  }
}

.logo-card {
  background: #f4f4f2;
  border-radius: var(--radius-md);
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  transition: transform var(--dur-base) var(--ease-out-expo), box-shadow var(--dur-base) var(--ease-out-expo);
}

@media (hover: hover) and (pointer: fine) {
  .logo-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px -16px rgba(0, 0, 0, 0.5);
  }
}

.logo-card img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.logo-card img,
.marquee-track img {
  cursor: zoom-in;
}

/* Logo lightbox — a click on any client/certification mark zooms it into
   focus, center-stage, with the same light-blooming-into-view language
   used everywhere else on the site (the CTA spotlight, the card glows). */
.logo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  background: rgba(5, 6, 10, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.logo-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.35s ease;
}

.logo-lightbox-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(520px circle at 50% 50%, rgba(69, 130, 255, 0.4), transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

.logo-lightbox.is-open .logo-lightbox-glow {
  opacity: 1;
  transition: opacity 0.6s ease 0.1s;
}

.logo-lightbox-card {
  position: relative;
  background: #f4f4f2;
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  width: 100%;
  max-width: 420px;
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.4);
  opacity: 0;
  box-shadow: 0 50px 120px -30px rgba(0, 0, 0, 0.65);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}

.logo-lightbox.is-open .logo-lightbox-card {
  transform: scale(1);
  opacity: 1;
}

.logo-lightbox-card img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.logo-lightbox-close {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  transition: transform 0.3s var(--ease-out-expo), border-color var(--dur-base) ease;
}

.logo-lightbox-close svg {
  width: 18px;
  height: 18px;
}

@media (hover: hover) and (pointer: fine) {
  .logo-lightbox-close:hover {
    border-color: var(--border-accent);
    transform: rotate(90deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-lightbox-card,
  .logo-lightbox-glow,
  .logo-lightbox-close {
    transition: opacity 0.2s ease;
  }
}

/* -------------------------------------------------------------------------
   24. Transversal band (Software e IA — cross-cutting capability)
   ------------------------------------------------------------------------- */
/* Gradient ring via layered background-clip (padding-box solid + border-box
   gradient) instead of mask-composite: the mask/xor technique this replaced
   rendered as a solid bright edge instead of a thin ring in some Chrome
   builds — background-clip has no such version-dependent quirks. */
.transversal {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  border: 1px solid transparent;
  background: linear-gradient(var(--bg-surface), var(--bg-surface)) padding-box,
    linear-gradient(115deg, var(--accent-2), var(--accent), var(--border-accent), var(--accent), var(--accent-2)) border-box;
  background-size: 100% 100%, 300% 300%;
  animation: transversal-border-flow 8s linear infinite;
  padding: var(--space-10);
  isolation: isolate;
  margin-top: var(--space-6);
}

.transversal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 70% 100% at 0% 50%, rgba(69, 130, 255, 0.16), transparent 70%),
    radial-gradient(ellipse 60% 100% at 100% 50%, rgba(34, 211, 238, 0.12), transparent 70%);
}

@keyframes transversal-border-flow {
  0% {
    background-position: 0 0, 0% 50%;
  }
  100% {
    background-position: 0 0, 300% 50%;
  }
}

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

.transversal-grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .transversal-grid {
    grid-template-columns: 1.1fr 1fr;
  }
}

.transversal-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--gradient-accent);
  color: #05101f;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  margin-bottom: var(--space-5);
}

.transversal-tag-spark {
  display: inline-flex;
  width: 9px;
  height: 9px;
  color: #ef4444;
  filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.75));
  animation: transversal-spark-twinkle 2.6s ease-in-out infinite;
}

.transversal-tag .transversal-tag-spark svg {
  width: 100%;
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .transversal-tag-spark {
    animation: none;
    opacity: 0.7;
  }
}

.transversal-tag svg {
  width: 14px;
  height: 14px;
}

.transversal-list {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

@media (min-width: 480px) {
  .transversal-list {
    grid-template-columns: 1fr 1fr;
  }
}

/* Small warm-gold sparkles — the one spot on the site that breaks from
   blue/cyan, marking this band as the "intelligent" one. Kept tiny and rare. */
.transversal-spark {
  position: absolute;
  color: var(--accent-gold);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  animation: transversal-spark-twinkle 3.6s ease-in-out infinite;
}

.transversal-spark svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 5px rgba(245, 192, 101, 0.7));
}

@keyframes transversal-spark-twinkle {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.35) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1) rotate(10deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .transversal-spark {
    animation: none;
    opacity: 0.55;
    transform: none;
  }
}

/* -------------------------------------------------------------------------
   25. Contact person cards (real named contacts)
   ------------------------------------------------------------------------- */
.person-card {
  position: relative;
  overflow: hidden;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: border-color 0.5s var(--ease-out-expo), transform var(--dur-base) var(--ease-out-expo),
    box-shadow 0.5s var(--ease-out-expo);
}

@media (hover: hover) and (pointer: fine) {
  .person-card:hover {
    border-color: var(--border-accent);
    transform: translateY(-4px);
  }
}

/* Scroll choreography (contacto.html): as this row scrolls into place,
   Jefferson and Sebastián settle back and Luis — the general point of
   contact — comes forward as the one to reach for. See main.js. */
.contact-choreo {
  perspective: 1400px;
  position: relative;
}

.person-card.is-primary {
  z-index: 1;
}

/* Team network — a live connection drawn between the three contact cards
   (see initTeamConnection in main.js). Rather than a one-way data flow, a
   pulse of light starts at Luis (the shared, central contact) and travels
   out to both teammates at once — arriving together, in sync — at which
   moment all three cards' borders glow as one for a beat. That shared,
   simultaneous "breath" is what's meant to read as a team, not a relay.
   Positions are measured every frame off the real card edges so it tracks
   the scroll choreography's scale/opacity tween exactly, and only ever
   draws in the open gap between cards, never across one, so it can't end
   up hidden behind an opaque card body. */
.team-network {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}

.team-network-link {
  fill: none;
  stroke: url(#teamNetworkGrad);
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.team-network-link.is-visible {
  opacity: 0.32;
}

.team-network-node {
  fill: var(--bg-base);
  stroke: var(--accent-2);
  stroke-width: 1.5;
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(34, 211, 238, 0.7));
  transition: opacity 0.4s ease;
}

.team-network-node.is-visible {
  opacity: 1;
}

.team-network-pulse {
  fill: #fff;
  opacity: 0;
  filter: drop-shadow(0 0 5px var(--accent-2)) drop-shadow(0 0 10px var(--accent-glow));
}

/* The moment the pulse reaches a card — including the one it started
   from — its border and glow rise together with the other two, so the
   whole trio visibly shares the same beat. */
.person-card.is-pulsing {
  border-color: var(--border-accent);
  box-shadow: 0 0 0 1px var(--border-accent), 0 0 34px -8px var(--accent-glow);
}

@media (prefers-reduced-motion: reduce) {
  .team-network-pulse {
    display: none;
  }
}

.contact-choreo-caption {
  margin-top: var(--space-2);
  font-size: var(--fs-micro);
  color: var(--accent-2);
  opacity: 0;
}

@media (min-width: 768px) {
  .contact-choreo {
    align-items: center;
  }
}

.person-card .role {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--accent-2);
}

.person-card .name {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: 600;
}

.person-card .channels {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
}

.person-card .channels a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-small);
  color: var(--text-secondary);
  padding-block: var(--space-1);
  word-break: break-word;
}

.person-card .channels a:hover {
  color: var(--accent-2);
}

.person-card .channels svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--accent-2);
}

/* -------------------------------------------------------------------------
   26. Fact sheet (trayectoria)
   ------------------------------------------------------------------------- */
.fact-sheet {
  display: flex;
  flex-direction: column;
}

.fact-row {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
  padding-inline-start: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  transition: background var(--dur-base) var(--ease-out-expo);
}

.fact-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--space-4);
  bottom: var(--space-4);
  width: 2px;
  background: var(--gradient-accent);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--dur-base) var(--ease-out-expo);
}

.fact-row dt {
  font-size: var(--fs-small);
  color: var(--text-tertiary);
}

.fact-row dd {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-primary);
  text-align: right;
  transition: color var(--dur-base) var(--ease-out-expo);
}

@media (hover: hover) and (pointer: fine) {
  .fact-row:hover {
    background: rgba(69, 130, 255, 0.06);
  }

  .fact-row:hover::before {
    transform: scaleY(1);
  }

  .fact-row:hover dd {
    color: var(--accent-2);
  }
}

/* -------------------------------------------------------------------------
   27. Illustrative-scenario note
   ------------------------------------------------------------------------- */
.note-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  border: 1px solid var(--border-accent);
  font-size: var(--fs-small);
  color: var(--text-secondary);
  margin-bottom: var(--space-10);
}

.note-banner svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--accent-2);
  margin-top: 1px;
}

.note-banner strong {
  color: var(--text-primary);
}

/* -------------------------------------------------------------------------
   28. Legal pages (privacy policy, terms & conditions)
   ------------------------------------------------------------------------- */
.legal-hero {
  padding-top: calc(var(--nav-height) + var(--space-12));
  padding-bottom: var(--space-8);
}

.legal-updated {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.legal-updated::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 8px var(--accent-2);
}

.legal-body {
  padding-top: 0;
}

.legal-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--space-12);
  align-items: start;
}

.legal-toc {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-6));
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}

.legal-toc-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-3);
}

.legal-toc a {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  color: var(--text-secondary);
  line-height: 1.4;
}

@media (hover: hover) and (pointer: fine) {
  .legal-toc a:hover {
    color: var(--text-primary);
    background: var(--bg-surface-2);
  }
}

.legal-toc a:focus-visible {
  color: var(--text-primary);
  background: var(--bg-surface-2);
}

.legal-article {
  max-width: 720px;
}

.legal-article section {
  scroll-margin-top: calc(var(--nav-height) + var(--space-6));
}

.legal-article section + section {
  margin-top: var(--space-10);
  padding-top: var(--space-10);
  border-top: 1px solid var(--border-subtle);
}

.legal-article h2 {
  font-size: var(--fs-h3);
  margin-bottom: var(--space-4);
}

.legal-article h3 {
  font-size: var(--fs-h4);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.legal-article p {
  color: var(--text-secondary);
  line-height: var(--lh-body);
}

.legal-article p + p {
  margin-top: var(--space-4);
}

.legal-article ul,
.legal-article ol {
  color: var(--text-secondary);
  line-height: var(--lh-body);
  margin-top: var(--space-4);
  padding-left: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.legal-article li::marker {
  color: var(--accent-2);
}

.legal-article strong {
  color: var(--text-primary);
  font-weight: 600;
}

.legal-article a {
  color: var(--accent-2);
  text-underline-offset: 3px;
}

.legal-article .fact-sheet {
  margin-top: var(--space-4);
}

@media (max-width: 900px) {
  .legal-layout {
    grid-template-columns: 1fr;
  }
  .legal-toc {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .legal-toc-label {
    width: 100%;
    margin-bottom: var(--space-1);
  }
}