/* ===================================================================
   areqo — Design System V3 "Negro Tech"
   Typography: Space Grotesk (display) + Inter (body) + JetBrains Mono (tech labels)
   Aesthetic: deep black, signature orange, grid texture, glow accents
   =================================================================== */

/* ===== RESET ===== */
*,*::before,*::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
button { border: none; background: none; cursor: pointer; font: inherit; color: inherit; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--accent); color: #000; }

/* ===== DESIGN TOKENS ===== */
:root {
  /* Base — deep blacks */
  --bg: #0A0A0A;
  --bg-alt: #0F0F0F;
  --surface: #141414;
  --surface-elevated: #1A1A1A;
  --surface-hover: #1F1F1F;

  /* Text */
  --text: #FAFAFA;
  --text-secondary: #B5B5B5;
  --text-muted: #6B6B6B;
  --text-dim: #4A4A4A;

  /* Borders */
  --border: #222222;
  --border-strong: #2E2E2E;
  --border-accent: rgba(255, 255, 255, 0.35);

  /* Accent — Pure White (V3.2 "minimal premium, Linear/Geist") */
  --accent: #FFFFFF;
  --accent-hover: #FFFFFF;
  --accent-dim: rgba(255, 255, 255, 0.08);
  --accent-glow: rgba(255, 255, 255, 0.22);
  --accent-glow-strong: rgba(255, 255, 255, 0.4);

  /* Semantic */
  --success: #4ADE80;
  --success-dim: rgba(74, 222, 128, 0.12);
  --error: #F87171;
  --error-dim: rgba(248, 113, 113, 0.12);

  /* Inter for the site and approved wordmark; Mono for code-like UI. */
  --font-display: 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Spacing */
  --section-py: clamp(80px, 10vw, 140px);
  --container: 1440px;
  --gutter: clamp(20px, 4vw, 32px);

  /* Radius — sharper */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;

  /* Transitions */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 300ms;
  --duration-fast: 180ms;

  /* Layout */
  --nav-height: 72px;
  --banner-height: 0px; /* scarcity banner removed site-wide (30 sep 2026) */
}

/* ===== BASE ===== */
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(255, 255, 255, 0.06), transparent 70%),
    linear-gradient(180deg, #0A0A0A 0%, #0A0A0A 100%);
  min-height: 100vh;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
}

/* ===== TYPOGRAPHY ===== */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
  padding: 6px 12px;
  background: var(--accent-dim);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-sm);
}
.section-label::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent-glow);
}
.section-label--light {
  color: var(--accent);
  background: var(--accent-dim);
  border-color: var(--border-accent);
}

.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  padding: 12px 22px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease);
  border: 1px solid transparent;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn--sm { padding: 8px 16px; font-size: 13px; }
.btn--lg { padding: 16px 28px; font-size: 15px; }
.btn--full { width: 100%; }

