/* ===================================================================
   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);

  /* Typography — unified to Inter across the site. Ebisu stays scoped to
     the ornamental "areqo" wordmark (loader + hero). JetBrains Mono remains
     for code-like UI bits (hero hint strip). */
  --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.
   Logo wordmark stays hidden over the hero (no .nav--scrolled class) and
   reveals letter-by-letter once the user scrolls past 50px.
   ===================================================================== */
.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);
}
.nav__logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.nav__logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: #0a0a0a;
  display: inline-flex;
  overflow: hidden;
  line-height: 1;
}
/* Per-letter reveal — spans are inserted by JS on load. Hidden until the
   user scrolls past the hero so the brand "lands" instead of being there
   from the start. Stagger uses --i (set inline per span). */
.nav__logo-text > span {
  display: inline-block;
  opacity: 0;
  transform: translateY(110%);
  transition:
    opacity 720ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 820ms cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.nav--scrolled .nav__logo-text > span,
body.no-loader .nav__logo-text > span {
  opacity: 1;
  transform: translateY(0);
}
/* 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;
}

/* Post-loader entrance: nav links and actions slide up from below the
   nav baseline and fade in left-to-right. Hidden by default; revealed
   when the loader appends `body.is-ready` after its curtain animation. */
.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;
}
.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 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--text);
  display: block;
  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 } }

/* ---- brand bottom-right — Ebisu ExtraLight letters rise stagger ---- */
@font-face {
  font-family: 'Ebisu ExtraLight';
  src: url('./ebisu-extralight/Ebisu%20ExtraLight/Ebisu%20ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: block;
}

.hg__brand {
  position: absolute;
  bottom: 24px;
  right: 32px;
  z-index: 30;
  display: flex;
  align-items: baseline;
  gap: 14px; /* separation between letters */
  font-family: 'Ebisu ExtraLight', system-ui, sans-serif;
  font-weight: 200;
  font-size: clamp(96px, 11vw, 156px); /* bigger */
  line-height: 1;
  color: #0a0a0a;
  pointer-events: none;
  user-select: none;
  overflow: hidden; /* clip rising letters before entry */
  padding-top: 90px;
}
.hg__brand span {
  display: inline-block;
  opacity: 0;
  transform: translateY(110px);
}
/* Brand letters only rise once the curtain has fully opened — the body
   gets `is-ready` from main.js after the loader's exit animation ends. */
body.is-ready .hg__brand span {
  animation: hg-brand-rise 950ms cubic-bezier(.2, .8, .2, 1) forwards;
  animation-delay: calc(var(--i) * 500ms);
}
@keyframes hg-brand-rise {
  0%   { opacity: 0; transform: translateY(110px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
  .hg__brand { right: 20px; gap: 8px; padding-top: 60px; }
}

/* prefers-reduced-motion: skip stagger */
@media (prefers-reduced-motion: reduce) {
  .hg__brand span {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ---- 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 {
  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%),
    linear-gradient(to bottom, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 12%),
    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%);
}
.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;
  transform: rotateX(55deg) rotateY(0deg) rotateZ(-45deg);
  transform-style: preserve-3d;
}
.marquee__col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  position: relative;
}
.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; }
}

/* ===================================================================
   LOADER — full-viewport curtain reveal with "areqo" wordmark.
   Two panels meet in the centre, slide apart on window.load.
   =================================================================== */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
}
.loader__panel {
  position: absolute;
  top: 0;
  width: 50.5%; /* small overlap to hide hairline seam */
  height: 100%;
  background: #0A0A0A;
  transition: transform 1100ms cubic-bezier(0.77, 0, 0.18, 1);
  will-change: transform;
}
.loader__panel--left  { left: 0; }
.loader__panel--right { right: 0; }
.loader.is-open .loader__panel--left  { transform: translateX(-101%); }
.loader.is-open .loader__panel--right { transform: translateX(101%); }

/* 4-Corner Magnetic Assembly: each letter flies in from a distinct screen
   edge with 3D Y-axis rotation, converging at the center to form "areqo".
   After lock-in, each letter drifts with independent micro-rotation while
   the page finishes loading. Exit via handoff (JS, indexv4 — lands on
   .hg__brand inside the hero title with matching font, just color flips
   white → black via curtain reveal) or evaporate (ll-exit fallback). */
.loader__brand {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  /* Elegant Ebisu ExtraLight ornamental brand mark. Font mismatch with the
     hero Inter Bold destination is hidden by JS crossfade: loader fades
     OUT during the last 200ms of travel WHILE hero brand fades IN at the
     same coords. Both visible briefly → user perceives a font morph, not
     a jarring swap. See runMagneticHandoff in main.js. */
  font-family: 'Ebisu ExtraLight', 'Inter', system-ui, sans-serif;
  font-weight: 200;
  font-size: clamp(80px, 10vw, 160px);
  line-height: 1;
  color: #FAFAFA;
  letter-spacing: 0.02em;
  z-index: 2;
  display: flex;
  gap: 0.04em;
}

/* Hero title "areqo" handoff target — distinct class from the bottom-right
   .hg__brand wordmark to avoid style collision. Slightly larger than the
   rest of the title (1.08em) so the brand word reads as the focal element
   instead of melting into "diseña automatiza". Long slow opacity fade so
   the white→black handoff transition feels velvety, not flicker-snap. */
.hg__title-brand {
  display: inline-block;
  opacity: 0;
  transition: opacity 1100ms cubic-bezier(0.4, 0, 0.2, 1);
  font: inherit;
  color: inherit;
  line-height: 1;
  font-size: 1.08em;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.hg__title-brand.hg__title-brand--revealed { opacity: 1; }
.hg__title-brand > span { display: inline-block; }
/* Quiet Rise: opacity 0→1 + 8px translateY. Cero blur, cero clip-path,
   cero filtros costosos. Solo transform+opacity = GPU smooth absoluto.
   Apple/Linear-style restraint — la confianza en la quietud es premium. */
.loader__brand .ll {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  will-change: transform, opacity;
}

/* Phase 1: RISE (stagger 80ms) + Phase 2: DRIFT (sub-perceptible loop) */
.loader.font-ready .loader__brand .ll {
  animation:
    ll-rise 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards,
    ll-drift 5800ms ease-in-out infinite alternate;
  animation-delay:
    calc(var(--i, 0) * 80ms),
    calc(900ms + var(--i, 0) * 180ms);
}

@keyframes ll-rise {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Drift while waiting — barely perceptible micro-breath, no blur */
@keyframes ll-drift {
  0%   { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-1.5px); opacity: 0.92; }
}

/* Fallback exit: evaporate upward (used when body lacks data-loader="handoff") */
.loader.is-leaving .loader__brand .ll {
  animation: ll-exit 820ms cubic-bezier(.55, 0, .68, .85) forwards;
  animation-delay: calc(var(--i, 0) * 65ms);
}

@keyframes ll-exit {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-110px) scale(1.45);
    filter: blur(26px);
  }
}

/* On is-open: only fade brand if NOT in handoff mode (handoff manages opacity per letter) */
body:not([data-loader="handoff"]) .loader.is-open .loader__brand {
  opacity: 0;
  transition: opacity 200ms ease;
}

/* Stop the page from scrolling while the curtain is closed */
body.loader-active { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .loader__panel,
  .loader__brand { transition: none; animation: none; }
}

/* ===================================================================
   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.
   =================================================================== */

/* Nav logo wordmark stays dark even if .nav__logo anchor inherits white */
.nav__logo,
.nav__logo-text { 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; }
}