/* ============================================================
   NORVEXS — styles.css
   Archetype: Glassmorphism Modern (monochrome variant)
   ============================================================ */

/* ----- 1. Tokens ----- */
:root {
  --bg:          #fafafa;
  --bg-2:        #f3f3f1;
  --paper:       #ffffff;
  --ink:         #0a0a0a;
  --ink-soft:    #1f1f1f;
  --ink-mid:     #404040;
  --ink-mute:    #6b6b6b;
  --ink-faint:   #9a9a9a;
  --line:        rgba(10, 10, 10, 0.08);
  --line-strong: rgba(10, 10, 10, 0.16);
  --glass:       rgba(255, 255, 255, 0.55);
  --glass-2:     rgba(255, 255, 255, 0.35);
  --glass-edge:  rgba(255, 255, 255, 0.75);
  --warm:        #f5d6c0;   /* subtle peach for mesh accent */
  --cool:        #c9d6f0;   /* subtle blue */
  --mute-mesh:   #ecebe8;

  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --serif: "Fraunces", "Times New Roman", serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --radius-sm: 10px;
  --radius:    18px;
  --radius-lg: 28px;
  --radius-xl: 40px;

  --gutter:    clamp(1.25rem, 4vw, 2.5rem);
  --max-w:     1280px;
}

@property --mesh-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --mesh-x     { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --mesh-y     { syntax: "<percentage>"; inherits: false; initial-value: 50%; }

/* ----- 2. Reset & base ----- */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
  position: relative;
  min-height: 100vh;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
input, textarea, select, button { font-family: inherit; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.05; letter-spacing: -0.025em; font-weight: 600; }
::selection { background: var(--ink); color: var(--bg); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: fixed; top: -100px; left: 1rem;
  padding: .6rem 1rem; background: var(--ink); color: var(--bg);
  z-index: 9999; border-radius: 8px; font-weight: 500;
}
.skip-link:focus { top: 1rem; }

/* Screen-reader only — visually hidden but available to bots and AT */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ----- 3. Background mesh & grain (global) ----- */
.bg-mesh {
  position: fixed; inset: -10%;
  z-index: -2;
  background:
    radial-gradient(60% 50% at var(--mesh-x) var(--mesh-y),
      rgba(245, 214, 192, 0.45), transparent 65%),
    radial-gradient(50% 40% at calc(100% - var(--mesh-x)) calc(100% - var(--mesh-y)),
      rgba(201, 214, 240, 0.40), transparent 65%),
    radial-gradient(40% 35% at 30% 80%,
      rgba(236, 235, 232, 0.6), transparent 60%);
  filter: blur(80px) saturate(115%);
  opacity: 0.85;
  animation: meshDrift 28s ease-in-out infinite;
  pointer-events: none;
}
@keyframes meshDrift {
  0%, 100% { --mesh-x: 30%; --mesh-y: 28%; }
  50%      { --mesh-x: 70%; --mesh-y: 70%; }
}

.bg-grain {
  position: fixed; inset: 0;
  z-index: -1; pointer-events: none;
  opacity: 0.045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}

/* ----- Scroll progress ----- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 200;
  background: rgba(10, 10, 10, 0.04);
  pointer-events: none;
}
.scroll-progress span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--ink) 0%, var(--ink-mid) 60%, transparent 100%);
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform .08s linear;
}

/* ----- 4. Splash ----- */
.splash {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--bg);
  display: grid; place-items: center;
  color: var(--ink);
  transition: opacity .9s var(--ease-out), clip-path 1.1s var(--ease-soft);
  animation: splashSafety .01s 4.5s forwards;
}
.splash.is-out {
  opacity: 0; pointer-events: none;
  clip-path: inset(0 0 100% 0);
}
@keyframes splashSafety {
  to { opacity: 0; pointer-events: none; clip-path: inset(0 0 100% 0); }
}
.splash-inner { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.splash-logo { width: 64px; height: 64px; animation: splashSpin 6s linear infinite; }
@keyframes splashSpin { to { transform: rotate(360deg); } }
.splash-name {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.32em;
  font-size: 14px;
  color: var(--ink-mid);
}

/* ----- 5. Cursor ----- */
.cursor {
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9998;
  display: none;
  opacity: 0;
  transition: opacity .25s var(--ease-out);
}
.cursor.is-ready { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .cursor { display: block; }
}
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; pointer-events: none; will-change: transform;
}
.cursor-dot {
  width: 6px; height: 6px; margin: -3px;
  background: var(--ink); border-radius: 50%;
}
.cursor-ring {
  width: 32px; height: 32px; margin: -16px;
  border: 1px solid rgba(10,10,10,0.32); border-radius: 50%;
  transition: width .35s var(--ease-out), height .35s var(--ease-out), margin .35s var(--ease-out), background .25s, border-color .25s;
}
.cursor.is-interactive .cursor-ring {
  width: 54px; height: 54px; margin: -27px;
  border-color: rgba(10,10,10,0.55);
  background: rgba(10,10,10,0.04);
}

/* ----- 6. Container ----- */
.section, .nav, .hero-inner, .hero-trust, .footer-grid, .footer-bottom {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ----- 7. Buttons ----- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.85rem 1.3rem;
  border-radius: 999px;
  font-weight: 500; font-size: 0.94rem;
  letter-spacing: -0.005em;
  transition: transform .45s var(--ease-soft), box-shadow .45s var(--ease-soft), background .35s, color .35s, border-color .35s;
  white-space: nowrap;
  position: relative;
  isolation: isolate;
}
.btn svg { width: 14px; height: 14px; transition: transform .4s var(--ease-soft); }
.btn:hover svg { transform: translateX(3px); }

.btn-primary {
  background: var(--ink);
  color: var(--bg);
  box-shadow: 0 4px 14px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.08);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 48px rgba(0,0,0,0.22), 0 8px 18px rgba(0,0,0,0.14);
}

.btn-ghost {
  background: var(--glass);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}
@supports not (backdrop-filter: blur(10px)) {
  .btn-ghost { background: rgba(255,255,255,0.85); }
}
.btn-ghost:hover {
  background: var(--paper);
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -10px rgba(10,10,10,0.18);
}

.btn-lg { padding: 1.05rem 1.7rem; font-size: 0.98rem; }

.magnetic-inner {
  display: inline-flex; align-items: center; justify-content: center; gap: inherit;
  will-change: transform;
  transition: transform .8s var(--ease-soft);
}

/* ----- 8. Glass primitive ----- */
.glass {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-lg);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 30px 80px -30px rgba(10,10,10,0.18),
    0 12px 30px -20px rgba(10,10,10,0.10);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}
@supports not (backdrop-filter: blur(10px)) {
  .glass { background: rgba(255,255,255,0.92); }
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0;
  left: 0; right: 0;
  z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding-block: 0.9rem;
  transition: padding .35s var(--ease-out);
}
.nav::before {
  content: ""; position: absolute; inset: 0.5rem var(--gutter);
  background: rgba(250,250,250,0.55);
  border: 1px solid var(--line);
  border-radius: 999px;
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  z-index: -1;
  opacity: 0;
  transition: opacity .4s var(--ease-out), inset .4s var(--ease-out);
}
.nav.is-scrolled::before { opacity: 1; }
.nav.is-scrolled { padding-block: 0.7rem; }

.nav-brand {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-weight: 700; letter-spacing: 0.18em; font-size: 13px;
  padding: 0.4rem 0.8rem;
}
.nav-logo { width: 22px; height: 22px; }
@media (max-width: 720px) {
  /* Slightly more brand presence on mobile (CTA is hidden here) */
  .nav-brand { font-size: 14px; gap: 0.5rem; padding: 0.4rem 0.6rem; }
  .nav-logo { width: 26px; height: 26px; }
}
.nav-wordmark { display: inline-block; }