.btn--primary {
  background: var(--accent);
  color: #0A0A0A;
  box-shadow: 0 0 0 1px var(--accent), 0 0 24px var(--accent-glow);
}
.btn--primary:hover {
  background: var(--accent-hover);
  box-shadow: 0 0 0 1px var(--accent-hover), 0 0 32px var(--accent-glow-strong);
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.btn--ghost:hover {
  background: var(--surface);
  border-color: var(--accent);
  color: var(--accent);
}

.btn--dark {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn--dark:hover {
  background: var(--surface-hover);
  border-color: var(--accent);
}

.btn--white {
  background: var(--text);
  color: #0A0A0A;
}
.btn--white:hover { background: #fff; }

.btn--ghost-light {
  background: transparent;
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.2);
}
.btn--ghost-light:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ===== BANNER ===== */
.banner {
  background: linear-gradient(90deg, #0A0A0A 0%, #161616 50%, #0A0A0A 100%);
  border-bottom: 1px solid var(--border-accent);
  color: var(--text);
  font-size: 13px;
  position: relative;
  z-index: 99;
}
.banner__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 10px 50px 10px 20px;
  max-width: var(--container);
  margin: 0 auto;
}
.banner__badge {
  display: inline-block;
  background: var(--accent);
  color: #0A0A0A;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 3px;
  margin-right: 8px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.banner__text {
  color: var(--text-secondary);
  font-family: var(--font-body);
}
.banner__count {
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: 700;
}
.banner__link {
  color: var(--accent);
  font-weight: 600;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: opacity var(--duration-fast);
}
.banner__link:hover { opacity: 0.8; }
.banner__close {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  padding: 6px;
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast);
}
.banner__close:hover { color: var(--text); }
.banner.hidden { display: none; }

/* ===== NAVIGATION =====
   Apple/Clay-style glass nav: blurred light backdrop with low-alpha white,
   subtle hairline border. Text colors target light backdrops by default so
   the bar reads cleanly over the white hero, overview, and tools sections.
   The full lockup stays visible; the React home enters it as one nav item.
   ===================================================================== */
.nav {
  position: fixed;
  top: var(--banner-height);
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transform: translateY(0);
  transition:
    background 320ms ease,
    backdrop-filter 320ms ease,
    -webkit-backdrop-filter 320ms ease,
    border-color 320ms ease,
    transform 380ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nav--scrolled {
  top: 0;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
.nav--hidden {
  transform: translateY(-200%);
}
.nav.nav--no-banner {
  top: 0;
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
/* The same Inter 600 outlines used by the approved SVG export, scoped to logos.
   A family alias prevents service-page display fonts / Google Inter revisions
   from changing the lockup metrics. License: /fonts/Inter-OFL.txt. */
@font-face {
  font-family: 'Areqo Inter';
  src: url('/fonts/areqo-inter-600.woff2') format('woff2');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
/* Approved Inter 600 lockup. Geometry from export_v2/lockup-h-negro.svg.
   X-height = 1118/2048 em; bowl = 517/352 x; centre = -24.5/352 x.
   Gap = 185/352 x, minus the Inter a's 76/2048 em left sidebearing.
   Inline baseline alignment leaves the spiral below the word without clipping. */
.nav__logo, .footer__logo {
  display: block;
  flex-shrink: 0;
  white-space: nowrap;
  font: 600 22px/1 'Areqo Inter', 'Inter', system-ui, sans-serif;
  font-kerning: none;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.nav__logo { color: #0a0a0a; }
.nav__logo-text, .brand__text {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}
.brand__symbol {
  display: inline-block;
  width: 0.854517156em;
  height: 1.248432506em;
  vertical-align: -0.494720459em;
  margin-right: 0.249797474em;
  overflow: visible;
}
/* Subpages (no hero, white bg): active link white-on-white is invisible.
   Override to dark text with subtle tint so the active state reads. */
body.no-loader .nav__link--active {
  color: #0a0a0a;
  background: rgba(10, 10, 10, 0.06);
}
.nav__menu {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav__link {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: #525252;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  transition: color var(--duration-fast) var(--ease), background var(--duration-fast);
  display: flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}
.nav__link:hover { color: #0a0a0a; background: rgba(0, 0, 0, 0.04); }
.nav__link--active {
  color: var(--accent);
  background: var(--accent-dim);
  font-weight: 600;
}

/* Nav entrance: links and actions slide up from below the nav baseline and
   fade in left-to-right. Hidden by default; revealed when main.js adds
   `body.is-ready` (first beat of the hero entrance; at once on subpages). */
.nav__menu .nav__link,
.nav__actions > * {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 680ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 760ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
body.is-ready .nav__menu .nav__link,
body.is-ready .nav__actions > * {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger left → right. Links first (80ms apart), then actions trailing. */
body.is-ready .nav__menu .nav__link:nth-child(1) { transition-delay: 120ms; }
body.is-ready .nav__menu .nav__link:nth-child(2) { transition-delay: 200ms; }
body.is-ready .nav__menu .nav__link:nth-child(3) { transition-delay: 280ms; }
body.is-ready .nav__menu .nav__link:nth-child(4) { transition-delay: 360ms; }
body.is-ready .nav__menu .nav__link:nth-child(5) { transition-delay: 440ms; }
body.is-ready .nav__actions > *:nth-child(1) { transition-delay: 540ms; }
body.is-ready .nav__actions > *:nth-child(2) { transition-delay: 620ms; }
body.is-ready .nav__actions > *:nth-child(3) { transition-delay: 700ms; }

.nav__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Shared desktop/tablet nav: group links beside the actions on the right.
   Keep the 4px link spacing and use the actions' 12px gap between groups.
   The mobile layout below 769px retains its existing space-between behavior. */
@media (min-width: 769px) {
  .nav__menu {
    margin-left: auto;
    margin-right: 12px;
    flex-shrink: 0;
    white-space: nowrap;
  }
}
.nav__burger {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
}
.nav__burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  transition: transform var(--duration) var(--ease), opacity var(--duration);
}

/* ===== MOBILE MENU ===== */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.98);
  backdrop-filter: blur(20px);
  z-index: 40;
  padding-top: calc(var(--nav-height) + 20px);
  transform: translateX(100%);
  transition: transform var(--duration) var(--ease);
  overflow-y: auto;
}
.mobile-menu.open,
.mobile-menu.mobile-menu--open { transform: translateX(0); }
.mobile-menu__inner {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.mobile-menu__group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mobile-menu__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.mobile-menu__link {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.mobile-menu__link--accent { color: var(--accent); }

/* ===== HERO ===== */
.hero {
  padding: 100px 0 80px;
  position: relative;
  overflow: hidden;
}
.hero__bg-pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 90%);
}
.hero::before {
  content: '';
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.hero__content {
  position: relative;
  z-index: 1;
  max-width: 820px;
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 28px;
  letter-spacing: 0.04em;
}
.hero__badge-dot {
  width: 8px;
  height: 8px;
  background: var(--success);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--success);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(44px, 8vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin-bottom: 24px;
  color: var(--text);
}
.hero__highlight {
  color: var(--accent);
  font-style: italic;
  font-weight: 400;
  position: relative;
  display: inline-block;
}
.hero__subtitle {
  font-size: clamp(17px, 2vw, 21px);
  color: var(--text-secondary);
  line-height: 1.5;
  max-width: 640px;
  margin-bottom: 36px;
}
.hero__ctas {
  display: flex;
  gap: 14px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}
.hero__proof {
  display: flex;
  align-items: center;
  gap: 14px;
}
.hero__avatars {
  display: flex;
}
.hero__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  margin-right: -8px;
}
.hero__proof-text {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

/* ===== SOCIAL PROOF BAR ===== */
.proof {
  padding: 40px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
.proof__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.proof__label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.proof__logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.proof__logo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all var(--duration-fast) var(--ease);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.proof__logo:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 24px var(--accent-glow);
}
.proof__logo-info { flex-grow: 1; min-width: 0; }
.proof__logo-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.proof__logo-icon--img {
  background: #FFFFFF;
  padding: 4px;
}
.proof__logo-icon--img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.proof__logo-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
}
.proof__logo-type {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.proof__badge-live {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 4px 8px;
  background: var(--success-dim);
  color: var(--success);
  border-radius: 3px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid rgba(74, 222, 128, 0.3);
}

/* ===================================================================
   OVERVIEW — "What we do" Clay-style three-column section.
   Left: lead paragraph. Centre: SVG isometric cube cluster. Right: accordion.
   =================================================================== */
.overview {
  padding: 140px 0 80px;
  background: #ffffff;
  color: #0a0a0a;
}
.overview__grid {
  display: grid;
  grid-template-columns: 2.2fr 1.15fr 1.65fr;
  gap: 44px;
  align-items: start;
}
.overview__lead {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: #0a0a0a;
  margin: 0;
  padding-top: 0;
  max-width: 620px;
  align-self: center;
}
.overview__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  aspect-ratio: 1 / 1;
  width: 100%;
}
.overview__viz {
  width: 100%;
  height: 100%;
  display: block;
}

.overview__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.overview__item {
  border: none;
}
.overview__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(18px, 1.55vw, 26px);
  letter-spacing: -0.015em;
  color: #0a0a0a;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: color 200ms ease;
}
.overview__head:hover { color: #404040; }
/* Headings stay on one line — column is sized to fit longest label. */
.overview__head > span { white-space: nowrap; }
.overview__chevron {
  flex: 0 0 auto;
  color: #0a0a0a;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.overview__head[aria-expanded="true"] .overview__chevron {
  transform: rotate(180deg);
}
.overview__body {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-2px);
  color: #525252;
  font-family: var(--font-body);
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.55;
  /* Smoother, symmetric ease-in-out on a higher ceiling so content of any
     length finishes within the same envelope. Opacity slightly trails the
     box expansion so text doesn't pop in mid-stretch. */
  transition:
    max-height 560ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 320ms ease-out,
    transform 480ms cubic-bezier(0.4, 0, 0.2, 1),
    padding-bottom 560ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: max-height, opacity;
}
.overview__head[aria-expanded="true"] + .overview__body {
  max-height: 800px;
  opacity: 1;
  transform: translateY(0);
  padding-bottom: 18px;
  transition-delay: 0ms, 140ms, 140ms, 0ms;
}

@media (max-width: 900px) {
  .overview { padding: 80px 0 56px; }
  .overview__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .overview__visual { order: -1; width: 260px; margin: 0 auto; }
}

/* ===== TOOLS SECTION ===== */
.tools {
  padding: 140px 0 160px;
  background: #fafafa;
  position: relative;
  overflow: hidden;
}
.tools__container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tools__title {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 700;
  font-size: clamp(44px, 6.2vw, 88px);
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: #0a0a0a;
  text-align: center;
  margin: 0;
}
.tools__title--top { margin-bottom: 56px; }
.tools__title--bottom { margin-top: 56px; }

/* Scroll-driven paint sweep on "para los mejores negocios".
   Gradient image (250% of text width) holds three zones:
     - Left:   gray  → default / pre-trigger fill
     - Middle: muted purple-pink band (the visible wave)
     - Right:  black → post-trigger fill
   `background-clip: text` + transparent fill means the text shows
   whichever zone is aligned with it. JS toggles `--painted` based on
   scroll position; CSS transition slides background-position so the
   band physically crosses the text in either direction. */
.tools__title--bottom {
  /* Gradient zones (left → right): BLACK trail · muted band · GRAY rest.
     Default scroll position parks the right half of the gradient over the
     text → user sees gray. Painted state shifts to the left half → user
     sees black. As bg-position interpolates from 100% → 0%, the band
     crosses the text from LEFT to RIGHT (band sits at gradient ~50%, and
     the viewing window slides leftward across the gradient image). */
  background-image: linear-gradient(
    90deg,
    #0a0a0a 0%,
    #0a0a0a 38%,
    #c5a9c2 44%,
    #c79bb8 48%,
    #a37ebd 52%,
    #b89cd1 56%,
    #d4c2e6 60%,
    #9ca3af 66%,
    #9ca3af 100%
  );
  background-size: 250% 100%;
  background-position: 100% 50%;
  background-repeat: no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition: background-position 1500ms cubic-bezier(0.45, 0.05, 0.25, 1);
}
.tools__title--painted {
  background-position: 0% 50%;
}

.tools__stage {
  perspective: 1400px;
  display: flex;
  justify-content: center;
  width: 100%;
}
.tools__card {
  position: relative;
  width: min(1080px, 94vw);
  aspect-ratio: 5 / 2.2;
  background: #ffffff;
  border-radius: 28px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.02),
    0 12px 28px rgba(0, 0, 0, 0.08),
    0 48px 80px rgba(0, 0, 0, 0.06),
    0 120px 160px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  transform-style: preserve-3d;
  transform-origin: center center;
  will-change: transform;
}
.tools__grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
}
.tools__cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.tools__logo {
  position: absolute;
  max-width: 90%;
  max-height: 60%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 900ms ease;
  pointer-events: none;
  user-select: none;
  will-change: opacity;
  filter: grayscale(1);
}
.tools__logo--active { opacity: 0.85; }

.tools__plus {
  position: absolute;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
}
.tools__plus::before,
.tools__plus::after {
  content: '';
  position: absolute;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 1px;
}
.tools__plus::before {
  left: 50%;
  top: 0;
  width: 1.5px;
  height: 100%;
  transform: translateX(-50%);
}
.tools__plus::after {
  top: 50%;
  left: 0;
  height: 1.5px;
  width: 100%;
  transform: translateY(-50%);
}

@media (max-width: 768px) {
  .tools { padding: 80px 0 96px; }
  .tools__title--top { margin-bottom: 36px; }
  .tools__title--bottom { margin-top: 36px; }
  .tools__card { border-radius: 20px; }
  .tools__plus { width: 12px; height: 12px; }
}

/* ===== SERVICES (3 LINES) ===== */
.services {
  padding: var(--section-py) 0;
  position: relative;
}
.services__header {
  text-align: center;
  margin-bottom: 64px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.service-card {
  position: relative;
  padding: 36px 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  transition: all var(--duration) var(--ease);
  overflow: hidden;
}
.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, var(--accent-dim) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--duration);
  pointer-events: none;
}
.service-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 60px var(--accent-glow);
}
.service-card:hover::before { opacity: 1; }
.service-card__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  background: var(--accent-dim);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  border: 1px solid var(--border-accent);
}
.service-card__badge {
  position: absolute;
  top: 20px;
  right: 20px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 4px 10px;
  background: var(--accent);
  color: #0A0A0A;
  border-radius: 3px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.service-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
  color: var(--text);
}
.service-card__sub {
  font-family: var(--font-mono);
  font-weight: 400;
  font-style: italic;
  font-size: 0.85em;
  color: var(--accent);
}
.service-card__desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 20px;
  position: relative;
}
.service-card__price {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  padding: 6px 14px;
  border-radius: 4px;
  margin-bottom: 16px;
}
.service-card__features {
  margin-bottom: 24px;
  flex-grow: 1;
  position: relative;
}
.service-card__features li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  font-family: var(--font-mono);
}
.service-card__features li::before {
  content: '+';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}
.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-weight: 600;
  font-size: 14px;
  transition: gap var(--duration-fast) var(--ease);
  position: relative;
}
.service-card:hover .service-card__link { gap: 12px; }