.nav-links {
  display: none;
  align-items: center; gap: 0.4rem;
}
@media (min-width: 960px) {
  .nav-links { display: inline-flex; }
}
.nav-link {
  position: relative;
  padding: 0.5rem 0.85rem;
  font-size: 0.92rem;
  color: var(--ink-mid);
  transition: color .25s;
  border-radius: 999px;
}
.nav-link::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: 6px;
  height: 1px; background: var(--ink);
  transition: left .35s var(--ease-out), right .35s var(--ease-out);
}
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after { left: 0.85rem; right: 0.85rem; }

.nav-cta {
  display: none;
  padding: 0.65rem 1.1rem;
  font-size: 0.88rem;
}
@media (min-width: 720px) { .nav-cta { display: inline-flex; } }

/* ----- Language toggle (ES / EN) ----- */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding: 3px;
  margin-right: 0.4rem;
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.05);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .25s, background .25s;
  -webkit-tap-highlight-color: transparent;
}
.lang-toggle:hover {
  border-color: var(--line-strong);
  background: rgba(10, 10, 10, 0.07);
}
/* Sliding pill background highlighting the active language */
.lang-track {
  position: absolute;
  top: 3px; bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: var(--ink);
  transition: transform .4s var(--ease-soft);
  pointer-events: none;
  box-shadow: 0 4px 10px -4px rgba(10, 10, 10, 0.3);
}
.lang-toggle[data-current="en"] .lang-track {
  transform: translateX(100%);
}
.lang-opt {
  position: relative;
  z-index: 1;
  padding: 5px 11px;
  color: var(--ink-mute);
  transition: color .3s var(--ease-out);
  line-height: 1;
}
.lang-toggle[data-current="es"] .lang-opt[data-lang="es"],
.lang-toggle[data-current="en"] .lang-opt[data-lang="en"] {
  color: var(--bg);
}
@media (max-width: 540px) {
  .lang-toggle { font-size: 9px; padding: 2px; }
  .lang-opt { padding: 4px 8px; }
}

.nav-toggle {
  display: inline-flex; flex-direction: column; gap: 5px;
  padding: 0.6rem;
}
@media (min-width: 960px) { .nav-toggle { display: none; } }
.nav-toggle span {
  display: block; width: 22px; height: 1.5px; background: var(--ink);
  transition: transform .3s, opacity .3s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

/* Mobile menu */
.nav-mobile {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(250,250,250,0.95);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  display: grid; place-items: center;
  opacity: 0; pointer-events: none;
  transition: opacity .4s var(--ease-out);
}
.nav-mobile.is-open { opacity: 1; pointer-events: auto; }
.nav-mobile nav {
  display: flex; flex-direction: column; gap: 1.4rem;
  text-align: center;
}
.nav-mobile a {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(2rem, 8vw, 3rem);
  font-weight: 400;
}

/* ============================================================
   HERO 3D COMPASS ORB
   ============================================================ */
.hero-orb {
  position: relative;
  width: clamp(280px, 32vw, 420px);
  aspect-ratio: 1;
  margin: 0 auto;
  pointer-events: none;
  perspective: 680px;
  perspective-origin: 50% 50%;
  color: var(--ink);
  filter: drop-shadow(0 22px 40px rgba(10,10,10,0.08));
  animation: orbAppear 1.8s var(--ease-out) both;
}
@keyframes orbAppear {
  /* Progressive fade-in only — no scaling/rotating the whole orb.
     The needle does its own "compass calibration" rotation on load
     (driven by JS spring kick) which provides the entry motion. */
  from { opacity: 0; }
  to   { opacity: 1; }
}
.orb-halo {
  position: absolute; inset: -18%;
  background:
    radial-gradient(45% 45% at 50% 45%, rgba(245,214,192,0.70), transparent 65%),
    radial-gradient(40% 40% at 30% 60%, rgba(201,214,240,0.55), transparent 70%),
    radial-gradient(30% 30% at 70% 30%, rgba(255,255,255,0.55), transparent 70%);
  filter: blur(42px);
  z-index: -1;
  pointer-events: none;
  opacity: 0.95;
  animation: orbHaloPulse 11s ease-in-out infinite;
}
@keyframes orbHaloPulse {
  0%, 100% { transform: scale(1) translate(0, 0); }
  50%      { transform: scale(1.08) translate(2%, -2%); }
}
.orb-stage {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  /* Mouse parallax only — no scroll-driven block rotation */
  transform:
    rotateX(calc(var(--orb-tilt-x, 0deg) + 8deg))
    rotateY(var(--orb-tilt-y, 0deg));
  transition: transform .9s var(--ease-soft);
  will-change: transform;
  opacity: 0.88;
  /* Multiply blend lets the warm/cool aura tint the dark rings —
     but ONLY the stage. The foreground (needle + pivot) stays opaque. */
  mix-blend-mode: multiply;
}
.orb-stage > * {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}

/* Foreground layer — opaque needle + pivot, NOT multiplied.
   Inherits tilt vars from .hero-orb so it follows the same mouse
   parallax as the stage. */
.orb-foreground {
  position: absolute; inset: 0;
  pointer-events: none;
  transform-style: preserve-3d;
  /* Mouse parallax only — matches stage */
  transform:
    rotateX(calc(var(--orb-tilt-x, 0deg) + 8deg))
    rotateY(var(--orb-tilt-y, 0deg));
  transition: transform .9s var(--ease-soft);
  will-change: transform;
}
.orb-fg-layer {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  opacity: 0;
  animation-fill-mode: both;
}
.orb-foreground .orb-needle {
  filter: drop-shadow(0 3px 10px rgba(10,10,10,0.18));
  transform-style: preserve-3d;
  /* Aim driven by JS spring physics — points at cursor when nearby,
     oscillates back to north when the cursor leaves the field.
     Bank (rotateY) adds 3D inertia: the needle leans out of the
     screen plane when it spins, like a real gyroscopic instrument. */
  transform:
    rotateZ(var(--needle-aim, 0deg))
    rotateY(var(--needle-bank, 0deg))
    rotateX(var(--needle-pitch, 0deg));
  transform-origin: 50% 50%;
  animation: orbRingIn 1s var(--ease-out) 0.55s forwards;
}
.orb-foreground .orb-pivot {
  /* Pushed forward in 3D space so it's ALWAYS rendered above the needle.
     translateZ baked into keyframes so the pulse animation can't override it. */
  transform: translateZ(35px);
  animation:
    orbRingIn 1.2s var(--ease-out) 0.4s forwards,
    orbPivotPulse 4.5s ease-in-out 2s infinite;
}
.orb-glow {
  background:
    radial-gradient(50% 50% at 50% 50%, rgba(245,214,192,0.6), transparent 65%),
    radial-gradient(40% 40% at 30% 60%, rgba(201,214,240,0.5), transparent 70%);
  filter: blur(14px);
  transform: translateZ(-30px);
  opacity: 0.85;
}
/* ----- Compass-instrument layers ----- */
.orb-layer {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  opacity: 0;
  animation-fill-mode: both;
  transform-origin: 50% 50%;
}

/* 2D decorative — outermost dashed thin rim, slow Y spin */
.orb-rim-outer {
  animation:
    orbSpinY 95s linear infinite,
    orbRingIn 1.2s var(--ease-out) 0.05s forwards;
}

/* True-3D orbital rings: each tilted in its own plane + spins on its axis
   Parent .orb-orbital handles the spin, inner svg holds the static tilt */
.orb-orbital {
  transform-style: preserve-3d;
}
.orb-orbital svg {
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
}
/* Atomic orbitals — STATIC geometric composition at 0° / 60° / 120°.
   Classic atom symbol. Only a barely-perceptible "breathing" animation
   on each ring's ry so the composition isn't 100% lifeless — you only
   notice it if you stare. Different cycles + phase offsets per ring
   keep them out of sync without any visible spinning. */
.orb-orbital-1 {
  transform: rotateZ(0deg);
  animation: orbRingIn 1.2s var(--ease-out) 0.12s forwards;
}
.orb-orbital-2 {
  transform: rotateZ(60deg);
  animation: orbRingIn 1.2s var(--ease-out) 0.22s forwards;
}
.orb-orbital-3 {
  transform: rotateZ(120deg);
  animation: orbRingIn 1.2s var(--ease-out) 0.32s forwards;
}

/* Breathing animation — visible but never spinning. Each ring expands
   and contracts its vertical radius on its own slow cycle, with phase
   offsets so they never sync. Wider amplitude than before so the
   pulse is clearly noticeable but still elegant. */
.orb-orbital-1 ellipse {
  animation: orbBreathe1 6s ease-in-out infinite;
}
.orb-orbital-2 ellipse {
  animation: orbBreathe2 7.5s ease-in-out infinite -2.5s;
}
.orb-orbital-3 ellipse {
  animation: orbBreathe3 9s ease-in-out infinite -5s;
}
@keyframes orbBreathe1 {
  0%, 100% { ry: 32; }
  50%      { ry: 18; }
}
@keyframes orbBreathe2 {
  0%, 100% { ry: 20; }
  45%      { ry: 34; }
  78%      { ry: 24; }
}
@keyframes orbBreathe3 {
  0%, 100% { ry: 30; }
  55%      { ry: 16; }
}
/* Same breathing on the inner reference circle — slightly different
   cycle so the whole composition feels alive without ever syncing. */
.orb-inner-rim circle {
  animation: orbInnerBreathe 7s ease-in-out infinite -1.5s;
}
@keyframes orbInnerBreathe {
  0%, 100% { r: 60; }
  50%      { r: 70; }
}

/* Static face references */
.orb-bezel,
.orb-inner-rim,
.orb-north {
  animation: orbRingIn 1.2s var(--ease-out) 0.4s forwards;
}

/* Center pivot — subtle pulse, like the compass is "alive" */
@keyframes orbPivotPulse {
  0%, 100% { transform: translateZ(35px) scale(1); }
  50%      { transform: translateZ(35px) scale(1.08); }
}

@keyframes orbSpinY { to { transform: rotateY(360deg); } }
@keyframes orbSpinX { to { transform: rotateX(360deg); } }
@keyframes orbSpinZ { to { transform: rotateZ(360deg); } }
@keyframes orbRingIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Compass needle: search-and-settle pattern, like a real compass */
@keyframes orbNeedleSearch {
  0%   { transform: rotateZ(0deg); }
  18%  { transform: rotateZ(-14deg); }
  32%  { transform: rotateZ(9deg); }
  46%  { transform: rotateZ(-5deg); }
  60%  { transform: rotateZ(3deg); }
  74%  { transform: rotateZ(-1.5deg); }
  100% { transform: rotateZ(0deg); }
}

@media (max-width: 960px) {
  .hero-orb {
    width: clamp(130px, 34vw, 170px);
    margin: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .orb-ring-1, .orb-ring-2, .orb-ring-3, .orb-ring-4, .orb-ring-5, .orb-ring-6 {
    animation: none;
  }
  .hero-orb { animation: none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  padding-top: clamp(7rem, 14vh, 10rem);
  padding-bottom: clamp(3rem, 7vh, 5rem);
  /* Match the side gutter used by every other .section so the hero
     content doesn't touch the viewport edges on small screens. */
  padding-inline: var(--gutter);
  overflow: visible;
}
@media (max-width: 720px) {
  /* Tighter top padding on mobile so the compass emblem + headline
     fit comfortably above the fold */
  .hero { padding-top: 4.2rem; padding-bottom: 2rem; }
  .hero-text { gap: 1rem; }
  .hero-grid { gap: 0.8rem; }
}
.hero-aura {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}
.hero-aura::before,
.hero-aura::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 920px; height: 920px;
  border-radius: 50%;
  transform: translateY(-50%);
  filter: blur(90px);
  opacity: 0.85;
}
.hero-aura::before {
  /* Warm bloom behind the orb (right) */
  right: -8%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(245,214,192,0.55), transparent 70%);
  animation: heroAuraWarmDrift 14s ease-in-out infinite;
}
.hero-aura::after {
  /* Cool wash behind the text (left), reaches the orb edge */
  left: -10%;
  background: radial-gradient(50% 50% at 60% 50%, rgba(201,214,240,0.42), transparent 70%);
  animation: heroAuraCoolDrift 16s ease-in-out infinite;
}
@keyframes heroAuraWarmDrift {
  0%, 100% { transform: translate(0, -50%) scale(1); }
  50%      { transform: translate(-3%, -48%) scale(1.04); }
}
@keyframes heroAuraCoolDrift {
  0%, 100% { transform: translate(0, -50%) scale(1); }
  50%      { transform: translate(3%, -52%) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-aura::before, .hero-aura::after { animation: none; }
}

/* Two-column grid: text left, 3D visual right (stacked on mobile) */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  max-width: 1080px;
  margin-inline: auto;
}
@media (min-width: 960px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(1.5rem, 2.5vw, 2.5rem);
    align-items: center;
  }
}