/* The featured card is the SAME box as the other two — same column, same
   padding, same type scale. It earns its emphasis with color only (accent
   border, tinted surface, glow), never with size. It used to span the full
   grid row (`grid-column: 1 / -1`) with its own two-column inner layout;
   at that width the grid's shared 3D perspective sheared its contents badly
   on hover, and it left a dead cell beside the two normal cards. */
.service-card--featured {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--surface) 0%, rgba(255,255,255,0.03) 100%);
  box-shadow: 0 0 80px -20px var(--accent-glow);
}

/* No mobile block for --featured: it now shares the base card's layout, so
   the base card's own responsive rules already cover it. */

/* ===== CASE STUDY ===== */
.case-study {
  padding: var(--section-py) 0;
  background: #050505;
  color: var(--text);
  position: relative;
  overflow: hidden;
}
.case-study::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  pointer-events: none;
}
.case-study__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
}
.case-study__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  color: var(--text);
}
.case-study__desc {
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin-bottom: 32px;
}
.case-study__stats {
  display: flex;
  gap: 32px;
  margin-bottom: 32px;
  padding: 24px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
}
.case-study__stat-number {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 36px;
  color: var(--accent);
  line-height: 1;
}
.case-study__stat-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
  letter-spacing: 0.04em;
}
.case-study__features {
  margin-bottom: 32px;
}
.case-study__features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.case-study__features li svg { color: var(--accent); flex-shrink: 0; }
.case-study__ctas { display: flex; gap: 12px; flex-wrap: wrap; }

.case-study__visual {
  position: relative;
}
.case-study__badge-live {
  position: absolute;
  top: -16px;
  right: -16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 6px 10px;
  background: var(--accent);
  color: #0A0A0A;
  border-radius: 4px;
  letter-spacing: 0.05em;
  box-shadow: 0 0 20px var(--accent-glow);
}
.case-study__live-dot {
  width: 6px;
  height: 6px;
  background: #0A0A0A;
  border-radius: 50%;
  animation: pulse 1.5s infinite;
}
.case-study__screenshot {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}
.case-study__browser-bar {
  display: flex;
  gap: 6px;
  padding: 12px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.case-study__browser-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border-strong);
}
.case-study__screen-content {
  padding: 20px;
  min-height: 320px;
}
.case-study__mock-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.case-study__mock-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
}
.case-study__mock-dots { display: flex; gap: 3px; }
.case-study__mock-dots span {
  width: 4px;
  height: 4px;
  background: var(--text-muted);
  border-radius: 50%;
}
.case-study__mock-chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.case-study__mock-msg span {
  display: inline-block;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.4;
  max-width: 80%;
}
.case-study__mock-msg--user {
  align-self: flex-end;
}
.case-study__mock-msg--user span {
  background: var(--surface-elevated);
  color: var(--text);
  border: 1px solid var(--border);
}
.case-study__mock-msg--bot {
  align-self: flex-start;
}
.case-study__mock-msg--bot span {
  background: var(--accent);
  color: #0A0A0A;
}

/* ===== PRICING ===== */
.pricing {
  padding: var(--section-py) 0;
}
.pricing__header {
  text-align: center;
  margin-bottom: 56px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.pricing__subtitle {
  font-size: 17px;
  color: var(--text-secondary);
  max-width: 580px;
  margin: 16px auto 0;
}
.pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}
.pricing__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  transition: all var(--duration) var(--ease);
  position: relative;
}
.pricing__card--featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 40px var(--accent-glow);
  position: relative;
  background: linear-gradient(180deg, var(--surface) 0%, rgba(255, 255, 255, 0.025) 100%);
}
.pricing__card-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #0A0A0A;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.pricing__card:hover:not(.pricing__card--featured) {
  transform: translateY(-4px);
  border-color: var(--border-strong);
}

.pricing__card-header { margin-bottom: 24px; }
.pricing__card-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
  color: var(--text);
}
.pricing__card-sub {
  font-family: var(--font-mono);
  font-style: italic;
  font-weight: 400;
  font-size: 0.85em;
  color: var(--accent);
}
.pricing__card-desc {
  font-size: 14px;
  color: var(--text-muted);
}

.pricing__card-prices { margin-bottom: 24px; }
.pricing__card-market { margin-bottom: 12px; }
.pricing__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.pricing__label--accent { color: var(--accent); }

.pricing__price {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
}
.pricing__price--crossed {
  font-size: 20px;
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-color: var(--text-dim);
}
.pricing__price--main {
  font-size: 36px;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1;
}

.pricing__card-plus {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.pricing__scarcity {
  margin-top: 32px;
}
.pricing__scarcity-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 28px;
  background: var(--accent-dim);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius);
}
.pricing__scarcity-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #0A0A0A;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pricing__scarcity-inner strong {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  display: block;
  margin-bottom: 4px;
}
.pricing__scarcity-inner p {
  font-size: 13px;
  color: var(--text-secondary);
}

/* ===== FINAL CTA ===== */
.final-cta {
  padding: var(--section-py) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, var(--accent-glow) 0%, transparent 70%);
  pointer-events: none;
}
.final-cta__inner { max-width: 720px; margin: 0 auto; position: relative; }
.final-cta__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
  color: var(--text);
}
.final-cta__desc {
  font-size: 18px;
  color: var(--text-secondary);
  margin-bottom: 32px;
  line-height: 1.5;
}
.final-cta__buttons {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ===== FOOTER ===== */
.footer {
  background: #050505;
  border-top: 1px solid var(--border);
  padding: 80px 0 32px;
  color: var(--text-secondary);
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 60px;
}
.footer__logo {
  color: var(--text);
  margin-bottom: 16px;
}
.footer__tagline {
  font-size: 14px;
  margin-bottom: 20px;
  max-width: 280px;
  line-height: 1.5;
}
.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}
.footer__contact a {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-secondary);
  transition: color var(--duration-fast);
}
.footer__contact a:hover { color: var(--accent); }
.footer__social { display: flex; gap: 10px; }
.footer__social-link {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: all var(--duration-fast);
}
.footer__social-link:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}
.footer__col-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.footer__col { display: flex; flex-direction: column; gap: 10px; }
.footer__link {
  font-size: 14px;
  color: var(--text-secondary);
  transition: color var(--duration-fast);
}
.footer__link:hover { color: var(--accent); }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}