.hero-text {
  display: flex; flex-direction: column;
  gap: 1.3rem;
  text-align: left;
  max-width: 540px;
}
@media (max-width: 959px) {
  .hero-text {
    text-align: center;
    align-items: center;
    max-width: none;
    width: 100%;
  }
  /* On mobile force the hero-sub to wrap inside the visible area
     (it previously could read its huge max-width and act unbounded). */
  .hero-sub {
    max-width: min(46ch, 100%);
    margin-inline: auto;
  }
  /* Stats row must span full width so its 3 columns aren't squeezed */
  .hero-stats { width: 100%; }
}

.hero-kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mid);
  display: inline-flex; align-items: center; gap: 0.8rem;
  min-height: 1lh;
  white-space: nowrap;
}
.hero-kicker-rule {
  position: relative;
  display: inline-block;
  width: 32px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ink-mid));
}
.hero-kicker-rule::after {
  content: "";
  position: absolute;
  right: -3px; top: 50%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ink);
  transform: translateY(-50%);
}
@media (max-width: 959px) {
  .hero-kicker { justify-content: center; }
}

.hero-title {
  font-size: clamp(2.15rem, 5.4vw, 4.6rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.038em;
  text-wrap: balance;
  margin-top: 0.2rem;
  /* Reserve room for the longest language so swapping doesn't reflow
     the layout below. Matches the Spanish max line count at every bp. */
  min-height: 3lh;
}
@media (min-width: 960px) {
  .hero-title { min-height: 2lh; }
}
.hero-title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  color: var(--ink);
  padding-inline: 0.04em;
}

.hero-sub {
  color: var(--ink-mid);
  font-size: clamp(1.02rem, 1.25vw, 1.15rem);
  line-height: 1.65;
  max-width: 46ch;
  /* Lock height to fit the longest language; prevents layout shift on
     ES↔EN toggle since the wrapping differs slightly. */
  min-height: 3lh;
}
@media (min-width: 960px) {
  .hero-sub { min-height: 2lh; }
}

.hero-actions {
  display: flex; flex-wrap: wrap; gap: 0.7rem;
  margin-top: 0.5rem;
}
@media (max-width: 959px) {
  .hero-actions { justify-content: center; }
}
/* On small screens stack buttons vertically so the area takes the same
   height regardless of language (otherwise EN fits in 1 row, ES wraps
   to 2, and everything below shifts on lang toggle). */
@media (max-width: 540px) {
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .hero-actions .btn {
    width: 100%;
    max-width: 280px;
    align-self: center;
    justify-content: center;
  }
}