/* ===== WHATSAPP FLOAT ===== */
.wa-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
  z-index: 30;
  transition: transform var(--duration-fast) var(--ease), opacity .3s ease, visibility .3s ease;
}
.wa-float:hover { transform: scale(1.08); }
/* Hide WA float while hero gallery owns viewport — reveals on scroll */
.wa-float.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(20px);
}

/* ===== LANGUAGE TOGGLE ===== */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  margin-right: 4px;
}
.lang-toggle__btn {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--text-muted);
  transition: all var(--duration-fast) var(--ease);
  text-transform: uppercase;
}
.lang-toggle__btn--active {
  background: var(--accent);
  color: #0A0A0A;
  box-shadow: 0 0 12px var(--accent-glow);
}
.lang-toggle__btn:not(.lang-toggle__btn--active):hover { color: var(--text); }

/* ===== LANGUAGE SWITCHING ANIMATION ===== */
body.lang-switching main,
body.lang-switching .banner__inner,
body.lang-switching .nav__menu,
body.lang-switching .footer__grid {
  opacity: 0;
  transform: translateY(6px);
  filter: blur(2px);
  transition: opacity 280ms var(--ease), transform 280ms var(--ease), filter 280ms var(--ease);
}
body:not(.lang-switching) main,
body:not(.lang-switching) .banner__inner,
body:not(.lang-switching) .nav__menu,
body:not(.lang-switching) .footer__grid {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition: opacity 380ms var(--ease) 60ms, transform 380ms var(--ease) 60ms, filter 380ms var(--ease) 60ms;
}

/* ===== REVEAL ANIMATION ===== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
/* main.js adds `reveal--visible`; `is-visible` is the older name. Both are
   matched so a JS/CSS rename can never leave a section stuck at opacity 0. */
.reveal.is-visible,
.reveal.reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== PRODUCT LINE LANDING HERO ===== */
.product-hero {
  padding: 140px 0 100px;
  position: relative;
  overflow: hidden;
}
.product-hero::before {
  content: '';
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 1000px;
  height: 800px;
  background: radial-gradient(ellipse, var(--accent-glow) 0%, transparent 60%);
  pointer-events: none;
}
.product-hero__bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 90%);
  pointer-events: none;
}
.product-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 880px;
}
.product-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--accent-dim);
  border: 1px solid var(--border-accent);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  margin-bottom: 28px;
  letter-spacing: 0.06em;
}
.product-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 7vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
  color: var(--text);
}
.product-hero__title em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}
.product-hero__sub {
  font-size: clamp(17px, 2vw, 21px);
  color: var(--text-secondary);
  line-height: 1.5;
  max-width: 680px;
  margin-bottom: 36px;
}
.product-hero__ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* ===== FEATURES GRID ===== */
.features {
  padding: var(--section-py) 0;
  position: relative;
}
.features__header {
  text-align: center;
  margin-bottom: 56px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.features__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  transition: all var(--duration-fast) var(--ease);
  position: relative;
  overflow: hidden;
}
.feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, var(--accent-dim) 0%, transparent 70%);
  opacity: 0;
  transition: opacity var(--duration);
  pointer-events: none;
}
.feature-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.feature-card:hover::before { opacity: 1; }
.feature-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: var(--accent-dim);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border: 1px solid var(--border-accent);
  position: relative;
}
.feature-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
  color: var(--text);
  position: relative;
}
.feature-card__desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  position: relative;
}