/* Apple-spec-style stats row at bottom of text column */
.hero-stats {
  list-style: none; padding: 0; margin: 0.6rem 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  gap: 0;
}
.hero-stats li {
  display: flex; flex-direction: column;
  gap: 0.3rem;
  padding-right: 1.2rem;
  min-width: 0;
}
.hero-stats li + li {
  padding-left: 1.2rem;
  border-left: 1px solid var(--line);
}
.hs-value {
  font-family: var(--sans);
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 0.45rem;
  line-height: 1.2;
}
.hs-value em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.78em;
  color: var(--ink-mid);
  margin-left: 2px;
  letter-spacing: 0;
}
.hs-label {
  font-size: 0.76rem;
  color: var(--ink-mute);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.35;
  /* Lock to 2 lines so toggling languages doesn't change stats height */
  min-height: 2lh;
}
.hs-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 4px rgba(16,185,129,0.14);
  animation: pulseDot 3s ease-in-out infinite;
  flex: 0 0 7px;
}
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(16,185,129,0.14); }
  50%      { box-shadow: 0 0 0 8px rgba(16,185,129,0.05); }
}
@media (max-width: 540px) {
  .hero-stats { grid-template-columns: 1fr; gap: 0.9rem; }
  .hero-stats li { padding-right: 0; }
  .hero-stats li + li {
    padding-left: 0; border-left: 0;
    padding-top: 0.9rem; border-top: 1px solid var(--line);
  }
}

/* Visual column — orb in flow, centered */
.hero-visual {
  position: relative;
  display: grid; place-items: center;
  min-height: 300px;
}
@media (min-width: 960px) {
  .hero-visual { min-height: 440px; }
}
@media (max-width: 959px) {
  /* On mobile the compass goes FIRST as the brand emblem of the hero,
     compact, so it's immediately visible above the fold */
  .hero-visual {
    order: -1;
    min-height: 195px;
    width: 100%;
    /* Push the orb to the BOTTOM of its container so all the empty
       space sits above the orb (between nav and orb). This way the
       margin above the orb is bigger than below it — clearer hierarchy
       and the kicker text below stays close to the orb. */
    place-items: end center;
    margin-bottom: 0.5rem;
  }
}

/* Hero trust */
.hero-trust {
  margin: clamp(1.4rem, 4vh, 4rem) auto 0;
  max-width: 1080px;
  display: flex; flex-direction: column; align-items: center; gap: 0.8rem;
  text-align: center;
}
.trust-label {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-faint);
}
.trust-track {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.6rem 1rem;
  color: var(--ink-mid);
  font-size: 0.95rem;
  font-weight: 500;
}
.trust-track > span:nth-child(even) { color: var(--ink-faint); }

/* New chip-grid stack */
.trust-stack {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.55rem;
  max-width: 760px;
}
@media (min-width: 720px) {
  /* Desktop & tablet: 8 chips on a single line */
  .trust-stack { flex-wrap: nowrap; max-width: none; }
}
.stack-chip {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: default;
  transition:
    background .3s var(--ease-out),
    color .3s var(--ease-out),
    border-color .3s,
    transform .35s var(--ease-soft),
    box-shadow .35s var(--ease-soft);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.stack-chip svg {
  width: 14px; height: 14px;
  flex: 0 0 14px;
  color: var(--ink-mute);
  transition: color .3s var(--ease-out), transform .35s var(--ease-soft);
}
.stack-chip:hover {
  border-color: var(--ink);
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -14px rgba(10, 10, 10, 0.15);
}
.stack-chip:hover svg {
  color: var(--ink);
  transform: rotate(-8deg) scale(1.1);
}
@media (max-width: 540px) {
  .trust-stack { gap: 0.4rem; }
  .stack-chip { font-size: 0.8rem; padding: 0.42rem 0.8rem; }
}

/* ============================================================
   SECTIONS — shared
   ============================================================ */
.section {
  padding-block: clamp(4rem, 10vh, 7rem);
  position: relative;
}
.section-head {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 1rem;
  margin-bottom: clamp(2.5rem, 5vh, 4rem);
  max-width: 720px;
}
.kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-mute);
}
.section-title {
  font-size: clamp(2.2rem, 4.4vw, 3.2rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.04;
  max-width: 20ch;
}
.section-title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 100;
}
.section-lead {
  color: var(--ink-mid);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  max-width: 56ch;
}

/* ============================================================
   SERVICIOS — bento-like
   ============================================================ */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(220px, auto);
  }
  .service:nth-child(1) { grid-column: span 7; }
  .service:nth-child(2) { grid-column: span 5; }
  .service:nth-child(3) { grid-column: span 4; }
  .service:nth-child(4) { grid-column: span 4; }
  .service:nth-child(5) { grid-column: span 4; }
  .service:nth-child(6) { grid-column: span 6; }
  .service:nth-child(7) { grid-column: span 6; }
}

.service {
  position: relative;
  padding: 1.9rem 1.7rem 1.7rem;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.62);
  border: 1px solid var(--glass-edge);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 24px 48px -28px rgba(10,10,10,0.14);
  display: flex; flex-direction: column; gap: 0.55rem;
  overflow: hidden;
  transition: transform .55s var(--ease-soft), box-shadow .55s var(--ease-soft), border-color .35s;
  isolation: isolate;
}
@supports not (backdrop-filter: blur(10px)) {
  .service { background: rgba(255,255,255,0.94); }
}
.service::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%),
      rgba(245,214,192,0.38), transparent 70%);
  opacity: 0;
  transition: opacity .45s var(--ease-out);
  pointer-events: none;
  z-index: -1;
}
.service:hover {
  transform: translateY(-5px);
  border-color: var(--line-strong);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 56px 100px -30px rgba(10,10,10,0.22),
    0 22px 44px -22px rgba(10,10,10,0.14);
}
.service:hover::before { opacity: 1; }

/* Glyph icon — small geometric mark, inverts to ink-on-bg on hover */
.service-glyph {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(10,10,10,0.04);
  color: var(--ink);
  margin-bottom: 0.7rem;
  transition: background .4s var(--ease-out), color .4s, transform .55s var(--ease-soft);
}
.service-glyph svg { width: 22px; height: 22px; display: block; }
.service:hover .service-glyph {
  background: rgba(10,10,10,0.04);
  color: var(--ink);
  border: 1px solid var(--ink);
  transform: rotate(-6deg) scale(1.06);
}

.service-n {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
}
.service h3 {
  font-size: clamp(1.25rem, 1.9vw, 1.55rem);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.15;
  margin-top: 0.1rem;
}
.service p {
  color: var(--ink-mid);
  font-size: 0.93rem;
  line-height: 1.55;
  max-width: 44ch;
  margin-top: 0.2rem;
}
.service-tags {
  margin-top: auto;
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  padding-top: 1rem;
}
.service-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  padding: 0.32rem 0.6rem;
  border-radius: 6px;
  background: rgba(10,10,10,0.05);
  color: var(--ink-soft);
  border: 1px solid transparent;
  transition: background .3s, color .3s, border-color .3s, transform .35s var(--ease-soft);
}
.service:hover .service-tag {
  background: rgba(10,10,10,0.06);
}

/* Mobile compact mode — horizontal list layout, ~60% shorter cards.
   On phones the user scrolls forever past 7 vertical cards; here each
   card becomes a one-glance horizontal item: icon left, title +
   description right. Number, tags and decorative halo are dropped. */
@media (max-width: 540px) {
  .services-grid { gap: 0.55rem; }
  .service {
    padding: 0.95rem 1.05rem;
    display: grid;
    grid-template-columns: 38px 1fr;
    column-gap: 0.85rem;
    row-gap: 0.25rem;
    align-items: start;
    min-height: 0;
  }
  .service::before { display: none; }
  .service-n { display: none; }
  .service-glyph {
    width: 38px; height: 38px;
    grid-row: 1 / span 2;
    margin: 0;
    border-radius: 10px;
    align-self: start;
  }
  .service-glyph svg { width: 19px; height: 19px; }
  .service h3 {
    grid-column: 2;
    font-size: 1.02rem;
    line-height: 1.2;
    margin-top: 0.1rem;
  }
  .service p {
    grid-column: 2;
    font-size: 0.86rem;
    line-height: 1.45;
    margin-top: 0;
    max-width: none;
  }
  .service-tags { display: none; }
  .service:hover .service-glyph {
    transform: none;
    border: 0;
    background: rgba(10,10,10,0.04);
    color: var(--ink);
  }
}

.service-tag:hover {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
  transform: translateY(-1px);
}

/* ============================================================
   PROCESO
   ============================================================ */
.process-list {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 720px) {
  .process-list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .process-list { grid-template-columns: repeat(4, 1fr); }
}
.process-item {
  padding: 1.8rem 1.4rem 2rem;
  border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 0.7rem;
  position: relative;
  transition: background .35s;
}
@media (min-width: 720px) and (max-width: 1023px) {
  .process-item:nth-child(2n+1) { border-right: 1px solid var(--line); }
}
@media (min-width: 1024px) {
  .process-item:not(:last-child) { border-right: 1px solid var(--line); }
}
.process-item:hover { background: rgba(255,255,255,0.5); }
.process-n {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.05em;
}
.process-item h3 {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.process-item p {
  color: var(--ink-mid);
  font-size: 0.94rem; line-height: 1.55;
}

/* ============================================================
   PLANES / PRICING
   ============================================================ */
.section-pricing { padding-block: clamp(4rem, 9vh, 6.5rem); }

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  max-width: 1080px;
  margin-inline: auto;
}
@media (min-width: 720px) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
}

.pricing-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 2.1rem 1.9rem 1.9rem;
  border-radius: var(--radius-lg);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 24px 48px -30px rgba(10,10,10,0.16),
    0 10px 24px -20px rgba(10,10,10,0.08);
  transition:
    transform .55s var(--ease-soft),
    box-shadow .55s var(--ease-soft),
    border-color .35s;
  isolation: isolate;
  overflow: hidden;
  min-height: 100%;
}
.pricing-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 60% at 50% 0%, rgba(245,214,192,0.22), transparent 65%);
  opacity: 0;
  transition: opacity .45s var(--ease-out);
  pointer-events: none;
  z-index: -1;
}
.pricing-card:hover {
  transform: translateY(-6px);
  border-color: var(--line-strong);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 56px 100px -30px rgba(10,10,10,0.24),
    0 22px 44px -22px rgba(10,10,10,0.14);
}
.pricing-card:hover::before { opacity: 1; }

/* Featured variant — Ecommerce pack */
.pricing-card--featured {
  background: linear-gradient(180deg, var(--paper) 0%, #fbf6ef 100%);
  border-color: rgba(10,10,10,0.18);
}
.pricing-card--featured::before { opacity: 0.55; }
.pricing-card--featured:hover::before { opacity: 1; }

/* Badge */
.pricing-badge {
  position: absolute; top: 1.3rem; right: 1.3rem;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  z-index: 2;
  font-weight: 500;
}
.pricing-badge--soft {
  background: rgba(10,10,10,0.06);
  color: var(--ink-mid);
}

/* Head */
.pricing-head {
  display: flex; flex-direction: column;
  gap: 0.5rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.4rem;
}
.pricing-glyph {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(10,10,10,0.04);
  color: var(--ink);
  margin-bottom: 0.6rem;
  transition: background .4s var(--ease-out), color .4s, transform .55s var(--ease-soft);
}
.pricing-glyph svg { width: 22px; height: 22px; }
.pricing-card:hover .pricing-glyph {
  background: rgba(10,10,10,0.04);
  color: var(--ink);
  border: 1px solid var(--ink);
  transform: rotate(-6deg) scale(1.06);
}
.pricing-kicker {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pricing-head h3 {
  font-size: clamp(1.5rem, 2.1vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.1;
  margin-top: 0.1rem;
}
.pricing-pitch {
  color: var(--ink-mid);
  font-size: 0.92rem;
  line-height: 1.55;
  margin-top: 0.4rem;
}

/* Features — list with check icons */
.pricing-features {
  list-style: none; padding: 0;
  display: flex; flex-direction: column;
  gap: 0.7rem;
  flex: 1;
  margin-bottom: 1.6rem;
}
.pricing-features li {
  display: flex; align-items: flex-start; gap: 0.7rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.45;
}
.pricing-features li::before {
  content: "";
  flex: 0 0 18px;
  width: 18px; height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  background-color: rgba(10,10,10,0.05);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><path d='M4.5 9.5 L7.5 12.5 L13.5 6' fill='none' stroke='%230a0a0a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80%;
  transition: background-color .35s, transform .4s var(--ease-soft);
}
.pricing-card:hover .pricing-features li::before {
  background-color: rgba(10,10,10,0.10);
}
.pricing-card--featured .pricing-features li::before {
  background-color: rgba(184,92,58,0.10);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><path d='M4.5 9.5 L7.5 12.5 L13.5 6' fill='none' stroke='%23a85d2c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* Tags — modular card variant */
.pricing-tags {
  list-style: none; padding: 0;
  display: flex; flex-wrap: wrap;
  gap: 0.4rem;
  flex: 1;
  margin-bottom: 1.6rem;
  align-content: flex-start;
}
.pricing-tags li {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  padding: 0.45rem 0.75rem;
  border-radius: 7px;
  background: rgba(10,10,10,0.05);
  color: var(--ink-soft);
  border: 1px solid transparent;
  transition: background .3s, color .3s, border-color .3s, transform .35s var(--ease-soft);
  cursor: default;
}
.pricing-card:hover .pricing-tags li {
  background: rgba(10,10,10,0.06);
}
.pricing-tags li:hover {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
  transform: translateY(-2px);
}

/* CTA */
.pricing-cta {
  width: 100%;
  justify-content: space-between;
  padding: 0.95rem 1.2rem;
  margin-top: auto;
}
.pricing-cta svg {
  transition: transform .4s var(--ease-soft);
}
.pricing-card:hover .pricing-cta svg {
  transform: translateX(4px);
}

/* Foot copy */
.pricing-foot {
  text-align: center;
  margin-top: 2.5rem;
  color: var(--ink-mid);
  font-size: 0.95rem;
}
.pricing-foot a {
  color: var(--ink);
  font-weight: 500;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
  transition: opacity .25s;
}
.pricing-foot a:hover { opacity: 0.65; }

/* Mobile spacing */
@media (max-width: 540px) {
  .pricing-card { padding: 1.6rem 1.4rem 1.4rem; }
  .pricing-badge { top: 1rem; right: 1rem; }
}

/* ============================================================
   TRABAJO — bento grid
   ============================================================ */
.work-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 720px) {
  .work-grid {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(260px, auto);
  }
  .work-card[data-span="wide"]   { grid-column: span 6; }
  .work-card[data-span="tall"]   { grid-column: span 3; grid-row: span 1; }
  .work-card[data-span="square"] { grid-column: span 3; }
}
@media (min-width: 1100px) {
  .work-grid {
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(280px, auto);
  }
  .work-card:nth-child(1) { grid-column: span 7; grid-row: span 2; }
  .work-card:nth-child(2) { grid-column: span 5; grid-row: span 1; }
  .work-card:nth-child(3) { grid-column: span 5; grid-row: span 1; }
  .work-card:nth-child(4) { grid-column: span 12; grid-row: span 1; }
}
.work-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 24px 56px -28px rgba(10,10,10,0.20);
  isolation: isolate;
  transition: transform .55s var(--ease-soft), box-shadow .55s var(--ease-soft);
  min-height: 320px;
  display: block;
}
.work-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 60px 110px -30px rgba(10,10,10,0.30);
}
.work-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.65) contrast(1.05) brightness(0.96);
  transition: transform .9s var(--ease-soft), filter .55s;
}
.work-card:hover .work-img {
  transform: scale(1.06);
  filter: saturate(0.9) contrast(1.08) brightness(1);
}
.work-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(10,10,10,0.55) 100%);
  pointer-events: none;
}
.work-meta {
  position: absolute;
  left: 1.4rem; right: 1.4rem; bottom: 1.4rem;
  color: #fff;
  display: flex; flex-direction: column; gap: 0.3rem;
}
.work-meta .kicker {
  color: rgba(255,255,255,0.65);
}
.work-meta h3 {
  font-size: clamp(1.4rem, 2.2vw, 1.95rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #fff;
}
.work-meta p {
  color: rgba(255,255,255,0.78);
  font-size: 0.92rem;
  max-width: 50ch;
}
.work-meta-arrow {
  position: absolute;
  right: 1.4rem; top: 1.4rem;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.92);
  color: var(--ink);
  border-radius: 50%;
  transition: transform .45s var(--ease-soft);
}
.work-card:hover .work-meta-arrow { transform: rotate(-45deg) scale(1.08); }