/* ===== HOW IT WORKS STEPS ===== */
.how {
  padding: var(--section-py) 0;
  background: #050505;
  position: relative;
}
.how__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 56px;
}
.how__step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  position: relative;
  transition: border-color var(--duration-fast);
}
.how__step:hover { border-color: var(--accent); }
.how__step-num {
  position: absolute;
  top: -18px;
  left: 24px;
  width: 40px;
  height: 40px;
  background: var(--accent);
  color: #0A0A0A;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 0 20px var(--accent-glow);
}
.how__step-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  margin: 16px 0 10px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.how__step-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ===== DEMO INLINE ===== */
.demo-inline {
  padding: var(--section-py) 0;
  background: linear-gradient(180deg, #050505 0%, #0A0A0A 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.demo-inline::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 50%, var(--accent-glow) 0%, transparent 50%);
  pointer-events: none;
}
.demo-inline__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-top: 56px;
  position: relative;
}
.demo-inline__content p {
  color: var(--text-secondary);
  font-size: 17px;
  line-height: 1.6;
  margin-bottom: 32px;
}
.demo-inline__steps {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 36px;
}
.demo-inline__step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.demo-inline__step-num {
  width: 30px;
  height: 30px;
  background: var(--accent);
  color: #0A0A0A;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.demo-inline__step strong {
  display: block;
  font-weight: 600;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 16px;
  margin-bottom: 2px;
}
.demo-inline__step span {
  color: var(--text-muted);
  font-size: 13px;
}
.demo-inline__qr {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px;
  text-align: center;
  position: relative;
  box-shadow: 0 0 60px var(--accent-glow);
}
.demo-inline__qr-placeholder {
  width: 200px;
  height: 200px;
  margin: 0 auto 18px;
  border: 2px dashed var(--accent);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--accent-dim);
}
.demo-inline__qr-placeholder span {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.demo-inline__qr p {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 14px;
}
.demo-inline__qr p strong {
  color: var(--accent);
  font-weight: 600;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .case-study__inner { grid-template-columns: 1fr; gap: 40px; }
  .services__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .nav__menu { display: none; }
  .nav__burger { display: flex; }
  .nav.menu-open .nav__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav.menu-open .nav__burger span:nth-child(2) { opacity: 0; }
  .nav.menu-open .nav__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .banner__inner { flex-direction: column; gap: 6px; padding-right: 40px; text-align: center; }
  .banner__text { font-size: 12px; }

  .services__grid { grid-template-columns: 1fr; }
  .contrast__grid { grid-template-columns: 1fr; }
  .pricing__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .demo-inline__grid { grid-template-columns: 1fr; gap: 40px; }

  .hero { padding: 60px 0 60px; }
  .hero__ctas { flex-direction: column; }
  .hero__ctas .btn { width: 100%; justify-content: center; }
  .product-hero { padding: 80px 0 60px; }
  .product-hero__ctas { flex-direction: column; }
  .product-hero__ctas .btn { width: 100%; justify-content: center; }
  .case-study__stats { flex-direction: column; gap: 16px; }
  .case-study__ctas { flex-direction: column; }
}

@media (max-width: 480px) {
  .footer__grid { grid-template-columns: 1fr; }
  .final-cta__buttons { flex-direction: column; }
  .final-cta__buttons .btn { width: 100%; justify-content: center; }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ===================================================================
   HERO — WebGL 3D Cards (Three.js)
   Cards = mallas BoxGeometry con grosor real. Drag horizontal con GSAP.
   Loop infinito. Fondo blanco puro. Scroll vertical pasa al landing.
   =================================================================== */

/* No page renders a .banner anymore; kept so a stray one never covers the hero. */
body:has(.hg) .banner { display: none !important; }
body:has(.hg) .nav { top: 0; }
body { background: #FFFFFF; }

.hg {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  background: #FFFFFF;
  overflow: hidden;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  isolation: isolate;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

/* ---- shared motion token ---- */
:root { --hg-ease: cubic-bezier(.2, .8, .2, 1); }

/* ---- micro tags ---- */
.hg__tag {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border: 1px solid #D8D8D8;
  background: rgba(255, 255, 255, .65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font: 500 10px/1 var(--font-mono, 'JetBrains Mono', monospace);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #6B6B6B; /* 4.7:1 on #FFFFFF — WCAG AA */
  white-space: nowrap;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  border-radius: 6px;
}
.hg__tag::before {
  content: '';
  position: absolute;
  inset: -6px; /* extended tap area */
}
.hg__tag:hover { color: #0A0A0A; border-color: #0A0A0A; }
.hg__tag:focus-visible {
  outline: 2px solid #0A0A0A;
  outline-offset: 3px;
  color: #0A0A0A;
}
.hg__tag--brand { color: #0A0A0A; font-weight: 600; }
.hg__tag--brand sup { font-size: 7px; margin: 0 3px; vertical-align: top; line-height: 1; }
.hg__tag--active { color: #0A0A0A; border-color: #0A0A0A; background: rgba(0, 0, 0, .04); }

/* ---- nav top-left ---- */
.hg__nav {
  position: absolute;
  top: 24px;
  left: 24px;
  display: flex;
  gap: 8px;
  z-index: 30;
}

/* ---- hero headline top-left ---- */
.hg__headline {
  position: absolute;
  top: clamp(80px, 12vw, 160px);
  left: 32px;
  z-index: 30;
  max-width: min(880px, calc(100% - 64px));
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  padding: 28px 36px;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.hg__title {
  font: 600 clamp(28px, 4vw, 52px)/1.1 var(--font-display);
  letter-spacing: -0.02em;
  color: #0A0A0A;
  margin: 0 0 28px;
}
/* ===== HG RAINBOW =====
   Highlighted word in hero title (e.g. "escala"). No special treatment —
   stays solid, inherits title color/weight. Previous gradient + underline
   experiments removed. */
.hg__rainbow {
  display: inline;
  color: inherit;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: currentColor;
}

.hg__subtitle {
  font: 400 clamp(13px, 1.6vw, 16px)/1.5 var(--font-body, 'Inter', sans-serif);
  color: #6B6B6B;
  margin: 0;
}

@media (max-width: 600px) {
  .hg__headline { top: 24px; white-space: normal; max-width: calc(100% - 48px); }
}

/* ---- card label (project info) ---- */
.hg__label {
  position: absolute;
  bottom: 100px;
  left: 24px;
  z-index: 30;
  display: flex;
  align-items: baseline;
  gap: 12px;
  pointer-events: none;
}
.hg__label-num {
  font: 600 11px/1 var(--font-mono, 'JetBrains Mono', monospace);
  letter-spacing: 2px;
  color: #999999;
}
.hg__label-text {
  font: 600 13px/1 var(--font-mono, 'JetBrains Mono', monospace);
  letter-spacing: 1.5px;
  color: #0A0A0A;
  text-transform: uppercase;
  transition: opacity .25s ease;
}

/* ---- hint ---- */
.hg__hint {
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 30;
  font: 500 9px/1 var(--font-mono, 'JetBrains Mono', monospace);
  letter-spacing: 2px;
  color: #999999;
  pointer-events: none;
  animation: hg-hint-pulse 2.4s ease-in-out infinite;
}
@keyframes hg-hint-pulse { 0%,100% { opacity: .4 } 50% { opacity: 1 } }

/* ---- SR-only fallback list ---- */
.hg__sr-list {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- responsive ---- */
@media (max-width: 600px) {
  .hg__nav { flex-wrap: wrap; max-width: calc(100% - 48px); }
  .hg { cursor: default; touch-action: pan-y; }
  .hg__hint { display: none; }
  .hg__tag { height: 40px; padding: 0 16px; }
  .hg__label { bottom: 80px; }
}

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

/* ===================================================================
   3D MARQUEE — isometric grid of portfolio screenshots
   Replaces the old Three.js WebGL hero canvas
   =================================================================== */
.marquee {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 0;
  z-index: 1;
}
.marquee__fade {
  --marquee-top-fade: linear-gradient(to bottom, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 12%);
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0.95) 18%, rgba(255,255,255,0.5) 38%, rgba(255,255,255,0) 55%),
    var(--marquee-top-fade),
    linear-gradient(to top, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 10%),
    linear-gradient(to left, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 8%);
}
/* A soft scroll-edge wash behind floating home navigation; no solid chrome.
   Only the top layer changes, and it is fully transparent below 18%.
   Left/bottom/right fades, headline card and mobile fade stay unchanged. */
@media (min-width: 769px) {
  .marquee__fade {
    --marquee-top-fade: linear-gradient(to bottom, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.84) 6%, rgba(255,255,255,0.42) 12%, rgba(255,255,255,0) 18%);
  }
}
.marquee__center {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.marquee__stage-wrap {
  width: 3600px;
  height: 3600px;
  flex-shrink: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.marquee__stage {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  width: 100%;
  height: 100%;
  transform-origin: center center;
  /* rotateX(55deg) rotateZ(-45deg), written as the flat matrix it projects
     to (no perspective here, so the 3D tilt is exactly this 2D shear).
     Kept 2D on purpose (5 oct 2026): as a 3D context, Safari snapped the
     drifting columns a pixel up and down on alternate frames on iPhone.
     hero-reel.js still models the tilt as rotateX(55) rotateZ(-45). */
  transform: matrix(0.707107, -0.40558, 0.707107, 0.40558, 0, 0);
}
.marquee__col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  position: relative;
  /* Composite the five drifting columns, not every tile on iOS. */
  will-change: transform;
}
.marquee__col::before {
  display: none;
}
.marquee__item {
  position: relative;
  width: 100%;
  padding: 3px;
}
.marquee__item::before {
  display: none;
}
.marquee__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(10,10,10,0.06);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
}
/* `will-change` promotes every tile to its own compositor layer and holds
   it there. With 52 tiles that is a lot of memory for a hint that only
   pays off on hover, which touch devices do not have. */
@media (hover: hover) and (min-width: 1024px) {
  .marquee__img { will-change: transform; }
}
.marquee__img:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15);
}

/* These used to shrink the stage with `transform: scale()`. Two problems.
   First, a bare `scale()` overwrote the base rule's translate(-50%, -50%)
   — `transform` is one property — so the 3600px stage landed with its
   corner at the hero's centre and .marquee{overflow:hidden} clipped it
   away: blank hero on every viewport under 1440px.
   Second, and worse: under `transform: scale()` with preserve-3d, WebKit
   rasterises each descendant layer at its UNSCALED size. 52 tiles at
   ~700x400 CSS on a DPR-3 phone is hundreds of MB of texture and iOS
   Safari kills the tab ("A problem repeatedly occurred").
   So the stage is genuinely smaller now instead of being drawn big and
   scaled down. Same pixels on screen, a fraction of the memory.
   3600 * 0.35 = 1260, * 0.5 = 1800, * 0.65 = 2340. */
@media (max-width: 639px) {
  .marquee__stage-wrap { width: 1260px; height: 1260px; }
  .hg { min-height: 400px; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .marquee__stage-wrap { width: 1800px; height: 1800px; }
}
@media (min-width: 1024px) and (max-width: 1439px) {
  .marquee__stage-wrap { width: 2340px; height: 2340px; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__col { animation: none !important; }
}

/* ===================================================================
   HERO ENTRANCE (home) — no loader. <html class="entrance"> hides the
   headline and tiles before first paint; main.js initEntrance brings them
   in: nav, then headline, then each tile once its image is decoded.
   html.entrance-done is the safety net: everything shows.
   =================================================================== */
/* Fade only, no travel (4 oct 2026): a 14-28px slide over ~1.5 s moves a
   fraction of a pixel per frame, and the browser draws that as visible
   one-pixel steps on the glass title card and the tiles ("trembling",
   Arthur, iPhone 14 Pro Max and laptop). The idle drift already brings the
   motion. */
html.entrance .hg__headline {
  opacity: 0;
  transition: opacity 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}
html.hero-in .hg__headline,
html.entrance-done .hg__headline {
  opacity: 1;
}
html.entrance .marquee__item {
  opacity: 0;
  transition: opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}
html.entrance .marquee__item.is-in,
html.entrance-done .marquee__item {
  opacity: 1;
}

/* Reduced motion keeps the entrance as a short cross-fade: no travel, but
   content still arrives instead of popping in (apple-design §14).
   `!important` only to out-rank the global `* { transition-duration: 0.01ms
   !important }` reduced-motion reset higher up; this selector is more specific. */
@media (prefers-reduced-motion: reduce) {
  html.entrance .hg__headline,
  html.entrance .marquee__item {
    translate: none;
    transition: opacity 400ms ease !important;
  }
}

/* Brand inherits the headline and enters with its card. */
.hg__title-brand {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}
.hg__title-break { display: none; }
@media (min-width: 1024px) {
  .hg__title-break { display: initial; }
}

/* ===================================================================
   V2 PAGES — Portfolio, Sobre Mí, Precios, Contacto, Recursos.
   Light-theme sections (white background, dark text). Reuse design
   tokens. Shared <head>/<nav>/<footer> chrome already covered above.
   =================================================================== */

/* ----- Generic page header (eyebrow + title + sub) ----- */
.page-head {
  padding: 200px 0 80px;
  background: #ffffff;
}
.page-head__eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #525252;
  margin-bottom: 24px;
}
.page-head__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: #0a0a0a;
  margin: 0 0 28px;
}
.page-head__title em {
  font-style: normal;
  color: #525252;
  font-weight: 500;
}
.page-head__sub {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.3vw, 21px);
  line-height: 1.45;
  color: #404040;
  max-width: 720px;
  margin: 0;
}

/* ----- Cases grid (portfolio + recursos hub) ----- */
.cases { padding: 60px 0 80px; background: #fafafa; }
.cases__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 28px;
}
.case-card {
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 18px;
  overflow: hidden;
  transition: transform 380ms var(--ease), box-shadow 380ms var(--ease), border-color 280ms ease;
}
.case-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.18);
  border-color: #d4d4d4;
}
.case-card--featured { grid-column: 1 / -1; }
.case-card--soon { opacity: 0.78; }
.case-card--soon:hover { transform: none; box-shadow: none; cursor: default; }
.case-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.case-card--featured .case-card__link {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 0;
  align-items: stretch;
}
.case-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #f4f4f5;
  overflow: hidden;
}
.case-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}
.case-card:hover .case-card__media img { transform: scale(1.04); }
.case-card__tag {
  position: absolute;
  top: 16px;
  left: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: #0a0a0a;
  color: #fafafa;
  padding: 6px 10px;
  border-radius: 999px;
}
.case-card__tag--live { background: #16a34a; }
.case-card__tag--soon { background: #d4d4d4; color: #404040; }
/* When card has no media block, tag floats absolutely over body (overlap
   with text). Render it inline as a chip instead. */
.case-card:not(:has(.case-card__media)) .case-card__tag {
  position: static;
  align-self: flex-start;
  margin-bottom: 4px;
}
.case-card__body {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.case-card__meta {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #737373;
}
.case-card__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #0a0a0a;
  margin: 4px 0 8px;
}
.case-card__desc {
  font-size: 15px;
  line-height: 1.55;
  color: #525252;
  margin: 0;
  flex-grow: 1;
}
.case-card__metrics {
  display: flex;
  gap: 24px;
  margin: 16px 0 8px;
  padding-top: 16px;
  border-top: 1px solid #e5e5e5;
}
.case-card__metric { display: flex; flex-direction: column; }
.case-card__metric strong {
  font-size: 22px;
  font-weight: 700;
  color: #0a0a0a;
  letter-spacing: -0.01em;
}
.case-card__metric span {
  font-size: 12px;
  color: #737373;
  margin-top: 2px;
}
.case-card__cta {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: #0a0a0a;
  margin-top: 8px;
}
.case-card__cta--muted { color: #a3a3a3; }

/* ----- Case study (Mar y Selva) sections ----- */
.breadcrumb {
  display: flex;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #737373;
  margin-bottom: 24px;
}
.breadcrumb a {
  color: #525252;
  text-decoration: none;
  transition: color 200ms ease;
}
.breadcrumb a:hover { color: #0a0a0a; }

.case-hero {
  padding: 180px 0 80px;
  background: #ffffff;
}
.case-hero__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #525252;
  margin-bottom: 16px;
}
.case-hero__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(36px, 5.5vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: #0a0a0a;
  margin: 0 0 32px;
  max-width: 16ch;
}
.case-hero__title em {
  font-style: normal;
  color: #525252;
  font-weight: 500;
}
.case-hero__sub {
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.55;
  color: #404040;
  max-width: 760px;
  margin: 0 0 48px;
}
.case-hero__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
  padding: 28px 0 0;
  border-top: 1px solid #e5e5e5;
  margin: 0;
}
.case-hero__meta dt {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #737373;
  margin-bottom: 6px;
}
.case-hero__meta dd {
  font-size: 15px;
  font-weight: 500;
  color: #0a0a0a;
  margin: 0;
}

.case-section { padding: 80px 0; }
.case-section--alt { background: #fafafa; }
.case-cols {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 56px;
  align-items: start;
}
.case-label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #737373;
  margin-bottom: 16px;
}
.case-label--center { display: block; text-align: center; }
.case-h2 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: #0a0a0a;
  margin: 0;
  max-width: 18ch;
}
.case-h2--center {
  text-align: center;
  max-width: none;
  margin: 0 auto 48px;
}
.case-prose {
  font-size: 17px;
  line-height: 1.65;
  color: #404040;
}
.case-prose p { margin: 0 0 18px; }
.case-prose p:last-child { margin-bottom: 0; }
.case-prose--center { text-align: center; max-width: 720px; margin: 0 auto; }
.case-prose a { color: #0a0a0a; text-decoration: underline; text-decoration-color: #a3a3a3; }
.case-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}
.case-bullets li {
  padding: 16px 20px;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: #525252;
}
.case-bullets strong { color: #0a0a0a; }

.case-stack { padding: 80px 0; background: #0a0a0a; color: #fafafa; }
.case-stack .case-label { color: #a3a3a3; }
.case-stack .case-h2 { color: #fafafa; }
.case-stack__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}
.case-stack__grid li {
  padding: 22px;
  background: #161616;
  border: 1px solid #262626;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.case-stack__grid strong {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: #fafafa;
}
.case-stack__grid span {
  font-size: 13px;
  color: #a3a3a3;
  line-height: 1.45;
}

.case-cta { padding: 100px 0; background: #ffffff; }
.case-cta__inner {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.case-cta__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #0a0a0a;
  margin: 0 0 20px;
}
.case-cta__sub {
  font-size: 17px;
  line-height: 1.55;
  color: #525252;
  margin: 0 0 32px;
}
.case-cta__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.next-slot {
  padding: 100px 0;
  background: #0a0a0a;
  color: #fafafa;
}
.next-slot__inner {
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: 32px;
  align-items: center;
}
.next-slot__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a3a3a3;
  display: block;
  margin-bottom: 12px;
}
.next-slot__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #fafafa;
  margin: 0 0 12px;
}
.next-slot__sub {
  font-size: 16px;
  color: #d4d4d4;
  margin: 0;
}

/* ----- Sobre Mí (about) ----- */
.about { padding: 60px 0 100px; background: #ffffff; }
.about__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 64px;
  align-items: start;
}
.about__story {
  font-size: 17px;
  line-height: 1.7;
  color: #404040;
}
.about__story p { margin: 0 0 20px; }
.about__story a {
  color: #0a0a0a;
  text-decoration: underline;
  text-decoration-color: #a3a3a3;
}
.about__card {
  padding: 28px 28px 32px;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 18px;
  position: sticky;
  top: 100px;
  box-shadow: 0 24px 48px -28px rgba(10, 10, 10, 0.12);
}
.about__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 20%;
  border-radius: 14px;
  margin: -12px 0 24px;
  background: #0f2419;
  box-shadow:
    0 16px 32px -16px rgba(15, 36, 25, 0.35),
    0 0 0 1px rgba(15, 36, 25, 0.06);
  transition: transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
.about__photo:hover { transform: translateY(-4px); }
.about__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid #e5e5e5;
  font-size: 14px;
}
.about__row:last-of-type { border-bottom: none; }
.about__row span {
  color: #737373;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.about__row strong {
  color: #0a0a0a;
  font-weight: 600;
  text-align: right;
}

.how { padding: 100px 0; background: #fafafa; }
.how__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.how__grid li {
  padding: 28px;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.55;
  color: #525252;
}
.how__grid strong { display: block; color: #0a0a0a; font-size: 17px; margin-bottom: 8px; }

/* ----- Precios ----- */
.pricing { padding: 60px 0 100px; background: #ffffff; }
.pricing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}
.pricing__card {
  position: relative;
  padding: 36px 32px;
  background: #fafafa;
  border: 1px solid #e5e5e5;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease);
}
.pricing__card:hover { transform: translateY(-4px); }
.pricing__card--featured {
  background: #0a0a0a;
  color: #fafafa;
  border-color: #0a0a0a;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.3);
}
.pricing__featured {
  position: absolute;
  top: -12px;
  left: 32px;
  background: #fafafa;
  color: #0a0a0a;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}
.pricing__tag {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #737373;
}
.pricing__card--featured .pricing__tag { color: #a3a3a3; }
.pricing__name {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: #0a0a0a;
  margin: 8px 0 12px;
}
.pricing__card--featured .pricing__name { color: #fafafa; }
.pricing__desc {
  font-size: 14px;
  line-height: 1.5;
  color: #525252;
  margin: 0 0 24px;
  min-height: 84px;
}
.pricing__card--featured .pricing__desc { color: #d4d4d4; }
.pricing__card--featured .pricing__desc a { color: #fafafa; text-decoration: underline; }
.pricing__price {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 0;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 24px;
}
.pricing__card--featured .pricing__price {
  border-color: #262626;
}
.pricing__amount {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 36px;
  letter-spacing: -0.02em;
  color: #0a0a0a;
}
.pricing__card--featured .pricing__amount { color: #fafafa; }
.pricing__period {
  font-size: 13px;
  color: #737373;
}
.pricing__card--featured .pricing__period { color: #a3a3a3; }
.pricing__strike {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #a3a3a3;
  text-decoration: line-through;
  margin-top: 4px;
}
.pricing__features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  flex-grow: 1;
}
.pricing__features li {
  position: relative;
  padding: 8px 0 8px 22px;
  font-size: 14px;
  line-height: 1.5;
  color: #404040;
}
.pricing__card--featured .pricing__features li { color: #d4d4d4; }
.pricing__features li::before {
  content: "+";
  position: absolute;
  left: 0;
  color: #737373;
  font-family: var(--font-mono);
  font-weight: 600;
}
.pricing__card--featured .pricing__features li::before { color: #a3a3a3; }

.guarantee {
  padding: 80px 0;
  background: #fafafa;
}
.guarantee__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  padding: 48px;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 18px;
}
.guarantee .case-label { display: block; }
.guarantee .case-h2 { margin: 0 auto 20px; max-width: none; }

.faq { padding: 100px 0; background: #ffffff; }
.faq__list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 820px;
  margin: 0 auto;
}
.faq__item { border-bottom: 1px solid #e5e5e5; }
.faq__item:first-child { border-top: 1px solid #e5e5e5; }
.faq__head {
  width: 100%;
  background: transparent;
  border: none;
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(17px, 1.4vw, 20px);
  color: #0a0a0a;
  text-align: left;
  cursor: pointer;
  transition: color 200ms ease;
}
.faq__head:hover { color: #404040; }
.faq__chev {
  flex: 0 0 auto;
  transition: transform 320ms var(--ease);
}
.faq__head[aria-expanded="true"] .faq__chev { transform: rotate(180deg); }
.faq__body {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  color: #525252;
  font-size: 15px;
  line-height: 1.6;
  transition:
    max-height 420ms var(--ease),
    opacity 280ms ease,
    transform 320ms var(--ease),
    padding-bottom 420ms var(--ease);
}
.faq__head[aria-expanded="true"] + .faq__body {
  max-height: 280px;
  opacity: 1;
  transform: translateY(0);
  padding-bottom: 20px;
  transition-delay: 0ms, 80ms, 80ms, 0ms;
}

/* ----- Contacto ----- */
.contact { padding: 60px 0 60px; background: #ffffff; }
.contact__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.contact__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px;
  background: #fafafa;
  border: 1px solid #e5e5e5;
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: transform 280ms var(--ease), border-color 200ms ease, box-shadow 280ms var(--ease);
}
.contact__card:hover {
  transform: translateY(-3px);
  border-color: #d4d4d4;
  box-shadow: 0 18px 36px -16px rgba(0, 0, 0, 0.12);
}
.contact__card--primary {
  background: #16a34a;
  color: #fafafa;
  border-color: #16a34a;
}
.contact__card--primary:hover { background: #15803d; border-color: #15803d; }
.contact__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 12px;
  color: #0a0a0a;
}
.contact__card--primary .contact__icon { background: rgba(255,255,255,0.15); color: #fafafa; }
.contact__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  margin: 4px 0 0;
}
.contact__desc {
  font-size: 14px;
  line-height: 1.5;
  color: #525252;
  margin: 0;
}
.contact__card--primary .contact__desc { color: rgba(255,255,255,0.85); }
.contact__cta {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  margin-top: 8px;
}

.contact-form-wrap { padding: 80px 0; background: #fafafa; }
.contact-form {
  max-width: 720px;
  margin: 32px auto 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.contact-form__field { display: flex; flex-direction: column; gap: 6px; }
.contact-form__field span {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #525252;
}
.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
  width: 100%;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid #d4d4d4;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 15px;
  color: #0a0a0a;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.contact-form__field input:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus {
  outline: none;
  border-color: #0a0a0a;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}
.contact-form__field textarea { resize: vertical; min-height: 120px; font-family: var(--font-body); }
.contact-form .btn { align-self: flex-start; }

/* ----- Calculadora ROI ----- */
.calc { padding: 60px 0 120px; background: #ffffff; }
.calc__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.calc__form {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding: 40px;
  background: #fafafa;
  border: 1px solid #e5e5e5;
  border-radius: 18px;
}
.calc__field { display: flex; flex-direction: column; gap: 10px; }
.calc__label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: #0a0a0a;
}
.calc__output {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: #0a0a0a;
}
.calc__field input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: #d4d4d4;
  border-radius: 999px;
  outline: none;
}
.calc__field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  background: #0a0a0a;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 200ms ease;
}
.calc__field input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.1); }
.calc__field input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  background: #0a0a0a;
  border-radius: 50%;
  cursor: pointer;
  border: none;
}
.calc__hint {
  font-size: 12px;
  color: #737373;
  line-height: 1.4;
}

.calc__result {
  padding: 40px;
  background: #0a0a0a;
  color: #fafafa;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: sticky;
  top: 100px;
}
.calc__result-head .case-label { color: #a3a3a3; }
.calc__result-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.015em;
  margin: 0;
}
.calc__metrics {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.calc__metrics li {
  padding: 20px;
  background: #161616;
  border: 1px solid #262626;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.calc__metric-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a3a3a3;
}
.calc__metric-value {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: #fafafa;
}
.calc__metric-value--accent { color: #4ade80; }
.calc__metric-foot {
  font-size: 11px;
  color: #737373;
  line-height: 1.4;
}
.calc__cta { display: flex; flex-direction: column; gap: 8px; }
.calc__cta-text { font-size: 14px; color: #d4d4d4; line-height: 1.5; margin: 0 0 8px; }
.calc__disclaimer {
  font-size: 11px;
  color: #737373;
  line-height: 1.5;
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid #262626;
}

/* ===================================================================
   CONTRAST FIX BATCH
   Many components were built dark-theme-first (white text via
   `var(--text)`), but their containers switched to white backgrounds.
   This block forces dark text on the specific elements an audit flagged
   as white-on-white. Dark-themed sections (.case-stack, .pricing__card--
   featured, .calc__result, .next-slot) keep their inherited white via
   higher-specificity overrides below.
   =================================================================== */

/* Light navigation uses a dark lockup; dark service pages override the link. */
.nav__logo { color: #0a0a0a; }

/* Generic section eyebrows and titles on white bg */
.proof .section-label,
.pricing .section-label,
.services .section-label,
.case-study .section-label:not(.section-label--light) {
  color: #525252;
  background: #f4f4f5;
  border-color: #e5e5e5;
}
.proof .section-label::before,
.pricing .section-label::before,
.services .section-label::before { background: #737373; box-shadow: none; }

.pricing .section-title,
.services .section-title,
#servicios .section-title,
.proof .section-title,
.discovery .section-title { color: #0a0a0a; }

/* Pricing card (non-featured) internal text */
.pricing__card:not(.pricing__card--featured) .pricing__card-name,
.pricing__card:not(.pricing__card--featured) .pricing__card-sub,
.pricing__card:not(.pricing__card--featured) .pricing__price--main,
.pricing__card:not(.pricing__card--featured) .pricing__card-desc,
.pricing__card:not(.pricing__card--featured) .pricing__card-plus { color: #0a0a0a; }
.pricing__card:not(.pricing__card--featured) .pricing__label,
.pricing__card:not(.pricing__card--featured) .pricing__label--accent { color: #525252; }
.pricing__card:not(.pricing__card--featured) .pricing__price--crossed { color: #a3a3a3; }
.pricing__subtitle { color: #525252; }
.pricing__detail-link { color: #0a0a0a; text-decoration-color: rgba(0,0,0,0.25); }
.pricing__detail-link:hover { color: #0a0a0a; text-decoration-color: #0a0a0a; }

/* Proof badges + meta on the green "En vivo" pill keep green bg, white text */
.proof__badge-live { color: #0f5132 !important; background: #d1fadf !important; }

/* Hero card list under the 3D scene (proj names) */
.hg li,
.hg__list a,
.hg__title,
.hg__sub { color: #0a0a0a; }

/* FAQ accordion (already had dark colors set on body/head, but the LI text
   could inherit white in some browsers — belt and suspenders) */
.faq__head { color: #0a0a0a; }
.faq__head > span { color: #0a0a0a; }
.faq__body { color: #525252; }

/* Contact cards — non-primary stay light bg, force dark text */
.contact__card:not(.contact__card--primary),
.contact__card:not(.contact__card--primary) .contact__title,
.contact__card:not(.contact__card--primary) .contact__desc,
.contact__card:not(.contact__card--primary) .contact__cta { color: #0a0a0a; }
.contact__card:not(.contact__card--primary) .contact__desc { color: #525252; }
.contact__card:not(.contact__card--primary) .contact__icon { color: #0a0a0a; }

/* Form labels (the eyebrow spans + inputs) */
.contact-form__field > span { color: #525252; }
.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea { color: #0a0a0a; }

/* Calculator field labels + outputs */
.calc__field .calc__label { color: #0a0a0a; }
.calc__field .calc__output { color: #0a0a0a; }
.calc__field .calc__hint { color: #737373; }

/* Case cards (portfolio, recursos, blog hubs) — force dark text on the
   anchor wrapper so all children stop inheriting the body's white */
.case-card,
.case-card__link,
.case-card__title,
.case-card__meta,
.case-card__desc,
.case-card__cta { color: #0a0a0a; }
.case-card__meta { color: #737373; }
.case-card__desc { color: #525252; }
.case-card__cta { color: #0a0a0a; }
.case-card__cta--muted { color: #a3a3a3; }
.case-card__metric strong { color: #0a0a0a; }
.case-card__metric span { color: #737373; }

/* ----- Homepage Discovery row — entry points to v2 sub-pages -----
   Sits between the pricing block and the final CTA. Visual goal: feel
   like a "what else can I do" index, not another sales section. Light
   grid of 6 cards, monospace eyebrow numbers, hover lifts. */
.discovery {
  padding: 120px 0;
  background: #ffffff;
  color: #0a0a0a;
}
.discovery__head { max-width: 800px; margin: 0 0 56px; }
.discovery__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #737373;
  margin-bottom: 16px;
}
.discovery__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(34px, 4.5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #0a0a0a;
  margin: 0;
}
.discovery__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.discovery__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 32px;
  background: #fafafa;
  border: 1px solid #e5e5e5;
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: transform 320ms var(--ease), border-color 200ms ease, box-shadow 320ms var(--ease);
  position: relative;
  height: 100%;
}
.discovery__card:hover {
  transform: translateY(-3px);
  border-color: #0a0a0a;
  box-shadow: 0 18px 36px -16px rgba(0,0,0,0.15);
}
.discovery__num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #a3a3a3;
}
.discovery__card h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: #0a0a0a;
  margin: 0;
}
.discovery__card p {
  font-size: 14px;
  line-height: 1.5;
  color: #525252;
  margin: 0;
  flex-grow: 1;
}
.discovery__arrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  color: #0a0a0a;
  transition: transform 280ms var(--ease);
  margin-top: 4px;
}
.discovery__card:hover .discovery__arrow { transform: translateX(6px); }
.pricing__detail-link {
  display: block;
  margin-top: 24px;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: #fafafa;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.35);
  text-underline-offset: 4px;
}
.pricing__detail-link:hover { color: #ffffff; text-decoration-color: #ffffff; }
@media (max-width: 900px) {
  .discovery { padding: 80px 0; }
  .discovery__grid { grid-template-columns: 1fr; }
}

/* ----- V2 page btn overrides -----
   New pages (any with .page-head as their first section) are light-themed.
   The global .btn--ghost was designed for dark surfaces (white text), so
   here we re-color it to read on white. Featured pricing card stays dark,
   so its ghost button is opted-out via the inner selector. */
/* V2 light-theme primary button — dark fill, white text. Original
   .btn--primary used `--accent: #fff` which collapses on white pages. */
body:has(.page-head) .btn--primary,
body:has(.case-hero) .btn--primary {
  background: #0a0a0a;
  color: #fafafa;
  border-color: #0a0a0a;
}
body:has(.page-head) .btn--primary:hover,
body:has(.case-hero) .btn--primary:hover {
  background: #262626;
  border-color: #262626;
  color: #fafafa;
}
/* WhatsApp green primary (.contact__card--primary etc) overrides handled
   inline — preserve their own bg. */
body:has(.page-head) .btn--ghost,
body:has(.case-hero) .btn--ghost {
  color: #0a0a0a;
  border-color: #d4d4d4;
  background: transparent;
}
body:has(.page-head) .btn--ghost:hover,
body:has(.case-hero) .btn--ghost:hover {
  background: #0a0a0a;
  color: #fafafa;
  border-color: #0a0a0a;
}
/* Dark surfaces inside light-theme pages re-invert BOTH ghost and primary
   buttons so they stay readable. */
.pricing__card--featured .btn--ghost,
.calc__result .btn--ghost,
.case-stack .btn--ghost,
.next-slot .btn--ghost {
  color: #fafafa !important;
  border-color: rgba(255,255,255,0.3) !important;
}
.pricing__card--featured .btn--ghost:hover,
.calc__result .btn--ghost:hover,
.case-stack .btn--ghost:hover,
.next-slot .btn--ghost:hover {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.6) !important;
}
.pricing__card--featured .btn--primary,
.calc__result .btn--primary,
.next-slot .btn--primary {
  background: #fafafa !important;
  color: #0a0a0a !important;
  border-color: #fafafa !important;
}
.pricing__card--featured .btn--primary:hover,
.calc__result .btn--primary:hover,
.next-slot .btn--primary:hover {
  background: #ffffff !important;
  color: #0a0a0a !important;
}

/* ----- Responsive ----- */
@media (max-width: 900px) {
  .page-head { padding: 140px 0 60px; }
  .case-hero { padding: 130px 0 60px; }
  .case-cols { grid-template-columns: 1fr; gap: 24px; }
  .case-card--featured .case-card__link { grid-template-columns: 1fr; }
  .about__grid { grid-template-columns: 1fr; gap: 32px; }
  .about__card { position: static; }
  .next-slot__inner { grid-template-columns: 1fr; }
  .contact-form__row { grid-template-columns: 1fr; }
  .calc__grid { grid-template-columns: 1fr; gap: 24px; }
  .calc__result { position: static; }
  .calc__metrics { grid-template-columns: 1fr; }
  .case-card__metrics { gap: 16px; flex-wrap: wrap; }
  .guarantee__inner { padding: 32px 24px; }
  .how__grid { grid-template-columns: 1fr; }
}

/* Mobile menu open: the menu sheet is dark, so the nav lockup (q symbol via

   currentColor + "areqo" text, forced to #0a0a0a in styles.css) turns light

   like the burger, instead of going black on black. Closed state untouched.

   main.js marks the open state on the burger (nav__burger--open), not on

   .nav, hence :has(). */

.nav:has(.nav__burger--open) .nav__logo,

.nav:has(.nav__burger--open) .nav__logo-text {

  color: #fafafa;

  transition: color 200ms cubic-bezier(0.22, 1, 0.36, 1);

}