/* Work empty state — when there are no case studies yet */
/* Case-study cards — visual previews without clickable links */
.work-grid--cases {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.6rem, 3vw, 2.4rem);
  grid-auto-rows: auto !important;
}
@media (min-width: 720px) {
  .work-grid--cases {
    grid-template-columns: repeat(2, 1fr);
  }
}
.work-grid--cases .work-card,
.work-grid--cases [data-span] { grid-column: auto !important; grid-row: auto !important; }

.work-case {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  cursor: default;
}
.work-case-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: clamp(14px, 1.6vw, 22px);
  background: rgba(10,10,10,0.04);
  border: 1px solid var(--line);
  box-shadow: 0 24px 50px -28px rgba(10,10,10,0.18), 0 6px 14px -8px rgba(10,10,10,0.08);
  transition: transform .6s var(--ease-soft), box-shadow .6s var(--ease-soft);
}
.work-case-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.9s var(--ease-soft);
}
.work-case:hover .work-case-preview {
  transform: translateY(-3px);
  box-shadow: 0 32px 60px -28px rgba(10,10,10,0.24), 0 10px 18px -8px rgba(10,10,10,0.10);
}
.work-case:hover .work-case-preview img {
  transform: scale(1.02);
}
.work-case-meta {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0 0.3rem;
}
.work-case-kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.work-case h3 {
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.work-case p {
  font-size: 0.95rem;
  color: var(--ink-mid);
  line-height: 1.55;
  max-width: 56ch;
}

.work-empty {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(2.5rem, 7vh, 5rem) clamp(1rem, 4vw, 3rem);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--line);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 24px 48px -28px rgba(10,10,10,0.14);
  max-width: 720px;
  margin-inline: auto;
}
.work-empty-glyph {
  width: 88px; height: 88px;
  margin-bottom: 1.3rem;
  color: var(--ink);
  opacity: 0.85;
}
.work-empty-glyph svg { width: 100%; height: 100%; }
.work-empty-needle {
  animation: workNeedleSearch 6s ease-in-out infinite;
  transform-origin: 32px 32px !important;
}
@keyframes workNeedleSearch {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-22deg); }
  55%      { transform: rotate(15deg); }
  80%      { transform: rotate(-4deg); }
}
.work-empty-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mid);
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,0.6);
  margin-bottom: 1rem;
}
.work-empty h3 {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-bottom: 0.6rem;
}
.work-empty p {
  color: var(--ink-mid);
  font-size: 0.98rem;
  line-height: 1.6;
  max-width: 52ch;
  margin-bottom: 1.4rem;
}
.work-empty-cta { padding: 0.85rem 1.4rem; }

/* ============================================================
   STATS
   ============================================================ */
.section-stats { padding-block: clamp(3rem, 6vh, 5rem); }
.stats-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
}
@media (min-width: 720px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
.stat {
  background: rgba(255,255,255,0.6);
  padding: 1.8rem 1.4rem;
  text-align: center;
  display: flex; flex-direction: column; gap: 0.3rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.stat-n {
  font-family: var(--sans);
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
}
.stat-n em {
  font-family: var(--serif);
  font-style: italic; font-weight: 400;
  color: var(--ink-mid);
}
.stat-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink-mute);
  text-transform: uppercase;
  margin-top: 0.4rem;
}

/* ============================================================
   ESTUDIO — team
   ============================================================ */
.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  max-width: 880px;
  margin-inline: auto;
}
@media (min-width: 720px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
}
.team-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper);
  isolation: isolate;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 30px 60px -30px rgba(10,10,10,0.18);
  transition: transform .55s var(--ease-soft);
}
.team-card:hover { transform: translateY(-3px); }
.team-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  background: #ececea;
  overflow: hidden;
}
.team-photo img {
  width: 100%; height: 100%;
  /* Source photos are full-body 2:3 portraits — favor the upper third
     so faces stay visible; feet crop cleanly at the bottom. */
  object-fit: cover;
  object-position: center 18%;
  filter: grayscale(1) contrast(1.05) brightness(1.02);
  transition: filter .8s, transform .9s var(--ease-soft);
}
.team-card:hover .team-photo img {
  filter: grayscale(0.15) contrast(1.05);
  transform: scale(1.04);
}
.team-info {
  padding: 1.4rem 1.5rem 1.6rem;
  display: flex; flex-direction: column; gap: 0.45rem;
}
.team-info h3 {
  font-size: 1.4rem; font-weight: 600;
  letter-spacing: -0.025em;
}
.team-role {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.team-bio {
  color: var(--ink-mid);
  font-size: 0.95rem; line-height: 1.55;
  margin-top: 0.4rem;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-list {
  list-style: none; padding: 0; margin: 0;
  border-top: 1px solid var(--line);
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.4rem;
  padding: 1.4rem 0.2rem;
  text-align: left;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  transition: color .25s;
}
.faq-q:hover { color: var(--ink-mid); }
.faq-q-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  flex: 0 0 auto;
  position: relative;
  transition: transform .4s var(--ease-soft), background .3s;
}
.faq-q-icon::before, .faq-q-icon::after {
  content: ""; position: absolute;
  background: var(--ink);
  border-radius: 1px;
  transition: transform .35s var(--ease-out);
}
.faq-q-icon::before { width: 12px; height: 1.4px; }
.faq-q-icon::after  { width: 1.4px; height: 12px; }
.faq-item.is-open .faq-q-icon { background: var(--ink); }
.faq-item.is-open .faq-q-icon::before,
.faq-item.is-open .faq-q-icon::after { background: var(--bg); }
.faq-item.is-open .faq-q-icon::after { transform: scaleY(0); }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--ease-out);
}
.faq-a > div { overflow: hidden; }
.faq-a p {
  padding: 0 0 1.4rem;
  color: var(--ink-mid);
  max-width: 68ch;
  font-size: 0.98rem;
  line-height: 1.6;
}
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }

/* ============================================================
   CONTACTO
   ============================================================ */
.section-contact { padding-bottom: clamp(5rem, 12vh, 8rem); }
.contact-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: clamp(1.6rem, 4vw, 3rem);
  border-radius: var(--radius-xl);
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 60px 120px -40px rgba(10,10,10,0.25),
    0 24px 60px -30px rgba(10,10,10,0.15);
  overflow: hidden;
  isolation: isolate;
}
@supports not (backdrop-filter: blur(10px)) {
  .contact-card { background: rgba(255,255,255,0.92); }
}
@media (min-width: 960px) {
  .contact-card { grid-template-columns: 1fr 1.05fr; gap: 3rem; align-items: stretch; }
}
.contact-aura {
  position: absolute; inset: -30%;
  background:
    radial-gradient(40% 35% at 20% 80%, rgba(245,214,192,0.6), transparent 60%),
    radial-gradient(40% 35% at 80% 20%, rgba(201,214,240,0.6), transparent 60%);
  filter: blur(60px);
  pointer-events: none;
  z-index: -1;
  opacity: 0.9;
}
.contact-left { display: flex; flex-direction: column; gap: 1.2rem; }
.contact-title {
  font-size: clamp(2.2rem, 4vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  max-width: 16ch;
}
.contact-title em {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 100;
}
.contact-lead {
  color: var(--ink-mid);
  font-size: 1rem; line-height: 1.6;
  max-width: 44ch;
}
.contact-meta {
  list-style: none; padding: 0; margin-top: 1rem;
  display: flex; flex-direction: column; gap: 0.8rem;
  border-top: 1px solid var(--line);
  padding-top: 1.2rem;
}
.contact-meta li {
  display: grid; grid-template-columns: 100px 1fr; gap: 1rem; align-items: baseline;
  font-size: 0.95rem;
}
.cm-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.contact-meta a:hover { color: var(--ink-mid); text-decoration: underline; text-underline-offset: 3px; }

/* Form */
.contact-right { position: relative; }
.contact-form {
  display: flex; flex-direction: column; gap: 0.85rem;
  padding: 1.5rem;
  border-radius: var(--radius);
  transition: opacity .5s, transform .5s var(--ease-soft);
}
.contact-form.is-sent { opacity: 0; transform: translateY(-12px); pointer-events: none; }

.field {
  position: relative;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.35rem 1rem 0.55rem;
  font-size: 0.96rem;
  color: var(--ink);
  transition: border-color .25s, background .25s, box-shadow .25s;
  outline: none;
}
.field textarea { resize: vertical; min-height: 120px; padding-top: 1.5rem; }
.field select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.4rem; }
.field-select::after {
  content: ""; position: absolute; right: 1rem; top: 50%;
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--ink-mid);
  border-bottom: 1.5px solid var(--ink-mid);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--ink);
  background: rgba(255,255,255,0.95);
  box-shadow: 0 0 0 3px rgba(10,10,10,0.08);
}
.field label {
  position: absolute;
  left: 1rem; top: 1rem;
  font-family: var(--sans);
  font-size: 0.96rem;
  color: var(--ink-faint);
  pointer-events: none;
  transform-origin: left top;
  transition: transform .25s var(--ease-out), color .25s;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label,
.field-select select:focus + label,
.field-select.has-value label {
  transform: translateY(-9px) scale(0.78);
  color: var(--ink-mid);
}
/* Textarea label: top-aligned, not vertically centered */
.field-textarea label { top: 1.05rem; transform: none; }
.field-textarea textarea:focus + label,
.field-textarea textarea:not(:placeholder-shown) + label {
  transform: translateY(-6px) scale(0.78);
}
/* Select: hide native arrow space, keep label clean */
.field-select select { color: var(--ink); }
.field-select:not(.has-value) select { color: transparent; }
.field-select:not(.has-value) select:focus { color: var(--ink); }

.btn-submit {
  margin-top: 0.4rem;
  position: relative;
  overflow: hidden;
}
.btn-submit svg { width: 14px; height: 14px; }
.cta-form-spinner {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  opacity: 0; pointer-events: none;
}
.cta-form-spinner::after {
  content: ""; width: 18px; height: 18px;
  border: 1.5px solid rgba(255,255,255,0.25); border-top-color: var(--bg);
  border-radius: 50%; animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.contact-form.is-sending .cta-form-label,
.contact-form.is-sending .cta-form-arrow { opacity: 0; }
.contact-form.is-sending .cta-form-spinner { opacity: 1; }

.contact-priv {
  font-size: 0.78rem;
  color: var(--ink-faint);
  text-align: center;
  margin-top: 0.4rem;
}

.contact-success {
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
  text-align: center;
  padding: 2rem;
  opacity: 0; pointer-events: none;
  transition: opacity .6s var(--ease-out) .15s;
}
.contact-success.is-visible { opacity: 1; pointer-events: auto; }
.cs-check {
  width: 56px; height: 56px;
  margin: 0 auto 1rem;
  color: var(--ink);
}
.cs-check path {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  transition: stroke-dashoffset .8s var(--ease-out) .3s;
}
.contact-success.is-visible .cs-check path { stroke-dashoffset: 0; }
.contact-success h3 {
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-bottom: 0.4rem;
}
.contact-success p {
  color: var(--ink-mid);
  max-width: 36ch;
  margin: 0 auto;
}

/* Floating "Ver planes" CTA — sticky after hero, hides inside Planes/Contacto */
.cta-floating {
  position: fixed;
  bottom: 1.4rem;
  left: 50%;
  z-index: 95;
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.85rem 1.3rem 0.85rem 1.15rem;
  background: var(--ink);
  color: var(--bg);
  border-radius: 999px;
  border: 1px solid var(--ink);
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: -0.005em;
  text-decoration: none;
  box-shadow:
    0 22px 50px -18px rgba(10, 10, 10, 0.45),
    0 8px 20px -8px rgba(10, 10, 10, 0.30);
  opacity: 0;
  transform: translate(-50%, 20px) scale(0.96);
  pointer-events: none;
  transition:
    opacity .45s var(--ease-out),
    transform .55s var(--ease-soft),
    box-shadow .35s var(--ease-soft);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.cta-floating.is-visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  pointer-events: auto;
}
.cta-floating:hover {
  transform: translate(-50%, -3px) scale(1.02);
  box-shadow:
    0 30px 70px -20px rgba(10, 10, 10, 0.55),
    0 10px 24px -10px rgba(10, 10, 10, 0.35);
}
.cta-floating svg { width: 14px; height: 14px; }
.cta-floating .cf-arrow { transition: transform .35s var(--ease-soft); }
.cta-floating:hover .cf-arrow { transform: translateX(3px); }

@media (max-width: 540px) {
  .cta-floating {
    bottom: 1rem;
    padding: 0.75rem 1.1rem 0.75rem 1rem;
    font-size: 0.85rem;
  }
  .cta-floating svg { width: 13px; height: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-floating { transition: opacity .3s; }
  .cta-floating, .cta-floating.is-visible { transform: translate(-50%, 0); }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  border-top: 1px solid var(--line);
  background: rgba(250,250,250,0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding-block: 3rem 2rem;
  margin-top: clamp(2rem, 5vh, 4rem);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 3rem; }
}
.footer a {
  display: block;
  font-size: 0.92rem;
  color: var(--ink-mid);
  padding: 0.25rem 0;
  transition: color .25s;
}
.footer a:hover { color: var(--ink); }
.footer-brand {
  display: flex; flex-direction: column; gap: 0.7rem;
}
.footer-logo { width: 28px; height: 28px; color: var(--ink); }
.footer-brand p {
  font-size: 0.9rem;
  color: var(--ink-mid);
  line-height: 1.5;
}
.footer-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.8rem;
}
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.8rem;
  border-top: 1px solid var(--line);
  margin-top: 2.5rem; padding-top: 1.4rem;
  font-size: 0.82rem;
  color: var(--ink-faint);
}

/* ============================================================
   LEGAL PAGES — long-form static documents
   ============================================================ */
.legal-page {
  padding-top: clamp(7rem, 14vh, 10rem);
  padding-bottom: clamp(4rem, 9vh, 6rem);
  padding-inline: var(--gutter);
  max-width: 760px;
  margin-inline: auto;
}
.legal-head {
  margin-bottom: clamp(2.5rem, 5vh, 4rem);
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--line);
}
.legal-head .kicker {
  margin-bottom: 1rem;
}
.legal-head h1 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin-bottom: 0.7rem;
}
.legal-meta {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.05em;
}
.legal-doc section { margin-top: clamp(1.8rem, 4vh, 2.6rem); }
.legal-doc h2 {
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 0.7rem;
  color: var(--ink);
}
.legal-doc p {
  color: var(--ink-mid);
  font-size: 0.98rem;
  line-height: 1.7;
  margin-bottom: 1rem;
  max-width: 68ch;
}
.legal-doc ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.2rem;
  color: var(--ink-mid);
  font-size: 0.98rem;
  line-height: 1.7;
}
.legal-doc li {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: 0.4rem;
}
.legal-doc li::before {
  content: ""; position: absolute;
  left: 0.1rem; top: 0.75em;
  width: 5px; height: 1.5px;
  background: var(--ink-mid);
}
.legal-doc a {
  color: var(--ink);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 1px;
  transition: opacity .25s;
}
.legal-doc a:hover { opacity: 0.7; }
.legal-doc strong { color: var(--ink); font-weight: 600; }

/* ============================================================
   REVEAL utilities
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease-soft), transform .9s var(--ease-soft);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

/* Defensive: split-text elements must always be visible (gotcha A.4.5) */
[data-split] {
  opacity: 1; transform: none;
}
.split-word, .split-char {
  display: inline-block;
  will-change: transform;
}

/* ============================================================
   RESPONSIVE TWEAKS
   ============================================================ */
@media (max-width: 720px) {
  .nav::before { inset: 0.4rem 0.8rem; }
  .section { padding-block: 3.5rem; }
  .stats-grid { border-radius: var(--radius); }
}

/* ============================================================
   REDUCED MOTION — only INTRUSIVE
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .splash-logo { animation: none; }
  .bg-mesh { animation: none; }
  .hero-dot { animation: none; box-shadow: 0 0 0 4px rgba(16,185,129,0.12); }
  /* Do NOT disable hover, tilt, transitions, reveals, magnetic */
}

/* ============================================================
   SCROLL INDICATOR — vertical, on the right edge of the hero.
   Stays out of the way of Stack & herramientas content.
   Fades as the user scrolls past it.
   ============================================================ */
.scroll-indicator {
  position: absolute;
  right: 20px;
  bottom: 28px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--ink-mid);
  text-decoration: none;
  transition: opacity 0.45s var(--ease-out);
  z-index: 4;
  cursor: pointer;
  /* Hide the label on the indicator by rotating it vertically */
}
.scroll-indicator-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-mute);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.scroll-indicator-track {
  position: relative;
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom, transparent, var(--ink-mute) 30%, var(--ink-mute));
}
.scroll-indicator-dot {
  position: absolute;
  left: 50%;
  top: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink);
  transform: translate(-50%, 0);
  animation: scrollIndDot 2s var(--ease-soft) infinite;
}
@keyframes scrollIndDot {
  0%   { transform: translate(-50%, -4px); opacity: 0; }
  25%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translate(-50%, 40px); opacity: 0; }
}
.scroll-indicator:hover .scroll-indicator-label { color: var(--ink); }
/* Hide entirely on portrait / mobile — useless on touch where the
   gesture is obvious and it can overlap content. */
@media (max-width: 900px), (orientation: portrait) {
  .scroll-indicator { display: none; }
}

/* ============================================================
   MOBILE TYPOGRAPHY — italic Fraunces at smaller sizes needs
   a heavier weight and a smaller optical-size axis value so the
   glyphs stop looking decorative and stay readable.
   ============================================================ */
@media (max-width: 768px) {
  /* Keep italic weight/axes identical to desktop — only fix the wrap
     orphans (e.g. "y código" / "resultados claros" dropping alone). */
  .section-title,
  .contact-title {
    max-width: none;
    text-wrap: pretty;
  }
  .hero-title { text-wrap: pretty; }
}

/* ============================================================
   HERO STATS — mobile redesign as spec rows
   3 columns squeezed at 360px reads cramped; switch to vertical
   spec rows: value on the left, label on the right.
   ============================================================ */
@media (max-width: 540px) {
  .hero-stats {
    grid-template-columns: 1fr;
    padding-top: 1.2rem;
    gap: 0;
  }
  .hero-stats li {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 0.75rem 0;
    padding-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .hero-stats li:last-child { border-bottom: 0; }
  .hero-stats li + li {
    padding-left: 0;
    border-left: 0;
  }
  .hs-value {
    font-size: 0.98rem;
    flex: 0 0 auto;
  }
  .hs-label {
    font-size: 0.78rem;
    text-align: right;
    min-height: 0;
    line-height: 1.3;
    color: var(--ink-mute);
    max-width: 60%;
  }
}

/* ============================================================
   NAMING / ETYMOLOGY BLOCK
   A quiet typographic note placed at the end of the Estudio section.
   Spec-style, monospace labels, never marketing copy.
   ============================================================ */
.naming-mark {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding: clamp(1.8rem, 3.5vw, 2.6rem) clamp(1.4rem, 3vw, 2.4rem);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.25));
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 1.4fr;
  gap: clamp(1.4rem, 4vw, 3rem);
  align-items: center;
}
.naming-kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-mute);
  grid-column: 1 / -1;
  margin: 0 0 0.4rem;
}
.naming-word {
  display: flex;
  align-items: baseline;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(2.2rem, 5.5vw, 3.4rem);
  letter-spacing: -0.04em;
  color: var(--ink);
  line-height: 1;
}
.naming-word .nm-nor {
  position: relative;
}
.naming-word .nm-nor::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -8px;
  height: 2px;
  background: var(--ink);
  opacity: 0.85;
}
.naming-word .nm-vex {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  color: var(--ink-mid);
  padding-inline: 0.04em;
}
.naming-word .nm-s {
  color: var(--ink);
  margin-left: 0.06em;
}
.naming-grid {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.naming-grid li {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: baseline;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px dashed var(--line);
}
.naming-grid li:last-child { border-bottom: 0; }
.naming-token {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-transform: lowercase;
}
.naming-meaning {
  font-size: 0.92rem;
  color: var(--ink-mid);
  letter-spacing: -0.005em;
  line-height: 1.45;
}
@media (max-width: 720px) {
  .naming-mark {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
  .naming-grid li {
    grid-template-columns: 56px 1fr;
    gap: 0.85rem;
  }
  .naming-meaning { font-size: 0.86rem; }
}

/* ============================================================
   MOBILE PERFORMANCE — heavy GPU effects pruned on touch devices
   Backdrop-filter blur + saturate is extremely costly on mobile.
   We keep the glass aesthetic with a semi-opaque background instead.
   ============================================================ */
@media (hover: none), (pointer: coarse) {
  /* Disable backdrop-filter everywhere on touch — biggest single win */
  .nav,
  .nav-mobile,
  .lang-toggle,
  .service,
  .pricing-card,
  .team-card,
  .faq-item,
  .contact-card,
  .contact-form,
  .glass,
  .work-empty,
  .cta-floating,
  .pricing-badge {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Compensate with slightly more opaque backgrounds for glass cards */
  .nav { background: rgba(250,250,250,0.92); }
  .nav.is-scrolled { background: rgba(250,250,250,0.96); }
  .service, .pricing-card, .team-card, .contact-form, .glass, .work-empty {
    background-color: rgba(255,255,255,0.92);
  }
  /* Heavy aura blurs cut down ~5× — visually similar, fraction of GPU cost */
  .hero-aura,
  .contact-aura,
  .bg-mesh {
    filter: blur(28px) !important;
  }
  .pricing-card--featured::before,
  .service::after,
  .orb-halo,
  .hero-orb::before,
  .hero-orb::after,
  .contact-card::before,
  .work-empty::before {
    filter: blur(20px) !important;
  }
  /* mix-blend-mode is expensive on Mali/Adreno — drop it on the orb stage */
  .orb-stage { mix-blend-mode: normal !important; }
  /* Grain layer adds little on small screens, costs a full-screen blend */
  .bg-grain { display: none !important; }
  /* Disable will-change on idle layers — prevents constant layer promotion */
  .cursor, .magnetic-inner { will-change: auto !important; }
  /* Hide custom cursor on touch (already gated in JS, but belt-and-braces) */
  .cursor { display: none !important; }
}